diff --git a/package-lock.json b/package-lock.json
index 1362d82..cffb7a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@tsconfig/svelte": "^5.0.0",
         "svelte": "^4.0.5",
         "svelte-check": "^3.4.6",
+        "svelte-routing": "^2.5.0",
         "tslib": "^2.6.0",
         "typescript": "^5.0.2",
         "vite": "^4.4.5"
@@ -1473,6 +1474,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/svelte-routing": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-2.5.0.tgz",
+      "integrity": "sha512-fM8yb6qRaaOZiOtNkh8lLt4myEINjVWUzQOmLYelrIuAAVW1q4y4IYHOA78D+iDE/Abl3aiFDHn/kS/kZNvRWA==",
+      "dev": true
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index 1a55ff7..ed13a0e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@tsconfig/svelte": "^5.0.0",
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.6",
+    "svelte-routing": "^2.5.0",
     "tslib": "^2.6.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
diff --git a/src/App.svelte b/src/App.svelte
index d79af47..b512b8e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
-   import Datepicker from './lib/Datepicker.svelte';
-
-   let pickedDate: Date;
+   import { Link, Route, Router } from 'svelte-routing';
+   import Calendar from './routes/calendar/Calendar.svelte';
+   import LostAndFound from './routes/lost-and-found/LostAndFound.svelte';
 </script>
 
-<main>
-   <p>{pickedDate}</p>
-   <Datepicker bind:date={pickedDate} />
-</main>
+<Router>
+   <nav>
+      <Link to="/">Calendar</Link>
+      <Link to="/lost-and-found">Blog</Link>
+   </nav>
+   <main>
+      <Route path="/lost-and-found" component={LostAndFound} />
+      <Route path="/"><Calendar /></Route>
+   </main>
+</Router>
diff --git a/src/model/reservation.model.ts b/src/model/reservation.model.ts
new file mode 100644
index 0000000..2ec3e3a
--- /dev/null
+++ b/src/model/reservation.model.ts
@@ -0,0 +1,8 @@
+export interface Reservation {
+   id: string;
+   owner: string;
+   startTime: number; //timestamp
+   endTime: number; //timestamp
+}
+
+export type ReservationStoreData = Reservation[] | null;
diff --git a/src/model/reservation.store.ts b/src/model/reservation.store.ts
new file mode 100644
index 0000000..1577ebf
--- /dev/null
+++ b/src/model/reservation.store.ts
@@ -0,0 +1,23 @@
+import { writable } from 'svelte/store';
+import type { Reservation, ReservationStoreData } from './reservation.model';
+
+const mockedReservations: Reservation[] = [
+   {
+      id: '1',
+      owner: '1',
+      startTime: 1698667200,
+      endTime: 1698670800,
+   },
+   {
+      id: '2',
+      owner: '2',
+      startTime: 1698678000,
+      endTime: 1698681600,
+   },
+];
+
+const reservations$ = writable<ReservationStoreData>(null);
+
+export const loadSlots = (): Reservation[] => {
+   return mockedReservations;
+};
diff --git a/src/routes/calendar/Calendar.svelte b/src/routes/calendar/Calendar.svelte
new file mode 100644
index 0000000..7e43061
--- /dev/null
+++ b/src/routes/calendar/Calendar.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+   import Datepicker from '../../lib/Datepicker.svelte';
+
+   let pickedDate: Date;
+</script>
+
+<p>{pickedDate}</p>
+<Datepicker bind:date={pickedDate} />
diff --git a/src/routes/lost-and-found/LostAndFound.svelte b/src/routes/lost-and-found/LostAndFound.svelte
new file mode 100644
index 0000000..672ecdd
--- /dev/null
+++ b/src/routes/lost-and-found/LostAndFound.svelte
@@ -0,0 +1 @@
+<p>Hello Ariane!</p>