diff --git a/app/[doc_id]/page.tsx b/app/[doc_id]/page.tsx
index d3fb5b7b..a1a22d45 100644
--- a/app/[doc_id]/page.tsx
+++ b/app/[doc_id]/page.tsx
@@ -5,6 +5,7 @@ import { createServerClient } from "@supabase/ssr";
 import { SelectionManager } from "components/SelectionManager";
 import { Cards } from "components/Cards";
 import { ThemeProvider } from "components/ThemeManager/ThemeProvider";
+import { MobileFooter } from "components/MobileFooter";
 
 export const preferredRegion = ["sfo1"];
 export const dynamic = "force-dynamic";
@@ -30,6 +31,7 @@ export default async function DocumentPage(props: {
         >
           <Cards rootCard={props.params.doc_id} />
         </div>
+        <MobileFooter entityID={props.params.doc_id} />
       </ThemeProvider>
     </ReplicacheProvider>
   );
diff --git a/components/Cards.tsx b/components/Cards.tsx
index fb4bd5c2..648f68c3 100644
--- a/components/Cards.tsx
+++ b/components/Cards.tsx
@@ -4,6 +4,7 @@ import { Blocks } from "./Blocks";
 import useMeasure from "react-use-measure";
 import { elementId } from "src/utils/elementId";
 import { ThemePopover } from "./ThemeManager/ThemeSetter";
+import { Media } from "./Media";
 
 export function Cards(props: { rootCard: string }) {
   let cards = useUIState((s) => s.openCards);
@@ -15,9 +16,9 @@ export function Cards(props: { rootCard: string }) {
         className="flex justify-end items-start"
         style={{ width: `calc((100vw - ${cardWidth}px)/2)` }}
       >
-        <div className="flex flex-col gap-2 mr-4 mt-2">
+        <Media mobile={false} className="flex flex-col gap-2 mr-4 mt-2">
           <PageOptions entityID={props.rootCard} />
-        </div>
+        </Media>
       </div>
       <Card entityID={props.rootCard} first />
       {cards.map((card, index) => (
diff --git a/components/Media.tsx b/components/Media.tsx
new file mode 100644
index 00000000..e6644cc7
--- /dev/null
+++ b/components/Media.tsx
@@ -0,0 +1,21 @@
+import { useIsInitialRender, useIsMobile } from "src/hooks/isMobile";
+
+export function Media(props: {
+  mobile: boolean;
+  children: React.ReactNode;
+  className: string;
+}) {
+  let initialRender = useIsInitialRender();
+  let isMobile = useIsMobile();
+  if (initialRender)
+    return (
+      <div
+        className={`${props.mobile ? "sm:hidden" : "hidden sm:block"} ${props.className}`}
+      >
+        {props.children}
+      </div>
+    );
+  if ((isMobile && props.mobile) || (!isMobile && !props.mobile))
+    return <div className={props.className}>{props.children}</div>;
+  return null;
+}
diff --git a/components/MobileFooter.tsx b/components/MobileFooter.tsx
new file mode 100644
index 00000000..4059de51
--- /dev/null
+++ b/components/MobileFooter.tsx
@@ -0,0 +1,14 @@
+"use client";
+import { Media } from "./Media";
+import { ThemePopover } from "./ThemeManager/ThemeSetter";
+
+export function MobileFooter(props: { entityID: string }) {
+  return (
+    <Media
+      mobile
+      className="w-full pb-2 px-2 -mt-6 flex gap-2 flex-row-reverse items-center z-10"
+    >
+      <ThemePopover entityID={props.entityID} />
+    </Media>
+  );
+}
diff --git a/src/hooks/isMobile.ts b/src/hooks/isMobile.ts
index ad40e2f9..d223aa20 100644
--- a/src/hooks/isMobile.ts
+++ b/src/hooks/isMobile.ts
@@ -20,7 +20,7 @@ function getWindowDimensions() {
   };
 }
 
-function useWindowDimensions() {
+export function useWindowDimensions() {
   const [windowDimensions, setWindowDimensions] = useState(
     getWindowDimensions(),
   );