diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index 7bbc65d3f..be27754a2 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <label
       >{{ $t("color") }}:
-      {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label
+      {{ capitalized(active) }}</label
     >
     <div>
       <!-- text-blue-400 -->
@@ -17,7 +17,7 @@
       <span
         v-for="(color, index) of accentColors"
         :key="`color-${index}`"
-        v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
+        v-tooltip="capitalized(color)"
         class="
           inline-flex
           items-center
@@ -61,14 +61,19 @@ export default {
   },
   watch: {
     active(color) {
+      
       localStorage.setItem("THEME_COLOR", color)
     },
   },
+
   methods: {
     setActiveColor(color) {
       document.documentElement.setAttribute("data-accent", color)
       this.active = color
     },
+    capitalized(color) {
+      return `${color.charAt(0).toUpperCase()}${color.slice(1)}`  
+    },
   },
 }
 </script>