diff --git a/.vscode/settings.json b/.vscode/settings.json
index c824ea4edb783..bfd222ce6fe2c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -155,6 +155,7 @@
     "typesafe",
     "unconvert",
     "Untar",
+    "upsert",
     "Userspace",
     "VMID",
     "walkthrough",
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
index 2d0485b8f347b..a2676aa84bf98 100644
--- a/site/src/api/queries/templates.ts
+++ b/site/src/api/queries/templates.ts
@@ -30,11 +30,10 @@ export const templateByName = (
   };
 };
 
-const getTemplatesQueryKey = (organizationId: string, deprecated?: boolean) => [
-  organizationId,
-  "templates",
-  deprecated,
-];
+export const getTemplatesQueryKey = (
+  organizationId: string,
+  deprecated?: boolean,
+) => [organizationId, "templates", deprecated];
 
 export const templates = (organizationId: string, deprecated?: boolean) => {
   return {
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
index cf70038e7ca23..9f96a83dc4819 100644
--- a/site/src/api/queries/users.ts
+++ b/site/src/api/queries/users.ts
@@ -124,7 +124,7 @@ export const authMethods = () => {
   };
 };
 
-const meKey = ["me"];
+export const meKey = ["me"];
 
 export const me = (metadata: MetadataState<User>) => {
   return cachedQuery({
diff --git a/site/src/components/Menu/MenuButton.tsx b/site/src/components/Menu/MenuButton.tsx
new file mode 100644
index 0000000000000..ad9e35d9f41eb
--- /dev/null
+++ b/site/src/components/Menu/MenuButton.tsx
@@ -0,0 +1,9 @@
+import Button, { type ButtonProps } from "@mui/material/Button";
+import { forwardRef } from "react";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+
+export const MenuButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    return <Button endIcon={<DropdownArrow />} ref={ref} {...props} />;
+  },
+);
diff --git a/site/src/components/Menu/MenuCheck.tsx b/site/src/components/Menu/MenuCheck.tsx
new file mode 100644
index 0000000000000..f42e353aab04c
--- /dev/null
+++ b/site/src/components/Menu/MenuCheck.tsx
@@ -0,0 +1,17 @@
+import CheckOutlined from "@mui/icons-material/CheckOutlined";
+import type { FC } from "react";
+import { MenuIcon } from "./MenuIcon";
+
+export const MenuCheck: FC<{ isVisible: boolean }> = ({ isVisible }) => {
+  return (
+    <MenuIcon>
+      <CheckOutlined
+        role="presentation"
+        css={{
+          visibility: isVisible ? "visible" : "hidden",
+          marginLeft: "auto",
+        }}
+      />
+    </MenuIcon>
+  );
+};
diff --git a/site/src/components/Menu/MenuIcon.tsx b/site/src/components/Menu/MenuIcon.tsx
new file mode 100644
index 0000000000000..081e663ea4435
--- /dev/null
+++ b/site/src/components/Menu/MenuIcon.tsx
@@ -0,0 +1,22 @@
+import { css } from "@emotion/css";
+import {
+  type FC,
+  type PropsWithChildren,
+  type ReactElement,
+  cloneElement,
+} from "react";
+
+type MenuIconProps = {
+  size?: number;
+};
+
+export const MenuIcon: FC<PropsWithChildren<MenuIconProps>> = ({
+  children,
+  size = 14,
+}) => {
+  return cloneElement(children as ReactElement, {
+    className: css({
+      fontSize: size,
+    }),
+  });
+};
diff --git a/site/src/components/Menu/MenuNoResults.tsx b/site/src/components/Menu/MenuNoResults.tsx
new file mode 100644
index 0000000000000..c3539baead3d1
--- /dev/null
+++ b/site/src/components/Menu/MenuNoResults.tsx
@@ -0,0 +1,19 @@
+import { useTheme } from "@emotion/react";
+import type { FC } from "react";
+
+export const MenuNoResults: FC = () => {
+  const theme = useTheme();
+
+  return (
+    <div
+      css={{
+        padding: "8px 12px",
+        color: theme.palette.text.secondary,
+        fontSize: 14,
+        textAlign: "center",
+      }}
+    >
+      No results found
+    </div>
+  );
+};
diff --git a/site/src/components/Menu/MenuSearch.tsx b/site/src/components/Menu/MenuSearch.tsx
new file mode 100644
index 0000000000000..4efee528aff55
--- /dev/null
+++ b/site/src/components/Menu/MenuSearch.tsx
@@ -0,0 +1,43 @@
+import { css } from "@emotion/css";
+import { useTheme } from "@emotion/react";
+import type { FC } from "react";
+import {
+  SearchField,
+  type SearchFieldProps,
+} from "components/Search/SearchField";
+
+export const MenuSearch: FC<SearchFieldProps> = (props) => {
+  const theme = useTheme();
+
+  return (
+    <SearchField
+      {...props}
+      onKeyDown={(e) => {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+
+          const firstMenuItem = e.currentTarget
+            .closest<HTMLDivElement>(".MuiPaper-root")
+            ?.querySelector<HTMLElement>("[role=menuitem]");
+
+          if (firstMenuItem) {
+            firstMenuItem.focus();
+          }
+        }
+      }}
+      className={css({
+        position: "sticky",
+        top: 0,
+        backgroundColor: theme.palette.background.paper,
+        zIndex: 1,
+        "& fieldset": {
+          border: 0,
+          borderRadius: 0,
+          borderBottomStyle: "solid",
+          borderBottomWidth: `1px !important`,
+          borderColor: `${theme.palette.divider} !important`,
+        },
+      })}
+    />
+  );
+};
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
index 1ed4e90a73995..bd2b1804d08be 100644
--- a/site/src/components/Popover/Popover.tsx
+++ b/site/src/components/Popover/Popover.tsx
@@ -81,6 +81,19 @@ export const usePopover = () => {
   return context;
 };
 
+export const withPopover =
+  <TProps extends Record<string, unknown>>(
+    Component: FC<TProps>,
+    popoverProps?: Omit<PopoverProps, "children">,
+  ): FC<TProps> =>
+  (props: TProps) => {
+    return (
+      <Popover {...popoverProps}>
+        <Component {...props} />
+      </Popover>
+    );
+  };
+
 export const PopoverTrigger = (
   props: HTMLAttributes<HTMLElement> & { children: TriggerElement },
 ) => {
@@ -152,9 +165,9 @@ export const PopoverContent: FC<PopoverContentProps> = ({
         marginTop: hoverMode ? undefined : 8,
         pointerEvents: hoverMode ? "none" : undefined,
         "& .MuiPaper-root": {
-          minWidth: 320,
           fontSize: 14,
           pointerEvents: hoverMode ? "auto" : undefined,
+          borderRadius: 6,
         },
       }}
       {...horizontalProps(horizontal)}
diff --git a/site/src/components/Search/SearchField.stories.tsx b/site/src/components/Search/SearchField.stories.tsx
new file mode 100644
index 0000000000000..0b660dd8ddab1
--- /dev/null
+++ b/site/src/components/Search/SearchField.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within, expect } from "@storybook/test";
+import { useState } from "react";
+import { SearchField } from "./SearchField";
+
+const searchLabel = "Search for something";
+
+const meta: Meta<typeof SearchField> = {
+  title: "components/SearchField",
+  component: SearchField,
+  args: {
+    id: "search",
+    label: searchLabel,
+  },
+  render: function SearchFieldWithState(args) {
+    const [value, setValue] = useState<string>(args.value);
+    return <SearchField {...args} value={value} onChange={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchField>;
+
+export const Empty: Story = {
+  args: {
+    value: "",
+  },
+};
+
+export const DefaultValue: Story = {
+  args: {
+    value: "owner:CoderUser",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    value: "number_of_users:7",
+    error: `"number_of_users" is not a valid query param`,
+  },
+};
+
+export const Focused: Story = {
+  args: {
+    value: "",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText(searchLabel);
+    await userEvent.click(input);
+    await expect(input).toHaveFocus();
+  },
+};
+
+export const Typing: Story = {
+  args: {
+    value: "",
+  },
+  play: async ({ canvasElement }) => {
+    const text = "owner:SomeSearchString";
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText(searchLabel);
+    await userEvent.type(input, text);
+    await expect(input).toHaveValue(text);
+  },
+};
+
+export const ClearInput: Story = {
+  args: {
+    value: "owner:CoderUser",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText(searchLabel);
+    await userEvent.click(canvas.getByRole("button", { name: "Clear filter" }));
+    await expect(input).toHaveValue("");
+  },
+};
diff --git a/site/src/components/Search/SearchField.tsx b/site/src/components/Search/SearchField.tsx
new file mode 100644
index 0000000000000..c1c2c49773824
--- /dev/null
+++ b/site/src/components/Search/SearchField.tsx
@@ -0,0 +1,83 @@
+import { useTheme } from "@emotion/react";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+import SearchOutlined from "@mui/icons-material/SearchOutlined";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField, { type TextFieldProps } from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import { visuallyHidden } from "@mui/utils";
+import type { FC } from "react";
+
+export type SearchFieldProps = Omit<
+  TextFieldProps,
+  "onChange" | "id" | "label" | "value" | "error"
+> & {
+  id: string;
+  label: string;
+  value: string;
+  autoFocus?: boolean;
+  error?: string;
+  onChange: (value: string) => void;
+};
+
+export const SearchField: FC<SearchFieldProps> = (props) => {
+  const theme = useTheme();
+  const { value, label, id, error, onChange, autoFocus, ...textFieldProps } =
+    props;
+  const isEmpty = value.length === 0;
+
+  return (
+    <>
+      <label htmlFor={id} css={{ ...visuallyHidden }}>
+        {label}
+      </label>
+      <TextField
+        {...textFieldProps}
+        error={Boolean(error)}
+        helperText={error}
+        type="text"
+        InputProps={{
+          ...textFieldProps.InputProps,
+          autoFocus,
+          id,
+          size: "small",
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchOutlined
+                role="presentation"
+                css={{
+                  fontSize: 14,
+                  color: theme.palette.text.secondary,
+                }}
+              />
+            </InputAdornment>
+          ),
+          endAdornment: !isEmpty && (
+            <Tooltip title="Clear filter">
+              <IconButton
+                size="small"
+                onClick={() => {
+                  onChange("");
+                }}
+              >
+                <CloseOutlined
+                  css={{
+                    fontSize: 14,
+                    color: theme.palette.text.secondary,
+                  }}
+                />
+                <span css={{ ...visuallyHidden }}>Clear filter</span>
+              </IconButton>
+            </Tooltip>
+          ),
+        }}
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+        placeholder={textFieldProps.placeholder ?? "Search..."}
+        fullWidth
+      />
+    </>
+  );
+};
diff --git a/site/src/components/TemplateAvatar/TemplateAvatar.tsx b/site/src/components/TemplateAvatar/TemplateAvatar.tsx
new file mode 100644
index 0000000000000..f30b4c6b70298
--- /dev/null
+++ b/site/src/components/TemplateAvatar/TemplateAvatar.tsx
@@ -0,0 +1,17 @@
+import type { FC } from "react";
+import type { Template } from "api/typesGenerated";
+import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
+
+type TemplateAvatarProps = {
+  template: Template;
+  size: AvatarProps["size"];
+};
+
+export const TemplateAvatar: FC<TemplateAvatarProps> = ({ template, size }) => {
+  const hasIcon = template.icon && template.icon !== "";
+
+  if (hasIcon) {
+    return <Avatar size={size} src={template.icon} variant="square" fitImage />;
+  }
+  return <Avatar size={size}>{template.name}</Avatar>;
+};
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
index 7b74d2924da69..c9487a1f6b041 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -14,7 +14,6 @@ import type {
   Template,
   TemplateVersion,
 } from "api/typesGenerated";
-import { Avatar } from "components/Avatar/Avatar";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import { Margins } from "components/Margins/Margins";
@@ -33,6 +32,7 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { TemplateAvatar } from "components/TemplateAvatar/TemplateAvatar";
 import { useDeletionDialogState } from "./useDeletionDialogState";
 
 type TemplateMenuProps = {
@@ -165,8 +165,6 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
   permissions,
   onDeleteTemplate,
 }) => {
-  const hasIcon = template.icon && template.icon !== "";
-
   return (
     <Margins>
       <PageHeader
@@ -195,11 +193,7 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
         }
       >
         <Stack direction="row" spacing={3} alignItems="center">
-          {hasIcon ? (
-            <Avatar size="xl" src={template.icon} variant="square" fitImage />
-          ) : (
-            <Avatar size="xl">{template.name}</Avatar>
-          )}
+          <TemplateAvatar size="xl" template={template} />
 
           <div>
             <Stack direction="row" alignItems="center" spacing={1}>
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/PresetFilterMenu.stories.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/PresetFilterMenu.stories.tsx
new file mode 100644
index 0000000000000..74f7e5aad4678
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspaceSearch/PresetFilterMenu.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import { PresetFiltersMenu } from "./PresetFiltersMenu";
+
+const meta: Meta<typeof PresetFiltersMenu> = {
+  title: "pages/WorkspacesPage/PresetFiltersMenu",
+  component: PresetFiltersMenu,
+};
+
+export default meta;
+type Story = StoryObj<typeof PresetFiltersMenu>;
+
+export const Closed: Story = {};
+
+export const Open: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /filters/i });
+    await userEvent.click(button);
+  },
+};
+
+export const CloseOnClick: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /filters/i });
+    await userEvent.click(button);
+    const option = canvas.getByText("All workspaces");
+    await userEvent.click(option);
+  },
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/PresetFiltersMenu.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/PresetFiltersMenu.tsx
new file mode 100644
index 0000000000000..c5f3771d486e4
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspaceSearch/PresetFiltersMenu.tsx
@@ -0,0 +1,77 @@
+import OpenInNew from "@mui/icons-material/OpenInNew";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import type { FC } from "react";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { MenuIcon } from "components/Menu/MenuIcon";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "components/Popover/Popover";
+import { docs } from "utils/docs";
+
+type PresetOption = Readonly<{
+  label: string;
+  value: string;
+}>;
+
+const options: PresetOption[] = [
+  { label: "My workspaces", value: "owner:me" },
+  { label: "All workspaces", value: "" },
+  { label: "Running workspaces", value: "status:running" },
+  { label: "Failed workspaces", value: "status:failed" },
+  { label: "Outdated workspaces", value: "outdated:true" },
+  { label: "Dormant workspaces", value: "dormant:true" },
+];
+
+type PresetFilterMenuProps = {
+  onSelect: (value: string) => void;
+};
+
+export const PresetFiltersMenu: FC<PresetFilterMenuProps> = ({ onSelect }) => {
+  return (
+    <Popover>
+      {({ setIsOpen }) => {
+        return (
+          <>
+            <PopoverTrigger>
+              <Button endIcon={<DropdownArrow />}>Filters</Button>
+            </PopoverTrigger>
+            <PopoverContent>
+              <MenuList dense>
+                {options.map((option) => (
+                  <MenuItem
+                    key={option.value}
+                    onClick={() => {
+                      setIsOpen(false);
+                      onSelect(option.value);
+                    }}
+                  >
+                    {option.label}
+                  </MenuItem>
+                ))}
+                <Divider />
+                <MenuItem
+                  component="a"
+                  href={docs("/workspaces#workspace-filtering")}
+                  target="_blank"
+                  onClick={() => {
+                    setIsOpen(false);
+                  }}
+                >
+                  Learn advanced filtering
+                  <MenuIcon>
+                    <OpenInNew aria-label="Open in new tab" />
+                  </MenuIcon>
+                </MenuItem>
+              </MenuList>
+            </PopoverContent>
+          </>
+        );
+      }}
+    </Popover>
+  );
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/StatusMenu.stories.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/StatusMenu.stories.tsx
new file mode 100644
index 0000000000000..d78580fa7b929
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspaceSearch/StatusMenu.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import { useState } from "react";
+import { StatusMenu } from "./StatusMenu";
+
+const meta: Meta<typeof StatusMenu> = {
+  title: "pages/WorkspacesPage/StatusMenu",
+  component: StatusMenu,
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusMenu>;
+
+export const Close: Story = {};
+
+export const Open: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select status/i });
+    await userEvent.click(button);
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    selected: "running",
+  },
+};
+
+export const SelectedOpen: Story = {
+  args: {
+    selected: "running",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select status/i });
+    await userEvent.click(button);
+  },
+};
+
+export const SelectOption: Story = {
+  render: function StatusMenuWithState(args) {
+    const [selected, setSelected] = useState<string | undefined>(undefined);
+    return <StatusMenu {...args} selected={selected} onSelect={setSelected} />;
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select status/i });
+    await userEvent.click(button);
+    const option = canvas.getByText("Failed");
+    await userEvent.click(option);
+  },
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/StatusMenu.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/StatusMenu.tsx
new file mode 100644
index 0000000000000..5659de6aa63fc
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspaceSearch/StatusMenu.tsx
@@ -0,0 +1,111 @@
+import { type Theme, useTheme } from "@emotion/react";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import type { FC } from "react";
+import { MenuButton } from "components/Menu/MenuButton";
+import { MenuCheck } from "components/Menu/MenuCheck";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "components/Popover/Popover";
+
+type StatusIndicatorProps = {
+  color: keyof Theme["roles"];
+};
+
+const StatusIndicator: FC<StatusIndicatorProps> = ({ color }) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      role="presentation"
+      css={{
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        backgroundColor: theme.roles[color].fill.outline,
+      }}
+    />
+  );
+};
+
+type StatusOption = Readonly<{
+  label: string;
+  value: string;
+  indicator: JSX.Element;
+}>;
+
+const options: StatusOption[] = [
+  {
+    label: "Running",
+    value: "running",
+    indicator: <StatusIndicator color="success" />,
+  },
+  {
+    label: "Stopped",
+    value: "stopped",
+    indicator: <StatusIndicator color="inactive" />,
+  },
+  {
+    label: "Failed",
+    value: "failed",
+    indicator: <StatusIndicator color="error" />,
+  },
+  {
+    label: "Pending",
+    value: "pending",
+    indicator: <StatusIndicator color="info" />,
+  },
+];
+
+type StatusMenuProps = {
+  selected: string | undefined;
+  onSelect: (value: string) => void;
+};
+
+export const StatusMenu: FC<StatusMenuProps> = (props) => {
+  const { selected, onSelect } = props;
+  const selectedOption = options.find((option) => option.value === selected);
+
+  return (
+    <Popover>
+      {({ setIsOpen }) => {
+        return (
+          <>
+            <PopoverTrigger>
+              <MenuButton
+                aria-label="Select status"
+                startIcon={selectedOption?.indicator}
+              >
+                {selectedOption ? selectedOption.label : "All statuses"}
+              </MenuButton>
+            </PopoverTrigger>
+            <PopoverContent>
+              <MenuList dense>
+                {options.map((option) => {
+                  const isSelected = option.value === selected;
+
+                  return (
+                    <MenuItem
+                      selected={isSelected}
+                      key={option.value}
+                      onClick={() => {
+                        setIsOpen(false);
+                        onSelect(option.value);
+                      }}
+                    >
+                      {option.indicator}
+                      {option.label}
+                      <MenuCheck isVisible={isSelected} />
+                    </MenuItem>
+                  );
+                })}
+              </MenuList>
+            </PopoverContent>
+          </>
+        );
+      }}
+    </Popover>
+  );
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/TemplateMenu.stories.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/TemplateMenu.stories.tsx
new file mode 100644
index 0000000000000..edc6bb37d9706
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspaceSearch/TemplateMenu.stories.tsx
@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import { useState } from "react";
+import { getTemplatesQueryKey } from "api/queries/templates";
+import type { Template } from "api/typesGenerated";
+import { TemplateMenu } from "./TemplateMenu";
+
+const meta: Meta<typeof TemplateMenu> = {
+  title: "pages/WorkspacesPage/TemplateMenu",
+  component: TemplateMenu,
+  args: {
+    organizationId: "123",
+  },
+  parameters: {
+    queries: [
+      {
+        key: getTemplatesQueryKey("123"),
+        data: generateTemplates(50),
+      },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateMenu>;
+
+export const Close: Story = {};
+
+export const Open: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select template/i });
+    await userEvent.click(button);
+  },
+};
+
+export const Default: Story = {
+  args: {
+    selected: "2",
+  },
+};
+
+export const SelectOption: Story = {
+  render: function TemplateMenuWithState(args) {
+    const [selected, setSelected] = useState<string | undefined>(undefined);
+    return (
+      <TemplateMenu {...args} selected={selected} onSelect={setSelected} />
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select template/i });
+    await userEvent.click(button);
+    const option = canvas.getByText("Template 4");
+    await userEvent.click(option);
+  },
+};
+
+export const SearchStickyOnTop: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select template/i });
+    await userEvent.click(button);
+
+    const content = canvasElement.querySelector(".MuiPaper-root");
+    content?.scrollTo(0, content.scrollHeight);
+  },
+};
+
+export const ScrollToSelectedOption: Story = {
+  args: {
+    selected: "30",
+  },
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select template/i });
+    await userEvent.click(button);
+  },
+};
+
+export const Filter: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select template/i });
+    await userEvent.click(button);
+    const filter = canvas.getByLabelText("Search template");
+    await userEvent.type(filter, "template23");
+  },
+};
+
+export const EmptyResults: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select template/i });
+    await userEvent.click(button);
+    const filter = canvas.getByLabelText("Search template");
+    await userEvent.type(filter, "invalid-template");
+  },
+};
+
+export const FocusOnFirstResultWhenPressArrowDown: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select template/i });
+    await userEvent.click(button);
+    const filter = canvas.getByLabelText("Search template");
+    await userEvent.type(filter, "template1");
+    await userEvent.type(filter, "{arrowdown}");
+  },
+};
+
+function generateTemplates(amount: number): Partial<Template>[] {
+  return Array.from({ length: amount }, (_, i) => ({
+    id: i.toString(),
+    name: `template${i}`,
+    display_name: `Template ${i}`,
+    icon: "",
+  }));
+}
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/TemplateMenu.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/TemplateMenu.tsx
new file mode 100644
index 0000000000000..5f42b277dc531
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspaceSearch/TemplateMenu.tsx
@@ -0,0 +1,102 @@
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import { useState } from "react";
+import { useQuery } from "react-query";
+import { templates } from "api/queries/templates";
+import { Loader } from "components/Loader/Loader";
+import { MenuButton } from "components/Menu/MenuButton";
+import { MenuCheck } from "components/Menu/MenuCheck";
+import { MenuNoResults } from "components/Menu/MenuNoResults";
+import { MenuSearch } from "components/Menu/MenuSearch";
+import {
+  PopoverContent,
+  PopoverTrigger,
+  usePopover,
+  withPopover,
+} from "components/Popover/Popover";
+import { TemplateAvatar } from "components/TemplateAvatar/TemplateAvatar";
+
+type TemplateMenuProps = {
+  organizationId: string;
+  selected: string | undefined;
+  onSelect: (value: string) => void;
+};
+
+export const TemplateMenu = withPopover<TemplateMenuProps>((props) => {
+  const popover = usePopover();
+  const { organizationId, selected, onSelect } = props;
+  const [filter, setFilter] = useState("");
+  const [isHovered, setIsHovered] = useState(false);
+  const { data: options } = useQuery({
+    ...templates(organizationId),
+    enabled: selected !== undefined || popover.isOpen || isHovered,
+    select: (data) =>
+      data
+        .filter((t) => {
+          const f = filter.toLowerCase();
+          return (
+            t.name?.toLowerCase().includes(f) ||
+            t.display_name.toLowerCase().includes(f)
+          );
+        })
+        .map((t) => ({
+          label: t.display_name ?? t.name,
+          value: t.id,
+          avatar: <TemplateAvatar size="xs" template={t} />,
+        })),
+  });
+  const selectedOption = options?.find((option) => option.value === selected);
+
+  return (
+    <>
+      <PopoverTrigger>
+        <MenuButton
+          aria-label="Select template"
+          startIcon={<span>{selectedOption?.avatar}</span>}
+          onMouseEnter={() => setIsHovered(true)}
+        >
+          {selectedOption ? selectedOption.label : "All templates"}
+        </MenuButton>
+      </PopoverTrigger>
+      <PopoverContent>
+        <MenuSearch
+          id="template-search"
+          label="Search template"
+          placeholder="Search template..."
+          value={filter}
+          onChange={setFilter}
+          autoFocus
+        />
+        {options ? (
+          options.length > 0 ? (
+            <MenuList dense>
+              {options.map((option) => {
+                const isSelected = option.value === selected;
+
+                return (
+                  <MenuItem
+                    autoFocus={isSelected}
+                    selected={isSelected}
+                    key={option.value}
+                    onClick={() => {
+                      popover.setIsOpen(false);
+                      onSelect(option.value);
+                    }}
+                  >
+                    {option.avatar}
+                    {option.label}
+                    <MenuCheck isVisible={isSelected} />
+                  </MenuItem>
+                );
+              })}
+            </MenuList>
+          ) : (
+            <MenuNoResults />
+          )
+        ) : (
+          <Loader />
+        )}
+      </PopoverContent>
+    </>
+  );
+});
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.stories.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.stories.tsx
new file mode 100644
index 0000000000000..ea10135e9e346
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.stories.tsx
@@ -0,0 +1,181 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import { useState } from "react";
+import type { User } from "api/typesGenerated";
+import { UserMenu } from "./UserMenu";
+
+const defaultQueries = [
+  {
+    key: ["users", { limit: 100, q: "" }],
+    data: {
+      users: generateUsers(50),
+    },
+  },
+];
+
+const meta: Meta<typeof UserMenu> = {
+  title: "pages/WorkspacesPage/UserMenu",
+  component: UserMenu,
+  parameters: {
+    queries: defaultQueries,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UserMenu>;
+
+export const Close: Story = {};
+
+export const Open: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select user/i });
+    await userEvent.click(button);
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    selected: user(2).email,
+  },
+  parameters: {
+    queries: [
+      {
+        key: ["users", { limit: 1, q: user(2).email }],
+        data: user(2),
+      },
+    ],
+  },
+};
+
+export const SelectOption: Story = {
+  render: function UserMenuWithState(args) {
+    const [selected, setSelected] = useState<string | undefined>(undefined);
+    return <UserMenu {...args} selected={selected} onSelect={setSelected} />;
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select user/i });
+    await userEvent.click(button);
+    const option = canvas.getByText("User 4");
+    await userEvent.click(option);
+  },
+  parameters: {
+    queries: [
+      ...defaultQueries,
+      {
+        key: ["users", { limit: 1, q: user(4).email }],
+        data: user(4),
+      },
+    ],
+  },
+};
+
+export const SearchStickyOnTop: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select user/i });
+    await userEvent.click(button);
+
+    const content = canvasElement.querySelector(".MuiPaper-root");
+    content?.scrollTo(0, content.scrollHeight);
+  },
+};
+
+export const ScrollToSelectedOption: Story = {
+  args: {
+    selected: user(30).email,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select user/i });
+    await userEvent.click(button);
+  },
+  parameters: {
+    queries: [
+      ...defaultQueries,
+      {
+        key: ["users", { limit: 1, q: user(30).email }],
+        data: user(30),
+      },
+    ],
+  },
+};
+
+export const Filter: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select user/i });
+    await userEvent.click(button);
+    const filter = canvas.getByLabelText("Search user");
+    await userEvent.type(filter, user(23).email!);
+  },
+  parameters: {
+    queries: [
+      ...defaultQueries,
+      {
+        key: ["users", { limit: 100, q: user(23).email }],
+        data: {
+          users: [user(23)],
+        },
+      },
+    ],
+  },
+};
+
+export const EmptyResults: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select user/i });
+    await userEvent.click(button);
+    const filter = canvas.getByLabelText("Search user");
+    await userEvent.type(filter, "invalid-user@coder.com");
+  },
+  parameters: {
+    queries: [
+      ...defaultQueries,
+      {
+        key: ["users", { limit: 100, q: "invalid-user@coder.com" }],
+        data: {
+          users: [],
+        },
+      },
+    ],
+  },
+};
+
+export const FocusOnFirstResultWhenPressArrowDown: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select user/i });
+    await userEvent.click(button);
+    const filter = canvas.getByLabelText("Search user");
+    await userEvent.type(filter, user(1).email!);
+    await userEvent.type(filter, "{arrowdown}");
+  },
+  parameters: {
+    queries: [
+      ...defaultQueries,
+      {
+        key: ["users", { limit: 100, q: user(1).email }],
+        data: {
+          users: [user(1)],
+        },
+      },
+    ],
+  },
+};
+
+function generateUsers(amount: number): Partial<User>[] {
+  return Array.from({ length: amount }, (_, i) => user(i));
+}
+
+function user(i: number): Partial<User> {
+  return {
+    id: i.toString(),
+    name: `User ${i}`,
+    username: `user${i}`,
+    avatar_url: "",
+    email: `user${i}@coder.com`,
+  };
+}
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.tsx
new file mode 100644
index 0000000000000..8b38a9a775e12
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.tsx
@@ -0,0 +1,171 @@
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import { useState } from "react";
+import { type QueryClient, useQuery, useQueryClient } from "react-query";
+import { API } from "api/api";
+import { meKey, usersKey, users as usersQuery } from "api/queries/users";
+import type { User } from "api/typesGenerated";
+import { Loader } from "components/Loader/Loader";
+import { MenuButton } from "components/Menu/MenuButton";
+import { MenuCheck } from "components/Menu/MenuCheck";
+import { MenuNoResults } from "components/Menu/MenuNoResults";
+import { MenuSearch } from "components/Menu/MenuSearch";
+import {
+  PopoverContent,
+  PopoverTrigger,
+  usePopover,
+  withPopover,
+} from "components/Popover/Popover";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
+import { useDebouncedValue } from "hooks/debounce";
+
+type UserOption = {
+  label: string;
+  value: string;
+  avatar: JSX.Element;
+};
+
+type UserMenuProps = {
+  // The currently selected user email or undefined if no user is selected
+  selected: UserOption["value"] | undefined;
+  onSelect: (value: UserOption["value"]) => void;
+};
+
+export const UserMenu = withPopover<UserMenuProps>((props) => {
+  const queryClient = useQueryClient();
+  const popover = usePopover();
+  const { selected, onSelect } = props;
+  const [filter, setFilter] = useState("");
+  const [isHovered, setIsHovered] = useState(false);
+  const debouncedFilter = useDebouncedValue(filter, 300);
+  const usersQueryResult = useQuery({
+    ...usersQuery({ limit: 100, q: debouncedFilter }),
+    enabled: popover.isOpen || isHovered,
+  });
+  const { data: selectedUser } = useQuery({
+    queryKey: selectedUserKey(selected ?? ""),
+    queryFn: () => getSelectedUser(selected ?? "", queryClient),
+    enabled: selected !== undefined,
+  });
+  const options = mountOptions(usersQueryResult.data?.users, selectedUser);
+  const selectedOption = selectedUser
+    ? optionFromUser(selectedUser)
+    : undefined;
+
+  return (
+    <>
+      <PopoverTrigger>
+        <MenuButton
+          aria-label="Select user"
+          startIcon={<span>{selectedOption?.avatar}</span>}
+          onMouseEnter={() => setIsHovered(true)}
+        >
+          {selectedOption ? selectedOption.label : "All users"}
+        </MenuButton>
+      </PopoverTrigger>
+      <PopoverContent>
+        <MenuSearch
+          id="user-search"
+          label="Search user"
+          placeholder="Search user..."
+          value={filter}
+          onChange={setFilter}
+          autoFocus
+        />
+        {options ? (
+          options.length > 0 ? (
+            <MenuList dense>
+              {options.map((option) => {
+                const isSelected = option.value === selected;
+
+                return (
+                  <MenuItem
+                    autoFocus={isSelected}
+                    selected={isSelected}
+                    key={option.value}
+                    onClick={() => {
+                      const user = usersQueryResult.data?.users.find(
+                        (u) => u.email === option.value,
+                      );
+
+                      if (!user) {
+                        return;
+                      }
+
+                      // This avoid the need to refetch the selected user query
+                      // when the user is selected
+                      queryClient.setQueryData(
+                        selectedUserKey(user.email),
+                        user,
+                      );
+                      popover.setIsOpen(false);
+                      onSelect(option.value);
+                    }}
+                  >
+                    {option.avatar}
+                    {option.label}
+                    <MenuCheck isVisible={isSelected} />
+                  </MenuItem>
+                );
+              })}
+            </MenuList>
+          ) : (
+            <MenuNoResults />
+          )
+        ) : (
+          <Loader size={20} />
+        )}
+      </PopoverContent>
+    </>
+  );
+});
+
+function selectedUserKey(email: string) {
+  return usersKey({ limit: 1, q: email });
+}
+
+async function getSelectedUser(
+  email: string,
+  queryClient: QueryClient,
+): Promise<User | undefined> {
+  const loggedInUser = queryClient.getQueryData<User>(meKey);
+
+  if (loggedInUser && loggedInUser.email === email) {
+    return loggedInUser;
+  }
+
+  const usersRes = await API.getUsers({ q: email, limit: 1 });
+  return usersRes.users.at(0);
+}
+
+function optionFromUser(user: User): UserOption {
+  return {
+    label: user.name ?? user.username,
+    value: user.email,
+    avatar: (
+      <UserAvatar size="xs" username={user.username} src={user.avatar_url} />
+    ),
+  };
+}
+
+function mountOptions(
+  users: readonly User[] | undefined,
+  selectedUser: User | undefined,
+): Readonly<UserOption>[] | undefined {
+  if (!users) {
+    return undefined;
+  }
+
+  let usersToDisplay = users;
+
+  if (selectedUser) {
+    const usersIncludeSelectedUser = users.some(
+      (u) => u.id === selectedUser.id,
+    );
+    if (!usersIncludeSelectedUser) {
+      usersToDisplay = [selectedUser, ...usersToDisplay];
+    }
+  }
+
+  return usersToDisplay.map(optionFromUser);
+}
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/WorkspaceSearch.stories.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/WorkspaceSearch.stories.tsx
new file mode 100644
index 0000000000000..142d14b762816
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspaceSearch/WorkspaceSearch.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within, expect } from "@storybook/test";
+import { useState } from "react";
+import { WorkspaceSearch } from "./WorkspaceSearch";
+
+const meta: Meta<typeof WorkspaceSearch> = {
+  title: "pages/WorkspacesPage/WorkspaceSearch",
+  component: WorkspaceSearch,
+  args: {
+    query: "",
+  },
+  render: function WorkspaceSearchWithState(args) {
+    const [query, setQuery] = useState<string>(args.query);
+    return <WorkspaceSearch {...args} query={query} setQuery={setQuery} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WorkspaceSearch>;
+
+export const SelectPresetFilter: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /filters/i });
+    await userEvent.click(button);
+    const option = canvas.getByText("Failed workspaces");
+    await userEvent.click(option);
+    const input = canvas.getByLabelText("Search workspace");
+    await expect(input).toHaveValue("failed:true");
+  },
+};
+
+export const SelectStatus: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select status/i });
+    await userEvent.click(button);
+    const option = canvas.getByText("Running");
+    await userEvent.click(option);
+    const input = canvas.getByLabelText("Search workspace");
+    await expect(input).toHaveValue("status:failed");
+  },
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/WorkspaceSearch.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/WorkspaceSearch.tsx
new file mode 100644
index 0000000000000..6189debbaa1e3
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspaceSearch/WorkspaceSearch.tsx
@@ -0,0 +1,68 @@
+import type { FC } from "react";
+import { SearchField } from "components/Search/SearchField";
+import { Stack } from "components/Stack/Stack";
+import { PresetFiltersMenu } from "./PresetFiltersMenu";
+import { StatusMenu } from "./StatusMenu";
+
+type WorkspaceSearchProps = {
+  query: string;
+  setQuery: (query: string) => void;
+};
+
+export const WorkspaceSearch: FC<WorkspaceSearchProps> = ({
+  query,
+  setQuery,
+}) => {
+  const status = findTagValue(query, "status");
+
+  return (
+    <Stack
+      alignItems="center"
+      direction="row"
+      spacing={1}
+      css={{
+        "& > *": {
+          flexShrink: 0,
+        },
+      }}
+    >
+      <PresetFiltersMenu onSelect={setQuery} />
+
+      <SearchField
+        id="search"
+        label="Search workspace"
+        value={query}
+        onChange={setQuery}
+      />
+
+      <StatusMenu
+        selected={status}
+        onSelect={(status) => {
+          setQuery(upsertTagValue(query, "status", status));
+        }}
+      />
+    </Stack>
+  );
+};
+
+function findTagValue(query: string, tag: string): string | undefined {
+  const blocks = query.split(" ");
+  const block = blocks.find((block) => block.startsWith(`${tag}:`));
+
+  if (!block) {
+    return;
+  }
+
+  return block.split(":")[1];
+}
+
+function upsertTagValue(query: string, tag: string, value: string): string {
+  const blocks = query.split(" ");
+  const block = blocks.find((block) => block.startsWith(`${tag}:`));
+
+  if (block) {
+    return query.replace(block, `${tag}:${value}`);
+  }
+
+  return `${query} ${tag}:${value}`;
+}
diff --git a/site/src/pages/WorkspacesPage/filter/menus.ts b/site/src/pages/WorkspacesPage/filter/menus.ts
index f8b6755f50e82..208af5b31606f 100644
--- a/site/src/pages/WorkspacesPage/filter/menus.ts
+++ b/site/src/pages/WorkspacesPage/filter/menus.ts
@@ -20,7 +20,10 @@ export const useTemplateFilterMenu = ({
     value,
     id: "template",
     getSelectedOption: async () => {
-      // Show all templates including deprecated
+      if (!value) {
+        return null;
+      }
+
       const templates = await API.getTemplates(organizationId);
       const template = templates.find((template) => template.name === value);
       if (template) {
@@ -33,6 +36,7 @@ export const useTemplateFilterMenu = ({
           icon: template.icon,
         };
       }
+
       return null;
     },
     getOptions: async (query) => {
diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts
index 555aa23e641bc..f36bb438b1209 100644
--- a/site/src/theme/mui.ts
+++ b/site/src/theme/mui.ts
@@ -305,10 +305,6 @@ export const components = {
     styleOverrides: {
       root: {
         gap: 12,
-
-        "& .MuiSvgIcon-root": {
-          fontSize: 20,
-        },
       },
     },
   },
@@ -429,11 +425,6 @@ export const components = {
       },
     },
   },
-  MuiList: {
-    defaultProps: {
-      disablePadding: true,
-    },
-  },
   MuiTabs: {
     defaultProps: {
       textColor: "primary",