diff --git a/index.html b/index.html
index 0697f92fe..20737b2c6 100644
--- a/index.html
+++ b/index.html
@@ -5,14 +5,96 @@
     <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>
-    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.
+    <nav>
+      <img
+        class="spotify-logo-nav"
+        src="/images/spotify-logo.png"
+        alt="spotify home"
+      />
+      <div class="nav">
+        <ul>
+          <li><a href="#">Premium</a></li>
+          <li><a href="#">Discover</a></li>
+          <li><a href="#">Help</a></li>
+          <li><a href="#">Download</a></li>
+        </ul>
+      </div>
+    </nav>
+    <header class="landing">
+      <div class="landing-text">
+        <h1>Music for everyone.</h1>
+        <p>
+          Spotify is now free on mobile, tablet and computer. <br />
+          Listen to the right music, wherever your are.
+        </p>
+      </div>
+      <img
+        class="landing-img"
+        src="/images/landing.jpg"
+        alt="spotify landing"
+      />
+    </header>
+    <section>
+      <div class="services">
+        <h2>What's on Spotify?</h2>
+        <div class="services-container">
+          <div class="services-card">
+            <img class="services-img" src="/images/music-icon.png" alt="" />
+            <h3>Millions of Songs</h3>
+            <p>There are millions of songs on Spotify</p>
+          </div>
+          <div class="services-card">
+            <img
+              class="services-img"
+              src="/images/high-quality-icon.png"
+              alt=""
+            />
+            <h3>HD Music</h3>
+            <p>Listen to music as if you were listening live</p>
+          </div>
+          <div class="services-card">
+            <img class="services-img" src="/images/devices-icon.png" alt="" />
+            <h3>Stream Everywhere</h3>
+            <p>Stream music on your smartphone, tablet or computer</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section>
+      <h2 class="text-title-green">It's as yeezy as Kanye West.</h2>
+      <div class="green-container">
+        <div class="text-green">
+          <div class="inside-text">
+            <h3>Search</h3>
+            <p>
+              Know what you want to listen to? <br />Just search and hit play.
+            </p>
+            <h3>Browse</h3>
+            <p>
+              Check out the latest charts, brand new releases and great
+              playlists for right now.
+            </p>
+            <h3>Discover</h3>
+            <p>
+              Enjoy new music every Monday with your own personal playlist. Or
+              sit back and enjoy Radio.
+            </p>
+          </div>
+        </div>
+        <img
+          class="spotify-white"
+          src="/images/spotify-icon-white.png"
+          alt="spotify icon"
+        />
+        <img
+          style="height: 600px"
+          src="/images/spotify-app.jpg"
+          alt="screenshot from app"
+        />
+      </div>
+    </section>
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
index 55efb32c6..a5e7b53d1 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -6,3 +6,168 @@ Green: #00B172
 White: #FFF
 
 */
+
+body {
+  background-color: #fff;
+  color: #1a1a1a;
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+/* NAV */
+nav {
+  display: flex;
+  background-color: #fff;
+  justify-content: space-between;
+  padding-top: 2.5vh;
+  padding-bottom: 2.5vh;
+  padding-left: 2vw;
+  padding-right: 2vw;
+}
+
+nav ul {
+  list-style: none;
+  display: flex;
+  gap: 3vw;
+}
+
+nav ul a {
+  text-decoration: none;
+  color: #1a1a1a;
+  font-size: 1.2rem;
+}
+
+.spotify-logo-nav {
+  height: 50px;
+}
+
+/* HEADER */
+
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 600px;
+}
+
+header img {
+  width: 100%;
+  height: 600px;
+  object-fit: cover;
+  padding: 0;
+}
+
+.landing-text {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: #fff;
+}
+
+header h1 {
+  font-size: 60px;
+  line-height: 0;
+  font-weight: 500;
+}
+
+header p {
+  font-size: 20px;
+  line-height: 25px;
+  font-weight: 400;
+}
+
+/* SERVICES SECTION */
+
+.services {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 500px;
+  justify-content: space-around;
+  margin-bottom: 8vh;
+}
+
+.services h2 {
+  font-size: 40px;
+  text-decoration: underline #00b172;
+  font-weight: 600;
+  margin: 0;
+}
+
+.services-container {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.services-container h3 {
+  color: #00b172;
+  font-weight: bold;
+  font-size: 28px;
+}
+
+.services-container p {
+  font-size: 25px;
+  text-align: center;
+  font-weight: 300;
+  margin: 0;
+}
+
+.services-img {
+  height: 80px;
+}
+
+.services-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 23%;
+}
+
+/* GREEN CONTAINER */
+
+.green-container {
+  background-color: #00b172;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 700px;
+  margin: 0 4vw;
+  padding: 1rem;
+  width: 90%;
+}
+
+.text-green {
+  color: #fff;
+}
+
+.text-title-green {
+  font-size: 40px;
+  text-decoration: underline;
+  font-weight: 600;
+  position: absolute;
+  margin-left: 4vw;
+  padding-left: 3.5rem;
+  color: #fff;
+}
+
+.inside-text {
+  width: 400px;
+}
+
+.inside-text h3 {
+  font-weight: bold;
+  font-size: 28px;
+}
+
+.inside-text p {
+  font-size: 24px;
+  font-weight: 400;
+}
+
+.spotify-white {
+  height: 100px;
+}
