diff --git a/index.html b/index.html
index 0697f92fe..bb659cbbc 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,69 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Spotify Clone</title>
-    <!-- don't forget to link your styles -->
-  </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.
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <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>
+
+  <header>
+    <div class="logo">
+      <img src="images/spotify-logo.png" alt="Spotify Logo">
+    </div>
+    <nav>
+      <a href="#">Premium</a>
+      <a href="#">Discover</a>
+      <a href="#">Help</a>
+      <a href="#">Download</a>
+    </nav>
+  </header>
+
+  <section class="hero">
+    <h1>Music for everyone.</h1>
+    <p>Spotify is now free on mobile, tablet and computer. Listen to the right music, wherever you are.</p>
+  </section>
+
+  <section class="features">
+    <h2>What’s on Spotify?</h2>
+    <div class="feature-grid">
+      <div class="feature">
+        <img src="./images/music-icon.png" alt="Millions of Songs">
+        <h3>Millions of Songs</h3>
+        <p>There are millions of songs on Spotify</p>
+      </div>
+      <div class="feature">
+        <img src="images/high-quality-icon.png" alt="Stream Everywhere">
+        <h3>HD Music</h3>
+        <p>Listen to music as if you were listening live</p>
+      </div>
+      <div class="feature">
+        <img src="./images/devices-icon.png" alt="HD Music">
+        <h3>Stream Everywhere</h3>
+        <p>Stream music on your smartphone, tablet or computer</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="yeezy-section">
+    <img src="images/spotify-icon-white.png" alt="Spotify Logo Background" class="center-logo">
+    <div class="yeezy-text">
+      <h2>It’s as yeezy as Kanye West.</h2>
+      <p><strong>Search</strong><br>Know what you want to listen to? Just search and hit play.</p>
+      <p><strong>Browse</strong><br>Check out the latest charts, brand new releases and great playlists for right now.
+      </p>
+      <p><strong>Discover</strong><br>Enjoy new music evry Monday with your own personal playlist. Or sit back and
+        enjoy Radio.</p>
+    </div>
+    <div class="kanye-img">
+      <img src="images/spotify-app.jpg" alt="Kanye West Player">
+    </div>
+  </section>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index 55efb32c6..2d122309c 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -6,3 +6,153 @@ Green: #00B172
 White: #FFF
 
 */
+
+:root {
+  --green: #00b172;
+  --text: #1a1a1a;
+  --white: #fff;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Roboto", sans-serif;
+}
+
+body {
+  line-height: 1.6;
+  color: var(--text);
+  background-color: var(--white);
+}
+
+header {
+  background: var(--white);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+  border-bottom: 1px solid #ddd;
+}
+
+.logo img {
+  height: 40px;
+}
+
+nav a {
+  margin-left: 30px;
+  text-decoration: none;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.hero {
+  background: url("../images/landing.jpg") center/cover no-repeat;
+  color: var(--white);
+  text-align: center;
+  padding: 100px 20px;
+  height: 500px;
+}
+
+.hero h1 {
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.hero p {
+  font-size: 20px;
+  font-weight: 300;
+}
+
+.features {
+  background: var(--white);
+  text-align: center;
+  padding: 60px 20px;
+}
+
+.features h2 {
+  font-size: 28px;
+  margin-bottom: 40px;
+  color: var(--text);
+}
+
+.feature-grid {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 30px;
+}
+
+.feature {
+  width: 250px;
+  padding: 20px;
+}
+
+.feature img {
+  width: 50px;
+  height: 50px;
+}
+
+.feature h3 {
+  color: var(--green);
+  margin: 10px 0;
+  font-weight: 700;
+}
+
+.feature p {
+  color: #ccc;
+  font-weight: 300;
+}
+
+.yeezy-section {
+  background: var(--green);
+  color: var(--white);
+  display: flex;
+  justify-content: space-between;
+  padding: 60px 40px;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.yeezy-text {
+  flex: 1;
+  max-width: 500px;
+  position: relative;
+  z-index: 1;
+}
+
+.yeezy-text h2 {
+  margin-bottom: 20px;
+  font-weight: 700;
+}
+
+.yeezy-text p {
+  margin-bottom: 10px;
+  color: #dcdcdc;
+  font-weight: 300;
+}
+
+.yeezy-text strong {
+  color: var(--white);
+  font-weight: 700;
+}
+
+.kanye-img {
+  flex: 1;
+  max-width: 300px;
+  z-index: 1;
+}
+
+.kanye-img img {
+  width: 100%;
+  border-radius: 10px;
+}
+
+.center-logo {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  /* opacity: 0.1; */
+  width: 80px;
+}
