diff --git a/packages/docs/components/layout/Sidebar.vue b/packages/docs/components/layout/Sidebar.vue
index c6923268e7..a46811898f 100644
--- a/packages/docs/components/layout/Sidebar.vue
+++ b/packages/docs/components/layout/Sidebar.vue
@@ -168,6 +168,8 @@ export default defineComponent({
 @import "@/assets/smart-grid.scss";
 
 .sidebar {
+  --va-sidebar-transition: none;
+
   &__collapse-custom-header {
     position: relative;
     padding: 1rem 1.2rem;
diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
index f1cbc2b467..75a3c0b1f8 100644
--- a/packages/docs/layouts/default.vue
+++ b/packages/docs/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="docs-layout" :key="currentPresetName + isMounted">
+  <div class="docs-layout" :key="isMounted + ''">
     <div v-if="!isMounted" class="docs-layout__loader" />
     <div
       ref="header"
diff --git a/packages/docs/page-config/ui-elements/config/examples/Colors.vue b/packages/docs/page-config/ui-elements/config/examples/Colors.vue
new file mode 100644
index 0000000000..24f3c056b4
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/config/examples/Colors.vue
@@ -0,0 +1,21 @@
+<template>
+  <VaConfig :colors="{ variables: { primary: color }, currentPresetName: presetName }">
+    <VaCard>
+      <VaCardContent class="flex flex-col gap-2">
+        <VaColorInput v-model="color" />
+        <VaButton @click="presetName === 'light' ? presetName = 'dark' : presetName = 'light'">Toggle theme</VaButton>
+        <VaInput label="login" />
+        <VaInput label="password" type="password" />
+        <div class="flex gap-2">
+          <VaButton>login</VaButton>
+          <VaButton color="secondary">register</VaButton>
+        </div>        
+      </VaCardContent>
+    </VaCard>
+  </VaConfig>
+</template>
+
+<script setup lang="ts">
+  const color = ref('#f0f')
+  const presetName = ref('light')
+</script>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/config/examples/Components.vue b/packages/docs/page-config/ui-elements/config/examples/Components.vue
new file mode 100644
index 0000000000..7596f5a5b6
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/config/examples/Components.vue
@@ -0,0 +1,41 @@
+<template>
+  <va-button-toggle
+    v-model="config"
+    :options="[
+      {
+        label: 'Outline',
+        value: {
+          VaInput: { outline: true },
+          VaSelect: { outline: true },
+          VaButton: { preset: 'secondary' },
+        },
+      },
+      {
+        label: 'Solid',
+        value: {
+          VaInput: { bordered: true },
+          VaSelect: { bordred: true },
+        },
+      },
+    ]"
+    class="mb-4"
+  />
+
+  <va-config :components="config">
+    <va-card>
+      <va-card-title>My Card</va-card-title>
+      <va-card-content class="flex gap-2 flex-col">
+        <va-input label="Login" />
+        <va-input label="Password" />
+        <va-select :options="['one', 'two', 'three']" label="Country" />
+      </va-card-content>
+      <va-card-actions align="right">
+        <va-button>My Button</va-button>
+      </va-card-actions>
+    </va-card>
+  </va-config>
+</template>
+
+<script setup lang="ts">
+const config = ref();
+</script>
diff --git a/packages/docs/page-config/ui-elements/config/examples/Default.vue b/packages/docs/page-config/ui-elements/config/examples/Default.vue
deleted file mode 100644
index dd1355a2b5..0000000000
--- a/packages/docs/page-config/ui-elements/config/examples/Default.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="flex gap-6 flex-wrap justify-center">
-    <example-card />
-
-    <va-config :components="config1">
-      <example-card />
-    </va-config>
-
-    <va-config :components="config2">
-      <example-card />
-    </va-config>
-  </div>
-
-  <div class="flex gap-2 mt-8 items-center flex-wrap">
-    Select color
-    <va-color-input
-      v-model="color"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed } from 'vue'
-  import { useColors } from 'vuestic-ui'
-  import ExampleCard from './ExampleCard.vue'
-
-  const color = ref('#ef476f')
-
-  const { getTextColor } = useColors()
-  const textColor = computed(() => getTextColor(color.value))
-
-  const config1 = computed(() => ({
-    VaButton: { preset: 'primary', color: color.value, round: true, block: true },
-    VaInput: { color: color.value, bordered: true },
-    VaSelect: { color: color.value, bordered: true },
-    VaCard: { stripeColor: color.value, stripe: true },
-  }))
-
-  const config2 = computed(() => ({
-    VaButton: { color: 'warning', block: true, icon: 'thumb_up' },
-    VaCard: { color: color.value, gradient: true },
-    VaInput: { color: textColor.value, outline: true },
-    VaSelect: { color: textColor.value, outline: true },
-  }))
-</script>
diff --git a/packages/docs/page-config/ui-elements/config/examples/Internalization.vue b/packages/docs/page-config/ui-elements/config/examples/Internalization.vue
new file mode 100644
index 0000000000..516024276b
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/config/examples/Internalization.vue
@@ -0,0 +1,8 @@
+<template>
+  <VaConfig :i18n="{
+    dropzone: 'Перетягніть файли сюди або натисніть, щоб вибрати',
+    uploadFile: 'Завантажити',
+  }">
+      <VaFileUpload dropzone />
+  </VaConfig>
+</template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/config/index.ts b/packages/docs/page-config/ui-elements/config/index.ts
index 7e6f582876..8e2dfbe6cf 100644
--- a/packages/docs/page-config/ui-elements/config/index.ts
+++ b/packages/docs/page-config/ui-elements/config/index.ts
@@ -8,7 +8,12 @@ export default definePageConfig({
 
     block.subtitle("all.examples"),
 
-    block.example("Default"),
+    block.example("Components"),
+    block.link('config.examples.components.see', '/services/components-config'),
+    // block.example("Colors"),
+    // block.link('config.examples.colors.see', '/services/colors-config'),
+    block.example("Internalization"),
+    block.link('config.examples.internalization.see', '/services/i18n'),
 
     block.subtitle("all.api"),
     block.api("VaConfig", apiOptions),
diff --git a/packages/docs/page-config/ui-elements/config/translation/en.json b/packages/docs/page-config/ui-elements/config/translation/en.json
index bb7281844a..a128be2249 100644
--- a/packages/docs/page-config/ui-elements/config/translation/en.json
+++ b/packages/docs/page-config/ui-elements/config/translation/en.json
@@ -3,9 +3,20 @@
   "description": "`VaConfig` is a utility component that allows you to configure components (provide specific default prop values to components) locally in a section of your application. This is useful when you have a local scope where your components have props other than global ones.",
   "link": "Find out more about components config",
   "examples": {
-    "default": {
-      "title": "Default usage",
-      "text": "By default, `VaConfig` does nothing. You must provide the `components` prop with the `vuestic` components configuration."
+    "components": {
+      "title": "Components",
+      "text": "By default, `VaConfig` does nothing. You must provide the `components` prop with the `vuestic` components configuration.",
+      "see": "Learn more about Components Config"
+    },
+    "colors": {
+      "title": "Colors",
+      "text": "You can configure colors for components. For example, you can change color whole preset name.",
+      "see": "Learn more about Colors Config"
+    },
+    "internalization": {
+      "title": "i18n",
+      "text": "You can configure i18n translations for components.",
+      "see": "Learn more about i18n Config"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/components/va-button-toggle/types.ts b/packages/ui/src/components/va-button-toggle/types.ts
index d607aa85d1..03480de225 100644
--- a/packages/ui/src/components/va-button-toggle/types.ts
+++ b/packages/ui/src/components/va-button-toggle/types.ts
@@ -1,5 +1,7 @@
 export type ButtonOption = {
   icon?: string,
   iconRight?: string
-  [prop: string]: string | number | boolean | undefined
+  label?: string,
+  value?: unknown,
+  [prop: string]: any
 }
diff --git a/packages/ui/src/components/va-color-input/VaColorInput.vue b/packages/ui/src/components/va-color-input/VaColorInput.vue
index 2e09088b5e..8ccd3687d7 100644
--- a/packages/ui/src/components/va-color-input/VaColorInput.vue
+++ b/packages/ui/src/components/va-color-input/VaColorInput.vue
@@ -90,7 +90,6 @@ export default defineComponent({
 
   &__input {
     margin-bottom: 0;
-    margin-left: 0.25rem;
     min-width: 5.6rem;
 
     &__pointer {
diff --git a/packages/ui/src/components/va-config/VaConfig.vue b/packages/ui/src/components/va-config/VaConfig.vue
index f949d1543e..01e598798c 100644
--- a/packages/ui/src/components/va-config/VaConfig.vue
+++ b/packages/ui/src/components/va-config/VaConfig.vue
@@ -1,7 +1,8 @@
 <template>
-  <CssVarsRenderer v-bind="$attrs">
+  <CssVarsRenderer v-if="doRenderCssVars" v-bind="$attrs">
     <slot />
   </CssVarsRenderer>
+  <slot v-else />
 </template>
 
 <script lang="ts">
@@ -39,8 +40,8 @@ export default defineComponent({
   props: {
     ...useComponentPresetProp,
     components: { type: Object as PropType<ComponentConfig>, default: () => ({}) },
-    colors: { type: Object as PropType<PartialGlobalConfig['colors']>, default: () => ({}) },
-    i18n: { type: Object as PropType<PartialGlobalConfig['i18n']>, default: () => ({}) },
+    colors: { type: Object as PropType<PartialGlobalConfig['colors']> },
+    i18n: { type: Object as PropType<PartialGlobalConfig['i18n']> },
   },
   inheritAttrs: false,
   setup (props) {
@@ -51,14 +52,26 @@ export default defineComponent({
     provideLocalConfig(nextChain)
 
     const newConfig = useGlobalConfigProvider(computed(() => {
-      return {
-        colors: props.colors,
-        i18n: props.i18n,
+      const config = {} as any
+
+      if (props.colors) {
+        config.colors = props.colors
+      }
+
+      if (props.i18n) {
+        config.i18n = props.i18n
       }
+
+      return config
     }))
 
+    const doRenderCssVars = computed(() => {
+      return Boolean(props.colors)
+    })
+
     return {
       newConfig,
+      doRenderCssVars,
     }
   },
 })
diff --git a/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts b/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts
index 1e57284188..d6f6715b22 100644
--- a/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts
+++ b/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts
@@ -15,7 +15,16 @@ export const useGlobalConfigProvider = (next: Ref<PartialGlobalConfig>) => {
       colors: makeColorsConfig(gcCopy.colors),
     }
 
-    return mergeDeep(compiledCopy, next.value) as GlobalConfig
+    const config = mergeDeep(compiledCopy, next.value) as GlobalConfig
+
+    // Variables is a virtual property, so we need to merge it manually after preset in chosen!
+    if (next.value.colors?.variables) {
+      Object.keys(next.value.colors.variables).forEach((key) => {
+        config.colors.variables[key] = next.value.colors!.variables![key]!
+      })
+    }
+
+    return config
   })
 
   provide(GLOBAL_CONFIG, {
diff --git a/packages/ui/src/services/color/config/make-config.ts b/packages/ui/src/services/color/config/make-config.ts
index 39bb2c66d3..e2bc616943 100644
--- a/packages/ui/src/services/color/config/make-config.ts
+++ b/packages/ui/src/services/color/config/make-config.ts
@@ -1,11 +1,11 @@
 import { ColorConfig } from '../types'
 
 export const makeColorsConfig = (values: Omit<ColorConfig, 'variables'>): ColorConfig => ({
+  ...values,
   get variables () {
     return this.presets[this.currentPresetName]
   },
   set variables (value) {
     this.presets[this.currentPresetName] = value
   },
-  ...values,
 })