diff --git a/frontend/app/element/searchinput.less b/frontend/app/element/searchinput.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/element/searchinput.stories.tsx b/frontend/app/element/searchinput.stories.tsx
new file mode 100644
index 000000000..359b0d8e3
--- /dev/null
+++ b/frontend/app/element/searchinput.stories.tsx
@@ -0,0 +1,32 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { SearchInput } from "./searchinput";
+
+const meta: Meta<typeof SearchInput> = {
+    title: "Elements/SearchInput",
+    component: SearchInput,
+    argTypes: {
+        className: {
+            description: "Custom class for styling the input group",
+            control: { type: "text" },
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+
+export const DefaultSearchInput: Story = {
+    render: (args) => {
+        const handleSearch = () => {
+            console.log("Search triggered");
+        };
+
+        return <SearchInput />;
+    },
+    args: {
+        className: "custom-search-input",
+    },
+};
diff --git a/frontend/app/element/searchinput.tsx b/frontend/app/element/searchinput.tsx
new file mode 100644
index 000000000..b977a5197
--- /dev/null
+++ b/frontend/app/element/searchinput.tsx
@@ -0,0 +1,20 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button } from "./button";
+import { Input, InputGroup, InputRightElement } from "./input";
+
+const SearchInput = () => {
+    return (
+        <InputGroup className="search-input-group">
+            <Input placeholder="Search..." />
+            <InputRightElement>
+                <Button className="search-button ghost grey">
+                    <i className="fa-sharp fa-solid fa-magnifying-glass"></i>
+                </Button>
+            </InputRightElement>
+        </InputGroup>
+    );
+};
+
+export { SearchInput };