diff --git a/app/(home-pages)/p/[didOrHandle]/layout.tsx b/app/(home-pages)/p/[didOrHandle]/layout.tsx
index 03576f19..6e7de913 100644
--- a/app/(home-pages)/p/[didOrHandle]/layout.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/layout.tsx
@@ -80,6 +80,8 @@ export default async function ProfilePageLayout(props: {
 
   if (!profile) return null;
 
+  let displayName = profile.displayName || profile.handle;
+
   return (
     <DashboardShell
       id="profile"
@@ -89,14 +91,10 @@ export default async function ProfilePageLayout(props: {
             <Avatar
               src={profile.avatar}
               size="small"
-              displayName={
-                profile?.displayName ? profile.displayName : profile.handle
-              }
+              displayName={displayName}
             />
           }
-          pageTitle={
-            profile?.displayName ? profile.displayName : profile.handle
-          }
+          pageTitle={displayName}
         />
       }
       tabs={{
@@ -105,7 +103,7 @@ export default async function ProfilePageLayout(props: {
       }}
     >
       <DashboardPageLayout
-        pageTitle={profile?.displayName ? profile.displayName : profile.handle}
+        pageTitle={displayName}
         scrollKey="dashboard-profile-default"
         showHeader={false}
       >
diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index c1971038..77b83128 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -15,6 +15,7 @@ export const ActionButton = forwardRef<
     label: React.ReactNode;
     primary?: boolean;
     secondary?: boolean;
+    active?: boolean;
     className?: string;
     subtext?: string;
     labelOnMobile?: boolean;
@@ -27,6 +28,7 @@ export const ActionButton = forwardRef<
     label,
     primary,
     secondary,
+    active,
     labelOnMobile,
     subtext,
     className,
@@ -64,6 +66,7 @@ export const ActionButton = forwardRef<
             ? "border-accent-contrast  sm:hover:outline-accent-contrast focus:outline-accent-1   text-accent-contrast hover:border-accent-contrast  focus:border-accent-contrast font-bold"
             : "border-transparent text-secondary sm:hover:border-border justify-start! max-w-full"
       }
+      ${active ? "bg-bg-page! border-border-light!" : ""}
       ${className}
       `}
     >
diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx
index 9f599fae..c530b822 100644
--- a/components/ActionBar/DesktopNavigation.tsx
+++ b/components/ActionBar/DesktopNavigation.tsx
@@ -5,6 +5,7 @@ import {
   NotificationButton,
   ReaderButton,
   WriterButton,
+  useIsOnWriterPage,
 } from "./NavigationButtons";
 import { PublicationButtons } from "./Publications";
 import { Sidebar } from "./Sidebar";
@@ -49,10 +50,7 @@ export const NavigationContent = (props: NavigationProps) => {
   let { identity } = useIdentityData();
   let pathname = usePathname();
   let activeTabHref = props.tabs ? pickActiveTabHref(pathname, props.tabs) : null;
-  let onWriterPage =
-    pathname.startsWith("/home") ||
-    pathname.startsWith("/looseleafs") ||
-    pathname.startsWith("/notifications");
+  let onWriterPage = useIsOnWriterPage();
 
   return (
     <>
@@ -73,9 +71,7 @@ export const NavigationContent = (props: NavigationProps) => {
               labelOnMobile
               icon={icon ?? <TabsSmall />}
               label={name}
-              className={
-                href === activeTabHref ? "bg-bg-page! border-border-light!" : ""
-              }
+              active={href === activeTabHref}
             />
           </SpeedyLink>
         ))}
diff --git a/components/ActionBar/NavigationButtons.tsx b/components/ActionBar/NavigationButtons.tsx
index c7ee534e..496f6bf5 100644
--- a/components/ActionBar/NavigationButtons.tsx
+++ b/components/ActionBar/NavigationButtons.tsx
@@ -25,6 +25,13 @@ function useIsActive(href: string) {
   return pathname === href || pathname.startsWith(href + "/");
 }
 
+export const WRITER_PATHS = ["/home", "/looseleafs", "/notifications"] as const;
+
+export function useIsOnWriterPage() {
+  let pathname = usePathname();
+  return WRITER_PATHS.some((p) => pathname.startsWith(p));
+}
+
 export const HomeButton = (props: { className?: string }) => {
   let current = useIsActive("/home");
   return (
@@ -32,25 +39,18 @@ export const HomeButton = (props: { className?: string }) => {
       <ActionButton
         icon={<HomeSmall />}
         label="Home"
-        className={`${current ? "bg-bg-page! border-border-light!" : ""} w-full! ${props.className}`}
+        active={current}
+        className={`w-full! ${props.className}`}
       />
     </SpeedyLink>
   );
 };
 
 export const WriterButton = () => {
-  let pathname = usePathname();
-  let current =
-    pathname.startsWith("/home") ||
-    pathname.startsWith("/looseleafs") ||
-    pathname.startsWith("/notifications");
+  let current = useIsOnWriterPage();
   return (
     <SpeedyLink href={"/home"} className="hover:!no-underline">
-      <ActionButton
-        icon={<WriterSmall />}
-        label="Write"
-        className={current ? "bg-bg-page! border-border-light!" : ""}
-      />
+      <ActionButton icon={<WriterSmall />} label="Write" active={current} />
     </SpeedyLink>
   );
 };
@@ -59,11 +59,7 @@ export const ReaderButton = (props: { subs: boolean }) => {
   let current = useIsActive("/reader");
   return (
     <SpeedyLink href={"/reader"} className="hover:no-underline!">
-      <ActionButton
-        icon={<ReaderUnreadSmall />}
-        label="Read"
-        className={current ? "bg-bg-page! border-border-light!" : ""}
-      />
+      <ActionButton icon={<ReaderUnreadSmall />} label="Read" active={current} />
     </SpeedyLink>
   );
 };
@@ -85,7 +81,8 @@ export function NotificationButton() {
           )
         }
         label="Notifications"
-        className={`${current ? "bg-bg-page! border-border-light!" : ""} ${unreads ? "text-accent-contrast!" : ""}`}
+        active={current}
+        className={unreads ? "text-accent-contrast!" : ""}
       />
     </SpeedyLink>
   );