diff --git a/package-lock.json b/package-lock.json
index 082ebc0..e9e01ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,6 +62,7 @@
         "svelte": "^4.2.12",
         "svelte-check": "^3.6.2",
         "svelte-preprocess": "^5.1.1",
+        "sveltekit-search-params": "^2.1.2",
         "tailwindcss": "^3.4.1",
         "tslib": "^2.6.2",
         "typescript": "^5.3.2",
@@ -1243,7 +1244,6 @@
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.0.2.tgz",
       "integrity": "sha512-MpmF/cju2HqUls50WyTHQBZUV3ovV/Uk8k66AN2gwHogNAG8wnW8xtZDhzNBsFJJuvmq1qnzA5kE7YfMJNFv2Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@sveltejs/vite-plugin-svelte-inspector": "^2.0.0",
         "debug": "^4.3.4",
@@ -1266,7 +1266,6 @@
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.0.0.tgz",
       "integrity": "sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "debug": "^4.3.4"
       },
@@ -2270,7 +2269,6 @@
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7258,7 +7256,6 @@
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
       "integrity": "sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": "^12.20 || ^14.13.1 || >= 16"
       },
@@ -7329,6 +7326,19 @@
         }
       }
     },
+    "node_modules/sveltekit-search-params": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sveltekit-search-params/-/sveltekit-search-params-2.1.2.tgz",
+      "integrity": "sha512-wh5WSo46wz48MdWvpchVGrOjoDmbmsNJ7dUToSZ4L1SQ2LOasmTjAAlFhfG/EFvEhR34phRzLF7BjE0ZHzx1Uw==",
+      "dev": true,
+      "dependencies": {
+        "@sveltejs/vite-plugin-svelte": "^3.0.2"
+      },
+      "peerDependencies": {
+        "@sveltejs/kit": "^1.0.0 || ^2.0.0",
+        "svelte": "^3.55.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
@@ -8148,7 +8158,6 @@
       "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
       "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
       "dev": true,
-      "peer": true,
       "peerDependencies": {
         "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
       },
@@ -9031,7 +9040,6 @@
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.0.2.tgz",
       "integrity": "sha512-MpmF/cju2HqUls50WyTHQBZUV3ovV/Uk8k66AN2gwHogNAG8wnW8xtZDhzNBsFJJuvmq1qnzA5kE7YfMJNFv2Q==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@sveltejs/vite-plugin-svelte-inspector": "^2.0.0",
         "debug": "^4.3.4",
@@ -9047,7 +9055,6 @@
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.0.0.tgz",
       "integrity": "sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==",
       "dev": true,
-      "peer": true,
       "requires": {
         "debug": "^4.3.4"
       }
@@ -9724,8 +9731,7 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "dequal": {
       "version": "2.0.3",
@@ -13375,7 +13381,6 @@
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
       "integrity": "sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==",
       "dev": true,
-      "peer": true,
       "requires": {}
     },
     "svelte-preprocess": {
@@ -13391,6 +13396,15 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "sveltekit-search-params": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sveltekit-search-params/-/sveltekit-search-params-2.1.2.tgz",
+      "integrity": "sha512-wh5WSo46wz48MdWvpchVGrOjoDmbmsNJ7dUToSZ4L1SQ2LOasmTjAAlFhfG/EFvEhR34phRzLF7BjE0ZHzx1Uw==",
+      "dev": true,
+      "requires": {
+        "@sveltejs/vite-plugin-svelte": "^3.0.2"
+      }
+    },
     "tailwindcss": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
@@ -13964,7 +13978,6 @@
       "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
       "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
       "dev": true,
-      "peer": true,
       "requires": {}
     },
     "vscode-oniguruma": {
diff --git a/package.json b/package.json
index 08f0ae4..97e2d73 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "svelte": "^4.2.12",
     "svelte-check": "^3.6.2",
     "svelte-preprocess": "^5.1.1",
+    "sveltekit-search-params": "^2.1.2",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.3.2",
diff --git a/src/lib/siteConfig.js b/src/lib/siteConfig.js
index a8ca302..40ec4a1 100644
--- a/src/lib/siteConfig.js
+++ b/src/lib/siteConfig.js
@@ -14,6 +14,8 @@ export const STEAM_ID = '76561197965804852' // need process.env.STEAM_API_KEY
 export const APPROVED_POSTERS_GH_USERNAME = ['tjheffner']
 export const GH_PUBLISHED_TAGS = ['Published']
 
+export const POST_CATEGORIES = ['Note', 'Recipe', 'Technical', 'DIY']
+
 // auto generated variables
 export const REPO_URL = 'https://github.com/' + GH_USER_REPO
 export const REPO_OWNER = GH_USER_REPO.split('/')[0]
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
index 4ba3a9a..992ff7e 100644
--- a/src/routes/(main)/+page.svelte
+++ b/src/routes/(main)/+page.svelte
@@ -49,7 +49,7 @@
     <p>This site is perpetually under construction but coming along. 😎</p>
 
     <p>
-      It's mostly a place for me to post <a href="/blog?show=Recipes"
+      It's mostly a place for me to post <a href="/blog?show=Recipe"
         >recipes I like</a
       >
       and
diff --git a/src/routes/(main)/blog/+page.svelte b/src/routes/(main)/blog/+page.svelte
index dbf6401..b41ab95 100644
--- a/src/routes/(main)/blog/+page.svelte
+++ b/src/routes/(main)/blog/+page.svelte
@@ -1,107 +1,44 @@
 <script>
+  import { queryParam, ssp } from 'sveltekit-search-params'
   import PostItem from '$lib/components/PostItem.svelte'
-  import queryString from 'query-string'
-  import { onMount } from 'svelte'
+  import { POST_CATEGORIES } from '$lib/siteConfig'
+  import { fuzzySearch } from './fuzzySearch'
 
   export let data
   let { items } = data
 
-  let urlState = { filter: '', show: [] }
-  let defaultURLState = { filter: '', show: [] }
+  // https://github.com/paoloricciuti/sveltekit-search-params#how-to-use-it
+  /** @type import('svelte/store').Writable<String[] | null> */
+  let selectedCategories = queryParam(
+    'show',
+    {
+      encode: (arr) => arr?.toString(),
+      decode: (str) => str?.split(',')?.filter((e) => e) ?? []
+    },
+    { debounceHistory: 500 }
+  );
+  let search = queryParam('filter', ssp.string(), {
+    debounceHistory: 500
+  });
+
+  let inputEl;
 
-  const setURLState = (newState) => {
-    // merge with existing state
-    const finalState = { ...urlState, ...newState }
-    urlState = finalState
-
-    Object.keys(finalState).forEach(function (k) {
-      if (
-        // don't save some state values if it meets the conditions below
-        !finalState[k] || // falsy
-        finalState[k] === '' || // string
-        (Array.isArray(finalState[k]) && !finalState[k].length) || // array
-        finalState[k] === defaultURLState[k] // same as default state, unnecessary
-      ) {
-        delete finalState[k] // drop query params with new values = falsy
-      }
-    })
-    if (typeof window !== 'undefined') {
-      history.pushState(
-        {},
-        '',
-        document.location.origin +
-          document.location.pathname +
-          '?' +
-          queryString.stringify(finalState)
-      )
-    }
+  function focusSearch(e) {
+    if (e.key === '/' && inputEl) inputEl.select();
   }
 
-  let recipes = false
-  let technical = false
-  let notes = false
-
-  let filterStr = ''
-
-  onMount(() => {
-    if (location.search.length < 1) return // early terminate if no search
-    let givenstate = queryString.parse(location.search)
-    if (!Array.isArray(givenstate.show)) givenstate.show = [givenstate.show]
-    if (!givenstate.show.includes('Recipes')) recipes = false
-    if (!givenstate.show.includes('Technical')) technical = false
-    if (!givenstate.show.includes('Notes')) notes = false
-    if (givenstate.filter) filterStr = givenstate.filter
-    urlState = { ...defaultURLState, ...givenstate }
-  })
-
-  function saveURLState() {
-    showAll = true
-    setTimeout(() => {
-      setURLState({
-        filter: filterStr,
-        show: [
-          recipes && 'Recipes',
-          technical && 'Technical',
-          notes && 'Notes',
-        ].filter(Boolean),
-      })
-    }, 100)
+  function clearFilters(e) {
+    $search = ''
+    $selectedCategories = []
   }
 
-  // $: showAll = filterStr.length > 2
-  $: showAll = false
-
-  function notIncludes(_filterStr, item) {
-    let res = true
-    _filterStr = _filterStr.toLowerCase().replace('/', '')
-    function incluye(thing) {
-      // make sure to coerce to string bc sometimes yaml parses as string
-      if (thing && String(thing).toLowerCase().includes(_filterStr)) res = false
-    }
-    incluye(item.title)
-    incluye(item.slug)
-    incluye(item.category)
-    incluye(item.description)
-    return res
-  }
+  let LIST_DISPLAY_LENGTH = 10
+  let isTruncated = items?.length > LIST_DISPLAY_LENGTH;
 
-  let inputEl
-  function focusSearch(e) {
-    if (e.key === '/' && inputEl) inputEl.select()
-  }
-
-  $: list = items
-    .slice(0, showAll ? items.length : 10) // bump this up when more posts
-    .filter((x) => {
-      if (filterStr && notIncludes(filterStr, x)) {
-        return false
-      } else {
-        if ([recipes, technical, notes].every((v) => v === false)) return true
-        if (recipes && x.category === 'recipe') return true
-        if (technical && x.category === 'technical') return true
-        if (notes && x.category === 'note') return true
-      }
-    })
+  let list
+  $: fuzzySearch(items, $selectedCategories, $search).then(_items => {
+    list = _items.slice(0, isTruncated ? LIST_DISPLAY_LENGTH : items.length)
+  })
 </script>
 
 <svelte:head>
@@ -125,13 +62,13 @@
     to filter.
   </p>
 
+  <!-- Search Bar -->
   <div class="relative w-full">
     <input
       aria-label="Search articles"
       type="text"
-      bind:this={inputEl}
-      on:input={saveURLState}
-      bind:value={filterStr}
+      bind:value={$search}
+			bind:this={inputEl}
       placeholder="Hit / to search"
       class="block w-full rounded-md border border-zinc-400 bg-gray-200
 						px-4 py-2 text-gray-900 placeholder:text-zinc-700
@@ -157,47 +94,30 @@
   <!-- Filter Buttons -->
   <div class="my-4 flex w-full items-center">
     <span class="mr-2 text-zinc-900 dark:text-gray-400"> Filter: </span>
-    <span>
-      <button
-        type="button"
-        on:click={() => {
-          saveURLState()
-          recipes = !recipes
-        }}
-        class:activefilter={recipes}
-        class="filter"
-      >
-        Recipes
-      </button>
-      <button
-        type="button"
-        on:click={() => {
-          saveURLState()
-          technical = !technical
-        }}
-        class:activefilter={technical}
-        class="filter"
-      >
-        Technical
-      </button>
-      <button
-        type="button"
-        on:click={() => {
-          saveURLState()
-          notes = !notes
-        }}
-        class:activefilter={notes}
-        class="filter"
-      >
-        Notes
-      </button>
-    </span>
+    {#each POST_CATEGORIES as availableCategory}
+      <div>
+        <input
+          id="category-{availableCategory}"
+          class="peer sr-only"
+          type="checkbox"
+          bind:group={$selectedCategories}
+          value={availableCategory}
+        />
+        <label
+          for="category-{availableCategory}"
+          class="filter"
+          class:activefilter={$selectedCategories.includes(availableCategory)}
+        >
+          {availableCategory}
+        </label>
+      </div>
+    {/each}
   </div>
 
   <hr class="mb-6 md:mb-12" />
 
   <!-- Results -->
-  {#if list.length}
+  {#if list?.length}
     <ul
       class="w-full divide-y divide-dashed divide-sky-600 md:mx-auto md:w-4/5 dark:divide-blue-300"
     >
@@ -209,28 +129,34 @@
         </li>
       {/each}
     </ul>
-    {#if !showAll}
+    {#if isTruncated}
       <div class="flex justify-center mx-auto">
         <button
-          on:click={() => (showAll = true)}
+          on:click={() => (isTruncated = false)}
           class="filter"
         >
           See more posts
         </button>
       </div>
     {/if}
-  {:else if filterStr}
+  {:else if $search && $selectedCategories.length === 0}
     <div class="prose dark:prose-invert">
       No posts found for
-      <code>{filterStr}</code>.
+      <code>{$search}</code>.
     </div>
     <button
-      on:click={() => (filterStr = '')}
+      on:click={() => ($search = '')}
       class="filter my-4"
     >
       Clear your search
     </button>
   {:else}
-    <div class="prose dark:prose-invert">Search something else!</div>
+    <div class="prose dark:prose-invert">No posts found with this combination of filters. Search something else!</div>
+    <button
+      on:click={clearFilters}
+      class="filter my-4"
+    >
+      Clear all filters
+    </button>
   {/if}
 </section>