diff --git a/src/assets/images/built-on-openbmc-logo.svg b/src/assets/images/built-on-openbmc-logo.svg
new file mode 100644
index 0000000..53e7fdc
--- /dev/null
+++ b/src/assets/images/built-on-openbmc-logo.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="615.034" height="606.872" viewBox="88.47 5 615.034 606.872">
+  <path fill="#A7A8AB" d="M703.504 524.604c-10.908-23.902-39.128-34.437-63.03-23.528s-34.437 39.128-23.528 63.03 39.128 34.437 63.031 23.528a47.578 47.578 0 0022.916-22.239l-9.51-4.513c-9.083 18.301-31.281 25.773-49.582 16.69s-25.772-31.282-16.689-49.583c9.083-18.3 31.281-25.772 49.582-16.689a36.994 36.994 0 0117.225 17.816l9.585-4.512z"/>
+  <path fill="#579AC8" d="M256.378 213.7a136.858 136.858 0 0029.599 85.178c-.255.739-.382 1.529-.561 2.294a27.54 27.54 0 00-.867 6.553c0 15.487 12.556 28.044 28.044 28.044s28.044-12.557 28.044-28.044c0-15.489-12.556-28.045-28.044-28.045a27.219 27.219 0 00-3.06.179c-.79 0-1.555.204-2.32.331-36.755-47.793-27.808-116.333 19.986-153.088a109.135 109.135 0 0116.115-10.282V10.277l-1.963.536a204.136 204.136 0 00-18.152 5.609c-3.289 1.198-6.578 2.549-9.79 3.773v82.169l-.332.255A137.14 137.14 0 00256.378 213.7z"/>
+  <path fill="#579AC8" d="M395.146 251.228c-20.315.016-36.857-16.322-37.095-36.636H327.1c.124 31.721 22.467 59.011 53.539 65.394v115.619c-99.899-7.141-175.094-93.913-167.954-193.811a181.344 181.344 0 0138.721-99.659c.791.153 1.606.255 2.55.332.943.076 1.631 0 2.549 0 15.249.036 27.64-12.296 27.676-27.545.037-15.249-12.295-27.64-27.544-27.676-15.249-.037-27.64 12.295-27.677 27.544a27.607 27.607 0 001.413 8.785c-72.331 90.409-57.675 222.336 32.735 294.667a209.641 209.641 0 00130.89 45.941c3.595 0 7.165-.153 10.708-.356l4.156-.229V248.653a36.9 36.9 0 01-13.716 2.575z"/>
+  <path fill="#A3CE4D" d="M526.877 179.741a137.108 137.108 0 00-25.112-50.25c.337-1.088.609-2.194.815-3.314.391-1.819.596-3.672.612-5.532-.006-15.488-12.566-28.04-28.055-28.034-15.488.006-28.04 12.567-28.033 28.055.006 15.488 12.566 28.04 28.055 28.033 1.802 0 3.6-.175 5.368-.521 36.745 47.818 27.769 116.371-20.05 153.116a109.15 109.15 0 01-16.076 10.253v106.466a212.604 212.604 0 008.158-2.218 209.772 209.772 0 0021.747-7.648v-82.144c46.035-33.228 66.902-91.341 52.52-146.263h.051z"/>
+  <path fill="#A3CE4D" d="M559.204 343.442c71.162-91.297 54.84-222.996-36.457-294.157A209.588 209.588 0 00393.896 5c-4.181 0-8.311.153-12.416.408h-.28v174.358a37.046 37.046 0 0113.232-2.728h.688c20.5-.056 37.166 16.517 37.222 37.018V214.668h28.248c-.067-30.889-21.298-57.705-51.347-64.859v-116c99.813 8.435 173.888 96.185 165.453 195.997a181.375 181.375 0 01-37.495 95.994h-.179c-15.327-2.225-29.557 8.397-31.781 23.725a28.227 28.227 0 00-.291 4.014c0 15.488 12.557 28.044 28.045 28.044 15.488-.008 28.038-12.569 28.03-28.058a28.06 28.06 0 00-1.159-7.967 16.997 16.997 0 00-.662-2.116z"/>
+  <path fill="#A7A8AB" d="M601.5 589.998v-91.194h-11.957l-37.044 75.183-37.044-75.183h-12.109v91.194h10.631v-69.371l34.264 69.371h8.516l34.239-69.371v69.371z"/>
+  <path fill="#636567" d="M393.973 531.31a27.02 27.02 0 00-20.141-8.516 25.878 25.878 0 00-10.606 2.116 40.606 40.606 0 00-9.229 5.711v-6.884h-10.784v66.286h10.784v-37.706a19.726 19.726 0 015.303-14.022c7.39-7.505 19.463-7.599 26.968-.209l.209.209a19.783 19.783 0 015.303 13.971v37.682h10.478v-38.242a28.352 28.352 0 00-8.26-20.396M250.846 572.101a31.638 31.638 0 01-12.391 13.181 34.52 34.52 0 01-17.846 4.717h-16.011v21.874H194.4v-88.135h25.75a34.186 34.186 0 0124.398 9.586c10.573 10.042 13.149 25.905 6.298 38.777m-46.247 8.26h14.71a24.178 24.178 0 0017.184-6.73 21.899 21.899 0 007.036-16.674 21.362 21.362 0 00-6.883-16.342 24.037 24.037 0 00-17.03-6.399h-15.017v46.145zM334.367 560.246a11.65 11.65 0 00.357-3.468c0-18.814-15.985-34.061-35.693-34.061-19.707 0-35.692 15.297-35.692 34.061 0 18.765 15.985 34.062 35.692 34.062a35.695 35.695 0 0030.416-16.623l-8.286-6.246a25.215 25.215 0 01-22.129 12.747c-13.256.749-24.61-9.391-25.358-22.647s9.391-24.61 22.647-25.358a23.576 23.576 0 012.711 0 24.985 24.985 0 0123.838 16.673c0 .179.382 1.606.433 1.785H283.76v8.974l50.607.101zM173.113 544.388c0 20.459-16.585 37.044-37.044 37.044-20.458 0-37.044-16.585-37.044-37.044 0-20.458 16.585-37.043 37.044-37.043 20.459 0 37.044 16.585 37.044 37.043m10.504 0c0-26.273-21.299-47.572-47.573-47.572S88.47 518.114 88.47 544.388c0 26.274 21.299 47.573 47.573 47.573s47.574-21.299 47.574-47.573"/>
+  <path fill="#A7A8AB" d="M482.058 562.643c.028 9.532-7.677 17.282-17.209 17.311h-39.466v-34.622h39.491c9.526.042 17.223 7.784 17.209 17.312m-5.839-40.615c.001 7.123-5.752 12.909-12.874 12.951h-37.962v-25.928h37.859c7.129.027 12.889 5.822 12.875 12.951m2.397 17.082c9.51-8.376 10.429-22.875 2.053-32.384a22.952 22.952 0 00-16.56-7.771h-49.204v91.144H466.888c15.067-1.113 26.379-14.229 25.266-29.297a27.357 27.357 0 00-13.589-21.667"/>
+  <g fill="#99C248">
+    <path d="M101.054 479.658l8.647-50.502h14.193c3.789 0 6.487.241 8.095.724 2.503.735 4.432 2.102 5.788 4.1 1.354 1.998 2.032 4.467 2.032 7.406 0 2.963-.654 5.442-1.963 7.44s-3.273 3.515-5.891 4.548c2.044.688 3.68 1.929 4.909 3.721 1.229 1.791 1.843 3.881 1.843 6.27 0 3.261-.74 6.212-2.222 8.853-1.481 2.642-3.411 4.542-5.788 5.702-2.377 1.159-5.748 1.739-10.11 1.739h-19.533zm9.884-8.13h8.215c3.221 0 5.43-.229 6.626-.689 1.197-.459 2.198-1.303 3.003-2.531s1.208-2.612 1.208-4.151c0-1.813-.528-3.238-1.585-4.271s-2.722-1.551-4.996-1.551H113.21l-2.272 13.193zm3.786-21.978h6.513c2.849 0 4.894-.229 6.134-.688a5.744 5.744 0 002.929-2.377c.712-1.125 1.068-2.412 1.068-3.858 0-1.171-.265-2.164-.793-2.979s-1.195-1.361-2-1.637c-.805-.275-2.54-.413-5.207-.413h-6.586l-2.058 11.952zM148.174 443.073h8.144l-3.709 21.592c-.435 2.586-.652 4.206-.652 4.861 0 1.123.324 2.06.972 2.809.648.748 1.438 1.122 2.371 1.122 1.091 0 2.171-.39 3.24-1.171 1.5-1.079 2.694-2.485 3.581-4.22.887-1.734 1.645-4.255 2.273-7.562l3.245-17.432h8.143l-6.788 36.585h-7.618l.905-4.961c-3.299 3.858-6.859 5.788-10.681 5.788-2.411 0-4.328-.845-5.75-2.532-1.422-1.688-2.133-4.014-2.133-6.976 0-1.24.323-3.743.968-7.51l3.489-20.393zM184.179 443.073h8.096l-6.27 36.585h-8.096l6.27-36.585zm2.377-13.917h8.13l-1.55 8.957h-8.096l1.516-8.957zM194.1 479.658l8.647-50.502h8.13l-8.682 50.502H194.1zM211.703 450.411l1.316-7.338h4.193l1.019-5.855 9.445-6.914-2.32 12.77h5.122l-1.245 7.338h-5.202l-2.836 15.281c-.491 2.747-.736 4.343-.736 4.788 0 .82.218 1.43.655 1.828.437.398 1.188.598 2.256.598.339 0 1.273-.08 2.802-.241l-1.346 7.338a19.843 19.843 0 01-4.342.482c-2.824 0-4.936-.644-6.336-1.93s-2.1-3.169-2.1-5.649c0-1.148.369-3.743 1.106-7.785l2.694-14.71h-4.145zM246.634 464.467c0-5.994 1.354-11.093 4.065-15.296 3.008-4.616 7.36-6.924 13.056-6.924 4.271 0 7.676 1.446 10.214 4.341 2.537 2.894 3.807 6.924 3.807 12.091 0 6.063-1.58 11.213-4.737 15.45-3.158 4.237-7.286 6.356-12.384 6.356-4.157 0-7.533-1.436-10.128-4.307-2.596-2.869-3.893-6.774-3.893-11.711zm23.115-7.063c0-2.411-.57-4.306-1.709-5.684-1.139-1.378-2.583-2.067-4.333-2.067-1.473 0-2.854.506-4.144 1.516-1.289 1.011-2.417 2.768-3.383 5.271a21.43 21.43 0 00-1.45 7.786c0 2.732.593 4.856 1.778 6.373 1.186 1.516 2.653 2.273 4.402 2.273 2.21 0 4.085-1.172 5.628-3.514 2.141-3.215 3.211-7.2 3.211-11.954zM287.105 443.073h7.711l-.795 4.754c1.993-2.089 3.819-3.542 5.48-4.357 1.661-.814 3.373-1.223 5.137-1.223 2.405 0 4.329.838 5.771 2.514 1.443 1.676 2.165 3.972 2.165 6.887 0 1.263-.296 3.686-.887 7.269l-3.515 20.742h-8.143l3.56-20.738c.525-3.101.788-4.96.788-5.58 0-1.31-.315-2.313-.944-3.015-.629-.7-1.448-1.051-2.454-1.051-1.098 0-2.219.437-3.364 1.31-1.647 1.239-2.872 2.716-3.672 4.426-.801 1.712-1.604 4.921-2.412 9.629l-2.594 15.02h-8.095l6.263-36.587z"/>
+  </g>
+</svg>
diff --git a/src/assets/images/logo-login.svg b/src/assets/images/login-company-logo.svg
similarity index 100%
rename from src/assets/images/logo-login.svg
rename to src/assets/images/login-company-logo.svg
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 4e806fb..7211a59 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -130,7 +130,7 @@
   data() {
     return {
       isNavigationOpen: false,
-      altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`,
+      altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC',
     };
   },
   computed: {
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index c2b9af5..cdff204 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -1,23 +1,34 @@
 <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">
+    <div class="login-container">
+      <div class="login-main">
+        <div>
+          <div class="login-brand mb-5">
             <img
-              class="logo"
-              width="200px"
-              src="@/assets/images/logo-login.svg"
+              width="90px"
+              src="@/assets/images/login-company-logo.svg"
               :alt="altLogo"
             />
-            <h1>OpenBMC</h1>
           </div>
-        </b-col>
-        <b-col md="6">
-          <router-view />
-        </b-col>
-      </b-row>
-    </b-container>
+          <h1 v-if="customizableGuiName" class="h3 mb-5">
+            {{ customizableGuiName }}
+          </h1>
+          <router-view class="login=form form-background" />
+        </div>
+      </div>
+      <div class="login-aside">
+        <div class="login-aside__logo-brand">
+          <!-- Add Secondary brand logo if needed -->
+        </div>
+        <div class="login-aside__logo-bmc">
+          <img
+            height="60px"
+            src="@/assets/images/built-on-openbmc-logo.svg"
+            alt="Built on OpenBMC"
+          />
+        </div>
+      </div>
+    </div>
   </main>
 </template>
 
@@ -26,7 +37,8 @@
   name: 'LoginLayout',
   data() {
     return {
-      altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`,
+      altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC',
+      customizableGuiName: process.env.VUE_APP_GUI_NAME || '',
     };
   },
 };
@@ -34,25 +46,67 @@
 
 <style lang="scss" scoped>
 .login-container {
-  @include media-breakpoint-up(md) {
-    background: linear-gradient(
-      to right,
-      theme-color('light') 50%,
-      gray('200') 50%
-    );
+  background: gray('100');
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 2;
+  max-width: 1400px;
+  min-width: 320px;
+  min-height: 100vh;
+  justify-content: space-around;
+
+  @include media-breakpoint-up('md') {
+    background: $white;
+    flex-direction: row;
   }
 }
 
-.login-row {
-  @include media-breakpoint-up(md) {
+.login-main {
+  min-height: 50vh;
+  padding: $spacer * 3;
+
+  @include media-breakpoint-up('md') {
+    background: gray('100');
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 75%;
     min-height: 100vh;
+    justify-content: center;
+    align-items: center;
   }
 }
 
-.login-branding__container {
-  @include media-breakpoint-up(md) {
-    float: right;
-    margin-right: 4rem;
+.login-form {
+  @include media-breakpoint-up('md') {
+    max-width: 360px;
+  }
+}
+
+.login-aside {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: $spacer * 1.5;
+  margin-right: $spacer * 3;
+  margin-bottom: $spacer;
+
+  @include media-breakpoint-up('md') {
+    min-height: 100vh;
+    padding-bottom: $spacer;
+    flex: 1 1 25%;
+    margin-bottom: 0;
+  }
+}
+
+.login-aside__logo-brand:not(:empty) {
+  &::after {
+    content: '';
+    display: inline-block;
+    height: 2.5rem;
+    width: 2px;
+    background-color: gray('200');
+    margin-left: $spacer * 1.5;
+    vertical-align: middle;
   }
 }
 </style>
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index e431930..2440ace 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -1,71 +1,73 @@
 <template>
-  <div class="change-password-container mx-auto ml-md-5 mb-3">
+  <div class="change-password-container">
     <alert variant="danger" class="mb-4">
       <p v-if="changePasswordError">
         {{ $t('pageChangePassword.changePasswordError') }}
       </p>
       <p v-else>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p>
     </alert>
-    <dl>
-      <dt>{{ $t('pageChangePassword.username') }}</dt>
-      <dd>{{ username }}</dd>
-    </dl>
-    <b-form novalidate @submit.prevent="changePassword">
-      <b-form-group
-        label-for="password"
-        :label="$t('pageChangePassword.newPassword')"
-      >
-        <input-password-toggle>
-          <b-form-input
-            id="password"
-            v-model="form.password"
-            autofocus="autofocus"
-            type="password"
-            :state="getValidationState($v.form.password)"
-            class="form-control-with-button"
-            @change="$v.form.password.$touch()"
-          >
-          </b-form-input>
-          <b-form-invalid-feedback role="alert">
-            <template v-if="!$v.form.password.required">
-              {{ $t('global.form.fieldRequired') }}
-            </template>
-          </b-form-invalid-feedback>
-        </input-password-toggle>
-      </b-form-group>
-      <b-form-group
-        label-for="password-confirm"
-        :label="$t('pageChangePassword.confirmNewPassword')"
-      >
-        <input-password-toggle>
-          <b-form-input
-            id="password-confirm"
-            v-model="form.passwordConfirm"
-            type="password"
-            :state="getValidationState($v.form.passwordConfirm)"
-            class="form-control-with-button"
-            @change="$v.form.passwordConfirm.$touch()"
-          >
-          </b-form-input>
-          <b-form-invalid-feedback role="alert">
-            <template v-if="!$v.form.passwordConfirm.required">
-              {{ $t('global.form.fieldRequired') }}
-            </template>
-            <template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
-              {{ $t('global.form.passwordsDoNotMatch') }}
-            </template>
-          </b-form-invalid-feedback>
-        </input-password-toggle>
-      </b-form-group>
-      <div class="text-right">
-        <b-button type="button" variant="link" @click="goBack">
-          {{ $t('pageChangePassword.goBack') }}
-        </b-button>
-        <b-button type="submit" variant="primary">
-          {{ $t('pageChangePassword.changePassword') }}
-        </b-button>
-      </div>
-    </b-form>
+    <div class="change-password__form-container">
+      <dl>
+        <dt>{{ $t('pageChangePassword.username') }}</dt>
+        <dd>{{ username }}</dd>
+      </dl>
+      <b-form novalidate @submit.prevent="changePassword">
+        <b-form-group
+          label-for="password"
+          :label="$t('pageChangePassword.newPassword')"
+        >
+          <input-password-toggle>
+            <b-form-input
+              id="password"
+              v-model="form.password"
+              autofocus="autofocus"
+              type="password"
+              :state="getValidationState($v.form.password)"
+              class="form-control-with-button"
+              @change="$v.form.password.$touch()"
+            >
+            </b-form-input>
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.password.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+            </b-form-invalid-feedback>
+          </input-password-toggle>
+        </b-form-group>
+        <b-form-group
+          label-for="password-confirm"
+          :label="$t('pageChangePassword.confirmNewPassword')"
+        >
+          <input-password-toggle>
+            <b-form-input
+              id="password-confirm"
+              v-model="form.passwordConfirm"
+              type="password"
+              :state="getValidationState($v.form.passwordConfirm)"
+              class="form-control-with-button"
+              @change="$v.form.passwordConfirm.$touch()"
+            >
+            </b-form-input>
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.passwordConfirm.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
+                {{ $t('global.form.passwordsDoNotMatch') }}
+              </template>
+            </b-form-invalid-feedback>
+          </input-password-toggle>
+        </b-form-group>
+        <div class="text-right">
+          <b-button type="button" variant="link" @click="goBack">
+            {{ $t('pageChangePassword.goBack') }}
+          </b-button>
+          <b-button type="submit" variant="primary">
+            {{ $t('pageChangePassword.changePassword') }}
+          </b-button>
+        </div>
+      </b-form>
+    </div>
   </div>
 </template>
 
@@ -124,7 +126,9 @@
 </script>
 
 <style lang="scss" scoped>
-.change-password-container {
-  max-width: 360px;
+.change-password__form-container {
+  @include media-breakpoint-up('md') {
+    max-width: 360px;
+  }
 }
 </style>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index fc67936..8d96573 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,9 +1,5 @@
 <template>
-  <b-form
-    class="login-form mx-auto ml-md-5 mb-3"
-    novalidate
-    @submit.prevent="login"
-  >
+  <b-form class="login-form" novalidate @submit.prevent="login">
     <alert class="login-error mb-4" :show="authError" variant="danger">
       <p id="login-error-alert">
         {{ $t('pageLogin.alert.message') }}
@@ -37,16 +33,19 @@
     </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>
+      <input-password-toggle>
+        <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"
+          class="form-control-with-button"
+          @input="$v.userInfo.password.$touch()"
+        >
+        </b-form-input>
+      </input-password-toggle>
       <b-form-invalid-feedback id="password-required" role="alert">
         <template v-if="!$v.userInfo.password.required">
           {{ $t('global.form.fieldRequired') }}
@@ -54,8 +53,7 @@
       </b-form-invalid-feedback>
     </div>
     <b-button
-      block
-      class="mt-5"
+      class="mt-3"
       type="submit"
       variant="primary"
       data-test-id="login-button-submit"
@@ -70,10 +68,11 @@
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import i18n from '@/i18n';
 import Alert from '@/components/Global/Alert';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
 
 export default {
   name: 'Login',
-  components: { Alert },
+  components: { Alert, InputPasswordToggle },
   mixins: [VuelidateMixin],
   data() {
     return {
@@ -145,9 +144,3 @@
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.login-form {
-  max-width: 360px;
-}
-</style>