diff --git a/app/(home-pages)/reader/GlobalContent.tsx b/app/(home-pages)/reader/GlobalContent.tsx
index b8fc3fb9..94134cfe 100644
--- a/app/(home-pages)/reader/GlobalContent.tsx
+++ b/app/(home-pages)/reader/GlobalContent.tsx
@@ -8,6 +8,7 @@ import {
   DesktopInteractionPreviewDrawer,
   MobileInteractionPreviewDrawer,
 } from "./InteractionDrawers";
+import { useSelectedPostListing } from "src/useSelectedPostState";
 
 export const GlobalContent = (props: {
   promise: Promise<{ posts: Post[] }>;
@@ -29,6 +30,8 @@ export const GlobalContent = (props: {
 
   const posts = data?.posts ?? [];
 
+  let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
+
   if (posts.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 text-tertiary">
@@ -38,10 +41,14 @@ export const GlobalContent = (props: {
   }
 
   return (
-    <div className="flex flex-row gap-6 w-full">
-      <div className="flex flex-col gap-8 w-full">
+    <div className="globalReader flex flex-row gap-6 w-full">
+      <div className="globalPostListings flex flex-col gap-6 min-w-0 grow w-full">
         {posts.map((p) => (
-          <PostListing {...p} key={p.documents.uri} />
+          <PostListing
+            {...p}
+            key={p.documents.uri}
+            selected={selectedPost?.document_uri === p.documents.uri}
+          />
         ))}
       </div>
       <DesktopInteractionPreviewDrawer />
diff --git a/app/(home-pages)/reader/InboxContent.tsx b/app/(home-pages)/reader/InboxContent.tsx
index e3cfe223..1c15d9c6 100644
--- a/app/(home-pages)/reader/InboxContent.tsx
+++ b/app/(home-pages)/reader/InboxContent.tsx
@@ -8,17 +8,16 @@ import { getReaderFeed } from "./getReaderFeed";
 import { useEffect, useRef } from "react";
 import Link from "next/link";
 import { PostListing } from "components/PostListing";
-import { useHasBackgroundImage } from "components/Pages/useHasBackgroundImage";
 import {
   DesktopInteractionPreviewDrawer,
   MobileInteractionPreviewDrawer,
 } from "./InteractionDrawers";
+import { useSelectedPostListing } from "src/useSelectedPostState";
 
 export const InboxContent = (props: {
   promise: Promise<{ posts: Post[]; nextCursor: Cursor | null }>;
 }) => {
   const { posts, nextCursor } = use(props.promise);
-
   const getKey = (
     pageIndex: number,
     previousPageData: {
@@ -47,6 +46,8 @@ export const InboxContent = (props: {
 
   const loadMoreRef = useRef<HTMLDivElement>(null);
 
+  let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
+
   // Set up intersection observer to load more when trigger element is visible
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -78,13 +79,15 @@ export const InboxContent = (props: {
 
   if (allPosts.length === 0) return <ReaderEmpty />;
 
-  let hasBackgroundImage = useHasBackgroundImage();
-
   return (
-    <div className="flex flex-row gap-6 w-full ">
-      <div className="flex flex-col gap-6 w-full relative">
+    <div className="inboxReader flex flex-row gap-6 w-full ">
+      <div className="inboxPostListings flex flex-col gap-6 min-w-0 grow w-full relative">
         {sortedPosts.map((p) => (
-          <PostListing {...p} key={p.documents.uri} />
+          <PostListing
+            {...p}
+            key={p.documents.uri}
+            selected={selectedPost?.document_uri === p.documents.uri}
+          />
         ))}
         {/* Trigger element for loading more posts */}
         <div
diff --git a/app/(home-pages)/reader/InteractionDrawers.tsx b/app/(home-pages)/reader/InteractionDrawers.tsx
index 3fbea5c1..d9dd75bc 100644
--- a/app/(home-pages)/reader/InteractionDrawers.tsx
+++ b/app/(home-pages)/reader/InteractionDrawers.tsx
@@ -19,7 +19,7 @@ export const MobileInteractionPreviewDrawer = () => {
 
   return (
     <div
-      className={`z-20 fixed bottom-0 left-0 right-0 border border-border-light shrink-0 w-screen h-[90vh] px-3 bg-bg-leaflet rounded-t-lg overflow-auto ${selectedPost === null ? "hidden" : "block md:hidden "}`}
+      className={`mobileInteractionPreview shrink-0 z-20 fixed bottom-0 left-0 right-0 border border-border-light w-screen h-[90vh] px-3 bg-bg-leaflet rounded-t-lg overflow-auto ${selectedPost === null ? "hidden" : "block md:hidden "}`}
     >
       <PreviewDrawerContent selectedPost={selectedPost} />
     </div>
@@ -31,7 +31,7 @@ export const DesktopInteractionPreviewDrawer = () => {
 
   return (
     <div
-      className={`hidden md:block border border-border-light shrink-0 w-96 mr-2 px-3  h-[calc(100vh-100px)] sticky top-11 bottom-4 right-0 rounded-lg overflow-auto ${selectedPost === null ? "shadow-none border-dashed bg-transparent" : "shadow-md border-border bg-bg-page "}`}
+      className={`desktopInteractionPreview shrink-0 hidden md:block border border-border-light  w-96 mr-2 px-3  h-[calc(100vh-100px)] sticky top-11 bottom-4 right-0 rounded-lg overflow-auto ${selectedPost === null ? "shadow-none border-dashed bg-transparent" : "shadow-md border-border bg-bg-page "}`}
     >
       <PreviewDrawerContent selectedPost={selectedPost} />
     </div>
@@ -55,7 +55,12 @@ const PreviewDrawerContent = (props: {
     { keepPreviousData: false },
   );
 
-  if (!props.selectedPost || !props.selectedPost.document) return null;
+  if (!props.selectedPost || !props.selectedPost.document)
+    return (
+      <div className="italic text-tertiary pt-4 text-center">
+        Click a post's comments or mentions to preview them here!
+      </div>
+    );
 
   const postUrl = getDocumentURL(
     props.selectedPost.document,
@@ -70,22 +75,25 @@ const PreviewDrawerContent = (props: {
 
   return (
     <>
-      <div className="w-full text-sm text-tertiary flex justify-between pt-3 gap-3">
-        <div className="truncate min-w-0 grow">{drawerTitle}</div>
-        <button
-          className="text-tertiary"
-          onClick={() =>
-            useSelectedPostListing.getState().setSelectedPostListing(null)
-          }
-        >
-          <CloseTiny />
-        </button>
+      <div className="sticky top-0 bg-bg-page z-10">
+        <div className=" w-full text-sm text-tertiary flex justify-between pt-3 gap-3">
+          <div className="truncate min-w-0 grow">{drawerTitle}</div>
+          <button
+            className="text-tertiary"
+            onClick={() =>
+              useSelectedPostListing.getState().setSelectedPostListing(null)
+            }
+          >
+            <CloseTiny />
+          </button>
+        </div>
+        <SpeedyLink className="shrink-0 flex gap-1 items-center" href={postUrl}>
+          <ButtonPrimary fullWidth compact className="text-sm! mt-1">
+            See Full Post <GoToArrow />
+          </ButtonPrimary>
+        </SpeedyLink>
+        <hr className="mt-2 border-border-light" />
       </div>
-      <SpeedyLink className="shrink-0 flex gap-1 items-center" href={postUrl}>
-        <ButtonPrimary fullWidth compact className="text-sm! mt-1">
-          See Full Post <GoToArrow />
-        </ButtonPrimary>
-      </SpeedyLink>
       {isLoading ? (
         <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm mt-8">
           <span>loading</span>
diff --git a/app/(home-pages)/reader/NewContent.tsx b/app/(home-pages)/reader/NewContent.tsx
index 3fe20467..9a0e7296 100644
--- a/app/(home-pages)/reader/NewContent.tsx
+++ b/app/(home-pages)/reader/NewContent.tsx
@@ -10,6 +10,7 @@ import {
   DesktopInteractionPreviewDrawer,
   MobileInteractionPreviewDrawer,
 } from "./InteractionDrawers";
+import { useSelectedPostListing } from "src/useSelectedPostState";
 
 export const NewContent = (props: {
   promise: Promise<{ posts: Post[]; nextCursor: Cursor | null }>;
@@ -37,6 +38,8 @@ export const NewContent = (props: {
     },
   );
 
+  let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
+
   const loadMoreRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -71,9 +74,13 @@ export const NewContent = (props: {
 
   return (
     <div className="flex flex-row gap-6 w-full">
-      <div className="flex flex-col gap-6 w-full relative">
+      <div className="flex flex-col gap-6 w-full grow min-w-0 relative">
         {allPosts.map((p) => (
-          <PostListing {...p} key={p.documents.uri} />
+          <PostListing
+            {...p}
+            key={p.documents.uri}
+            selected={selectedPost?.document_uri === p.documents.uri}
+          />
         ))}
         <div
           ref={loadMoreRef}
diff --git a/app/(home-pages)/reader/layout.tsx b/app/(home-pages)/reader/layout.tsx
index 4af166d9..36b65237 100644
--- a/app/(home-pages)/reader/layout.tsx
+++ b/app/(home-pages)/reader/layout.tsx
@@ -12,7 +12,7 @@ import { useIdentityData } from "components/IdentityProvider";
 
 const allTabs = [
   { name: "Subs", href: "/reader", requiresAuth: true },
-  { name: "What's Hot", href: "/reader/hot", requiresAuth: false },
+  { name: "Trending", href: "/reader/hot", requiresAuth: false },
   { name: "New", href: "/reader/new", requiresAuth: false },
 ];
 
@@ -27,8 +27,7 @@ export default function ReaderLayout({
   const tabs = allTabs.filter((tab) => !tab.requiresAuth || isLoggedIn);
 
   const isActive = (href: string) => {
-    if (href === "/reader")
-      return pathname === "/reader" || pathname === "/";
+    if (href === "/reader") return pathname === "/reader" || pathname === "/";
     if (
       href === "/reader/hot" &&
       !isLoggedIn &&
diff --git a/components/PostListing.tsx b/components/PostListing.tsx
index 6954100e..19948d7d 100644
--- a/components/PostListing.tsx
+++ b/components/PostListing.tsx
@@ -13,10 +13,9 @@ import type { Post } from "app/(home-pages)/reader/getReaderFeed";
 
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
-import { InteractionPreview, TagPopover } from "./InteractionsPreview";
+import { TagPopover } from "./InteractionsPreview";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 import { useSmoker } from "./Toast";
-import { Separator } from "./Layout";
 import { CommentTiny } from "./Icons/CommentTiny";
 import { QuoteTiny } from "./Icons/QuoteTiny";
 import { ShareTiny } from "./Icons/ShareTiny";
@@ -27,7 +26,7 @@ import { getDocumentURL } from "app/lish/createPub/getPublicationURL";
 import { RecommendButton } from "./RecommendButton";
 import { getFirstParagraph } from "src/utils/getFirstParagraph";
 
-export const PostListing = (props: Post) => {
+export const PostListing = (props: Post & { selected?: boolean }) => {
   let pubRecord = props.publication?.pubRecord as
     | NormalizedPublication
     | undefined;
@@ -101,8 +100,8 @@ export const PostListing = (props: Post) => {
           className={`
           relative
           flex flex-col overflow-hidden
-          selected-outline border-border-light rounded-lg w-full  hover:outline-accent-contrast
-          hover:border-accent-contrast
+          selected-outline  rounded-lg w-full
+          ${props.selected ? "outline-2 outline-offset-1 outline-accent-contrast border-accent-contrast" : "hover:outline-accent-contrast hover:border-accent-contrast border-border-light"}
           ${showPageBackground ? "bg-bg-page " : "bg-bg-leaflet"} `}
           style={
             hasBackgroundImage
@@ -135,12 +134,12 @@ export const PostListing = (props: Post) => {
           )}
           <div className="postListingInfo px-3 py-2">
             {postRecord.title && (
-              <h3 className="postListingTitle text-primary line-clamp-2 sm:text-lg text-base">
+              <h3 className="postListingTitle text-primary line-clamp-2 sm:text-lg text-base pb-0.5">
                 {postRecord.title}
               </h3>
             )}
 
-            <p className="postListingDescription text-secondary line-clamp-3 sm:text-base text-sm">
+            <p className="postListingDescription text-secondary line-clamp-3 leading-snug sm:text-base text-sm">
               {postRecord.description || getFirstParagraph(postRecord)}
             </p>
             <div className="flex flex-col-reverse gap-2 text-sm text-tertiary items-center justify-start pt-1.5 w-full">
diff --git a/components/ThemeManager/themeDefaults.ts b/components/ThemeManager/themeDefaults.ts
index df775809..32ef966f 100644
--- a/components/ThemeManager/themeDefaults.ts
+++ b/components/ThemeManager/themeDefaults.ts
@@ -9,13 +9,13 @@ export const PubThemeDefaults = {
   pageBackground: "#FDFCFA",
   primary: "#272727",
   accentText: "#FFFFFF",
-  accentBackground: "#0000FF",
+  accentBackground: "#639431",
 } as const;
 
 // RGB color defaults (parsed from hex values above)
 export const PubThemeDefaultsRGB = {
   background: { r: 253, g: 252, b: 250 }, // #FDFCFA
   foreground: { r: 39, g: 39, b: 39 }, // #272727
-  accent: { r: 0, g: 0, b: 255 }, // #0000FF
+  accent: { r: 99, g: 148, b: 49 }, // #639431
   accentForeground: { r: 255, g: 255, b: 255 }, // #FFFFFF
 } as const;
diff --git a/components/ThemeManager/themeUtils.ts b/components/ThemeManager/themeUtils.ts
index a25c48b2..35151728 100644
--- a/components/ThemeManager/themeUtils.ts
+++ b/components/ThemeManager/themeUtils.ts
@@ -12,8 +12,8 @@ export const ThemeDefaults = {
   //everywhere else, accent-background = accent-1 and accent-text = accent-2.
   // we just need to create a migration pipeline before we can change this
   "theme/accent-text": "#FFFFFF",
-  "theme/accent-background": "#0000FF",
-  "theme/accent-contrast": "#0000FF",
+  "theme/accent-background": "#639431",
+  "theme/accent-contrast": "#639431",
 };
 
 // used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast