diff --git a/images/hamburger.svg b/images/hamburger.svg
deleted file mode 100644
index 507fd77..0000000
--- a/images/hamburger.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
-    <title>hamburger</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="hamburger" sketch:type="MSArtboardGroup" stroke-linecap="round" stroke="#FFFFFF" stroke-width="2">
-            <g id="Line-+-Line-+-Line" sketch:type="MSLayerGroup" transform="translate(1.000000, 3.000000)">
-                <path d="M0.5,1 L19.5,1" id="Line" sketch:type="MSShapeGroup"></path>
-                <path d="M0.5,8 L19.5,8" id="Line" sketch:type="MSShapeGroup"></path>
-                <path d="M0.5,15.9745 L19.5,15.9745" id="Line" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/images/hero@2x.png b/images/hero.png
similarity index 100%
rename from images/hero@2x.png
rename to images/hero.png
diff --git a/index.html b/index.html
index 3859706..a45b027 100644
--- a/index.html
+++ b/index.html
@@ -7,28 +7,28 @@
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" />
     <style type="text/css">
       body {
-        font-family: 'Whitney SSm A', 'Whitney SSm B', Helvetica, Arial, sans-serif; 
+        font-family: 'Whitney SSm A', 'Whitney SSm B', Helvetica, Arial, sans-serif;
       }
 
       h1, h2, h3, h4, h5, h6 {
-        font-family: 'Chronicle SSm A', 'Chronicle SSm B', Georgia, serif; 
+        font-family: 'Chronicle SSm A', 'Chronicle SSm B', Georgia, serif;
         font-weight: 500;
       }
 
       section.purple-100 {
-        background-color: hsla(270, 69%, 70%, 1.0);
+        background-color: hsla(271, 73%, 66%, 1.0);
       }
 
       section.purple-75 {
-        background-color: hsla(270, 69%, 70%, 0.75);
+        background-color: hsla(271, 73%, 66%, 0.75);
       }
 
       section.purple-50 {
-        background-color: hsla(270, 69%, 70%, 0.5);
+        background-color: hsla(271, 73%, 66%, 0.5);
       }
 
       section.purple-25 {
-        background-color: hsla(270, 69%, 70%, 0.25);
+        background-color: hsla(271, 73%, 66%, 0.25);
       }
     </style>
     <link href="style.css" rel="stylesheet" type="text/css" />
@@ -36,6 +36,12 @@
   <body>
     <header>
       <nav class="container">
+        <!-- This is the svg for the hamburger button. -->
+        <svg width="19px" height="18px" viewBox="0 0 19 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+          <rect class="hamburger" fill="#fff" x="0" y="0" width="19" height="2"></rect>
+          <rect class="hamburger" fill="#fff" x="0" y="8" width="19" height="2"></rect>
+          <rect class="hamburger" fill="#fff" x="0" y="16" width="19" height="2"></rect>
+        </svg>
         <h4>Bark.io</h4>
         <button>Sign Up</button>
       </nav>
@@ -43,9 +49,11 @@ <h4>Bark.io</h4>
 
     <section class="purple-100">
       <div class="container">
+        <img src="images/logo.svg">
         <h1>Bark.io</h1>
         <h2>The simplest way to find adoptable dogs around you.</h2>
         <p><button>Sign Up</button></p>
+        <img src="images/hero.png">
       </div>
     </section>
 
