diff --git a/playbook-website/app/javascript/components/KitSearch.tsx b/playbook-website/app/javascript/components/KitSearch.tsx
index 73a619516c..6c9ed3d6ad 100644
--- a/playbook-website/app/javascript/components/KitSearch.tsx
+++ b/playbook-website/app/javascript/components/KitSearch.tsx
@@ -1,12 +1,20 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Typeahead } from 'playbook-ui'
+import { matchSorter } from 'match-sorter'
+
+type Kit = {
+  label: string,
+  value: string,
+}
 
 type KitSearchProps = {
   classname: String,
-  kits: [],
+  kits: Kit[],
   id: String,
 }
 const KitSearch = ({ classname, id, kits }: KitSearchProps) => {
+  const [filteredKits, setFilteredKits] = useState(kits)
+
   useEffect(() => {
     if (id === 'desktop-kit-search') {
       window.addEventListener('keydown', (e) => {
@@ -24,6 +32,15 @@ const KitSearch = ({ classname, id, kits }: KitSearchProps) => {
     }
   }
 
+  const handleFilteredKits = (query: string) => {
+    if (query) {
+      const results = matchSorter(kits, query, { keys: ['label'] })
+      setFilteredKits(results)
+    } else {
+      setFilteredKits(kits)
+    }
+  }
+
   return (
     <div>
       <Typeahead
@@ -31,7 +48,8 @@ const KitSearch = ({ classname, id, kits }: KitSearchProps) => {
           dark={document.cookie.split('; ').includes('dark_mode=true')}
           id={id}
           onChange={handleChange}
-          options={kits}
+          onInputChange={handleFilteredKits}
+          options={filteredKits}
           placeholder="Search..."
       />
     </div>
diff --git a/playbook-website/package.json b/playbook-website/package.json
index e3f29aa367..83484d041d 100644
--- a/playbook-website/package.json
+++ b/playbook-website/package.json
@@ -14,6 +14,7 @@
     "@powerhome/power-fonts": "0.0.1-alpha.6",
     "anchor-js": "^5.0.0",
     "maplibre-gl": "^2.4.0",
+    "match-sorter": "^8.0.0",
     "playbook-ui": ">= 1"
   },
   "devDependencies": {