diff --git a/instance/src/web/src/pages/app/navigationRailAvatar/NavigationRailAvatar.module.scss b/instance/src/web/src/pages/app/navigationRailAvatar/NavigationRailAvatar.module.scss
index f48afb6..44074e6 100644
--- a/instance/src/web/src/pages/app/navigationRailAvatar/NavigationRailAvatar.module.scss
+++ b/instance/src/web/src/pages/app/navigationRailAvatar/NavigationRailAvatar.module.scss
@@ -1,80 +1,127 @@
 .root {
-    margin-top: 2.75rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 1rem;
-    background: #0000;
-    padding: 1rem;
-    border-radius: 10rem;
-    position: relative;
+  margin-top: 2.75rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+  background: #0000;
+  padding: 1rem;
+  border-radius: 10rem;
+  position: relative;
+
+  transition:
+    background-color var(--uk-sys-motion-duration-250)
+      var(--uk-sys-motion-easing-emphasized-decelerate),
+    color var(--uk-sys-motion-duration-250)
+      var(--uk-sys-motion-easing-emphasized-decelerate);
+
+  .avatar {
+    outline-style: solid;
+    outline-offset: 2px;
+    outline-width: 0;
+    outline-color: transparent;
+    margin-bottom: 0;
 
     transition:
-        background-color var(--uk-sys-motion-duration-250) var(--uk-sys-motion-easing-emphasized-decelerate),
-        color var(--uk-sys-motion-duration-250) var(--uk-sys-motion-easing-emphasized-decelerate);
+      outline-color var(--uk-sys-motion-duration-100)
+        var(--uk-sys-motion-easing-standard-decelerate),
+      outline-width var(--uk-sys-motion-duration-50) linear,
+      margin-bottom var(--uk-sys-motion-duration-500)
+        var(--uk-sys-motion-easing-emphasized-decelerate);
 
-    .avatar {
-        outline-style: solid;
-        outline-offset: 2px;
-        outline-width: 0;
-        outline-color: transparent;
-
-        transition:
-            outline-color var(--uk-sys-motion-duration-100) var(--uk-sys-motion-easing-standard-decelerate),
-            outline-width var(--uk-sys-motion-duration-50) linear;
-
-        &:hover {
-            outline-width: var(--uk-sys-state-focus-indicator-thickness);
-            outline-offset: var(--uk-sys-state-focus-indicator-outer-offset);
-            outline-color: rgb(var(--uk-sys-color-secondary));
-        }
+    &:hover {
+      outline-width: var(--uk-sys-state-focus-indicator-thickness);
+      outline-offset: var(--uk-sys-state-focus-indicator-outer-offset);
+      outline-color: rgb(var(--uk-sys-color-secondary));
     }
+  }
 
-    .nameContainer {
-        width: 100%;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        white-space: nowrap;
-    }
+  .nameContainer {
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    white-space: nowrap;
+  }
 
-    .displayName {
-        line-height: 1rem !important;
-    }
+  .displayName {
+    line-height: 1rem !important;
+  }
+
+  &[data-expanded="true"] {
+    color: rgb(var(--uk-sys-color-secondary));
+    background-color: rgb(var(--uk-sys-color-secondary-container));
 
-    .username {
+    > .logout {
+      visibility: visible;
+      pointer-events: all;
+      opacity: 1;
+      transition: opacity var(--uk-sys-motion-duration-1000)
+        var(--uk-sys-motion-easing-emphasized-decelerate);
     }
+  }
+
+  .logout {
+    display: flex;
+    pointer-events: none;
+    position: absolute;
+    bottom: 0.75rem;
+    right: 0.75rem;
+    opacity: 0;
+    visibility: hidden;
+  }
 
-    &[data-expanded="true"] {
-        color: rgb(var(--uk-sys-color-secondary));
-        background-color: rgb(var(--uk-sys-color-secondary-container));
+  &[data-expanded="false"]:hover {
+    flex-direction: column;
+    color: rgb(var(--uk-sys-color-secondary));
+    background-color: rgb(var(--uk-sys-color-secondary-container));
 
-        > .logout {
-            visibility: visible;
-            pointer-events: all;
-            opacity: 1;
-            transition: opacity var(--uk-sys-motion-duration-1000) var(--uk-sys-motion-easing-emphasized-decelerate);
-        }
+    .avatar {
+      margin-bottom: 3rem;
+      outline-width: var(--uk-sys-state-focus-indicator-thickness);
+      outline-offset: var(--uk-sys-state-focus-indicator-outer-offset);
+      outline-color: rgb(var(--uk-sys-color-secondary));
     }
 
     .logout {
-        display: flex;
-        pointer-events: none;
-        position: absolute;
-        top: 0.75rem;
-        right: 0.75rem;
-        opacity: 0;
-        visibility: hidden;
+      visibility: visible;
+      pointer-events: all;
+      opacity: 1;
+      transition: opacity var(--uk-sys-motion-duration-1000)
+        var(--uk-sys-motion-easing-emphasized-decelerate);
+    }
+
+    .nameContainer {
+      visibility: hidden;
+      display: none;
     }
+  }
 
-    *[data-navigation-rail-mobile-mode="true"] > div > & {
-        margin-top: unset;
-        padding: unset;
-        aspect-ratio: 1 / 1;
-        background: transparent;
+  *[data-navigation-rail-mobile-mode="true"] > div > & {
+    margin-top: unset;
+    padding: unset;
+    aspect-ratio: 1 / 1;
+    background: transparent;
 
-        .avatar {
-            margin: auto;
-        }
+    .avatar {
+      margin: auto;
+    }
+
+    &[data-expanded="false"] {
+      background: transparent;
+
+      .avatar {
+        margin-bottom: auto;
+      }
+    }
+
+    .logout {
+      pointer-events: none;
+      position: absolute;
+      bottom: 0.75rem;
+      right: 0.75rem;
+      opacity: 0;
+      visibility: hidden;
     }
+  }
 }
diff --git a/instance/src/web/src/pages/app/navigationRailAvatar/NavigationRailAvatar.tsx b/instance/src/web/src/pages/app/navigationRailAvatar/NavigationRailAvatar.tsx
index 4aec660..38be305 100644
--- a/instance/src/web/src/pages/app/navigationRailAvatar/NavigationRailAvatar.tsx
+++ b/instance/src/web/src/pages/app/navigationRailAvatar/NavigationRailAvatar.tsx
@@ -9,47 +9,47 @@ import { useNavigate } from "@solidjs/router";
 import useIsMobile from "@tcsw/uikit-solid/src/core/useIsMobile.ts";
 
 const NavigationRailAvatar: Component<{ expanded: boolean }> = (props) => {
-    const navigate = useNavigate();
-    const isMobile = useIsMobile();
-    const [user] = createResource(() => trpc.app.navigation.user.name.query());
+  const navigate = useNavigate();
+  const isMobile = useIsMobile();
+  const [user] = createResource(() => trpc.app.navigation.user.name.query());
 
-    return (
-        <div class={styles.root} data-expanded={props.expanded}>
-            <UKAvatar
-                onClick={() => {
-                    navigate("/app/uk.tcsw.settings/profile");
-                }}
-                class={styles.avatar}
-                avatar={backend("/api/user/me/avatar/s")}
-                size="s"
-                username="[PUT SIDEBAR HERE]"
-            />
-            <Show when={!isMobile()}>
-                <div class={styles.nameContainer}>
-                    <UKText size="m" role="title" class={styles.displayName}>
-                        {`${user()?.forename} ${user()?.surname}`}
-                    </UKText>
-                    <UKText size="m" role="label" class={styles.username}>
-                        {`@${user()?.username}`}
-                    </UKText>
-                </div>
-                <UKIconButton
-                    class={styles.logout}
-                    icon={"logout"}
-                    alt={"Logout"}
-                    color={"filled"}
-                    shape={"round"}
-                    size={"s"}
-                    width={"default"}
-                    onClick={async () => {
-                        await trpc.authorization.logout.mutate();
-
-                        navigate("/");
-                    }}
-                ></UKIconButton>
-            </Show>
+  return (
+    <div class={styles.root} data-expanded={props.expanded}>
+      <UKAvatar
+        onClick={() => {
+          navigate("/app/uk.tcsw.settings/profile");
+        }}
+        class={styles.avatar}
+        avatar={backend("/api/user/me/avatar/s")}
+        size="s"
+        username="me"
+      />
+      <Show when={!isMobile()}>
+        <div class={styles.nameContainer}>
+          <UKText size="m" role="title" class={styles.displayName}>
+            {`${user()?.forename} ${user()?.surname}`}
+          </UKText>
+          <UKText size="m" role="label">
+            {`@${user()?.username}`}
+          </UKText>
         </div>
-    );
+        <UKIconButton
+          class={styles.logout}
+          icon={"logout"}
+          alt={"Logout"}
+          color={"filled"}
+          shape={"round"}
+          size={"s"}
+          width={"default"}
+          onClick={async () => {
+            await trpc.authorization.logout.mutate();
+
+            navigate("/");
+          }}
+        ></UKIconButton>
+      </Show>
+    </div>
+  );
 };
 
 export default NavigationRailAvatar;