diff --git a/src/components/ProjectSearch.vue b/src/components/ProjectSearch.vue
new file mode 100644
index 0000000..2e78ed2
--- /dev/null
+++ b/src/components/ProjectSearch.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="flex justify-between items-center -mx-4">
+    <div class="px-4 flex-1">
+      <form action="" class="search-form flex flex-row-reverse items-center">
+        <input class="w-full text-sm bg-inherit text-white focus:outline-none" type="text" placeholder="Search projects">
+        <svg class="fill-current text-white h-4 w-4 mr-3 opacity-50" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><mask id="project-search-input-mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8 10.3L15.7 14.2C16 14.6 16 15.2 15.6 15.6C15.2 16 14.6 16 14.2 15.6L10.3 11.7C9.3 12.5 7.9 13 6.5 13C2.9 13 0 10.1 0 6.50005C0 2.90005 2.9 4.57764e-05 6.5 4.57764e-05C10.1 4.57764e-05 13 2.90005 13.1 6.50005C13.1 7.90005 12.6 9.20005 11.8 10.3ZM2 6.50005C2 9.00005 4 11 6.5 11C9 11 11 9.00005 11 6.50005C11 4.00005 9 2.00005 6.5 2.00005C4 2.00005 2 4.00005 2 6.50005Z" fill="#32324c"></path></mask><g mask="url(#project-search-input-mask0)"><rect x="-4" y="-3.99995" width="24" height="24"></rect></g></svg>
+      </form>
+    </div>
+
+    <div class="px-4">
+      <a href="#0" class="text-white bg-blue-700 hocus:bg-blue-800 px-4 py-2 rounded text-sm inline-flex flex-row-reverse items-center">
+        Add project
+        <svg class="h-3 w-4" xmlns="http://www.w3.org/2000/svg"><path d="M6 6v4H4V6H0V4h4V0h2v4h4v2z" fill="#fff" fill-rule="evenodd"/></svg>
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 64a4e8f..897b208 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -22,21 +22,7 @@
     </header>
 
     <div class="max-w-6xl mx-auto px-4 bg-charade py-3 px-5 -mt-8 mb-4 shadow-lg">
-      <div class="flex justify-between items-center -mx-4">
-        <div class="px-4 flex-1">
-          <form action="" class="search-form flex flex-row-reverse items-center">
-            <input class="w-full text-sm bg-inherit text-white focus:outline-none" type="text" placeholder="Search projects">
-            <svg class="fill-current text-white h-4 w-4 mr-3 opacity-50" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><mask id="project-search-input-mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8 10.3L15.7 14.2C16 14.6 16 15.2 15.6 15.6C15.2 16 14.6 16 14.2 15.6L10.3 11.7C9.3 12.5 7.9 13 6.5 13C2.9 13 0 10.1 0 6.50005C0 2.90005 2.9 4.57764e-05 6.5 4.57764e-05C10.1 4.57764e-05 13 2.90005 13.1 6.50005C13.1 7.90005 12.6 9.20005 11.8 10.3ZM2 6.50005C2 9.00005 4 11 6.5 11C9 11 11 9.00005 11 6.50005C11 4.00005 9 2.00005 6.5 2.00005C4 2.00005 2 4.00005 2 6.50005Z" fill="#32324c"></path></mask><g mask="url(#project-search-input-mask0)"><rect x="-4" y="-3.99995" width="24" height="24"></rect></g></svg>
-          </form>
-        </div>
-
-        <div class="px-4">
-          <a href="#0" class="text-white bg-blue-700 hocus:bg-blue-800 px-4 py-2 rounded text-sm inline-flex flex-row-reverse items-center">
-            Add project
-            <svg class="h-3 w-4" xmlns="http://www.w3.org/2000/svg"><path d="M6 6v4H4V6H0V4h4V0h2v4h4v2z" fill="#fff" fill-rule="evenodd"/></svg>
-          </a>
-        </div>
-      </div>
+      <project-search></project-search>
     </div>
 
     <div class="max-w-6xl mx-auto p-6 xl:px-0">
@@ -76,12 +62,14 @@
 
 <script>
 import ProjectCard from '@/components/ProjectCard'
+import ProjectSearch from '@/components/ProjectSearch'
 
 export default {
   name: 'projects',
 
   components: {
-    ProjectCard
+    ProjectCard,
+    ProjectSearch
   },
 
   data () {