diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss
index 24583bd27..3a2c1651f 100644
--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/src/components/dropdownMenu/DropdownMenu.scss
@@ -53,8 +53,8 @@
 
     .dropdown-menu-item-base {
       display: flex;
-      padding: 0 0.625rem;
-      column-gap: 0.625rem;
+      padding: 0 0.75rem;
+      column-gap: 0.5rem;
       font-size: 0.875rem;
       color: var(--color-gray-100);
       width: 100%;
@@ -70,7 +70,7 @@
       align-items: center;
       height: 2rem;
       cursor: pointer;
-      border-radius: var(--border-radius-md);
+      border-radius: var(--border-radius-sm);
 
       @media screen and (min-width: 1921px) {
         height: 2.25rem;
diff --git a/src/components/dropdownMenu/DropdownMenuContent.tsx b/src/components/dropdownMenu/DropdownMenuContent.tsx
index 31f192d9e..265139a05 100644
--- a/src/components/dropdownMenu/DropdownMenuContent.tsx
+++ b/src/components/dropdownMenu/DropdownMenuContent.tsx
@@ -57,7 +57,7 @@ const MenuContent = ({
         ) : (
           <Island
             className="dropdown-menu-container"
-            padding={2}
+            padding={1}
             style={{ zIndex: 2 }}
           >
             {children}
diff --git a/src/components/dropdownMenu/DropdownMenuSubContent.tsx b/src/components/dropdownMenu/DropdownMenuSubContent.tsx
index 665933e9a..29bdc891d 100644
--- a/src/components/dropdownMenu/DropdownMenuSubContent.tsx
+++ b/src/components/dropdownMenu/DropdownMenuSubContent.tsx
@@ -18,13 +18,17 @@ const DropdownMenuSubContent = ({
   }).trim();
 
   return (
-    <DropdownMenuPrimitive.SubContent className={classNames}>
+    <DropdownMenuPrimitive.SubContent
+      className={classNames}
+      sideOffset={8}
+      alignOffset={-4}
+    >
       {device.isMobile ? (
         <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
       ) : (
         <Island
           className="dropdown-menu-container"
-          padding={2}
+          padding={1}
           style={{ zIndex: 1 }}
         >
           {children}
diff --git a/src/css/theme.scss b/src/css/theme.scss
index 643f9346d..cbc0b8beb 100644
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@@ -126,6 +126,7 @@
   --color-success: #268029;
   --color-success-lighter: #cafccc;
 
+  --border-radius-sm: 0.25rem;
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
 
diff --git a/src/packages/excalidraw/example/App.tsx b/src/packages/excalidraw/example/App.tsx
index c09e73d04..5fb76fea1 100644
--- a/src/packages/excalidraw/example/App.tsx
+++ b/src/packages/excalidraw/example/App.tsx
@@ -593,6 +593,13 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
                 </MainMenu.Sub.Item>
               </MainMenu.Sub.Content>
             </MainMenu.Sub>
+            <MainMenu.Sub.Item
+              onSelect={() => {
+                alert("wow, nested submenus! very cool");
+              }}
+            >
+              Another one
+            </MainMenu.Sub.Item>
           </MainMenu.Sub.Content>
         </MainMenu.Sub>
         <MainMenu.ItemCustom>
diff --git a/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap b/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap
index 41d3de955..4062061ae 100644
--- a/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap
+++ b/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items
 >
   <div
     class="Island dropdown-menu-container"
-    style="--padding: 2; z-index: 2;"
+    style="--padding: 1; z-index: 2;"
   >
     <div
       class="radix-menu-item"
@@ -155,7 +155,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
 >
   <div
     class="Island dropdown-menu-container"
-    style="--padding: 2; z-index: 2;"
+    style="--padding: 1; z-index: 2;"
   >
     <div
       class="radix-menu-item"