diff --git a/index.html b/index.html
index 0697f92fe..bcc07b2c4 100644
--- a/index.html
+++ b/index.html
@@ -6,13 +6,64 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Spotify Clone</title>
     <!-- don't forget to link your styles -->
+    <link rel="stylesheet" href="styles/style.css" />
   </head>
   <body>
-    Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the
-    right music, wherever you are. What’s on Spotify? Millions of Songs There are millions of songs on Spotify HD Music
-    Listen to music as if you were listening live Stream Everywhere Stream music on your smartphone, tablet or computer
-    It’s as yeezy as Kanye West. Search Know what you want to listen to? Just search and hit play. Browse Check out the
-    latest charts, brand new releases and great playlists for right now. Discover Enjoy new music every Monday with your
-    own personal playlist. Or sit back and enjoy Radio.
+    <div class="container">
+      <!-- Navigation Bar -->
+      <nav class="navbar">
+        <div class="logo">
+          <img src="./images/spotify-logo.png" alt="Spotify Logo" />
+        </div>
+        <div class="nav-links">
+          <a href="#">Premium</a>
+          <a href="#">Discover</a>
+          <a href="#">Help</a>
+          <a href="#">Download</a>
+        </div>
+      </nav>
+      <!-- Banner Section -->
+      <section class="banner">
+        <div class="banner-content">
+          <h1>Music for everyone.</h1>
+          <p>
+            Spotify if now free on mobile, tablet and computer. 
+           <p>Listen to the
+            right music, wherever you are.</p> 
+          </p>
+        </div>
+      </section>
+
+<!-- Text and Cards Section -->
+  <section class="bottom-section">
+    <div class="section-text">
+      <h2>What's on Spotify?</h2>
+      <hr class="hr">
+    </div>
+
+  <div class="card-container">
+    <!-- Card 1 -->
+    <div class="card">
+        <img src="./images/music-icon.png" alt="Playlist 1" class="card-image">
+        <h3>
+          Milions of songs
+        </h3>
+        <p>There are milions of tracks</p>
+    </div>
+    <!-- Card 2 -->
+    <div class="card">
+        <img src="./images/high-quality-icon.png" alt="Playlist 2" class="card-image">
+        <h3>HD Music</h3>
+        <p>Chill beats for a relaxed evening.</p>
+    </div>
+    <!-- Card 3 -->
+    <div class="card">
+        <img src="./images/devices-icon.png" alt="Playlist 3" class="card-image">
+        <h3>Stream Everywhere</h3>
+        <p>High-energy hits to boost your workout.</p>
+    </div>
+  </div>
+  </section>    
+</div>
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
index 55efb32c6..00d881868 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -6,3 +6,114 @@ Green: #00B172
 White: #FFF
 
 */
+/* .container {
+  border: 1px solid red;
+} */
+
+.navbar {
+  border: 1px solid red;
+  background-color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  z-index: 1000;
+}
+
+.logo img {
+  width: auto;
+  height: 40px;
+}
+
+.nav-links {
+  list-style-type: none;
+  display: flex;
+  justify-content: flex-end; /* Ensure all links stay aligned to the right */
+  align-items: center;
+  padding: 0; /* Remove extra padding */
+  margin: 0;
+}
+
+.nav-links a {
+  text-decoration: none;
+  margin-right: 45px;
+  color: black;
+}
+
+.banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url("../images/landing.jpg");
+  width: 100%;
+  height: 700px;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+/* 
+.banner-content {
+  position: relative;
+  z-index: 1;
+  max-width: 800px; 
+} */
+
+.banner h1 {
+  color: white;
+  font-size: 2.5rem;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.banner p {
+  color: white;
+  margin-bottom: 20px;
+  font-size: 1.2rem;
+}
+
+.bottom-serction {
+  padding: 50px 20px;
+  background-color: #121212;
+  color: white;
+  text-align: center;
+}
+
+.section-text h2 {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+}
+
+.card-container {
+  display: flex;
+}
+
+.card img {
+  background-color: white; /* Dark background for cards */
+  padding: 20px 70px;
+  width: 40%; /* Each card takes 30% of the width */
+  transition: transform 0.3s ease;
+  text-align: center; /* Align text to the left */
+}
+
+.card h3 {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  color: green;
+  padding: 0 80px;
+}
+
+.card p {
+  font-size: 1rem;
+  margin-bottom: 10px;
+  padding: 0 80px;
+}
+
+.hr {
+  border: 2px solid green;
+  width: 300px;
+}
