diff --git a/app/(home-pages)/page.tsx b/app/(home-pages)/page.tsx
index 036e9562..7d8df18c 100644
--- a/app/(home-pages)/page.tsx
+++ b/app/(home-pages)/page.tsx
@@ -1,31 +1,36 @@
 import { cookies } from "next/headers";
-import ReaderLayout from "./reader/layout";
-import ReaderPage from "./reader/page";
 import HomePage from "./home/page";
+import { getReaderFeed } from "./reader/getReaderFeed";
+import { getHotFeed } from "./reader/getHotFeed";
+import { ReaderLayout } from "./reader/ReaderLayout";
 
 export default async function RootPage() {
   const cookieStore = await cookies();
   const hasAuth =
-    cookieStore.has("auth_token") ||
-    cookieStore.has("external_auth_token");
+    cookieStore.has("auth_token") || cookieStore.has("external_auth_token");
 
+  // if the user isn't logged in, leaflet.pub redirects to reader
   if (!hasAuth) {
     return (
-      <ReaderLayout>
-        <ReaderPage />
-      </ReaderLayout>
+      <ReaderLayout
+        defaultTab="Trending"
+        readerFeedPromise={getReaderFeed()}
+        hotFeedPromise={getHotFeed()}
+      />
     );
   }
 
   const navState = cookieStore.get("nav-state")?.value;
-
+  // if the user IS logged in and was last on reader, leaflet.pub redirects to reader
   if (navState === "reader") {
     return (
-      <ReaderLayout>
-        <ReaderPage />
-      </ReaderLayout>
+      <ReaderLayout
+        defaultTab="Inbox"
+        readerFeedPromise={getReaderFeed()}
+        hotFeedPromise={getHotFeed()}
+      />
     );
   }
-
+  // else redirect to writer home
   return <HomePage />;
 }
diff --git a/app/(home-pages)/reader/InboxContent.tsx b/app/(home-pages)/reader/InboxContent.tsx
index 6d8f9169..8d774410 100644
--- a/app/(home-pages)/reader/InboxContent.tsx
+++ b/app/(home-pages)/reader/InboxContent.tsx
@@ -13,11 +13,15 @@ import {
   MobileInteractionPreviewDrawer,
 } from "./InteractionDrawers";
 import { useSelectedPostListing } from "src/useSelectedPostState";
+import { getIdentityData } from "actions/getIdentityData";
+import { useIdentityData } from "components/IdentityProvider";
+import { LoginContent } from "components/LoginButton";
 
 export const InboxContent = (props: {
   promise: Promise<{ posts: Post[]; nextCursor: Cursor | null }>;
 }) => {
   const { posts, nextCursor } = use(props.promise);
+  let { identity: identityData } = useIdentityData();
   const getKey = (
     pageIndex: number,
     previousPageData: {
@@ -77,6 +81,17 @@ export const InboxContent = (props: {
       new Date(a.documents.data?.publishedAt || 0).getTime(),
   );
 
+  if (!identityData) {
+    return (
+      <div className="mx-auto w-fit h-full flex pt-2 sm:pt-0 place-items-start sm:place-items-center">
+        <div className="flex flex-col gap-4 h-fit justify-center text-center">
+          <h3>Log in or sign up to see your subscriptions!</h3>
+          <LoginContent className="w-full! sm:min-w-xs" />
+        </div>
+      </div>
+    );
+  }
+
   if (allPosts.length === 0) return <ReaderEmpty />;
 
   return (
diff --git a/app/(home-pages)/reader/ReaderLayout.tsx b/app/(home-pages)/reader/ReaderLayout.tsx
new file mode 100644
index 00000000..c8be5af8
--- /dev/null
+++ b/app/(home-pages)/reader/ReaderLayout.tsx
@@ -0,0 +1,47 @@
+"use client";
+import { PageTitle } from "components/ActionBar/DesktopNavigation";
+import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
+import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout";
+import { ReaderUnreadSmall } from "components/Icons/ReaderSmall";
+import { GlobalContent } from "./GlobalContent";
+import { InboxContent } from "./InboxContent";
+import type { Cursor, Post } from "./getReaderFeed";
+
+export function ReaderLayout(props: {
+  readerFeedPromise: Promise<{ posts: Post[]; nextCursor: Cursor | null }>;
+  hotFeedPromise: Promise<{ posts: Post[] }>;
+  defaultTab: "Inbox" | "Trending";
+}) {
+  return (
+    <DashboardLayout
+      id="reader"
+      currentPage="reader"
+      defaultTab={props.defaultTab}
+      pageTitle={<PageTitle icon={<ReaderUnreadSmall />} pageTitle="Reader" />}
+      tabs={{
+        Inbox: {
+          content: (
+            <DashboardPageLayout
+              scrollKey="dashboard-reader-inbox"
+              pageTitle="Inbox"
+              showHeader={false}
+            >
+              <InboxContent promise={props.readerFeedPromise} />
+            </DashboardPageLayout>
+          ),
+        },
+        Trending: {
+          content: (
+            <DashboardPageLayout
+              scrollKey="dashboard-reader-global"
+              pageTitle="Trending"
+              showHeader={false}
+            >
+              <GlobalContent promise={props.hotFeedPromise} />
+            </DashboardPageLayout>
+          ),
+        },
+      }}
+    />
+  );
+}
diff --git a/app/(home-pages)/reader/layout.tsx b/app/(home-pages)/reader/layout.tsx
deleted file mode 100644
index 762a063d..00000000
--- a/app/(home-pages)/reader/layout.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client";
-
-import { usePathname, useRouter } from "next/navigation";
-import { PageHeader } from "components/PageHeader";
-import { DesktopNavigation } from "components/ActionBar/DesktopNavigation";
-import { MediaContents } from "components/Media";
-import { DashboardIdContext } from "components/PageLayouts/DashboardLayout";
-import { useIdentityData } from "components/IdentityProvider";
-import { Tab } from "components/Tab";
-
-const allTabs = [
-  { name: "Subs", href: "/reader", requiresAuth: true },
-  { name: "Trending", href: "/reader/hot", requiresAuth: false },
-  { name: "New", href: "/reader/new", requiresAuth: false },
-];
-
-export default function ReaderLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const pathname = usePathname();
-  const router = useRouter();
-  const { identity } = useIdentityData();
-  const isLoggedIn = !!identity?.atp_did;
-  const tabs = allTabs.filter((tab) => !tab.requiresAuth || isLoggedIn);
-
-  const isActive = (href: string) => {
-    if (href === "/reader") return pathname === "/reader" || pathname === "/";
-    if (
-      href === "/reader/hot" &&
-      !isLoggedIn &&
-      (pathname === "/reader" || pathname === "/")
-    )
-      return true;
-    return pathname.startsWith(href);
-  };
-
-  return (
-    <DashboardIdContext.Provider value="reader">
-      <div className="dashboard pwa-padding relative max-w-(--breakpoint-lg) w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6">
-        <MediaContents mobile={false}>
-          <div className="flex flex-col gap-3 my-6">
-            <DesktopNavigation currentPage="reader" />
-          </div>
-        </MediaContents>
-        <div
-          className="w-full h-full flex flex-col gap-2 relative overflow-y-scroll pt-3 pb-3 px-3 sm:pt-8 sm:pb-3 sm:pl-6 sm:pr-4"
-          id="home-content"
-        >
-          <PageHeader>
-            <div className="pubDashTabs flex flex-row gap-1">
-              {tabs.map((tab) => (
-                <Tab
-                  key={tab.name}
-                  name={tab.name}
-                  selected={isActive(tab.href)}
-                  onSelect={() => router.push(tab.href)}
-                />
-              ))}
-            </div>
-            <div className="sm:block grow" />
-          </PageHeader>
-          {children}
-        </div>
-      </div>
-    </DashboardIdContext.Provider>
-  );
-}
diff --git a/app/(home-pages)/reader/page.tsx b/app/(home-pages)/reader/page.tsx
index 3e5349fe..9abef7e4 100644
--- a/app/(home-pages)/reader/page.tsx
+++ b/app/(home-pages)/reader/page.tsx
@@ -3,14 +3,15 @@ import { getReaderFeed } from "./getReaderFeed";
 import { getHotFeed } from "./getHotFeed";
 import { InboxContent } from "./InboxContent";
 import { GlobalContent } from "./GlobalContent";
+import { ReaderLayout } from "./ReaderLayout";
 
 export default async function Reader() {
   let identityData = await getIdentityData();
-  if (!identityData?.atp_did) {
-    const feedPromise = getHotFeed();
-    return <GlobalContent promise={feedPromise} />;
-  }
-
-  const feedPromise = getReaderFeed();
-  return <InboxContent promise={feedPromise} />;
+  return (
+    <ReaderLayout
+      defaultTab={!identityData?.atp_did ? "Trending" : "Inbox"}
+      readerFeedPromise={getReaderFeed()}
+      hotFeedPromise={getHotFeed()}
+    />
+  );
 }
diff --git a/app/lish/[did]/[publication]/UpgradeModal.tsx b/app/lish/[did]/[publication]/UpgradeModal.tsx
index daa12094..6feb961c 100644
--- a/app/lish/[did]/[publication]/UpgradeModal.tsx
+++ b/app/lish/[did]/[publication]/UpgradeModal.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ButtonPrimary } from "components/Buttons";
 import { Modal } from "components/Modal";
 import { useState } from "react";
diff --git a/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx
index 0bca697e..3415b8ca 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useEffect, useMemo, useState } from "react";
 import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
 import { createBillingPortalSession } from "actions/createBillingPortalSession";
diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx
index e2beeeba..28af90ce 100644
--- a/components/ActionBar/DesktopNavigation.tsx
+++ b/components/ActionBar/DesktopNavigation.tsx
@@ -35,11 +35,16 @@ export const NavigationContent = (props: NavigationProps) => {
   return (
     <>
       {props.pageTitle}
+      <hr className="border-border-light mb-2" />
 
-      <div className="flex flex-col gap-1 pt-0.5">{props.actions}</div>
-      {props.tabs && Object.keys(props.tabs).length > 1 && (
+      {props.actions && (
         <>
+          <div className="flex flex-col gap-1 pt-0.5">{props.actions}</div>
           <hr className="border-border-light my-2" />
+        </>
+      )}
+      {props.tabs && Object.keys(props.tabs).length > 1 && (
+        <>
           {Object.keys(props.tabs).map((t) => (
             <ActionButton
               labelOnMobile
@@ -90,6 +95,7 @@ export const NavigationContent = (props: NavigationProps) => {
           asChild
           trigger={
             <ActionButton
+              className="w-full!"
               secondary
               icon={<AccountSmall />}
               label="Log In/Sign Up"
diff --git a/components/LoginButton.tsx b/components/LoginButton.tsx
index a02c46be..308ff8ea 100644
--- a/components/LoginButton.tsx
+++ b/components/LoginButton.tsx
@@ -35,6 +35,7 @@ export const LoginModal = (props: {
       trigger={props.trigger}
       open={open}
       onOpenChange={setOpen}
+      className="w-full!"
     >
       <LoginContent
         noEmailLogin={props.noEmailLogin}
@@ -52,6 +53,7 @@ export const LoginContent = (props: {
   redirectRoute?: string;
   open?: boolean;
   onSuccess?: () => void;
+  className?: string;
 }) => {
   let identityData = useIdentityData();
   let [state, setState] = useState<
@@ -117,7 +119,7 @@ export const LoginContent = (props: {
   };
 
   return (
-    <div className="flex flex-col gap-2 w-xs">
+    <div className={`flex flex-col gap-2 w-full sm:w-xs ${props.className}`}>
       <ToggleGroup
         value={
           state === "email log in" || state === "email confirm"
@@ -172,7 +174,9 @@ export const LoginContent = (props: {
                 <hr className="border-border-light mt-2 mb-1" />
                 <button
                   className="text-sm text-accent-contrast"
-                  onClick={() => {
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
                     setState("email log in");
                   }}
                 >
@@ -186,6 +190,7 @@ export const LoginContent = (props: {
             className="flex flex-col gap-1"
             onSubmit={(e) => {
               e.preventDefault();
+              e.stopPropagation();
               handleEmailSubmit();
             }}
           >
@@ -207,7 +212,9 @@ export const LoginContent = (props: {
             <button
               type="button"
               className="text-accent-contrast text-sm"
-              onClick={() => {
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
                 setState("log in");
               }}
             >
diff --git a/components/Modal.tsx b/components/Modal.tsx
index dee76cee..893aad65 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -29,7 +29,7 @@ export const Modal = ({
         <Dialog.Content
           className={`
           z-50 fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
-          overflow-y-scroll no-scrollbar w-max max-w-[calc(100vw-32px)] h-fit max-h-[calc(100dvh-32px)] p-3 flex flex-col
+          overflow-y-scroll no-scrollbar max-w-[calc(100vw-32px)] h-fit max-h-[calc(100dvh-32px)] p-3 flex flex-col w-full sm:w-max
 
           `}
         >
diff --git a/components/Subscribe/HandleSubscribe.tsx b/components/Subscribe/HandleSubscribe.tsx
index cb11cca7..803d9f20 100644
--- a/components/Subscribe/HandleSubscribe.tsx
+++ b/components/Subscribe/HandleSubscribe.tsx
@@ -203,7 +203,7 @@ export const AtSubscribeSuccess = (props: {}) => {
 export const AtmosphericHandleInfo = (props: { trigger?: React.ReactNode }) => {
   return (
     <Popover
-      className="z-100! max-w-sm flex flex-col"
+      className="z-100! w-[min(24rem,var(--radix-popover-content-available-width))] flex flex-col"
       trigger={
         props.trigger ? (
           props.trigger
@@ -214,12 +214,12 @@ export const AtmosphericHandleInfo = (props: { trigger?: React.ReactNode }) => {
         )
       }
     >
-      <div className="font-bold text-secondary pb-1">
+      <div className="font-bold text-secondary pb-1 ">
         The Atmosphere is a growing ecosystem of social apps, like Leaflet and
         Bluesky.
         <br />
       </div>
-      <div className="pb-3  font-bold text-secondary">
+      <div className="pb-3 font-bold text-secondary">
         One account gets you into <em>all</em> of them.
       </div>
 
diff --git a/components/ToggleGroup.tsx b/components/ToggleGroup.tsx
index 18b5d8dc..9136b54e 100644
--- a/components/ToggleGroup.tsx
+++ b/components/ToggleGroup.tsx
@@ -23,7 +23,11 @@ export function ToggleGroup<T extends string>(props: {
           }
           ${props.optionClassName}
             `}
-          onClick={() => props.onChange(option.value)}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            props.onChange(option.value);
+          }}
         >
           {option.label}
         </button>
diff --git a/components/utils/DotLoader.tsx b/components/utils/DotLoader.tsx
index 67571f22..8de50793 100644
--- a/components/utils/DotLoader.tsx
+++ b/components/utils/DotLoader.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useEffect, useState } from "react";
 
 export function DotLoader(props: { className?: string }) {
diff --git a/src/hooks/isMobile.ts b/src/hooks/isMobile.ts
index d223aa20..6067b863 100644
--- a/src/hooks/isMobile.ts
+++ b/src/hooks/isMobile.ts
@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect } from "react";
 
 export function useIsMobile() {