diff --git a/fresh.gen.ts b/fresh.gen.ts
index 0d363ec..dad4883 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -3,6 +3,7 @@
 // This file is automatically updated during development when running `dev.ts`.
 
 import * as $_apps_layout from "./routes/(apps)/_layout.tsx";
+import * as $_apps_mobility_index from "./routes/(apps)/mobility/index.tsx";
 import * as $_apps_notes_index from "./routes/(apps)/notes/index.tsx";
 import * as $_apps_notes_partials_admin_courses from "./routes/(apps)/notes/partials/(admin)/courses.tsx";
 import * as $_apps_notes_partials_admin_students from "./routes/(apps)/notes/partials/(admin)/students.tsx";
@@ -24,6 +25,7 @@ import type { Manifest } from "$fresh/server.ts";
 const manifest = {
   routes: {
     "./routes/(apps)/_layout.tsx": $_apps_layout,
+    "./routes/(apps)/mobility/index.tsx": $_apps_mobility_index,
     "./routes/(apps)/notes/index.tsx": $_apps_notes_index,
     "./routes/(apps)/notes/partials/(admin)/courses.tsx":
       $_apps_notes_partials_admin_courses,
diff --git a/routes/(_components)/ModuleCard.tsx b/routes/(_components)/ModuleCard.tsx
new file mode 100644
index 0000000..8e77f1e
--- /dev/null
+++ b/routes/(_components)/ModuleCard.tsx
@@ -0,0 +1,16 @@
+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/(apps)/mobility/(_props)/props.ts b/routes/(apps)/mobility/(_props)/props.ts
new file mode 100644
index 0000000..db5371b
--- /dev/null
+++ b/routes/(apps)/mobility/(_props)/props.ts
@@ -0,0 +1,9 @@
+import { AppProperties } from "../../../(_islands)/AppNavigator.tsx";
+
+const properties: AppProperties = {
+  name: "PolyMobility",
+  icon: "flight_takeoff",
+  hint: "Gestionnaire de mobilité"
+};
+
+export default properties;
\ No newline at end of file
diff --git a/routes/(apps)/mobility/index.tsx b/routes/(apps)/mobility/index.tsx
new file mode 100644
index 0000000..ddfcc34
--- /dev/null
+++ b/routes/(apps)/mobility/index.tsx
@@ -0,0 +1,12 @@
+type ModulesProps = Record<string | number | symbol, never>;
+
+export default function Modules(_props: ModulesProps) {
+  return (
+    <>
+      <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 d1b2803..c814a4d 100644
--- a/routes/(apps)/notes/(_props)/props.ts
+++ b/routes/(apps)/notes/(_props)/props.ts
@@ -10,6 +10,7 @@ const properties: AppProperties = {
     students: "Students management",
   },
   adminOnly: ["courses", "students"],
+  hint: "Gestionnaire de note"
 };
 
 export default properties;
diff --git a/routes/_app.tsx b/routes/_app.tsx
index d98cbde..f9c96ac 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -16,14 +16,8 @@ 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&icon_names=school"
-        />
+        <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 a210e9a..997573a 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,10 +1,49 @@
-import { FreshContext } from "$fresh/server.ts";
+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);
+  },
+};
 
 // deno-lint-ignore require-await
-export default async function Home(_request: Request, _context: FreshContext) {
+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>
+      </>
+    );
+  }
+
   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>
     </>
   );
 }