diff --git a/packages/app-elements/src/styles/global.css b/packages/app-elements/src/styles/global.css
index fbbefa9d..fa30f2e0 100644
--- a/packages/app-elements/src/styles/global.css
+++ b/packages/app-elements/src/styles/global.css
@@ -9,9 +9,9 @@
   --breakpoint-xl: 1280px;
 
   --radius-*: initial;
-  --radius: 0.313rem;
-  --radius-sm: 0.188rem;
-  --radius-md: 0.625rem;
+  --radius: 0.5rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 1rem;
   --radius-full: 9999px;
 
   --color-*: initial;
diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx
index 0c354d6f..8f77d45d 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx
@@ -11,7 +11,7 @@ export const DropdownDivider: FC<DropdownDividerProps> = ({
 }) => {
   return (
     <div {...rest} className="h-px my-2">
-      <hr className="border-gray-600" />
+      <hr className="border-gray-200" />
     </div>
   )
 }
diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
index fe6eb6d1..5c38818a 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
@@ -61,14 +61,14 @@ export const DropdownItem = withSkeletonTemplate<DropdownItemProps>(
         }}
         href={href}
         className={cn(
-          "w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden!",
+          "w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden!",
           {
             "pr-8": info == null,
             "min-w-[250px] pr-6": info != null,
           },
           className,
           {
-            "hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group":
+            "hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group":
               onClick != null || href != null,
             "cursor-default": onClick == null && href == null,
             "opacity-50 pointer-events-none": isDisabled,
diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
index 5c6e3084..ad2b3be7 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
@@ -55,7 +55,7 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
       <div
         {...rest}
         className={cn(
-          "bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2",
+          "bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg",
           {
             "min-w-[150px] md:max-w-[250px]": menuWidth == null, // default width
             "w-[280px]": menuWidth === "wide",
@@ -65,7 +65,7 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
         {menuHeader != null && (
           <>
             <div
-              className="py-2 px-4 text-gray-400 text-xs font-semibold text-ellipsis overflow-hidden whitespace-nowrap"
+              className="py-2 px-4 text-gray-800 text-xs font-semibold text-ellipsis overflow-hidden whitespace-nowrap"
               title={menuHeader}
             >
               {menuHeader}
@@ -111,7 +111,7 @@ const Arrow: FC<{
 
   return (
     <span
-      className="relative border-black border-l-transparent border-r-transparent"
+      className="relative border-gray-200 border-l-transparent border-r-transparent"
       style={{
         // base styles
         borderLeftWidth: arrowWidth / 2,
diff --git a/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index f04595c6..e103ba80 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -31,11 +31,11 @@ exports[`Dropdown > Should be rendering bottom-left 1`] = `
         class="flex flex-col items-start"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 border-l-transparent border-r-transparent"
           style="border-left-width: 6px; border-right-width: 6px; border-bottom-width: 5px; border-top-color: transparent; left: 10px;"
         />
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -76,11 +76,11 @@ exports[`Dropdown > Should be rendering top-left 1`] = `
         class="flex flex-col-reverse items-start"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 border-l-transparent border-r-transparent"
           style="border-left-width: 6px; border-right-width: 6px; border-top-width: 5px; border-bottom-color: transparent; left: 10px;"
         />
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -121,11 +121,11 @@ exports[`Dropdown > Should be rendering top-right 1`] = `
         class="flex flex-col-reverse items-end"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 border-l-transparent border-r-transparent"
           style="border-left-width: 6px; border-right-width: 6px; border-top-width: 5px; border-bottom-color: transparent; right: 10px;"
         />
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -166,15 +166,15 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
         class="flex flex-col items-end"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 border-l-transparent border-r-transparent"
           style="border-left-width: 6px; border-right-width: 6px; border-bottom-width: 5px; border-top-color: transparent; right: 10px;"
         />
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <button
             aria-label="Payments"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
@@ -200,7 +200,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
           </button>
           <button
             aria-label="Items"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
@@ -220,12 +220,12 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
             class="h-px my-2"
           >
             <hr
-              class="border-gray-600"
+              class="border-gray-200"
             />
           </div>
           <button
             aria-label="Delete"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"