diff --git a/WebGames-master/WebGames-master/script.js b/WebGames-master/WebGames-master/script.js
index c8ddff23..b5f851a0 100644
--- a/WebGames-master/WebGames-master/script.js
+++ b/WebGames-master/WebGames-master/script.js
@@ -498,6 +498,16 @@ const mainContentData = [
     image: "/WebGames-master/WebGames-master/games2/game/krunker/img/krunker-io.jpg",
     link: "/WebGames-master/WebGames-master/games2/game/krunker/index.html",
   },
+  {
+    name: "Don't Get Clicked!",
+    image: "/WebGames-master/WebGames-master/games2/game/krunker/img/krunker-io.jpg",
+    link: "/WebGames-master/WebGames-master/games2/game/krunker/index.html",
+  },
+  {
+    name: "Pokemon",
+    image: "/WebGames-master/WebGames-master/games2/game/krunker/img/krunker-io.jpg",
+    link: "/WebGames-master/WebGames-master/games2/game/krunker/index.html",
+  },
 ];
 
 mainContentData.forEach(item => {
diff --git a/script3.js b/script3.js
new file mode 100644
index 00000000..3e6c7a81
--- /dev/null
+++ b/script3.js
@@ -0,0 +1,93 @@
+const mainContent = document.querySelector(".main-content");
+const navBar = document.querySelector(".nav-bar");
+const gameText = document.getElementsByClassName("game-text");
+const navItem = document.getElementsByClassName("nav-item");
+const gameIcon = document.getElementsByClassName("game");
+const sideBar = document.getElementById("side-bar-menu");
+const darkModeIcon = document.getElementById("dark-mode-icon");
+const sidebarDarkModeIcon = document.getElementById("sidebar-dark-mode-icon");
+
+const onToggleDarkMode = () => {
+  if (darkModeIcon.classList.contains("fa-moon")) {
+    mainContent.style.backgroundColor = "#15202B";
+    sideBar.style.backgroundColor = "rgb(1, 125, 63)";
+    for (let i = 0; i < gameText.length; i++) {
+      gameText[i].style.color = "#E4E6EB";
+    }
+    for (let i = 0; i < gameIcon.length; i++) {
+      gameIcon[i].style.setProperty("--game-icon-hover-color", "#22303C");
+    }
+
+    navBar.style.backgroundColor = "#03DAC5";
+    navBar.style.color = "#212628";
+    for (let i = 0; i < navItem.length; i++) {
+      navItem[i].style.color = "#212628";
+    }
+    darkModeIcon.className = "fa-solid fa-sun";
+    sidebarDarkModeIcon.className = "fa-solid fa-sun";
+  } else {
+    mainContent.style.backgroundColor = "white";
+    sideBar.style.backgroundColor = "rgb(0, 144, 72)";
+    for (let i = 0; i < gameText.length; i++) {
+      gameText[i].style.color = "#333333";
+    }
+    for (let i = 0; i < gameIcon.length; i++) {
+      gameIcon[i].style.setProperty("--game-icon-hover-color", "#dedede");
+    }
+
+    navBar.style.backgroundColor = "#009090";
+    navBar.style.color = "white";
+    for (let i = 0; i < navItem.length; i++) {
+      navItem[i].style.color = "white";
+    }
+    darkModeIcon.className = "fa-solid fa-moon";
+    sidebarDarkModeIcon.className = "fa-solid fa-moon";
+  }
+};
+
+
+const toggleSideBar = () => {
+  const currentWidth = sideBar.style.width;
+  if (currentWidth === "73vw") {
+    sideBar.style.width = "0";
+    mainContent.style.filter = "brightness(1)";
+  } else {
+    sideBar.style.width = "73vw";
+    mainContent.style.filter = "brightness(50%)";
+  }
+};
+
+// Rendering the main content dynamically
+const mainContentData = [
+  {
+    name: "games",
+    image: "/images.png",
+    link: "/WebGames-master/WebGames-master/index.html",
+  },
+  {
+    name: " old games",
+    image: "images1.png",
+    link: "/games.html",
+  
+  },
+  {
+    name: "credits",
+    image: "images1.png",
+    link: "/credits.html",
+  },
+  {
+    name: "games coming soon",
+    image: "/gamestooadd.jpeg",
+    link: "/gametoadd.html",
+  },
+];
+mainContentData.forEach(item => {
+  let newDiv = `
+     <a href=${item.link} class="game game1" >
+        <img src=${item.image} alt="" />
+        <h3 class="game-text">${item.name}</h3>
+      </a>
+  `;
+
+  mainContent.innerHTML += newDiv;
+});