diff --git a/src/components/Segments.tsx b/src/components/Segments.tsx
index 877fb03..c09a598 100644
--- a/src/components/Segments.tsx
+++ b/src/components/Segments.tsx
@@ -77,10 +77,10 @@ const Segments: Component<SegmentsProps> = (props) => {
   };
 
   return (
-    <div class="inline-block overflow-hidden rounded-sm p-1 select-none bg-neutral">
+    <div class="inline-block overflow-hidden rounded-sm px-1 py-1 select-none bg-neutral">
       <div
         class={cx(
-          'relative flex',
+          'relative flex gap-1',
           mProps.direction === 'horizontal' ? 'flex-row items-center' : 'flex-col',
         )}>
         <Index each={mProps.options}>
@@ -89,7 +89,7 @@ const Segments: Component<SegmentsProps> = (props) => {
               ref={(el) => (optionRefs[index] = el)}
               aria-disabled={mProps.disabled}
               class={cx(
-                'z-[5] cursor-pointer rounded-sm px-2 py-1',
+                'z-[5] cursor-pointer rounded-sm px-2 py-0.5',
                 selected() === option().value
                   ? 'not-aria-disabled:text-on-primary-surface aria-disabled:text-primary-disabled hover:not-aria-disabled:bg-primary-surface-hover/45'
                   : 'not-aria-disabled:text-on-surface aria-disabled:text-surface-disabled  hover:not-aria-disabled:bg-surface/35',