diff --git a/app/discover/PubListing.tsx b/app/discover/PubListing.tsx
index 1aefbe06..14387eb1 100644
--- a/app/discover/PubListing.tsx
+++ b/app/discover/PubListing.tsx
@@ -45,7 +45,7 @@ export const PubListing = (props: {
           hover:outline-accent-contrast hover:border-accent-contrast`}
       >
         <div
-          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))] " : ""}`}
+          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))] " : ""}`}
         >
           <div className="mx-auto pb-1">
             <PubIcon record={record} uri={props.uri} large />
diff --git a/app/reader/ReaderContent.tsx b/app/reader/ReaderContent.tsx
index f99e3a41..3aaf3975 100644
--- a/app/reader/ReaderContent.tsx
+++ b/app/reader/ReaderContent.tsx
@@ -2,6 +2,8 @@
 import { AtUri } from "@atproto/api";
 import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
 import { PubIcon } from "components/ActionBar/Publications";
+import { ButtonPrimary } from "components/Buttons";
+import { DiscoverSmall } from "components/Icons/DiscoverSmall";
 import { ShareSmall } from "components/Icons/ShareSmall";
 import { Separator } from "components/Layout";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
@@ -24,9 +26,10 @@ export const ReaderContent = (props: {
     documents: { data: Json; uri: string; indexed_at: string };
   }[];
 }) => {
+  if (props.posts.length === 0) return <ReaderEmpty />;
   return (
     <div className="flex flex-col gap-3">
-      {props.posts?.map((p) => <Post {...p} />)}
+      {props.posts?.map((p) => <Post {...p} key={p.documents.uri} />)}
     </div>
   );
 };
@@ -59,20 +62,23 @@ const Post = (props: {
 
   return (
     <BaseThemeProvider {...theme} local>
-      <SpeedyLink
-        href={`${props.publication.href}/${postUri.rkey}`}
+      <div
         style={{
           backgroundImage: `url(${backgroundImage})`,
           backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
           backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
         }}
-        className={`no-underline! flex flex-row gap-2 w-full
+        className={`no-underline! flex flex-row gap-2 w-full relative
           bg-bg-leaflet
           border border-border-light rounded-lg
           sm:p-2 p-2 selected-outline
           hover:outline-accent-contrast hover:border-accent-contrast
           `}
       >
+        <SpeedyLink
+          className="h-full w-full absolute top-0 left-0"
+          href={`${props.publication.href}/${postUri.rkey}`}
+        />
         <div
           className={`${showPageBackground ? "bg-bg-page " : "bg-transparent"}  rounded-md w-full  px-[10px] pt-2 pb-2`}
           style={{
@@ -87,14 +93,15 @@ const Post = (props: {
           <h3 className="text-primary truncate">{postRecord.title}</h3>
 
           <p className="text-secondary">{postRecord.description}</p>
+
           <div className="flex gap-2 text-sm text-tertiary items-center pt-3">
-            <Link
+            <SpeedyLink
               href={props.publication.href}
-              className="text-accent-contrast font-bold no-underline text-sm flex gap-[6px] items-center"
+              className="text-accent-contrast font-bold no-underline text-sm flex gap-[6px] items-center relative"
             >
               <PubIcon small record={pubRecord} uri={props.publication.uri} />
               {pubRecord.name}
-            </Link>
+            </SpeedyLink>
             <Separator classname="h-4 !min-h-0" />
             NAME HERE
             <Separator classname="h-4 !min-h-0" />
@@ -106,7 +113,19 @@ const Post = (props: {
               })}
           </div>
         </div>
-      </SpeedyLink>
+      </div>
     </BaseThemeProvider>
   );
 };
+
+const ReaderEmpty = () => {
+  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">
+      Nothing to read yet… <br />
+      Subscribe to publications and find their posts here!
+      <ButtonPrimary className="mx-auto place-self-center">
+        <DiscoverSmall /> Discover Publications
+      </ButtonPrimary>
+    </div>
+  );
+};
diff --git a/app/reader/SubscriptionsContent.tsx b/app/reader/SubscriptionsContent.tsx
index 7c77807d..8ab81907 100644
--- a/app/reader/SubscriptionsContent.tsx
+++ b/app/reader/SubscriptionsContent.tsx
@@ -13,15 +13,7 @@ export const SubscriptionsContent = (props: {
     }[];
   }[];
 }) => {
-  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>
-    );
+  if (props.publications.length === 0) return <SubscriptionsEmpty />;
 
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3">
@@ -29,3 +21,14 @@ export const SubscriptionsContent = (props: {
     </div>
   );
 };
+
+const SubscriptionsEmpty = () => {
+  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">
+      You haven't subscribed to any publications yet!
+      <ButtonPrimary className="mx-auto place-self-center">
+        <DiscoverSmall /> Discover Publications
+      </ButtonPrimary>
+    </div>
+  );
+};