diff --git a/index.html b/index.html
index 4a81684..3f4b3ed 100644
--- a/index.html
+++ b/index.html
@@ -5,14 +5,54 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Spotify Clone</title>
+    <link rel="stylesheet" href="./styles/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;900&display=swap" rel="stylesheet">
     <!-- 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
+
+    <header>
+
+      <div class="container"> 
+
+      <div id="Logo">
+      <img  src="./images/spotify-logo.png" alt="Spotify Logo">
+      </div>
+
+      <nav class="header--menu">
+        <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>
+    </div>
+    </header>
+<br/> 
+    <section id="landing">
+      <h1 id="titulo">Music for everyone</h1>
+      <p id="subtitulo">Spotify is now free on mobile, tablet and computer. <br/>
+        Listen to the right music, wherever you are.
+      </p>
+
+    </section>
+
+    <div id="titulo-2">
+      <h2>What’s on Spotify?</h2>
+    </div>
+    
+
+
+    <!-- <p>
+    Premium Discover Help Download Music for everyone.  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.
+  </p> -->
   </body>
 </html>
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index 68b1e59..28f69df 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -3,4 +3,76 @@ Colors:
 Text: 1A1A1A
 Green: #00B172
 White: #FFF
-*/
\ No newline at end of file
+*/
+
+body, html{
+    height: 100%;
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+}
+.container{
+    display: flex;
+    position: fixed;
+    width: 100%;
+    justify-content: space-between;
+    align-items: flex-start;
+    background-color: white;
+    height: 4em;
+}
+
+#Logo img{
+    width: 10em;
+    display: flex;
+    align-items: baseline;
+    justify-content: flex-start;
+}
+
+
+.header--menu ul{
+    display: flex;
+    flex-direction:row;
+    gap: 40px;
+    list-style: none;
+    align-items: baseline;
+
+}
+
+.header--menu li a{
+    text-decoration: none;
+    color: #1A1A1A;
+}
+
+
+#landing{
+    margin-top: 60px;
+    background-image: url(../images/landing.jpg);
+    height: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+#titulo{
+    font-size: 4em;
+    font-weight: 600;
+}
+
+#subtitulo{
+    font-size: 1.5em;
+    
+}
+
+#titulo-2{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+h2{
+    border-bottom: 2.5px solid #00B172;
+}
