diff --git a/index.html b/index.html
index 0697f92fe..b4fc7f863 100644
--- a/index.html
+++ b/index.html
@@ -5,14 +5,68 @@
     <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.
+    <header class="header-container">
+      <div id="header-image">
+        <img
+          src="../lab-css-spotify-clone/images/spotify-logo.png"
+          alt="spotify-logo"
+        />
+      </div>
+      <nav class="header-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>
+      </nav>
+    </header>
+
+    <section class="hero">
+      <h1>Music for everyone.</h1>
+      <p>
+        Spotify is now free on mobile, tablet and computer. <br />Listen to the
+        right music, wherever you are.
+      </p>
+    </section>
+
+    <section class="information">
+      <h2>What’s on Spotify?</h2>
+      <div>
+        <div class="image-1">
+          <img src="./images/music-icon.png" alt="music-icon" />
+          <h3>Millions of Songs</h3>
+          <p>There are millions of songs on Spotify</p>
+        </div>
+        <div class="image-2">
+          <img src="./images/high-quality-icon.png" alt="high-quality-icon" />
+          <h3>HD Music</h3>
+          <p>Listen to music as if you were listening live</p>
+        </div>
+        <div class="image-3">
+          <img src="./images/devices-icon.png" alt="devices-icon" />
+          <h3>Stream Everywhere</h3>
+          <p>Stream music on your smartphone, tablet or computer</p>
+        </div>
+      </div>
+    </section>
+
+    <footer class="footer">
+      <section>
+        <h3>It’s as yeezy as Kanye West.</h3>
+        <h4>Search</h4>
+        Know what you want to listen to? Just search and hit play.
+        <h4>Browse</h4>
+        Check out the latest charts, brand new releases and great playlists for
+        right now.
+        <h4>Discover</h4>
+        Enjoy new music every Monday with your own personal playlist. Or sit
+        back and enjoy Radio.
+      </section>
+    </footer>
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
index 55efb32c6..a2444da36 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -6,3 +6,50 @@ Green: #00B172
 White: #FFF
 
 */
+
+body {
+  font-family: "Helvetica", sans-serif;
+}
+
+/* Header */
+
+/* Hero Section */
+
+.hero {
+  background-image: url("../images/landing.jpg");
+  background-size: cover;
+  background-position: center;
+  color: #fff;
+  text-align: center;
+  padding-top: 180px;
+  padding-bottom: 180px;
+}
+
+h1 {
+  font-size: 5em;
+}
+
+.hero p {
+  font-size: 1.5em;
+}
+
+/* Information Section */
+
+.information {
+  text-align: center;
+}
+
+.information h3 {
+  color: #00b172;
+}
+
+.information img {
+  height: 50px;
+  width: 50px;
+}
+
+/* Footer Section */
+
+.footer {
+  background-color: #00b172;
+}
