diff --git a/css/desktop_9.css b/css/desktop_9.css
index 57918c8..9c26b62 100644
--- a/css/desktop_9.css
+++ b/css/desktop_9.css
@@ -18,6 +18,7 @@
     color: white;
 
 }
+
 #themeImg{
     width: 25px;
     height: 25px;
@@ -81,6 +82,13 @@ nav {
     margin-left: 10px;
 }
 
+/* dark sec 1 */
+
+.dark-button {
+    background-color: #1A1A1A;
+    color: white;
+}
+
 .calendar_container {
     display: flex;
     align-items: center;
diff --git a/css/navbar.css b/css/navbar.css
index b8d4e8e..d3c1e3c 100644
--- a/css/navbar.css
+++ b/css/navbar.css
@@ -280,7 +280,7 @@ body{
   margin-bottom: 10px;
 }
 .popup :hover {
-  border: 2px solid blue ;
+  
    transform: scale(1.01);
    transition: all 0.2s ease-in;
 }
diff --git a/css/sec1.css b/css/sec1.css
index 1399f5b..a40b179 100644
--- a/css/sec1.css
+++ b/css/sec1.css
@@ -1,78 +1,87 @@
-:root {
-    --element-color: black;
-    --element1-color:rgba(0, 0, 0, 0.5);
-    --element2-color:rgba(0, 0, 0, 0.8);
-}
-
-
+/* :root {
+	--element-color: black;
+	--element1-color: rgba(0, 0, 0, 0.5);
+	--element2-color: rgba(0, 0, 0, 0.8);
+} */
 
 .sec1 {
-    height: 20rem;
-    margin-top: 110px;
-    width: 100%;
+	height: 20rem;
+	margin-top: 110px;
+	width: 100%;
 }
 
 .s1part1 {
-    height: 7rem;
-    width: 97%;
-    margin: 3.2rem 2%;
-    border-radius: 2rem;
-    background-color: #7D41E2;
-    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.199);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
+	height: 7rem;
+	width: 97%;
+	margin: 3.2rem 2%;
+	border-radius: 2rem;
+	background-color: #7d41e2;
+	box-shadow: 0 2px 1px rgba(0, 0, 0, 0.199);
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .s1part1 span {
-    font-size: 2.7em;
-    font-weight: bold;
-    color: white;
+	font-size: 2.7em;
+	font-weight: bold;
+	color: white;
 }
 
 .search {
-    height: 3rem;
-    width: 34rem;
-    border-radius: 2rem;
-    position: relative;
-    top: -2.5rem;
-    background-color: white;
-    border: none;
-    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.155);
-    color: rgba(0, 0, 0, 0.148);
-    left: 50%;
-    transform: translate(-50%, -50%);
+	height: 3rem;
+	width: 34rem;
+	border-radius: 2rem;
+	position: relative;
+	top: -2.5rem;
+	background-color: white;
+	border: none;
+	box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.155);
+	color: rgba(0, 0, 0, 0.148);
+	left: 50%;
+	transform: translate(-50%, -50%);
 }
 
 .search[placeholder] {
-    color: black;
-    padding-left: 1rem;
+	color: black;
+	padding-left: 1rem;
 }
 
 .s1part2 {
-    /* border: 1px solid black; */
-    height: 5vw;
-    width: 40vw;
-    position: relative;
-    left: 33vw;
-    bottom: 3vw;
-    display: flex;
-    align-items: center;
+	/* border: 1px solid black; */
+	height: 5vw;
+	width: 40vw;
+	position: relative;
+	left: 33vw;
+	bottom: 3vw;
+	display: flex;
+	align-items: center;
 }
 
 .s1part2 a:hover {
-    text-decoration: underline;
+	text-decoration: underline;
 }
-.buttons{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    margin: -2rem 0.7rem;
-
+.buttons {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	margin: -2rem 0.7rem;
+	/* color: white; */
 }
 .s1btn1 {
+	width: fit-content;
+	padding: 0.9rem;
+	margin: 0 0.7rem;
+	border: none;
+	border-radius: 1rem;
+	background-color: transparent;
+	/* background-color: #ff765d; */
+	/* color: white; */
+}
+.s1btn1:hover {
+	background-color: #ff765d;
+
     /* width:fit-content;
     padding: .9rem;
     margin: 0 0.7rem;
@@ -106,10 +115,11 @@
 .s1btn1-recent:hover{
     color: #fff;
     background-color: #ff765d;
+
 }
 
 .s1part2 a {
-    margin: 0 0.7vw;
-    text-decoration: none;
-    color: var(--element-color);
-}
\ No newline at end of file
+	margin: 0 0.7vw;
+	text-decoration: none;
+	color: var(--element-color);
+}
diff --git a/index.html b/index.html
index c0b85ce..6f233ad 100644
--- a/index.html
+++ b/index.html
@@ -43,10 +43,22 @@
     <div class="navs2">
       <!-- <img src="img/final logo 1.png" alt="" /> -->
       <img src="assests/moon.png" alt="image" id="themeImg">
+
+
+      <button onclick="click" id="loginButton" class="button_nav txtColor1" style=" background-color:#208FF4 ; color: white;">Log
+        In</button>
+      <button id="signup" class="button_nav txtColor">Sign Up</button>
+      <button onclick="click" id="Calender" class="button_nav txtColor1" style=" background-color:#208FF4 ; color: white;">Calendar</button>
+
+      <button onclick="click" id="loginButton" class="button_nav txtColor hello" >Log
+        In</button>
+
       <button  id="loginButton" class="button_nav txtColor hello" ><a href="login.html">
        LogIn</a></button>
+
       <button id="signup" class="button_nav txtColor">Sign Up</button>
       <button onclick="click" id="Calender" class="button_nav txtColor1 hello">Calendar</button>
+
     </div>
   </div>
 <!--Calender-->
@@ -112,16 +124,16 @@
       </script>
     </div>
     <input class="search" placeholder="Search"></input>
-    <div class="buttons">
+    <div class="buttons" id="sec1">
       <button class="s1btn1" >All</button>
-      <button class="s1btn1" style="background-color: white;color:black;" id = 'Tech' onclick="buttonClick('Tech')">Technology</button>
-      <button class="s1btn1"style="background-color: white;color:black;" id = 'branding' onclick="buttonClick('branding')">Branding </button>
-        <button class="s1btn1"style="background-color: white;color:black" id = 'news' onclick="buttonClick('news')" >News</button>
-          <button class="s1btn1"style="background-color: white;color:black"  id = 'AI' onclick="buttonClick('AI')" > AI</button>
-            <button class="s1btn1"style="background-color: white;color:black" id = 'Management' onclick="buttonClick('Management')" >Management</button>
-              <button class="s1btn1"style="background-color: white;color:black" id = 'Design' onclick="buttonClick('Design')">Design</button>
+      <button class="s1btn1"  id = 'Tech' onclick="buttonClick('Tech')">Technology</button>
+      <button class="s1btn1" id = 'branding' onclick="buttonClick('branding')">Branding </button>
+        <button class="s1btn1" id = 'news' onclick="buttonClick('news')" >News</button>
+          <button class="s1btn1"  id = 'AI' onclick="buttonClick('AI')" > AI</button>
+            <button class="s1btn1" id = 'Management' onclick="buttonClick('Management')" >Management</button>
+              <button class="s1btn1" id = 'Design' onclick="buttonClick('Design')">Design</button>
     </div>
-   
+    <!-- style="background-color: transparent;color:black;" -->
   </div>
   <!-- Sec-2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
 
diff --git a/js/Landingpage.js b/js/Landingpage.js
index 274f943..14f8bb9 100644
--- a/js/Landingpage.js
+++ b/js/Landingpage.js
@@ -6,13 +6,13 @@ console.log("FucY")
   function buttonClick(ele) {
     NavBar= document.getElementsByClassName("s1btn1");
     console.log("Hi")
-    for(i=0; i<NavBar.length; i++)
-    {
-      NavBar[i].style.backgroundColor="white";
-      NavBar[i].style.color="black";
-    }
-    document.getElementById(ele).style.backgroundColor="#ff765d"
-    document.getElementById(ele).style.color="white";
+    // for(i=0; i<NavBar.length; i++)
+    // {
+    //   NavBar[i].style.backgroundColor="white";
+    //   NavBar[i].style.color="black";
+    // }
+    // document.getElementById(ele).style.backgroundColor="#ff765d"
+    // document.getElementById(ele).style.color="white";
     //
     var tbody = document.getElementById("tbody");
     let get = Array.from(document.getElementsByClassName('mainContainer'));
diff --git a/js/theme.js b/js/theme.js
index 91a9dbf..770bdb5 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -1,58 +1,77 @@
 let body = document.getElementsByTagName("BODY")[0];
 let themeBtn = document.getElementById("themeImg");
 let navbar = document.getElementById("navbar");
-const monthYearElement = document.getElementById('monthYear');
-const datesElement = document.getElementById('dates');
-const prevBtn = document.getElementById('prevBtn');
-const nextBtn = document.getElementById('nextBtn');
-const calendarContainer = document.querySelector('.calendar');
+const monthYearElement = document.getElementById("monthYear");
+const datesElement = document.getElementById("dates");
+const prevBtn = document.getElementById("prevBtn");
+const nextBtn = document.getElementById("nextBtn");
+const calendarContainer = document.querySelector(".calendar");
 
 let currentDate = new Date();
 
 const updateCalendar = () => {
-    const currentYear = currentDate.getFullYear();
-    const currentMonth = currentDate.getMonth();
-
-    const firstDay = new Date(currentYear, currentMonth, 1);
-    const lastDay = new Date(currentYear, currentMonth + 1, 0);
-    const totalDays = lastDay.getDate();
-    const firstDayIndex = firstDay.getDay();
-    const lastDayIndex = lastDay.getDay();
-
-    const monthYearString = currentDate.toLocaleString('default', { month: 'long', year: 'numeric' });
-    monthYearElement.textContent = monthYearString;
-
-    let datesHTML = '';
-
-    for (let i = firstDayIndex; i > 0; i--) {
-        const prevDate = new Date(currentYear, currentMonth, 0 - i + 1);
-        datesHTML += `<div class="date inactive">${prevDate.getDate()}</div>`;
-    }
-    for (let i = 1; i <= totalDays; i++) {
-        const date = new Date(currentYear, currentMonth, i);
-        const activeClass = date.toDateString() === new Date().toDateString() ? 'active' : '';
-        datesHTML += `<div class="date ${activeClass}">${i}</div>`;
-    }
-    for (let i = 1; i <= 6 - lastDayIndex; i++) {
-        const nextDate = new Date(currentYear, currentMonth + 1, i);
-        datesHTML += `<div class="date inactive">${nextDate.getDate()}</div>`;
-    }
-
-    datesElement.innerHTML = datesHTML;
+	const currentYear = currentDate.getFullYear();
+	const currentMonth = currentDate.getMonth();
+
+	const firstDay = new Date(currentYear, currentMonth, 1);
+	const lastDay = new Date(currentYear, currentMonth + 1, 0);
+	const totalDays = lastDay.getDate();
+	const firstDayIndex = firstDay.getDay();
+	const lastDayIndex = lastDay.getDay();
+
+	const monthYearString = currentDate.toLocaleString("default", {
+		month: "long",
+		year: "numeric",
+	});
+	monthYearElement.textContent = monthYearString;
+
+	let datesHTML = "";
+
+	for (let i = firstDayIndex; i > 0; i--) {
+		const prevDate = new Date(currentYear, currentMonth, 0 - i + 1);
+		datesHTML += `<div class="date inactive">${prevDate.getDate()}</div>`;
+	}
+	for (let i = 1; i <= totalDays; i++) {
+		const date = new Date(currentYear, currentMonth, i);
+		const activeClass =
+			date.toDateString() === new Date().toDateString() ? "active" : "";
+		datesHTML += `<div class="date ${activeClass}">${i}</div>`;
+	}
+	for (let i = 1; i <= 6 - lastDayIndex; i++) {
+		const nextDate = new Date(currentYear, currentMonth + 1, i);
+		datesHTML += `<div class="date inactive">${nextDate.getDate()}</div>`;
+	}
+
+	datesElement.innerHTML = datesHTML;
 };
 
-prevBtn.addEventListener('click', () => {
-    currentDate.setMonth(currentDate.getMonth() - 1);
-    updateCalendar();
+prevBtn.addEventListener("click", () => {
+	currentDate.setMonth(currentDate.getMonth() - 1);
+	updateCalendar();
 });
 
-nextBtn.addEventListener('click', () => {
-    currentDate.setMonth(currentDate.getMonth() + 1);
-    updateCalendar();
+nextBtn.addEventListener("click", () => {
+	currentDate.setMonth(currentDate.getMonth() + 1);
+	updateCalendar();
 });
 
 updateCalendar();
 
+
+themeBtn.addEventListener("click", function () {
+	body.classList.toggle("darktheme");
+	navbar.classList.toggle("darktheme");
+	let sec1Elements = document.querySelectorAll(".s1btn1");
+	sec1Elements.forEach((element) => {
+		element.classList.add("dark-button");
+	});
+	if (body.classList.contains("darktheme")) {
+		themeBtn.src = "assests/sun.png";
+	} else {
+		themeBtn.src = "assests/moon.png";
+		document.body.style.transition = "1s";
+	}
+
 // Function to toggle the theme and save preference to localStorage
 themeBtn.addEventListener('click',function(){
     body.classList.toggle("darktheme");
@@ -79,10 +98,35 @@ window.addEventListener('load', () => {
         navbar.classList.remove('darktheme');
         themeBtn.src = "assests/moon.png";
     }
+
 });
 
 // Function to toggle overlay display
 function click() {
+
+	const overlay = document.getElementById("overlay");
+	console.log("Baby");
+	overlay.style.display = overlay.style.display == "flex" ? "none" : "flex";
+}
+const loginButton = document.getElementById("loginButton");
+const overlay = document.getElementById("overlay");
+
+loginButton.addEventListener("click", () => {
+	overlay.style.display = "flex";
+	console.log("Hello");
+});
+
+overlay.addEventListener("click", (event) => {
+	if (event.target === overlay) {
+		overlay.style.display = "none";
+	}
+});
+
+function click() {
+	const overlay1 = document.getElementById("overlay1");
+	console.log("Baby");
+	overlay1.style.display = overlay1.style.display == "flex" ? "none" : "flex";
+
     const overlay = document.getElementById('overlay');
     console.log("Baby");
     overlay.style.display = overlay.style.display == "flex" ? "none" : "flex";
@@ -105,9 +149,20 @@ function click() {
     const overlay1 = document.getElementById('overlay1');
     console.log("Baby");
     overlay1.style.display = overlay1.style.display == "flex" ? "none" : "flex";
+
 }
-const Calender = document.getElementById('Calender');
-const overlay1 = document.getElementById('overlay1');
+const Calender = document.getElementById("Calender");
+const overlay1 = document.getElementById("overlay1");
+
+Calender.addEventListener("click", () => {
+	overlay1.style.display = "flex";
+	console.log("Hello");
+});
+
+overlay1.addEventListener("click", (event) => {
+	if (event.target === overlay1) {
+		overlay1.style.display = "none";
+	}
 
 Calender.addEventListener('click', () => {
     overlay1.style.display = 'flex';