diff --git a/app/app.config.ts b/app/app.config.ts
index 3cbea35..f27e791 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -9,12 +9,25 @@ export default defineAppConfig({
 	},
 	ui: {
 		colors: {
+			primary: "green",
 			neutral: "zinc"
 		},
 		button: {
 			slots: {
 				base: "cursor-pointer"
 			}
+		},
+		navigationMenu: {
+			slots: {
+				link: "cursor-pointer",
+			},
+			variants: {
+				disabled: {
+					true: {
+						link: "cursor-text"
+					}
+				}
+			}
 		}
 	}
 });
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index c924487..17fcc48 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -2,7 +2,7 @@
 @import "@nuxt/ui";
 
 @theme {
-	--font-Heading: "Montserrat", sans-serif;
+	--font-heading: "Montserrat", sans-serif;
 	--font-sans: "Inter", sans-serif;
 
 	--color-primary: var(--ui-color-primary-500);
@@ -21,10 +21,10 @@
 	.flex-center {
 		@apply flex justify-center items-center;
 	}
-	.absolute-center-h: {
+	.absolute-center-h {
 		@apply left-1/2 transform -translate-x-1/2;
 	}
-	.absolute-center-v{
+	.absolute-center-v {
 		@apply top-1/2 transform -translate-y-1/2;
 	}
 }
diff --git a/app/assets/icons/logo.svg b/app/assets/icons/logo.svg
new file mode 100644
index 0000000..23f7095
--- /dev/null
+++ b/app/assets/icons/logo.svg
@@ -0,0 +1,4 @@
+<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.018652355298399925 149.6599884033203 150.74864196777344">
+	<path d="M74.59 150.73H4.11c-4 0-4.08-.08-4.08-4.15Q0 88.14 0 29.69c0-2.5.7-4.09 2.9-5.32 8.55-4.8 17-9.71 25.51-14.61 1.69-1 2.53-.64 2.52 1.38v2.28c0 27.38 0 54.77-.05 82.15a5.59 5.59 0 0 0 3.24 5.6Q53.3 112 72.3 123.2a4.62 4.62 0 0 0 5.18 0Q95 113 112.51 102.84a.92.92 0 0 1 .21-.13c6.06-1.78 6.63-6.17 6.57-11.77-.28-25.77-.12-51.56-.11-77.34v-2.28c0-1.83.8-2.29 2.38-1.4 2.65 1.48 5.31 3 7.93 4.49 6.06 3.52 12.08 7.11 18.17 10.58 1.79 1 2 2.49 2 4.27v117.15c0 4-.28 4.3-4.34 4.3H74.59z" />
+	<path d="M51.79 43.09V3.82C51.8.28 52 .07 55.5.05c2.87 0 5.74.09 8.61 0 2.23-.09 3 .84 2.93 3-.11 13 .56 26 .44 39-.15 16.21 0 32.43 0 48.64 0 3.66-.5 3.9-3.74 2-3.07-1.76-6.12-3.57-9.28-5.18a4.54 4.54 0 0 1-2.69-4.63c.08-13.26 0-26.52 0-39.77zM97.91 43.09v39.55a4.89 4.89 0 0 1-2.94 5c-3.22 1.66-6.25 3.69-9.42 5.45-2.51 1.39-3.41.87-3.33-2 .74-29.39.29-58.79.38-88.18 0-2.24.88-3 3-2.92 3 .11 6.08.16 9.12 0C97.31-.13 98 1 97.93 3.3c-.07 13.26 0 26.53 0 39.79z" />
+</svg>
\ No newline at end of file
diff --git a/app/components/Site/Navbar.vue b/app/components/Site/Navbar.vue
index b02f9a4..1be2483 100644
--- a/app/components/Site/Navbar.vue
+++ b/app/components/Site/Navbar.vue
@@ -1,57 +1,70 @@
 <template>
 	<header class="top-0 z-10">
-		<nav crate class="flex items-center justify-between py-6">
-			<div class="flex" lg="flex-1">
-				<NuxtLink to="/" class="home p-1.5 -m-1.5">
-					<SvgoLogo :font-controlled="false" class="size-8" />
-				</NuxtLink>
-			</div>
-			<div class="flex" lg="hidden">
-				<button type="button" class="inline-flex items-center justify-center rounded-md p-2.5 text-neutral-300 -m-2.5" @click="showSidebar = true">
-					<Icon name="heroicons-solid:bars-3" class="size-6" />
-				</button>
-			</div>
-
-			<UNavigationMenu :items="items" class="w-full justify-center" />
-			
-			<div class="hidden" lg="flex flex-1 justify-end">
-				<p class="text-sm text-white font-semibold leading-6">
-					v{{ tauriVersion }}
-				</p>
-			</div>
-		</nav>
+		<UContainer class="md:py-6">
+			<UNavigationMenu
+				:items="mobileItems"
+				variant="link"
+				:ui="{
+					root: 'md:hidden'
+				}"
+			/>
+			<UNavigationMenu
+				:items="desktopItems"
+				variant="link"
+				:ui="{
+					root: 'hidden md:flex'
+				}"
+			/>
+		</UContainer>
 	</header>
 </template>
 
 <script lang="ts" setup>
+	const { pages } = usePages();
 	const { showSidebar } = useSidebar();
 	const tauriVersion = await useTauriAppGetTauriVersion();
 
-	const items = ref([
-		{
-			label: "Commands",
-			to: "/commands",
-			icon: "lucide:square-terminal"
-		},
-		{
-			label: "Notifications",
-			to: "/notifications",
-			icon: "lucide:message-square-more"
-		},
-		{
-			label: "OS Informations",
-			to: "/os",
-			icon: "lucide:info"
-		},
-		{
-			label: "Files",
-			to: "/notifications",
-			icon: "lucide:file"
-		},
-		{
-			label: "Store",
-			to: "/store",
-			icon: "lucide:database"
-		},
+	const mobileItems = ref<any[]>([
+		[
+			{
+				avatar: {
+					icon: "local:logo",
+					size: "xl",
+					ui: {
+						root: "bg-transparent"
+					}
+				},
+				to: "/"
+			}
+		],
+		[
+			{
+				icon: "lucide:menu",
+				onSelect: () => showSidebar.value = true
+			}
+		]
+	]);
+
+	const desktopItems = ref<any[]>([
+		[
+			{
+				avatar: {
+					icon: "local:logo",
+					size: "3xl",
+					ui: {
+						root: "group bg-transparent",
+						icon: "opacity-70 group-hover:opacity-100"
+					}
+				},
+				to: "/"
+			}
+		],
+		pages,
+		[
+			{
+				label: `v${tauriVersion}`,
+				disabled: true
+			}
+		]
 	]);
 </script>
diff --git a/app/components/Site/Sidebar.vue b/app/components/Site/Sidebar.vue
index d887bac..d8e7b26 100644
--- a/app/components/Site/Sidebar.vue
+++ b/app/components/Site/Sidebar.vue
@@ -1,49 +1,36 @@
 <template>
-	<Transition
-		enter-from-class="opacity-0" enter-active-class="ease-in-out duration-500" enter-to-class="opacity-100"
-		leave-from-class="opacity-100" leave-active-class="ease-in-out duration-500" leave-to-class="opacity-0"
-	>
-		<div v-if="showSidebar" class="relative z-20" lg="hidden" role="dialog" aria-modal="true">
-			<div class="fixed inset-0 overflow-hidden">
-				<div crate class="h-full flex flex-col overflow-y-auto bg-neutral-800/70 py-6 backdrop-blur-md">
-					<div class="flex items-center justify-between">
-						<NuxtLink to="/" class="p-1.5 -m-1.5">
-							<SvgoLogo :filled="true" :font-controlled="false" class="size-8" />
-						</NuxtLink>
-						<button type="button" class="m-2.5 rounded-md p-2.5 text-neutral-300" @click="showSidebar = false">
-							<Icon name="heroicons-solid:x-mark" class="size-6" />
-						</button>
-					</div>
-					<div class="mt-6 flow-root">
-						<div class="-my-6 divide-y divide-gray-500/25">
-							<div class="py-6 space-y-2">
-								<NavLink to="/commands">
-									Commands
-								</NavLink>
-								<NavLink to="/notifications">
-									Notifications
-								</NavLink>
-								<NavLink to="/os">
-									OS Informations
-								</NavLink>
-								<NavLink to="/foo">
-									404
-								</NavLink>
-							</div>
-							<div class="py-6">
-								<p class="px-3 text-base text-white font-semibold leading-7 -mx-3">
-									v{{ tauriVersion }}
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
+	<USlideover :open="showSidebar" @update:open="showSidebar = false">
+		<template #title>
+			<div class="flex gap-x-3">
+				<Icon name="local:logo" class="size-6" />
+				<span>NUXTOR</span>
 			</div>
-		</div>
-	</Transition>
+		</template>
+		<template #description>
+			<VisuallyHidden>Description</VisuallyHidden>
+		</template>
+
+		<template #body>
+			<UNavigationMenu
+				orientation="vertical"
+				:items="items"
+			/>
+		</template>
+	</USlideover>
 </template>
 
 <script lang="ts" setup>
-	const tauriVersion = await useTauriAppGetTauriVersion();
+	const { pages } = usePages();
 	const { showSidebar } = useSidebar();
+	const tauriVersion = await useTauriAppGetTauriVersion();
+
+	const items = ref<any[]>([
+		pages,
+		[
+			{
+				label: `v${tauriVersion}`,
+				disabled: true
+			}
+		]
+	]);
 </script>
diff --git a/app/composables/pages.ts b/app/composables/pages.ts
new file mode 100644
index 0000000..1f96d51
--- /dev/null
+++ b/app/composables/pages.ts
@@ -0,0 +1,15 @@
+export const usePages = () => {
+	const router = useRouter();
+
+	const pages = router.getRoutes().filter((route) => route.name !== "index" && route.name !== "all").map((route) => {
+		return {
+			label: route.meta.name,
+			to: route.path,
+			icon: route.meta.icon
+		};
+	});
+
+	return {
+		pages
+	};
+};
diff --git a/app/pages/commands.vue b/app/pages/commands.vue
index 3685bde..10a5359 100644
--- a/app/pages/commands.vue
+++ b/app/pages/commands.vue
@@ -30,6 +30,11 @@
 </template>
 
 <script lang="ts" setup>
+	definePageMeta({
+		name: "Commands",
+		icon: "lucide:square-terminal"
+	});
+	
 	const input = ref("");
 	const result = ref("");
 
diff --git a/app/pages/file.vue b/app/pages/file.vue
index 06a5d74..e269430 100644
--- a/app/pages/file.vue
+++ b/app/pages/file.vue
@@ -41,6 +41,11 @@
 </template>
 
 <script lang="ts" setup>
+	definePageMeta({
+		name: "Files",
+		icon: "lucide:file"
+	});
+
 	const fileName = ref("");
 	const fileContent = ref("");
 	const done = ref(false);
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e8828a7..28653c4 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,40 +1,38 @@
 <template>
-	<div class="relative overflow-hidden px-6" lg="px-8">
-		<div class="grid mx-auto h-screen max-w-2xl place-content-center">
-			<SvgoLogo :filled="true" :font-controlled="false" class="mx-auto mb-8 size-40" />
+	<UContainer class="relative overflow-hidden h-screen">
+		<div class="grid size-full place-content-center gap-y-8">
+			<SvgoLogo :filled="true" :font-controlled="false" class="mx-auto size-40" />
 
-			<div class="text-center">
-				<h1 class="animate-pulse text-4xl text-light-300 font-bold tracking-wider font-heading" sm="text-6xl">
+			<div class="flex flex-col items-center gap-y-5 md:gap-y-7">
+				<h1 class="animate-pulse text-3xl sm:text-4xl text-pretty font-bold text-(--ui-text-highlighted) font-heading">
 					{{ app.name.toUpperCase() }}
 				</h1>
-				<p class="mt-5 flex gap-1 text-neutral-300 leading-8">
+				<p class="leading-7 text-pretty">
 					Powered by
-					<NuxtLink :to="app.nuxtSite" target="_blank" class="text-accent underline">
+					<ULink :to="app.nuxtSite" target="_blank" :external="true">
 						Nuxt 3
-					</NuxtLink>
+					</ULink>
 					-
-					<NuxtLink :to="app.tauriSite" target="_blank" class="text-accent underline">
+					<ULink :to="app.tauriSite" target="_blank" :external="true">
 						Tauri 2
-					</NuxtLink>
+					</ULink>
 					-
-					<NuxtLink :to="app.NuxtUiSite" target="_blank" class="text-accent underline">
+					<ULink :to="app.nuxtUiSite" target="_blank" :external="true">
 						NuxtUI 3
-					</NuxtLink>
+					</ULink>
 				</p>
-				<div class="mt-15">
-					<Hyperlink :to="app.repo">
-						Star on GitHub
-					</Hyperlink>
-				</div>
+				<UButton :to="app.repo">
+					Star on GitHub
+				</UButton>
 			</div>
 		</div>
 
 		<div class="fixed bottom-6 text-sm absolute-center-h">
-			<p class="text-sm text-neutral-500">
+			<p class="text-sm text-(--ui-text-muted)">
 				Made by {{ app.author }}
 			</p>
 		</div>
-	</div>
+	</UContainer>
 </template>
 
 <script lang="ts" setup>
diff --git a/app/pages/notifications.vue b/app/pages/notifications.vue
index aaee8cb..9b2d0b3 100644
--- a/app/pages/notifications.vue
+++ b/app/pages/notifications.vue
@@ -35,6 +35,11 @@
 </template>
 
 <script lang="ts" setup>
+	definePageMeta({
+		name: "Notifications",
+		icon: "lucide:message-square-more"
+	});
+
 	const notificationTitle = ref("");
 	const notificationBody = ref("");
 	const permissionError = ref(false);
diff --git a/app/pages/os.vue b/app/pages/os.vue
index 3c3c840..be078bc 100644
--- a/app/pages/os.vue
+++ b/app/pages/os.vue
@@ -14,6 +14,11 @@
 </template>
 
 <script lang="ts" setup>
+	definePageMeta({
+		name: "OS Informations",
+		icon: "lucide:info"
+	});
+
 	const currentPlatform = await useTauriOsPlatform();
 	const currentArch = await useTauriOsArch();
 	const currentVersion = await useTauriOsVersion();
diff --git a/app/pages/store.vue b/app/pages/store.vue
index 36aa5c8..ea0defe 100644
--- a/app/pages/store.vue
+++ b/app/pages/store.vue
@@ -30,6 +30,11 @@
 </template>
 
 <script lang="ts" setup>
+	definePageMeta({
+		name: "Store",
+		icon: "lucide:database"
+	});
+
 	const input = ref("");
 	const result = ref("");
 	const autosave = ref(false);
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2b5f9a9..748dc96 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -27,6 +27,14 @@ export default defineNuxtConfig({
 	css: [
 		"@/assets/css/main.css"
 	],
+	icon: {
+		customCollections: [
+			{
+				prefix: "local",
+				dir: "./app/assets/icons"
+			}
+		]
+	},
 	svgo: {
 		autoImportPath: "@/assets/"
 	},