diff --git a/defaults/interfaces.ts b/defaults/interfaces.ts
index 8b33c66..9b417e2 100644
--- a/defaults/interfaces.ts
+++ b/defaults/interfaces.ts
@@ -3,6 +3,7 @@ export interface AppProperties {
   icon: string;
   pages: Record<string, string>;
   adminOnly: string[];
+  hint: string;
 }
 
 export type EmptyObject = Record<string | number | symbol, never>;
diff --git a/routes/(_components)/AppCard.tsx b/routes/(_components)/AppCard.tsx
new file mode 100644
index 0000000..a786ada
--- /dev/null
+++ b/routes/(_components)/AppCard.tsx
@@ -0,0 +1,17 @@
+import { AppProperties } from "$root/defaults/interfaces.ts";
+
+type AppCardProps = {
+  app: AppProperties;
+  href: string;
+};
+
+export default function AppCard(props: AppCardProps) {
+  return (
+    <div className="app-card">
+      <a href={`/${props.href}`} f-client-nav={false}>
+        <span className="material-symbols-outlined">{props.app.icon}</span>
+        <p>{props.app.name}</p>
+      </a>
+    </div>
+  );
+}
diff --git a/routes/(_components)/ModuleCard.tsx b/routes/(_components)/ModuleCard.tsx
deleted file mode 100644
index 8e77f1e..0000000
--- a/routes/(_components)/ModuleCard.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { AppProperties } from "../(_islands)/AppNavigator.tsx";
-
-type ModuleCardProps = {
-  module: AppProperties;
-};
-
-export default function ModuleCard({ module }: ModuleCardProps) {
-  return (
-    <div className="module-card">
-      <a href={`/${module.name}`}>
-        <span className="material-symbols-outlined">{module.icon}</span>
-        <p>{module.name}</p>
-      </a>
-    </div>
-  );
-}
diff --git a/routes/(_islands)/AppNavigator.tsx b/routes/(_islands)/AppNavigator.tsx
index 4618a55..89b9a08 100644
--- a/routes/(_islands)/AppNavigator.tsx
+++ b/routes/(_islands)/AppNavigator.tsx
@@ -1,13 +1,29 @@
 import { AppProperties } from "$root/defaults/interfaces.ts";
+import AppCard from "$root/routes/(_components)/AppCard.tsx";
 
 type AppNavigatorProps = {
   apps: Record<string, AppProperties>;
 };
 
 export default function AppNavigator(props: AppNavigatorProps) {
+  if (!props.apps) {
+    return (
+      <>
+        <h2>Welcome to PolyMPR!</h2>
+        <p>No apps available.</p>
+      </>
+    );
+  }
+
   return (
     <>
-      <p>{JSON.stringify(props.apps)}</p>
+      <h2>Welcome to PolyMPR!</h2>
+      <h3>app list</h3>
+      <div className="app-list">
+        {Object.entries(props.apps).map(([key, app]) => (
+          <AppCard href={key} app={app} />
+        ))}
+      </div>
     </>
   );
 }
diff --git a/routes/(apps)/mobility/(_props)/props.ts b/routes/(apps)/mobility/(_props)/props.ts
index db5371b..3a89c13 100644
--- a/routes/(apps)/mobility/(_props)/props.ts
+++ b/routes/(apps)/mobility/(_props)/props.ts
@@ -3,7 +3,7 @@ import { AppProperties } from "../../../(_islands)/AppNavigator.tsx";
 const properties: AppProperties = {
   name: "PolyMobility",
   icon: "flight_takeoff",
-  hint: "Gestionnaire de mobilité"
+  hint: "Gestionnaire de mobilité",
 };
 
-export default properties;
\ No newline at end of file
+export default properties;
diff --git a/routes/(apps)/mobility/index.tsx b/routes/(apps)/mobility/index.tsx
index ddfcc34..dd79f2b 100644
--- a/routes/(apps)/mobility/index.tsx
+++ b/routes/(apps)/mobility/index.tsx
@@ -5,8 +5,7 @@ export default function Modules(_props: ModulesProps) {
     <>
       <h2>All PolyMPR modules</h2>
       <nav>
-        
       </nav>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/routes/(apps)/notes/(_props)/props.ts b/routes/(apps)/notes/(_props)/props.ts
index c814a4d..c433973 100644
--- a/routes/(apps)/notes/(_props)/props.ts
+++ b/routes/(apps)/notes/(_props)/props.ts
@@ -10,7 +10,7 @@ const properties: AppProperties = {
     students: "Students management",
   },
   adminOnly: ["courses", "students"],
-  hint: "Gestionnaire de note"
+  hint: "Gestionnaire de note",
 };
 
 export default properties;
diff --git a/routes/_app.tsx b/routes/_app.tsx
index f9c96ac..8c8c92e 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -16,8 +16,14 @@ export default async function App(
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>PolyMPR</title>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
+        />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
+        />
         <link rel="stylesheet" href="/styles/main.css" />
         <link rel="stylesheet" href="/styles/app.css" />
       </head>
diff --git a/routes/index.tsx b/routes/index.tsx
index 997573a..a210e9a 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,49 +1,10 @@
-import { FreshContext, Handlers } from "$fresh/server.ts";
-import ModuleCard from "./(_components)/ModuleCard.tsx";
-import { AppProperties } from "./(_islands)/AppNavigator.tsx";
-
-export const handler: Handlers = {
-  async GET(_request, context) {
-    const apps: Record<string, AppProperties> = {};
-
-    for await (const appDir of Deno.readDir("routes/(apps)")) {
-      try {
-        const properties: AppProperties = (await import(
-          `./(apps)/${appDir.name}/(_props)/props.ts`
-        )).default;
-        apps[appDir.name] = properties;
-      } catch (error) {
-        console.error(`Couldn't import app "${appDir.name}": ${error}`);
-      }
-    }
-
-    return context.render(apps);
-  },
-};
+import { FreshContext } from "$fresh/server.ts";
 
 // deno-lint-ignore require-await
-export default async function Home(_request: Request, context: FreshContext) {
-  const apps: Record<string, AppProperties> = context.data;
-  console.log("Context data:", context.data);
-
-  if (!apps) {
-    return (
-      <>
-        <h2>Welcome to PolyMPR!</h2>
-        <p>No modules available.</p>
-      </>
-    );
-  }
-
+export default async function Home(_request: Request, _context: FreshContext) {
   return (
     <>
       <h2>Welcome to PolyMPR!</h2>
-      <h3>Module list</h3>
-      <div className="module-list">
-        {Object.entries(apps).map(([key, module]) => (
-          <ModuleCard key={key} module={module} />
-        ))}
-      </div>
     </>
   );
 }