diff --git a/httpdocs/cursus.html b/httpdocs/cursus.html
index 36b853d..69660c4 100644
--- a/httpdocs/cursus.html
+++ b/httpdocs/cursus.html
@@ -5,6 +5,7 @@
 		<meta charset="UTF-8">
 		<link type="text/css" rel="stylesheet" href="style.css">
 		<script src="effect.js" defer></script>
+		<script src="toggle.js"></script>
 		<title>Corentin</title>
 		<nav class="navbar"> 
 			<ul class="navbar-list">
diff --git a/httpdocs/form.html b/httpdocs/form.html
index 8c81037..c5ab494 100644
--- a/httpdocs/form.html
+++ b/httpdocs/form.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="effect.js" defer></script>
+    <script src="toggle.js"></script>
     <title>Contact Form</title>
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
diff --git a/httpdocs/images.html b/httpdocs/images.html
index 4c4e366..12d3ed9 100644
--- a/httpdocs/images.html
+++ b/httpdocs/images.html
@@ -5,6 +5,7 @@
 		<meta charset="UTF-8">
 		<link type="text/css" rel="stylesheet" href="style.css">
 		<script src="effect.js" defer></script>
+    <script src="toggle.js"></script>
 		<title>Corentin</title>
 		<nav class="navbar"> 
 			<ul class="navbar-list">
diff --git a/httpdocs/index.html b/httpdocs/index.html
index f3cabc9..b47b5a3 100644
--- a/httpdocs/index.html
+++ b/httpdocs/index.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="UTF-8">
 		<link type="text/css" rel="stylesheet" href="style.css">
+		<script src="toggle.js"></script>
 		<script src="effect.js" defer></script>
 		<title>Corentin</title>
 		<nav class="navbar"> 
diff --git a/httpdocs/planning.html b/httpdocs/planning.html
index 02f7f5c..afd7ee4 100644
--- a/httpdocs/planning.html
+++ b/httpdocs/planning.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="UTF-8">
 		<link type="text/css" rel="stylesheet" href="style.css">
+		<script src="toggle.js"></script>
 		<script src="effect.js" defer></script>
 		<title>Corentin</title>
 		<nav class="navbar"> 
diff --git a/httpdocs/project.html b/httpdocs/project.html
index ffca76d..c878486 100644
--- a/httpdocs/project.html
+++ b/httpdocs/project.html
@@ -5,6 +5,7 @@
     <link type="text/css" rel="stylesheet" href="style.css">
     <script src="effect.js" defer></script>
     <script src="project.js" defer></script> <!-- Load dynamic content -->
+    <script src="toggle.js"></script>
     <title>Projet</title>
 </head>
 <body>
diff --git a/httpdocs/toggle.js b/httpdocs/toggle.js
new file mode 100644
index 0000000..054afa6
--- /dev/null
+++ b/httpdocs/toggle.js
@@ -0,0 +1,7 @@
+const devMode = true; // set to false when you want to go back to your normal site
+
+if(devMode && window.location.pathname !== '/under-dev.html'){
+    window.location.replace('under-dev.html');
+} else if (!devMode && window.location.pathname === '/under-dev.html') {
+    window.location.replace('index.html');
+}
\ No newline at end of file
diff --git a/httpdocs/under_construction.html b/httpdocs/under_construction.html
new file mode 100644
index 0000000..e5d49bf
--- /dev/null
+++ b/httpdocs/under_construction.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <link type="text/css" rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <title>Corentin - En Construction</title>
+    <style>
+        .development-container {
+            text-align: center;
+            padding-top: 100px;
+        }
+
+        .dev-message {
+            font-family: 'Roboto', sans-serif;
+            font-size: 2em;
+            font-weight: bold;
+            color: #fff;
+            margin-top: 50px;
+            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
+        }
+
+        .dev-submessage {
+            font-family: 'Roboto', sans-serif;
+            font-size: 1.2em;
+            color: #ddd;
+            margin-top: 20px;
+        }
+
+        .spinner {
+            margin-top: 60px;
+            border: 10px solid #f3f3f3;
+            border-top: 10px solid #3498db;
+            border-radius: 50%;
+            width: 100px;
+            height: 100px;
+            animation: spin 2s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .spinner {
+            animation: spin 2s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        body {
+            background-color: #1a1a1a;
+            text-align: center;
+        }
+        </style>
+
+</head>
+<body>
+    <nav class="navbar">
+        <ul class="navbar-list">
+            <li><a href="index.html">Accueil</a></li>
+            <li><a href="cursus.html">Cursus</a></li>
+            <li><a href="planning.html">Planning</a></li>
+            <li class="dropdown">
+                <a href="#">Gallerie</a>
+                <ul class="dropdown-content">
+                    <li><a href="images.html">Images</a></li>
+                    <li><a href="videos.html">Vidéos</a></li>
+                </ul>
+            </li>
+            <li><a href="form.php">Formulaire</a></li>
+        </ul>
+    </nav>
+    <title>En Construction</title>
+
+</head>
+<body>
+    <div class="development-container" style="text-align: center; padding: 20px;">
+        <h1 class="dev-message">Page en cours de développement</h1>
+        <p class="dev-message">Revenez bientôt !</p>
+
+        <div class="spinner"></div>
+
+        <p class="dev-message">Merci pour votre patience !</p>
+    </div>
+</body>
+<footer>
+	<p style="text-align: center;">Pied de page</p>
+</footer>
+</html>
diff --git a/httpdocs/videos.html b/httpdocs/videos.html
index 71ff45d..bf87756 100644
--- a/httpdocs/videos.html
+++ b/httpdocs/videos.html
@@ -4,6 +4,8 @@
   <head>
     <meta charset="UTF-8" />
     <link type="text/css" rel="stylesheet" href="style.css" />
+    <script src="toggle.js"></script>
+    <script src="effect.js" defer></script>s
     <title>Corentin</title>
     <nav class="navbar">
       <ul class="navbar-list">
