diff --git a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
index 4261fbb1..86243507 100644
--- a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
+++ b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
@@ -61,6 +61,7 @@ export const tabsTheme = tv({
       'data-[orientation=horizontal]:focus-ring',
       // Vertical
       'data-[orientation=vertical]:gap-2',
+      'data-[orientation=vertical]:justify-start',
     ],
     triggerList: [
       'flex',
diff --git a/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx b/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
index 61093bff..6cd70939 100644
--- a/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
+++ b/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
@@ -35,20 +35,23 @@ const TabsTrigger = forwardRef<
       // Disabled focus state for horizontal tabs
       tabIndex={orientation === 'horizontal' ? -1 : undefined}
       className={triggerWrapper({ className })}
+      asChild
       {...props}
     >
       {/* Need to add button in the trigger children because there's focus state inside the children */}
-      <button
-        data-orientation={orientation}
-        // Disabled focus state for vertical tabs
-        tabIndex={orientation === 'vertical' ? -1 : undefined}
-        className={trigger()}
-      >
-        {/* Put the icon on the left of the text for veritcal tab */}
-        {orientation === 'vertical' && icon}
-        {children}
-        {/* Put the icon on the right of the text for horizontal tab */}
-        {orientation === 'horizontal' && icon}
+      <button className={triggerWrapper({ className })}>
+        <span
+          // Disabled focus state for vertical tabs
+          tabIndex={orientation === 'horizontal' ? 0 : -1}
+          data-orientation={orientation}
+          className={trigger()}
+        >
+          {/* Put the icon on the left of the text for veritcal tab */}
+          {orientation === 'vertical' && icon}
+          {children}
+          {/* Put the icon on the right of the text for horizontal tab */}
+          {orientation === 'horizontal' && icon}
+        </span>
       </button>
     </Trigger>
   );