diff --git a/packages/components/tab-navigation/src/tab-navigation-title.ts b/packages/components/tab-navigation/src/tab-navigation-title.ts
index efb22d64..79da284c 100644
--- a/packages/components/tab-navigation/src/tab-navigation-title.ts
+++ b/packages/components/tab-navigation/src/tab-navigation-title.ts
@@ -3,15 +3,15 @@ import type { ExtractPropTypes } from 'vue'
 import type TabNavigationTitle from './tab-navigation-title.vue'
 
 export const tabNavigationTitleProps = buildProps({
+  position: {
+    type: Number,
+    required: true,
+  },
   disabled: {
     type: Boolean,
     required: false,
     default: false,
   },
-  position: {
-    type: Number,
-    required: true,
-  },
 } as const)
 
 export type TabNavigationTitleProps = ExtractPropTypes<
diff --git a/packages/theme/src/tab-navigation-group-titles.scss b/packages/theme/src/tab-navigation-group-titles.scss
index 80adad65..17dc41ae 100644
--- a/packages/theme/src/tab-navigation-group-titles.scss
+++ b/packages/theme/src/tab-navigation-group-titles.scss
@@ -1,3 +1,3 @@
 .puik-tab-navigation__group-titles {
-  @apply flex  min-h-[48px] overflow-x-auto;
+  @apply flex flex-col min-h-[48px] sm:flex-row sm:flex-wrap;
 }
diff --git a/packages/theme/src/tab-navigation-title.scss b/packages/theme/src/tab-navigation-title.scss
index 9131b176..2575d041 100644
--- a/packages/theme/src/tab-navigation-title.scss
+++ b/packages/theme/src/tab-navigation-title.scss
@@ -1,29 +1,19 @@
 @use './common/typography.scss';
 
 .puik-tab-navigation__title {
-  @apply relative  min-h-full p-2 flex items-center cursor-pointer puik-body-default-bold;
-  flex: 0 1 135px;
-  gap: 8px;
-  white-space: nowrap;
-  border-bottom: 1px solid #dce1e3;
+  @apply relative p-2 flex gap-2 whitespace-nowrap border-b border-b-primary-400 items-center cursor-pointer puik-body-default-bold sm:w-[135px];
+
   &:focus:not(:hover) {
-    @apply bg-primary-400;
-    outline: none;
+    @apply bg-primary-400 outline-none;
   }
+
   &:hover {
     @apply bg-primary-300;
   }
+
   &--selected {
     &::before {
-      @apply bg-black;
-      content: '';
-      display: block;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 3px;
-      border-radius: 4px 4px 0 0;
+      @apply bg-primary content-[''] block absolute bottom-0 left-0 w-full h-[3px] rounded-t-[4px];
     }
   }
   &--disabled {