diff --git a/README.md b/README.md
index 0fd39d3ee7..be6d58f2e4 100644
--- a/README.md
+++ b/README.md
@@ -99,24 +99,28 @@ Information, guides and tutorials are available
 on [vuestic.dev](https://vuestic.dev)
 
 ### Partners & Sponsors ❤️
+
 <div>
-  <a href="https://vuejs.org/partners/epicmax.html" target="_blank" title="VueJS - The Progressive JavaScript Framework">
+  <!-- <a href="https://vuejs.org/partners/epicmax.html" target="_blank" title="VueJS - The Progressive JavaScript Framework">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/vuejs-light.svg" />
       <img src="./.github/assets/vuejs.svg" loading="lazy" alt=""/>
     </picture>
-  </a>
+  </a> -->
   <a href="https://nuxt.com/support/agencies/epicmax" target="_blank" title="Nuxt - The Intuitive Web Framework">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/nuxt-light.svg" />
-      <img hspace="15" src="./.github/assets/nuxt.svg" loading="lazy" alt=""/>
+      <img src="./.github/assets/nuxt.svg" loading="lazy" alt=""/>
     </picture>
   </a>
   <a href="https://epicmax.co/" target="_blank" title="Epicmax - Top Vue.js Development Company">
-    <img src="./.github/assets/epicmax.svg" loading="lazy" alt="">
+    <img hspace="24" src="./.github/assets/epicmax.svg" loading="lazy" alt="">
   </a>
-  <a href="https://www.jetbrains.com/" target="_blank" title="JetBrains: Essential tools for software developers and teams">
-    <img hspace="15"  src="./.github/assets/jb_square.svg" loading="lazy" alt="">
+  <a href="https://vuejobs.com/" target="_blank" title="Vue.js jobs – Browse through dozens of Vue.js openings">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/vuejobs-light.svg" />
+      <img src="./.github/assets/vuejobs.svg" loading="lazy" alt=""/>
+    </picture>
   </a>
   <br />
   <br />
@@ -126,18 +130,15 @@ on [vuestic.dev](https://vuestic.dev)
       <img src="./.github/assets/aggrid.svg" loading="lazy" alt=""/>
     </picture>
   </a>
-  <a href="https://vuejobs.com/" target="_blank" title="Vue.js jobs – Browse through dozens of Vue.js openings">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/vuejobs-light.svg" />
-      <img hspace="15" src="./.github/assets/vuejobs.svg" loading="lazy" alt=""/>
-    </picture>
-  </a>
   <a href="https://flatlogic.com/" target="_blank" title="Flatlogic - The best way to create React, Angular and Vue full-stack web applications">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/flatlogic-light.svg" />
-      <img src="./.github/assets/flatlogic.svg" loading="lazy" alt=""/>
+      <img hspace="24" src="./.github/assets/flatlogic.svg" loading="lazy" alt=""/>
     </picture>
   </a>
+  <a href="https://www.jetbrains.com/" target="_blank" title="JetBrains: Essential tools for software developers and teams">
+    <img src="./.github/assets/jb_square.svg" loading="lazy" alt="">
+  </a>
 </div>
 <br />
 
@@ -157,10 +158,12 @@ example of a real-world web application based on Vuestic UI.
 ### Contributing
 
 Thanks for all your wonderful PRs, issues and ideas.
+
 <a href="https://github.com/epicmaxco/vuestic-ui/graphs/contributors">
-<img src="https://opencollective.com/vuestic-ui/contributors.svg?width=890&button=false" />
+  <img src="https://opencollective.com/vuestic-ui/contributors.svg?width=890&button=false" />
 </a>
-<br>
+<br />
+
 You’re always welcome to join: check out
 our <a href="https://vuestic.dev/en/contribution/guide">
 contribution guides</a>
diff --git a/packages/docs/components/AlgoliaSearch.vue b/packages/docs/components/AlgoliaSearch.vue
index 643e2ab541..edd36dc487 100644
--- a/packages/docs/components/AlgoliaSearch.vue
+++ b/packages/docs/components/AlgoliaSearch.vue
@@ -8,7 +8,7 @@
 <script lang="ts" setup>
 import docsearch from '@docsearch/js'
 import { useI18n } from 'vue-i18n'
-import { onMounted, unref as _unref } from 'vue'
+import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { locale } = useI18n()
@@ -120,10 +120,12 @@ onMounted(() => {
   flex-grow: 1;
   display: flex;
 
+  @include xs(flex-grow, 0);
+
   .DocSearch-Button {
     margin-left: 0;
     flex-grow: 1;
-    max-width: 320px;
+    max-width: 20rem;
     border-radius: var(--va-input-border-radius);
     background-color: var(--va-background-element);
 
@@ -136,11 +138,10 @@ onMounted(() => {
   }
 
   .DocSearch-Button-Placeholder {
+    color: v-bind(placeholderColor);
+
     @include md(display, block);
     @include xs(display, none);
-
-    // TODO: This Vbind breaks build !
-    color: v-bind(placeholderColor);
   }
 
   .DocSearch-Button-Keys {
@@ -153,10 +154,6 @@ onMounted(() => {
       @include sm(color, var(--va-primary));
     }
   }
-
-  @media screen and (max-width: $break_xs) {
-    flex-grow: 0;
-  }
 }
 
 .DocSearch-Modal {
diff --git a/packages/docs/components/landing/Footer.vue b/packages/docs/components/landing/Footer.vue
index e55b9cc7ef..7f68048c47 100644
--- a/packages/docs/components/landing/Footer.vue
+++ b/packages/docs/components/landing/Footer.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw } from 'vue'
+import { markRaw, computed } from 'vue'
 
 import { useElementTextColor, useBreakpoint } from 'vuestic-ui'
 
@@ -100,7 +100,7 @@ const buttons = [
   { href: 'https://github.com/epicmaxco/epic-spinners', icon: IconSpinnersRaw, label: 'landing.footer.buttons.spinners' },
 ]
 
-const sitemap = [
+const sitemap = computed(() => ([
   {
     title: 'landing.footer.sitemap.resources[0]',
     items: [
@@ -133,7 +133,7 @@ const sitemap = [
       { label: 'landing.footer.sitemap.about[3]', component: 'a', prop: 'href', value: 'mailto:hello@epicmax.co?subject=VuesticUI Partnership' },
     ]
   },
-]
+]))
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/docs/components/layout/Header.vue b/packages/docs/components/layout/Header.vue
index 1917ffb8b8..c539ba5537 100644
--- a/packages/docs/components/layout/Header.vue
+++ b/packages/docs/components/layout/Header.vue
@@ -1,74 +1,162 @@
 <template>
-  <div>
+  <div
+    class="header-wrapper"
+    :class="isOptionsVisible && 'header-wrapper--expanded'"
+  >
     <HeaderBanner closeable />
+
     <va-navbar
+      v-show="!isOptionsVisible"
       class="header"
       color="background-secondary"
     >
       <template #left>
-        <header-selector
+        <HeaderSelector
           class="mr-3"
           :minimized="isSidebarVisible"
-          @toggleSidebar="toggleSidebar"
+          @toggle-sidebar="toggleSidebar"
         />
         <NuxtLink
-          v-slot="{ navigate, href }"
           :to="landing.to"
-          custom
+          :aria-label="landing.text"
         >
-          <a
-            :href="href"
-            :aria-label="landing.text"
-            :title="landing.text"
-            class="header-logo"
-          >
-            <vuestic-logo
-              class="header-logo__image"
-              height="30"
-              width="150"
-              aria-hidden="true"
-              @click="navigate"
-            />
-          </a>
+          <VuesticLogo
+            height="32"
+            width="160"
+            aria-hidden="true"
+          />
         </NuxtLink>
-        <algolia-search class="header__searchbar" />
+        <AlgoliaSearch class="header__searchbar" />
       </template>
+
       <template #right>
+        <div
+          v-if="breakpoint.mdUp"
+          class="header__options"
+        >
+          <va-button
+            v-for="(link, index) in links"
+            :key="index"
+            preset="secondary"
+            class="mr-1"
+            :to="link.to"
+            :href="link.url"
+            :target="link.target"
+          >
+            {{ link.text }}
+          </va-button>
+          <ColorDropdown class="mr-2" />
+          <LanguageDropdown
+            class="mr-3"
+            preset="secondary"
+          />
+          <ThemeSwitch class="mr-4" />
+          <VersionDropdown />
+        </div>
+
+        <!-- options mobile menu -->
         <va-button
-          v-for="(link, index) in links"
-          :key="index"
-          preset="secondary"
-          class="mr-1"
-          :to="link.to"
-          :href="link.url"
-          :target="link.target"
+          v-if="breakpoint.smDown"
+          :aria-label="$t('menu.openOptionsMenu')"
+          preset="plain"
+          @click="toggleOptions"
         >
-          {{ link.text }}
+          <va-icon class="fas fa-bars" />
         </va-button>
-        <color-dropdown class="mr-2" />
-        <language-dropdown
-          class="mr-3"
-          preset="secondary"
-        />
-        <theme-switch />
-        <version-dropdown />
       </template>
     </va-navbar>
+
+    <!-- mobile options -->
+    <nav
+      v-show="isOptionsVisible"
+      class="header__mobile-options"
+    >
+      <div class="mobile-options__menu-button-wrapper">
+        <va-button
+          v-if="isOptionsVisible"
+          :aria-label="$t('menu.closeOptionsMenu')"
+          preset="plain"
+          @click="toggleOptions"
+        >
+          <va-icon class="fas fa-times" />
+        </va-button>
+      </div>
+
+      <va-list class="mobile-options__list">
+        <va-list-item
+          v-for="(link, index) in links"
+          :key="index"
+        >
+          <va-list-item-section class="mobile-options__link">
+            <va-button
+              preset="plain"
+              :to="link.to"
+              :href="link.url"
+              :target="link.target"
+              class="mobile-options__link-button"
+            >
+              {{ link.text }}
+            </va-button>
+          </va-list-item-section>
+        </va-list-item>
+
+        <div class="mobile-options__languages">
+          <va-list-label
+            color="secondary"
+            class="mobile-options__label"
+          >
+            {{ $t('landing.header.buttons.language') }}
+          </va-list-label>
+
+          <va-list-item
+            v-for="({ code, name }, id) in locales"
+            :key="id"
+            class="mobile-options__language"
+            :class="{ active: code === locale }"
+            @click="setLocale(code)"
+          >
+            <va-list-item-section class="mobile-options__link">
+              <span class="language">{{ name }}</span>
+            </va-list-item-section>
+          </va-list-item>
+
+          <va-list-item>
+            <va-list-item-section class="mobile-options__link">
+              <router-link :to="`/${locale}/contribution/translation`">
+                {{ $t('landing.header.buttons.translation') }}
+              </router-link>
+            </va-list-item-section>
+          </va-list-item>
+        </div>
+
+        <div class="mobile-options__items">
+          <ThemeSwitch class="mb-8" />
+          <SocialsLinks size="large" />
+          <StarsButton repo="epicmaxco/vuestic-ui" />
+          <VersionDropdown />
+        </div>
+      </va-list>
+    </nav>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { useBreakpoint } from 'vuestic-ui'
+
 import LanguageDropdown from './LanguageDropdown.vue'
 import VersionDropdown from './header/VersionDropdown.vue'
 import ColorDropdown from './header/ColorDropdown.vue'
 import HeaderSelector from './header/HeaderSelector.vue'
 import VuesticLogo from './header/VuesticDocsLogo.vue'
-import AlgoliaSearch from '@/components/AlgoliaSearch.vue'
+import AlgoliaSearch from '../AlgoliaSearch.vue'
 import ThemeSwitch from './header/ThemeSwitch.vue'
-import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import SocialsLinks from '../landing/SocialsLinks.vue'
+import StarsButton from '../landing/StarsButton.vue'
+import { useSharedLanguageSwitcher } from '@/composables/useLanguageSwitcher'
 
-const { locale, t } = useI18n()
+const { t, locale, locales, setLocale } = useSharedLanguageSwitcher()
+const breakpoint = useBreakpoint()
 
 const landing = computed(() => ({
   text: t('menu.home'),
@@ -92,64 +180,176 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isOptionsVisible: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const emit = defineEmits(['update:isSidebarVisible'])
+const emit = defineEmits(['update:isSidebarVisible', 'update:isOptionsVisible'])
 
 const toggleSidebar = () => {
   emit('update:isSidebarVisible', !props.isSidebarVisible)
 }
+
+const toggleOptions = () => {
+  emit('update:isOptionsVisible', !props.isOptionsVisible)
+}
 </script>
 
 <style lang="scss">
 @import "vuestic-ui/src/styles/resources";
 @import "@/assets/smart-grid.scss";
 
-.header {
+.header-wrapper {
   --va-navbar-mobile-height: auto;
+  --navbar-padding: 1.2rem 1rem;
+  --navbar-padding-xs: 0.75rem 1rem;
+
+  &--expanded {
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    overflow: hidden;
+  }
+}
 
+.header {
   box-shadow: 0 2px 8px var(--va-shadow);
 
+  &.va-navbar {
+    padding: var(--navbar-padding);
+
+    @include sm(display, flex);
+    @include sm(flex-direction, row);
+    @include sm(justify-content, space-between);
+    @include sm(align-items, center);
+    @include sm(height, unset);
+
+    @include xs(padding, var(--navbar-padding-xs));
+  }
+
   .va-navbar__left {
     align-items: center;
-    flex: 50%;
+    flex-grow: 1;
+  }
 
-    @include sm(justify-content, space-between);
+  .va-navbar__center {
+    @include sm(width, unset);
   }
 
   .va-navbar__right {
     align-items: center;
-    flex: 50%;
 
-    @include sm(display, none);
+    @include sm(width, unset);
   }
 
   &__searchbar {
     margin-left: 1.5rem;
 
-    @include sm(margin-left, 0);
+    @include sm(margin-left, 1rem);
+    @include xs(margin-left, auto);
+    @include xs(margin-right, 1rem);
   }
 
-  &-logo {
-    &__image {
-      min-width: 160px;
-      max-width: 160px;
-    }
+  &__options {
+    display: flex;
+    align-items: center;
+  }
+
+  &__mobile-options {
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    overflow: auto;
+  }
+}
+
+.mobile-options {
+  &__menu-button-wrapper {
+    width: 100%;
+    flex-shrink: 0;
+    text-align: right;
+    padding: var(--navbar-padding);
+
+    @include xs(padding, var(--navbar-padding-xs));
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
+    padding: 0 2rem 2rem;
+    max-width: 25rem;
+    align-self: center;
+  }
+
+  &__languages {
+    margin-top: 3.5rem;
+  }
 
-    @media screen and (max-width: 945px) {
-      display: none;
+  &__label {
+    font-size: 0.625rem;
+    margin-bottom: 0.5rem;
+  }
+
+  &__language {
+    cursor: pointer;
+
+    &.active {
+      .language {
+        color: var(--va-text-primary);
+      }
     }
+  }
 
-    @include media-breakpoint-down(sm) {
-      display: block;
+  &__link {
+    @include sm(font-size, 1.2rem);
+
+    align-self: center;
+    font-weight: 600;
+    text-align: center;
+
+    span,
+    a {
+      color: var(--va-primary);
+      padding: 0.5rem 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        color: var(--va-text-primary);
+      }
     }
+  }
+
+  &__link-button {
+    margin-top: 0.5rem;
 
-    @include sm(display, block);
+    .va-button__content {
+      @include sm(font-size, 1.2rem);
+    }
   }
 
-  &.va-navbar {
-    @media screen and (max-width: $break_xs) {
-      padding: 0.75rem 22px;
+  &__items {
+    margin-top: 2rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    & > * {
+      margin-top: 2rem;
     }
   }
 }
diff --git a/packages/docs/components/layout/header/ThemeSwitch.vue b/packages/docs/components/layout/header/ThemeSwitch.vue
index 561e31ce0b..ecb2694373 100644
--- a/packages/docs/components/layout/header/ThemeSwitch.vue
+++ b/packages/docs/components/layout/header/ThemeSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mr-4">
+  <div>
     <va-switch
       v-model="isDark"
       color="#5123a1"
@@ -25,13 +25,11 @@
 import { computed } from 'vue'
 import { useColors } from 'vuestic-ui'
 
-const { currentPresetName } = useColors()
-
-const { setTheme } = useTheme()
+const { currentPresetName, applyPreset } = useColors()
 
 const isDark = computed({
   get: () => currentPresetName.value === 'dark',
-  set: (value) => setTheme(value ? 'dark' : 'light'),
+  set: (value) => applyPreset(value ? 'dark' : 'light'),
 })
 </script>
 
diff --git a/packages/docs/composables/useTheme.ts b/packages/docs/composables/useTheme.ts
deleted file mode 100644
index 80c312491d..0000000000
--- a/packages/docs/composables/useTheme.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const useTheme = () => {
-  const colorMode = useColorMode()
-  const cookie = useCookie('vuestic-theme')
-
-  const { applyPreset } = useColors()
-
-  const setTheme = (theme?: string) => {
-    if (theme) {
-      colorMode.preference = theme
-      applyPreset(theme)
-      cookie.value = theme
-      return
-    }
-
-    if (cookie.value) {
-      applyPreset(cookie.value)
-      return
-    }
-
-    if (!colorMode.unknown) {
-      applyPreset(colorMode.value)
-    }
-  }
-
-  return {
-    setTheme
-  }
-}
diff --git a/packages/docs/config/vuestic-config.ts b/packages/docs/config/vuestic-config.ts
index f6811ea31d..095418595a 100644
--- a/packages/docs/config/vuestic-config.ts
+++ b/packages/docs/config/vuestic-config.ts
@@ -11,10 +11,6 @@ const VaButtonLandingHeader = {
   'hover-opacity': '1',
 }
 
-// const cookie = useCookie('vuestic-theme')
-
-const theme = 'light'
-
 export const VuesticConfig = defineVuesticConfig({
   icons,
   components: {
@@ -39,7 +35,6 @@ export const VuesticConfig = defineVuesticConfig({
     },
   },
   colors: {
-    currentPresetName: theme,
     presets: {
       light: {
         secondary: '#666E75',
diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
index 7112e02d9f..5c30a3e5c8 100644
--- a/packages/docs/layouts/default.vue
+++ b/packages/docs/layouts/default.vue
@@ -4,9 +4,15 @@
       ref="header"
       class="docs-layout__header"
     >
-      <LayoutHeader v-model:isSidebarVisible="isSidebarVisible" />
+      <LayoutHeader
+        v-model:isSidebarVisible="isSidebarVisible"
+        v-model:isOptionsVisible="isOptionsVisible"
+      />
     </div>
-    <section class="docs-layout__main-section">
+    <section
+      v-show="!isOptionsVisible"
+      class="docs-layout__main-section"
+    >
       <aside class="docs-layout__sidebar">
         <LayoutSidebar
           v-model:visible="isSidebarVisible"
@@ -26,14 +32,14 @@
 import { useColors } from 'vuestic-ui'
 import { useDocsScroll } from '../composables/useDocsScroll';
 
-const colorMode = useColorMode()
 const cookie = useCookie('vuestic-theme')
 const { applyPreset } = useColors()
 const breakpoints = useBreakpoint()
 
 const isSidebarVisible = ref(!breakpoints.smDown)
+const isOptionsVisible = ref(false)
 
-applyPreset(cookie.value || colorMode.preference)
+applyPreset(cookie.value || 'light')
 
 watch(() => breakpoints.smDown, (newValue, oldValue) => {
   if (newValue && !oldValue) {
@@ -42,12 +48,14 @@ watch(() => breakpoints.smDown, (newValue, oldValue) => {
   if (!newValue && oldValue) {
     isSidebarVisible.value = true
   }
+  isOptionsVisible.value = false
 })
 
 const { afterEach } = useRouter()
 const { scrollToElement } = useDocsScroll()
 afterEach(() => {
   scrollToElement()
+  isOptionsVisible.value = false
 
   if (breakpoints.smDown) {
     isSidebarVisible.value = false
@@ -60,6 +68,7 @@ useHead({
   link: [
     { href: 'https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css', rel: 'stylesheet' },
     { href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css', rel: 'stylesheet' },
+    { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css", rel: "stylesheet" },
   ],
   script: [
     { src: 'https://kit.fontawesome.com/5460c87b2a.js', crossorigin: 'anonymous' },
diff --git a/packages/docs/page-config/ui-elements/tabs/examples/Color.vue b/packages/docs/page-config/ui-elements/tabs/examples/Color.vue
index 563a3f3858..838db56f55 100644
--- a/packages/docs/page-config/ui-elements/tabs/examples/Color.vue
+++ b/packages/docs/page-config/ui-elements/tabs/examples/Color.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 280px;">
+  <div style="max-width: 280px;">
     <va-tabs
       v-model="value"
       color="danger"
diff --git a/packages/docs/page-config/ui-elements/tabs/examples/Pagination.vue b/packages/docs/page-config/ui-elements/tabs/examples/Pagination.vue
index 081c11b3fe..13718efe77 100644
--- a/packages/docs/page-config/ui-elements/tabs/examples/Pagination.vue
+++ b/packages/docs/page-config/ui-elements/tabs/examples/Pagination.vue
@@ -1,7 +1,7 @@
 <template>
   <va-tabs
     v-model="value"
-    style="width: 280px;"
+    style="max-width: 280px;"
   >
     <template #tabs>
       <va-tab
diff --git a/packages/docs/page-config/ui-elements/tabs/index.ts b/packages/docs/page-config/ui-elements/tabs/index.ts
index e4076df1bf..3f130c83b2 100644
--- a/packages/docs/page-config/ui-elements/tabs/index.ts
+++ b/packages/docs/page-config/ui-elements/tabs/index.ts
@@ -17,8 +17,6 @@ export default definePageConfig({
     block.subtitle("all.api"),
     block.api("VaTabs", apiOptions),
 
-        
-
     block.subtitle("all.faq"),
     block.headline("tabs.faq.questions[0].question"),
     block.paragraph("tabs.faq.questions[0].answer"),
diff --git a/packages/docs/translations/en.json b/packages/docs/translations/en.json
index 0ea92cd8ce..ae15b836c9 100644
--- a/packages/docs/translations/en.json
+++ b/packages/docs/translations/en.json
@@ -1724,7 +1724,9 @@
     "testing": "Testing",
     "value": "Value",
     "config": "Config",
-    "confirm": "Confirm"
+    "confirm": "Confirm",
+    "openOptionsMenu": "Open options menu",
+    "closeOptionsMenu": "Close options menu"
   },
   "all": {
     "examples": "Examples",
diff --git a/packages/nuxt/nuxt.shim.d.ts b/packages/nuxt/nuxt.shim.d.ts
index a546b53335..b6ad41afb5 100644
--- a/packages/nuxt/nuxt.shim.d.ts
+++ b/packages/nuxt/nuxt.shim.d.ts
@@ -2,7 +2,22 @@ declare module '#app' {
   export * from 'nuxt/app'
 }
 
+declare module '#app/components/nuxt-link' {
+  export * from 'nuxt/dist/app/components/nuxt-link.ts'
+  export { default as default } from 'nuxt/dist/app/components/nuxt-link.ts'
+}
+
 // Path to vuestic-ui main, so it is not required to build vuestic before working with packages/nuxt
 declare module 'vuestci-ui' {
   export * from 'vuestic-ui/src/main'
+}
+
+declare module '#imports' {
+  export * from 'nuxt/dist/head/runtime/composables.ts'
+}
+
+declare module '#vuestic-config' {
+  import { GlobalConfig } from 'vuestic-ui'
+  var gc: GlobalConfig | undefined
+  export default gc
 }
\ No newline at end of file
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
index 05c570897d..d4435d327e 100644
--- a/packages/nuxt/src/module.ts
+++ b/packages/nuxt/src/module.ts
@@ -22,6 +22,7 @@ export default defineNuxtModule<VuesticOptions>({
     config: {},
     css: ['smart-helpers', 'typography'],
     fonts: true,
+    themeCookieKey: 'vuestic-theme',
   },
 
   setup (options) {
diff --git a/packages/nuxt/src/runtime/plugin.ts b/packages/nuxt/src/runtime/plugin.ts
index feaf2f3bd4..4ad9706841 100644
--- a/packages/nuxt/src/runtime/plugin.ts
+++ b/packages/nuxt/src/runtime/plugin.ts
@@ -5,34 +5,41 @@ import {
   VaModalPlugin,
   ColorsClassesPlugin,
   BreakpointConfigPlugin,
+  type GlobalConfig,
+  type PartialGlobalConfig
 } from 'vuestic-ui'
-import { markRaw, computed } from 'vue'
+import { markRaw, computed, watch, type Ref } from 'vue'
 
-import type { VuesticOptions } from '../types'
-// @ts-ignore: nuxt import alias
-import { defineNuxtPlugin } from '#app'
-// @ts-ignore: direct nuxt-link import
+import { defineNuxtPlugin, useCookie } from '#app'
+import { useHead } from '#imports'
 import NuxtLink from '#app/components/nuxt-link'
-// @ts-ignore: use-config-file import alias
 import configFromFile from '#vuestic-config'
-// @ts-ignore: use-head import alias
-import { useHead } from '#imports'
+
+import type { VuesticOptions } from '../types'
 
 function getGlobalProperty (app, key) {
   return app.config.globalProperties[key]
 }
 
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(async (nuxtApp) => {
   const { vueApp: app } = nuxtApp
 
   // It's important to use `, because TS will compile qoutes to " and JSON will not be parsed...
-  const { config }: VuesticOptions = JSON.parse(`<%= options.value %>`)
-  const userConfig = configFromFile || config
+  const moduleOptions: VuesticOptions = JSON.parse(`<%= options.value %>`)
+  const themeCookie = useCookie(moduleOptions.themeCookieKey)
+  const userConfig = configFromFile || moduleOptions.config || {}
+  const configWithColors: PartialGlobalConfig = {
+    ...userConfig,
+    colors: {
+      currentPresetName: themeCookie.value || userConfig.colors?.currentPresetName,
+      ...userConfig.colors,
+    }
+  }
 
   /** Use tree-shaking by default and do not register any component. Components will be registered by nuxt in use-components. */
   app.use(createVuesticEssential({
-    config: { ...userConfig, routerComponent: markRaw(NuxtLink) },
-    // TODO: Would be nice to tree-shake plugins, but they're small so we don't cant for now.
+    config: { ...configWithColors, routerComponent: markRaw(NuxtLink) },
+    // TODO: Would be nice to tree-shake plugins, but they're small so we can let it be for now.
     // Should be synced with create-vuestic.ts
     plugins: {
       BreakpointConfigPlugin,
@@ -66,4 +73,10 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
     }))
   }
+
+  // Watch for preset name change and update cookie
+  const { globalConfig } = getGlobalProperty(app, '$vaConfig') as { globalConfig: Ref<GlobalConfig> }
+  watch(() => globalConfig.value.colors.currentPresetName, (newTheme) => {
+    themeCookie.value = newTheme
+  }, { immediate: true })
 })
diff --git a/packages/nuxt/src/types.ts b/packages/nuxt/src/types.ts
index 63fdfefe9e..a1c0e66fbb 100644
--- a/packages/nuxt/src/types.ts
+++ b/packages/nuxt/src/types.ts
@@ -32,11 +32,12 @@ export interface VuesticOptions {
    * @see https://vuestic.dev/en/getting-started/installation#assets-installation
    */
   fonts: boolean
-}
 
-/** Declare Vuestic module options in NuxtConfig */
- declare module '@nuxt/schema' {
-  interface NuxtConfig {
-    vuestic?: Partial<VuesticOptions>
-  }
+
+  /**
+   * Vuestic will automatically store its theme in cookies. If you want to change the key, you can do it here.
+   * 
+   * @default 'vuestic-theme'
+   */
+  themeCookieKey: string
 }
diff --git a/packages/ui/src/components/va-tabs/VaTabs.demo.vue b/packages/ui/src/components/va-tabs/VaTabs.demo.vue
index 7148e897ab..90a240cdc0 100644
--- a/packages/ui/src/components/va-tabs/VaTabs.demo.vue
+++ b/packages/ui/src/components/va-tabs/VaTabs.demo.vue
@@ -388,30 +388,36 @@
         <template #tabs>
           <va-tab
             v-for="title in tabDynamic"
-            :name="title"
             :key="title"
           >
             {{ title }}
           </va-tab>
         </template>
       </va-tabs>
-      Value: {{ tabValue2 }}
-      <div>
-        <button @click="tabDynamic.push(`Tab #${tabDynamic.length + 1}`)">
+      Value: {{ tabDynamic[tabValue2] }}
+      <div class="mt-2">
+        <va-button
+          preset="primary"
+          @click="tabDynamic = [...tabDynamic, `Tab #${tabDynamic.length + 1}`]"
+        >
           Add tab
-        </button>
+        </va-button>
 
-        <input style="width: 50px;" v-model="deletedTabIndex" placeholder="Index">
-        <button @click="tabDynamic.splice(deletedTabIndex || 0,1)">
+        <va-input class="ml-10 mr-1" style="width: 70px;" v-model="deletedTabIndex" placeholder="Index" />
+        <va-button
+          preset="primary"
+          :disabled="!deletedTabIndex"
+          @click="removeTab"
+        >
           Remove tab
-        </button>
+        </va-button>
       </div>
     </VbCard>
   </VbDemo>
 </template>
 
 <script>
-import { VaCard, VaCardTitle, VaCardContent, VaIcon } from '../index'
+import { VaCard, VaCardTitle, VaCardContent, VaIcon, VaButton, VaInput } from '../index'
 import { VaTabs, VaTab } from './index'
 
 const TABS_WITH_CONTENT = [
@@ -429,6 +435,8 @@ export default {
     VaCard,
     VaCardTitle,
     VaCardContent,
+    VaButton,
+    VaInput,
   },
 
   data () {
@@ -437,7 +445,7 @@ export default {
       tabDynamic: ['One', 'Two', 'Three'],
       tabValue: 2,
       tabValue1: 'One',
-      tabValue2: 'One',
+      tabValue2: 0,
       tabValue3: 0,
       tabValue4: 'share',
       tabValueWithPagination: 'Four',
@@ -455,5 +463,25 @@ export default {
       return this.tabsWithContent.find(tab => tab.title === this.tabsWithContentValue)
     },
   },
+  methods: {
+    removeTab () {
+      const index = Number(this.deletedTabIndex)
+      if (index < this.tabDynamic.length) {
+        this.tabDynamic = [
+          ...this.tabDynamic.slice(0, index),
+          ...this.tabDynamic.slice(index + 1),
+        ]
+
+        if (this.tabValue2 > this.tabDynamic.length - 1) {
+          this.tabValue2 = this.tabDynamic.length - 1
+          return
+        }
+
+        if (this.tabValue2 >= index) {
+          this.tabValue2 = this.tabValue2 - 1
+        }
+      }
+    },
+  },
 }
 </script>
diff --git a/packages/ui/src/components/va-tabs/VaTabs.vue b/packages/ui/src/components/va-tabs/VaTabs.vue
index ace0c0e1b2..3408049df1 100644
--- a/packages/ui/src/components/va-tabs/VaTabs.vue
+++ b/packages/ui/src/components/va-tabs/VaTabs.vue
@@ -446,6 +446,7 @@ export default defineComponent({
 .va-tabs {
   display: var(--va-tabs-display);
   align-items: var(--va-tabs-align-items-horizontal);
+  flex-direction: column;
   position: relative;
   font-family: var(--va-font-family);
 
@@ -454,6 +455,7 @@ export default defineComponent({
     contain: content;
     display: flex;
     flex: 1 1 auto;
+    width: 100%;
   }
 
   .va-tabs__pagination {
@@ -510,9 +512,11 @@ export default defineComponent({
 
   &--vertical {
     align-items: var(--va-tabs-align-items-vertical);
+    flex-direction: row;
 
     .va-tabs__wrapper {
       flex: 0 0 auto;
+      width: unset;
     }
 
     .va-tabs__container {