diff --git a/app/[leaflet_id]/Footer.tsx b/app/[leaflet_id]/Footer.tsx
index 42e06fb1..82e67bef 100644
--- a/app/[leaflet_id]/Footer.tsx
+++ b/app/[leaflet_id]/Footer.tsx
@@ -37,24 +37,19 @@ export function LeafletFooter(props: { entityID: string }) {
           />
         </div>
       ) : entity_set.permissions.write ? (
-        pub?.publications &&
-        identity?.atp_did &&
-        pub.publications.identity_did === identity.atp_did ? (
-          <ActionFooter>
+        <ActionFooter>
+          {pub?.publications &&
+          identity?.atp_did &&
+          pub.publications.identity_did === identity.atp_did ? (
             <BackToPubButton publication={pub.publications} />
-            <PublishButton />
-            <ShareOptions />
-            <HelpButton />
-            <ThemePopover entityID={props.entityID} />
-          </ActionFooter>
-        ) : (
-          <ActionFooter>
+          ) : (
             <HomeButton />
-            <ShareOptions />
-            <HelpButton />
-            <ThemePopover entityID={props.entityID} />
-          </ActionFooter>
-        )
+          )}
+
+          <PublishButton />
+          <ShareOptions />
+          <ThemePopover entityID={props.entityID} />
+        </ActionFooter>
       ) : (
         <div className="pb-2 px-2 z-10 flex justify-end">
           <Watermark mobile />
diff --git a/app/[leaflet_id]/actions/PublishButton.tsx b/app/[leaflet_id]/actions/PublishButton.tsx
index b2c719bf..1b7f82d2 100644
--- a/app/[leaflet_id]/actions/PublishButton.tsx
+++ b/app/[leaflet_id]/actions/PublishButton.tsx
@@ -29,7 +29,7 @@ export const PublishButton = () => {
   let params = useParams();
   let router = useRouter();
 
-  if (!pub) return <PublishToPublication />;
+  if (!pub) return <PublishToPublicationButton />;
   if (!pub?.doc)
     return (
       <ActionButton
@@ -86,20 +86,19 @@ const UpdateButton = () => {
   );
 };
 
-const PublishToPublication = () => {
+const PublishToPublicationButton = () => {
   let { identity } = useIdentityData();
-  let params = useParams();
-  let router = useRouter();
+
   let isMobile = useIsMobile();
-  let hasPubs =
-    identity && identity.atp_did && identity.publications.length > 0;
+  identity && identity.atp_did && identity.publications.length > 0;
+  let [selectedPub, setSelectedPub] = useState<string | undefined>(undefined);
 
   return (
     <Popover
       asChild
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
-      className="max-w-xs w-[1000px]"
+      className="sm:max-w-sm w-[1000px]"
       trigger={
         <ActionButton
           primary
@@ -119,13 +118,19 @@ const PublishToPublication = () => {
           <PostDetailsForm />
           <hr className="border-border-light my-3" />
           <div>
-            <PubSelector publications={identity.publications} />
+            <PubSelector
+              publications={identity.publications}
+              selectedPub={selectedPub}
+              setSelectedPub={setSelectedPub}
+            />
           </div>
           <hr className="border-border-light mt-3 mb-2" />
 
           <div className="flex gap-2 items-center place-self-end">
             <ButtonTertiary>Save as Draft</ButtonTertiary>
-            <ButtonPrimary>Next</ButtonPrimary>
+            <ButtonPrimary disabled={selectedPub === undefined}>
+              Next{selectedPub === "create" && ": Create Pub!"}
+            </ButtonPrimary>
           </div>
         </div>
       )}
@@ -154,6 +159,8 @@ const PostDetailsForm = () => {
 };
 
 const PubSelector = (props: {
+  selectedPub: string | undefined;
+  setSelectedPub: (s: string) => void;
   publications: {
     identity_did: string;
     indexed_at: string;
@@ -163,15 +170,13 @@ const PubSelector = (props: {
   }[];
 }) => {
   // HEY STILL TO DO
-  // copy over the menuItem styles and apply them if the option has been selected
   // test out logged out, logged in but no pubs, and pubbed up flows
 
-  let [selectedPub, setSelectedPub] = useState<string | undefined>(undefined);
   return (
     <div className="flex flex-col gap-1">
       <div className="text-sm text-tertiary">Publish to…</div>
       {props.publications.length === 0 || props.publications === undefined ? (
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1">
           <div className="flex gap-2 menuItem">
             <LooseLeafSmall className="shrink-0" />
             <div className="flex flex-col leading-snug">
@@ -197,10 +202,10 @@ const PubSelector = (props: {
           </div>
         </div>
       ) : (
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1">
           <PubOption
-            selected={selectedPub === "looseleaf"}
-            onSelect={() => setSelectedPub("looseleaf")}
+            selected={props.selectedPub === "looseleaf"}
+            onSelect={() => props.setSelectedPub("looseleaf")}
           >
             <LooseLeafSmall />
             Publish as Looseleaf
@@ -210,8 +215,8 @@ const PubSelector = (props: {
             let pubRecord = p.record as PubLeafletPublication.Record;
             return (
               <PubOption
-                selected={selectedPub === p.uri}
-                onSelect={() => setSelectedPub(p.uri)}
+                selected={props.selectedPub === p.uri}
+                onSelect={() => props.setSelectedPub(p.uri)}
               >
                 <>
                   <PubIcon record={pubRecord} uri={p.uri} />
@@ -221,8 +226,8 @@ const PubSelector = (props: {
             );
           })}
           <PubOption
-            selected={selectedPub === "create"}
-            onSelect={() => setSelectedPub("create")}
+            selected={props.selectedPub === "create"}
+            onSelect={() => props.setSelectedPub("create")}
           >
             <>
               <AddSmall /> Create New Publication
@@ -241,7 +246,7 @@ const PubOption = (props: {
 }) => {
   return (
     <button
-      className={`flex gap-2 menuItem font-bold text-secondary ${props.selected && "bg-test"}`}
+      className={`flex gap-2 menuItem font-bold text-secondary ${props.selected && "bg-[var(--accent-light)]! outline! outline-offset-1! outline-accent-contrast!"}`}
       onClick={() => {
         props.onSelect();
       }}
diff --git a/app/[leaflet_id]/actions/ShareOptions/index.tsx b/app/[leaflet_id]/actions/ShareOptions/index.tsx
index 42193570..a87a943f 100644
--- a/app/[leaflet_id]/actions/ShareOptions/index.tsx
+++ b/app/[leaflet_id]/actions/ShareOptions/index.tsx
@@ -61,8 +61,7 @@ export function ShareOptions() {
       trigger={
         <ActionButton
           icon=<ShareSmall />
-          primary={!!!pub}
-          secondary={!!pub}
+          secondary
           label={`Share ${pub ? "Draft" : ""}`}
         />
       }
diff --git a/app/globals.css b/app/globals.css
index 03008310..4193cdbd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -339,6 +339,7 @@ pre.shiki {
   @apply focus-within:outline-offset-1;
 
   @apply disabled:border-border-light;
+  @apply disabled:hover:border-border-light;
   @apply disabled:bg-border-light;
   @apply disabled:text-tertiary;
 }
diff --git a/components/Input.tsx b/components/Input.tsx
index 1f6016f9..5666bb01 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -100,10 +100,16 @@ export const InputWithLabel = (
     JSX.IntrinsicElements["textarea"],
 ) => {
   let { label, textarea, ...inputProps } = props;
-  let style = `appearance-none w-full font-normal not-italic bg-transparent text-base text-primary focus:outline-0 ${props.className} outline-hidden resize-none disabled:text-tertiary disabled:cursor-not-allowed`;
+  let style = `
+    appearance-none resize-none  w-full
+    bg-transparent
+    outline-hidden focus:outline-0
+    font-normal not-italic  text-base text-primary disabled:text-tertiary
+    disabled:cursor-not-allowed
+    ${props.className}`;
   return (
     <label
-      className={`input-with-border flex flex-col gap-px text-sm text-tertiary font-bold italic leading-tight py-1! px-[6px]! ${props.disabled && "bg-border-light! cursor-not-allowed!"}`}
+      className={`input-with-border flex flex-col gap-px text-sm text-tertiary font-bold italic leading-tight py-1! px-[6px]! ${props.disabled && "bg-border-light! cursor-not-allowed! hover:border-border!"}`}
     >
       {props.label}
       {textarea ? (