diff --git a/client/src/components/Nav/Settings.tsx b/client/src/components/Nav/Settings.tsx
index 45d4e0e2b57..8abf039b822 100644
--- a/client/src/components/Nav/Settings.tsx
+++ b/client/src/components/Nav/Settings.tsx
@@ -20,7 +20,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
           isSmallScreen ? 'top-5 -translate-y-0' : '',
         )}
       >
-        <DialogHeader>
+        <DialogHeader className='pb-5'>
           <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
             {localize('com_nav_settings')}
           </DialogTitle>
@@ -43,11 +43,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
             >
               <Tabs.Trigger
                 className={cn(
-                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-700',
                   isSmallScreen
                     ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                     : 'bg-white radix-state-active:bg-gray-200',
-                  isSmallScreen ? '' : 'dark:bg-gray-700',
+                  isSmallScreen ? '' : 'dark:bg-gray-750',
                 )}
                 value={SettingsTabValues.GENERAL}
                 style={{ userSelect: 'none' }}
@@ -57,11 +57,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               </Tabs.Trigger>
               <Tabs.Trigger
                 className={cn(
-                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-700',
                   isSmallScreen
                     ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                     : 'bg-white radix-state-active:bg-gray-200',
-                  isSmallScreen ? '' : 'dark:bg-gray-700',
+                  isSmallScreen ? '' : 'dark:bg-gray-750',
                 )}
                 value={SettingsTabValues.MESSAGES}
                 style={{ userSelect: 'none' }}
@@ -71,11 +71,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               </Tabs.Trigger>
               <Tabs.Trigger
                 className={cn(
-                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-700',
                   isSmallScreen
                     ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                     : 'bg-white radix-state-active:bg-gray-200',
-                  isSmallScreen ? '' : 'dark:bg-gray-700',
+                  isSmallScreen ? '' : 'dark:bg-gray-750',
                 )}
                 value={SettingsTabValues.BETA}
                 style={{ userSelect: 'none' }}
@@ -85,11 +85,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               </Tabs.Trigger>
               <Tabs.Trigger
                 className={cn(
-                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-700',
                   isSmallScreen
                     ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                     : 'bg-white radix-state-active:bg-gray-200',
-                  isSmallScreen ? '' : 'dark:bg-gray-700',
+                  isSmallScreen ? '' : 'dark:bg-gray-750',
                 )}
                 value={SettingsTabValues.DATA}
                 style={{ userSelect: 'none' }}
@@ -99,11 +99,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               </Tabs.Trigger>
               <Tabs.Trigger
                 className={cn(
-                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-700',
                   isSmallScreen
                     ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                     : 'bg-white radix-state-active:bg-gray-200',
-                  isSmallScreen ? '' : 'dark:bg-gray-700',
+                  isSmallScreen ? '' : 'dark:bg-gray-750',
                 )}
                 value={SettingsTabValues.ACCOUNT}
                 style={{ userSelect: 'none' }}
diff --git a/client/src/components/ui/Dialog.tsx b/client/src/components/ui/Dialog.tsx
index ef2cae96f39..4b68956b83f 100644
--- a/client/src/components/ui/Dialog.tsx
+++ b/client/src/components/ui/Dialog.tsx
@@ -48,10 +48,10 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg',
-          'dark:bg-gray-700',
+          'fixed z-[999] grid w-full gap-4 bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-2xl',
+          'dark:bg-gray-750',
           isSmallScreen
-            ? 'fixed left-1/2 top-1/2 z-[999] m-auto grid w-11/12 -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-white pb-6'
+            ? 'fixed left-1/2 top-1/2 z-[999] m-auto grid w-11/12 -translate-x-1/2 -translate-y-1/2 gap-4 bg-white pb-6'
             : '',
           className ?? '',
         )}