diff --git a/packages/bruno-app/src/components/Tabs/StyledWrapper.js b/packages/bruno-app/src/components/Tabs/StyledWrapper.js
new file mode 100644
index 000000000..6a870319c
--- /dev/null
+++ b/packages/bruno-app/src/components/Tabs/StyledWrapper.js
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .tabs-list {
+    display: inline-flex;
+    height: 2rem;
+    width: fit-content;
+    justify-content: center;
+    gap: 0.25rem;
+  }
+
+  .tab-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 8px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    cursor: pointer;
+    border: 1px solid transparent;
+    background: transparent;
+    color: ${(props) => props.theme.tabs.secondary.inactive.color};
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.tabs.secondary.inactive.bg};
+    }
+
+    &.active {
+      background: ${(props) => props.theme.tabs.secondary.active.bg};
+      color: ${(props) => props.theme.tabs.secondary.active.color};
+    }
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Tabs/index.js b/packages/bruno-app/src/components/Tabs/index.js
index 97d5219b0..15f4890be 100644
--- a/packages/bruno-app/src/components/Tabs/index.js
+++ b/packages/bruno-app/src/components/Tabs/index.js
@@ -1,42 +1,29 @@
 import React, { createContext, useContext } from 'react';
-import { useTheme } from 'providers/Theme';
+import classnames from 'classnames';
+import StyledWrapper from './StyledWrapper';
 
 const TabsContext = createContext();
 
 export const Tabs = ({ value, onValueChange, children, className = '' }) => {
   return (
     <TabsContext.Provider value={{ value, onValueChange }}>
-      <div className={`flex flex-col h-full flex-1 ${className}`}>{children}</div>
+      <StyledWrapper className={`flex flex-col h-full flex-1 ${className}`}>{children}</StyledWrapper>
     </TabsContext.Provider>
   );
 };
 
 export const TabsList = ({ children, className = '' }) => {
-  const { theme } = useTheme();
-
-  return (
-    <div
-      className={`inline-flex h-8 w-fit justify-center rounded-md p-0.5 gap-[2px] ${className}`}
-      style={{ background: theme.tabs.secondary.inactive.bg }}
-    >
-      {children}
-    </div>
-  );
+  return <div className={`tabs-list ${className}`}>{children}</div>;
 };
 
 export const TabsTrigger = ({ value: triggerValue, children, className = '' }) => {
   const { value, onValueChange } = useContext(TabsContext);
-  const { theme } = useTheme();
   const isActive = value === triggerValue;
 
   return (
     <button
       onClick={() => onValueChange(triggerValue)}
-      className={`inline-flex items-center justify-center rounded-[4px] p-[8px] text-xs whitespace-nowrap transition-all cursor-pointer border border-transparent hover:opacity-90 ${className}`}
-      style={{
-        background: isActive ? theme.tabs.secondary.active.bg : 'transparent',
-        color: isActive ? theme.tabs.secondary.active.color : theme.tabs.secondary.inactive.color
-      }}
+      className={classnames('tab-trigger', className, { active: isActive })}
     >
       {children}
     </button>
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
index f7c45c024..e78be36e9 100644
--- a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
@@ -370,7 +370,7 @@ const catppuccinFrappeTheme = {
         color: colors.TEXT
       },
       inactive: {
-        bg: colors.SURFACE1,
+        bg: colors.SURFACE0,
         color: colors.SUBTEXT0
       }
     }
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
index 05167715a..3afad323e 100644
--- a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
@@ -370,7 +370,7 @@ const catppuccinMacchiatoTheme = {
         color: colors.TEXT
       },
       inactive: {
-        bg: colors.SURFACE1,
+        bg: colors.SURFACE0,
         color: colors.SUBTEXT0
       }
     }
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
index 43779aba1..2a9cfc837 100644
--- a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
@@ -370,7 +370,7 @@ const catppuccinMochaTheme = {
         color: colors.TEXT
       },
       inactive: {
-        bg: colors.SURFACE1,
+        bg: colors.SURFACE0,
         color: colors.SUBTEXT0
       }
     }
diff --git a/packages/bruno-app/src/themes/dark/dark-monochrome.js b/packages/bruno-app/src/themes/dark/dark-monochrome.js
index 0b7b61a98..6a5d40756 100644
--- a/packages/bruno-app/src/themes/dark/dark-monochrome.js
+++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js
@@ -353,12 +353,12 @@ const darkMonochromeTheme = {
     },
     secondary: {
       active: {
-        bg: '#2D2D2D',
+        bg: '#3F3F3F',
         color: '#CCCCCC'
       },
       inactive: {
         bg: '#3F3F3F',
-        color: '#CCCCCC'
+        color: '#999999'
       }
     }
   },
diff --git a/packages/bruno-app/src/themes/dark/dark-pastel.js b/packages/bruno-app/src/themes/dark/dark-pastel.js
index 5b131e74f..8b4e9c77b 100644
--- a/packages/bruno-app/src/themes/dark/dark-pastel.js
+++ b/packages/bruno-app/src/themes/dark/dark-pastel.js
@@ -374,7 +374,7 @@ const darkPastelTheme = {
         color: colors.TEXT
       },
       inactive: {
-        bg: colors.GRAY_4,
+        bg: colors.GRAY_3,
         color: colors.TEXT_MUTED
       }
     }
diff --git a/packages/bruno-app/src/themes/dark/dark.js b/packages/bruno-app/src/themes/dark/dark.js
index bd5415716..858ac1ca3 100644
--- a/packages/bruno-app/src/themes/dark/dark.js
+++ b/packages/bruno-app/src/themes/dark/dark.js
@@ -398,12 +398,12 @@ const darkTheme = {
     },
     secondary: {
       active: {
-        bg: '#2D2D2D',
-        color: '#CCCCCC'
+        bg: palette.background.SURFACE0,
+        color: palette.text.BASE
       },
       inactive: {
-        bg: '#3F3F3F',
-        color: '#CCCCCC'
+        bg: palette.background.SURFACE0,
+        color: palette.text.SUBTEXT1
       }
     }
   },
diff --git a/packages/bruno-app/src/themes/dark/nord.js b/packages/bruno-app/src/themes/dark/nord.js
index b094afa0e..60221478a 100644
--- a/packages/bruno-app/src/themes/dark/nord.js
+++ b/packages/bruno-app/src/themes/dark/nord.js
@@ -373,7 +373,7 @@ const nordTheme = {
         color: colors.NORD4
       },
       inactive: {
-        bg: colors.NORD3,
+        bg: colors.NORD2,
         color: colors.NORD4
       }
     }
diff --git a/packages/bruno-app/src/themes/dark/vscode.js b/packages/bruno-app/src/themes/dark/vscode.js
index 254173cec..eecf21c4f 100644
--- a/packages/bruno-app/src/themes/dark/vscode.js
+++ b/packages/bruno-app/src/themes/dark/vscode.js
@@ -376,7 +376,7 @@ const vscodeDarkTheme = {
         color: colors.TEXT
       },
       inactive: {
-        bg: colors.GRAY_4,
+        bg: colors.GRAY_3,
         color: colors.TEXT_MUTED
       }
     }
diff --git a/packages/bruno-app/src/themes/light/catppuccin-latte.js b/packages/bruno-app/src/themes/light/catppuccin-latte.js
index 5e1bea75f..19c47f591 100644
--- a/packages/bruno-app/src/themes/light/catppuccin-latte.js
+++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js
@@ -363,7 +363,7 @@ const catppuccinLatteTheme = {
     },
     secondary: {
       active: {
-        bg: colors.BASE,
+        bg: colors.SURFACE0,
         color: colors.TEXT
       },
       inactive: {
diff --git a/packages/bruno-app/src/themes/light/light-monochrome.js b/packages/bruno-app/src/themes/light/light-monochrome.js
index d51b8fde4..da19c5d57 100644
--- a/packages/bruno-app/src/themes/light/light-monochrome.js
+++ b/packages/bruno-app/src/themes/light/light-monochrome.js
@@ -351,7 +351,7 @@ const lightMonochromeTheme = {
     },
     secondary: {
       active: {
-        bg: '#FFFFFF',
+        bg: '#ECECEE',
         color: '#343434'
       },
       inactive: {
diff --git a/packages/bruno-app/src/themes/light/light-pastel.js b/packages/bruno-app/src/themes/light/light-pastel.js
index 1583bbe94..52bc933a7 100644
--- a/packages/bruno-app/src/themes/light/light-pastel.js
+++ b/packages/bruno-app/src/themes/light/light-pastel.js
@@ -367,7 +367,7 @@ const lightPastelTheme = {
     },
     secondary: {
       active: {
-        bg: colors.WHITE,
+        bg: colors.GRAY_2,
         color: colors.TEXT
       },
       inactive: {
diff --git a/packages/bruno-app/src/themes/light/light.js b/packages/bruno-app/src/themes/light/light.js
index 713059278..283d8df4c 100644
--- a/packages/bruno-app/src/themes/light/light.js
+++ b/packages/bruno-app/src/themes/light/light.js
@@ -387,12 +387,12 @@ const lightTheme = {
     },
     secondary: {
       active: {
-        bg: palette.background.BASE,
+        bg: palette.background.SURFACE1,
         color: palette.text.BASE
       },
       inactive: {
-        bg: palette.background.SURFACE1,
-        color: palette.text.BASE
+        bg: palette.background.SURFACE0,
+        color: palette.text.SUBTEXT1
       }
     }
   },
diff --git a/packages/bruno-app/src/themes/light/vscode.js b/packages/bruno-app/src/themes/light/vscode.js
index 03b60a392..b7687c7a4 100644
--- a/packages/bruno-app/src/themes/light/vscode.js
+++ b/packages/bruno-app/src/themes/light/vscode.js
@@ -371,7 +371,7 @@ const vscodeLightTheme = {
     },
     secondary: {
       active: {
-        bg: colors.WHITE,
+        bg: colors.GRAY_2,
         color: colors.TEXT
       },
       inactive: {