diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 0926af58d..9e33c250d 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -86,10 +86,10 @@
                     </Accordion>
                 </TabPanel>
                 <TabPanel value="3">
-                    <span class="leading-6">Component tokens are not supported by the Visual Editor at the moment.</span>
+                    <span class="leading-6 text-muted-color">Component tokens are not supported by the Visual Editor at the moment and will be available with a future update. </span>
                 </TabPanel>
                 <TabPanel value="4">
-                    <span class="leading-6">Extend the theming system with your own design tokens e.g. <span class="font-medium">accent.color</span>. Do not use curly braces in the name field.</span>
+                    <span class="leading-6 text-muted-color">Extend the theming system with your own design tokens e.g. <span class="font-medium">accent.color</span>. Do not use curly braces in the name field.</span>
                     <ul class="flex flex-col gap-4 list-none p-0 mx-0 my-4">
                         <li v-for="(token, index) of customTokens" :key="index" class="first:border-t border-b border-surface-200 dark:border-surface-300 py-2">
                             <div class="flex items-center gap-4">