diff --git a/src/addons/stories/Popularity.stories.svelte b/src/addons/stories/Popularity.stories.svelte
index 3aaea8fbc..e350e9dd6 100644
--- a/src/addons/stories/Popularity.stories.svelte
+++ b/src/addons/stories/Popularity.stories.svelte
@@ -2,10 +2,6 @@
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import Popularity from "../Popularity.svelte";
 
-  const args = {
-    useCount: 100,
-  };
-
   export const meta = {
     title: "Add-Ons / Popularity",
     tags: ["autodocs"],
diff --git a/src/pages/app/SearchBar.svelte b/src/pages/app/SearchBar.svelte
index cd0daec6a..ac649c630 100644
--- a/src/pages/app/SearchBar.svelte
+++ b/src/pages/app/SearchBar.svelte
@@ -1,22 +1,24 @@
 <script>
+  import { _ } from "svelte-i18n";
+  import { onMount, onDestroy } from "svelte";
+
   import SearchInput from "./SearchInput.svelte";
   import Button from "@/common/Button.svelte";
-  import { onMount, onDestroy } from "svelte";
 
   import {
     handleSearch,
     search as searchData,
     userSearchQuery,
-  } from "@/search/search";
+  } from "@/search/search.js";
   import { showSearchTips } from "@/manager/layout.js";
   import { router } from "@/router/router.js";
-  import { _ } from "svelte-i18n";
 
   export let search = "";
   export let example = false;
   export let compact = false;
   export let embed = false;
   export let dialog = false;
+
   let transformedQuery;
 
   function submitSearch() {
@@ -78,35 +80,37 @@
   {/if}
 </div>
 
-<style lang="scss">
+<style>
   .searchcontainer {
     margin: 0 0 20px 0;
+  }
 
-    @media only screen and (max-width: 720px) {
+  @media only screen and (max-width: 720px) {
+    .searchcontainer {
       margin: 0 0 30px 0;
     }
+  }
 
-    &.example {
-      margin: 0;
-    }
+  .searchcontainer.example {
+    margin: 0;
+  }
 
-    .info {
-      color: $gray;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: -3px;
+  .searchcontainer .info {
+    color: var(--gray);
+    font-size: 12px;
+    margin-left: 5px;
+    margin-top: -3px;
+  }
 
-      > span {
-        vertical-align: middle;
-        margin-right: 2px;
-      }
-    }
+  .searchcontainer .info > span {
+    vertical-align: middle;
+    margin-right: 2px;
+  }
 
-    :global(code) {
-      color: #8a8a8a;
-      border: solid 1px gainsboro;
-      padding: 0 2px;
-      border-radius: $radius;
-    }
+  .searchcontainer :global(code) {
+    color: #8a8a8a;
+    border: solid 1px gainsboro;
+    padding: 0 2px;
+    border-radius: var(--radius);
   }
 </style>
diff --git a/src/pages/app/SearchInput.svelte b/src/pages/app/SearchInput.svelte
index 31586bc1f..c12e26fb8 100644
--- a/src/pages/app/SearchInput.svelte
+++ b/src/pages/app/SearchInput.svelte
@@ -1,10 +1,9 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { onMount } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte";
 
   import NoWhitespace from "@/common/NoWhitespace.svelte";
 
-  import emitter from "@/emit.js";
   import { highlight } from "@/search/parse.js";
   import { fieldValid, sortCompletions } from "@/search/searchFields.js";
   import { orgsAndUsers } from "@/manager/orgsAndUsers.js";
@@ -22,6 +21,8 @@
   import searchIconSvg from "@/assets/search_icon.svg?raw";
   import closeInlineSvg from "@/assets/close_inline.svg?raw";
 
+  const dispatch = createEventDispatcher();
+
   const fieldAliases = {
     projects: "project",
     account: "user",
@@ -34,10 +35,6 @@
     return field;
   }
 
-  const emit = emitter({
-    search() {},
-  });
-
   export let value = "";
   export let example = false;
   export let compact = false;
@@ -508,7 +505,7 @@
 
     if (e.which == 13 || e.keyCode == 13) {
       // Search on enter
-      emit.search();
+      dispatch("search");
       e.preventDefault();
       return;
     }
diff --git a/src/pages/app/SearchLink.svelte b/src/pages/app/SearchLink.svelte
index 8bf6ce10d..51267dbbf 100644
--- a/src/pages/app/SearchLink.svelte
+++ b/src/pages/app/SearchLink.svelte
@@ -1,20 +1,19 @@
 <script>
   import { _ } from "svelte-i18n";
-  // SVG assets
-  import SearchIconSvg from "@/assets/search_icon.svg?raw";
+  import { Search16 } from "svelte-octicons";
 
   export let link = "";
 </script>
 
 <div class="link">
-  <a href={link} target="_blank"
-    >{@html SearchIconSvg}
+  <a href={link} target="_blank">
+    <Search16 />
     {$_("searchLink.search")}</a
   >
 </div>
 <div class="linkcontainer" />
 
-<style lang="scss">
+<style>
   .linkcontainer {
     background: white;
     position: absolute;
@@ -26,28 +25,27 @@
   }
 
   .link {
-    background: $faint-gray;
+    background: var(--faint-gray);
     display: inline-block;
     padding: 4px 19px 4px 11px;
-    border-radius: $radius;
+    border-radius: var(--radius);
     border: solid 1px gainsboro;
     margin: 0 -12px;
-    color: $secondary;
-
+    color: var(--secondary);
     margin-bottom: 6px;
+  }
 
-    :global(*) {
-      display: inline-block;
-      vertical-align: middle;
-    }
+  .link :global(*) {
+    display: inline-block;
+    vertical-align: middle;
+  }
 
-    :global(svg) {
-      padding-right: 5px;
-      padding-bottom: 1px;
-    }
+  .link :global(svg) {
+    padding-right: 5px;
+    padding-bottom: 1px;
+  }
 
-    &:hover {
-      text-decoration: underline;
-    }
+  .link:hover {
+    text-decoration: underline;
   }
 </style>
diff --git a/src/pages/app/fixtures/organizations.json b/src/pages/app/fixtures/organizations.json
new file mode 100644
index 000000000..c64454746
--- /dev/null
+++ b/src/pages/app/fixtures/organizations.json
@@ -0,0 +1,95 @@
+{
+  "count": 11,
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "id": 10028,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/organization.png",
+      "individual": false,
+      "name": "Allan Test",
+      "slug": "allan-test",
+      "uuid": "0f3eeebd-217c-4591-8120-dae9a9b038c3"
+    },
+    {
+      "id": 10000,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/organization.png",
+      "individual": false,
+      "name": "Free Movement",
+      "slug": "free-movement",
+      "uuid": "c1a468de-512c-4c59-ae43-84403d90a625"
+    },
+    {
+      "id": 7,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/organization.png",
+      "individual": false,
+      "name": "Grand Valley State University",
+      "slug": "grand-valley-state-university",
+      "uuid": "3f96395d-b6f2-45a3-8556-4600284f1cab"
+    },
+    {
+      "id": 10027,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/organization.png",
+      "individual": false,
+      "name": "Max User Test",
+      "slug": "max-user-test",
+      "uuid": "c0075021-0c21-4f12-b7a4-734190755252"
+    },
+    {
+      "id": 1,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/media/org_avatars/logo_uEHCMva.png",
+      "individual": false,
+      "name": "MuckRock",
+      "slug": "muckrock",
+      "uuid": "026530fc-df3a-4625-8317-c58965b9e383"
+    },
+    {
+      "id": 12,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/organization.png",
+      "individual": false,
+      "name": "Outlier Media",
+      "slug": "outlier-media",
+      "uuid": "e88f8b90-28e9-4951-b95f-635323fd1507"
+    },
+    {
+      "id": 6,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/organization.png",
+      "individual": false,
+      "name": "Society of Professional Journalists",
+      "slug": "society-of-professional-journalists",
+      "uuid": "e6dff932-2028-4fd9-9b1c-b629599a8809"
+    },
+    {
+      "id": 4,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/organization.png",
+      "individual": false,
+      "name": "Sunshine Week",
+      "slug": "sunshine-week",
+      "uuid": "d31f9c1f-db18-4f21-8bd4-47fe75488412"
+    },
+    {
+      "id": 8,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/organization.png",
+      "individual": false,
+      "name": "test",
+      "slug": "test",
+      "uuid": "9de30508-add8-45db-a6c5-399f566eeaec"
+    },
+    {
+      "id": 545,
+      "avatar_url": "",
+      "individual": false,
+      "name": "The Tyee",
+      "slug": "thetyee",
+      "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+    },
+    {
+      "id": 5,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/organization.png",
+      "individual": false,
+      "name": "Wesleyan Journalism",
+      "slug": "wesleyan-journalism",
+      "uuid": "a74a999c-4e1c-4056-8273-08dd639101fc"
+    }
+  ]
+}
diff --git a/src/pages/app/fixtures/projects.json b/src/pages/app/fixtures/projects.json
new file mode 100644
index 000000000..be2c7dbbe
--- /dev/null
+++ b/src/pages/app/fixtures/projects.json
@@ -0,0 +1,259 @@
+{
+  "count": 21,
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "id": 200006,
+      "created_at": "2022-03-01T15:55:05.527749Z",
+      "description": "test",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "add-on-test",
+      "title": "Add-on test",
+      "updated_at": "2022-03-01T15:55:05.536919Z",
+      "user": 100003
+    },
+    {
+      "id": 200008,
+      "created_at": "2022-05-13T14:52:32.130871Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "ag-foia-decisions-2021",
+      "title": "AG FOIA Decisions 2021",
+      "updated_at": "2022-05-13T14:52:32.132115Z",
+      "user": 3
+    },
+    {
+      "id": 11701,
+      "created_at": "2020-10-13T20:15:08.528599Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "bc-mla-disclosure-statements-2013",
+      "title": "BC MLA Disclosure Statements (2013)",
+      "updated_at": "2020-10-13T20:15:08.531029Z",
+      "user": 3896
+    },
+    {
+      "id": 15776,
+      "created_at": "2020-10-13T20:15:08.528506Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "bctf-moa",
+      "title": "BCTF MOA",
+      "updated_at": "2020-10-13T20:15:08.530841Z",
+      "user": 5496
+    },
+    {
+      "id": 19592,
+      "created_at": "2020-10-13T20:15:08.528734Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "bottom-lines",
+      "title": "Bottom Lines",
+      "updated_at": "2020-10-13T20:15:08.531461Z",
+      "user": 5484
+    },
+    {
+      "id": 4,
+      "created_at": "2020-02-10T20:49:53.494117Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "djangoment-planning-documents",
+      "title": "DjangoMent Planning Documents",
+      "updated_at": "2020-02-10T20:49:53.494446Z",
+      "user": 3
+    },
+    {
+      "id": 6692,
+      "created_at": "2020-10-13T20:15:08.528433Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "documentcloud-training-oct-2012",
+      "title": "DocumentCloud training, Oct 2012",
+      "updated_at": "2020-10-13T20:15:08.530644Z",
+      "user": 5484
+    },
+    {
+      "id": 200020,
+      "created_at": "2023-11-09T15:09:45.939780Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "hello-world",
+      "title": "Hello World",
+      "updated_at": "2023-11-09T15:09:45.940428Z",
+      "user": 100014
+    },
+    {
+      "id": 200000,
+      "created_at": "2020-02-24T18:41:40.742546Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "mitchs-project",
+      "title": "Mitch's Project",
+      "updated_at": "2020-02-24T18:41:40.743485Z",
+      "user": 1
+    },
+    {
+      "id": 200002,
+      "created_at": "2020-10-09T15:34:40.617587Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "my-new-project",
+      "title": "My new project",
+      "updated_at": "2020-10-09T15:34:40.619733Z",
+      "user": 2
+    },
+    {
+      "id": 200001,
+      "created_at": "2020-02-24T18:49:12.024718Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "new-project",
+      "title": "New project",
+      "updated_at": "2020-02-24T18:49:12.025106Z",
+      "user": 2
+    },
+    {
+      "id": 200007,
+      "created_at": "2022-05-09T17:01:58.739286Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "new-scraper-test",
+      "title": "New Scraper Test",
+      "updated_at": "2022-05-09T17:01:58.740556Z",
+      "user": 1
+    },
+    {
+      "id": 200003,
+      "created_at": "2020-10-09T15:54:16.728526Z",
+      "description": "hello",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "proj2",
+      "title": "proj2",
+      "updated_at": "2020-10-09T15:54:16.730433Z",
+      "user": 1
+    },
+    {
+      "id": 9356,
+      "created_at": "2020-10-13T20:15:08.528667Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "quick-wins",
+      "title": "Quick Wins",
+      "updated_at": "2020-10-13T20:15:08.531203Z",
+      "user": 5484
+    },
+    {
+      "id": 200004,
+      "created_at": "2021-07-21T14:01:12.983739Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "sidekick-test",
+      "title": "SideKick Test",
+      "updated_at": "2021-07-21T14:01:12.984854Z",
+      "user": 1
+    },
+    {
+      "id": 200023,
+      "created_at": "2023-12-12T15:49:47.555269Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "test",
+      "title": "Test",
+      "updated_at": "2023-12-12T15:49:47.557714Z",
+      "user": 100012
+    },
+    {
+      "id": 200005,
+      "created_at": "2022-02-23T23:09:45.893174Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "test",
+      "title": "test",
+      "updated_at": "2022-02-23T23:09:45.894952Z",
+      "user": 3
+    },
+    {
+      "id": 1,
+      "created_at": "2020-02-10T16:13:02.145040Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "test",
+      "title": "Test",
+      "updated_at": "2020-02-10T16:13:02.145817Z",
+      "user": 2
+    },
+    {
+      "id": 2,
+      "created_at": "2020-02-10T17:38:32.363722Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "test-2",
+      "title": "Test 2",
+      "updated_at": "2020-02-10T17:38:32.364348Z",
+      "user": 1
+    },
+    {
+      "id": 3,
+      "created_at": "2020-02-10T20:49:39.284898Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "test-3",
+      "title": "Test 3",
+      "updated_at": "2020-02-10T20:49:39.285306Z",
+      "user": 3
+    },
+    {
+      "id": 200009,
+      "created_at": "2023-01-26T20:46:26.662121Z",
+      "description": "",
+      "edit_access": false,
+      "add_remove_access": false,
+      "private": false,
+      "slug": "timeout-test",
+      "title": "Timeout test",
+      "updated_at": "2023-01-26T20:46:26.668099Z",
+      "user": 1
+    }
+  ]
+}
diff --git a/src/pages/app/fixtures/users.json b/src/pages/app/fixtures/users.json
new file mode 100644
index 000000000..eed9d3368
--- /dev/null
+++ b/src/pages/app/fixtures/users.json
@@ -0,0 +1,227 @@
+{
+  "count": 20,
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "id": 7143,
+      "avatar_url": "",
+      "name": "Bob Makin",
+      "organization": 10010,
+      "organizations": [10010],
+      "admin_organizations": [10010],
+      "username": "BobMakin",
+      "uuid": "dc69fb57-cfe1-458f-b85f-63bccbe39a5f",
+      "verified_journalist": true
+    },
+    {
+      "id": 100004,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/profile.png",
+      "name": "Cameron Garrison",
+      "organization": 10015,
+      "organizations": [10015],
+      "admin_organizations": [10015],
+      "username": "cgarrison98",
+      "uuid": "14b04f35-f8cb-4c3f-82ea-890343ae85d3",
+      "verified_journalist": true
+    },
+    {
+      "id": 100012,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/profile.png",
+      "name": "Chris Amico",
+      "organization": 10023,
+      "organizations": [10023, 1],
+      "admin_organizations": [10023],
+      "username": "chrisamico",
+      "uuid": "d60a86e6-eba6-4af9-80a4-97c9ceef68d6",
+      "verified_journalist": true
+    },
+    {
+      "id": 5493,
+      "avatar_url": "",
+      "name": "Colleen Kimmett",
+      "organization": 10003,
+      "organizations": [10003],
+      "admin_organizations": [10003],
+      "username": "ColleenKimmett",
+      "uuid": "e19a58c9-342f-48df-9cd6-bdbab8da7bf3",
+      "verified_journalist": true
+    },
+    {
+      "id": 11527,
+      "avatar_url": "",
+      "name": "David Ball",
+      "organization": 10011,
+      "organizations": [10011],
+      "admin_organizations": [10011],
+      "username": "DavidBall",
+      "uuid": "9c33925d-8aa9-46c7-b11b-179d10707e9c",
+      "verified_journalist": true
+    },
+    {
+      "id": 2,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/profile.png",
+      "name": "Dylan Freedman",
+      "organization": 3,
+      "organizations": [3, 1],
+      "admin_organizations": [3],
+      "username": "freedmand",
+      "uuid": "0aa27e3b-c5d8-4a9d-a278-753a770f86d7",
+      "verified_journalist": true
+    },
+    {
+      "id": 100013,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/profile.png",
+      "name": "FreeUser",
+      "organization": 10024,
+      "organizations": [10024],
+      "admin_organizations": [10024],
+      "username": "Freeuser",
+      "uuid": "1c8ea72e-6c3a-413a-858f-8f550e69f942",
+      "verified_journalist": true
+    },
+    {
+      "id": 3896,
+      "avatar_url": "",
+      "name": "Geoff D'Auria",
+      "organization": 10004,
+      "organizations": [10004],
+      "admin_organizations": [10004],
+      "username": "GeoffDAuria",
+      "uuid": "c3efe427-0b01-443e-b5fd-d1bc9a164773",
+      "verified_journalist": true
+    },
+    {
+      "id": 100010,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/media/avatars/ABS.jpg",
+      "name": "ja-test",
+      "organization": 10021,
+      "organizations": [10021, 1],
+      "admin_organizations": [10021],
+      "username": "ja22",
+      "uuid": "78756937-b6d9-40ee-b1ac-03c134416de6",
+      "verified_journalist": true
+    },
+    {
+      "id": 11528,
+      "avatar_url": "",
+      "name": "Jane Armstrong",
+      "organization": 10012,
+      "organizations": [10012],
+      "admin_organizations": [10012],
+      "username": "JaneArmstrong",
+      "uuid": "83c988bc-37e7-4281-8e27-71d10c9bef39",
+      "verified_journalist": true
+    },
+    {
+      "id": 100008,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/profile.png",
+      "name": "Jim",
+      "organization": 10019,
+      "organizations": [10019],
+      "admin_organizations": [10019],
+      "username": "jimkang",
+      "uuid": "07641232-7dc3-4f48-9166-cae259c39fca",
+      "verified_journalist": true
+    },
+    {
+      "id": 5496,
+      "avatar_url": "",
+      "name": "Katie Hyslop",
+      "organization": 10009,
+      "organizations": [10009],
+      "admin_organizations": [10009],
+      "username": "KatieHyslop",
+      "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+      "verified_journalist": true
+    },
+    {
+      "id": 100009,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/profile.png",
+      "name": "Miranda Carruth",
+      "organization": 10020,
+      "organizations": [10020],
+      "admin_organizations": [10020],
+      "username": "mcarruth",
+      "uuid": "d1d8376b-de78-434c-a311-659b98b57d2d",
+      "verified_journalist": true
+    },
+    {
+      "id": 1,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/media/account_images/22_MuckRock_2018_PRELIMANRY_EDITS_DSC_5387_2018_Derek_Kouyoumjian_preview_SfuGGnJ.jpg",
+      "name": "Mitchell J Kotler",
+      "organization": 1,
+      "organizations": [10028, 10027, 2, 1],
+      "admin_organizations": [10028, 10027, 2, 1],
+      "username": "mitch",
+      "uuid": "76742194-b998-4ca5-a7af-fd054de89e88",
+      "verified_journalist": true
+    },
+    {
+      "id": 3,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/media/account_images/Screenshot_2016-11-16_15.43.27.png",
+      "name": "Michael Morisy",
+      "organization": 1,
+      "organizations": [7, 9, 1, 6, 4, 8, 5],
+      "admin_organizations": [7, 9, 1, 6, 4, 8, 5],
+      "username": "morisy",
+      "uuid": "a7579bae-6e11-4ef0-8d65-e60288fba420",
+      "verified_journalist": true
+    },
+    {
+      "id": 100001,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/profile.png",
+      "name": "Muckrock Staff",
+      "organization": 1,
+      "organizations": [1, 10002],
+      "admin_organizations": [10002],
+      "username": "MuckrockStaff",
+      "uuid": "0cbb557a-344e-4da7-9d4c-b9bf8e0a899a",
+      "verified_journalist": true
+    },
+    {
+      "id": 5484,
+      "avatar_url": "",
+      "name": "Phillip Smith",
+      "organization": 10005,
+      "organizations": [10005],
+      "admin_organizations": [10005],
+      "username": "PhillipSmith",
+      "uuid": "f37c7e95-c9f2-473b-aff9-190d31c70209",
+      "verified_journalist": true
+    },
+    {
+      "id": 5492,
+      "avatar_url": "",
+      "name": "Robyn Smith",
+      "organization": 10007,
+      "organizations": [10007],
+      "admin_organizations": [10007],
+      "username": "RobynSmith",
+      "uuid": "25dbed0d-0415-430c-a152-1829c164c75a",
+      "verified_journalist": true
+    },
+    {
+      "id": 100011,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/profile.png",
+      "name": "Test Bot",
+      "organization": 10022,
+      "organizations": [10022],
+      "admin_organizations": [10022],
+      "username": "testbot",
+      "uuid": "2c4dc557-4714-471d-a6ef-9fc3741c7c83",
+      "verified_journalist": true
+    },
+    {
+      "id": 100003,
+      "avatar_url": "https://squarelet-staging.s3.amazonaws.com/static/images/avatars/profile.png",
+      "name": "Thad STAGING",
+      "organization": 10014,
+      "organizations": [10014],
+      "admin_organizations": [10014],
+      "username": "thad",
+      "uuid": "7033ef51-2997-4e54-98ce-0fcfeb050404",
+      "verified_journalist": true
+    }
+  ]
+}
diff --git a/src/pages/app/stories/SearchBar.stories.svelte b/src/pages/app/stories/SearchBar.stories.svelte
new file mode 100644
index 000000000..5af17dff4
--- /dev/null
+++ b/src/pages/app/stories/SearchBar.stories.svelte
@@ -0,0 +1,63 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import SearchBar from "../SearchBar.svelte";
+  import * as mock from "./mock.js";
+
+  export const meta = {
+    title: "App / Search / Search Bar",
+    component: SearchBar,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Template let:args>
+  <div class="container">
+    <SearchBar {...args} />
+  </div>
+</Template>
+
+<Story
+  name="default"
+  args={{ search: "project:example-project-123" }}
+  parameters={{
+    msw: {
+      handlers: [mock.users.data, mock.organizations.data, mock.projects.data],
+    },
+  }}
+/>
+
+<Story
+  name="compact"
+  args={{ compact: true, search: "project:example-project-123" }}
+  parameters={{
+    msw: {
+      handlers: [mock.users.data, mock.organizations.data, mock.projects.data],
+    },
+  }}
+/>
+
+<Story
+  name="example"
+  args={{ example: true, search: "project:example-project-123" }}
+  parameters={{
+    msw: {
+      handlers: [mock.users.data, mock.organizations.data, mock.projects.data],
+    },
+  }}
+/>
+
+<Story
+  name="dialog"
+  args={{ dialog: true, search: "user:example-user-123" }}
+  parameters={{
+    msw: {
+      handlers: [mock.users.data, mock.organizations.data, mock.projects.data],
+    },
+  }}
+/>
+
+<style>
+  .container {
+    padding: 2em;
+  }
+</style>
diff --git a/src/pages/app/stories/SearchInput.stories.svelte b/src/pages/app/stories/SearchInput.stories.svelte
new file mode 100644
index 000000000..9c58eaf37
--- /dev/null
+++ b/src/pages/app/stories/SearchInput.stories.svelte
@@ -0,0 +1,31 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import SearchInput from "../SearchInput.svelte";
+
+  import * as mock from "./mock.js";
+
+  export const meta = {
+    title: "App / Search / Search Input",
+    component: SearchInput,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Story
+  name="default"
+  parameters={{
+    msw: {
+      handlers: [mock.users.data, mock.organizations.data, mock.projects.data],
+    },
+  }}
+>
+  <div class="container">
+    <SearchInput value="project:example-project-123" />
+  </div>
+</Story>
+
+<style>
+  .container {
+    padding: 2em;
+  }
+</style>
diff --git a/src/pages/app/stories/SearchLink.stories.svelte b/src/pages/app/stories/SearchLink.stories.svelte
new file mode 100644
index 000000000..38446acb1
--- /dev/null
+++ b/src/pages/app/stories/SearchLink.stories.svelte
@@ -0,0 +1,22 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import SearchLink from "../SearchLink.svelte";
+  import * as mock from "./mock.js";
+
+  export const meta = {
+    title: "App / Search / Search Link",
+    component: SearchLink,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Story
+  name="default"
+  parameters={{
+    msw: {
+      handlers: [mock.users.data, mock.organizations.data, mock.projects.data],
+    },
+  }}
+>
+  <SearchLink link="/" />
+</Story>
diff --git a/src/pages/app/stories/SearchTipsDialog.stories.svelte b/src/pages/app/stories/SearchTipsDialog.stories.svelte
new file mode 100644
index 000000000..a4ef01adc
--- /dev/null
+++ b/src/pages/app/stories/SearchTipsDialog.stories.svelte
@@ -0,0 +1,16 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+
+  import Modal from "@/common/Modal.svelte";
+  import SearchTipsDialog from "../../../common/dialog/SearchTipsDialog.svelte";
+
+  export const meta = {
+    title: "App / Search / Search Tips Dialog",
+    component: SearchTipsDialog,
+    parameters: { layout: "fullscreen" },
+  };
+</script>
+
+<Story name="default">
+  <Modal component={SearchTipsDialog} />
+</Story>
diff --git a/src/pages/app/stories/mock.js b/src/pages/app/stories/mock.js
new file mode 100644
index 000000000..921e2a86f
--- /dev/null
+++ b/src/pages/app/stories/mock.js
@@ -0,0 +1,48 @@
+import { rest } from "msw";
+import { baseApiUrl } from "../../../api/base.js";
+
+import usersFixture from "../fixtures/users.json";
+import orgFixtures from "../fixtures/organizations.json";
+import projectFixtures from "../fixtures/projects.json";
+
+const urls = {
+  users: new URL("users/", baseApiUrl).toString(),
+  organizations: new URL("organizations", baseApiUrl).toString(),
+  projects: new URL("projects/", baseApiUrl).toString(),
+};
+
+export const users = {
+  data: rest.get(urls.users, (req, res, ctx) => res(ctx.json(usersFixture))),
+
+  loading: rest.get(urls.users, (req, res, ctx) => ctx.delay("infinite")),
+
+  error: rest.get(urls.users, (req, res, ctx) =>
+    res(ctx.status(404, "Not Found"), ctx.json({ detail: "Not found." })),
+  ),
+};
+
+export const organizations = {
+  data: rest.get(urls.organizations, (req, res, ctx) =>
+    res(ctx.json(orgFixtures)),
+  ),
+
+  loading: rest.get(urls.organizations, (req, res, ctx) =>
+    ctx.delay("infinite"),
+  ),
+
+  error: rest.get(urls.organizations, (req, res, ctx) =>
+    res(ctx.status(404, "Not Found"), ctx.json({ detail: "Not found." })),
+  ),
+};
+
+export const projects = {
+  data: rest.get(urls.projects, (req, res, ctx) =>
+    res(ctx.json(projectFixtures)),
+  ),
+
+  loading: rest.get(urls.projects, (req, res, ctx) => ctx.delay("infinite")),
+
+  error: rest.get(urls.projects, (req, res, ctx) =>
+    res(ctx.status(404, "Not Found"), ctx.json({ detail: "Not found." })),
+  ),
+};