diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.tsx
index 78fbb63..f897de2 100644
--- a/app/components/SearchBar.tsx
+++ b/app/components/SearchBar.tsx
@@ -1,26 +1,48 @@
 import { SearchIcon } from "@heroicons/react/outline";
 import { ShortcutIcon } from "./Icons/ShortcutIcon";
 import { Body } from "./Primitives/Body";
+import { Dialog, DialogTrigger, DialogContent } from "./UI/Dialog";
 
 export type SearchBarProps = {
   className?: string;
 };
 
+import classnames from "~/utilities/classnames";
+
 export function SearchBar({ className }: SearchBarProps) {
   return (
-    <div className="flex justify-between items-center group w-44 rounded-sm bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70">
-      <div className="flex items-center pl-2">
-        <SearchIcon className="w-4 h-4 mr-1" />
-        <Body>Search…</Body>
-      </div>
-      <div className="flex items-center gap-1 pr-2">
-        <ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
-          ⌘
-        </ShortcutIcon>
-        <ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
-          K
-        </ShortcutIcon>
-      </div>
-    </div>
+    <Dialog>
+      <DialogTrigger>
+        <div className="flex justify-between items-center group w-44 rounded-sm bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70">
+          <div className="flex items-center pl-2">
+            <SearchIcon className="w-4 h-4 mr-1" />
+            <Body>Search…</Body>
+          </div>
+          <div className="flex items-center gap-1 pr-2">
+            <ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
+              ⌘
+            </ShortcutIcon>
+            <ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
+              K
+            </ShortcutIcon>
+          </div>
+        </div>
+      </DialogTrigger>
+      <DialogContent
+        className={classnames(
+          "fixed z-50",
+          "w-[95vw] max-w-md rounded-lg p-4 md:w-full",
+          "top-[30%] left-[50%] -translate-x-[50%] -translate-y-[50%]",
+          "bg-white dark:bg-gray-800",
+          "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
+        )}
+      >
+        <SearchCommandPalette />
+      </DialogContent>
+    </Dialog>
   );
 }
+
+export default function SearchCommandPalette() {
+  return <div className="text-center">Search Command Palette</div>;
+}
diff --git a/app/components/UI/Dialog.tsx b/app/components/UI/Dialog.tsx
new file mode 100644
index 0000000..27519ff
--- /dev/null
+++ b/app/components/UI/Dialog.tsx
@@ -0,0 +1,20 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import React, { ComponentPropsWithoutRef } from "react";
+
+export const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ children, ...props }, forwardedRef) => (
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay
+      forceMount
+      className="fixed inset-0 z-20 bg-black/50"
+    />
+    <DialogPrimitive.Content forceMount {...props} ref={forwardedRef}>
+      {children}
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+));
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
diff --git a/package-lock.json b/package-lock.json
index 37992d4..01dde43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@jsonhero/json-schema-fns": "^0.0.1",
         "@jsonhero/path": "^1.0.17",
         "@jsonhero/schema-infer": "^0.1.x",
+        "@radix-ui/react-dialog": "^0.1.7",
         "@radix-ui/react-popover": "^0.1.5",
         "@radix-ui/react-tabs": "^0.1.5",
         "@remix-run/cloudflare-workers": "^1.2.3",
@@ -2151,6 +2152,61 @@
         "react": "^16.8 || ^17.0"
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-0.1.7.tgz",
+      "integrity": "sha512-jXt8srGhHBRvEr9jhEAiwwJzWCWZoGRJ030aC9ja/gkRJbZdy0iD3FwXf+Ff4RtsZyLUMHW7VUwFOlz3Ixe1Vw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-context": "0.1.1",
+        "@radix-ui/react-dismissable-layer": "0.1.5",
+        "@radix-ui/react-focus-guards": "0.1.0",
+        "@radix-ui/react-focus-scope": "0.1.4",
+        "@radix-ui/react-id": "0.1.5",
+        "@radix-ui/react-portal": "0.1.4",
+        "@radix-ui/react-presence": "0.1.2",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-slot": "0.1.2",
+        "@radix-ui/react-use-controllable-state": "0.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "^2.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0",
+        "react-dom": "^16.8 || ^17.0"
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz",
+      "integrity": "sha512-J+fYWijkX4M4QKwf9dtu1oC0U6e6CEl8WhBp3Ad23yz2Hia0XCo6Pk/mp5CAFy4QBtQedTSkhW05AdtSOEoajQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-use-body-pointer-events": "0.1.1",
+        "@radix-ui/react-use-callback-ref": "0.1.0",
+        "@radix-ui/react-use-escape-keydown": "0.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-body-pointer-events": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz",
+      "integrity": "sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "0.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.4.tgz",
@@ -15119,6 +15175,53 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "@radix-ui/react-dialog": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-0.1.7.tgz",
+      "integrity": "sha512-jXt8srGhHBRvEr9jhEAiwwJzWCWZoGRJ030aC9ja/gkRJbZdy0iD3FwXf+Ff4RtsZyLUMHW7VUwFOlz3Ixe1Vw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-context": "0.1.1",
+        "@radix-ui/react-dismissable-layer": "0.1.5",
+        "@radix-ui/react-focus-guards": "0.1.0",
+        "@radix-ui/react-focus-scope": "0.1.4",
+        "@radix-ui/react-id": "0.1.5",
+        "@radix-ui/react-portal": "0.1.4",
+        "@radix-ui/react-presence": "0.1.2",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-slot": "0.1.2",
+        "@radix-ui/react-use-controllable-state": "0.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "^2.4.0"
+      },
+      "dependencies": {
+        "@radix-ui/react-dismissable-layer": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz",
+          "integrity": "sha512-J+fYWijkX4M4QKwf9dtu1oC0U6e6CEl8WhBp3Ad23yz2Hia0XCo6Pk/mp5CAFy4QBtQedTSkhW05AdtSOEoajQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/primitive": "0.1.0",
+            "@radix-ui/react-compose-refs": "0.1.0",
+            "@radix-ui/react-primitive": "0.1.4",
+            "@radix-ui/react-use-body-pointer-events": "0.1.1",
+            "@radix-ui/react-use-callback-ref": "0.1.0",
+            "@radix-ui/react-use-escape-keydown": "0.1.0"
+          }
+        },
+        "@radix-ui/react-use-body-pointer-events": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz",
+          "integrity": "sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "0.1.0"
+          }
+        }
+      }
+    },
     "@radix-ui/react-dismissable-layer": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.4.tgz",
diff --git a/package.json b/package.json
index f5fcc3f..8a746f9 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@jsonhero/json-schema-fns": "^0.0.1",
     "@jsonhero/path": "^1.0.17",
     "@jsonhero/schema-infer": "^0.1.x",
+    "@radix-ui/react-dialog": "^0.1.7",
     "@radix-ui/react-popover": "^0.1.5",
     "@radix-ui/react-tabs": "^0.1.5",
     "@remix-run/cloudflare-workers": "^1.2.3",
@@ -99,4 +100,4 @@
   },
   "sideEffects": false,
   "main": "dist/worker.js"
-}
\ No newline at end of file
+}