diff --git a/packages/docs/page-config/services/colors-classes/code/setup-example.ts b/packages/docs/page-config/services/colors-classes/code/setup-example.ts
index c649e999d5..7fea1b45e8 100644
--- a/packages/docs/page-config/services/colors-classes/code/setup-example.ts
+++ b/packages/docs/page-config/services/colors-classes/code/setup-example.ts
@@ -1,15 +1,15 @@
-// main.js
+import { createApp } from 'vue'
 import { createVuestic } from 'vuestic-ui'
 import 'vuestic-ui/dist/vuestic-ui.css'
 
-createApp()
+createApp(App)
   .use(createVuestic({
     config: {
-      colors: { ... },
+      colors: { /*...*/ },
       colorsClasses: [
         {
           prefix: 'custom',
-          property: ['border', 'color'],
+          property: ['border-color', 'color'],
         },
         {
           prefix: 'brand',
diff --git a/packages/docs/page-config/services/colors-classes/examples/Default.vue b/packages/docs/page-config/services/colors-classes/examples/Default.vue
index e4ff4fc0e4..8cff63d44e 100644
--- a/packages/docs/page-config/services/colors-classes/examples/Default.vue
+++ b/packages/docs/page-config/services/colors-classes/examples/Default.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <p class="va-custom--success p-4">
-      Now I'm have a green color on the borders and text colors
+    <p class="va-custom--primary border-2 p-4 mb-4">
+      Now I'm have a "primary" color on the borders and text colors
     </p>
-    <p class="va-brand--danger p-4">
-      I have a red background
+    <p class="va-brand--warning p-4">
+      I have a "warning" background
     </p>
   </div>
 </template>
@@ -20,7 +20,7 @@ export default {
       colorsClasses: [
         {
           prefix: 'custom',
-          property: ['border', 'color'],
+          property: ['border-color', 'color'],
         },
         {
           prefix: 'brand',