diff --git a/app/(home-pages)/home/Actions/AccountSettings.tsx b/app/(home-pages)/home/Actions/AccountSettings.tsx
index 21c87b57..c3cb0043 100644
--- a/app/(home-pages)/home/Actions/AccountSettings.tsx
+++ b/app/(home-pages)/home/Actions/AccountSettings.tsx
@@ -1,136 +1,24 @@
 "use client";
 
 import { ActionButton } from "components/ActionBar/ActionButton";
-import { mutate } from "swr";
-import { AccountSmall } from "components/Icons/AccountSmall";
-import { LogoutSmall } from "components/Icons/LogoutSmall";
 import { Popover } from "components/Popover";
-import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
-import { SpeedyLink } from "components/SpeedyLink";
-import { GoBackSmall } from "components/Icons/GoBackSmall";
-import { useState } from "react";
 import { ThemeSetterContent } from "components/ThemeManager/ThemeSetter";
 import { useIsMobile } from "src/hooks/isMobile";
+import { PaintSmall } from "components/Icons/PaintSmall";
 
-export const AccountSettings = (props: { entityID: string }) => {
-  let [state, setState] = useState<"menu" | "general" | "theme">("menu");
+export const AccountTheme = (props: { entityID: string }) => {
   let isMobile = useIsMobile();
 
   return (
     <Popover
       asChild
-      onOpenChange={() => setState("menu")}
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
-      className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`}
-      trigger={
-        <ActionButton smallOnMobile icon=<AccountSmall /> label="Settings" />
-      }
+      className={`w-xs  bg-white!`}
+      arrowFill="bg-white"
+      trigger={<ActionButton smallOnMobile icon=<PaintSmall /> label="Theme" />}
     >
-      {state === "general" ? (
-        <GeneralSettings backToMenu={() => setState("menu")} />
-      ) : state === "theme" ? (
-        <AccountThemeSettings
-          entityID={props.entityID}
-          backToMenu={() => setState("menu")}
-        />
-      ) : (
-        <SettingsMenu state={state} setState={setState} />
-      )}
-    </Popover>
-  );
-};
-
-const SettingsMenu = (props: {
-  state: "menu" | "general" | "theme";
-  setState: (s: typeof props.state) => void;
-}) => {
-  let menuItemClassName =
-    "menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline!";
-
-  return (
-    <div className="flex flex-col gap-0.5">
-      <AccountSettingsHeader state={"menu"} />
-      <button
-        className={menuItemClassName}
-        type="button"
-        onClick={() => {
-          props.setState("general");
-        }}
-      >
-        General
-        <ArrowRightTiny />
-      </button>
-      <button
-        className={menuItemClassName}
-        type="button"
-        onClick={() => props.setState("theme")}
-      >
-        Account Theme
-        <ArrowRightTiny />
-      </button>
-    </div>
-  );
-};
-
-const GeneralSettings = (props: { backToMenu: () => void }) => {
-  return (
-    <div className="flex flex-col gap-0.5">
-      <AccountSettingsHeader
-        state={"general"}
-        backToMenuAction={() => props.backToMenu()}
-      />
-
-      <button
-        className="flex gap-2 font-bold"
-        onClick={async () => {
-          await fetch("/api/auth/logout");
-          mutate("identity", null);
-        }}
-      >
-        <LogoutSmall />
-        Logout
-      </button>
-    </div>
-  );
-};
-const AccountThemeSettings = (props: {
-  entityID: string;
-  backToMenu: () => void;
-}) => {
-  return (
-    <div className="flex flex-col gap-0.5">
-      <AccountSettingsHeader
-        state={"theme"}
-        backToMenuAction={() => props.backToMenu()}
-      />
       <ThemeSetterContent entityID={props.entityID} home />
-    </div>
-  );
-};
-export const AccountSettingsHeader = (props: {
-  state: "menu" | "general" | "theme";
-  backToMenuAction?: () => void;
-}) => {
-  return (
-    <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1">
-      {props.state === "menu"
-        ? "Settings"
-        : props.state === "general"
-          ? "General"
-          : props.state === "theme"
-            ? "Account Theme"
-            : ""}
-      {props.backToMenuAction && (
-        <button
-          type="button"
-          onClick={() => {
-            props.backToMenuAction && props.backToMenuAction();
-          }}
-        >
-          <GoBackSmall className="text-accent-contrast" />
-        </button>
-      )}
-    </div>
+    </Popover>
   );
 };
diff --git a/app/(home-pages)/home/Actions/Actions.tsx b/app/(home-pages)/home/Actions/Actions.tsx
index e711d40e..050f7f16 100644
--- a/app/(home-pages)/home/Actions/Actions.tsx
+++ b/app/(home-pages)/home/Actions/Actions.tsx
@@ -2,7 +2,7 @@
 import { ThemePopover } from "components/ThemeManager/ThemeSetter";
 import { CreateNewLeafletButton } from "./CreateNewButton";
 import { HelpButton } from "app/[leaflet_id]/actions/HelpButton";
-import { AccountSettings } from "./AccountSettings";
+import { AccountTheme } from "./AccountSettings";
 import { useIdentityData } from "components/IdentityProvider";
 import { useReplicache } from "src/replicache";
 import { LoginActionButton } from "components/LoginButton";
@@ -13,7 +13,7 @@ export const Actions = () => {
   return (
     <>
       <CreateNewLeafletButton />
-      {identity && <AccountSettings entityID={rootEntity} />}
+      {identity && <AccountTheme entityID={rootEntity} />}
     </>
   );
 };
diff --git a/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx b/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
index eb841838..7bd67c3c 100644
--- a/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
@@ -68,7 +68,7 @@ export const ProfilePostsContent = (props: {
   }
 
   return (
-    <div className="flex flex-col gap-3 text-left relative">
+    <div className="profilePosts h-full flex py-4 flex-col gap-3 text-left relative">
       {allPosts.map((post) => (
         <PostListing key={post.documents.uri} {...post} />
       ))}
diff --git a/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx b/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
index 31de7865..f99934c7 100644
--- a/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
@@ -72,9 +72,9 @@ export const ProfileHeader = (props: {
           </pre>
         </div>
 
-        <div className="profilePublicationCards w-full overflow-x-scroll">
+        <div className="profilePubCardContainer w-full overflow-x-scroll">
           <div
-            className={`grid grid-flow-col  gap-2 mx-auto w-fit px-3 sm:px-4 ${props.popover ? "auto-cols-[164px]" : "auto-cols-[164px] sm:auto-cols-[240px]"}`}
+            className={`profilePubCards grid grid-flow-col  gap-2 mx-auto w-fit ${props.popover ? "auto-cols-[164px]" : "auto-cols-[164px] sm:auto-cols-[240px]"}`}
           >
             {props.publications.map((p) => (
               <PublicationCard key={p.uri} record={p.record} uri={p.uri} />
diff --git a/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx b/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
index c5b9e3a2..bb058749 100644
--- a/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
@@ -41,7 +41,7 @@ export const ProfileTabs = (props: { didOrHandle: string }) => {
   const bgColor = cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)";
 
   return (
-    <div className="flex flex-col w-full sticky top-3 sm:top-4 z-20 sm:px-4 px-3 pt-6">
+    <div className="flex flex-col w-full sticky top-3 sm:top-4 z-20 pt-6">
       <div
         style={
           scrollPosWithinTabContent < 20
diff --git a/app/(home-pages)/p/[didOrHandle]/layout.tsx b/app/(home-pages)/p/[didOrHandle]/layout.tsx
index 1f61b5cc..eb9f3531 100644
--- a/app/(home-pages)/p/[didOrHandle]/layout.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/layout.tsx
@@ -94,9 +94,7 @@ export default async function ProfilePageLayout(props: {
                 publications={publications || []}
               />
               <ProfileTabs didOrHandle={params.didOrHandle} />
-              <div className="h-full pt-3 pb-4 px-3 sm:px-4 flex flex-col">
-                {props.children}
-              </div>
+              <>{props.children}</>
             </ProfileLayout>
           ),
         },
diff --git a/app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx b/app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx
index 9e5e4ca8..0284b0f5 100644
--- a/app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx
@@ -82,7 +82,7 @@ export const ProfileSubscriptionsContent = (props: {
 
   return (
     <div className="relative">
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3 py-4">
         {allSubscriptions.map((sub) => (
           <PubListing key={sub.uri} {...sub} />
         ))}
diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx
index 38a939e7..65201200 100644
--- a/components/ActionBar/DesktopNavigation.tsx
+++ b/components/ActionBar/DesktopNavigation.tsx
@@ -9,6 +9,7 @@ import {
 import { PublicationButtons } from "./Publications";
 import { Sidebar } from "./Sidebar";
 import { LoginActionButton, LoginButton } from "components/LoginButton";
+import { ProfileButton } from "./ProfileButton";
 
 export const DesktopNavigation = (props: {
   currentPage: navPages;
@@ -27,7 +28,12 @@ export const DesktopNavigation = (props: {
     <div className="flex flex-col gap-3">
       <Sidebar alwaysOpen>
         {identity?.atp_did ? (
-          <NotificationButton current={props.currentPage === "notifications"} />
+          <>
+            <ProfileButton />
+            <NotificationButton
+              current={props.currentPage === "notifications"}
+            />
+          </>
         ) : (
           <LoginActionButton />
         )}
diff --git a/components/ActionBar/MobileNavigation.tsx b/components/ActionBar/MobileNavigation.tsx
index b9194927..bcf52df7 100644
--- a/components/ActionBar/MobileNavigation.tsx
+++ b/components/ActionBar/MobileNavigation.tsx
@@ -8,6 +8,7 @@ import {
 } from "./NavigationButtons";
 import { PublicationNavigation } from "./PublicationNavigation";
 import { LoginActionButton } from "components/LoginButton";
+import { ProfileButton } from "./ProfileButton";
 
 export const MobileNavigation = (props: {
   currentPage: navPages;
@@ -50,9 +51,10 @@ export const MobileNavigation = (props: {
         )}
       </div>
       {identity?.atp_did ? (
-        <>
+        <div className="flex gap-2">
           <NotificationButton />
-        </>
+          <ProfileButton />
+        </div>
       ) : (
         <LoginActionButton />
       )}
diff --git a/components/ActionBar/ProfileButton.tsx b/components/ActionBar/ProfileButton.tsx
new file mode 100644
index 00000000..7c3b5f7a
--- /dev/null
+++ b/components/ActionBar/ProfileButton.tsx
@@ -0,0 +1,61 @@
+import { Avatar } from "components/Avatar";
+import { ActionButton } from "./ActionButton";
+import { useIdentityData } from "components/IdentityProvider";
+import { AccountSmall } from "components/Icons/AccountSmall";
+import { useRecordFromDid } from "src/utils/useRecordFromDid";
+import { Menu, MenuItem } from "components/Menu";
+import { useIsMobile } from "src/hooks/isMobile";
+import { LogoutSmall } from "components/Icons/LogoutSmall";
+import { mutate } from "swr";
+import { SpeedyLink } from "components/SpeedyLink";
+
+export const ProfileButton = () => {
+  let { identity } = useIdentityData();
+  let { data: record } = useRecordFromDid(identity?.atp_did);
+  let isMobile = useIsMobile();
+
+  return (
+    <Menu
+      asChild
+      side={isMobile ? "top" : "right"}
+      align={isMobile ? "center" : "start"}
+      trigger={
+        <ActionButton
+          nav
+          labelOnMobile={false}
+          icon={
+            record ? (
+              <Avatar
+                src={record.avatar}
+                displayName={record.displayName || record.handle}
+              />
+            ) : (
+              <AccountSmall />
+            )
+          }
+          label={record ? record.displayName || record.handle : "Account"}
+          className={`w-full`}
+        />
+      }
+    >
+      {record && (
+        <>
+          <SpeedyLink href={`/p/${record.handle}`}>
+            <MenuItem onSelect={() => {}}>View Profile</MenuItem>
+          </SpeedyLink>
+
+          <hr className="border-border-light border-dashed" />
+        </>
+      )}
+      <MenuItem
+        onSelect={async () => {
+          await fetch("/api/auth/logout");
+          mutate("identity", null);
+        }}
+      >
+        <LogoutSmall />
+        Log Out
+      </MenuItem>
+    </Menu>
+  );
+};
diff --git a/src/utils/getRecordFromDid.ts b/src/utils/useRecordFromDid.ts
similarity index 85%
rename from src/utils/getRecordFromDid.ts
rename to src/utils/useRecordFromDid.ts
index 2ff42679..4b7da6ca 100644
--- a/src/utils/getRecordFromDid.ts
+++ b/src/utils/useRecordFromDid.ts
@@ -2,7 +2,7 @@ import { callRPC } from "app/api/rpc/client";
 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import useSWR from "swr";
 
-export function useProfileFromDid(did: string | undefined) {
+export function useRecordFromDid(did: string | undefined | null) {
   return useSWR(did ? ["profile-data", did] : null, async () => {
     const response = await callRPC("get_profile_data", {
       didOrHandle: did!,