diff --git a/index.html b/index.html
index 61329c6..352a3b1 100644
--- a/index.html
+++ b/index.html
@@ -1,50 +1,46 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>365 Days of Web Development</title>
     <link rel="stylesheet" href="./style.css">
 </head>
+
 <body>
     <header>
         <nav>
             <div class="logo">365 Days of Web Dev</div>
             <ul>
-                <li><a href="/">Home</a></li>
-                <li><a href="/projects">Projects</a></li>
-                <li><a href="/resources">Resources</a></li>
-                <li><a href="#contact">Contact</a></li>
+                <li><a href="#">Home</a></li>
+                <li><a href="#projects">Projects</a></li>
+                <li><a href="#resources">Resources</a></li>
+                <li><a href="#extra">More</a></li>
             </ul>
         </nav>
     </header>
 
     <main>
         <section id="home">
-            <h1>Welcome to My 365 Days of Web Development Journey</h1>
+            <h1>Welcome to the 365 Days of Web Development Journey</h1>
             <p>Join me as I create a new web project every day for a year!</p>
         </section>
 
-        <section id="about">
-            <h2>About This Challenge</h2>
-            <p>I've committed to building a new web development project every day for 365 days. This challenge is designed to improve my skills, explore new technologies, and create a diverse portfolio of web applications.</p>
-        </section>
-
         <section id="projects">
-            <h2>My Projects</h2>
+            <h2>Our Projects</h2>
             <div id="project-grid">
                 <!-- Project cards will be dynamically inserted here by JavaScript -->
             </div>
         </section>
 
-        <section id="contact">
-            <h2>Get in Touch</h2>
-            <form id="contact-form">
-                <input type="text" id="name" name="name" placeholder="Your Name" required>
-                <input type="email" id="email" name="email" placeholder="Your Email" required>
-                <textarea id="message" name="message" placeholder="Your Message" required></textarea>
-                <button type="submit">Send Message</button>
-            </form>
+        <section id="Resources">
+            <h2>About This Challenge</h2>
+            <p>I've committed to building a new web development project every day for 365 days. This challenge is designed to improve my skills, explore new technologies, and create a diverse portfolio of web applications.</p>
+        </section>
+
+        <section id="extra">
+            <h2>More Coming Soon! </h2>
         </section>
     </main>
 
@@ -53,14 +49,21 @@ <h2>Get in Touch</h2>
     </footer>
 
     <!-- Popup container -->
-    <div id="popup-container" class="popup-container">
-        <div class="popup-content">
-            <span class="close-popup">&times;</span>
-            <h2 id="popup-title"></h2>
-            <iframe id="project-iframe" src="" frameborder="0"></iframe>
+    <aside id="popup-container" class="popup-container">
+        <div class="popup-fix">
+            <div class="popup-header">
+                <span class="close-popup">&times;</span>
+                <h2 id="popup-title"></h2>
+            </div>
+            <div class="popup-content">
+                <iframe id="project-iframe" src="" frameborder="0"></iframe>
+            </div>
+            <div class="popup-footer"></div>
+
         </div>
-    </div>
+    </aside>
 
     <script src="./script.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index 24725e3..f2ab60e 100644
--- a/script.js
+++ b/script.js
@@ -1,8 +1,8 @@
 document.addEventListener('DOMContentLoaded', function() {
     // Sample project data (you'll need to update this as you complete projects)
     const projects = [
-        { id: 1, title: "Responsive Navbar", description: "A mobile-friendly navigation bar", link: "./projects/day-001-syntax-code-box/index.html" },
-        { id: 2, title: "To-Do List App", description: "A simple to-do list application", link: "./projects/day-002-toast-notification/index.html" },
+        { id: 1, title: "Syntax Code Box", description: "A mobile-friendly navigation bar", link: "./projects/day-001-syntax-code-box/index.html" },
+        { id: 2, title: "Toast Notification", description: "A simple to-do list application", link: "./projects/day-002-toast-notification/index.html" },
         // Add more projects here as you complete them
     ];
 
@@ -24,24 +24,6 @@ document.addEventListener('DOMContentLoaded', function() {
         projectGrid.appendChild(createProjectCard(project));
     });
 
-    // Handle form submission
-    const contactForm = document.getElementById('contact-form');
-    contactForm.addEventListener('submit', function(e) {
-        e.preventDefault();
-        const name = document.getElementById('name').value;
-        const email = document.getElementById('email').value;
-        const message = document.getElementById('message').value;
-
-        // Here you would typically send this data to a server
-        console.log('Form submitted:', { name, email, message });
-
-        // Clear the form
-        contactForm.reset();
-
-        // Show a success message (you might want to improve this)
-        alert('Thank you for your message! We\'ll get back to you soon.');
-    });
-
     // Smooth scrolling for navigation
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function(e) {
diff --git a/style.css b/style.css
index 232139a..0b14580 100644
--- a/style.css
+++ b/style.css
@@ -56,10 +56,12 @@ main {
 }
 
 section {
-    margin-bottom: 40px;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
-h1, h2 {
+h1,
+h2 {
     margin-bottom: 20px;
 }
 
@@ -72,7 +74,7 @@ h1, h2 {
 .project-card {
     background-color: #fff;
     border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     padding: 20px;
     transition: transform 0.3s ease;
     cursor: pointer;
@@ -99,7 +101,8 @@ form {
     flex-direction: column;
 }
 
-input, textarea {
+input,
+textarea {
     margin-bottom: 10px;
     padding: 10px;
     border: 1px solid #ddd;
@@ -131,29 +134,42 @@ footer {
 .popup-container {
     display: none;
     position: fixed;
-    top: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 2000;
 }
 
-.popup-content {
+.popup-fix {
+    display: flex;
+    flex-direction: column;
     position: relative;
     background-color: #fff;
-    margin: 5% auto;
-    padding: 20px;
-    width: 90%;
+    margin: 0px;
+    padding: 10px 20px;
+    overflow: hidden;
     max-width: 1000px;
-    height: 80%;
-    border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    width: 100vw;
+    height: 100vh;
+    box-shadow: 0 -4px -8px rgba(0, 0, 0, 0.2);
+}
+
+.popup-header, {
+    display: flex;
+    position: relative;
+    border-bottom: 0.1rem solid #DCDFF1;
+}
+
+.popup-header .popup-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
 }
 
-.close-popup {
+.popup-header .close-popup {
     position: absolute;
-    top: 10px;
+    top: 0px;
     right: 20px;
     font-size: 28px;
     font-weight: bold;
@@ -161,11 +177,16 @@ footer {
     cursor: pointer;
 }
 
+.popup-content {
+    display: block;
+    height: 100%;
+}
+
 #project-iframe {
     width: 100%;
     height: calc(100% - 40px);
     border: none;
-    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 @media (max-width: 768px) {
@@ -182,9 +203,9 @@ footer {
         margin-right: 20px;
     }
 
-    .popup-content {
-        width: 95%;
-        height: 90%;
-        margin: 5% auto;
+    .popup-fix {
+        width: 100vw;
+        height: 100vh;
+        margin: 0px;
     }
 }
\ No newline at end of file
