diff --git a/components/awesome/AlertBanner.vue b/components/awesome/AlertBanner.vue
index b2ecc73..9df6bba 100644
--- a/components/awesome/AlertBanner.vue
+++ b/components/awesome/AlertBanner.vue
@@ -24,11 +24,11 @@ const styles = reactive<{
 }>({
   primary: '',
   success:
-    'dark:from-green-500/50 via-gray-200 to-gray-200 dark:via-gray-800 dark:to-gray-800',
+    'dark:from-green-500/50 via-gray-200 to-gray-200 dark:via-gray-900 dark:to-gray-900',
   warning:
-    'dark:from-yellow-500/50 via-gray-200 to-gray-200 dark:via-gray-800 dark:to-gray-800',
+    'dark:from-yellow-500/50 via-gray-200 to-gray-200 dark:via-gray-900 dark:to-gray-900',
   danger:
-    'dark:from-red-500/50 via-gray-200 to-gray-200 dark:via-gray-800 dark:to-gray-800',
+    'dark:from-red-500/50 via-gray-200 to-gray-200 dark:via-gray-900 dark:to-gray-900',
 })
 const textStyles = reactive<{
   [key: string]: string
@@ -67,7 +67,7 @@ const close = () => {
       leave-to="opacity-0"
     >
       <div
-        :class="`bg-gray-200 dark:bg-gray-800 bg-gradient-to-r shadow-white/50 dark:shadow-gray-900/50 px-6 py-6 rounded-md shadow-lg flex space-x-6 ${selectedStyle}`"
+        :class="`bg-gray-200 dark:bg-gray-800 bg-gradient-to-r shadow-white/50 dark:shadow-gray-950/50 px-6 py-6 rounded-md shadow-lg flex space-x-6 ${selectedStyle}`"
       >
         <div class="flex items-center justify-center">
           <slot name="icon">
diff --git a/components/awesome/Card/Footer.vue b/components/awesome/Card/Footer.vue
index 544cd7a..ed0e3b6 100644
--- a/components/awesome/Card/Footer.vue
+++ b/components/awesome/Card/Footer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="card-footer duration-300 transition-colors px-6 py-2 text-sm bg-white dark:bg-gray-800 border-t border-gray-900/10 dark:border-gray-50/[0.2]"
+    class="card-footer duration-300 transition-colors px-6 py-2 text-sm bg-white dark:bg-gray-950 border-t border-gray-950/10 dark:border-gray-50/[0.2]"
   >
     <slot />
   </div>
diff --git a/components/awesome/Card/index.vue b/components/awesome/Card/index.vue
index 451ffd1..b133b5f 100644
--- a/components/awesome/Card/index.vue
+++ b/components/awesome/Card/index.vue
@@ -9,11 +9,11 @@ defineProps({
 
 <template>
   <div
-    class="card duration-300 transition-colors w-full relative rounded overflow-hidden bg-white dark:bg-gray-900 border border-gray-900/10 dark:border-gray-50/[0.2]"
+    class="card duration-300 transition-colors w-full relative rounded overflow-hidden bg-white dark:bg-gray-950 border border-gray-950/10 dark:border-gray-50/[0.2]"
   >
     <div
       v-if="disabled"
-      class="absolute z-10 top-0 left-0 w-full h-full bg-gray-800/[0.75] cursor-not-allowed"
+      class="absolute z-10 top-0 left-0 w-full h-full bg-gray-900/[0.75] cursor-not-allowed"
     />
     <slot />
   </div>
diff --git a/components/layouts/Page/Navbar.vue b/components/layouts/Page/Navbar.vue
index 45d1c84..728ee3e 100644
--- a/components/layouts/Page/Navbar.vue
+++ b/components/layouts/Page/Navbar.vue
@@ -3,11 +3,18 @@ import { RouteLocationRaw } from 'vue-router'
 
 const { awesome } = useAppConfig()
 const $screen = useAwesomeScreen()
+const nuxtApp = useNuxtApp()
 
 const menus = computed(() => awesome?.layout?.page?.navbar?.menus || [])
 
 // drawer
 const showDrawer = ref(false)
+
+const parseMenuTitle = (title?: string | ((nuxt: any) => string)) =>
+  typeof title === 'function' ? title(nuxtApp) : title || ''
+const parseMenuRoute = (
+  to: RouteLocationRaw | ((nuxt: any) => RouteLocationRaw)
+) => (typeof to === 'function' ? to(nuxtApp) : to)
 </script>
 
 <template>
@@ -40,22 +47,22 @@ const showDrawer = ref(false)
           <!-- dynamic menus -->
           <template v-for="(item, i) in menus">
             <template v-if="item?.type === 'link'">
-              <NuxtLink :key="i" :to="item.to" #="{ isActive }">
+              <NuxtLink :key="i" :to="parseMenuRoute(item.to)" #="{ isActive }">
                 <span
                   :class="{
                     'text-gray-900 dark:text-gray-100 font-bold': isActive,
                     'text-gray-700 dark:text-gray-300': !isActive,
                   }"
-                  >{{ item?.title || '' }}</span
+                  >{{ parseMenuTitle(item?.title) }}</span
                 >
               </NuxtLink>
             </template>
             <template v-if="item?.type === 'button'">
               <AwesomeButton
                 :key="i"
-                :text="item?.title || ''"
+                :text="parseMenuTitle(item?.title)"
                 size="xs"
-                :to="item.to"
+                :to="parseMenuRoute(item.to)"
               />
             </template>
           </template>
@@ -112,7 +119,7 @@ const showDrawer = ref(false)
               <template v-if="item?.type === 'link'">
                 <NuxtLink
                   :key="i"
-                  :to="item.to"
+                  :to="parseMenuRoute(item.to)"
                   #="{ isActive }"
                   class="w-full py-2"
                 >
@@ -121,16 +128,16 @@ const showDrawer = ref(false)
                       'text-gray-900 dark:text-gray-100 font-bold': isActive,
                       'text-gray-700 dark:text-gray-300': !isActive,
                     }"
-                    >{{ item?.title || '' }}</span
+                    >{{ parseMenuTitle(item?.title) }}</span
                   >
                 </NuxtLink>
               </template>
               <template v-if="item?.type === 'button'">
                 <AwesomeButton
                   :key="i"
-                  :text="item?.title || ''"
+                  :text="parseMenuTitle(item?.title)"
                   size="xs"
-                  :to="item.to"
+                  :to="parseMenuRoute(item.to)"
                   class="w-full"
                 />
               </template>