diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx
index 485ad8b83c..4c4294534e 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx
@@ -11,14 +11,13 @@ import { debounce } from "lodash";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useMemo, useState } from "react";
 import { Components, Virtuoso } from "react-virtuoso";
+import { SEARCH_DEBOUNCE_MS } from "ui/shared/constants";
 
 import { ExternalPortalList } from "./ExternalPortalList/ExternalPortalList";
 import { ALL_FACETS, SearchFacets } from "./facets";
 import { SearchHeader } from "./SearchHeader";
 import { SearchResultCard } from "./SearchResultCard";
 
-const DEBOUNCE_MS = 500;
-
 interface SearchNodes {
   pattern: string;
   facets: SearchFacets;
@@ -87,8 +86,8 @@ const Search: React.FC = () => {
         search(pattern);
         setLastPattern(pattern);
         setIsSearching(false);
-      }, DEBOUNCE_MS),
-    [search]
+      }, SEARCH_DEBOUNCE_MS),
+    [search],
   );
 
   return (
diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx
index 92efd3380d..070cc4c289 100644
--- a/editor.planx.uk/src/pages/Team.tsx
+++ b/editor.planx.uk/src/pages/Team.tsx
@@ -9,6 +9,7 @@ import MenuItem from "@mui/material/MenuItem";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { hasFeatureFlag } from "lib/featureFlags";
+import { isEmpty } from "lodash";
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useNavigation } from "react-navi";
 import { borderedFocusStyle, FONT_WEIGHT_SEMI_BOLD } from "theme";
@@ -16,6 +17,7 @@ import { AddButton } from "ui/editor/AddButton";
 import SelectInput from "ui/editor/SelectInput/SelectInput";
 import { SortableFields, SortControl } from "ui/editor/SortControl";
 import InputLabel from "ui/public/InputLabel";
+import { SearchBox } from "ui/shared/SearchBox/SearchBox";
 import { slugify } from "utils";
 
 import FlowCard, { Card, CardContent } from "./FlowCard";
@@ -37,7 +39,7 @@ const DashboardList = styled("ul")(({ theme }) => ({
   },
 }));
 
-const GetStarted: React.FC<{ flows: FlowSummary[] }> = ({ flows }) => (
+const GetStarted: React.FC<{ flows: FlowSummary[] | null }> = ({ flows }) => (
   <DashboardList sx={{ paddingTop: 0 }}>
     <Card>
       <CardContent>
@@ -153,6 +155,9 @@ const Team: React.FC = () => {
     (state) => [state.getTeam(), state.canUserEditTeam, state.getFlows],
   );
   const [flows, setFlows] = useState<FlowSummary[] | null>(null);
+  const [filteredFlows, setFilteredFlows] = useState<FlowSummary[] | null>(
+    null,
+  );
 
   const sortOptions: SortableFields<FlowSummary>[] = [
     {
@@ -180,6 +185,7 @@ const Team: React.FC = () => {
         ),
       );
       setFlows(sortedFlows);
+      setFilteredFlows(sortedFlows);
     });
   }, [teamId, setFlows, getFlows]);
 
@@ -187,7 +193,7 @@ const Team: React.FC = () => {
     fetchFlows();
   }, [fetchFlows]);
 
-  const teamHasFlows = flows && Boolean(flows.length);
+  const teamHasFlows = !isEmpty(filteredFlows) && !isEmpty(flows);
   const showAddFlowButton = teamHasFlows && canUserEditTeam(slug);
 
   return (
@@ -216,25 +222,13 @@ const Team: React.FC = () => {
             </Typography>
             {showAddFlowButton && <AddFlowButton flows={flows} />}
           </Box>
-          <Box maxWidth={360}>
-            <InputRow>
-              <InputRowLabel>
-                <strong>Search</strong>
-              </InputRowLabel>
-              <InputRowItem>
-                <Box sx={{ position: "relative" }}>
-                  <Input
-                    sx={{
-                      borderColor: (theme) => theme.palette.border.input,
-                      pr: 5,
-                    }}
-                    name="search"
-                    id="search"
-                  />
-                </Box>
-              </InputRowItem>
-            </InputRow>
-          </Box>
+          {hasFeatureFlag("SORT_FLOWS") && flows && (
+            <SearchBox<FlowSummary>
+              records={flows}
+              setRecords={setFilteredFlows}
+              searchKey={["name", "slug"]}
+            />
+          )}
         </Box>
         <Box
           sx={{
diff --git a/editor.planx.uk/src/ui/editor/SimpleMenu.tsx b/editor.planx.uk/src/ui/editor/SimpleMenu.tsx
index 6459cc18af..cb28c2519b 100644
--- a/editor.planx.uk/src/ui/editor/SimpleMenu.tsx
+++ b/editor.planx.uk/src/ui/editor/SimpleMenu.tsx
@@ -6,7 +6,6 @@ import React, { PropsWithChildren, useState } from "react";
 
 interface Props {
   className?: string;
-  children?: React.ReactNode;
   items: Array<{
     label: string;
     disabled?: boolean;
diff --git a/editor.planx.uk/src/ui/shared/SearchBox/SearchBox.tsx b/editor.planx.uk/src/ui/shared/SearchBox/SearchBox.tsx
new file mode 100644
index 0000000000..6dad0d6251
--- /dev/null
+++ b/editor.planx.uk/src/ui/shared/SearchBox/SearchBox.tsx
@@ -0,0 +1,131 @@
+import ClearIcon from "@mui/icons-material/Clear";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import { useFormik } from "formik";
+import { FuseOptionKey } from "fuse.js";
+import { useSearch } from "hooks/useSearch";
+import { debounce } from "lodash";
+import React, { useEffect, useMemo, useState } from "react";
+
+import { SEARCH_DEBOUNCE_MS } from "../constants";
+import Input from "../Input/Input";
+import InputRow from "../InputRow";
+import InputRowItem from "../InputRowItem";
+import InputRowLabel from "../InputRowLabel";
+
+interface SearchBoxProps<T> {
+  records: T[] | null;
+  setRecords: React.Dispatch<React.SetStateAction<T[] | null>>;
+  searchKey: FuseOptionKey<T>[];
+}
+
+export const SearchBox = <T extends object>({
+  records,
+  setRecords,
+  searchKey,
+}: SearchBoxProps<T>) => {
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchedTerm, setSearchedTerm] = useState<string>();
+
+  const searchKeys = useMemo(() => searchKey, []);
+
+  const formik = useFormik({
+    initialValues: { pattern: "" },
+    onSubmit: ({ pattern }) => {
+      setIsSearching(true);
+      debouncedSearch(pattern);
+    },
+  });
+
+  const { results, search } = useSearch({
+    list: records || [],
+    keys: searchKeys,
+  });
+
+  const debouncedSearch = useMemo(
+    () =>
+      debounce((pattern: string) => {
+        search(pattern);
+        setSearchedTerm(pattern);
+        setIsSearching(false);
+      }, SEARCH_DEBOUNCE_MS),
+    [search],
+  );
+
+  useEffect(() => {
+    if (results && searchedTerm) {
+      const mappedResults = results.map((result) => result.item);
+      setRecords(mappedResults);
+    }
+    if (results && !searchedTerm) {
+      records && setRecords(records);
+    }
+  }, [results, setRecords, searchedTerm, records]);
+
+  return (
+    <Box maxWidth={360}>
+      <InputRow>
+        <InputRowLabel>
+          <strong>Search</strong>
+        </InputRowLabel>
+        <InputRowItem>
+          <Box sx={{ position: "relative" }}>
+            <Input
+              sx={{
+                pr: 5,
+              }}
+              name="search"
+              id="search"
+              value={formik.values.pattern}
+              onChange={(e) => {
+                formik.setFieldValue("pattern", e.target.value);
+                formik.submitForm();
+              }}
+            />
+            {searchedTerm && !isSearching && (
+              <IconButton
+                aria-label="clear search"
+                onClick={() => {
+                  formik.setFieldValue("pattern", "");
+                  formik.submitForm();
+                }}
+                size="small"
+                sx={{
+                  position: "absolute",
+                  right: (theme) => theme.spacing(1),
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  padding: 0.5,
+                  zIndex: 1,
+                }}
+              >
+                <ClearIcon fontSize="small" />
+              </IconButton>
+            )}
+            {isSearching && (
+              <IconButton
+                aria-label="clear search"
+                onClick={() => {
+                  formik.setFieldValue("pattern", "");
+                  formik.submitForm();
+                }}
+                size="small"
+                sx={{
+                  position: "absolute",
+                  right: (theme) => theme.spacing(1),
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  padding: 0.5,
+                  zIndex: 1,
+                }}
+              >
+                <CircularProgress size={"1.5rem"} />
+              </IconButton>
+            )}
+          </Box>
+        </InputRowItem>
+      </InputRow>
+    </Box>
+  );
+};
diff --git a/editor.planx.uk/src/ui/shared/constants.ts b/editor.planx.uk/src/ui/shared/constants.ts
new file mode 100644
index 0000000000..c87171b084
--- /dev/null
+++ b/editor.planx.uk/src/ui/shared/constants.ts
@@ -0,0 +1 @@
+export const SEARCH_DEBOUNCE_MS = 500;