diff --git a/index.html b/index.html
index 4a81684..8f58199 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,72 @@
 <!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>
+    <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>
+        <div class="header">
+            <img src="./images/spotify-logo.png" alt="spotify-logo">
+            <div class="nav">
+                <ul>
+                    <li><a href="·">Home</a></li>
+                    <li><a href="·">Discover</a></li>
+                    <li><a href="·">Help</a></li>
+                    <li><a href="·">Download</a></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="main">
+            <h1>Music for everyone.</h1>
+            <p>Spotify is now free on mobile, tablet and computer. Listen to the right music, wherever you are.</p>
+        </div>
+        
+        <div class="about">
+            <h2>What’s on Spotify?</h2>
+
+            <div class="container">
+                <div class="square">
+                    <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="square">
+                    <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="square">
+                    <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>
+        </div>
+        
+        <div class="description">
+            <div class="col left">
+                <h2>It’s as yeezy as Kanye West.</h2>
+
+                <h3>Search</h3>
+                <p>Know what you want to listen to? 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 class="col right">
+                <img src="./images/spotify-app.jpg" alt="spotify-app">
+            </div>
+        </div>
+    </body>
 </html>
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index 68b1e59..15200b3 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,3 +1,192 @@
+/* This is the default configuration for all web page */
+* {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+p {
+    margin-bottom: 20px;
+}
+
+/* Header styles */
+.header {
+    position: fixed;
+    width: 100%;
+    height: 10vh;
+    z-index: 100;
+    background-color: #FFF;
+    display: flex;
+}
+
+.header > img {
+    margin: 10px 10px 10px 40px;
+}
+
+/* Navigation bar styles */
+.nav {
+    margin: 10px 20px 10px 0px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.nav > ul {
+    list-style-type: none;
+    text-align: center;
+    padding: 5px;
+}
+
+.nav li{
+    display: inline;
+    text-align: center;
+    margin: 0 10px 0 0;
+}
+
+.nav li a {
+    padding: 2px 7px 2px 7px;
+    color: #666;
+    text-decoration: none;
+}
+
+.nav li a:hover{
+    background-color: #9E9E9E;
+    color: #1A1A1A;
+    border-radius: 5px;
+}
+
+/* Main content styles */
+.main {
+    width: 100%;
+    height: 100vh;
+    background-repeat: no-repeat;
+    background-image: url("/images/landing.jpg");
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.main > h1 {
+    color: #FFF;
+    margin-bottom: 25px;
+    font-size: 60px;
+}
+
+.main > p {
+    width: 35%;
+    color: #FFF;
+    font-size: 20px;
+    text-align: center;
+}
+
+/* About content styles */
+.about {
+    width: 100%;
+    height: 65vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.about > h2 {
+    margin-top: 20px;
+    border-bottom: solid 3px #00B172;
+}
+
+.container {
+    margin: 20px;
+    padding: 20px;
+    border: solid 4px orange;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.square {
+    margin: 30px;
+    padding: 20px 35px;
+    border: solid 4px yellow;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.square > img {
+    width: 35%;
+    height: 11vh;
+}
+
+.square > h3 {
+    margin: 5px 0px;
+    color: #00B172;
+    font-size:x-large;
+}
+
+.square > p {
+    margin-top: 20px;
+    color: #1A1A1A;
+    font-size: large;
+    text-align: center;
+    margin: 0px 30px;
+}
+
+/* Description content styles */
+.description {
+    margin: 0px 20px;
+    width: 97%;
+    height: 90vh;
+    background-color: #00B172;
+    background-image: url("/images/spotify-icon-white.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 20vh 20vh;
+    display: flex;
+}
+
+.col {
+    margin: 80px;
+    display: flex;
+    flex-direction: column;
+    
+}
+
+.left {
+    color: #FFF;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+}
+
+.right
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.col > img {
+    width: 75%;
+    height: 90vh;
+}
+
+.col > h2 {    
+    font-size: 6vh;
+    margin-bottom: 30px;
+    border-bottom: solid 3px #FFF;
+}
+
+.col > h3 {
+    font-size: 4vh;
+    margin: 20px 0px;
+}
+
+.col > p {
+    margin-right: 56vh;
+    font-size: 2.5vh;
+}
 /*
 Colors:
 Text: 1A1A1A
