diff --git a/bun.lockb b/bun.lockb
index 7ee6ecb..48816cf 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/FontSwitcher.vue b/components/FontSwitcher.vue
index 1d623d4..64b71a5 100644
--- a/components/FontSwitcher.vue
+++ b/components/FontSwitcher.vue
@@ -2,7 +2,7 @@
   <select
     v-model='selectedFont'
     :disabled='loading'
-    @change='updateFont'
+    @change='setFont(selectedFont)'
   >
     <option
       v-for='(value, key) in fonts'
@@ -15,14 +15,12 @@
 </template>
 
 <script setup lang="ts">
-const { font, setFont } = useFont()
-const selectedFont = ref('')
-const loading = ref(true)
+const { font, setFont } = $(useFont())
+let selectedFont = $ref('')
+let loading = $ref(true)
 
 onMounted(() => {
-  selectedFont.value = font.value
-  loading.value = false
+  selectedFont = font
+  loading = false
 })
-
-const updateFont = () => setFont(selectedFont.value)
 </script>
diff --git a/components/ThemeSwitcher.vue b/components/ThemeSwitcher.vue
index 6517e4f..b8ce74f 100644
--- a/components/ThemeSwitcher.vue
+++ b/components/ThemeSwitcher.vue
@@ -2,7 +2,7 @@
   <select
     v-model='selectedTheme'
     :disabled='loading'
-    @change='updateTheme'
+    @change='setTheme(selectedTheme)'
   >
     <option
       v-for='(value, key) in themes'
@@ -15,16 +15,12 @@
 </template>
 
 <script setup lang="ts">
-const { theme, setTheme } = useTheme()
-const selectedTheme = ref('')
-const loading = ref(true)
+const { theme, setTheme } = $(useTheme())
+let selectedTheme = $ref('')
+let loading = $ref(true)
 
 onMounted(() => {
-  selectedTheme.value = theme.value
-  loading.value = false
+  selectedTheme = theme
+  loading = false
 })
-
-const updateTheme = () => {
-  setTheme(selectedTheme.value)
-}
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 690f720..2f793de 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,7 @@ import { fonts } from './utils/fonts'
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
-  modules: ['@unocss/nuxt', '@vueuse/nuxt', '@nuxt/eslint'],
+  modules: ['@unocss/nuxt', '@vueuse/nuxt', '@nuxt/eslint', '@vue-macros/nuxt'],
   eslint: {
     config: {
       stylistic: {
diff --git a/package.json b/package.json
index 5e04f50..ec7bd34 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   "devDependencies": {
     "@nuxt/eslint": "^0.5.2",
     "@unocss/nuxt": "^0.62.3",
+    "@vue-macros/nuxt": "^1.11.6",
     "@vueuse/nuxt": "^11.0.3"
   }
 }
diff --git a/pages/about.vue b/pages/about.vue
deleted file mode 100644
index ed760b4..0000000
--- a/pages/about.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-</script>
-
-<template>
-  <div>
-    <h1>Nuxt Routing set up successfully!</h1>
-    <p>Current route: {{ route.path }}</p>
-    <a
-      href='https://nuxt.com/docs/getting-started/routing'
-      target='_blank'
-    >Learn more about Nuxt Routing</a>
-  </div>
-</template>