diff --git a/app.vue b/app.vue
index 3dfbe60..1fe435d 100644
--- a/app.vue
+++ b/app.vue
@@ -1,59 +1,10 @@
 <template>
-  <select
-    v-model='selectedFont'
-    :disabled='loading'
-    @change='updateFont'
-  >
-    <option
-      v-for='(value, key) in fonts'
-      :key='key'
-      :value='key'
-    >
-      {{ value.name }}
-    </option>
-  </select>
-  <select
-    v-model='selectedTheme'
-    :disabled='loading'
-    @change='updateTheme'
-  >
-    <option
-      v-for='(value, key) in themes'
-      :key='key'
-      :value='key'
-    >
-      {{ value.name }}
-    </option>
-  </select>
+  <NavBar />
   <NuxtRouteAnnouncer />
   <NuxtPage />
 </template>
 
 <script setup>
-import { themes } from '~/types/themes'
-import { fonts } from '~/types/fonts'
-
-const { theme, setTheme } = useTheme()
-const selectedTheme = ref('')
-
-const { font, setFont } = useFont()
-const selectedFont = ref('')
-const loading = ref(true)
-
-onMounted(() => {
-  selectedTheme.value = theme.value
-  selectedFont.value = font.value
-  loading.value = false
-})
-
-const updateTheme = () => {
-  setTheme(selectedTheme.value)
-}
-
-const updateFont = () => {
-  setFont(selectedFont.value)
-}
-
 useHead({
   bodyAttrs: {
     class: 'bg-bg',
diff --git a/components/FontSwitcher.vue b/components/FontSwitcher.vue
new file mode 100644
index 0000000..1d623d4
--- /dev/null
+++ b/components/FontSwitcher.vue
@@ -0,0 +1,28 @@
+<template>
+  <select
+    v-model='selectedFont'
+    :disabled='loading'
+    @change='updateFont'
+  >
+    <option
+      v-for='(value, key) in fonts'
+      :key='key'
+      :value='key'
+    >
+      {{ value.name }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+const { font, setFont } = useFont()
+const selectedFont = ref('')
+const loading = ref(true)
+
+onMounted(() => {
+  selectedFont.value = font.value
+  loading.value = false
+})
+
+const updateFont = () => setFont(selectedFont.value)
+</script>
diff --git a/components/NavBar.vue b/components/NavBar.vue
new file mode 100644
index 0000000..2913295
--- /dev/null
+++ b/components/NavBar.vue
@@ -0,0 +1,4 @@
+<template>
+  <FontSwitcher />
+  <ThemeSwitcher />
+</template>
diff --git a/components/ThemeSwitcher.vue b/components/ThemeSwitcher.vue
new file mode 100644
index 0000000..6517e4f
--- /dev/null
+++ b/components/ThemeSwitcher.vue
@@ -0,0 +1,30 @@
+<template>
+  <select
+    v-model='selectedTheme'
+    :disabled='loading'
+    @change='updateTheme'
+  >
+    <option
+      v-for='(value, key) in themes'
+      :key='key'
+      :value='key'
+    >
+      {{ value.name }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+const { theme, setTheme } = useTheme()
+const selectedTheme = ref('')
+const loading = ref(true)
+
+onMounted(() => {
+  selectedTheme.value = theme.value
+  loading.value = false
+})
+
+const updateTheme = () => {
+  setTheme(selectedTheme.value)
+}
+</script>
diff --git a/composables/useFont.ts b/composables/useFont.ts
index 7614756..afc1faf 100644
--- a/composables/useFont.ts
+++ b/composables/useFont.ts
@@ -1,5 +1,4 @@
 import { ref, onMounted } from 'vue'
-import { fonts } from '~/types/fonts'
 
 const fontNames = Object.keys(fonts)
 
diff --git a/composables/useTheme.ts b/composables/useTheme.ts
index acf064c..371e320 100644
--- a/composables/useTheme.ts
+++ b/composables/useTheme.ts
@@ -1,5 +1,4 @@
 import { ref, onMounted } from 'vue'
-import { themes } from '~/types/themes'
 
 const themeNames = Object.keys(themes)
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index a534f8b..b403ef0 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,10 +1,6 @@
 // @ts-check
 import withNuxt from './.nuxt/eslint.config.mjs'
 
-export default withNuxt(
-  // Your custom configs here
-).override('nuxt/stylistic', {
-  rules: {
-    'vue/html-quotes': ['error', 'single'],
-  },
+export default withNuxt().overrideRules({
+  'vue/html-quotes': ['error', 'single'],
 })
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 18e6ede..690f720 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,4 @@
-import { fonts } from './types/fonts'
+import { fonts } from './utils/fonts'
 
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
diff --git a/pages/about.vue b/pages/about.vue
index 4bff1e5..ed760b4 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -4,9 +4,7 @@ const route = useRoute()
 
 <template>
   <div>
-    <h1>
-      Nuxt Routing set up successfully!
-    </h1>
+    <h1>Nuxt Routing set up successfully!</h1>
     <p>Current route: {{ route.path }}</p>
     <a
       href='https://nuxt.com/docs/getting-started/routing'
diff --git a/pages/index.vue b/pages/index.vue
index 874943b..2349b66 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,14 +1,7 @@
-<script setup lang="ts">
-const route = useRoute()
-</script>
-
 <template>
   <div>
     <h1 c-text>
-      Nuxt Routing set up successfully!
+      hi im mard
     </h1>
-    <p c-subtext>
-      Current route: {{ route.path }}
-    </p>
   </div>
 </template>
diff --git a/uno.config.ts b/uno.config.ts
index 3fb1015..60e8ef0 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -10,7 +10,7 @@ import {
 } from 'unocss'
 import type { Theme } from 'unocss/preset-uno'
 import presetTheme from 'unocss-preset-theme'
-import { themesWithoutName } from '~/types/themes'
+import { themesWithoutName } from '~/utils/themes'
 
 export default defineConfig<Theme>({
   theme: themesWithoutName['catppuccin-mocha'],
diff --git a/types/fonts.ts b/utils/fonts.ts
similarity index 100%
rename from types/fonts.ts
rename to utils/fonts.ts
diff --git a/types/themes.ts b/utils/themes.ts
similarity index 100%
rename from types/themes.ts
rename to utils/themes.ts