diff --git a/frontend/app.vue b/frontend/app.vue
index 8d5c068..3cded66 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -6,7 +6,7 @@
   </NuxtLayout>
 </template>
 
-<script>
+<script lang="ts">
 // workaround for bootstrap javascript
 export default {
   head() {
diff --git a/frontend/assets/styles/main.css b/frontend/assets/styles/main.css
index 1a217d1..72bd2af 100644
--- a/frontend/assets/styles/main.css
+++ b/frontend/assets/styles/main.css
@@ -2,9 +2,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 :root {
   --border-radius: 8px;
-}
-
-[data-theme="dark"] {
   /* Dark/Light mode variables */
   --bg-color: #0f0f0f;
   --bg-card-glass: #1d1d1d;
@@ -26,7 +23,7 @@
   --nav-item-hover:#f0f0f0;
 }
 
-[data-theme="light"] {
+.light {
   /* Dark/Light mode variables */
   --bg-color: rgb(252, 252, 252);
   --bg-card-glass: #f5f5f5;
@@ -94,12 +91,10 @@ hr {
 }
 
 /* Glassmorphism properties */
-
 .glass-card {
   backdrop-filter: blur(16px) saturate(200%);
   -webkit-backdrop-filter: blur(16px) saturate(200%);
   background-color: var(--bg-card-glass);
-  /* background-color: rgba(var(--bg-color), 0.78); */
   border-radius: 12px;
   border: 1px solid var(--border-color-cards);
 }
@@ -109,6 +104,23 @@ hr {
   opacity: 40%;
 }
 
+/* Page Transitions */
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.25s;
+}
+
+.page-enter-from {
+  opacity: 0;
+  filter: blur(0%);
+}
+
+.page-leave-from {
+  opacity: 100%;
+  filter: blur(100%);
+}
+
+
 /* Responsive properties */
 @media (min-width: 1581px) {
   #__nuxt {
diff --git a/frontend/components/CardAPI.vue b/frontend/components/CardAPI.vue
index f136b42..940c405 100644
--- a/frontend/components/CardAPI.vue
+++ b/frontend/components/CardAPI.vue
@@ -103,12 +103,6 @@ const getFavicon = (url: string, size: number) => {
   return `https://www.google.com/s2/favicons?domain=${url}&sz=${size}`;
 };
 
-// const handleFavicon = () => {
-//   return props.faviconSrc
-//     ? props.faviconSrc !== null
-//     : getFavicon(props.faviconSrc, 128);
-// };
-
 onMounted(() => {
   iconCategory?.();
 });
diff --git a/frontend/components/Footer.vue b/frontend/components/Footer.vue
index da4e992..c3b9f35 100644
--- a/frontend/components/Footer.vue
+++ b/frontend/components/Footer.vue
@@ -53,13 +53,13 @@
 
 <script setup lang="ts">
 import packageJson from "../package.json";
-import { computed, inject, Ref } from "vue";
 
 const theme = useState("APIVaultTheme", () =>
   process.client ? localStorage.getItem("APIVaultTheme")! : "dark"
 );
+
 const logoMode = computed(() => {
-  if (theme!.value === "dark") {
+  if (theme!.value === "dark" || theme.value === null) {
     return "/img/apivault-dark-nobg.png";
   }
   return "/img/apivault-light-nobg.png";
diff --git a/frontend/components/Navbar.vue b/frontend/components/Navbar.vue
index bb3f9fb..c12e252 100644
--- a/frontend/components/Navbar.vue
+++ b/frontend/components/Navbar.vue
@@ -43,6 +43,7 @@
           <li class="nav-item navbar-text-wrapper mt-2">
             <ToggleButton
               @click="setModeLocal"
+              :theme="theme"
               class="flex items-center gap-2 ms-2"
             />
           </li>
@@ -137,10 +138,9 @@
 import { categoriesProperties } from "../utils/categoryMapping";
 import GithubService from "../services/GithubServices";
 import {
-  setThemeElements,
+  getThemeElements,
   themeIcons,
   setThemeLogoPath,
-  setIconThemeText,
   setLocalStorage,
 } from "../utils/themeutils";
 
@@ -148,40 +148,45 @@ const stargazers = await GithubService.repoStars();
 console.log(stargazers);
 const categoriesAttributes = categoriesProperties;
 const theme = useState("APIVaultTheme", () =>
-  process.client ? localStorage.getItem("APIVaultTheme")! : "dark"
+  process.client ? localStorage.getItem("APIVaultTheme")! : "light"
 );
 const iconTheme = ref(themeIcons[theme.value]);
-const iconThemeText = ref(setIconThemeText(theme));
 const logoPath = ref(setThemeLogoPath(theme));
+
 /**
 Toggles the color scheme of the document body between light and dark mode.
 Updates the values of iconThemeText, theme, logoPath, and iconTheme
 based on the new color scheme. Returns the new value of iconTheme to display.
 @returns {String} - The new value of iconTheme to display
 */
+let defaultTheme = ref<boolean>(true);
 const setModeLocal = (): void => {
   if (process.client) {
-    setLocalStorage(theme);
+    defaultTheme.value = setLocalStorage(theme);
+    defaultTheme.value = getThemeElements(theme);
   }
-  const themeText = setThemeElements(theme);
-  iconThemeText.value = themeText;
   iconTheme.value = themeIcons[theme.value];
   logoPath.value = setThemeLogoPath(theme);
 };
 
+/**
+This is needed to set the dafault theme class for first
+visit on the website.
+*/
+useHead({
+  htmlAttrs: {
+    class: computed(() => {
+      return defaultTheme.value ? "" : "light";
+    }),
+  },
+});
+
 onMounted(() => {
-  document
-    .querySelector("body")
-    ?.setAttribute("data-theme", localStorage.getItem("APIVaultTheme")!);
-  if (localStorage.getItem("APIVaultTheme") === null) {
-    localStorage.setItem("APIVaultTheme", "dark");
-  } else {
-    theme.value = localStorage.getItem("APIVaultTheme")!;
-    const themeText = setThemeElements(theme);
-    iconThemeText.value = themeText;
-    iconTheme.value = themeIcons[theme.value];
-    logoPath.value = setThemeLogoPath(theme);
-  }
+  theme.value = setTheme();
+  const isDarkTheme: boolean = theme.value === "dark" || theme.value === null;
+  defaultTheme.value = isDarkTheme;
+  iconTheme.value = themeIcons[theme.value];
+  logoPath.value = setThemeLogoPath(theme);
 });
 </script>
 
diff --git a/frontend/components/ToggleButton.vue b/frontend/components/ToggleButton.vue
index cb2f69d..9f6b3b2 100644
--- a/frontend/components/ToggleButton.vue
+++ b/frontend/components/ToggleButton.vue
@@ -1,32 +1,26 @@
 <template>
   <button class="toggle-button" :class="{ active: isActive }" @click="toggle">
     <span class="toggle-icon">
-      <font-awesome-icon :icon="icon" />
+      <font-awesome-icon :icon="['fas', icon]" />
     </span>
   </button>
 </template>
 
-<script lang="ts">
-import { ref, computed } from "vue";
-export default {
-  setup() {
-    const isActive = ref(false);
+<script lang="ts" setup>
+const isActive = ref(false);
 
-    const toggle = () => {
-      isActive.value = !isActive.value;
-    };
+const toggle = () => {
+  isActive.value = !isActive.value;
+};
 
-    const icon = computed(() => {
-      return isActive.value ? "sun" : "moon";
-    });
+const icon = computed(() => {
+  return isActive.value ? "sun" : "moon";
+});
 
-    return {
-      isActive,
-      toggle,
-      icon,
-    };
-  },
-};
+onMounted(() => {
+  const isLight = localStorage.getItem("APIVaultTheme");
+  isActive.value = true ? isLight === "light" : false;
+});
 </script>
 
 <style>
@@ -50,15 +44,16 @@ export default {
 }
 
 .toggle-icon {
-  display: flex;
-  position: absolute;
-  left: 0;
-  justify-content: center;
   align-items: center;
-  width: 30px;
-  height: 30px;
   background-color: #fff;
   border-radius: 50%;
+  color: var(--icon-color);
+  display: flex;
+  justify-content: center;
+  height: 30px;
+  left: 0;
+  position: absolute;
   transition: transform 0.3s ease;
+  width: 30px;
 }
 </style>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 0b4c2f9..c1ee256 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -13,23 +13,13 @@ export default defineNuxtConfig({
   plugins: [
     '@/plugins/fontawesome',
   ],
-  modules: ['@nuxtjs/color-mode'],
-  css: [
-    '~/assets/styles/bootstrap.scss',
-    '~/assets/styles/main.css', 
-    '~/assets/styles/normalize.css',
-    '~/assets/styles/animations.scss',
-    '@fortawesome/fontawesome-svg-core/styles.css'
-  ],
-  build: {
-    transpile: ['@fortawesome/vue-fontawesome']
-  },
   app: {
+    pageTransition: {
+      name: "page",
+      mode: "out-in",
+    },
     head: {
       title: "A free API database list for developers",
-      bodyAttrs: {
-        'data-theme': 'dark'
-      },
       meta: [
         { name: "keywords", content: "free api, apivault, api list, open-source, public APIs, software developer" },
         { name: "description", content: "ApiVault - The largest collection of free public APIs, categorized for easy search." },
@@ -49,5 +39,15 @@ export default defineNuxtConfig({
         { property: "og:type", content: "website"}
       ]
     }
-  }
+  },
+  css: [
+    '~/assets/styles/bootstrap.scss',
+    '~/assets/styles/main.css', 
+    '~/assets/styles/normalize.css',
+    '~/assets/styles/animations.scss',
+    '@fortawesome/fontawesome-svg-core/styles.css'
+  ],
+  build: {
+    transpile: ['@fortawesome/vue-fontawesome']
+  },
 })
diff --git a/frontend/package.json b/frontend/package.json
index f196e0d..0f43bfe 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-app",
-  "version": "2.0.0-b1",
+  "version": "2.0.0-b2.002",
   "private": true,
   "scripts": {
     "build": "nuxt build",
@@ -24,7 +24,6 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@nuxtjs/color-mode": "^3.2.0",
     "@popperjs/core": "^2.11.7",
     "axios": "^1.3.5",
     "bootstrap": "^5.2.3",
diff --git a/frontend/utils/themeutils.ts b/frontend/utils/themeutils.ts
index eaf5321..1f7e3c2 100644
--- a/frontend/utils/themeutils.ts
+++ b/frontend/utils/themeutils.ts
@@ -1,6 +1,4 @@
-export type Theme = "light" | "dark";
-
-export function getTheme(): string {
+export function setTheme(): string {
   const theme = localStorage.getItem("APIVaultTheme");
   const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
   if (process.client) {
@@ -20,40 +18,25 @@ export const themeIcons: { [key: string]: string } = {
   dark: "fa-solid fa-moon",
 };
 
-export const setThemeElements = (theme: globalThis.Ref<string>): string => {
-  const themeText =
-  theme.value[0].toUpperCase() +
-  theme.value.slice(1, theme.value.length) +
-  " Mode";
-  if (theme.value === null) {
-    document.querySelector("body")?.setAttribute("data-theme", "dark");  
-  }
-  document.querySelector("body")?.setAttribute("data-theme", theme.value);
-  return themeText;
+export const getThemeElements = (theme: globalThis.Ref<string>): boolean => {
+  return theme.value === null || theme.value === 'dark';
 }
 
 export const setThemeLogoPath = (theme: globalThis.Ref<string>): string => {
+  if (theme.value === null || theme.value === undefined) {
+    return `/img/apivault-full-dark-nobg.png`;
+  }
   return `/img/apivault-full-${theme.value}-nobg.png`;
 }
 
-/**
-This code generates a string that represents the mode of the theme,
-either "Light Mode" or "Dark Mode", depending on the theme.value
-*/
-export const setIconThemeText = (theme: globalThis.Ref<string>): string => {
-  return theme.value
-    ? theme.value[0].toUpperCase() +
-        theme.value.slice(1, theme.value.length) +
-        " Mode"
-    : " Mode"
-}
-
-export const setLocalStorage = (theme: globalThis.Ref<string>): void => {
+export const setLocalStorage = (theme: globalThis.Ref<string>): boolean => {
   if (theme.value === "dark" || theme.value === undefined) {
     theme.value = "light";
     localStorage.setItem("APIVaultTheme", "light");
+    return false;
   } else {
     theme.value = "dark";
     localStorage.setItem("APIVaultTheme", "dark");
+    return true;
   }
 }
\ No newline at end of file