diff --git a/web/src/components/ui/segmented.tsx b/web/src/components/ui/segmented.tsx
index cec2bb6df..e82bafc6d 100644
--- a/web/src/components/ui/segmented.tsx
+++ b/web/src/components/ui/segmented.tsx
@@ -57,8 +57,8 @@ export function Segmented({
             className={cn(
               'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer',
               {
-                'bg-text-primary': selectedValue === actualValue,
-                'text-bg-base': selectedValue === actualValue,
+                'text-bg-base bg-metallic-gradient border-b-[#00BEB4] border-b-2':
+                  selectedValue === actualValue,
               },
             )}
             onClick={() => handleOnChange(actualValue)}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index f0bf5cb30..82c4bf5b7 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -206,6 +206,10 @@ module.exports = {
           ring: 'hsl(var(--sidebar-ring))',
         },
       },
+      backgroundImage: {
+        'metallic-gradient':
+          'linear-gradient(104deg, var(--text-primary) 30%, var(--metallic) 50%, var(--text-primary) 70%)',
+      },
       borderRadius: {
         lg: `var(--radius)`,
         md: `calc(var(--radius) - 2px)`,
diff --git a/web/tailwind.css b/web/tailwind.css
index dbcf7ebc1..b8f49af73 100644
--- a/web/tailwind.css
+++ b/web/tailwind.css
@@ -90,6 +90,7 @@
 
     --input-border: rgba(22, 22, 24, 0.2);
 
+    --metallic: #46464a;
     /* design colors */
 
     --bg-base: #f6f6f7;
@@ -230,6 +231,7 @@
 
     --input-border: rgba(255, 255, 255, 0.2);
 
+    --metallic: #fafafa;
     /* design colors */
 
     --bg-base: #161618;