diff --git a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
index 7989c5f1a8..3ece483425 100644
--- a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
@@ -1,13 +1,10 @@
 <script>
-  import { Icon, Body } from "@budibase/bbui"
   import { apps, sideBarCollapsed } from "stores/portal"
   import { params, goto } from "@roxi/routify"
-  import { tick } from "svelte"
   import NavItem from "components/common/NavItem.svelte"
+  import NavHeader from "components/common/NavHeader.svelte"
 
-  let searchInput
   let searchString
-  let searching = false
 
   $: filteredApps = $apps
     .filter(app => {
@@ -21,39 +18,16 @@
       const lowerB = b.name.toLowerCase()
       return lowerA > lowerB ? 1 : -1
     })
-
-  const startSearching = async () => {
-    searching = true
-    searchString = ""
-    await tick()
-    searchInput.focus()
-  }
-
-  const stopSearching = () => {
-    searching = false
-    searchString = ""
-  }
 </script>
 
 <div class="side-bar" class:collapsed={$sideBarCollapsed}>
   <div class="side-bar-controls">
-    {#if searching}
-      <input
-        bind:this={searchInput}
-        bind:value={searchString}
-        placeholder="Search for apps"
-      />
-    {:else}
-      <Body size="S">Apps</Body>
-      <Icon name="Search" size="S" hoverable on:click={startSearching} />
-    {/if}
-    <div class="rotational" class:rotated={searching}>
-      <Icon
-        name="Add"
-        hoverable
-        on:click={searching ? stopSearching : () => $goto("./create")}
-      />
-    </div>
+    <NavHeader
+      title="Apps"
+      placeholder="Search for apps"
+      bind:value={searchString}
+      onAdd={() => $goto("./create")}
+    />
   </div>
   <div class="side-bar-nav">
     <NavItem
@@ -103,44 +77,13 @@
     gap: var(--spacing-l);
     padding: 0 var(--spacing-l);
   }
-  .side-bar-controls :global(.spectrum-Body),
-  .side-bar-controls input {
-    flex: 1 1 auto;
-  }
   .side-bar-controls :global(.spectrum-Icon) {
     color: var(--spectrum-global-color-gray-700);
   }
 
-  input {
-    outline: none;
-    border: none;
-    max-width: none;
-    flex: 1 1 auto;
-    color: var(--spectrum-global-color-gray-800);
-    font-size: 14px;
-    padding: 0;
-    transition: border 130ms ease-out;
-    font-family: var(--font-sans);
-    background: inherit;
-  }
-  input::placeholder {
-    color: var(--spectrum-global-color-gray-700);
-    transition: color 130ms ease-out;
-  }
-  input:hover::placeholder {
-    color: var(--spectrum-global-color-gray-800);
-  }
-
   .side-bar-nav {
     flex: 1 1 auto;
     overflow: auto;
     overflow-x: hidden;
   }
-
-  div.rotational {
-    transition: transform 130ms ease-out;
-  }
-  div.rotational.rotated {
-    transform: rotate(45deg);
-  }
 </style>
