diff --git a/clients/admin-ui/src/features/common/SearchBar.tsx b/clients/admin-ui/src/features/common/SearchBar.tsx
index 4e6c4e20c9..752dd8269a 100644
--- a/clients/admin-ui/src/features/common/SearchBar.tsx
+++ b/clients/admin-ui/src/features/common/SearchBar.tsx
@@ -1,10 +1,8 @@
 import {
   AntButton as Button,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  InputProps,
-  InputRightElement,
+  AntInput as Input,
+  AntInputProps as InputProps,
+  AntSpace as Space,
   SearchLineIcon,
 } from "fidesui";
 
@@ -26,32 +24,25 @@ const SearchBar = ({
     onChange(event.target.value);
 
   return (
-    <InputGroup size="sm" minWidth="308px">
-      {withIcon ? (
-        <InputLeftElement pointerEvents="none">
-          <SearchLineIcon color="gray.300" w="17px" h="17px" />
-        </InputLeftElement>
-      ) : null}
+    <Space.Compact className="w-96">
       <Input
         autoComplete="off"
-        type="search"
-        minWidth={200}
-        size="sm"
-        borderRadius="md"
         value={search}
-        name="search"
         onChange={handleSearchChange}
-        placeholder={placeholder || ""}
+        placeholder={placeholder || "Search..."}
+        prefix={withIcon ? <SearchLineIcon boxSize={4} /> : undefined}
+        className="border-neutral-2"
         {...props}
       />
       {onClear ? (
-        <InputRightElement>
-          <Button onClick={onClear} className="right-4 shrink-0 rounded-s-none">
-            Clear
-          </Button>
-        </InputRightElement>
+        <Button
+          onClick={onClear}
+          className="border-neutral-2 bg-[#f5f5f5] hover:!border-neutral-2 hover:!bg-neutral-2"
+        >
+          Clear
+        </Button>
       ) : null}
-    </InputGroup>
+    </Space.Compact>
   );
 };
 
diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/SearchInput.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/SearchInput.tsx
index 4a251fa9e8..b0891c29c5 100644
--- a/clients/admin-ui/src/features/data-discovery-and-detection/SearchInput.tsx
+++ b/clients/admin-ui/src/features/data-discovery-and-detection/SearchInput.tsx
@@ -1,6 +1,7 @@
-import { AntButton as Button, AntInput, AntSpace } from "fidesui";
 import { debounce } from "lodash";
-import { ChangeEventHandler, useCallback, useState } from "react";
+import { useCallback, useState } from "react";
+
+import SearchBar from "~/features/common/SearchBar";
 
 interface SearchInputProps {
   value: string;
@@ -14,10 +15,10 @@ export const SearchInput = ({ value, onChange }: SearchInputProps) => {
   // Add some delay to prevent fetching on each key pressed while typing
   const debouncedOnChange = debounce(onChange, INPUT_CHANGE_DELAY);
 
-  const handleOnChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-    (e) => {
-      setCurrentInput(e.currentTarget.value);
-      debouncedOnChange(e.currentTarget.value);
+  const handleOnChange = useCallback(
+    (newValue: string) => {
+      setCurrentInput(newValue);
+      debouncedOnChange(newValue);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
@@ -29,16 +30,10 @@ export const SearchInput = ({ value, onChange }: SearchInputProps) => {
   };
 
   return (
-    <AntSpace.Compact className="w-96">
-      <AntInput
-        value={currentInput}
-        placeholder="Search..."
-        onChange={handleOnChange}
-        className="w-full"
-      />
-      <Button onClick={onClear} className="bg-[#f5f5f5] hover:!bg-[#d9d9d9]">
-        Clear
-      </Button>
-    </AntSpace.Compact>
+    <SearchBar
+      search={currentInput}
+      onChange={handleOnChange}
+      onClear={onClear}
+    />
   );
 };
diff --git a/clients/admin-ui/tailwind.config.js b/clients/admin-ui/tailwind.config.js
index 902463811b..9e2ec2687b 100644
--- a/clients/admin-ui/tailwind.config.js
+++ b/clients/admin-ui/tailwind.config.js
@@ -2,7 +2,23 @@
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        // TODO: unify with existing Tailwind "gray" color
+        neutral: {
+          1: "#fafafa",
+          2: "#e6e6e8",
+          3: "#d1d2d4",
+          4: "#bcbec1",
+          5: "#a8aaad",
+          6: "#93969a",
+          7: "#7e8185",
+          8: "#696c71",
+          9: "#53575c",
+          10: "#2b2e35",
+        },
+      },
+    },
   },
   plugins: [],
 };
diff --git a/clients/fidesui/src/index.ts b/clients/fidesui/src/index.ts
index b965af2e91..573ca570dc 100644
--- a/clients/fidesui/src/index.ts
+++ b/clients/fidesui/src/index.ts
@@ -8,6 +8,7 @@ export * from "@chakra-ui/utils";
 export type { ThemeConfig as AntThemeConfig } from "antd/es";
 export type { SwitchProps as AntSwitchProps } from "antd/lib";
 export type { ButtonProps as AntButtonProps } from "antd/lib";
+export type { InputProps as AntInputProps } from "antd/lib";
 export { Layout as AntLayout } from "antd/lib";
 export { Space as AntSpace } from "antd/lib";
 export { Col as AntCol, Row as AntRow } from "antd/lib";