diff --git a/packages/builder/src/components/common/NavHeader.svelte b/packages/builder/src/components/common/NavHeader.svelte
index 5e401cf3c8..c38ac33f20 100644
--- a/packages/builder/src/components/common/NavHeader.svelte
+++ b/packages/builder/src/components/common/NavHeader.svelte
@@ -6,6 +6,7 @@
   export let title
   export let placeholder
   export let value
+  export let onAdd
 
   let searchInput
   let search = false
@@ -31,7 +32,7 @@
     if (search) {
       closeSearch()
     } else {
-      alert("todo")
+      onAdd()
     }
   }
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
index 268cce2930..90f9fb6be2 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
@@ -27,10 +27,10 @@
           title="Sources"
           placeholder="Search for sources"
           bind:value={searchValue}
+          onAdd={() => $goto("./new")}
         />
       </span>
       <Layout paddingX="L" paddingY="XL" gap="S">
-        <Button cta on:click={() => $goto("./new")}>Add source</Button>
         <DatasourceNavigator searchTerm={searchValue} />
       </Layout>
     </Panel>