diff --git a/bun.lock b/bun.lock
index 9c9ca73..e766562 100644
--- a/bun.lock
+++ b/bun.lock
@@ -3,6 +3,9 @@
   "workspaces": {
     "": {
       "name": "vue3.dev",
+      "dependencies": {
+        "tinycolor2": "1.6.0",
+      },
       "devDependencies": {
         "@babel/core": "^7.26.10",
         "@bulvar/bulma": "^0.11.24",
@@ -1603,6 +1606,8 @@
 
     "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
 
+    "tinycolor2": ["tinycolor2@1.6.0", "", {}, "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="],
+
     "tinyglobby": ["tinyglobby@0.2.12", "", { "dependencies": { "fdir": "^6.4.3", "picomatch": "^4.0.2" } }, "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww=="],
 
     "to-data-view": ["to-data-view@2.0.0", "", {}, "sha512-RGEM5KqlPHr+WVTPmGNAXNeFEmsBnlkxXaIfEpUYV0AST2Z5W1EGq9L/MENFrMMmL2WQr1wjkmZy/M92eKhjYA=="],
diff --git a/package.json b/package.json
index 1a2c9c5..de9a919 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,8 @@
     "vue": "^3.5.13",
     "vue-composable": "^1.0.0-beta.24",
     "vue-i18n": "^9.1.10",
-    "vue-router": "^4.0.16"
+    "vue-router": "^4.0.16",
+    "tinycolor2": "1.6.0"
   },
   "engines": {
     "bun": ">=1.0.0"
diff --git a/rollup.config.js b/rollup.config.js
index c27395d..43f723e 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -145,9 +145,10 @@ const config = [
       replace({
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
         'process.env.VUE_APP_VERSION_NUMBER': JSON.stringify(env.parsed.VUE_APP_VERSION_NUMBER),
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
         __VUE_OPTIONS_API__: false,
         __VUE_PROD_DEVTOOLS__: false,
-        preventAssignment: true
+        preventAssignment: true,
       }),
       json(),
       alias({ entries: { vue: '@vue/runtime-dom' } }),
@@ -181,13 +182,13 @@ const config = [
 
       prod && terser({ format: { comments: false } }),
       prod &&
-      gzip({
-        fileName: '.br',
-        customCompression: content =>
-          zlib.brotliCompressSync(Buffer.from(content), {
-            params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 },
-          }),
-      }),
+        gzip({
+          fileName: '.br',
+          customCompression: content =>
+            zlib.brotliCompressSync(Buffer.from(content), {
+              params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 },
+            }),
+        }),
       html({
         publicPath: env.parsed.BASE_URL,
         title: 'Vue3-ui',
@@ -195,12 +196,12 @@ const config = [
       }),
 
       watch &&
-      serve({
-        host: '0.0.0.0',
-        contentBase: 'dist',
-        historyApiFallback: true,
-        port: 5000,
-      }),
+        serve({
+          host: '0.0.0.0',
+          contentBase: 'dist',
+          historyApiFallback: true,
+          port: 5000,
+        }),
 
       watch && livereload({ watch: 'dist' }),
       prod && analyzer(),
diff --git a/src/components/ComponentShowcase.vue b/src/components/ComponentShowcase.vue
new file mode 100644
index 0000000..1157311
--- /dev/null
+++ b/src/components/ComponentShowcase.vue
@@ -0,0 +1,121 @@
+<script>
+import {
+  VField,
+  VInput,
+  VButton,
+  VCard,
+  VCardContent,
+  VCardHeader,
+  VMenu,
+  VMenuList,
+  VMenuItem,
+  VTag,
+  VTabs,
+  VTab
+} from '@pathscale/vue3-ui'
+import { ref } from 'vue'
+
+export default {
+  name: 'ComponentShowcase',
+  components: {
+    VField,
+    VInput,
+    VButton,
+    VCard,
+    VCardContent,
+    VCardHeader,
+    VMenu,
+    VMenuList,
+    VMenuItem,
+    VTag,
+    VTabs,
+    VTab
+  },
+  setup() {
+    const activeTab = ref(0)
+    return { activeTab }
+  }
+}
+</script>
+
+<template>
+  <h2 class="title mt-6">Component Showcase</h2>
+  <div class="columns mt-4">
+    <div class="column">
+      <v-field class="mb-4">
+        <v-field addons>
+          <v-input placeholder="Search..." />
+          <v-button type="is-primary">
+            Search
+          </v-button>
+        </v-field>
+      </v-field>
+
+      <v-menu class="mb-4">
+        <v-menu-list label="Navigation">
+          <v-menu-item label="Home" :active="true" />
+          <v-menu-item label="Products" expanded>
+            <v-menu-item label="Electronics" />
+            <v-menu-item label="Clothing" />
+            <v-menu-item label="Books" />
+          </v-menu-item>
+          <v-menu-item label="About">
+            <v-menu-item label="Company" />
+            <v-menu-item label="Team" />
+            <v-menu-item label="Contact" />
+          </v-menu-item>
+        </v-menu-list>
+        <v-menu-list label="Account">
+          <v-menu-item label="Settings" />
+          <v-menu-item label="Logout" />
+        </v-menu-list>
+      </v-menu>
+
+      <div class="tags">
+        <v-tag type="is-primary" class="mr-2">Primary</v-tag>
+        <v-tag type="is-success" class="mr-2">Success</v-tag>
+        <v-tag type="is-warning" class="mr-2">Warning</v-tag>
+        <v-tag type="is-danger">Danger</v-tag>
+      </div>
+    </div>
+
+    <div class="column">
+      <v-card>
+        <v-card-content>
+          <v-field label="Full Name">
+            <v-input placeholder="John Doe" />
+          </v-field>
+          <v-field label="Email">
+            <v-input type="email" placeholder="john@example.com" />
+          </v-field>
+          <v-field label="Password">
+            <v-input type="password" placeholder="••••••••" password-reveal />
+          </v-field>
+          <v-field>
+            <v-button type="is-primary" expanded>Create Account</v-button>
+          </v-field>
+        </v-card-content>
+      </v-card>
+    </div>
+
+    <div class="column">
+      <v-tabs v-model="activeTab" type="is-boxed">
+        <v-tab label="Overview">
+          <div class="p-4">
+            <p>Overview content goes here</p>
+          </div>
+        </v-tab>
+        <v-tab label="Details">
+          <div class="p-4">
+            <p>Details content goes here</p>
+          </div>
+        </v-tab>
+        <v-tab label="Settings">
+          <div class="p-4">
+            <p>Settings content goes here</p>
+          </div>
+        </v-tab>
+      </v-tabs>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/Snippet.vue b/src/components/sections/Snippet.vue
index 8fc7e5a..f86a525 100644
--- a/src/components/sections/Snippet.vue
+++ b/src/components/sections/Snippet.vue
@@ -22,7 +22,7 @@ export default {
           if (binding.value) {
             target.innerHTML = binding.value
           }
-          hljs.highlightBlock(target)
+          hljs.highlightElement(target)
         }
       },
       componentUpdated(el, binding) {
@@ -30,7 +30,7 @@ export default {
         for (const target of targets) {
           if (binding.value) {
             target.innerHTML = binding.value
-            hljs.highlightBlock(target)
+            hljs.highlightElement(target)
           }
         }
       }
diff --git a/src/docs/components/showcases/Checkbox.vue b/src/docs/components/showcases/Checkbox.vue
index a1c271d..6968732 100644
--- a/src/docs/components/showcases/Checkbox.vue
+++ b/src/docs/components/showcases/Checkbox.vue
@@ -22,11 +22,11 @@ export default {
       Active checkbox
     </v-checkbox>
     <br />
-    <v-checkbox indeterminate>
+    <v-checkbox indeterminate v-model="value">
       Indeterminate checkbox
     </v-checkbox>
     <br />
-    <v-checkbox disabled>
+    <v-checkbox disabled v-model="value">
       Disabled checkbox
     </v-checkbox>
   </v-field>
diff --git a/src/docs/components/showcases/Toast/Default.vue b/src/docs/components/showcases/Toast/Default.vue
index a2a9c38..1b422ff 100644
--- a/src/docs/components/showcases/Toast/Default.vue
+++ b/src/docs/components/showcases/Toast/Default.vue
@@ -49,19 +49,23 @@
             v-model="state.options.duration"
             min="1000"
             max="10000"
-            :disabled="state.options.duration === false" />
-
-          <v-checkbox @change="changeDuration">
-            Disable duration
+            :disabled="state.options.durationDisabled" />
+          <v-checkbox
+            :model-value="state.options.durationDisabled"
+            @update:model-value="(checked) => {
+              state.options.durationDisabled = checked
+              if (!checked) state.options.duration = 4000
+            }">
+          Disable duration
           </v-checkbox>
         </v-field>
         <v-field>
-          <v-checkbox checked @change="state.options.dismissible = $event.target.checked">
+          <v-checkbox checked v-model="state.options.dismissible">
             Dismissible on click
           </v-checkbox>
         </v-field>
         <v-field>
-          <v-checkbox @change="state.options.queue = $event.target.checked">
+          <v-checkbox v-model="state.options.queue">
             Enqueue
           </v-checkbox>
         </v-field>
@@ -69,7 +73,7 @@
           <v-input v-model="state.options.maxToasts" type="number" placeholder="false" />
         </v-field>
         <v-field>
-          <v-checkbox checked @change="state.options.pauseOnHover = $event.target.checked">
+          <v-checkbox checked v-model="state.options.pauseOnHover">
             Pause on hover
           </v-checkbox>
         </v-field>
@@ -175,6 +179,10 @@ export default {
       message: "Bulma's notification implemented as a toast plugin.",
       options: {
         duration: 4000,
+        dismissible: true,
+        queue: false,
+        pauseOnHover: true,
+        durationDisabled: false
       },
     })
 
@@ -217,11 +225,7 @@ export default {
       })
     }
 
-    function changeDuration(e) {
-      state.options.duration = !e.target.checked ? 4000 : false
-    }
-
-    return { state, positions, hasOptions, toast, changeDuration }
+    return { state, positions, hasOptions, toast }
   },
 }
 </script>
diff --git a/src/pages/Design/Colors.vue b/src/pages/Design/Colors.vue
new file mode 100644
index 0000000..fdec97f
--- /dev/null
+++ b/src/pages/Design/Colors.vue
@@ -0,0 +1,192 @@
+<script>
+import { ref, computed, watchEffect } from 'vue'
+import {
+  VField,
+  VInput,
+  VSwitch,
+  VColumns,
+  VColumn
+} from '@pathscale/vue3-ui'
+import ComponentShowcase from '../../components/ComponentShowcase.vue'
+import tinycolor from 'tinycolor2'
+
+export default {
+  name: 'DevPageColors',
+  components: {
+    VField,
+    VInput,
+    VSwitch,
+    VColumns,
+    VColumn,
+    ComponentShowcase
+  },
+  setup() {
+    const theme = ref('light')
+    const accent = ref('#3D63DD')
+    const gray = ref('#8B8D98')
+    const background = ref('#FFFFFF')
+
+    const generateColorScale = (baseColor, steps) => {
+      const color = tinycolor(baseColor)
+      const scale = []
+
+      for (let i = 0; i < steps; i++) {
+        if (i < 2) {
+          scale.push(color.clone().lighten(60 - (i * 20)).toHexString())
+        } else if (i < 5) {
+          scale.push(color.clone().lighten(35 - ((i - 2) * 12)).toHexString())
+        } else if (i < 8) {
+          scale.push(color.clone().lighten(15 - ((i - 5) * 8)).toHexString())
+        } else if (i < 10) {
+          scale.push(color.clone().darken((i - 8) * 12).toHexString())
+        } else {
+          scale.push(color.clone().darken(25 + ((i - 10) * 12)).toHexString())
+        }
+      }
+      return scale
+    }
+
+    const colorScales = computed(() => {
+      const accentScale = generateColorScale(accent.value, 12)
+      const grayScale = generateColorScale(gray.value, 12)
+
+      const createCategory = (start, length, lightScale) => {
+        const scale = theme.value === 'light' ? lightScale : [...lightScale].reverse()
+        return Array.from({ length }, (_, i) => ({
+          id: start + i,
+          light: lightScale[start + i - 1],
+          dark: scale[start + i - 1]
+        }))
+      }
+
+      return {
+        accent: {
+          backgrounds: createCategory(1, 2, accentScale),
+          interactive: createCategory(3, 3, accentScale),
+          borders: createCategory(6, 3, accentScale),
+          solid: createCategory(9, 2, accentScale),
+          accessible: createCategory(11, 2, accentScale)
+        },
+        gray: {
+          backgrounds: createCategory(1, 2, grayScale),
+          interactive: createCategory(3, 3, grayScale),
+          borders: createCategory(6, 3, grayScale),
+          solid: createCategory(9, 2, grayScale),
+          accessible: createCategory(11, 2, grayScale)
+        }
+      }
+    })
+
+    const applyBulmaColorVars = (colorScales, theme = 'light') => {
+      const root = document.documentElement
+
+      const get = (scale, category, index) =>
+        colorScales[scale][category][index]?.[theme]
+
+      const vars = {
+        // Grays → Bulma core grays
+        '--black': get('gray', 'accessible', 1),
+        '--black-bis': get('gray', 'accessible', 0),
+        '--black-ter': get('gray', 'solid', 1),
+        '--grey-darker': get('gray', 'solid', 0),
+        '--grey-dark': get('gray', 'borders', 2),
+        '--grey': get('gray', 'borders', 1),
+        '--grey-light': get('gray', 'borders', 0),
+        '--grey-lighter': get('gray', 'interactive', 2),
+        '--grey-lightest': get('gray', 'interactive', 1),
+        '--white-ter': get('gray', 'interactive', 0),
+        '--white-bis': get('gray', 'backgrounds', 1),
+        '--white': get('gray', 'backgrounds', 0),
+
+        // Accent → Bulma semantic colors
+        '--orange': get('accent', 'interactive', 2),
+        '--yellow': get('accent', 'interactive', 1),
+        '--green': get('accent', 'borders', 0),
+        '--turquoise': get('accent', 'borders', 1),
+        '--cyan': get('accent', 'borders', 0),
+        '--blue': get('accent', 'borders', 2),
+        '--purple': get('accent', 'solid', 1),
+        '--red': get('accent', 'accessible', 0),
+
+        // Primary roles
+        '--primary': get('accent', 'solid', 0),
+        '--primary-light': get('accent', 'interactive', 1),
+        '--primary-dark': get('accent', 'accessible', 0),
+        '--link': get('accent', 'borders', 1),
+        '--info': get('accent', 'interactive', 0)
+      }
+
+      for (const [key, value] of Object.entries(vars)) {
+        if (value) {
+          root.style.setProperty(key, value)
+        }
+      }
+    }
+
+    watchEffect(() => {
+      applyBulmaColorVars(colorScales.value, theme.value)
+    })
+
+
+    return {
+      theme,
+      accent,
+      gray,
+      background,
+      colorScales,
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="section">
+    <h1 class="title">
+      Color Palette
+    </h1>
+
+    <div class="block mt-5">
+      <v-switch v-model="theme" type="is-success" passive-type="is-success" true-value="dark" false-value="light">
+        {{ theme === 'light' ? '🌞 Light' : '🌙 Dark' }}
+      </v-switch>
+    </div>
+
+    <div class="columns is-variable is-4 mt-5">
+      <div class="column">
+        <v-field label="Accent">
+          <v-input v-model="accent" type="text" color="is-primary" />
+        </v-field>
+      </div>
+
+      <div class="column">
+        <v-field label="Gray">
+          <v-input v-model="gray" type="text" color="is-primary" />
+        </v-field>
+      </div>
+
+      <div class="column">
+        <v-field label="Background">
+          <v-input v-model="background" type="text" color="is-primary" />
+        </v-field>
+      </div>
+    </div>
+    <v-columns v-for="(scale, scaleName) in colorScales" :key="scaleName">
+      <v-column hcentered v-for="(colors, category) in scale" :key="category" narrow>
+        <span v-if="scaleName === 'accent'" class="mb-4 is-capitalized">{{ category }}</span>
+        <div class="columns">
+          <v-column narrow v-for="color in colors" :key="color.id" class="column">
+            <div class="box has-text-centered p-4" :style="{
+              backgroundColor: theme === 'light' ? color.light : color.dark,
+              width: '80px',
+              minWidth: '80px'
+            }">
+              <span class="has-text-white has-text-weight-bold is-size-4">{{ color.id }}</span>
+            </div>
+          </v-column>
+        </div>
+      </v-column>
+    </v-columns>
+
+    <component-showcase />
+  </div>
+</template>
diff --git a/src/pages/Documentation.vue b/src/pages/Documentation.vue
index 438cfcb..39769ac 100644
--- a/src/pages/Documentation.vue
+++ b/src/pages/Documentation.vue
@@ -55,43 +55,23 @@ export default {
         <div class="pt-6 px-5">
           <v-menu>
             <v-menu-list label="Getting Started">
-              <v-menu-item
-                v-if="isDevelopment"
-                label="Playground"
-                :active="current.playground"
-                @click="redirect('playground')"/>
-              <v-menu-item
-                label="Installation"
-                :active="current.installation"
-                expanded
-                @click="redirect('installation')"/>
+              <v-menu-item v-if="isDevelopment" label="Playground" :active="current.playground"
+                @click="redirect('playground')" />
+              <v-menu-item label="Installation" :active="current.installation" expanded
+                @click="redirect('installation')" />
               <v-menu-item label="Design" expanded>
                 <v-menu-item label="Bulma" :active="current.bulma" @click="redirect('bulma')" />
-                <v-menu-item
-                  label="Theming"
-                  :active="current.theming"
-                  @click="redirect('theming')"/>
+                <v-menu-item label="Theming" :active="current.theming" @click="redirect('theming')" />
+                <v-menu-item label="Colors" :active="current.colors" @click="redirect('colors')" />
                 <v-menu-item label="Layout" expanded>
-                  <v-menu-item
-                    label="Columns"
-                    :active="current.columns"
-                    @click="redirect('columns')"/>
-                  <v-menu-item
-                    label="Sidebar"
-                    :active="current.sidebar"
-                    @click="redirect('sidebar')"/>
+                  <v-menu-item label="Columns" :active="current.columns" @click="redirect('columns')" />
+                  <v-menu-item label="Sidebar" :active="current.sidebar" @click="redirect('sidebar')" />
                   <v-menu-item label="Media" :active="current.media" @click="redirect('media')" />
                 </v-menu-item>
               </v-menu-item>
               <v-menu-item label="Appstate-fast" expanded>
-                <v-menu-item
-                  label="Introducing"
-                  :active="current.introducing"
-                  @click="redirect('introducing')"/>
-                <v-menu-item
-                  label="Modules"
-                  :active="current.modules"
-                  @click="redirect('modules')"/>
+                <v-menu-item label="Introducing" :active="current.introducing" @click="redirect('introducing')" />
+                <v-menu-item label="Modules" :active="current.modules" @click="redirect('modules')" />
               </v-menu-item>
               <v-menu-item label="Icons" :active="current.icons" @click="redirect('icons')" />
             </v-menu-list>
@@ -107,43 +87,25 @@ export default {
                 <!-- <v-menu-item label="Image" @click="redirect('image')" :active="current.image" /> -->
                 <v-menu-item label="Avatar" :active="current.avatar" @click="redirect('avatar')" />
                 <!-- <v-menu-item label="Notifications" /> -->
-                <v-menu-item
-                  label="Progress"
-                  :active="current.progress"
-                  @click="redirect('progress')"/>
+                <v-menu-item label="Progress" :active="current.progress" @click="redirect('progress')" />
                 <v-menu-item label="Table" :active="current.table" @click="redirect('table')" />
                 <v-menu-item label="Tag" :active="current.tag" @click="redirect('tag')" />
-                <v-menu-item
-                  label="Tooltip"
-                  :active="current.tooltip"
-                  @click="redirect('tooltip')"/>
+                <v-menu-item label="Tooltip" :active="current.tooltip" @click="redirect('tooltip')" />
                 <v-menu-item label="Slider" :active="current.slider" @click="redirect('slider')" />
-                <v-menu-item
-                  label="Pagination"
-                  :active="current.pagination"
-                  @click="redirect('pagination')"/>
+                <v-menu-item label="Pagination" :active="current.pagination" @click="redirect('pagination')" />
               </v-menu-item>
               <v-menu-item label="Form" expanded>
                 <v-menu-item label="Input" :active="current.input" @click="redirect('input')" />
                 <v-menu-item label="Autocomplete" :active="current.autocomplete" @click="redirect('autocomplete')" />
 
-                <v-menu-item
-                  label="Validation"
-                  :active="current.validation"
-                  @click="redirect('validation')"/>
-                <v-menu-item
-                  label="Textarea"
-                  :active="current.textarea"
-                  @click="redirect('textarea')"/>
+                <v-menu-item label="Validation" :active="current.validation" @click="redirect('validation')" />
+                <v-menu-item label="Textarea" :active="current.textarea" @click="redirect('textarea')" />
                 <v-menu-item label="Select" :active="current.select" @click="redirect('select')" />
                 <!-- <v-menu-item label="Radio" /> -->
                 <v-menu-item label="Upload" :active="current.file" @click="redirect('upload')" />
                 <v-menu-item label="Switch" :active="current.switch" @click="redirect('switch')" />
                 <v-menu-item label="Field" :active="current.field" @click="redirect('field')" />
-                <v-menu-item
-                  label="Checkbox"
-                  :active="current.checkbox"
-                  @click="redirect('checkbox')"/>
+                <v-menu-item label="Checkbox" :active="current.checkbox" @click="redirect('checkbox')" />
 
                 <!--
  <v-menu-item
@@ -153,15 +115,9 @@ export default {
 -->
               </v-menu-item>
               <v-menu-item label="Components" expanded>
-                <v-menu-item
-                  label="Breadcrumb"
-                  :active="current.breadcrumb"
-                  @click="redirect('breadcrumb')"/>
+                <v-menu-item label="Breadcrumb" :active="current.breadcrumb" @click="redirect('breadcrumb')" />
                 <!-- <v-menu-item label="Card" @click="redirect('card')" :active="current.card" /> -->
-                <v-menu-item
-                  label="Dropdown"
-                  :active="current.dropdown"
-                  @click="redirect('dropdown')"/>
+                <v-menu-item label="Dropdown" :active="current.dropdown" @click="redirect('dropdown')" />
                 <v-menu-item label="Menu" :active="current.menu" @click="redirect('menu')" />
                 <!-- <v-menu-item label="Message" /> -->
                 <!-- <v-menu-item label="Modal" @click="redirect('modal')" :active="current.modal" /> -->
@@ -169,30 +125,18 @@ export default {
                 <!-- <v-menu-item label="Pagination" /> -->
                 <!-- <v-menu-item label="Panel" /> -->
                 <!-- <v-menu-item label="Collapse" /> -->
-                <v-menu-item
-                  label="Accordion"
-                  :active="current.accordion"
-                  @click="redirect('accordion')"/>
+                <v-menu-item label="Accordion" :active="current.accordion" @click="redirect('accordion')" />
                 <v-menu-item label="Tabs" :active="current.tabs" @click="redirect('tabs')" />
-                <v-menu-item
-                  label="Timeline"
-                  :active="current.timeline"
-                  @click="redirect('timeline')"/>
+                <v-menu-item label="Timeline" :active="current.timeline" @click="redirect('timeline')" />
 
                 <v-menu-item label="Steps" :active="current.steps" @click="redirect('steps')" />
                 <v-menu-item label="Chart" :active="current.chart" @click="redirect('chart')" />
               </v-menu-item>
             </v-menu-list>
             <v-menu-list label="Utilities">
-              <v-menu-item
-                label="Toast Notification"
-                :active="current.toast"
-                @click="redirect('toast')"/>
+              <v-menu-item label="Toast Notification" :active="current.toast" @click="redirect('toast')" />
 
-              <v-menu-item
-                label="Datagrid"
-                :active="current.datagrid"
-                @click="redirect('datagrid')"/>
+              <v-menu-item label="Datagrid" :active="current.datagrid" @click="redirect('datagrid')" />
             </v-menu-list>
           </v-menu>
         </div>
@@ -200,13 +144,8 @@ export default {
       <v-column class="pt-6">
         <v-breadcrumb>
           <v-breadcrumb-item tag="router-link" :to="{ name: 'home' }"> Home </v-breadcrumb-item>
-          <v-breadcrumb-item
-            v-for="item in paths"
-            :key="item"
-            class="is-capitalized"
-            tag="router-link"
-            :active="isActiveBreadcrumb(item)"
-            :to="{ name: item }">
+          <v-breadcrumb-item v-for="item in paths" :key="item" class="is-capitalized" tag="router-link"
+            :active="isActiveBreadcrumb(item)" :to="{ name: item }">
             {{ item }}
           </v-breadcrumb-item>
         </v-breadcrumb>
diff --git a/src/pages/index.ts b/src/pages/index.ts
index b34eac7..c9afb6e 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -10,6 +10,8 @@ export { default as Validation } from './Validation.vue'
 
 export { default as Theming } from './Design/Theming.vue'
 
+export { default as Colors } from './Design/Colors.vue'
+
 export { default as Bulma } from './Design/Bulma.vue'
 
 export { default as IntroducingAppState } from './AppState/Introducing.vue'
diff --git a/src/router/index.js b/src/router/index.js
index b1863b2..6e08c93 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -89,6 +89,12 @@ const routes = [
             component: Pages.Theming,
             meta: metaTags('Theming', 'Customize Vue3-ui and make it your own.'),
           },
+          {
+            name: 'colors',
+            path: 'colors',
+            component: Pages.Colors,
+            meta: metaTags('Colors', 'Colors are a great way to add personality to your application.'),
+          },
           {
             name: 'bulma',
             path: 'bulma',
diff --git a/src/theming/variables.js b/src/theming/variables.js
index 9f4f483..34dd113 100644
--- a/src/theming/variables.js
+++ b/src/theming/variables.js
@@ -1,27 +1,27 @@
 const variables = {
-  // fonts
-  '$family-primary': 'metroclean, Arial, sans-serif',
-  '$subtitle-family': 'metroclean, Arial, sans-serif',
-  '$title-family': 'metroclean, Arial, sans-serif',
-  '$weight-normal': '600', // TODO Must be work with 400 (normal)
+  // // fonts
+  // '$family-primary': 'metroclean, Arial, sans-serif',
+  // '$subtitle-family': 'metroclean, Arial, sans-serif',
+  // '$title-family': 'metroclean, Arial, sans-serif',
+  // '$weight-normal': '600', // TODO Must be work with 400 (normal)
 
-  $primary: '#111',
-  '$button-background-color': '#4958f5',
-  '$button-border-width': '2px',
-  '$button-color': '#dbd',
-  $danger: '#aa1e02',
-  '$footer-background-color': '#000',
-  '$footer-padding': '10px',
-  '$navbar-background-color': '#000',
-  '$navbar-dropdown-arrow': '#fff',
-  '$navbar-height': '2.5rem',
-  '$navbar-item-active-color': '#fff',
-  '$navbar-item-color': 'gray',
-  '$navbar-item-hover-color': '#fff',
-  '$navbar-item-hover-background-color': '#000',
-  '$navbar-item-img-max-height': '4rem',
-  '$section-padding': '0.5rem 1.5rem',
-  '$size-7': '0.875em',
+  // $primary: '#111',
+  // '$button-background-color': '#4958f5',
+  // '$button-border-width': '2px',
+  // '$button-color': '#dbd',
+  // $danger: '#aa1e02',
+  // '$footer-background-color': '#000',
+  // '$footer-padding': '10px',
+  // '$navbar-background-color': '#000',
+  // '$navbar-dropdown-arrow': '#fff',
+  // '$navbar-height': '2.5rem',
+  // '$navbar-item-active-color': '#fff',
+  // '$navbar-item-color': 'gray',
+  // '$navbar-item-hover-color': '#fff',
+  // '$navbar-item-hover-background-color': '#000',
+  // '$navbar-item-img-max-height': '4rem',
+  // '$section-padding': '0.5rem 1.5rem',
+  // '$size-7': '0.875em',
 }
 
 export default variables