diff --git a/index.html b/index.html
index d03ad5e..a87971a 100644
--- a/index.html
+++ b/index.html
@@ -7,12 +7,23 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <header class="header">Header</header>
-    <div class="main">
-        <div class="hero">Hero</div>
-        <div class="section1">Section 1</div>
-        <div class="section2">Section 2</div>
+    <header class="header">
+        <div class="content-wrap">
+            <div class="logo">HeaderLogo</div>
+            <div class="nav">
+                <ul>
+                    <li>One</li>
+                    <li>Two</li>
+                    <li>Three</li>
+                </ul>
+            </div>
+        </div>
+    </header>
+    <div class="hero">
+        <div class="content-wrap">Hero</div>
     </div>
+    <div class="section1">Section 1</div>
+    <div class="section2">Section 2</div>
     <footer class="footer">Footer</footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index e69de29..469a4e9 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,40 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+:root {
+    --dark-background: #1F2937;
+}
+body {
+    font-family: Roboto;
+}
+header {
+    background-color: var(--dark-background);
+    color: #F9FAF8;
+    padding: 10px 40px;
+}
+.content-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 80%;
+    margin: 0 auto;
+}
+
+header .logo {
+    font-size: 24px;
+}
+ 
+header .nav ul {
+    list-style: none;
+    display: flex;
+    gap: 20px
+}
+
+.hero {
+    background-color: var(--dark-background);
+    color: #F9FAF8;
+}
+
+footer {
+    background-color: var(--dark-background);
+    color: #F9FAF8;
+    padding: 10px 40px;
+}
\ No newline at end of file
