diff --git a/index.html b/index.html
index 0697f92fe..ee3213f9a 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,70 @@
 <!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">
+  <title>Spotify Replica</title>
+  <link rel="stylesheet" href="styles/style.css">
+</head>
+<body>
+
+  <nav class="navbar">
+    <div class="logo">
+      <img src="images/logo.png" alt="Spotify Logo">
+    </div>
+    <ul class="nav-links">
+      <li><a href="#">Premium</a></li>
+      <li><a href="#">Discover</a></li>
+      <li><a href="#">Download</a></li>
+      <li><a href="#">Help</a></li>
+    </ul>
+  </nav>
+
+  <header class="hero">
+    <div class="hero-content">
+      <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>
+  </header>
+
+  <section class="features">
+    <div class="feature">
+      <img src="images/music-icon.png" alt="Music Icon">
+      <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="Devices Icon">
+      <h3>Stream Everywhere</h3>
+      <p>Stream music on your smartphone, tablet or computer</p>
+    </div>
+    <div class="feature">
+      <img src="images/songs-icon.png" alt="Songs Icon">
+      <h3>Millions of Songs</h3>
+      <p>There are millions of songs on Spotify</p>
+    </div>
+  </section>
+
+  <section class="spotify-green">
+    <div class="green-text">
+      <h2>It’s as yeezy as Kanye West.</h2>
+      <div class="sub-feature">
+        <h3>Search</h3>
+        <p>Know what you want to listen to? Just search and hit play.</p>
+      </div>
+      <div class="sub-feature">
+        <h3>Browse</h3>
+        <p>Check out the latest charts, brand new releases and great playlists for right now.</p>
+      </div>
+      <div class="sub-feature">
+        <h3>Discover</h3>
+        <p>Enjoy new music every Monday with your own personal playlist. Or sit back and enjoy Radio.</p>
+      </div>
+    </div>
+    <div class="green-image">
+      <img src="images/spotify-app.jpg" alt="Spotify App">
+    </div>
+    <img src="images/spotify-icon-white.png" class="spotify-logo" alt="Spotify Logo">
+  </section>
+
+</body>
 </html>
diff --git a/styles/style.css b/styles/style.css
index 55efb32c6..e440e70cb 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,8 +1,133 @@
-/*
-Colors:
+/* Reset básico */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-Text: 1A1A1A
-Green: #00B172
-White: #FFF
+body {
+  font-family: Arial, sans-serif;
+  line-height: 1.6;
+  background-color: #fff;
+}
 
-*/
+/* Navbar */
+.navbar {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: #000;
+  padding: 15px 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 1000;
+}
+
+.logo img {
+  height: 40px;
+}
+
+.nav-links {
+  list-style: none;
+  display: flex;
+  gap: 25px;
+}
+
+.nav-links li a {
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  transition: color 0.3s ease;
+}
+
+.nav-links li a:hover {
+  color: #1db954;
+}
+
+/* Hero Section */
+.hero {
+  height: 100vh;
+  background: url('../images/landing.jpg') no-repeat center center/cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 80px; /* offset for fixed navbar */
+  color: white;
+  text-align: center;
+}
+
+.hero-content {
+  max-width: 700px;
+}
+
+.hero-content h1 {
+  font-size: 3em;
+  margin-bottom: 20px;
+}
+
+.hero-content p {
+  font-size: 1.2em;
+}
+
+/* Features Section */
+.features {
+  display: flex;
+  justify-content: space-around;
+  padding: 60px 40px;
+  text-align: center;
+}
+
+.feature {
+  width: 30%;
+}
+
+.feature img {
+  height: 100px;
+  margin-bottom: 20px;
+}
+
+.feature h3 {
+  margin-bottom: 10px;
+  font-size: 1.5em;
+}
+
+/* Green Section */
+.spotify-green {
+  background-color: #1db954;
+  color: white;
+  display: flex;
+  padding: 60px 40px;
+  position: relative;
+}
+
+.green-text {
+  flex: 1;
+  padding-right: 40px;
+}
+
+.green-text h2 {
+  font-size: 2.5em;
+  margin-bottom: 30px;
+}
+
+.sub-feature {
+  margin-bottom: 20px;
+}
+
+.sub-feature h3 {
+  font-size: 1.3em;
+  margin-bottom: 8px;
+}
+
+.green-image img {
+  max-width: 100%;
+  height: auto;
+}
+
+.spotify-logo {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  height: 50px;
+}
