diff --git a/app/components/Site/Navbar.vue b/app/components/Site/Navbar.vue
index c02cbee..6bc3b11 100644
--- a/app/components/Site/Navbar.vue
+++ b/app/components/Site/Navbar.vue
@@ -13,6 +13,7 @@
 				variant="link"
 				:ui="{
 					root: 'hidden md:flex',
+					viewportWrapper: 'max-w-2xl absolute-center-h',
 					list: 'md:gap-x-2'
 				}"
 			/>
diff --git a/app/composables/pages.ts b/app/composables/pages.ts
index 1f96d51..62a853a 100644
--- a/app/composables/pages.ts
+++ b/app/composables/pages.ts
@@ -1,13 +1,32 @@
 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
-		};
-	});
+	const routes = router.getRoutes().filter((route) => route.name !== "index" && route.name !== "all");
+
+	const categorizedRoutes = routes.reduce((acc, route) => {
+		const category = route.meta.category as string;
+		if (!category) return acc;
+
+		if (!acc[category]) {
+			acc[category] = {
+				label: category.charAt(0).toUpperCase() + category.slice(1),
+				icon: route.meta.categoryIcon || "i-lucide-folder",
+				to: route.path,
+				children: []
+			};
+		}
+
+		acc[category].children.push({
+			label: route.meta.name as string,
+			description: route.meta.description as string,
+			icon: `i-${route.meta.icon}`,
+			to: route.path
+		});
+
+		return acc;
+	}, {} as Record<string, any>);
+
+	const pages = Object.values(categorizedRoutes);
 
 	return {
 		pages
diff --git a/app/pages/commands.vue b/app/pages/commands.vue
index fca35ca..4d16482 100644
--- a/app/pages/commands.vue
+++ b/app/pages/commands.vue
@@ -25,8 +25,11 @@
 
 <script lang="ts" setup>
 	definePageMeta({
-		name: "Commands",
-		icon: "lucide:square-terminal"
+		name: "Shell commands",
+		icon: "lucide:terminal",
+		description: "Execute shell commands",
+		category: "system",
+		categoryIcon: "lucide:square-terminal"
 	});
 
 	const schema = z.object({
diff --git a/app/pages/file.vue b/app/pages/file.vue
index 3ec2926..e20890d 100644
--- a/app/pages/file.vue
+++ b/app/pages/file.vue
@@ -22,7 +22,10 @@
 <script lang="ts" setup>
 	definePageMeta({
 		name: "Files",
-		icon: "lucide:file-text"
+		icon: "lucide:file-text",
+		category: "storage",
+		categoryIcon: "lucide:database",
+		description: "Create and manage files"
 	});
 
 	const schema = z.object({
diff --git a/app/pages/notifications.vue b/app/pages/notifications.vue
index ebc28c8..b298d37 100644
--- a/app/pages/notifications.vue
+++ b/app/pages/notifications.vue
@@ -22,7 +22,10 @@
 <script lang="ts" setup>
 	definePageMeta({
 		name: "Notifications",
-		icon: "lucide:message-square-more"
+		icon: "lucide:message-square-more",
+		category: "interface",
+		categoryIcon: "lucide:app-window-mac",
+		description: "Send native notifications"
 	});
 
 	const schema = z.object({
diff --git a/app/pages/os.vue b/app/pages/os.vue
index 78121ff..20d1e8c 100644
--- a/app/pages/os.vue
+++ b/app/pages/os.vue
@@ -10,7 +10,10 @@
 <script lang="ts" setup>
 	definePageMeta({
 		name: "OS Informations",
-		icon: "lucide:info"
+		icon: "lucide:info",
+		category: "system",
+		categoryIcon: "lucide:square-terminal",
+		description: "Read operating system informations."
 	});
 
 	const items = ref([
diff --git a/app/pages/store.vue b/app/pages/store.vue
index d7c8bfc..51baecd 100644
--- a/app/pages/store.vue
+++ b/app/pages/store.vue
@@ -26,7 +26,10 @@
 <script lang="ts" setup>
 	definePageMeta({
 		name: "Store",
-		icon: "lucide:database"
+		icon: "lucide:database",
+		category: "storage",
+		categoryIcon: "lucide:database",
+		description: "Handle file creation in the file system"
 	});
 
 	const schema = z.object({
diff --git a/app/pages/webview.vue b/app/pages/webview.vue
index bbcb11d..0679815 100644
--- a/app/pages/webview.vue
+++ b/app/pages/webview.vue
@@ -17,7 +17,10 @@
 <script lang="ts" setup>
 	definePageMeta({
 		name: "Webview",
-		icon: "lucide:app-window-mac"
+		icon: "lucide:app-window-mac",
+		category: "interface",
+		categoryIcon: "lucide:app-window-mac",
+		description: "Create new webview in a detached window"
 	});
 
 	const { app } = useAppConfig();