diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000..c52073b
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"
+>
+    <title>Document</title>
+</head>
+<body>
+    <div class="container">
+        <nav class="navbar" role="navigation" aria-label="main navigation">
+            <div class="navbar-brand">
+              <a class="navbar-item" href="/">
+                <img src="img/logo.png">
+                </a>        
+              <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbaryacine">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+              </a>
+            </div>
+            <div id="navbaryacine" class="navbar-menu">
+                <div class="navbar-start">
+            
+                  <a class="navbar-item">
+                    <a href="mario.html">mario</a>
+                  </a>
+                  <a class="navbar-item">
+                    <a href="splatoon.html">splatoon</a>
+                  </a>
+                  <a class="navbar-item">
+                    <a href="rayman.html">rayman</a>
+                  </a>
+                </div>
+                <div class="navbar-end">
+</body>
+</html>
\ No newline at end of file
diff --git a/css/SCRIPT.JS b/css/SCRIPT.JS
new file mode 100644
index 0000000..07d74d7
--- /dev/null
+++ b/css/SCRIPT.JS
@@ -0,0 +1,21 @@
+// TO DO
+$(document).ready(function() {
+
+    // Check for click events on the navbar burger icon
+    $(".navbar-burger").click(function() {
+  
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        $(".navbar-burger").toggleClass("is-active");
+        $(".navbar-menu").toggleClass("is-active");
+  
+    });
+  }
+);
+
+document.addEventListener("DOMContentLoaded", function() {
+  const switchTheme = document.querySelector("#switch");
+
+  switchTheme.addEventListener("click", function () {
+  document.body.classList.toggle("dark-mode");
+  });
+});
diff --git a/css/style.css b/css/style.css
index f78e6ec..b760f01 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,6 +2,25 @@
     margin: 0;
     padding: 0;
 }
-body{
-    background-image: url(background.png);
+:root{
+    --bg-color: #fff;
+    --primary-text-color: #222;
+    --secondary-text-color: #616060;
+  }
+
+body {
+    background: var(--bg-color);
+}
+.content {
+    color: var(--primary-text-color);
+    text-align: center;
+}
+.content p {
+    color: var(--secondary-text-color);
+}
+
+.dark-mode {
+    --bg-color: #3e4c59;
+    --primary-text-color: #fff;
+    --secondary-text-color: #ddd;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ab277a3..5b48182 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"
     >
-    <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/style.css">
 
     
 </head>
@@ -70,5 +70,22 @@
     </nav>
     <h1>home page</h1>
   </div>
+  <br>
+<div class="switch">
+    <input type="checkbox" id="switch" /><br>
+    <label for="switch">
+        <i class="fas fa-sun"></i>
+        <i class="fas fa-moon"></i>
+        <span class="ball"></span>
+    </label>
+</div>
+
+    <script>
+      const switchTheme = document.querySelector("#switch");
+
+      switchTheme.addEventListener("click", function () {
+      document.body.classList.toggle("dark-mode");
+      });
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/mario.html b/mario.html
index c18c356..fa8826f 100644
--- a/mario.html
+++ b/mario.html
@@ -27,7 +27,7 @@
                 <div class="navbar-start">
             
                   <a class="navbar-item">
-                    <a href="mario.html">mario</a>
+                    <a href="index.html">homecome</a>
                   </a>
                   <a class="navbar-item">
                     <a href="splatoon.html">splatoon</a>
diff --git a/rayman.html b/rayman.html
index 4c1a06d..9d74acb 100644
--- a/rayman.html
+++ b/rayman.html
@@ -33,7 +33,7 @@ l<!DOCTYPE html>
                     <a href="splatoon.html">splatoon</a>
                   </a>
                   <a class="navbar-item">
-                    <a href="rayman.html">rayman</a>
+                    <a href="index.html">homecome</a>
                   </a>
                 </div>
                 <div class="navbar-end">
diff --git a/splatoon.html b/splatoon.html
index 7fb8789..9e5a28d 100644
--- a/splatoon.html
+++ b/splatoon.html
@@ -31,7 +31,7 @@
                     <a href="mario.html">mario</a>
                   </a>
                   <a class="navbar-item">
-                    <a href="splatoon.html">splatoon</a>
+                    <a href="index.html">splatoon</a>
                   </a>
                   <a class="navbar-item">
                     <a href="rayman.html">rayman</a>
