diff --git a/client/src/components/dashboard/SettingsButton.jsx b/client/src/components/dashboard/SettingsButton.jsx
index fa3aff3..d1fbfb0 100644
--- a/client/src/components/dashboard/SettingsButton.jsx
+++ b/client/src/components/dashboard/SettingsButton.jsx
@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef } from "react";
 import {
     Button,
     IconButton,
@@ -46,12 +46,20 @@ export function SettingsButton() {
 
     const categories = Object.keys(categorizedWidgets);
 
+    // use ref to capture html node for placing menu accordingly
+    const menuRef = useRef(null);
+    const getAnchorRect = () => {
+        if (!menuRef.current) return null;
+        return menuRef.current.getBoundingClientRect();
+    };
+
     return (
         <>
             {/* THE STATIC DROPDOWN MENU */}
-            <Menu.Root>
+            <Menu.Root positioning={{ getAnchorRect }}>
                 <Menu.Trigger asChild>
                     <IconButton
+                        ref={menuRef}
                         aria-label="Settings"
                         bg="vdap.darkGreen"
                         color="white"
@@ -62,31 +70,32 @@ export function SettingsButton() {
                         <Settings size={18} />
                     </IconButton>
                 </Menu.Trigger>
+                <Menu.Positioner>
+                    <Menu.Content bg="white" boxShadow="lg" borderRadius="md" p={1} zIndex="dropdown">
+                        {isEditing ? (
+                            <>
+                                {/* WIRE DIRECTLY TO saveEdit */}
+                                <Menu.Item onClick={saveEdit} color="green.600" fontWeight="bold" cursor="pointer" _hover={{ bg: "green.50" }}>
+                                    <Save size={16} style={{ marginRight: '8px' }} /> Save Layout
+                                </Menu.Item>
 
-                <Menu.Content bg="white" boxShadow="lg" borderRadius="md" p={1} zIndex="dropdown">
-                    {isEditing ? (
-                        <>
-                            {/* WIRE DIRECTLY TO saveEdit */}
-                            <Menu.Item onClick={saveEdit} color="green.600" fontWeight="bold" cursor="pointer" _hover={{ bg: "green.50" }}>
-                                <Save size={16} style={{ marginRight: '8px' }} /> Save Layout
+                                <Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
+                                    <X size={16} style={{ marginRight: '8px' }} /> Discard Changes
+                                </Menu.Item>
+                            </>
+                        ) : (
+                            <Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
+                                <Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
                             </Menu.Item>
+                        )}
 
-                            <Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
-                                <X size={16} style={{ marginRight: '8px' }} /> Discard Changes
-                            </Menu.Item>
-                        </>
-                    ) : (
-                        <Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
-                            <Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
+                        <Menu.Separator my={1} borderColor="gray.200" />
+
+                        <Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
+                            <LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
                         </Menu.Item>
-                    )}
-
-                    <Menu.Separator my={1} borderColor="gray.200" />
-
-                    <Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
-                        <LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
-                    </Menu.Item>
-                </Menu.Content>
+                    </Menu.Content>
+                </Menu.Positioner>
             </Menu.Root>
 
             {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}