diff --git a/components/Buttons.tsx b/components/Buttons.tsx
index d86984b2..9dc29742 100644
--- a/components/Buttons.tsx
+++ b/components/Buttons.tsx
@@ -68,7 +68,7 @@ export const ButtonSecondary = forwardRef<
   } = props;
   return (
     <button
-      {...props}
+      {...buttonProps}
       ref={ref}
       className={`m-0 h-max
         ${fullWidth ? "w-full" : fullWidthOnMobile ? "w-full sm:w-max" : "w-max"}
@@ -96,18 +96,19 @@ export const ButtonTertiary = forwardRef<
     compact?: boolean;
   } & ButtonProps
 >((props, ref) => {
+  let { fullWidth, children, compact, ...buttonProps } = props;
   return (
     <button
-      {...props}
+      {...buttonProps}
       ref={ref}
-      className={`m-0 h-max ${props.fullWidth ? "w-full" : "w-max"}  ${props.compact ? "px-0" : "px-1"}
+      className={`m-0 h-max ${fullWidth ? "w-full" : "w-max"}  ${compact ? "px-0" : "px-1"}
   bg-transparent text-base font-bold text-accent-contrast
   flex gap-2 items-center justify-center shrink-0
   hover:underline disabled:text-border
   ${props.className}
 `}
     >
-      {props.children}
+      {children}
     </button>
   );
 });
diff --git a/components/HomeButton.tsx b/components/HomeButton.tsx
index fb0bc650..a90f433c 100644
--- a/components/HomeButton.tsx
+++ b/components/HomeButton.tsx
@@ -42,7 +42,7 @@ const AddToHomeButton = (props: {}) => {
   )
     return null;
   return (
-    <button
+    <ActionButton
       onClick={async (e) => {
         await addLeafletToHome(permission_token.id);
         mutate((identity) => {
@@ -66,8 +66,8 @@ const AddToHomeButton = (props: {}) => {
           text: "Leaflet added to your home!",
         });
       }}
-    >
-      <ActionButton icon={<AddToHomeSmall />} label="Add to Home" />
-    </button>
+      icon={<AddToHomeSmall />}
+      label="Add to Home"
+    />
   );
 };
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 111a7422..786f556b 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -2,6 +2,8 @@ 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";
+import { useState } from "react";
 
 export const Separator = (props: { classname?: string }) => {
   return (
@@ -20,8 +22,15 @@ export const Menu = (props: {
   onOpenChange?: (o: boolean) => void;
   asChild?: boolean;
 }) => {
+  let [open, setOpen] = useState(props.open || false);
   return (
-    <DropdownMenu.Root onOpenChange={props.onOpenChange} open={props.open}>
+    <DropdownMenu.Root
+      onOpenChange={(o) => {
+        setOpen(o);
+        props.onOpenChange?.(o);
+      }}
+      open={props.open}
+    >
       <DropdownMenu.Trigger asChild={props.asChild}>
         {props.trigger}
       </DropdownMenu.Trigger>