diff --git a/app/[leaflet_id]/Footer.tsx b/app/[leaflet_id]/Footer.tsx
index f8ff45fa..fb671480 100644
--- a/app/[leaflet_id]/Footer.tsx
+++ b/app/[leaflet_id]/Footer.tsx
@@ -6,14 +6,17 @@ import { ThemePopover } from "components/ThemeManager/ThemeSetter";
 import { Toolbar } from "components/Toolbar";
 import { FootnoteToolbar } from "components/Toolbar/FootnoteToolbarWrapper";
 import { ShareOptions } from "app/[leaflet_id]/actions/ShareOptions";
-import { HomeButton } from "app/[leaflet_id]/actions/HomeButton";
+import {
+  AddToHomeButton,
+  HomeButton,
+} from "app/[leaflet_id]/actions/HomeButton";
 import { PublishButton } from "./actions/PublishButton";
 import { useEntitySetContext } from "components/EntitySetProvider";
 import { Watermark } from "components/Watermark";
 import { BackToPubButton } from "./actions/BackToPubButton";
 import { useLeafletPublicationData } from "components/PageSWRDataProvider";
 import { useIdentityData } from "components/IdentityProvider";
-import { useEntity } from "src/replicache";
+import { useEntity, useReplicache } from "src/replicache";
 import { block } from "sharp";
 import { PostSettings } from "components/PostSettings";
 
@@ -29,9 +32,9 @@ export function hasBlockToolbar(blockType: string | null | undefined) {
 }
 export function LeafletFooter(props: { entityID: string }) {
   let focusedBlock = useUIState((s) => s.focusedEntity);
-
   let entity_set = useEntitySetContext();
   let { identity } = useIdentityData();
+  let { permission_token } = useReplicache();
   let { data: pub } = useLeafletPublicationData();
   let blockType = useEntity(focusedBlock?.entityID || null, "block/type")?.data
     .value;
@@ -77,8 +80,17 @@ export function LeafletFooter(props: { entityID: string }) {
           ) : (
             <HomeButton />
           )}
+
           <div className="mobileLeafletActions flex gap-2 shrink-0">
-            <PublishButton entityID={props.entityID} />
+            {identity &&
+            !identity.permission_token_on_homepage.find(
+              (pth) => pth.permission_tokens.id === permission_token.id,
+            ) ? (
+              <AddToHomeButton primary />
+            ) : (
+              <PublishButton entityID={props.entityID} />
+            )}
+
             <ShareOptions />
             <PostSettings />
             <ThemePopover entityID={props.entityID} />
diff --git a/app/[leaflet_id]/Sidebar.tsx b/app/[leaflet_id]/Sidebar.tsx
index 14ac86cc..4cefdcb9 100644
--- a/app/[leaflet_id]/Sidebar.tsx
+++ b/app/[leaflet_id]/Sidebar.tsx
@@ -2,7 +2,10 @@
 import { Sidebar } from "components/ActionBar/Sidebar";
 import { useEntitySetContext } from "components/EntitySetProvider";
 import { HelpButton } from "app/[leaflet_id]/actions/HelpButton";
-import { HomeButton } from "app/[leaflet_id]/actions/HomeButton";
+import {
+  AddToHomeButton,
+  HomeButton,
+} from "app/[leaflet_id]/actions/HomeButton";
 import { Media } from "components/Media";
 import { useLeafletPublicationData } from "components/PageSWRDataProvider";
 import { ShareOptions } from "app/[leaflet_id]/actions/ShareOptions";
@@ -19,6 +22,7 @@ export function LeafletSidebar() {
   let { rootEntity } = useReplicache();
   let { data: pub } = useLeafletPublicationData();
   let { identity } = useIdentityData();
+  let { permission_token } = useReplicache();
 
   return (
     <Media mobile={false} className="w-0 h-full relative">
@@ -28,8 +32,16 @@ export function LeafletSidebar() {
       >
         <div className="sidebarContainer flex flex-col justify-end h-full w-16 relative">
           {entity_set.permissions.write && (
-            <Sidebar>
-              <PublishButton entityID={rootEntity} />
+            <Sidebar className="my-0!">
+              {identity &&
+              !identity.permission_token_on_homepage.find(
+                (pth) => pth.permission_tokens.id === permission_token.id,
+              ) ? (
+                <AddToHomeButton />
+              ) : (
+                <PublishButton entityID={rootEntity} />
+              )}
+
               <ShareOptions />
               <PostSettings />
               <ThemePopover entityID={rootEntity} />
diff --git a/app/[leaflet_id]/actions/HomeButton.tsx b/app/[leaflet_id]/actions/HomeButton.tsx
index 54d54753..21c31140 100644
--- a/app/[leaflet_id]/actions/HomeButton.tsx
+++ b/app/[leaflet_id]/actions/HomeButton.tsx
@@ -23,26 +23,22 @@ export function HomeButton() {
         className="hover:no-underline"
         style={{ textDecorationLine: "none !important" }}
       >
-        <ActionButton icon={<HomeSmall />} label="Go Home" />
+        <ActionButton icon={<HomeSmall />} label="Back Home" />
       </Link>
-      {<AddToHomeButton />}
     </>
   );
 }
 
-const AddToHomeButton = (props: {}) => {
+export const AddToHomeButton = (props: { primary?: boolean }) => {
   let { permission_token } = useReplicache();
   let { identity, mutate } = useIdentityData();
   let smoker = useSmoker();
-  if (
-    identity?.permission_token_on_homepage.find(
-      (pth) => pth.permission_tokens.id === permission_token.id,
-    ) ||
-    !identity
-  )
-    return null;
+
   return (
     <ActionButton
+      primary
+      labelOnMobile
+      className="sm:w-full! w-fit!"
       onClick={async (e) => {
         await addLeafletToHome(permission_token.id);
         mutate((identity) => {
@@ -68,7 +64,7 @@ const AddToHomeButton = (props: {}) => {
         });
       }}
       icon={<AddToHomeSmall />}
-      label="Add to Home"
+      label="Save to Home"
     />
   );
 };
diff --git a/app/[leaflet_id]/actions/PublishButton.tsx b/app/[leaflet_id]/actions/PublishButton.tsx
index 8823ece8..a17a31ce 100644
--- a/app/[leaflet_id]/actions/PublishButton.tsx
+++ b/app/[leaflet_id]/actions/PublishButton.tsx
@@ -52,6 +52,8 @@ export const PublishButton = (props: { entityID: string }) => {
     return (
       <ActionButton
         primary
+        labelOnMobile
+        className="w-fit!"
         icon={<PublishSmall className="shrink-0" />}
         label={"Publish!"}
         onClick={() => {
@@ -116,6 +118,8 @@ const UpdateButton = () => {
   return (
     <ActionButton
       primary
+      className="w-fit!"
+      labelOnMobile
       icon={<PublishSmall className="shrink-0" />}
       label={isLoading ? <DotLoader /> : "Update!"}
       onClick={async () => {
@@ -192,6 +196,8 @@ const PublishToPublicationButton = (props: { entityID: string }) => {
       trigger={
         <ActionButton
           primary
+          className="w-fit!"
+          labelOnMobile
           icon={<PublishSmall className="shrink-0" />}
           label={"Publish"}
         />
diff --git a/app/[leaflet_id]/actions/ShareOptions/index.tsx b/app/[leaflet_id]/actions/ShareOptions/index.tsx
index 3b5d0e3d..cd614893 100644
--- a/app/[leaflet_id]/actions/ShareOptions/index.tsx
+++ b/app/[leaflet_id]/actions/ShareOptions/index.tsx
@@ -63,8 +63,10 @@ export function ShareOptions() {
       trigger={
         <ActionButton
           icon=<ShareSmall />
+          className="sm:w-full! w-fit!"
           secondary
           label={`Share ${pub ? "Draft" : ""}`}
+          labelOnMobile
         />
       }
     >
diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index 77b83128..13c9aa24 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -52,7 +52,8 @@ export const ActionButton = forwardRef<
       {...buttonProps}
       ref={ref}
       className={`
-      actionButton relative
+      actionButton relative shrink-0
+      h-fit
       rounded-md border
       py-0.5 px-1
       flex gap-2 items-start justify-start
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index 23f388c0..9bff7819 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -67,7 +67,7 @@ export const PublicationButtons = (props: { className?: string }) => {
         <ActionButton
           labelOnMobile
           icon=<div className="group-hover/new-pub:border-accent-contrast m-0.5 w-5 h-5 border-border border-2 border-dashed rounded-full" />
-          label="New"
+          label="New Publication"
           className="text-tertiary!"
         />
       </SpeedyLink>
diff --git a/components/ActionBar/Sidebar.tsx b/components/ActionBar/Sidebar.tsx
index e162b6a8..b00a2da2 100644
--- a/components/ActionBar/Sidebar.tsx
+++ b/components/ActionBar/Sidebar.tsx
@@ -36,13 +36,22 @@ export function Sidebar(props: {
         }}
       >
         <div
-          style={{ height: "-webkit-fill-available" }}
+          style={
+            props.alwaysOpen
+              ? { height: "-webkit-fill-available" }
+              : { height: "fit-content" }
+          }
           className={`
           actionSidebar
-          ${!props.alwaysOpen ? "absolute top-0 left-0 z-10 w-max" : "w-56"}
-          p-[6px] my-6
+
+          ${
+            !props.alwaysOpen
+              ? ` w-max hover:w-48 absolute top-0 left-0 z-10 opaque-container`
+              : `my-6 w-56 ${cardBorderHidden ? "light-container" : "frosted-container"}`
+          }
+          p-[6px]
           flex flex-col gap-0.5 justify-start border
-          rounded-md ${cardBorderHidden ? "light-container" : "frosted-container"}
+          rounded-md
           ${props.className}
           `}
           onMouseOver={() => {
diff --git a/components/ThemeManager/ThemeSetter.tsx b/components/ThemeManager/ThemeSetter.tsx
index 2d22deb5..22df519f 100644
--- a/components/ThemeManager/ThemeSetter.tsx
+++ b/components/ThemeManager/ThemeSetter.tsx
@@ -65,7 +65,13 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => {
         asChild
         side={isMobile ? "top" : "right"}
         align={isMobile ? "center" : "start"}
-        trigger={<ActionButton secondary icon={<PaintSmall />} label="Theme" />}
+        trigger={
+          <ActionButton
+            icon={<PaintSmall />}
+            label="Theme"
+            className="sm:w-full! w-fit!"
+          />
+        }
       >
         <ThemeSetterContent {...props} />
       </Popover>