diff --git a/app/discover/PubListing.tsx b/app/discover/PubListing.tsx
index f12095ed..1aefbe06 100644
--- a/app/discover/PubListing.tsx
+++ b/app/discover/PubListing.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { AtUri } from "@atproto/syntax";
 import { PubIcon } from "components/ActionBar/Publications";
+import { Separator } from "components/Layout";
 import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
 import { BaseThemeProvider } from "components/ThemeManager/ThemeProvider";
 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api";
@@ -9,11 +10,11 @@ import { timeAgo } from "src/utils/timeAgo";
 import { Json } from "supabase/database.types";
 
 export const PubListing = (props: {
+  resizeHeight?: boolean;
   record: Json;
   uri: string;
   documents_in_publications: {
-    indexed_at: string;
-    documents: { data: Json } | null;
+    documents: { data: Json; indexed_at: string } | null;
   }[];
 }) => {
   let record = props.record as PubLeafletPublication.Record;
@@ -43,16 +44,33 @@ export const PubListing = (props: {
           px-3 py-3 selected-outline
           hover:outline-accent-contrast hover:border-accent-contrast`}
       >
-        <PubIcon record={record} uri={props.uri} />
-
         <div
-          className={`flex w-full flex-col ${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] px-2 py-1 rounded-lg" : ""}`}
+          className={`flex w-full flex-col justify-center text-center max-h-48 pt-4 pb-3 px-3 rounded-lg ${props.resizeHeight ? "" : "sm:h-48 h-full"}${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] " : ""}`}
         >
-          <h3>{record.name}</h3>
-          <p className="text-secondary">{record.description}</p>
-          <div className="flex gap-1 items-center text-sm text-tertiary pt-2 ">
+          <div className="mx-auto pb-1">
+            <PubIcon record={record} uri={props.uri} large />
+          </div>
+
+          <h4 className="truncate shrink-0 ">{record.name}</h4>
+          {record.description && (
+            <p className="text-secondary text-sm max-h-full overflow-hidden pb-1">
+              {record.description}
+            </p>
+          )}
+          <div className="flex flex-col items-center justify-center text-xs text-tertiary pt-2">
+            <div className="flex flex-row gap-2 items-center">
+              <div className="h-[14px] w-[14px] rounded-full bg-test shrink-0" />
+              <p>Name Here</p>{" "}
+            </div>
             <p>
-              Updated {timeAgo(props.documents_in_publications[0].indexed_at)}
+              Updated{" "}
+              {timeAgo(
+                props.documents_in_publications.sort((a, b) => {
+                  let dateA = new Date(a.documents?.indexed_at || 0);
+                  let dateB = new Date(b.documents?.indexed_at || 0);
+                  return dateB.getTime() - dateA.getTime();
+                })[0].documents?.indexed_at || "",
+              )}
             </p>
           </div>
         </div>
diff --git a/app/discover/SortedPublicationList.tsx b/app/discover/SortedPublicationList.tsx
index 71aaa6b5..9641f29f 100644
--- a/app/discover/SortedPublicationList.tsx
+++ b/app/discover/SortedPublicationList.tsx
@@ -39,7 +39,7 @@ export function SortedPublicationList(props: {
             );
             return bDate.getTime() - aDate.getTime();
           })
-          .map((pub) => <PubListing key={pub.uri} {...pub} />)}
+          .map((pub) => <PubListing resizeHeight key={pub.uri} {...pub} />)}
       </div>
     </div>
   );
diff --git a/app/reader/SubscriptionsContent.tsx b/app/reader/SubscriptionsContent.tsx
index b4537f52..7c77807d 100644
--- a/app/reader/SubscriptionsContent.tsx
+++ b/app/reader/SubscriptionsContent.tsx
@@ -1,3 +1,31 @@
-export const SubscriptionsContent = () => {
-  return <div>subs here</div>;
+import { PubListing } from "app/discover/PubListing";
+import { PublicationsList } from "app/discover/page";
+import { ButtonPrimary } from "components/Buttons";
+import { DiscoverSmall } from "components/Icons/DiscoverSmall";
+import { Json } from "supabase/database.types";
+
+export const SubscriptionsContent = (props: {
+  publications: {
+    record: Json;
+    uri: string;
+    documents_in_publications: {
+      documents: { data: Json; indexed_at: string } | null;
+    }[];
+  }[];
+}) => {
+  if (props.publications.length === 0)
+    return (
+      <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center font-bold text-tertiary">
+        Looks like you don't have any publication subscriptions yet!
+        <ButtonPrimary className="mx-auto place-self-center">
+          <DiscoverSmall /> Discover Publications!
+        </ButtonPrimary>
+      </div>
+    );
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3">
+      {props.publications?.map((p) => <PubListing {...p} />)}
+    </div>
+  );
 };
diff --git a/app/reader/page.tsx b/app/reader/page.tsx
index 925153bc..dc233693 100644
--- a/app/reader/page.tsx
+++ b/app/reader/page.tsx
@@ -95,13 +95,18 @@ export default async function Reader(props: {}) {
     .select(`publications(*, documents_in_publications(documents(*)))`)
     .eq("identity", auth_res?.atp_did);
 
+  // get publications to fit PublicationList type
+  let subbedPublications =
+    publications
+      ?.map((subscription) => subscription.publications)
+      .filter((pub) => pub !== null) || [];
+
   // Flatten all posts from all publications into a single array
   let posts =
-    publications?.flatMap((publication) => {
-      const postsInPub =
-        publication.publications?.documents_in_publications.filter(
-          (d) => !!d?.documents,
-        );
+    subbedPublications?.flatMap((pub) => {
+      const postsInPub = pub.documents_in_publications.filter(
+        (d) => !!d?.documents,
+      );
 
       if (!postsInPub || postsInPub.length === 0) return [];
 
@@ -114,9 +119,9 @@ export default async function Reader(props: {}) {
         )
         .map((postInPub) => ({
           publication: {
-            href: getPublicationURL(publication.publications!),
-            pubRecord: publication.publications?.record || null,
-            uri: publication.publications?.uri || "",
+            href: getPublicationURL(pub!),
+            pubRecord: pub?.record || null,
+            uri: pub?.uri || "",
           },
           documents: {
             data: postInPub.documents!.data,
@@ -162,9 +167,11 @@ export default async function Reader(props: {}) {
                     />
                   ),
                 },
-                subs: {
+                subscriptions: {
                   controls: null,
-                  content: <SubscriptionsContent />,
+                  content: (
+                    <SubscriptionsContent publications={subbedPublications} />
+                  ),
                 },
                 discover: {
                   controls: null,
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index e5fe0502..d436717d 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -94,6 +94,7 @@ export const PubIcon = (props: {
   record: PubLeafletPublication.Record;
   uri: string;
   small?: boolean;
+  large?: boolean;
   className?: string;
 }) => {
   if (!props.record) return;
@@ -106,14 +107,14 @@ export const PubIcon = (props: {
         backgroundSize: "cover",
         backgroundImage: `url(/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]})`,
       }}
-      className={`${props.small ? "w-5 h-5" : "w-6 h-6"} rounded-full ${props.className}`}
+      className={`${props.small ? "w-5 h-5" : props.large ? "w-12 h-12" : "w-6 h-6"} rounded-full ${props.className}`}
     />
   ) : (
     <div
-      className={`${props.small ? "w-5 h-5" : "w-6 h-6"} rounded-full bg-accent-1 relative`}
+      className={`${props.small ? "w-5 h-5" : props.large ? "w-12 h-12" : "w-6 h-6"} rounded-full bg-accent-1 relative`}
     >
       <div
-        className={`${props.small ? "text-xs" : "text-sm"} font-bold  absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-accent-2`}
+        className={`${props.small ? "text-xs" : props.large ? "text-2xl" : "text-sm"} font-bold  absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-accent-2`}
       >
         {props.record?.name.slice(0, 1)}
       </div>