diff --git a/frontend/app.vue b/frontend/app.vue
index 09f935b..14f2730 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <NuxtRouteAnnouncer />
-    <NuxtWelcome />
+    <NavBar />
+    <NuxtPage />
   </div>
 </template>
diff --git a/frontend/components/NavBar.vue b/frontend/components/NavBar.vue
new file mode 100644
index 0000000..38a985f
--- /dev/null
+++ b/frontend/components/NavBar.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="navbar">
+        <div class="navbar-start">
+            <a class="btn btn-ghost text-xl" href="/">Chrys4lide</a>
+        </div>
+        <nav class="navbar-center">
+            <NuxtLink to="/" class="btn btn-ghost">Accueil</NuxtLink>
+            <NuxtLink to="/CPS" class="btn btn-ghost">Carte CPS</NuxtLink>
+        </nav>
+        <div class="navbar-end">
+            <button class="btn btn-ghost" type="button">
+                Connexion
+            </button>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/pages/CPS.vue b/frontend/pages/CPS.vue
new file mode 100644
index 0000000..b971091
--- /dev/null
+++ b/frontend/pages/CPS.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <h1 class="text-xl">Carte CPS</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CPSCard',
+    data() {
+        return {};
+    }
+};
+</script>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
new file mode 100644
index 0000000..7e7dd3b
--- /dev/null
+++ b/frontend/pages/index.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <h1 class="text-xl">Welcome to your {{ appName }}!</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'HomePage',
+    data() {
+        return {
+            appName: 'Nuxt App'
+        };
+    }
+};
+</script>
+
+<style scoped>
+h1 {
+    color: #42b983;
+}
+</style>
\ No newline at end of file