diff --git a/src/modules/layout/templates/dropdown-menu/dropdown-menu.tsx b/src/modules/layout/templates/dropdown-menu/dropdown-menu.tsx
index 78b9990..4588e32 100644
--- a/src/modules/layout/templates/dropdown-menu/dropdown-menu.tsx
+++ b/src/modules/layout/templates/dropdown-menu/dropdown-menu.tsx
@@ -1,17 +1,19 @@
 'use client'
 import { DropdownMenu } from "@medusajs/ui"
 import { ChevronDownMini } from "@medusajs/icons"
+
+interface DropdownMenuProps {
+  className?: string
+  "data-testid"?: string
+  label?: string
+  isShowArrow?: boolean
+}
 export default function DropdownMenuComponent({
   children,
   props,
 }: {
   children?: React.ReactNode
-  props?: {
-    className?: string
-    "data-testid"?: string
-    label?: string
-    isShowArrow?: boolean
-  }
+  props?: DropdownMenuProps
 }) {
   const itemNodes = Array.isArray(children) ? children : []
 
@@ -26,7 +28,7 @@ export default function DropdownMenuComponent({
         </button>
        
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content className="abc">
         {itemNodes.map((item, index) => {
           const props = item?.DropdownMenuItems?.props
           return props ? <DropdownMenu.Item key={props.label ?? index} className={props.className} data-testid={props["data-testid"]}>{props.label}</DropdownMenu.Item> : null
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 1ebe912..e075fa9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -110,3 +110,7 @@
     @apply text-[32px] leading-[44px] font-semibold;
   }
 }
+
+[data-radix-popper-content-wrapper]{
+  z-index: 100 !important;
+}