diff --git a/app/(home-pages)/home/Actions/CreateNewButton.tsx b/app/(home-pages)/home/Actions/CreateNewButton.tsx
index bfd7dfe7..417c5dcd 100644
--- a/app/(home-pages)/home/Actions/CreateNewButton.tsx
+++ b/app/(home-pages)/home/Actions/CreateNewButton.tsx
@@ -5,7 +5,7 @@ import { ActionButton } from "components/ActionBar/ActionButton";
 import { AddTiny } from "components/Icons/AddTiny";
 import { BlockCanvasPageSmall } from "components/Icons/BlockCanvasPageSmall";
 import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall";
-import { Menu, MenuItem } from "components/Layout";
+import { Menu, MenuItem } from "components/Menu";
 import { useIsMobile } from "src/hooks/isMobile";
 
 export const CreateNewLeafletButton = (props: {}) => {
diff --git a/app/(home-pages)/home/LeafletList/LeafletOptions.tsx b/app/(home-pages)/home/LeafletList/LeafletOptions.tsx
index 99930da9..b87c4715 100644
--- a/app/(home-pages)/home/LeafletList/LeafletOptions.tsx
+++ b/app/(home-pages)/home/LeafletList/LeafletOptions.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Menu, MenuItem } from "components/Layout";
+import { Menu, MenuItem } from "components/Menu";
 import { useState } from "react";
 import { ButtonPrimary, ButtonTertiary } from "components/Buttons";
 import { useToaster } from "components/Toast";
diff --git a/app/[leaflet_id]/actions/PublishButton.tsx b/app/[leaflet_id]/actions/PublishButton.tsx
index 0991bffa..4c2e8a29 100644
--- a/app/[leaflet_id]/actions/PublishButton.tsx
+++ b/app/[leaflet_id]/actions/PublishButton.tsx
@@ -13,7 +13,7 @@ import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
 import { PublishSmall } from "components/Icons/PublishSmall";
 import { useIdentityData } from "components/IdentityProvider";
 import { InputWithLabel } from "components/Input";
-import { Menu, MenuItem } from "components/Layout";
+import { Menu, MenuItem } from "components/Menu";
 import {
   useLeafletDomains,
   useLeafletPublicationData,
diff --git a/app/[leaflet_id]/actions/ShareOptions/index.tsx b/app/[leaflet_id]/actions/ShareOptions/index.tsx
index 7739150b..7ad067f8 100644
--- a/app/[leaflet_id]/actions/ShareOptions/index.tsx
+++ b/app/[leaflet_id]/actions/ShareOptions/index.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { getShareLink } from "./getShareLink";
 import { useEntitySetContext } from "components/EntitySetProvider";
 import { useSmoker } from "components/Toast";
-import { Menu, MenuItem } from "components/Layout";
+import { Menu, MenuItem } from "components/Menu";
 import { ActionButton } from "components/ActionBar/ActionButton";
 import useSWR from "swr";
 import LoginForm from "app/login/LoginForm";
diff --git a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
index 307628f2..76e689c4 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
@@ -374,7 +374,7 @@ const PageOptions = (props: {
   return (
     <div
       className={`pageOptions w-fit z-10
-      absolute sm:-right-[20px] right-3 sm:top-3 top-0
+      absolute sm:-right-[19px] right-3 sm:top-3 top-0
       flex sm:flex-col flex-row-reverse gap-1 items-start`}
     >
       <PageOptionButton onClick={props.onClick}>
diff --git a/app/lish/[did]/[publication]/dashboard/Actions.tsx b/app/lish/[did]/[publication]/dashboard/Actions.tsx
index fbd807a0..fc1ae126 100644
--- a/app/lish/[did]/[publication]/dashboard/Actions.tsx
+++ b/app/lish/[did]/[publication]/dashboard/Actions.tsx
@@ -4,8 +4,7 @@ import { NewDraftActionButton } from "./NewDraftButton";
 import { PublicationSettingsButton } from "./PublicationSettings";
 import { ActionButton } from "components/ActionBar/ActionButton";
 import { ShareSmall } from "components/Icons/ShareSmall";
-import { Menu } from "components/Layout";
-import { MenuItem } from "components/Layout";
+import { Menu, MenuItem } from "components/Menu";
 import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
 import { usePublicationData } from "./PublicationSWRProvider";
 import { useSmoker } from "components/Toast";
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx b/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx
index b3053fa6..ac1b27b2 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx
@@ -4,7 +4,8 @@ import { usePublicationData } from "./PublicationSWRProvider";
 import { ButtonPrimary } from "components/Buttons";
 import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
 import { useSmoker } from "components/Toast";
-import { Menu, MenuItem, Separator } from "components/Layout";
+import { Menu, MenuItem } from "components/Menu";
+import { Separator } from "components/Layout";
 import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny";
 import { Checkbox } from "components/Checkbox";
 import { useEffect, useState } from "react";
diff --git a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
index 83a5b00a..dba8f845 100644
--- a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
@@ -7,7 +7,7 @@ import { usePublicationData } from "./PublicationSWRProvider";
 import { Fragment, useState } from "react";
 import { useParams } from "next/navigation";
 import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
-import { Menu, MenuItem } from "components/Layout";
+import { Menu, MenuItem } from "components/Menu";
 import { deletePost } from "./deletePost";
 import { ButtonPrimary } from "components/Buttons";
 import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny";
diff --git a/components/Blocks/MailboxBlock.tsx b/components/Blocks/MailboxBlock.tsx
index 17236337..ae68781b 100644
--- a/components/Blocks/MailboxBlock.tsx
+++ b/components/Blocks/MailboxBlock.tsx
@@ -1,6 +1,7 @@
 import { ButtonPrimary } from "components/Buttons";
 import { Popover } from "components/Popover";
-import { Menu, MenuItem, Separator } from "components/Layout";
+import { MenuItem } from "components/Menu";
+import { Separator } from "components/Layout";
 import { useUIState } from "src/useUIState";
 import { useState } from "react";
 import { useSmoker, useToaster } from "components/Toast";
diff --git a/components/Buttons.tsx b/components/Buttons.tsx
index 895051bd..aca2d3e0 100644
--- a/components/Buttons.tsx
+++ b/components/Buttons.tsx
@@ -165,7 +165,11 @@ export const TooltipButton = (props: {
               side={props.side ? props.side : undefined}
               sideOffset={6}
               alignOffset={12}
-              className="z-10 bg-border rounded-md py-1 px-[6px] font-bold text-secondary text-sm"
+              className="z-10  rounded-md py-1 px-[6px] font-bold text-secondary text-sm"
+              style={{
+                backgroundColor:
+                  "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 85%)",
+              }}
             >
               {props.tooltipContent}
               <RadixTooltip.Arrow
@@ -175,7 +179,9 @@ export const TooltipButton = (props: {
                 viewBox="0 0 16 8"
               >
                 <PopoverArrow
-                  arrowFill={theme.colors["border"]}
+                  arrowFill={
+                    "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 85%)"
+                  }
                   arrowStroke="transparent"
                 />
               </RadixTooltip.Arrow>
diff --git a/components/Layout.tsx b/components/Layout.tsx
index cd754906..c465b185 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -1,101 +1,7 @@
-"use client";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { theme } from "tailwind.config";
-import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";
-import { PopoverArrow } from "./Icons/PopoverArrow";
-import { PopoverOpenContext } from "./Popover/PopoverContext";
-import { useState } from "react";
-
 export const Separator = (props: { classname?: string }) => {
   return <div className={`h-full border-r border-border ${props.classname}`} />;
 };
 
-export const Menu = (props: {
-  open?: boolean;
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  align?: "start" | "end" | "center" | undefined;
-  alignOffset?: number;
-  side?: "top" | "bottom" | "right" | "left" | undefined;
-  background?: string;
-  border?: string;
-  className?: string;
-  onOpenChange?: (o: boolean) => void;
-  asChild?: boolean;
-}) => {
-  let [open, setOpen] = useState(props.open || false);
-  return (
-    <DropdownMenu.Root
-      onOpenChange={(o) => {
-        setOpen(o);
-        props.onOpenChange?.(o);
-      }}
-      open={props.open}
-    >
-      <PopoverOpenContext value={open}>
-        <DropdownMenu.Trigger asChild={props.asChild}>
-          {props.trigger}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Portal>
-          <NestedCardThemeProvider>
-            <DropdownMenu.Content
-              side={props.side ? props.side : "bottom"}
-              align={props.align ? props.align : "center"}
-              alignOffset={props.alignOffset ? props.alignOffset : undefined}
-              sideOffset={4}
-              collisionPadding={16}
-              className={`dropdownMenu z-20 bg-bg-page flex flex-col p-1 gap-0.5 border border-border rounded-md shadow-md ${props.className}`}
-            >
-              {props.children}
-              <DropdownMenu.Arrow
-                asChild
-                width={16}
-                height={8}
-                viewBox="0 0 16 8"
-              >
-                <PopoverArrow
-                  arrowFill={
-                    props.background
-                      ? props.background
-                      : theme.colors["bg-page"]
-                  }
-                  arrowStroke={
-                    props.border ? props.border : theme.colors["border"]
-                  }
-                />
-              </DropdownMenu.Arrow>
-            </DropdownMenu.Content>
-          </NestedCardThemeProvider>
-        </DropdownMenu.Portal>
-      </PopoverOpenContext>
-    </DropdownMenu.Root>
-  );
-};
-
-export const MenuItem = (props: {
-  children?: React.ReactNode;
-  className?: string;
-  onSelect: (e: Event) => void;
-  id?: string;
-}) => {
-  return (
-    <DropdownMenu.Item
-      id={props.id}
-      onSelect={(event) => {
-        props.onSelect(event);
-      }}
-      className={`
-        menuItem
-        z-10 py-1! px-2!
-        flex gap-2
-        ${props.className}
-        `}
-    >
-      {props.children}
-    </DropdownMenu.Item>
-  );
-};
-
 export const ShortcutKey = (props: { children: React.ReactNode }) => {
   return (
     <span>
diff --git a/components/Pages/PageOptions.tsx b/components/Pages/PageOptions.tsx
index cb91d346..df608f46 100644
--- a/components/Pages/PageOptions.tsx
+++ b/components/Pages/PageOptions.tsx
@@ -7,7 +7,7 @@ import { useEntitySetContext } from "../EntitySetProvider";
 import { useReplicache } from "src/replicache";
 
 import { Media } from "../Media";
-import { MenuItem, Menu } from "../Layout";
+import { MenuItem, Menu } from "../Menu";
 import { PageThemeSetter } from "../ThemeManager/PageThemeSetter";
 import { PageShareMenu } from "./PageShareMenu";
 import { useUndoState } from "src/undoManager";
@@ -61,7 +61,7 @@ export const PageOptions = (props: {
     <div
       className={`pageOptions w-fit z-10
         ${props.isFocused ? "block" : "sm:hidden block"}
-        absolute sm:-right-[20px] right-3 sm:top-3 top-0
+        absolute sm:-right-[19px] right-3 sm:top-3 top-0
         flex sm:flex-col flex-row-reverse gap-1 items-start`}
     >
       {!props.first && (