diff --git a/index.html b/index.html
index a2d9c01ab..b6185f07b 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,32 @@
-NPM Clone Nifty Penguin Magic npm Enterprise Products Solutions Resources Docs Support Search Join Log In Build amazing
+<header>
+    <div>
+      <div>
+        <img class="blackHeart" src="images/black-heart.png" alt="black heart" />
+        <span> Nifty Penguin Magic </span>
+      </div>
+      <nav>
+        <ul>
+          <li><a href="#"> npm Enterprise </a></li>
+          <li><a href="#"> Products </a></li>
+          <li><a href="#"> Solutions </a></li>
+          <li><a href="#"> Resources </a></li>
+          <li><a href="#"> Docs </a></li>
+          <li><a href="#"> Support </a></li>
+        </ul>
+      </nav>
+    </div>
+  
+    <div>
+      <!-- add logo, search bar and buttons (or links and style them as buttons later) -->
+      <div>
+      <img class="logo" src="images/npm-logo.png" alt="brand logo" />
+      </div>
+      <img class="magnifyingGlass" src="images/magnifying-glass.png" alt="search icon" />
+      <li><a href="#"> Join</a></li>
+      <li><a href="#"> Log In</a></li>
+    </div>
+  </header>
+  NPM Clone Nifty Penguin Magic npm Enterprise Products Solutions Resources Docs Support Search Join Log In Build amazing
 things Essential JavaScript development tools that help you go to market faster and build powerful applications using
 modern open source code. See plans Join for free Bring the best of open source to your company npm is the tool used by
 over 11,000,000 JavaScript developers around the world. Your developers already use it. Your company depends on it.