diff --git a/app/(home-pages)/notifications/CommentNotication.tsx b/app/(home-pages)/notifications/CommentNotication.tsx
index 3b95e394..f9c669d5 100644
--- a/app/(home-pages)/notifications/CommentNotication.tsx
+++ b/app/(home-pages)/notifications/CommentNotication.tsx
@@ -52,29 +52,3 @@ export const CommentNotification = (props: HydratedCommentNotification) => {
     />
   );
 };
-
-export const DummyCommentNotification = () => {
-  return (
-    <Notification
-      icon={<CommentTiny />}
-      actionText={<>celine commented on your post</>}
-      content={
-        <ContentLayout
-          postTitle="This is the Post Title"
-          publication={{ name: "My Publication" } as PubLeafletPublication.Record}
-        >
-          <CommentInNotification
-            className=""
-            avatar={undefined}
-            displayName="celine"
-            index={[]}
-            plaintext={
-              "heyyyyy this is a dummt comment! I'm just gonna put this here so I know what I'm about but it really oughta be wired up at some point..."
-            }
-            facets={[]}
-          />
-        </ContentLayout>
-      }
-    />
-  );
-};
diff --git a/app/(home-pages)/notifications/Notification.tsx b/app/(home-pages)/notifications/Notification.tsx
index a20f27bb..1402b6ff 100644
--- a/app/(home-pages)/notifications/Notification.tsx
+++ b/app/(home-pages)/notifications/Notification.tsx
@@ -1,19 +1,32 @@
 import { Avatar } from "components/Avatar";
 import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
-import {
-  PubLeafletDocument,
-  PubLeafletPublication,
-  PubLeafletRichtextFacet,
-} from "lexicons/api";
+import { PubLeafletPublication, PubLeafletRichtextFacet } from "lexicons/api";
+import { useEntity, useReplicache } from "src/replicache";
 
 export const Notification = (props: {
   icon: React.ReactNode;
   actionText: React.ReactNode;
   content?: React.ReactNode;
+  cardBorderHidden?: boolean;
 }) => {
+  let { rootEntity } = useReplicache();
+  let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
+    .value;
+
   return (
-    <div className="flex flex-col  w-full">
-      <div className="flex flex-row gap-2 items-center">
+    <div
+      className={`flex flex-col w-full sm:p-4 px-3 pl-2 sm:pl-3 pt-2 sm:pt-3! ${
+        cardBorderHidden
+          ? ""
+          : " block-border border-border! hover:outline-border "
+      }`}
+      style={{
+        backgroundColor: cardBorderHidden
+          ? "transparent"
+          : "rgba(var(--bg-page), var(--bg-page-alpha))",
+      }}
+    >
+      <div className={`flex flex-row gap-2 items-center`}>
         <div className="text-secondary shrink-0">{props.icon}</div>
         <div className="text-secondary font-bold">{props.actionText}</div>
       </div>
@@ -32,8 +45,14 @@ export const ContentLayout = (props: {
   postTitle: string;
   publication: PubLeafletPublication.Record;
 }) => {
+  let { rootEntity } = useReplicache();
+  let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
+    .value;
+
   return (
-    <div className="border border-border-light rounded-md px-2 py-[6px] w-full">
+    <div
+      className={`border border-border-light rounded-md px-2 py-[6px] w-full ${cardBorderHidden ? "transparent" : "bg-bg-page"}`}
+    >
       <div className="text-tertiary text-sm italic font-bold pb-1">
         {props.postTitle}
       </div>
diff --git a/app/(home-pages)/notifications/NotificationList.tsx b/app/(home-pages)/notifications/NotificationList.tsx
index 8c22f80a..b26a82d2 100644
--- a/app/(home-pages)/notifications/NotificationList.tsx
+++ b/app/(home-pages)/notifications/NotificationList.tsx
@@ -16,14 +16,10 @@ export function NotificationList({
       markAsRead();
     }, 500);
   }, []);
-  let { rootEntity } = useReplicache();
-
-  let showPageBackground = !useEntity(rootEntity, "theme/card-border-hidden")
-    ?.data.value;
 
   return (
     <div className="max-w-prose mx-auto w-full">
-      <div className="flex flex-col gap-6 pt-1">
+      <div className="flex flex-col gap-2">
         {notifications.map((n) => {
           if (n.type === "comment") {
             n;
diff --git a/app/(home-pages)/notifications/page.tsx b/app/(home-pages)/notifications/page.tsx
index 8c0f08b2..9be3f1d3 100644
--- a/app/(home-pages)/notifications/page.tsx
+++ b/app/(home-pages)/notifications/page.tsx
@@ -10,7 +10,7 @@ export default async function Notifications() {
   return (
     <DashboardLayout
       id="discover"
-      cardBorderHidden={false}
+      cardBorderHidden={true}
       currentPage="notifications"
       defaultTab="default"
       actions={null}
diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index a01de3c5..ed7bded2 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -18,6 +18,7 @@ export const ActionButton = (
     className?: string;
     subtext?: string;
     labelOnMobile?: boolean;
+    z?: boolean;
   },
 ) => {
   let {