diff --git a/app/(home-pages)/notifications/CommentNotication.tsx b/app/(home-pages)/notifications/CommentNotication.tsx
new file mode 100644
index 00000000..d927e883
--- /dev/null
+++ b/app/(home-pages)/notifications/CommentNotication.tsx
@@ -0,0 +1,53 @@
+import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
+import {
+  AppBskyActorProfile,
+  PubLeafletComment,
+  PubLeafletDocument,
+} from "lexicons/api";
+import { HydratedCommentNotification } from "src/notifications";
+import { blobRefToSrc } from "src/utils/blobRefToSrc";
+import { Avatar } from "components/Avatar";
+import { Notification } from "./Notification";
+
+export const CommentNotification = (props: HydratedCommentNotification) => {
+  let docRecord = props.commentData.documents
+    ?.data as PubLeafletDocument.Record;
+  let commentRecord = props.commentData.record as PubLeafletComment.Record;
+  let profileRecord = props.commentData.bsky_profiles
+    ?.record as AppBskyActorProfile.Record;
+  return (
+    <Notification
+      identity={profileRecord.displayName || "Someone"}
+      action="comment"
+      content={
+        <div className="flex flex-col gap-0.5 mt-2">
+          <div className="text-tertiary text-sm italic font-bold">
+            {docRecord.title}
+          </div>
+          <div className="flex gap-2 border border-border rounded-lg! p-2 text-sm w-full ">
+            <Avatar
+              src={
+                profileRecord?.avatar?.ref &&
+                blobRefToSrc(
+                  profileRecord?.avatar?.ref,
+                  props.commentData.bsky_profiles?.did || "",
+                )
+              }
+              displayName={profileRecord?.displayName}
+            />{" "}
+            <pre
+              style={{ wordBreak: "break-word" }}
+              className="whitespace-pre-wrap text-secondary pt-0.5 line-clamp-6"
+            >
+              <BaseTextBlock
+                index={[]}
+                plaintext={commentRecord.plaintext}
+                facets={commentRecord.facets}
+              />
+            </pre>
+          </div>
+        </div>
+      }
+    />
+  );
+};
diff --git a/app/(home-pages)/notifications/Notification.tsx b/app/(home-pages)/notifications/Notification.tsx
new file mode 100644
index 00000000..60600567
--- /dev/null
+++ b/app/(home-pages)/notifications/Notification.tsx
@@ -0,0 +1,37 @@
+import { CommentTiny } from "components/Icons/CommentTiny";
+import { ReplyTiny } from "components/Icons/ReplyTiny";
+
+export const Notification = (props: {
+  identity: string;
+  action: "comment" | "reply" | "follow";
+  content: React.ReactNode;
+}) => {
+  return (
+    <div className="flex flex-row gap-2 w-full">
+      <div className="text-secondary pt-[6px] shrink-0">
+        {props.action === "comment" ? (
+          <CommentTiny />
+        ) : props.action === "reply" ? (
+          <ReplyTiny />
+        ) : props.action === "follow" ? (
+          "followed you!"
+        ) : (
+          "did something!"
+        )}
+      </div>
+      <div className="flex flex-col gap-0 w-full grow ">
+        <div className="text-base text-secondary font-bold">
+          {props.identity}{" "}
+          {props.action === "comment"
+            ? "commented on your post"
+            : props.action === "reply"
+              ? "replied to your comment"
+              : props.action === "follow"
+                ? "followed you!"
+                : "did something!"}
+        </div>
+        {props.content}
+      </div>
+    </div>
+  );
+};
diff --git a/app/(home-pages)/notifications/page.tsx b/app/(home-pages)/notifications/page.tsx
index 796ea99d..12f181b2 100644
--- a/app/(home-pages)/notifications/page.tsx
+++ b/app/(home-pages)/notifications/page.tsx
@@ -1,22 +1,11 @@
 import { getIdentityData } from "actions/getIdentityData";
-import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
 import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
-import { PubLeafletComment, PubLeafletDocument } from "lexicons/api";
 import { redirect } from "next/navigation";
-import {
-  HydratedCommentNotification,
-  hydrateNotifications,
-} from "src/notifications";
+import { hydrateNotifications } from "src/notifications";
 import { supabaseServerClient } from "supabase/serverClient";
+import { CommentNotification } from "./CommentNotication";
 
 export default async function Notifications() {
-  let identity = await getIdentityData();
-  if (!identity?.atp_did) return redirect("/home");
-  let { data, error } = await supabaseServerClient
-    .from("notifications")
-    .select("*")
-    .eq("recipient", identity.atp_did);
-  let notifications = await hydrateNotifications(data || []);
   return (
     <DashboardLayout
       id="discover"
@@ -27,63 +16,31 @@ export default async function Notifications() {
       tabs={{
         default: {
           controls: null,
-          content: (
-            <div>
-              <h2>Notifications</h2>
-              {notifications.map((n) => {
-                if (n.type === "comment") {
-                  n;
-                  return <CommentNotification key={n.id} {...n} />;
-                }
-              })}
-            </div>
-          ),
+          content: <NotificationContent />,
         },
       }}
     />
   );
 }
 
-const CommentNotification = (props: HydratedCommentNotification) => {
-  let docRecord = props.commentData.documents
-    ?.data as PubLeafletDocument.Record;
-  let commentRecord = props.commentData.record as PubLeafletComment.Record;
-  return (
-    <Notification
-      identity={props.commentData.bsky_profiles?.handle || "Someone"}
-      action="commented on your post"
-      content={
-        <div>
-          <h4>{docRecord.title}</h4>
-          <div className="border">
-            <pre
-              style={{ wordBreak: "break-word" }}
-              className="whitespace-pre-wrap text-secondary pb-[4px] "
-            >
-              <BaseTextBlock
-                index={[]}
-                plaintext={commentRecord.plaintext}
-                facets={commentRecord.facets}
-              />
-            </pre>
-          </div>
-        </div>
-      }
-    />
-  );
-};
-
-const Notification = (props: {
-  identity: string;
-  action: string;
-  content: React.ReactNode;
-}) => {
+const NotificationContent = async () => {
+  let identity = await getIdentityData();
+  if (!identity?.atp_did) return redirect("/home");
+  let { data } = await supabaseServerClient
+    .from("notifications")
+    .select("*")
+    .eq("recipient", identity.atp_did);
+  let notifications = await hydrateNotifications(data || []);
   return (
-    <div className="flex flex-col gap-2 border">
-      <div>
-        {props.identity} {props.action}
+    <div className="max-w-prose mx-auto w-full">
+      <div className="flex flex-col gap-6 pt-3">
+        {notifications.map((n) => {
+          if (n.type === "comment") {
+            n;
+            return <CommentNotification key={n.id} {...n} />;
+          }
+        })}
       </div>
-      {props.content}
     </div>
   );
 };
diff --git a/app/[leaflet_id]/publish/PublishPost.tsx b/app/[leaflet_id]/publish/PublishPost.tsx
index f662b9fd..570dfd4a 100644
--- a/app/[leaflet_id]/publish/PublishPost.tsx
+++ b/app/[leaflet_id]/publish/PublishPost.tsx
@@ -146,7 +146,7 @@ const PublishPostForm = (
             <div className="opaque-container p-3  rounded-lg!">
               <div className="flex gap-2">
                 <img
-                  className="bg-test rounded-full w-[42px] h-[42px] shrink-0"
+                  className="rounded-full w-[42px] h-[42px] shrink-0"
                   src={props.profile.avatar}
                 />
                 <div className="flex flex-col w-full">
diff --git a/app/globals.css b/app/globals.css
index d9ecb8f0..47b1f6af 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -96,6 +96,11 @@
     --accent-2: 255, 255, 255;
     --accent-contrast: 0, 0, 225;
     --accent-1-is-contrast: "true";
+    --accent-light: color-mix(
+      in oklab,
+      rgb(var(--accent-contrast)),
+      rgb(var(--bg-page)) 85%
+    );
 
     --highlight-1: 255, 177, 177;
     --highlight-2: 253, 245, 203;
@@ -365,6 +370,7 @@ pre.shiki {
   @apply pl-3;
   @apply ml-2;
 }
+
 .transparent-container {
   @apply border;
   @apply border-border-light;
diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index 20be8f51..65f22b35 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -17,6 +17,7 @@ export const ActionButton = (
     nav?: boolean;
     className?: string;
     subtext?: string;
+    labelOnMobile?: boolean;
   },
 ) => {
   let { id, icon, label, primary, secondary, nav, ...buttonProps } = props;
@@ -30,6 +31,11 @@ export const ActionButton = (
       };
     }
   }, [sidebar, inOpenPopover]);
+  
+  let showLabelOnMobile =
+    props.labelOnMobile !== false &&
+    (props.primary || props.secondary || props.nav);
+
   return (
     <button
       {...buttonProps}
@@ -38,21 +44,22 @@ export const ActionButton = (
       rounded-md border
       flex gap-2 items-start sm:justify-start justify-center
       p-1 sm:mx-0
+      ${showLabelOnMobile && !secondary ? "w-full" : "sm:w-full w-max"}
       ${
         primary
-          ? "w-full bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0"
+          ? "bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0"
           : secondary
-            ? "sm:w-full w-max bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0"
+            ? " bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0"
             : nav
-              ? "w-full border-transparent text-secondary sm:hover:border-border justify-start!"
-              : "sm:w-full border-transparent text-accent-contrast sm:hover:border-accent-contrast"
+              ? "border-transparent text-secondary sm:hover:border-border justify-start!"
+              : "border-transparent text-accent-contrast sm:hover:border-accent-contrast"
       }
       ${props.className}
       `}
     >
       <div className="shrink-0">{icon}</div>
       <div
-        className={`flex flex-col pr-1 leading-snug max-w-full min-w-0  ${sidebar.open ? "block" : primary || secondary || nav ? "sm:hidden block" : "hidden"}`}
+        className={`flex flex-col pr-1 leading-snug max-w-full min-w-0  ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
       >
         <div className="truncate text-left pt-[1px]">{label}</div>
         {props.subtext && (
diff --git a/components/ActionBar/Navigation.tsx b/components/ActionBar/Navigation.tsx
index 548a9d90..c0af668e 100644
--- a/components/ActionBar/Navigation.tsx
+++ b/components/ActionBar/Navigation.tsx
@@ -13,6 +13,12 @@ import {
 } from "components/Icons/ReaderSmall";
 import { NotificationsUnreadSmall } from "components/Icons/NotificationSmall";
 import { SpeedyLink } from "components/SpeedyLink";
+import { NotificationInstance } from "twilio/lib/rest/api/v2010/account/notification";
+import { getIdentityData } from "actions/getIdentityData";
+import { redirect } from "next/navigation";
+import { hydrateNotifications } from "src/notifications";
+import { supabaseServerClient } from "supabase/serverClient";
+import { CommentNotification } from "app/(home-pages)/notifications/CommentNotication";
 
 export type navPages = "home" | "reader" | "pub" | "discover" | "notifications";
 
@@ -21,15 +27,16 @@ export const DesktopNavigation = (props: {
   publication?: string;
 }) => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-2">
+      <Sidebar alwaysOpen>
+        <NotificationButton />
+      </Sidebar>
       <Sidebar alwaysOpen>
         <NavigationOptions
           currentPage={props.currentPage}
           publication={props.publication}
         />
       </Sidebar>
-      {/*<Sidebar alwaysOpen>
-      </Sidebar>*/}
     </div>
   );
 };
@@ -43,38 +50,46 @@ export const MobileNavigation = (props: {
     (pub) => pub.uri === props.publication,
   );
   return (
-    <Popover
-      onOpenAutoFocus={(e) => e.preventDefault()}
-      asChild
-      className="px-2! !max-w-[256px]"
-      trigger={
-        <div className="shrink-0 p-1 pr-2 text-accent-contrast h-full flex gap-2 font-bold items-center">
-          <MenuSmall />
-          <div className="truncate max-w-[72px]">
-            {props.currentPage === "home" ? (
-              <>Home</>
-            ) : props.currentPage === "reader" ? (
-              <>Reader</>
-            ) : props.currentPage === "discover" ? (
-              <>Discover</>
-            ) : props.currentPage === "pub" ? (
-              thisPublication && <>{thisPublication.name}</>
-            ) : null}
+    <div className="flex gap-1 pr-2">
+      <NotificationButton />
+
+      <Popover
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        asChild
+        className="px-2! !max-w-[256px]"
+        trigger={
+          <div className="shrink-0 p-1 text-accent-contrast h-full flex gap-2 font-bold items-center">
+            <MenuSmall />
+            {props.currentPage !== "notifications" && (
+              <div className="truncate max-w-[72px]">
+                {props.currentPage === "home" ? (
+                  <>Home</>
+                ) : props.currentPage === "reader" ? (
+                  <>Reader</>
+                ) : props.currentPage === "discover" ? (
+                  <>Discover</>
+                ) : props.currentPage === "pub" ? (
+                  thisPublication && <>{thisPublication.name}</>
+                ) : null}
+              </div>
+            )}
           </div>
-        </div>
-      }
-    >
-      <NavigationOptions
-        currentPage={props.currentPage}
-        publication={props.publication}
-      />
-    </Popover>
+        }
+      >
+        <NavigationOptions
+          currentPage={props.currentPage}
+          publication={props.publication}
+          isMobile
+        />
+      </Popover>
+    </div>
   );
 };
 
 const NavigationOptions = (props: {
   currentPage: navPages;
   publication?: string;
+  isMobile?: boolean;
 }) => {
   let { identity } = useIdentityData();
   let thisPublication = identity?.publications?.find(
@@ -88,21 +103,12 @@ const NavigationOptions = (props: {
         subs={identity?.publication_subscriptions?.length !== 0}
       />
       <DiscoverButton current={props.currentPage === "discover"} />
-
-      {identity && (
-        <SpeedyLink href={"/notifications"}>
-          <ActionButton
-            nav
-            icon={<NotificationsUnreadSmall />}
-            label="Notifications"
-            className={
-              props.currentPage === "notifications"
-                ? "bg-bg-page! border-border-light!"
-                : ""
-            }
-          />
-        </SpeedyLink>
-      )}
+      {/*{identity && (
+        <>
+          <hr className="border-dashed border-border-light" />
+          <NotificationButton current={props.currentPage === "notifications"} />
+        </>
+      )}*/}
 
       <hr className="border-border-light my-1" />
       <PublicationButtons currentPubUri={thisPublication?.uri} />
@@ -155,3 +161,36 @@ const DiscoverButton = (props: { current?: boolean }) => {
     </Link>
   );
 };
+
+function NotificationButton(props: { current?: boolean }) {
+  // let identity = await getIdentityData();
+  // if (!identity?.atp_did) return;
+  // let { data } = await supabaseServerClient
+  //   .from("notifications")
+  //   .select("*")
+  //   .eq("recipient", identity.atp_did);
+  // let notifications = await hydrateNotifications(data || []);
+
+  return (
+    <Popover
+      asChild
+      trigger={
+        <ActionButton
+          icon={<NotificationsUnreadSmall />}
+          label="Notifications"
+          className={props.current ? "bg-bg-page! border-border-light!" : ""}
+        />
+      }
+    >
+      <div className="flex flex-col gap-6 pt-3">
+        {/*{notifications.map((n) => {
+          if (n.type === "comment") {
+            n;
+            return <CommentNotification key={n.id} {...n} />;
+          }
+        })}*/}
+      </div>
+      <SpeedyLink href={"/notifications"}>See All</SpeedyLink>
+    </Popover>
+  );
+}
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
new file mode 100644
index 00000000..fa99ca28
--- /dev/null
+++ b/components/Avatar.tsx
@@ -0,0 +1,22 @@
+import { AccountTiny } from "./Icons/AccountTiny";
+
+export const Avatar = (props: {
+  src: string | undefined;
+  displayName: string | undefined;
+  small?: boolean;
+}) => {
+  if (props.src)
+    return (
+      <img
+        className="rounded-full w-6 h-6 shrink-0 border border-border-light "
+        src={props.src}
+        alt={props.displayName ? `${props.displayName}'s avatar` : "avatar"}
+      />
+    );
+  else
+    return (
+      <div className="bg-[var(--accent-light)]  rounded-full w-6 h-6 shrink-0 border border-border-light place-items-center text-accent-1">
+        <AccountTiny />
+      </div>
+    );
+};
diff --git a/components/Icons/AccountTiny.tsx b/components/Icons/AccountTiny.tsx
new file mode 100644
index 00000000..be80cc37
--- /dev/null
+++ b/components/Icons/AccountTiny.tsx
@@ -0,0 +1,19 @@
+import { Props } from "./Props";
+
+export const AccountTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11.9995 11.6042C12.2359 11.3531 12.6319 11.3406 12.8833 11.5768C13.1345 11.8133 13.1469 12.2102 12.9106 12.4616C10.9942 14.4996 8.48343 14.9669 5.82467 14.4899C5.48536 14.4287 5.25917 14.1047 5.31979 13.7653C5.38075 13.4255 5.7066 13.1985 6.04635 13.2594C8.41545 13.6844 10.4511 13.2509 11.9995 11.6042ZM7.40377 1.64517C7.57942 1.34822 7.96315 1.25 8.26022 1.42544C8.55725 1.60111 8.65554 1.98479 8.47995 2.28189L4.62155 8.80923C4.68119 8.84969 4.74613 8.89372 4.81686 8.93716C5.20557 9.17585 5.72696 9.42535 6.30123 9.51724C7.59938 9.72475 8.32429 9.55762 8.60495 9.41959C8.91451 9.26714 9.28927 9.39433 9.44186 9.70376C9.59429 10.0133 9.46707 10.3881 9.15768 10.5407C8.55667 10.8366 7.53939 10.9811 6.10397 10.7516C5.31168 10.6249 4.63266 10.2913 4.16256 10.0026C3.92499 9.85669 3.73326 9.71756 3.60006 9.61392C3.53354 9.56215 3.48092 9.51848 3.44381 9.48697C3.42534 9.47127 3.41058 9.45834 3.39987 9.44888C3.39453 9.44418 3.38953 9.44016 3.3862 9.43716C3.38469 9.43579 3.38337 9.43423 3.38229 9.43326L3.38034 9.43228V9.4313H3.37936C3.16132 9.23186 3.11298 8.90647 3.26315 8.65201L7.40377 1.64517ZM12.4995 2.25259C13.2777 2.19942 13.9584 2.87497 14.019 3.76138C14.0795 4.64775 13.4974 5.40938 12.7192 5.46255C11.941 5.51572 11.2612 4.84018 11.2006 3.95376C11.1401 3.06754 11.7215 2.306 12.4995 2.25259ZM2.08444 2.98501C2.35274 2.19505 3.03678 1.71257 3.61178 1.90787C4.18673 2.1032 4.43574 2.90212 4.16745 3.69205C3.89911 4.48193 3.21507 4.9635 2.6401 4.76822C2.06529 4.57291 1.81644 3.77476 2.08444 2.98501Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/Icons/ReplyTiny.tsx b/components/Icons/ReplyTiny.tsx
new file mode 100644
index 00000000..97f0c03c
--- /dev/null
+++ b/components/Icons/ReplyTiny.tsx
@@ -0,0 +1,20 @@
+import { Props } from "./Props";
+
+export const ReplyTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.7767 3.01749C11.6289 3.39627 12.1593 3.79765 12.4801 4.2201C12.7868 4.62405 12.9578 5.12048 12.9578 5.81175C12.9578 6.45434 12.7165 7.17288 12.2111 7.72195C11.7245 8.25058 10.9456 8.67427 9.75117 8.67427L4.45638 8.67427L6.97173 6.15892C7.36226 5.7684 7.36226 5.13523 6.97173 4.74471C6.58121 4.35418 5.94804 4.35418 5.55752 4.74471L1.33513 8.9671C0.944605 9.35762 0.944605 9.99079 1.33513 10.3813L5.55752 14.6037C5.94804 14.9942 6.58121 14.9942 6.97173 14.6037C7.36226 14.2132 7.36226 13.58 6.97173 13.1895L4.45652 10.6743L9.75117 10.6743C11.4697 10.6743 12.7941 10.0416 13.6826 9.07646C14.5522 8.13173 14.9578 6.91901 14.9578 5.81175C14.9578 4.75316 14.6829 3.81405 14.073 3.01069C13.4771 2.22581 12.62 1.64809 11.589 1.18986C11.0843 0.965558 10.4933 1.19285 10.269 1.69754C10.0447 2.20222 10.272 2.79318 10.7767 3.01749Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};