diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
new file mode 100644
index 0000000..bb89f25
--- /dev/null
+++ b/src/layouts/LoginLayout.vue
@@ -0,0 +1,51 @@
+<template>
+  <main>
+    <b-container class="login-container" fluid>
+      <b-row class="login-row" align-v="center">
+        <b-col class="login-branding mt-5 mb-5 text-center" md="6">
+          <div class="login-branding__container">
+            <img
+              class="logo"
+              width="200px"
+              src="@/assets/images/openbmc-logo.svg"
+              alt=""
+            />
+            <h1>OpenBMC</h1>
+          </div>
+        </b-col>
+        <b-col md="6">
+          <router-view />
+        </b-col>
+      </b-row>
+    </b-container>
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'LoginLayout'
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
+.login-container {
+  @include media-breakpoint-up(md) {
+    background: linear-gradient(to right, $light 50%, $container-bgd 50%);
+  }
+}
+
+.login-row {
+  @include media-breakpoint-up(md) {
+    min-height: 100vh;
+  }
+}
+
+.login-branding__container {
+  @include media-breakpoint-up(md) {
+    float: right;
+    margin-right: 4rem;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 22662d7..73f3186 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@
 import VueRouter from 'vue-router';
 import store from '../store/index';
 import AppLayout from '../layouts/AppLayout.vue';
+import LoginLayout from '@/layouts/LoginLayout';
 
 Vue.use(VueRouter);
 
@@ -131,11 +132,17 @@
   },
   {
     path: '/login',
-    name: 'login',
-    component: () => import('@/views/Login'),
-    meta: {
-      title: 'appPageTitle.login'
-    }
+    component: LoginLayout,
+    children: [
+      {
+        path: '',
+        name: 'login',
+        component: () => import('@/views/Login'),
+        meta: {
+          title: 'appPageTitle.login'
+        }
+      }
+    ]
   }
 ];
 
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 730c7a9..369c56d 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,89 +1,68 @@
 <template>
-  <main>
-    <b-container class="login-container" fluid>
-      <b-row class="login-row" align-v="center">
-        <b-col class="login-branding mt-5 mb-5" md="6">
-          <div class="login-branding__container">
-            <img
-              class="logo"
-              width="200px"
-              src="@/assets/images/openbmc-logo.svg"
-              alt=""
-            />
-            <h1>OpenBMC</h1>
-          </div>
-        </b-col>
-        <b-col md="6">
-          <b-form class="login-form" novalidate @submit.prevent="login">
-            <alert class="login-error" :show="authError" variant="danger">
-              <p id="login-error-alert">
-                {{ $t('pageLogin.alert.message') }}
-              </p>
-            </alert>
-            <b-form-group
-              label-for="language"
-              :label="$t('pageLogin.language')"
-            >
-              <b-form-select
-                id="language"
-                v-model="$i18n.locale"
-                :options="languages"
-                data-test-id="login-select-language"
-              ></b-form-select>
-            </b-form-group>
-            <b-form-group
-              label-for="username"
-              :label="$t('pageLogin.username')"
-            >
-              <b-form-input
-                id="username"
-                v-model="userInfo.username"
-                aria-describedby="login-error-alert username-required"
-                :state="getValidationState($v.userInfo.username)"
-                type="text"
-                autofocus="autofocus"
-                data-test-id="login-input-username"
-                @input="$v.userInfo.username.$touch()"
-              >
-              </b-form-input>
-              <b-form-invalid-feedback id="username-required" role="alert">
-                <template v-if="!$v.userInfo.username.required">
-                  {{ $t('global.form.fieldRequired') }}
-                </template>
-              </b-form-invalid-feedback>
-            </b-form-group>
-            <div class="login-form__section">
-              <label for="password">{{ $t('pageLogin.password') }}</label>
-              <b-form-input
-                id="password"
-                v-model="userInfo.password"
-                aria-describedby="login-error-alert password-required"
-                :state="getValidationState($v.userInfo.password)"
-                type="password"
-                data-test-id="login-input-password"
-                @input="$v.userInfo.password.$touch()"
-              >
-              </b-form-input>
-              <b-form-invalid-feedback id="password-required" role="alert">
-                <template v-if="!$v.userInfo.password.required">
-                  {{ $t('global.form.fieldRequired') }}
-                </template>
-              </b-form-invalid-feedback>
-            </div>
-            <b-button
-              block
-              class="mt-5"
-              type="submit"
-              variant="primary"
-              data-test-id="login-button-submit"
-              :disabled="disableSubmitButton"
-              >{{ $t('pageLogin.logIn') }}</b-button
-            >
-          </b-form>
-        </b-col>
-      </b-row>
-    </b-container>
-  </main>
+  <b-form
+    class="login-form  mx-auto ml-md-5 mb-3"
+    novalidate
+    @submit.prevent="login"
+  >
+    <alert class="login-error mb-4" :show="authError" variant="danger">
+      <p id="login-error-alert">
+        {{ $t('pageLogin.alert.message') }}
+      </p>
+    </alert>
+    <b-form-group label-for="language" :label="$t('pageLogin.language')">
+      <b-form-select
+        id="language"
+        v-model="$i18n.locale"
+        :options="languages"
+        data-test-id="login-select-language"
+      ></b-form-select>
+    </b-form-group>
+    <b-form-group label-for="username" :label="$t('pageLogin.username')">
+      <b-form-input
+        id="username"
+        v-model="userInfo.username"
+        aria-describedby="login-error-alert username-required"
+        :state="getValidationState($v.userInfo.username)"
+        type="text"
+        autofocus="autofocus"
+        data-test-id="login-input-username"
+        @input="$v.userInfo.username.$touch()"
+      >
+      </b-form-input>
+      <b-form-invalid-feedback id="username-required" role="alert">
+        <template v-if="!$v.userInfo.username.required">
+          {{ $t('global.form.fieldRequired') }}
+        </template>
+      </b-form-invalid-feedback>
+    </b-form-group>
+    <div class="login-form__section mb-3">
+      <label for="password">{{ $t('pageLogin.password') }}</label>
+      <b-form-input
+        id="password"
+        v-model="userInfo.password"
+        aria-describedby="login-error-alert password-required"
+        :state="getValidationState($v.userInfo.password)"
+        type="password"
+        data-test-id="login-input-password"
+        @input="$v.userInfo.password.$touch()"
+      >
+      </b-form-input>
+      <b-form-invalid-feedback id="password-required" role="alert">
+        <template v-if="!$v.userInfo.password.required">
+          {{ $t('global.form.fieldRequired') }}
+        </template>
+      </b-form-invalid-feedback>
+    </div>
+    <b-button
+      block
+      class="mt-5"
+      type="submit"
+      variant="primary"
+      data-test-id="login-button-submit"
+      :disabled="disableSubmitButton"
+      >{{ $t('pageLogin.logIn') }}</b-button
+    >
+  </b-form>
 </template>
 
 <script>
@@ -154,46 +133,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
-.login-container {
-  @include media-breakpoint-up(md) {
-    background: linear-gradient(to right, $light 50%, $container-bgd 50%);
-  }
-}
-
-.login-row {
-  @include media-breakpoint-up(md) {
-    min-height: 100vh;
-  }
-}
-
-.login-branding__container {
-  @include media-breakpoint-up(md) {
-    float: right;
-    margin-right: 4rem;
-  }
-}
-
 .login-form {
   max-width: 360px;
-  margin-right: auto;
-  margin-left: auto;
-
-  @include media-breakpoint-up(md) {
-    margin-left: 4rem;
-  }
-}
-
-.login-form__section {
-  margin-bottom: $spacer;
-}
-
-.alert.login-error {
-  margin-bottom: $spacer * 2;
-}
-
-.login-branding {
-  text-align: center;
 }
 </style>