diff --git a/web/src/components/ui/segmented/Segmented.stories.tsx b/web/src/components/ui/segmented/Segmented.stories.tsx
index 402a3a20f..48f910fea 100644
--- a/web/src/components/ui/segmented/Segmented.stories.tsx
+++ b/web/src/components/ui/segmented/Segmented.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Segmented } from './Segmented';
+import { HouseModern } from '../icons';
 
 const meta: Meta<typeof Segmented> = {
   title: 'Base/Segmented',
@@ -14,9 +15,9 @@ export default meta;
 type Story = StoryObj<typeof Segmented>;
 
 const defaultItems = [
-  { value: 'tab1', label: 'Tab 1' },
-  { value: 'tab2', label: 'Tab 2', disabled: true },
-  { value: 'tab3', label: 'Tab 3' }
+  { value: 'tab1', label: 'Tab 1', icon: <HouseModern /> },
+  { value: 'tab2', label: 'Tab 2', disabled: true, icon: <HouseModern /> },
+  { value: 'tab3', label: 'Tab 3', icon: <HouseModern /> }
 ];
 
 export const Default: Story = {
diff --git a/web/src/components/ui/segmented/Segmented.tsx b/web/src/components/ui/segmented/Segmented.tsx
index c8bd95b58..b182934a3 100644
--- a/web/src/components/ui/segmented/Segmented.tsx
+++ b/web/src/components/ui/segmented/Segmented.tsx
@@ -93,7 +93,8 @@ export const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
               onMouseEnter={() => !item.disabled && setHoveredValue(item.value)}
               onMouseLeave={() => setHoveredValue(null)}
               className={cn(
-                'relative z-10 flex items-center justify-center gap-2 rounded-md px-2.5 text-sm transition-colors',
+                'relative z-10 flex items-center justify-center gap-x-1.5 gap-y-1 rounded-md transition-colors',
+                size === 'default' ? 'px-2.5' : 'px-3',
                 innerHeight,
                 'focus-visible:ring-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
                 selectedValue === item.value
@@ -102,10 +103,11 @@ export const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
                 hoveredValue === item.value && selectedValue !== item.value && 'bg-gray-50/50',
                 item.disabled
                   ? 'text-foreground/30 hover:text-foreground/30 cursor-not-allowed'
-                  : 'cursor-pointer'
+                  : 'cursor-pointer',
+                size === 'large' ? 'flex-col' : 'flex-row'
               )}>
-              {item.icon && <span className="flex items-center">{item.icon}</span>}
-              {item.label}
+              {item.icon && <span className={cn('flex items-center text-sm')}>{item.icon}</span>}
+              <span className={cn('text-sm')}>{item.label}</span>
             </Tabs.Trigger>
           ))}
         </Tabs.List>