diff --git a/assets/images/vertical-ad-mock.jpg b/assets/images/vertical-ad-mock.jpg
new file mode 100644
index 0000000..3679713
Binary files /dev/null and b/assets/images/vertical-ad-mock.jpg differ
diff --git a/assets/js/st-nav.js b/assets/js/st-nav.js
index efaa27d..51ffec3 100644
--- a/assets/js/st-nav.js
+++ b/assets/js/st-nav.js
@@ -1,17 +1,31 @@
 //Nav slide in logic
 
 const nav = document.querySelector('.st-nav');
-const openButton = document.querySelector('.st-open-nav');
-const closeButton = document.querySelector('.st-close-nav');
+const openNavButton = document.querySelector('.st-open-nav');
+const closeNavButton = document.querySelector('.st-close-nav');
 
-openButton.addEventListener('click', () => {
+openNavButton.addEventListener('click', () => {
     nav.classList.add('st-nav-is-open');
 });
 
-closeButton.addEventListener('click', () => {
+closeNavButton.addEventListener('click', () => {
     nav.classList.remove('st-nav-is-open');
 });
 
+//Search slide logic
+
+const searchOverlay = document.querySelector('.st-search-overlay');
+const openSearchButton = document.querySelector('.st-open-search');
+const closeSearchButton = document.querySelector('.st-close-search');
+
+openSearchButton.addEventListener('click', () => {
+    searchOverlay.classList.add('st-search-is-open');
+});
+
+closeSearchButton.addEventListener('click', () => {
+    searchOverlay.classList.remove('st-search-is-open');
+});
+
 //Sticky nav logic
 
 const iconBar = document.querySelector('.st-header-icon-bar');
diff --git a/header.php b/header.php
index 936526c..7c85b90 100644
--- a/header.php
+++ b/header.php
@@ -26,27 +26,35 @@
             <a href="#" class="st-chip st-chip-primary">forum</a>
             <a href="#" class="st-chip st-chip-secondary">join</a>
             <a href="#" class="st-header-icon"><i class="fa fa-user"></i></a>
-            <a href="" class="st-header-icon"><i class="fa fa-search"></i></a>
+            <button class="st-nav-btn st-open-search" ><i class="fa fa-search st-open-search"></i></button>
             <button class="st-nav-btn st-open-nav" aria-label="Open Navigation">&#9776;</button>
         </div>
-        
+
         <h1 class="st-site-title">Slowtwitch</h1>
 
         <nav class="st-nav st-main-grid">
             <button class="st-nav-btn st-close-nav" aria-label="Close Navigation">&times;</button>
             <?php
-                wp_nav_menu(
-                    array(
-                        'menu' => 'primary',
-                        'container' => '',
-                        'theme_location' => 'primary',
-                        'items_wrap' => '<ul class="st-nav-links">%3$s</ul>'
-                    )
-                );
+            wp_nav_menu(
+                array(
+                    'menu' => 'primary',
+                    'container' => '',
+                    'theme_location' => 'primary',
+                    'items_wrap' => '<ul class="st-nav-links">%3$s</ul>'
+                )
+            );
             ?>
         </nav>
 
-        <div class="st-search-overlay">
-
+        <div class="st-search-overlay st-main-grid">
+            <button class="st-nav-btn st-close-search" aria-label="Close Search">&times;</button>
+            <form class="st-search-form" method="get" action="/">
+                <div class="st-searchbar-container">
+                    <input type="text" class="st-search-box" name="s" id="s" placeholder="What are you looking for?" />
+                    <button class="st-nav-btn st-btn-search">
+                        <i class="fa fa-search st-open-search"></i>
+                    </button>
+                </div>
+            </form>
         </div>
-    </header>
+    </header>
\ No newline at end of file
diff --git a/style.css b/style.css
index 6257d15..730ac87 100644
--- a/style.css
+++ b/style.css
@@ -129,7 +129,8 @@ SECTIONS
     pointer-events: auto;
 }
 
-.st-nav-is-open {
+.st-nav-is-open,
+.st-search-is-open {
     transform: translateX(100%);
 }
 
@@ -165,12 +166,39 @@ SECTIONS
     color: #d3d3d3;
 }
 
-.st-close-nav {
+.st-close-nav,
+.st-close-search {
     text-align: right;
     font-size: 2rem;
     height: 3rem;
 }
 
+.st-search-form {
+    margin-top: 2em;
+}
+
+.st-searchbar-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.st-search-box {
+    outline: none;
+    border: none;
+    border-bottom: 2px solid #0b4fa0;
+    color: #0b4fa0;
+}
+
+.st-btn-search {
+    margin-left: 1em;
+}
+
+.st-btn-search i {
+    color: #0b4fa0;
+    font-size: 1.25em;
+}
+
 /* footer */
 
 .st-footer {