diff --git a/src/App.vue b/src/App.vue
index 85dfebe..f3d0b0a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="bg-white text-gray-900
-                dark:bg-gray-900 min-h-screen dark:text-slate-50">
+                dark:bg-gray-900 min-h-screen dark:text-slate-50"
+         style="font-family: 'Comfortaa';">
         <RouterView />
     </div>
 </template>
diff --git a/src/assets/main.css b/src/assets/main.css
index bd6213e..851e7df 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
\ No newline at end of file
diff --git a/src/components/Navbar/NavLink.vue b/src/components/Navbar/NavLink.vue
index 8e5716b..ef478d0 100644
--- a/src/components/Navbar/NavLink.vue
+++ b/src/components/Navbar/NavLink.vue
@@ -1,8 +1,8 @@
 <template>
     <li>
         <router-link :to="props.to" :aria-current="is_active_page ? 'page' : null"
-                    :class="`block py-2 md:p-0 text-right md:text-center text-gray-700 dark:text-slate-50
-                             ${is_active_page ? 'font-bold' : 'font-normal hover:underline'}`">
+                    :class="`block py-2 md:p-0 text-right md:text-center 
+                             ${is_active_page ? 'font-bold text-zinc-900 dark:text-zinc-400' : 'font-normal hover:underline text-gray-700 dark:text-slate-50'}`">
             {{ props.label }}
         </router-link>
     </li>