diff --git a/.github/screenshot.png b/.github/screenshot.png
index 3fcd92c..7521947 100644
Binary files a/.github/screenshot.png and b/.github/screenshot.png differ
diff --git a/app.vue b/app.vue
index cbb5709..4a3621a 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,21 @@
 <script setup lang="ts">
 const { locale, t } = useI18n();
+const isLoading = ref(true);
+
+if (import.meta.client) {
+  const storedLanguage = localStorage.getItem("nuxt-lang");
+  if (storedLanguage && storedLanguage !== "en-US") {
+    locale.value = storedLanguage;
+  }
+}
+
+onMounted(() => {
+  // Remove loading state after initial render
+  nextTick(() => {
+    isLoading.value = false;
+  });
+});
+
 useHead({
   htmlAttrs: {
     lang: locale,
@@ -12,11 +28,18 @@ useHead({
   },
 });
 </script>
+
 <template>
-  <NuxtLayout>
-    <div>
-      <CookieBanner />
-      <NuxtPage />
-    </div>
-  </NuxtLayout>
+  <div class="relative">
+    <div
+      v-if="isLoading"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-white transition-opacity duration-300 dark:bg-gray-900"
+    ></div>
+    <NuxtLayout>
+      <div>
+        <CookieBanner />
+        <NuxtPage />
+      </div>
+    </NuxtLayout>
+  </div>
 </template>
diff --git a/assets/css/cookiecontrol.css b/assets/css/cookiecontrol.css
index 788dfef..b5b821d 100644
--- a/assets/css/cookiecontrol.css
+++ b/assets/css/cookiecontrol.css
@@ -144,19 +144,19 @@
   transform: translate3d(0, -50%, 0);
 }
 .cookieControl__ModalContentInner h3 {
-  @apply mt-3 text-sm;
+  @apply mt-3 text-sm dark:text-white;
 }
 .cookieControl__ModalContentInner h3:first-child {
   @apply block text-2xl font-medium;
 }
 .cookieControl__ModalContentInner p {
-  @apply mb-5 mt-6 border-b pb-5 text-sm;
+  @apply mb-5 mt-6 border-b pb-5 text-sm ;
 }
 .cookieControl__ModalContentInner p a {
   @apply border-b font-bold;
 }
 .cookieControl__ModalContentInner {
-  @apply max-h-[90vh] overflow-y-scroll md:max-h-[80vh];
+  @apply max-h-[90vh] overflow-y-scroll md:max-h-[80vh] dark:text-white;
 }
 .cookieControl__ModalContentInner ul li {
   @apply relative my-3 rounded-md p-5;
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index f2c39fc..1833e7f 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -13,7 +13,7 @@
   }
 }
 html {
-  @apply bg-slate-100;
+  @apply bg-white;
 }
 html.dark {
   @apply bg-slate-900;
diff --git a/components/global/CookieBanner.vue b/components/global/CookieBanner.vue
index 672990e..23ba6ad 100644
--- a/components/global/CookieBanner.vue
+++ b/components/global/CookieBanner.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 const { locale } = useI18n();
+type LocaleCode = typeof locale.value extends `${infer Code}-${string}` ? Code : never;
+const currentLocale = computed(() => locale.value.slice(0, 2) as LocaleCode)
+
 /* Example to watch for a cookie being accepted */
 /*
 const {
@@ -26,7 +29,7 @@ watch(
 </script>
 <template>
   <div>
-    <CookieControl :locale="locale.slice(0, 2)">
+    <CookieControl :locale="currentLocale">
       <template #bar>
         <h3>{{ $t("cookies.bar.title") }}</h3>
         <p>{{ $t("cookies.bar.description") }}</p>
diff --git a/components/global/LanguageSelector.vue b/components/global/LanguageSelector.vue
index c3be695..0782e97 100644
--- a/components/global/LanguageSelector.vue
+++ b/components/global/LanguageSelector.vue
@@ -1,41 +1,75 @@
 <script setup lang="ts">
-const { locale } = useI18n();
+const { locale, t } = useI18n();
+const isOpen = ref(false);
+const dropdownRef = ref<HTMLElement | null>(null);
 
-// update local storage upon language change
-const toggleLocale = () => {
-  localStorage.setItem("nuxt-lang", locale.value);
-};
-
-// check for stored language on initial load.
+// Get initial language from localStorage or default to 'en-US'
 onMounted(() => {
-  const storedLanguage = localStorage.getItem("nuxt-lang");
-  if (storedLanguage) {
-    locale.value = storedLanguage;
+  const savedLang = localStorage.getItem('nuxt-lang');
+  if (savedLang) {
+    locale.value = savedLang;
+    document.documentElement.dir = t('locale.dir');
   }
+
+  document.addEventListener('click', (event: MouseEvent) => {
+    const target = event.target as Node;
+    if (dropdownRef.value && !dropdownRef.value.contains(target)) {
+      isOpen.value = false;
+    }
+  });
 });
+
+const setLanguage = (language: string) => {
+  locale.value = language;
+  // Save to localStorage
+  localStorage.setItem('nuxt-lang', language);
+  isOpen.value = false;
+  document.documentElement.dir = t('locale.dir');
+};
 </script>
+
+
 <template>
-  <form>
-    <label for="languages" aria-label="icon">
-      <Icon name="prime:language" size="1.5em" />
-    </label>
-    <select
-      id="languages"
-      v-model="$i18n.locale"
-      aria-label="language"
-      class="bg-transparent"
-      @change="toggleLocale"
+  <div class="w-auto" ref="dropdownRef">
+    <button
+  @click="isOpen = !isOpen"
+  class="flex items-center gap-2 rounded-lg p-2 px-4 text-gray-600 dark:text-white"
+  :class="[
+    { 'flex-row-reverse': t('locale.dir') === 'rtl' },
+    isOpen ? 'bg-gray-100 dark:bg-slate-700' : 'hover:bg-gray-100 dark:hover:bg-slate-700'
+  ]"
+>
+
+      <Icon name="ph:translate" size="1.25em" />
+      <span>{{ $t("locale." + $i18n.locale) }}</span>
+      <Icon
+        name="ph:caret-down"
+        class="h-4 w-4  transition-all duration-200"
+        :class="{ 'rotate-180': isOpen }"
+      />
+    </button>
+
+    <div
+      v-if="isOpen"
+      class="absolute mt-1 min-w-32 rounded-lg bg-white shadow-lg border border-gray-100 dark:bg-slate-700 dark:border-slate-700 right-0"
     >
-      <option
-        v-for="language in $i18n.availableLocales"
-        :key="language"
-        :aria-label="$t('locale.' + language)"
-        :value="language"
-        :selected="$i18n.locale === language"
-        class="dark:bg-slate-800"
-      >
-        {{ $t("locale." + language) }}
-      </option>
-    </select>
-  </form>
+      <ul>
+        <li
+          v-for="language in $i18n.availableLocales"
+          :key="language"
+          :class="[
+            'px-4 py-2 cursor-pointer rounded-md m-1 hover:bg-gray-100 text-gray-600 dark:text-white dark:hover:bg-slate-600',
+            { 'bg-gray-100 dark:bg-slate-600 ': $i18n.locale === language },
+            { 'text-right': t('locale.dir') === 'rtl' }
+          ]"
+          @click="() => setLanguage(language)"
+        >
+          {{ $t("locale." + language) }}
+        </li>
+
+      </ul>
+    </div>
+
+  </div>
+
 </template>
diff --git a/components/global/ThemeSwitcher.vue b/components/global/ThemeSwitcher.vue
index 05ec77b..ceb2a5a 100644
--- a/components/global/ThemeSwitcher.vue
+++ b/components/global/ThemeSwitcher.vue
@@ -1,33 +1,25 @@
+<script setup>
+const colorMode = useColorMode();
+const themeConfig = {
+  dark: { next: 'system', icon: 'ph:moon' },
+  system: { next: 'light', icon: 'ph:sun-horizon' },
+  light: { next: 'dark', icon: 'ph:sun' }
+};
+
+const name = ref(null);
+const toggleColorMode = () => {
+  const { next } = themeConfig[colorMode.preference];
+  Object.assign(colorMode, { preference: next, value: next });
+  name.value = themeConfig[next].icon;
+};
+onMounted(() => {
+  name.value = themeConfig[colorMode.preference].icon;
+});
+</script>
 <template>
-  <form>
-    <label for="themes"><Icon name="gg:dark-mode" size="1.5em" /></label>
-    <select
-      id="themes"
-      v-model="$colorMode.preference"
-      aria-label="themes"
-      class="border-1 border-l-3 mx-1 inline-block border-gray-900 bg-inherit text-sm"
-    >
-      <option
-        class="dark:bg-slate-800"
-        value="system"
-        :aria-label="$t('themes.system')"
-      >
-        {{ $t("themes.system") }}
-      </option>
-      <option
-        class="dark:bg-slate-800"
-        value="light"
-        :aria-label="$t('themes.light')"
-      >
-        {{ $t("themes.light") }}
-      </option>
-      <option
-        class="dark:bg-slate-800"
-        value="dark"
-        :aria-label="$t('themes.dark')"
-      >
-        {{ $t("themes.dark") }}
-      </option>
-    </select>
-  </form>
+  <ClientOnly>
+    <button v-bind="$attrs" class="cursor-pointer flex w-10 h-10" @click="toggleColorMode" aria-label="Toggle color modes">
+      <Icon :name size="24" />
+    </button>
+  </ClientOnly>
 </template>
diff --git a/error.vue b/error.vue
index 9e3c407..85a72c2 100644
--- a/error.vue
+++ b/error.vue
@@ -2,33 +2,25 @@
 defineProps({ error: { type: Object, default: null } });
 </script>
 <template>
-  <div
-    class="h-screen bg-slate-100 p-20 text-slate-900 dark:bg-slate-900 dark:text-white"
-  >
-    <div
-      class="mx-auto w-auto max-w-md rounded-2xl bg-white p-6 text-center shadow-xl dark:bg-slate-800"
-    >
-      <div
-        class="relative flex flex-col justify-center gap-y-4 sm:h-40 sm:gap-y-5"
-      >
-        <p class="mb-[-1em] font-semibold text-slate-500 dark:text-slate-400">
-          {{ error.statusCode }}
-        </p>
-        <h1 class="text-xl font-medium">
-          <template v-if="error.statusCode == 404">
-            {{ $t("error.page-not-found") }}
-          </template>
-          <template v-else>
-            {{ error.message }}
-          </template>
-        </h1>
-        <button
-          class="mx-auto mt-3 w-[10rem] rounded-lg border border-slate-200 bg-gray-50 p-4 py-2.5 text-gray-700 hover:cursor-pointer hover:border-slate-200 hover:bg-slate-100 dark:border-gray-700 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700"
-          @click="clearError({ redirect: '/' })"
-        >
-          {{ $t("error.return") }}
-        </button>
-      </div>
+  <div class="p-20 text-slate-900 dark:bg-slate-900 dark:text-white">
+    <div class="relative flex flex-col justify-center gap-y-4 sm:h-40 sm:gap-y-5 text-center">
+      <p class="mb-[-1em] font-semibold text-slate-500 dark:text-slate-300">
+        {{ error.statusCode }}
+      </p>
+      <h1 class="text-xl font-medium">
+        <template v-if="error.statusCode == 404">
+          {{ $t("error.page-not-found") }}
+        </template>
+        <template v-else>
+          {{ error.message }}
+        </template>
+      </h1>
+      <button
+        class="mx-auto mt-3 flex align-middle items-center gap-2 justify-center rounded-lg bg-gray-200 py-2.5 px-5 text-gray-700 hover:cursor-pointer hover:bg-gray-100 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700"
+        @click="clearError({ redirect: '/' })"
+      ><Icon name="ph:arrow-left-bold"  />
+        {{ $t("error.return") }}
+      </button>
     </div>
   </div>
 </template>
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 934c3a1..e04d9d9 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,13 @@
 // @ts-check
-import withNuxt from './.nuxt/eslint.config.mjs'
+import nuxtConfig from './.nuxt/eslint.config.mjs'
+const baseConfig = Array.isArray(nuxtConfig) ? nuxtConfig : [nuxtConfig]
 
-export default withNuxt(
-  // Your custom configs here
-)
+export default [
+  ...baseConfig,
+  {
+    files: ['**/*.{js,ts,vue}'],
+    rules: {
+      // custom rules here
+    }
+  }
+]
\ No newline at end of file
diff --git a/i18n.config.ts b/i18n.config.ts
index e48c375..a4dcc1a 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -2,24 +2,34 @@ import en from "./locales/en-US.json";
 import fr from "./locales/fr-FR.json";
 import ar from "./locales/ar-AR.json";
 
-export default defineI18nConfig(() => ({
-  legacy: false,
-  langDir: "./locales",
-  messages: { "en-US": en, "fr-FR": fr, "ar-AR": ar },
-  baseUrl: import.meta.env.VITE_BASE_URL,
-  locales: [
-    {
-      code: "en",
-      iso: "en-US",
-      isCatchallLocale: true,
-    },
-    {
-      code: "fr",
-      iso: "fr-FR",
-    },
-    {
-      code: "ar",
-      iso: "ar-AR",
-    },
-  ],
-}));
+export default defineI18nConfig(() => {
+  const config = useRuntimeConfig()
+
+  return {
+    legacy: false,
+    langDir: "./locales",
+    messages: { "en-US": en, "fr-FR": fr, "ar-AR": ar },
+    baseUrl: config.public.baseUrl,
+    locales: [
+      {
+        code: "en",
+        iso: "en-US",
+        isCatchallLocale: true,
+      },
+      {
+        code: "fr",
+        iso: "fr-FR",
+      },
+      {
+        code: "ar",
+        iso: "ar-AR",
+      },
+    ],
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'nuxt-lang',
+      redirectOn: 'root'
+    }
+  }
+})
+
diff --git a/layouts/default.vue b/layouts/default.vue
index 328e48c..c51e1c4 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,121 +1,90 @@
 <script setup lang="ts">
+const { t } = useI18n();
 useLocaleHead({
-  addDirAttribute: true,
-  identifierAttribute: "id",
-  addSeoAttributes: true,
+  dir: true,
+  key: "id",
+  seo: true,
+  lang: true,
 });
 </script>
 <template>
-  <div
-    class="min-h-screen bg-slate-100 text-slate-900 dark:bg-slate-900 dark:text-white"
-  >
-    <!--
+  <!--
 
-    Template below is intended to be removed..
+    Template below is intended to be removed for your own project.
+    This is just a demo.
 
-  -->
-    <div class="container mx-auto max-w-screen-lg px-8">
-      <header class="mb-5">
-        <nav class="flex flex-row justify-between pb-5 pt-10">
-          <NuxtLink to="/" aria-label="Home" class="min-w-fit">
-            <nuxt-img
-              class="h-6 dark:hidden sm:ml-3 lg:ml-0"
-              src="nuxt/full-logo-green-dark.svg"
-              densities="x1 x2"
-              alt="nuxt-logo"
-              style="height: 24px; width: 99px"
-            />
-            <nuxt-img
-              class="hidden h-6 dark:block"
-              src="nuxt/full-logo-green-light.svg"
-              densities="x1 x2"
-              alt="nuxt-logo"
-              style="height: 24px; width: 99px"
-            />
-          </NuxtLink>
-          <div
-            class="flex flex-col space-x-3 space-y-4 sm:flex-row sm:space-y-0 rtl:space-x-reverse"
-          >
-            <ThemeSwitcher
-              class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-2.5 text-sm text-gray-900 dark:border-gray-700 dark:bg-slate-800 dark:text-white"
-            />
-
-            <LanguageSelector
-              class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-2.5 text-sm text-gray-900 dark:border-gray-700 dark:bg-slate-800 dark:text-white"
-            />
-          </div>
-        </nav>
-        <nav
-          class="prose dark:prose-invert flex justify-between font-light text-slate-500 dark:text-slate-100"
-        >
-          <ul
-            class="flex items-center justify-center space-x-2 rtl:space-x-reverse"
-          >
-            <li class="h-full">
-              <NuxtLink
-                class="flex h-full w-full items-center justify-center rounded-lg border border-slate-200 bg-gray-50 px-4 text-gray-700 hover:cursor-pointer hover:border-slate-200 hover:bg-slate-200 dark:border-gray-700 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700"
-                to="/"
-                >{{ $t("pages.index.link") }}</NuxtLink
-              >
-            </li>
-            <li class="h-full">
-              <NuxtLink
-                class="flex h-full w-full items-center justify-center rounded-lg border border-slate-200 bg-gray-50 px-4 text-gray-700 hover:cursor-pointer hover:border-slate-200 hover:bg-slate-200 dark:border-gray-700 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700"
-                to="/about"
-                >{{ $t("pages.about.link") }}</NuxtLink
-              >
-            </li>
-            <li class="h-full">
-              <NuxtLink
-                class="flex h-full w-full items-center justify-center rounded-lg border border-slate-200 bg-gray-50 px-4 text-gray-700 hover:cursor-pointer hover:border-slate-200 hover:bg-slate-200 dark:border-gray-700 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700"
-                to="/minimal"
-                >{{ $t("pages.minimal.link") }}</NuxtLink
-              >
-            </li>
-            <li class="h-full">
-              <NuxtLink
-                class="flex h-full w-full items-center justify-center rounded-lg border border-slate-200 bg-gray-50 px-4 text-gray-700 hover:cursor-pointer hover:border-slate-200 hover:bg-slate-200 dark:border-gray-700 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700"
-                to="/404"
-                >404</NuxtLink
-              >
-            </li>
-          </ul>
-          <ul>
-            <li class="space-between">
-              <NuxtLink
-                class="flex rounded-lg border border-transparent px-4 py-1.5 hover:cursor-pointer hover:opacity-70 dark:hover:opacity-90"
-                target="_blank"
-                to="https://github.com/renegadevi/nuxt-boilerplate"
-                aria-label="Github"
-                ><span class="dark:hidden"
-                  ><Icon name="mdi:github" size="auto" color="black" />
-                </span>
-                <span class="hidden dark:block">
-                  <Icon
-                    name="mdi:github"
-                    size="auto"
-                    color="white"
-                    class="hidden dark:block"
-                  />
-                </span>
-              </NuxtLink>
-            </li>
-          </ul>
-        </nav>
-      </header>
-      <div class="rounded-2xl bg-white px-6 py-8 shadow-xl dark:bg-slate-800">
-        <slot />
-      </div>
-      <footer
-        class="dark:text-300 py-20 text-center text-sm text-gray-600 dark:bg-slate-900"
+   -->
+  <div class="absolute top-5" :class="t('locale.dir') === 'rtl' ? 'left-5' : 'right-5'">
+    <div
+      class="flex w-full items-center justify-center gap-2"
+      :class="t('locale.dir') === 'rtl' ? 'flex-row-reverse' : 'flex-row'"
+    >
+      <NuxtLink
+        class="flex h-10 w-10 items-center justify-center rounded-lg  hover:bg-gray-100 text-gray-600 dark:hover:bg-slate-700 dark:text-white"
+        target="_blank"
+        aria-label="Github"
+        to="https://github.com/renegadevi/nuxt-boilerplate"
       >
-        <p>© {{ new Date().getFullYear() }} - {{ $t("site.name") }}</p>
-      </footer>
+        <Icon name="simple-icons:github" size="20" color="black" />
+      </NuxtLink>
+      <ThemeSwitcher class="rounded-lg  hover:bg-gray-100 p-2 dark:hover:bg-slate-700 text-gray-600 dark:text-white" />
+      <LanguageSelector  />
     </div>
   </div>
+  <header class="mx-auto w-full max-w-4xl pt-10">
+    <div class="flex flex-col items-center gap-4">
+      <Icon name="logos:nuxt-icon" size="42" />
+      <div>
+        <div class="flex flex-col gap-2 text-center">
+          <div class="items-center text-lg font-bold text-gray-500 dark:text-gray-300">
+            {{ $t("pages.index.hero.subtitle") }}
+          </div>
+          <div class="text-3xl font-bold dark:text-white">{{ $t("pages.index.hero.title") }}</div>
+          <div class="text-gray-600 dark:text-gray-400">{{ $t("pages.index.hero.description") }}</div>
+        </div>
+      </div>
+    </div>
+
+    <nav class="p-3 py-8">
+      <ul class="flex justify-center gap-4">
+        <li>
+          <NuxtLink
+            class="rounded-md bg-gray-200 dark:bg-slate-700 p-3 px-8 hover:bg-green-300  hover:dark:bg-slate-600 text-gray-700 dark:text-white hover:dark:text-white"
+            to="/"
+            >{{ t("pages.index.link") }}</NuxtLink
+          >
+        </li>
+        <li>
+          <NuxtLink
+            class="rounded-md bg-gray-200 dark:bg-slate-700 p-3 px-8 hover:bg-green-300 hover:dark:bg-slate-600 text-gray-700 dark:text-white hover:dark:text-white"
+            to="/another-page"
+            >{{ t("pages.another-page.link") }}</NuxtLink
+          >
+        </li>
+        <li>
+          <NuxtLink
+            class="rounded-md bg-gray-200 dark:bg-slate-700 p-3 px-8 hover:bg-green-300 hover:dark:bg-slate-600 text-gray-700 dark:text-white hover:dark:text-white"
+            to="/minimal"
+          >
+            {{ t("pages.minimal.link") }}
+          </NuxtLink>
+        </li>
+      </ul>
+    </nav>
+  </header>
+  <main
+    class="flex min-h-64 w-full justify-center border-t-4 border-t-[#56CB82] bg-gradient-to-b from-[#D9F1DF] to-transparent dark:from-[#0D3335]"
+  >
+    <div class="container max-w-4xl">
+      <slot />
+    </div>
+  </main>
+  <footer class="dark:text-300 py-20 text-center text-sm text-gray-500 dark:text-gray-400">
+    <p>© {{ new Date().getFullYear() }} - {{ $t("site.name") }}</p>
+  </footer>
 </template>
 <style lang="postcss">
 ul .router-link-exact-active {
-  @apply border-slate-400 bg-slate-500 text-white hover:border-slate-500 hover:bg-slate-500 dark:border-slate-600 dark:bg-slate-700;
+  @apply bg-green-400 text-black dark:bg-gray-200 dark:text-black;
 }
 </style>
diff --git a/layouts/fullscreen.vue b/layouts/fullscreen.vue
index 6e49f33..04ba064 100644
--- a/layouts/fullscreen.vue
+++ b/layouts/fullscreen.vue
@@ -1,23 +1,28 @@
 <script setup lang="ts">
-const router = useRouter();
 useLocaleHead({
-  addDirAttribute: true,
-  identifierAttribute: "id",
-  addSeoAttributes: true,
+  dir: true,
+  key: "id",
+  seo: true,
+  lang: true,
 });
 </script>
 <template>
-  <div
-    class="min-h-screen bg-slate-100 p-6 text-slate-900 dark:bg-slate-900 dark:text-white"
-  >
-    <div class="rounded-2xl bg-white p-6 shadow-xl dark:bg-slate-800">
-      <button
-        class="m-2 rounded-lg border border-slate-200 bg-gray-50 p-4 py-3 text-gray-700 hover:cursor-pointer hover:border-slate-200 hover:bg-slate-200 dark:border-gray-700 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700"
-        @click="router.go(-1)"
-      >
-        ←
-      </button>
+  <!--
+
+    Template below is intended to be removed for your own project.
+    This is just a demo.
+
+   -->
+  <main class="flex w-full justify-center border-t-4 border-t-[#56CB82] pt-10">
+    <NuxtLink
+      class="flex h-10 w-10 items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-slate-800"
+      to="/"
+    >
+      <Icon name="ph:arrow-left" size="20"
+      />
+    </NuxtLink>
+    <div class="container max-w-4xl pt-14">
       <slot />
     </div>
-  </div>
+  </main>
 </template>
diff --git a/locales/ar-AR.json b/locales/ar-AR.json
index 79b4dad..0f28c24 100644
--- a/locales/ar-AR.json
+++ b/locales/ar-AR.json
@@ -40,7 +40,10 @@
       "hero": {
         "title": "قالب Nuxt",
         "subtitle": "غير رسمي",
-        "description": "مجموعة جاهزة للاستخدام لجميع أنواع المشاريع"
+        "description": "مجموعة جاهزة للاستخدام لجميع أنواع المشاريع",
+        "tagline-start": "مليئة بـ",
+        "tagline-highlight": "سمات",
+        "tagline-end": "للإستخدام"
       },
       "features": {
         "googleFonts": "خطوط جوجل",
@@ -56,7 +59,8 @@
         "deviceDetect": "اكتشاف الأجهزة",
         "cookies": "شريط ملفات تعريف الارتباط",
         "Iconify": "Iconify",
-        "Pinia": "Pinia"
+        "Pinia": "Pinia",
+        "enterprise": "جاهز للمشاريع"
       }
     },
     "about": {
@@ -78,4 +82,4 @@
       "p": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque iste atque, hic porro officiis fugit quae deserunt nobis dolorum odit dignissimos consequatur esse maiores repellat impedit. Quae dolorum id rem?"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/locales/en-US.json b/locales/en-US.json
index 98b9a34..a37ecec 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -4,7 +4,7 @@
   "locale.ar-AR": "Arabic",
   "locale.dir": "ltr",
   "site": {
-    "name": "Nuxt Boilerplate"
+    "name": "Unofficial Nuxt Boilerplate"
   },
   "themes": {
     "system": "System",
@@ -13,7 +13,7 @@
   },
   "cookies": {
     "bar": {
-      "title": "🍪 Hi. This site uses cookies",
+      "title": "🍪 Hi there, this site uses cookies.",
       "description": "We use cookies and similar technologies to help personalize content and offer a better experience. You can opt to customize them by clicking the customize button."
     },
     "modal": {
@@ -40,7 +40,10 @@
       "hero": {
         "title": "Nuxt Boilerplate",
         "subtitle": "Unofficial",
-        "description": "A ready to use starter kit for all kinds of projects"
+        "description": "A ready to use starter kit for all kinds of projects",
+        "tagline-start": "Packed with",
+        "tagline-highlight": "features",
+        "tagline-end": "to use"
       },
       "features": {
         "googleFonts": "Google Fonts",
@@ -56,16 +59,17 @@
         "deviceDetect": "Device detection",
         "cookies": "Cookie banner",
         "Iconify": "Iconify",
-        "Pinia": "Pinia"
+        "Pinia": "Pinia",
+        "enterprise": "Enterprise ready"
       }
     },
-    "about": {
+    "another-page": {
       "meta": {
-        "title": "About",
-        "description": "About page"
+        "title": "Another page",
+        "description": "Another page"
       },
-      "link": "About",
-      "title": "About",
+      "link": "Another",
+      "title": "Another page",
       "p": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque iste atque, hic porro officiis fugit quae deserunt nobis dolorum odit dignissimos consequatur esse maiores repellat impedit. Quae dolorum id rem?"
     },
     "minimal": {
@@ -74,8 +78,8 @@
         "description": "Minimal page using Fullscreen-layout"
       },
       "link": "Minimal",
-      "title": "Minimal with Fullscreen-layout",
+      "title": "Minimal page with Fullscreen-layout",
       "p": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque iste atque, hic porro officiis fugit quae deserunt nobis dolorum odit dignissimos consequatur esse maiores repellat impedit. Quae dolorum id rem?"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index 340d1e7..39bb4fd 100644
--- a/locales/fr-FR.json
+++ b/locales/fr-FR.json
@@ -40,7 +40,10 @@
       "hero": {
         "title": "Nuxt Boilerplate",
         "subtitle": "Non officiel",
-        "description": "Un kit de démarrage prêt à l'emploi pour toutes sortes de projets"
+        "description": "Un kit de démarrage prêt à l'emploi pour toutes sortes de projets",
+        "tagline-start": "Rempli de",
+        "tagline-highlight": "fonctionnalités",
+        "tagline-end": "à utiliser"
       },
       "features": {
         "googleFonts": "Polices Google",
@@ -56,16 +59,17 @@
         "deviceDetect": "Détection de périphérique",
         "cookies": "Bannière de cookies",
         "Iconify": "Iconify",
-        "Pinia": "Pinia"
+        "Pinia": "Pinia",
+        "enterprise": "Prêt pour l'entreprise"
       }
     },
-    "about": {
+    "another-page": {
       "meta": {
-        "title": "À propos",
-        "description": "À propos"
+        "title": "Une autre page",
+        "description": "Une autre page"
       },
-      "link": "À propos",
-      "title": "À propos",
+      "link": "Une autre page",
+      "title": "Une autre page",
       "p": "Dans un jardin luxuriant, tout est calme et sérénité. Des fleurs aux couleurs vives se mêlent aux feuillages sombres des grands arbres. Le parfum sucré des roses embaume l'air tandis que le vent fait danser les feuilles. On entend le chant mélodieux des oiseaux, comme une symphonie naturelle qui ne cesse jamais. Dans ce havre de paix, on se sent loin du monde, enveloppé par la beauté et la quiétude de la nature."
     },
     "minimal": {
@@ -75,7 +79,7 @@
       },
       "link": "Minimale",
       "title": "Page minimale (mise en page plein écran)",
-      "p": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque iste atque, hic porro officiis fugit quae deserunt nobis dolorum odit dignissimos consequatur esse maiores repellat impedit. Quae dolorum id rem?"
+      "p": "Dans un jardin luxuriant, tout est calme et sérénité. Des fleurs aux couleurs vives se mêlent aux feuillages sombres des grands arbres. Le parfum sucré des roses embaume l'air tandis que le vent fait danser les feuilles. On entend le chant mélodieux des oiseaux, comme une symphonie naturelle qui ne cesse jamais. Dans ce havre de paix, on se sent loin du monde, enveloppé par la beauté et la quiétude de la nature."
     }
   }
-}
+}
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3c25ffd..a728b98 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,6 +7,12 @@ import ar from "./locales/ar-AR.json";
 export default defineNuxtConfig({
   devtools: { enabled: true },
 
+  runtimeConfig: {
+    public: {
+      baseUrl: process.env.VITE_BASE_URL //  || 'http://localhost:3000'
+    }
+  },
+
   nitro: {
     compressPublicAssets: true,
     logLevel: 4,
@@ -16,7 +22,7 @@ export default defineNuxtConfig({
     "@nuxt/eslint",
     "@pinia/nuxt",
     "@nuxtjs/device",
-    "nuxt-icon",
+    "@nuxt/icon",
     "@nuxt/image",
     "@nuxtjs/tailwindcss",
     "@nuxtjs/google-fonts",
@@ -56,7 +62,7 @@ export default defineNuxtConfig({
   },
 
   image: {
-    provider: "ipx",
+    provider: "ipx", // change to e.g 'vercel' if hosted on vercel
     quality: 80,
     format: ["png", "jpeg", "webp"],
   },
@@ -71,6 +77,7 @@ export default defineNuxtConfig({
   },
 
   i18n: {
+    baseUrl: process.env.VITE_BASE_URL,
     vueI18n: "./i18n.config.ts",
     detectBrowserLanguage: {
       useCookie: false,
@@ -84,6 +91,10 @@ export default defineNuxtConfig({
     lintOnStart: false,
   },
 
+  pinia: {
+    autoImports: ['defineStore', 'acceptHMRUpdate'],
+  },
+
   cookieControl: {
     cookieExpiryOffsetMs: 1000 * 60 * 60 * 24 * 365, // one year
     // set all these to true for highest GDPR enforcement
@@ -97,26 +108,24 @@ export default defineNuxtConfig({
     isCssEnabled: false,
     isDashInDescriptionEnabled: false,
     cookies: {
-      necessary: [
-        {
-          name: {
-            fr: fr.cookies.necessary.title,
-            en: en.cookies.necessary.title,
-            ar: ar.cookies.necessary.title,
-          },
-          description: {
-            fr: fr.cookies.necessary.description,
-            en: en.cookies.necessary.description,
-            ar: ar.cookies.necessary.description,
-          },
-          targetCookieIds: ["ncc_"],
-          id: "",
+      necessary: [{
+        name: {
+          fr: fr.cookies.necessary.title,
+          en: en.cookies.necessary.title,
+          ar: ar.cookies.necessary.title,
+        },
+        description: {
+          fr: fr.cookies.necessary.description,
+          en: en.cookies.necessary.description,
+          ar: ar.cookies.necessary.description,
         },
-      ],
+        isPreselected: true,
+        id: "necessary"
+      }],
       optional: [],
     },
     locales: ["en", "fr", "ar"],
   },
 
-  compatibilityDate: "2024-09-15",
-});
\ No newline at end of file
+  compatibilityDate: "2024-12-26",
+});
diff --git a/package.json b/package.json
index d06e4a1..d2d2475 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nuxt-boilerplate",
   "private": true,
-  "version": "1.7.1",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "build": "nuxt build",
@@ -17,29 +17,29 @@
     "prettier:fix": "prettier --write . --fix"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.24.7",
-    "@dargmuesli/nuxt-cookie-control": "^8.4.2",
-    "@nuxt/devtools": "^1.3.7",
-    "@nuxt/eslint": "^0.3.13",
-    "@nuxt/eslint-config": "^0.3.13",
-    "@nuxt/image": "1.7.0",
-    "@nuxtjs/color-mode": "^3.4.2",
-    "@nuxtjs/device": "^3.1.1",
+    "@babel/eslint-parser": "^7.25.9",
+    "@dargmuesli/nuxt-cookie-control": "^8.4.19",
+    "@nuxt/devtools": "^1.7.0",
+    "@nuxt/eslint": "^0.7.4",
+    "@nuxt/eslint-config": "^0.7.4",
+    "@nuxt/image": "1.8.1",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@nuxtjs/device": "^3.2.4",
     "@nuxtjs/google-fonts": "^3.2.0",
-    "@nuxtjs/i18n": "8.3.1",
-    "@nuxtjs/tailwindcss": "^6.12.0",
-    "@pinia/nuxt": "^0.5.1",
-    "@types/node": "^20.14.9",
-    "@typescript-eslint/parser": "^7.14.1",
-    "eslint": "^8.56.0",
+    "@nuxtjs/i18n": "9.1.1",
+    "@nuxtjs/tailwindcss": "^6.12.2",
+    "@pinia/nuxt": "^0.9.0",
+    "@types/node": "^22.10.2",
+    "@typescript-eslint/parser": "^8.18.2",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-nuxt": "^4.0.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "nuxt": "^3.13.1",
-    "nuxt-icon": "^0.6.10",
+    "eslint-plugin-prettier": "^5.2.1",
+    "nuxt": "^3.15.0",
+    "@nuxt/icon": "^1.10.3",
     "postcss-import": "^16.1.0",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "typescript": "5.5.2"
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "typescript": "5.7.2"
   }
 }
\ No newline at end of file
diff --git a/pages/about.vue b/pages/about.vue
deleted file mode 100644
index 1d6257a..0000000
--- a/pages/about.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup>
-const { t } = useI18n();
-useHead({
-  title: t("pages.about.meta.title"),
-  meta: [{ name: "description", content: t("pages.about.meta.description") }],
-});
-useSeoMeta({
-  title: t("pages.about.meta.title"),
-  description: t("pages.about.meta.description"),
-});
-</script>
-<template>
-  <div class="p-5">
-    <h1 class="text-4xl">{{ $t("pages.about.title") }}</h1>
-    <main class="mt-4 text-slate-500 dark:text-slate-400 [&>*]:mb-4">
-      <p>
-        {{ $t("pages.about.p") }}
-      </p>
-      <p>
-        {{ $t("pages.about.p") }}
-      </p>
-      <p>{{ $t("pages.about.p") }} {{ $t("pages.about.p") }}</p>
-      <p>
-        {{ $t("pages.about.p") }}
-      </p>
-    </main>
-  </div>
-</template>
diff --git a/pages/another-page.vue b/pages/another-page.vue
new file mode 100644
index 0000000..7f0d434
--- /dev/null
+++ b/pages/another-page.vue
@@ -0,0 +1,23 @@
+<script setup>
+const { t } = useI18n();
+useHead({
+  title: t("pages.another-page.meta.title"),
+  meta: [{ name: "description", content: t("pages.another-page.meta.description") }],
+});
+useSeoMeta({
+  title: t("pages.another-page.meta.title"),
+  description: t("pages.another-page.meta.description"),
+});
+</script>
+<template>
+  <div class="justify-center">
+    <section class="py-12 text-center">
+      <h1 class="text-4xl font-bold dark:text-white ">{{ $t("pages.another-page.title") }}</h1>
+    </section>
+    <main class="mt-4 text-slate-500 dark:text-gray-300 [&>*]:mb-4 ">
+      <p v-for="index in 3" :key="index">
+        {{ $t("pages.another-page.p") }}.{{ $t("pages.another-page.p") }}. {{ $t("pages.another-page.p") }}
+      </p>
+    </main>
+  </div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index c77e4ac..ca3f2a7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,126 +12,95 @@ useSeoMeta({
 <template>
   <!--
 
-    Template inside is intended to be removed..
-
-    -->
-  <div class="mb-10 mt-5 flex justify-center">
-    <section class="w-full max-w-3xl">
-      <div
-        class="relative overflow-hidden border-b border-gray-200 pb-5 text-center dark:border-gray-600"
-      >
-        <div class="container relative">
-          <div>
-            <Icon name="logos:nuxt-icon" size="5rem" />
-          </div>
-          <div
-            class="relative flex flex-col justify-center gap-y-4 sm:h-40 sm:gap-y-5"
-          >
-            <p
-              class="mb-[-1em] font-semibold text-slate-500 dark:text-slate-400"
-            >
-              {{ $t("pages.index.hero.subtitle") }}
-            </p>
-            <h1 class="text-4xl">
-              {{ $t("pages.index.hero.title") }}
-            </h1>
-            <div
-              class="sm:text-md font-body text-slate-500 dark:text-slate-400"
-            >
-              {{ $t("pages.index.hero.description") }}
-            </div>
-          </div>
-        </div>
-      </div>
+    Page below is intended to be removed for your own project.
+    This is just a demo.
 
+   -->
+  <div class="justify-center">
+    <section class="py-12 text-center">
+      <h1 class="text-4xl font-bold dark:text-white ">{{ t('pages.index.hero.tagline-start') }} <span class="text-green-600 dark:text-green-400">{{ t('pages.index.hero.tagline-highlight') }}</span> {{ t('pages.index.hero.tagline-end') }}</h1>
+    </section>
+    <section class="flex flex-col items-center">
       <ul
-        class="mt-8 grid sm:grid-cols-2 lg:ml-12 lg:grid-cols-3 rtl:lg:ml-0 rtl:lg:mr-12"
+        class="grid sm:grid-cols-2 lg:grid-cols-3 [&>li]:text-gray-500 [&>li]:dark:text-white [&>li]:flex [&>li]:items-center [&>li>span]:text-green-500 [&>li>span]:dark:text-green-400 [&>li>span]:me-2 [&>li>span]:text-3xl gap-2 gap-x-16"
       >
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="ph:text-aa"
           />{{ $t("pages.index.features.googleFonts") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="simple-icons:tailwindcss"
           />{{ $t("pages.index.features.TailwindCSS") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="simple-icons:prettier"
           />{{ $t("pages.index.features.Prettier") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="ph:cookie"
           />{{ $t("pages.index.features.cookies") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="simple-icons:eslint"
           />{{ $t("pages.index.features.eslint") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="ph:sun-horizon"
           />{{ $t("pages.index.features.darkMode") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="ph:translate"
           />{{ $t("pages.index.features.i18n") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="simple-icons:iconify"
           />{{ $t("pages.index.features.Iconify") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="simple-icons:typescript"
           />{{ $t("pages.index.features.Typescript") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="simple-icons:postcss"
           />{{ $t("pages.index.features.postcss") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="me-2 text-3xl text-green-500 dark:text-green-300"
+            name="ph:devices"
           />{{ $t("pages.index.features.deviceDetect") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="shape-geometric-precision me-2 text-3xl text-green-500 dark:text-green-300"
+            name="mdi:fruit-pineapple"
           />{{ $t("pages.index.features.Pinia") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="shape-geometric-precision me-2 text-3xl text-green-500 dark:text-green-300"
+            name="ph:images"
           />{{ $t("pages.index.features.imageOptim") }}
         </li>
-        <li class="py-2">
+        <li class="py-2 font-bold">
           <Icon
-            name="heroicons:check-circle"
-            class="shape-geometric-precision me-2 text-3xl text-green-500 dark:text-green-300"
+            name="ph:lighthouse"
           />{{ $t("pages.index.features.lightHouse") }}
         </li>
+        <li class="py-2 font-bold">
+          <Icon
+            name="ph:building-office"
+          />{{ $t("pages.index.features.enterprise") }}
+        </li>
       </ul>
     </section>
+
   </div>
 </template>
diff --git a/pages/minimal.vue b/pages/minimal.vue
index aa72b92..34900e4 100644
--- a/pages/minimal.vue
+++ b/pages/minimal.vue
@@ -13,18 +13,16 @@ definePageMeta({
 });
 </script>
 <template>
+  <!--
+
+    Page is intended to be removed for your own project.
+
+   -->
   <div class="p-3">
-    <h1 class="text-4xl">{{ $t("pages.minimal.title") }}</h1>
+    <h1 class="text-4xl dark:text-white">{{ $t("pages.minimal.title") }}</h1>
     <main class="mt-4 text-slate-500 dark:text-slate-400 [&>*]:mb-4">
-      <p>
-        {{ $t("pages.minimal.p") }}
-      </p>
-      <p>
-        {{ $t("pages.minimal.p") }}
-      </p>
-      <p>{{ $t("pages.minimal.p") }} {{ $t("pages.minimal.p") }}</p>
-      <p>
-        {{ $t("pages.minimal.p") }}
+      <p v-for="index in 3" :key="index">
+        {{ $t("pages.minimal.p") }}, {{ $t("pages.minimal.p") }}
       </p>
     </main>
   </div>
diff --git a/prettier.config.cjs b/prettier.config.cjs
index d573118..e5e976b 100644
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@@ -1,3 +1,11 @@
+// module.exports = {
+//   plugins: ["prettier-plugin-tailwindcss"],
+// };
 module.exports = {
   plugins: ["prettier-plugin-tailwindcss"],
-};
+  semi: true,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "es5",
+  printWidth: 100
+}
\ No newline at end of file