diff --git a/app.js b/app.js
index 60e5638c370cd6dc825db9103c474f091c03d522..39038244d4219effcf13ec8813213b1519bbed64 100644
--- a/app.js
+++ b/app.js
@@ -5,7 +5,6 @@ const db = require('./db/Database.js');
 const auth = require('./controller/AuthController.js');
 const bodyParser = require('body-parser');
 const cookieParser = require('cookie-parser');
-const bcrypt = require('bcrypt');
 const { createHash, randomBytes } = require('crypto');
 
 
@@ -83,6 +82,14 @@ app.get("/document", (req, res) => {
     res.render("document", { title: 'Créer un Document' });
 });
 
+app.get("/mydocuments", (req, res) => {
+    if (!res.locals.user) {
+        return res.redirect("/login"); // Redirige vers la page de connexion si l'utilisateur n'est pas connecté
+    }
+    res.render("mydocuments", { title: 'Mes Documents' });
+});
+
+
 
 //  route pour la sauvegarde de documents 
 app.post('/document/save', async (req, res) => {
diff --git a/public/css/spreadsheet-style.css b/public/css/spreadsheet-style.css
index 15a43b7ddfa68a9b9b8495f732740b5671d484e7..261629e6a5c405fb3cec8ad5178de4ad82eeb2b7 100644
--- a/public/css/spreadsheet-style.css
+++ b/public/css/spreadsheet-style.css
@@ -20,4 +20,52 @@
   tr:nth-child(odd) td {
     background-color: #f9f9f9;
   }
-  
\ No newline at end of file
+
+  .navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #081229;
+    color: white;
+}
+
+.navbar_ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #081229;
+}
+
+.navbar li {
+  float: left;
+  text-align: center;
+  padding: 20px 16px;
+}
+
+.navbar li a {
+  display: block;
+  color: white;
+  text-decoration: none;
+}
+
+.navbar li a:hover {
+  background-color: #111;
+}
+
+.navbar button{
+  float : right;
+  background: #0b3595;
+  border: 0;
+  outline : none;
+  border-radius: 30px;
+  color: white;
+}
+
+footer {
+  text-align: center;
+  padding: 5px;
+  background-color: #081229;
+  color: #FFF;
+}
diff --git a/public/res/construction.png b/public/res/construction.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcd3f1032950c9839b9d2bc74fc1b39e7f51d72b
Binary files /dev/null and b/public/res/construction.png differ
diff --git a/views/document.ejs b/views/document.ejs
index 575af694601cadbd0ab816cf0203e8fe3668872c..54f9e6c40e2b046af8a80a67c722e7d0da76ee02 100644
--- a/views/document.ejs
+++ b/views/document.ejs
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Signup Page</title>
+    <title>Création document</title>
     <link rel="stylesheet" href="/css/spreadsheet-style.css">
 </head>
 
diff --git a/views/mydocuments.ejs b/views/mydocuments.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..9d3c92108286575312f43d5af3e978eb7d08a89c
--- /dev/null
+++ b/views/mydocuments.ejs
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Construction en cours</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            font-family: Arial, sans-serif;
+            background-color: #f1f1f1;
+        }
+
+        .container {
+            text-align: center;
+        }
+
+        .message {
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 20px;
+        }
+
+        .image {
+            width: 200px;
+            height: 200px;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1 class="message">Construction en cours</h1>
+        <img class="image" src="res/construction.png" alt="Construction en cours">
+        <p>Veuillez revenir ultérieurement.</p>
+    </div>
+</body>
+</html>
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index 7a135954989f553a927af19669b6c45d68a2bca3..e91c84fc0e6a15461cb7b184cb964161080bde61 100644
--- a/views/partials/footer.ejs
+++ b/views/partials/footer.ejs
@@ -1,6 +1,4 @@
 <footer>
     <!-- Contenu de ton pied de page ici -->
-    <p> this is footer</p>
+    <p> CollabSheet </p>
 </footer>
-</body>
-</html>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 0a58c8c5815abe346721d276e987a623b4b9ad2f..5e96195fa81669ba758ea0cc268b67285fbdbc37 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -3,13 +3,22 @@
     
 
     <p>this is header</p>
-
-    <% if (locals.user) { %>
-        <div class="main-content">
-            Bonjour, <%= locals.user.username %>!
-            <form action="/logout" method="post">
-                <button type="submit">Se Déconnecter</button>
-            </form>
-        </div>
-    <% } %>
+    <div class="navbar">
+        <ul class="navbar_ul">
+            <% if (locals.user) { %>
+                <li>Bonjour, <%= locals.user.username %> !</li>
+            <% } %>
+            <li><a href="/">Accueil</a></li>
+            <li><a href="/mydocuments">Documents</a></li>
+            <li><a href="/document">Créer un document</a></li>
+            <% if (locals.user) { %>
+                    <form action="/logout" method="post">
+                        <li><button type="submit">Se Déconnecter</button> </li>
+                    </form>
+            <% }  else { %>
+                    <li><a href="/register">Inscription</a></li>
+                    <li><a href="/login">Connexion</a></li>
+            <% } %>
+        </ul>
+    </div>
 </header>