diff --git a/view/template/nav/_header.php b/view/template/nav/_header.php
index 1fc293f5..242863f2 100644
--- a/view/template/nav/_header.php
+++ b/view/template/nav/_header.php
@@ -190,9 +190,50 @@
         </drawer-section>
       </drawer-navigation>
 
+      <search-container>
+        <a
+          class="header__search-toggle"
+          href="#"
+          id="searchToggle"
+        >Search</a>
+
+        <input
+          id="searchInput"
+          placeholder="Search LBRY"
+          type="search"
+        />
+      </search-container>
+
       <a href="#" class="header__toggle" id="menuToggle">Menu</a>
 
       <?php js_start() ?>
+        document.getElementById("searchToggle").addEventListener("click", event => {
+          event.preventDefault();
+
+          document.querySelector("search-container").classList.toggle("active");
+
+          if (document.querySelector("drawer-navigation").style.display === "none") {
+            document.querySelector("drawer-navigation").style.display = "inline-flex";
+            document.getElementById("searchInput").value = "";
+          } else {
+            document.querySelector("drawer-navigation").style.display = "none";
+            document.getElementById("searchInput").focus();
+          }
+        });
+
+        document.getElementById("searchInput").value = "";
+
+        document.getElementById("searchInput").addEventListener("keyup", event => {
+          const key = event.keyCode ? event.keyCode : event.which;
+          const self = document.getElementById("searchInput");
+
+          if (key === 13)
+            location.href = `https://duckduckgo.com/?q=${self.value} site:lbry.com`;
+
+          if (key === 27)
+            document.getElementById("searchToggle").click();
+        });
+
         document.getElementById("menuToggle").addEventListener("click", event => {
           event.preventDefault();
 
diff --git a/web/img/cancel.svg b/web/img/cancel.svg
new file mode 100644
index 00000000..78572c34
--- /dev/null
+++ b/web/img/cancel.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m13.414 12 5.293-5.293c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-5.293 5.293-5.293-5.293c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l5.293 5.293-5.293 5.293c-.391.391-.391 1.023 0 1.414.195.195.451.293.707.293s.512-.098.707-.293l5.293-5.293 5.293 5.293c.195.195.451.293.707.293s.512-.098.707-.293c.391-.391.391-1.023 0-1.414z"/></svg>
\ No newline at end of file
diff --git a/web/img/search.svg b/web/img/search.svg
new file mode 100644
index 00000000..dc7f23f9
--- /dev/null
+++ b/web/img/search.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22.707 21.293-5.682-5.682c1.233-1.54 1.975-3.489 1.975-5.611 0-4.962-4.038-9-9-9s-9 4.038-9 9 4.038 9 9 9c2.122 0 4.071-.742 5.611-1.975l5.682 5.682c.195.195.451.293.707.293s.512-.098.707-.293c.391-.391.391-1.023 0-1.414zm-12.707-4.293c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"/></svg>
\ No newline at end of file
diff --git a/web/scss/components/_header.scss b/web/scss/components/_header.scss
index 7e87cef6..d913c479 100644
--- a/web/scss/components/_header.scss
+++ b/web/scss/components/_header.scss
@@ -44,7 +44,7 @@
   @media (min-width: 951px) {
     background-position: 3rem center;
     margin-right: 2.5rem;
-    width: 8rem;
+    width: 13rem;
   }
 
   @media (max-width: 950px) {
@@ -85,6 +85,71 @@
   }
 }
 
+search-container {
+  display: inline-flex;
+  height: 5rem;
+
+  &:not(.active) {
+    .header__search-toggle {
+      background-image: url("../img/search.svg");
+      width: 2rem;
+    }
+
+    input {
+      display: none;
+    }
+  }
+
+  &.active {
+    padding-right: 2rem;
+    width: 100%;
+
+    .header__search-toggle {
+      background-color: rgba($lbry-gray-1, 0.7);
+      background-image: url("../img/cancel.svg");
+      width: 2.15rem;
+    }
+  }
+
+  @media (max-width: 950px) {
+    display: none;
+  }
+
+  input {
+    margin-top: 1.25rem;
+    padding-right: 1rem;
+    padding-left: 1rem;
+    transition: border-color 0.2s;
+    width: 100%;
+
+    &:not(:focus) {
+      border-color: var(--lbry-gray-1);
+    }
+
+    &:focus {
+      border-color: var(--lbry-teal-3);
+    }
+  }
+}
+
+.header__search-toggle {
+  @include hide-text;
+
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1rem;
+  border-radius: 50%;
+  display: block;
+  height: 2rem;
+  margin-top: 1.5rem;
+  margin-right: 1rem;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: rgba($lbry-gray-1, 0.7);
+  }
+}
+
 
 
 drawer-children {