diff --git a/app/(home-pages)/notifications/CommentNotication.tsx b/app/(home-pages)/notifications/CommentNotication.tsx
index c208c70c..eace88c3 100644
--- a/app/(home-pages)/notifications/CommentNotication.tsx
+++ b/app/(home-pages)/notifications/CommentNotication.tsx
@@ -7,6 +7,7 @@ import {
 import { HydratedCommentNotification } from "src/notifications";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
 import { Avatar } from "components/Avatar";
+import { CommentTiny } from "components/Icons/CommentTiny";
 import {
   CommentInNotification,
   ContentLayout,
@@ -19,10 +20,15 @@ export const CommentNotification = (props: HydratedCommentNotification) => {
   let commentRecord = props.commentData.record as PubLeafletComment.Record;
   let profileRecord = props.commentData.bsky_profiles
     ?.record as AppBskyActorProfile.Record;
+  const displayName = profileRecord.displayName || "Someone";
   return (
     <Notification
-      identity={profileRecord.displayName || "Someone"}
-      action={{ type: "comment" }}
+      icon={<CommentTiny />}
+      actionText={
+        <>
+          {displayName} commented on your post
+        </>
+      }
       content={
         <ContentLayout postTitle={docRecord.title}>
           <CommentInNotification
@@ -52,8 +58,8 @@ export const CommentNotification = (props: HydratedCommentNotification) => {
 export const DummyCommentNotification = () => {
   return (
     <Notification
-      identity={"celine"}
-      action={{ type: "comment" }}
+      icon={<CommentTiny />}
+      actionText={<>celine commented on your post</>}
       content={
         <ContentLayout postTitle="This is the Post Title">
           <CommentInNotification
diff --git a/app/(home-pages)/notifications/FollowNotification.tsx b/app/(home-pages)/notifications/FollowNotification.tsx
index 61550a8c..db434415 100644
--- a/app/(home-pages)/notifications/FollowNotification.tsx
+++ b/app/(home-pages)/notifications/FollowNotification.tsx
@@ -1,14 +1,17 @@
+import { Avatar } from "components/Avatar";
 import { Notification } from "./Notification";
 
 export const DummyFollowNotification = () => {
+  const identity = "celine";
+  const pubName = "Pub Name Here";
   return (
     <Notification
-      identity={"celine"}
-      action={{
-        type: "follow",
-        avatar: undefined,
-        pubName: "Pub Name Here",
-      }}
+      icon={<Avatar src={undefined} displayName={identity} tiny />}
+      actionText={
+        <>
+          {identity} followed {pubName}!
+        </>
+      }
     />
   );
 };
diff --git a/app/(home-pages)/notifications/MentionNotification.tsx b/app/(home-pages)/notifications/MentionNotification.tsx
index 5ddf6f3e..0b93882b 100644
--- a/app/(home-pages)/notifications/MentionNotification.tsx
+++ b/app/(home-pages)/notifications/MentionNotification.tsx
@@ -1,10 +1,11 @@
+import { MentionTiny } from "components/Icons/MentionTiny";
 import { ContentLayout, Notification } from "./Notification";
 
 export const DummyPostMentionNotification = () => {
   return (
     <Notification
-      identity={"celine"}
-      action={{ type: "post-mention" }}
+      icon={<MentionTiny />}
+      actionText={<>celine mentioned your post</>}
       content={
         <ContentLayout postTitle={"Post Title Here"}>
           I'm just gonna put the description here. The surrounding context is
@@ -24,8 +25,8 @@ export const DummyPostMentionNotification = () => {
 export const DummyUserMentionNotification = () => {
   return (
     <Notification
-      identity={"celine"}
-      action={{ type: "user-mention" }}
+      icon={<MentionTiny />}
+      actionText={<>celine mentioned you</>}
       content={
         <ContentLayout postTitle={"Post Title Here"}>
           <div>
diff --git a/app/(home-pages)/notifications/Notification.tsx b/app/(home-pages)/notifications/Notification.tsx
index b94d9b6c..5ca9d9ef 100644
--- a/app/(home-pages)/notifications/Notification.tsx
+++ b/app/(home-pages)/notifications/Notification.tsx
@@ -1,58 +1,17 @@
 import { Avatar } from "components/Avatar";
 import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
-import { CommentTiny } from "components/Icons/CommentTiny";
-import { ReplyTiny } from "components/Icons/ReplyTiny";
 import { PubLeafletRichtextFacet } from "lexicons/api";
-import { MentionTiny } from "components/Icons/MentionTiny";
-import { PubIcon } from "components/ActionBar/Publications";
 
 export const Notification = (props: {
-  identity: string;
-  action:
-    | { type: "comment" }
-    | { type: "reply" }
-    | { type: "follow"; avatar: string | undefined; pubName: string }
-    | { type: "post-mention" }
-    | { type: "user-mention" };
-
+  icon: React.ReactNode;
+  actionText: React.ReactNode;
   content?: React.ReactNode;
 }) => {
   return (
     <div className="flex flex-col  w-full">
       <div className="flex flex-row gap-2 items-center">
-        <div className="text-secondary shrink-0">
-          {props.action.type === "comment" ? (
-            <CommentTiny />
-          ) : props.action.type === "reply" ? (
-            <ReplyTiny />
-          ) : props.action.type === "follow" ? (
-            <Avatar
-              src={props.action.avatar}
-              displayName={props.identity}
-              tiny
-            />
-          ) : props.action.type === "post-mention" ? (
-            <MentionTiny />
-          ) : props.action.type === "user-mention" ? (
-            <MentionTiny />
-          ) : (
-            ""
-          )}
-        </div>
-        <div className="text-secondary font-bold">
-          {props.identity}{" "}
-          {props.action.type === "comment"
-            ? "commented on your post"
-            : props.action.type === "reply"
-              ? "replied to your comment"
-              : props.action.type === "follow"
-                ? `followed  ${props.action.pubName}!`
-                : props.action.type === "post-mention"
-                  ? `mentioned your post`
-                  : props.action.type === "user-mention"
-                    ? "mentioned you"
-                    : "did something!"}
-        </div>
+        <div className="text-secondary shrink-0">{props.icon}</div>
+        <div className="text-secondary font-bold">{props.actionText}</div>
       </div>
       {props.content && (
         <div className="flex flex-row gap-2 mt-1 w-full">
diff --git a/app/(home-pages)/notifications/ReplyNotification.tsx b/app/(home-pages)/notifications/ReplyNotification.tsx
index d32b7cc8..f272905e 100644
--- a/app/(home-pages)/notifications/ReplyNotification.tsx
+++ b/app/(home-pages)/notifications/ReplyNotification.tsx
@@ -1,5 +1,6 @@
 import { Avatar } from "components/Avatar";
 import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
+import { ReplyTiny } from "components/Icons/ReplyTiny";
 import {
   CommentInNotification,
   ContentLayout,
@@ -9,8 +10,8 @@ import {
 export const DummyReplyNotification = () => {
   return (
     <Notification
-      identity={"jared"}
-      action={{ type: "reply" }}
+      icon={<ReplyTiny />}
+      actionText={<>jared replied to your comment</>}
       content={
         <ContentLayout postTitle="This is the Post Title">
           <CommentInNotification