diff --git a/components/LoginButton.tsx b/components/LoginButton.tsx
index 12b62d42..5d576061 100644
--- a/components/LoginButton.tsx
+++ b/components/LoginButton.tsx
@@ -6,11 +6,19 @@ import { ButtonPrimary } from "./Buttons";
 import { ActionButton } from "./ActionBar/ActionButton";
 import { AccountSmall } from "./Icons/AccountSmall";
 import { useIsMobile } from "src/hooks/isMobile";
-import { HandleInput } from "./Subscribe/HandleSubscribe";
-import { EmailInput } from "./Subscribe/EmailSubscribe";
+import {
+  AtmosphericHandleInfo,
+  HandleInput,
+} from "./Subscribe/HandleSubscribe";
+import { EmailInput, EmailConfirm } from "./Subscribe/EmailSubscribe";
 import { useState } from "react";
 import { GoToArrow } from "./Icons/GoToArrow";
 import { ToggleGroup } from "./ToggleGroup";
+import { Modal } from "./Modal";
+import { useToaster } from "./Toast";
+import { InfoSmall } from "./Icons/InfoSmall";
+import { HelpSmall } from "./Icons/HelpSmall";
+import { HelpTiny } from "./Icons/HelpTiny";
 
 export function LoginButton() {
   let identityData = useIdentityData();
@@ -36,12 +44,14 @@ export function LoginActionButton() {
   let [state, setState] = useState<"log in" | "sign up" | "email log in">(
     "log in",
   );
+  let [loginEmail, setLoginEmail] = useState("");
+  let toaster = useToaster();
   return (
     <Popover
       asChild
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
-      className="flex flex-col gap-2"
+      className="flex flex-col gap-2 py-3! w-xs"
       trigger={
         <ActionButton secondary icon={<AccountSmall />} label="Sign In" />
       }
@@ -56,27 +66,61 @@ export function LoginActionButton() {
       />
       {state === "log in" ? (
         <>
-          <h3>Atmospheric handle</h3>
-          <HandleInput className="h-10!" action="login" />
+          <div className="flex justify-between">
+            <h4>Log into the Atmosphere</h4>
+            <AtmosphericHandleInfo trigger={<HelpTiny />} />
+          </div>
+          <HandleInput
+            large
+            action={<GoToArrow className="text-accent-contrast" />}
+          />
           <hr className="border-border-light" />
           <button
+            className="text-sm text-accent-contrast"
             onClick={() => {
               setState("email log in");
             }}
           >
-            log in with email
+            or log in with email
           </button>
         </>
       ) : state === "email log in" ? (
         <>
-          <EmailInput action="login" />
+          <h4>Log in with Email</h4>
+
+          <EmailInput
+            large
+            value={loginEmail}
+            onChange={setLoginEmail}
+            action={
+              <Modal
+                trigger={
+                  <GoToArrow
+                    className="h-fit
+                "
+                  />
+                }
+              >
+                <EmailConfirm
+                  emailValue={loginEmail}
+                  onSubmit={() => {
+                    toaster({
+                      content: <div className="font-bold">Welcome back!</div>,
+                      type: "success",
+                    });
+                  }}
+                />
+              </Modal>
+            }
+          />
           <hr className="border-border-light" />
           <button
+            className="text-accent-contrast text-sm"
             onClick={() => {
               setState("log in");
             }}
           >
-            log in with atmosphere
+            or log in with the Atmosphere
           </button>
         </>
       ) : (
diff --git a/components/Subscribe/EmailSubscribe.tsx b/components/Subscribe/EmailSubscribe.tsx
index c8d9cc9d..c4013565 100644
--- a/components/Subscribe/EmailSubscribe.tsx
+++ b/components/Subscribe/EmailSubscribe.tsx
@@ -1,85 +1,32 @@
 "use client";
 import * as OneTimePasswordField from "@radix-ui/react-one-time-password-field";
 import { ButtonPrimary } from "components/Buttons";
-
 import { Input } from "components/Input";
-import { Modal } from "components/Modal";
-import { useState } from "react";
-import { EmailSubscribeSuccess } from "./EmailSubscribeSuccess";
-import { GoToArrow } from "components/Icons/GoToArrow";
-import { useToaster } from "components/Toast";
 
 export const EmailInput = (props: {
-  action: "link" | "subscribe" | "login";
+  action: React.ReactNode;
   autoFocus?: boolean;
-  user?: {
-    loggedIn: boolean;
-    email: string | undefined;
-    handle: string | undefined;
-  };
+  large?: boolean;
+  value: string;
+  onChange: (val: string) => void;
+  disabled?: boolean;
 }) => {
-  let [value, setValue] = useState(
-    props.user?.loggedIn && props.user?.email ? props.user?.email : "",
-  );
-  let [state, setState] = useState<"confirm" | "success">(
-    props.user?.loggedIn && props.user?.email ? "success" : "confirm",
-  );
-  let toaster = useToaster();
-
   return (
-    <div className="relative input-with-border flex gap-2 w-full items-center mx-auto">
+    <div
+      className={` input-with-border flex gap-2 w-full items-center mx-auto py-0! ${props.large && "px-2!"}`}
+    >
       <Input
         autoFocus={props.autoFocus}
-        className={`appearance-none! outline-none! w-full pr-22 `}
-        disabled={props.user?.loggedIn}
+        className={`appearance-none! outline-none! grow ${props.large ? "py-2!" : "py-0.5 "}`}
+        disabled={props.disabled}
         placeholder="email@example.com"
         size={0}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
+        value={props.value}
+        onChange={(e) => props.onChange(e.target.value)}
       />
-      <Modal
-        asChild
-        trigger={
-          <div className="absolute top-0 bottom-0 right-[4px] flex items-center text-accent-contrast">
-            {props.action === "login" ? (
-              <GoToArrow />
-            ) : (
-              <ButtonPrimary
-                compact
-                className="leading-tight! outline-none! text-sm!"
-              >
-                {props.action === "link" ? "Link" : "Subscribe"}
-              </ButtonPrimary>
-            )}
-          </div>
-        }
-      >
-        {state === "success" ? (
-          <EmailSubscribeSuccess
-            email={props.user?.email}
-            handle={props.user?.handle}
-          />
-        ) : (
-          <EmailConfirm
-            emailValue={value}
-            onSubmit={() => {
-              props.action === "subscribe"
-                ? setState("success")
-                : props.action === "link"
-                  ? toaster({
-                      content: (
-                        <div className="font-bold">Linked your email!</div>
-                      ),
-                      type: "success",
-                    })
-                  : toaster({
-                      content: <div className="font-bold">Welcome back!</div>,
-                      type: "success",
-                    });
-            }}
-          />
-        )}
-      </Modal>
+      <div className={` text-accent-contrast flex items-center shrink-0 `}>
+        {props.action}
+      </div>
     </div>
   );
 };
diff --git a/components/Subscribe/HandleSubscribe.tsx b/components/Subscribe/HandleSubscribe.tsx
index ea49bdee..67448b46 100644
--- a/components/Subscribe/HandleSubscribe.tsx
+++ b/components/Subscribe/HandleSubscribe.tsx
@@ -14,7 +14,6 @@ import {
 } from "./Logos";
 
 import { Separator } from "components/Layout";
-import { GoToArrow } from "components/Icons/GoToArrow";
 
 export const SubscribeWithHandle = (props: {
   autoFocus?: boolean;
@@ -71,42 +70,28 @@ export const LinkHandle = (props: { compact?: boolean }) => {
 
 export const HandleInput = (props: {
   autoFocus?: boolean;
-  action?: "subscribe" | "link" | "login";
+  action?: React.ReactNode;
   className?: string;
+  large?: boolean;
 }) => {
   let [handleValue, setHandleValue] = useState("");
   return (
     <div
-      className={`handleInput input-with-border relative pl-0! py-0! flex gap-0 w-full ${props.className}`}
+      className={`handleInput input-with-border relative py-0! flex items-center gap-1 w-full ${props.large && "px-2!"} ${props.className} `}
     >
-      <div className="text-tertiary text-center w-8 shrink-0 mr-2 flex justify-center h-full items-center">
+      <div className="text-tertiary text-center shrink-0  flex justify-end h-full items-center">
         @
       </div>
       <Input
         autoFocus={props.autoFocus}
-        className={`appearance-none! outline-none! w-full py-0.5 pr-22`}
+        className={`appearance-none! grow outline-none!  ${props.large ? "py-2!" : "py-0.5 "} `}
         placeholder="atmosphere.handle"
         size={0}
         value={handleValue}
         onChange={(e) => setHandleValue(e.target.value)}
       />
 
-      <div className="absolute top-0 bottom-0 right-[4px] flex items-center">
-        {props.action === "login" ? (
-          <GoToArrow />
-        ) : (
-          <ButtonPrimary
-            compact
-            className="leading-tight! outline-none! text-sm!"
-          >
-            {props.action === "link"
-              ? "Link"
-              : props.action === "subscribe"
-                ? "Subscribe"
-                : null}
-          </ButtonPrimary>
-        )}
-      </div>
+      {props.action}
     </div>
   );
 };
@@ -167,31 +152,27 @@ export const AtmosphericHandleInfo = (props: { trigger?: React.ReactNode }) => {
           props.trigger
         ) : (
           <div className="text-accent-contrast text-sm">
-            What's a universal handle?
+            What's the Atmosphere
           </div>
         )
       }
     >
       <div className="font-bold text-secondary">
-        Your universal handle is the username you use to sign into enabled apps
-        like...{" "}
+        The Atmosphere is a family of apps that you can access with a single
+        account
       </div>
-      <div className="opaque-container px-4 pt-2 pb-2 flex gap-2 w-full justify-between">
+
+      <div className=" text-secondary">Apps like...</div>
+      <div className="opaque-container px-4 pt-3 pb-2 flex gap-3 w-full justify-between">
         <AtApp logo={<LogoLeaflet />} name="Leaflet" />
         <AtApp logo={<LogoBluesky />} name="Bluesky" />
         <AtApp logo={<LogoBlacksky />} name="Blacksky" />
         <AtApp logo={<LogoEurosky />} name="Eurosky" />
         <AtApp logo={<LogoTangled />} name="Tangled" />
       </div>
-      <div className="text-secondary flex flex-col gap-1">
-        <div>A handle can log into ANY enabled app.</div>
-        <div>
-          ie, you can log into <strong>Leaflet</strong> with the handle you made
-          for <strong>Bluesky</strong>!
-        </div>
-      </div>
+
       <ButtonPrimary fullWidth className="mx-auto mb-3 mt-1">
-        Create a handle on Bluesky!
+        Sign up through Bluesky!
       </ButtonPrimary>
     </Popover>
   );
diff --git a/components/Subscribe/ManageSubscribe.tsx b/components/Subscribe/ManageSubscribe.tsx
index 3c038bc9..7133e6c4 100644
--- a/components/Subscribe/ManageSubscribe.tsx
+++ b/components/Subscribe/ManageSubscribe.tsx
@@ -1,9 +1,12 @@
-import { ButtonSecondary } from "components/Buttons";
+"use client";
+import { useState } from "react";
+import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
 import { CheckTiny } from "components/Icons/CheckTiny";
 import { GoToArrow } from "components/Icons/GoToArrow";
 import { Modal } from "components/Modal";
+import { useToaster } from "components/Toast";
 import { LinkHandle } from "./HandleSubscribe";
-import { EmailInput } from "./EmailSubscribe";
+import { EmailInput, EmailConfirm } from "./EmailSubscribe";
 
 export const ManageSubscription = (props: {
   newsletterMode: boolean;
@@ -14,6 +17,8 @@ export const ManageSubscription = (props: {
     subscribed: boolean;
   };
 }) => {
+  let [email, setEmail] = useState(props.user?.email ?? "");
+  let toaster = useToaster();
   let prefClassName =
     "flex gap-2 justify-between font-bold text-secondary items-center";
   return (
@@ -68,7 +73,33 @@ export const ManageSubscription = (props: {
                 to get updates right to your inbox!
               </div>
             </div>
-            <EmailInput action="link" {...props} />
+            <EmailInput
+              value={email}
+              onChange={setEmail}
+              disabled={props.user?.loggedIn}
+              action={
+                <Modal
+                  trigger={
+                    <ButtonPrimary
+                      compact
+                      className="leading-tight! outline-none! text-sm!"
+                    >
+                      link
+                    </ButtonPrimary>
+                  }
+                >
+                  <EmailConfirm
+                    emailValue={email}
+                    onSubmit={() => {
+                      toaster({
+                        content: <div className="font-bold">Email Linked!</div>,
+                        type: "success",
+                      });
+                    }}
+                  />
+                </Modal>
+              }
+            />
           </div>
         ) : null}
         {!props.user.handle ? (
diff --git a/components/Subscribe/SubscribeButton.tsx b/components/Subscribe/SubscribeButton.tsx
index 253576f4..e816f8cd 100644
--- a/components/Subscribe/SubscribeButton.tsx
+++ b/components/Subscribe/SubscribeButton.tsx
@@ -1,5 +1,8 @@
+"use client";
+import { useState } from "react";
 import { SubscribeWithHandle } from "./HandleSubscribe";
-import { EmailInput } from "./EmailSubscribe";
+import { EmailInput, EmailConfirm } from "./EmailSubscribe";
+import { EmailSubscribeSuccess } from "./EmailSubscribeSuccess";
 import { Modal } from "components/Modal";
 import { ButtonPrimary } from "components/Buttons";
 import { PostPubInfo } from "app/lish/[did]/[publication]/[rkey]/PostPubInfo";
@@ -44,15 +47,42 @@ export const SubscribeInput = (props: {
     subscribed: boolean;
   };
 }) => {
+  let [email, setEmail] = useState(props.user?.email ?? "");
+  let [confirmState, setConfirmState] = useState<"confirm" | "success">(
+    "confirm",
+  );
+
   if (props.user.subscribed) {
     return <ManageSubscription {...props} />;
   }
   if (props.newsletterMode) {
     return (
       <EmailInput
-        action="subscribe"
-        user={props.user}
+        value={email}
+        onChange={setEmail}
+        disabled={props.user?.loggedIn}
         autoFocus={props.autoFocus}
+        action={
+          <Modal
+            trigger={
+              <ButtonPrimary compact className="leading-tight! outline-none! text-sm!">
+                subscribe
+              </ButtonPrimary>
+            }
+          >
+            {confirmState === "success" ? (
+              <EmailSubscribeSuccess
+                email={props.user?.email}
+                handle={props.user?.handle}
+              />
+            ) : (
+              <EmailConfirm
+                emailValue={email}
+                onSubmit={() => setConfirmState("success")}
+              />
+            )}
+          </Modal>
+        }
       />
     );
   } else