diff --git a/docs/stories/styles/Typography.stories.ts b/docs/stories/styles/Typography.stories.ts
index a4be7b21..bca61276 100644
--- a/docs/stories/styles/Typography.stories.ts
+++ b/docs/stories/styles/Typography.stories.ts
@@ -41,10 +41,13 @@ export const BrandTitle = generateStory(`
 
 export const Body = generateStory(`
   <p class="puik-body-large-bold">.puik-body-large-bold</p>
+  <p class="puik-body-large-medium">.puik-body-large-medium</p>
   <p class="puik-body-large">.puik-body-large</p>
   <p class="puik-body-default-bold">.puik-body-default-bold</p>
+  <p class="puik-body-default-medium">.puik-body-default-medium</p>
   <p class="puik-body-default">.puik-body-default</p>
   <p class="puik-body-small-bold">.puik-body-small-bold</p>
+  <p class="puik-body-small-medium">.puik-body-small-medium</p>
   <p class="puik-body-small">.puik-body-small</p>
   <p class="puik-body-default-link">.puik-body-default-link</p>
 `)
diff --git a/packages/components/chip/src/chip.vue b/packages/components/chip/src/chip.vue
index af8bcfdf..0c5eb1a8 100644
--- a/packages/components/chip/src/chip.vue
+++ b/packages/components/chip/src/chip.vue
@@ -9,14 +9,15 @@
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-chip__icon" />
     <div class="puik-chip__content">
       <puik-tooltip
-        v-if="content?.length >= 30"
+        :key="content"
+        :is-disabled="!showTooltip"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
       >
-        <template #description>{{ content }}</template>
-        {{ content }}
+        <p ref="chipContentElem">
+          {{ content }}
+        </p>
       </puik-tooltip>
-      {{ content }}
     </div>
     <PuikIcon
       icon="close"
@@ -27,8 +28,10 @@
 </template>
 
 <script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
 import { PuikIcon } from '@puik/components/icon'
 import { PuikTooltip } from '@puik/components/tooltip'
+import { isEllipsisActive } from '@puik/utils'
 import { chipProps, type PuikChipSizeVariant } from './chip'
 import type { PuikTooltipPosition } from '@puik/components/tooltip'
 defineOptions({
@@ -36,9 +39,19 @@ defineOptions({
 })
 
 const props = defineProps(chipProps)
+const chipContentElem = ref(null)
+const showTooltip = ref(false)
+
 const emit = defineEmits(['close'])
 
 const handleCloseEvent = () => {
   emit('close')
 }
+
+watch(chipContentElem, async () => {
+  await nextTick()
+  if (chipContentElem?.value) {
+    showTooltip.value = isEllipsisActive(chipContentElem.value)
+  }
+})
 </script>
diff --git a/packages/components/chip/test/chip.spec.ts b/packages/components/chip/test/chip.spec.ts
index 41c2a904..96d33333 100644
--- a/packages/components/chip/test/chip.spec.ts
+++ b/packages/components/chip/test/chip.spec.ts
@@ -6,7 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 describe('Chip tests', () => {
   let wrapper: VueWrapper<any>
   const findChip = () => wrapper.find('.puik-chip')
-  const findChipContent = () => wrapper.find('.puik-chip__content')
+  const findChipContent = () => wrapper.find('.puik-chip__content p')
   const findCloseBtn = () => wrapper.find('.puik-chip__close')
   const findLeftIcon = () => wrapper.find('.puik-chip__icon')
 
diff --git a/packages/components/tab-navigation/stories/tab-navigation.stories.ts b/packages/components/tab-navigation/stories/tab-navigation.stories.ts
index b8cbbcd4..61bfef07 100644
--- a/packages/components/tab-navigation/stories/tab-navigation.stories.ts
+++ b/packages/components/tab-navigation/stories/tab-navigation.stories.ts
@@ -137,8 +137,13 @@ export const Default: Story = {
   parameters: {
     docs: {
       description: {
-        story:
-          'NB: The id attribute of the component corresponds to the prop name (allows you to identify each instance of the navigation component in the event that there are several on the same page)',
+        story: `
+  NB: The id attribute of the component corresponds to the prop name (allows you to identify each instance of the navigation component in the event that there are several on the same page).
+  
+  Tips: 
+  - If you want to set a width: set a width on the 'puik-tab-navigation'
+  - If you want to set a width on tab nav: set a MIN-WIDTH on the 'puik-tab-navigation-title'
+          `,
       },
       source: {
         code: `
diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
index dec7e99f..0b05ece4 100644
--- a/packages/components/tag/src/tag.vue
+++ b/packages/components/tag/src/tag.vue
@@ -7,27 +7,30 @@
     ]"
   >
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
-    <div
-      class="puik-tag__content"
-      :data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
-    >
+    <div class="puik-tag__content">
       <puik-tooltip
-        v-if="content?.length >= 30"
+        :key="content"
+        :is-disabled="!showTooltip"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
         :data-test="dataTest != undefined ? `tooltip-${dataTest}` : undefined"
       >
-        <template #description>{{ content }}</template>
-        {{ content }}
+        <p
+          ref="tagContentElem"
+          :data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
+        >
+          {{ content }}
+        </p>
       </puik-tooltip>
-      {{ content }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
 import { PuikIcon } from '@puik/components/icon'
 import { PuikTooltip } from '@puik/components/tooltip'
+import { isEllipsisActive } from '@puik/utils'
 import {
   tagProps,
   type PuikTagSizeVariant,
@@ -39,9 +42,19 @@ defineOptions({
 })
 
 const props = defineProps(tagProps)
+const tagContentElem = ref(null)
+const showTooltip = ref(false)
+
 const emit = defineEmits(['close'])
 
 const handleCloseEvent = () => {
   emit('close')
 }
+
+watch(tagContentElem, async () => {
+  await nextTick()
+  if (tagContentElem?.value) {
+    showTooltip.value = isEllipsisActive(tagContentElem.value)
+  }
+})
 </script>
diff --git a/packages/components/tag/test/tag.spec.ts b/packages/components/tag/test/tag.spec.ts
index 5139e57c..0b56ed7f 100644
--- a/packages/components/tag/test/tag.spec.ts
+++ b/packages/components/tag/test/tag.spec.ts
@@ -6,7 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 describe('Tag tests', () => {
   let wrapper: VueWrapper<any>
   const findTag = () => wrapper.find('.puik-tag')
-  const findTagContent = () => wrapper.find('.puik-tag__content')
+  const findTagContent = () => wrapper.find('.puik-tag__content p')
   const findLeftIcon = () => wrapper.find('.puik-tag__icon')
 
   const factory = (
diff --git a/packages/tailwind-preset/theme.js b/packages/tailwind-preset/theme.js
index 0d0b162a..2e0595af 100644
--- a/packages/tailwind-preset/theme.js
+++ b/packages/tailwind-preset/theme.js
@@ -88,7 +88,15 @@ module.exports = {
       materialIcons: ['Material Icons Round'],
     },
     fontSize: {
-      '4xl': '2rem',
+      xs: ['0.75rem', { lineHeight: '1.125rem' }],
+      sm: ['0.875rem', { lineHeight: '1.25rem' }],
+      base: ['1rem', { lineHeight: '1.375rem' }],
+      lg: ['1.125rem', { lineHeight: '1.375rem' }],
+      xl: ['1.25rem', { lineHeight: '1.75rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+      '4xl': ['2rem', { lineHeight: '2.625rem' }],
+      '5xl': ['3rem', { lineHeight: '3.625rem' }],
     },
     screens: {
       xs: '320px',
diff --git a/packages/theme/src/chip.scss b/packages/theme/src/chip.scss
index dc08939b..5dd77549 100644
--- a/packages/theme/src/chip.scss
+++ b/packages/theme/src/chip.scss
@@ -26,9 +26,9 @@
     @apply mr-1;
   }
   &__content {
-    @apply max-w-[150px] pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
-    & > .puik-tooltip {
-      @apply max-w-[150px] overflow-hidden whitespace-nowrap text-ellipsis;
+    @apply relative max-w-[150px];
+    p {
+      @apply pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
     }
   }
   &__content .puik-tooltip__wrapper {
diff --git a/packages/theme/src/common/typography.scss b/packages/theme/src/common/typography.scss
index 9013806f..7a298514 100644
--- a/packages/theme/src/common/typography.scss
+++ b/packages/theme/src/common/typography.scss
@@ -1,23 +1,23 @@
 // Titles
 
 .puik-jumbotron {
-  @apply text-5xl leading-[3.625rem] -tracking-[0.066875rem] font-extrabold font-primary;
+  @apply text-5xl -tracking-[0.066875rem] font-extrabold font-primary;
 }
 
 .puik-h1 {
-  @apply text-4xl leading-[2.625rem] -tracking-[0.043125rem] font-bold font-primary;
+  @apply text-4xl -tracking-[0.043125rem] font-bold font-primary;
 }
 
 .puik-h2 {
-  @apply text-2xl leading-8 -tracking-[0.029375rem] font-semibold font-primary;
+  @apply text-2xl -tracking-[0.029375rem] font-semibold font-primary;
 }
 
 .puik-h3 {
-  @apply text-xl leading-[1.875rem] -tracking-[0.020625rem] font-semibold font-primary;
+  @apply text-lg -tracking-[0.01125rem] font-semibold font-primary;
 }
 
 .puik-h4 {
-  @apply text-lg leading-[1.625rem] -tracking-[0.01625rem] font-medium font-primary;
+  @apply text-lg -tracking-[0.01125rem] font-medium font-primary;
 }
 
 .puik-h5 {
@@ -30,45 +30,57 @@
 
 // Brand title
 
+.puik-brand-jumbotron {
+  @extend .puik-jumbotron;
+  @apply font-secondary font-normal;
+}
+
 .puik-brand-h1 {
   @extend .puik-h1;
-  @apply -tracking-[0] font-secondary font-normal;
+  @apply font-secondary font-normal;
 }
 
 .puik-brand-h2 {
   @extend .puik-h2;
-  @apply -tracking-[0] font-secondary font-normal;
-}
-
-.puik-brand-jumbotron {
-  @extend .puik-jumbotron;
-  @apply -tracking-[0] font-secondary font-normal;
+  @apply font-secondary font-normal;
 }
 
 // Body
 
 .puik-body-small {
-  @apply text-xs leading-5 font-primary;
+  @apply text-xs font-primary;
+}
+
+.puik-body-small-medium {
+  @apply text-xs font-primary font-medium;
 }
 
 .puik-body-small-bold {
-  @apply text-xs leading-5 font-primary font-bold;
+  @apply text-xs font-primary font-bold;
 }
 
 .puik-body-default {
-  @apply text-sm leading-5 font-primary;
+  @apply text-sm font-primary;
+}
+
+.puik-body-default-medium {
+  @apply text-sm font-primary font-medium;
 }
 
 .puik-body-default-bold {
-  @apply text-sm leading-5 font-primary font-bold;
+  @apply text-sm font-primary font-bold;
 }
 
 .puik-body-large {
-  @apply text-base leading-[1.375rem] font-primary;
+  @apply text-base font-primary;
+}
+
+.puik-body-large-medium {
+  @apply text-base font-primary font-medium;
 }
 
 .puik-body-large-bold {
-  @apply text-base leading-[1.375rem] font-primary font-bold;
+  @apply text-base font-primary font-bold;
 }
 
 .puik-body-default-link {
@@ -93,13 +105,13 @@
 // Buttons
 
 .puik-text-button-default {
-  @apply font-primary font-medium text-sm leading-[1.125rem];
+  @apply font-primary font-medium text-sm/[1.125rem];
 }
 
 .puik-text-button-small {
-  @apply font-primary text-xs leading-4 font-medium;
+  @apply font-primary text-xs/4 font-medium;
 }
 
 .puik-text-button-large {
-  @apply font-primary text-base leading-5 font-medium;
+  @apply font-primary text-base/5 font-medium;
 }
diff --git a/packages/theme/src/tab-navigation-group-titles.scss b/packages/theme/src/tab-navigation-group-titles.scss
index 17dc41ae..b869aab1 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 flex-col min-h-[48px] sm:flex-row sm:flex-wrap;
+  @apply flex overflow-x-auto min-h-[48px] relative;
 }
diff --git a/packages/theme/src/tab-navigation-title.scss b/packages/theme/src/tab-navigation-title.scss
index 2575d041..7abbb442 100644
--- a/packages/theme/src/tab-navigation-title.scss
+++ b/packages/theme/src/tab-navigation-title.scss
@@ -1,7 +1,7 @@
 @use './common/typography.scss';
 
 .puik-tab-navigation__title {
-  @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];
+  @apply relative p-2 flex gap-2 whitespace-nowrap border-b border-b-primary-400 items-center cursor-pointer puik-body-default-bold;
 
   &:focus:not(:hover) {
     @apply bg-primary-400 outline-none;
diff --git a/packages/theme/src/tag.scss b/packages/theme/src/tag.scss
index f5d8a57a..dd4efa26 100644
--- a/packages/theme/src/tag.scss
+++ b/packages/theme/src/tag.scss
@@ -41,9 +41,9 @@
     @apply mr-1;
   }
   &__content {
-    @apply max-w-[150px] pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
-    & > .puik-tooltip {
-      @apply max-w-[150px] overflow-hidden whitespace-nowrap text-ellipsis;
+    @apply relative max-w-[150px];
+    p {
+      @apply pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
     }
   }
   &__content .puik-tooltip__wrapper {