diff --git a/index.html b/index.html
index 87f2644..fb98d6b 100644
--- a/index.html
+++ b/index.html
@@ -1,59 +1,82 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Daily Dose of Music</title>
-
-    <link
-      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Press+Start+2P&display=swap"
-      rel="stylesheet"
-    />
-
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <header>
-      <nav>
-        <div class="navigation">
-          <div class="navigation-items">
-            <a href="index.html">Home</a>
-            <a href="discover.html">Discover</a>
-            <a href="chill.html">Chill</a>
-          </div>
-        </div>
-        <div class="profile">
-          <img src="images/photo_2024-12-13_19-27-20.jpg" alt="Avatar" />
-        </div>
-      </nav>
-    </header>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Daily Dose of Music</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Press+Start+2P&display=swap"
+    rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <div class="main-content">
+    <div class="top-bar">
+      <div class="song-search">
+        <img src="images/search-13-128.png" alt="Search icon" />
+        <input type="text" placeholder="Search for songs..." />
+        <button class="search-button">Search</button>
+      </div>
+      <div class="nav-links">
+        <a href="index.html" class="active">Home</a>
+        <a href="discover.html">Discover</a>
+        <a href="chill.html">Chill</a>
+      </div>
+      <div class="profile-icon"></div>
+    </div>
 
     <main>
       <div class="main-container">
-        <div class="player-card">
-          <div class="player-avatar">
-            <img src="images/avatar2.png" alt="Character" />
-          </div>
-          <p>99 EXP</p>
-          <p>LV 8</p>
-          <div class="stars">⭐⭐⭐⭐⭐</div>
-          <img src="images/download.jpeg" alt="Music Cover" class="cover" />
-          <button>▶</button>
-        </div>
-
         <div class="title">
-          <h1>Daily Dose of Music <span>⭐</span></h1>
+          <h1>Daily Dose of Music</h1>
+        </div>
+        <div class="button-container">
+          <button id="login">Login</button>
+          <button id="signup">Sign Up</button>
         </div>
-      </div>
-
-      <div class="scrolling-text">
-        <p>
-          (scrolling) Now playing ****** by ****** // Use headphones for best
-          quality // Auto
-        </p>
       </div>
     </main>
+  </div>
+
+  <script>
+    document.querySelector('.search-button').addEventListener('click', () => {
+      window.location.href = 'discover.html';
+    });
+
+    document.querySelector('.song-search input').addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        window.location.href = 'discover.html';
+      }
+    });
+
+    document.getElementById('login').addEventListener('click', () => {
+      window.location.href = 'login.html';
+    });
+
+    document.getElementById('signup').addEventListener('click', () => {
+      window.location.href = 'signup.html';
+    });
+
+    async function checkUserSession() {
+    try {
+      const response = await fetch('get_prefrences.php', {
+        method: 'GET',
+        credentials: 'include'
+      });
+      const data = await response.json();
+      return data.preferences !== undefined;
+    } catch (error) {
+      console.error('Error checking user session:', error);
+      return false;
+    }
+    }
+
+    if (checkUserSession()) {
+      document.getElementById('login').style.display = 'none';
+      document.getElementById('signup').style.display = 'none';
+    }
+  </script>
+</body>
 
-    <script src="script.js"></script>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 9f4f162..e0e57f0 100644
--- a/styles.css
+++ b/styles.css
@@ -1,141 +1,216 @@
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 body {
-    margin: 0;
-    font-family: 'Open Sans', Arial, sans-serif;
-    background-color: #001b42;
-    color: #fff;
-    text-align: center;
-  }
-  
-  header nav {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 10px 20px;
-    background-color: transparent
-  }
+  margin: 0;
+  font-family: 'Inter', sans-serif;
+  background: #172554;
+  color: #fff;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
 
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 40px;
+  backdrop-filter: blur(8px);
+  background: rgba(30, 58, 138, 0.3);
+  padding: 16px 24px;
+  border-radius: 16px;
+  position: fixed; /* Ensure fixed position if desired */
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 64px);
+  z-index: 1000;
+}
 
-header .navigation {
+/* Song Search Styles */
+.song-search {
+  background-color: rgba(30, 58, 138, 0.5);
+  border-radius: 12px;
+  padding: 12px 20px;
+  width: 320px;
   display: flex;
+  align-items: center;
+  transition: all 0.2s ease;
+}
+
+.song-search:focus-within {
+  background-color: rgba(30, 58, 138, 0.8);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.song-search input {
+  background: transparent;
+  border: none;
+  color: white;
+  width: 100%;
+  padding-left: 12px;
+  outline: none;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  margin-left: 2px;
+}
+
+.song-search img {
+  width: 20px;
+  height: 20px;
+  margin-right: 12px;
 }
 
-header .navigation .navigation-items a {
+.nav-links {
+  display: flex;
+  gap: 32px;
+}
+
+.nav-links a {
+  color: #9ca3af;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
   position: relative;
-  color: #ffffff;
-  font-size: 1em;
-  font-family: 'Open Sans', Arial, sans-serif;
+}
+
+.nav-links a:hover {
+  color: #fff;
+}
+
+.nav-links a.active {
+  color: white;
   font-weight: 600;
-  text-decoration: none;
-  margin-left: 15px;
-  margin-right: 15px;
-  transition: color 0.3s ease;
 }
 
-header .navigation .navigation-items a::after {
+.nav-links a.active::after {
   content: '';
   position: absolute;
+  bottom: -4px;
   left: 0;
-  bottom: -5px;
   width: 100%;
-  height: 3px;
-  background: #5271ff; 
-  transform: scaleX(0);
-  transition: transform 0.3s ease;
+  height: 2px;
+  background: #3b82f6;
+  border-radius: 2px;
 }
 
-header .navigation .navigation-items a:hover::after {
-  transform: scaleX(1);
+/* Profile Icon Styles */
+.profile-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #3b82f6, #9333ea);
+  margin: 5px;
+  margin-right: 10px;
+  transition: all 0.2s ease;
 }
 
-  .profile {
-    margin-left: 20px;
-  }
-  
-  .profile img {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-  }
-  
-  .main-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 20px;
-  }
-  
-  .player-card {
-    display: inline-block;
-    background-color: #002963;
-    padding: 15px;
-    border-radius: 10px;
-    width: 200px;
-    margin-right: 30px;
-    margin-top: 10px;
-    text-align: center;
-  }
-  
-  .player-avatar img {
-    width: 50px;
-    height: 50px;
-    margin-bottom: 10px;
-  }
-  
-  .cover {
-    width: 100px;
-    height: 100px;
-    margin: 10px auto;
-  }
-  
-  button {
-    background-color: #00509e;
-    border: none;
-    color: white;
-    font-size: 20px;
-    padding: 10px;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  
-  button:hover {
-    background-color: #004080;
+.profile-icon:hover {
+  transform: scale(1.1);
+}
+
+/* Main Container Styles */
+.main-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120px 2rem 4rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  min-height: 100vh;
+}
+
+/* Title Styles */
+.title h1 {
+  font-family: 'Press Start 2P', Arial, sans-serif;
+  font-size: clamp(2rem, 5vw, 4rem);
+  margin: 0 0 3rem;
+  color: white;
+  text-shadow: 0 0 20px rgba(82, 113, 255, 0.5);
+  animation: glow 2s ease-in-out infinite alternate;
+}
+
+/* Button Container Styles */
+.button-container {
+  display: flex;
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+/* Button Styles */
+button {
+  background: linear-gradient(135deg, #5271ff 0%, #3b82f6 100%);
+  border: none;
+  color: white;
+  font-size: 1.1rem;
+  font-weight: 600;
+  padding: 1rem 2rem;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  background: linear-gradient(135deg, #4c66e6 0%, #3575e0 100%);
+}
+
+.search-button {
+  background: #3b82f6;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 20px;
+  color: white;
+  margin-left: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: 'Inter', sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.search-button:hover {
+  background: #2563eb;
+  transform: translateY(-1px);
+}
+
+@keyframes glow {
+  from {
+    text-shadow: 0 0 20px rgba(82, 113, 255, 0.5);
   }
-  
-  .title h1 {
-    font-family: 'Press Start 2P', Arial, sans-serif;
-    font-size: 60px;
-    margin: 0;
-    color: white;
+  to {
+    text-shadow: 0 0 30px rgba(82, 113, 255, 0.8);
   }
-  
-  .title span {
-    color: gold;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .top-bar {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 12px 16px;
+    width: calc(100% - 32px);
   }
-  
-  .scrolling-text {
-    background-color: #004080;
-    color: #fff;
-    padding: 5px;
-    border-radius: 5px;
-    overflow: hidden;
-    white-space: nowrap;
-    box-sizing: border-box;
-    margin: 10px auto;
-    width: 80%;
-    font-size: 14px;
+
+  .nav-links {
+    gap: 16px;
+    margin-top: 12px;
   }
-  
-  .scrolling-text p {
-    display: inline-block;
-    animation: scroll 10s linear infinite;
+
+  .song-search {
+    width: 100%;
   }
-  
-  @keyframes scroll {
-    from {
-      transform: translateX(100%);
-    }
-    to {
-      transform: translateX(-100%);
-    }
+
+  .main-container {
+    padding: 6rem 1rem 2rem;
   }
-  
\ No newline at end of file
+}
\ No newline at end of file
