diff --git a/package.json b/package.json
index efa95b1..aca013b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@govconnex/ui",
-  "version": "0.0.176",
+  "version": "0.0.178",
   "description": "GovConnex UI - React Component Library",
   "scripts": {
     "build:tokens": "./tokens-build.sh",
diff --git a/src/components/Dropdown/ComponentSummary.mdx b/src/components/Dropdown/ComponentSummary.mdx
new file mode 100644
index 0000000..86151d9
--- /dev/null
+++ b/src/components/Dropdown/ComponentSummary.mdx
@@ -0,0 +1,4 @@
+The Dropdown component is a customizable selection input that displays a list of options for users to choose from. It supports multiple selections, search functionality, and clear selection, providing an intuitive user experience. Features include contextual labels, placeholder text, and the ability to select or clear multiple options. This component is ideal for form inputs and advanced filter sections, enhancing the ease and efficiency of filtering and selection tasks.
+
+##Figma Link
+No figma link
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
new file mode 100755
index 0000000..b5323b1
--- /dev/null
+++ b/src/components/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,135 @@
+import React from "react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import Dropdown from "./Dropdown";
+import {withDesign} from "storybook-addon-designs";
+import ComponentSummary from "./ComponentSummary.mdx";
+import ReactDOMServer from "react-dom/server";
+import Box from "../Box";
+import SvgIcon from "../SvgIcon";
+import {faCheckCircle} from "@fortawesome/pro-solid-svg-icons";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Components/Dropdown",
+  component: Dropdown,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      description: {
+        component: ReactDOMServer.renderToString(<ComponentSummary />),
+      },
+    },
+  },
+} as ComponentMeta<typeof Dropdown>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Dropdown> = (args) => (
+  <Box cs={{width: "300px"}}>
+    <Dropdown {...args} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Select Option",
+  placeholder: "Choose an option",
+  options: [
+    {id: "1", text: "Option 1", selected: true},
+    {id: "2", text: "Option 2"},
+    {id: "3", text: "Option 3"},
+  ],
+  "data-testid": "dropdown",
+  "data-cy": "dropdown",
+};
+
+export const WithSelectedOption = Template.bind({});
+WithSelectedOption.args = {
+  ...Default.args,
+  defaultValue: "1",
+  maxWidth: "40%",
+};
+
+export const MultipleSelect = Template.bind({});
+MultipleSelect.args = {
+  ...Default.args,
+  multipleSelect: true,
+  selectedIndicator: <SvgIcon icon={faCheckCircle} />,
+};
+
+export const WithChipSelect = Template.bind({});
+WithChipSelect.args = {
+  ...Default.args,
+  multipleSelect: true,
+  selectedIndicator: <SvgIcon icon={faCheckCircle} />,
+  hasSelectedCount: true,
+};
+
+export const AllSelected = Template.bind({});
+AllSelected.args = {
+  label: "All Selected Option",
+  placeholder: "Choose an option",
+  options: [
+    {id: "1", text: "Option 1", selected: true},
+    {id: "2", text: "Option 2", selected: true},
+    {id: "3", text: "Option 3", selected: true},
+  ],
+  "data-testid": "dropdown",
+  "data-cy": "dropdown",
+  multipleSelect: true,
+  selectedIndicator: <SvgIcon icon={faCheckCircle} />,
+  hasSelectedCount: true,
+};
+
+export const WithCategory = Template.bind({});
+WithCategory.args = {
+  label: "Selected Option",
+  placeholder: "Choose an option",
+  options: [
+    {id: "1", text: "Option 1", category: "a"},
+    {id: "2", text: "Option 2", selected: true, category: "a"},
+    {id: "3", text: "Option 3", selected: true, category: "b"},
+  ],
+  "data-testid": "dropdown",
+  "data-cy": "dropdown",
+  multipleSelect: true,
+  selectedIndicator: <SvgIcon icon={faCheckCircle} />,
+  hasSelectedCount: true,
+};
+
+export const WithLoadingState = Template.bind({});
+WithLoadingState.args = {
+  ...Default.args,
+  loading: true,
+  loadingIndicator: <div>Loading...</div>,
+};
+
+export const WithSearch = Template.bind({});
+WithSearch.args = {
+  ...Default.args,
+  hasSearch: true,
+};
+
+export const WithClearSelection = Template.bind({});
+WithClearSelection.args = {
+  ...Default.args,
+  hasClearSelection: true,
+  onClearSelection: () => {
+    console.log("cleared");
+  },
+};
+
+export const WithCustomEndAdornment = Template.bind({});
+WithCustomEndAdornment.args = {
+  ...Default.args,
+  options: [
+    {id: "1", text: "Option 1", endAdornment: <SvgIcon icon={faCheckCircle} />},
+    {id: "2", text: "Option 2", endAdornment: <SvgIcon icon={faCheckCircle} />},
+    {id: "3", text: "Option 3", endAdornment: <SvgIcon icon={faCheckCircle} />},
+  ],
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  ...Default.args,
+  error: "An error occurred",
+};
diff --git a/src/components/Dropdown/Dropdown.styles.ts b/src/components/Dropdown/Dropdown.styles.ts
new file mode 100644
index 0000000..a40c037
--- /dev/null
+++ b/src/components/Dropdown/Dropdown.styles.ts
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+const StyledDropdown = styled.div``;
+
+export default StyledDropdown;
diff --git a/src/components/Dropdown/Dropdown.test.tsx b/src/components/Dropdown/Dropdown.test.tsx
new file mode 100644
index 0000000..babd3de
--- /dev/null
+++ b/src/components/Dropdown/Dropdown.test.tsx
@@ -0,0 +1,110 @@
+import React from "react";
+import {render, fireEvent, waitFor} from "../test-utils";
+import Dropdown from "./Dropdown";
+
+describe("Dropdown Component", () => {
+  const options = [
+    {id: "1", text: "Option 1", selected: false, category: "Category 1"},
+    {id: "2", text: "Option 2", selected: true, category: "Category 1"},
+    {id: "3", text: "Option 3", selected: false, category: "Category 2"},
+  ];
+
+  it("renders the Dropdown component with the label and placeholder", () => {
+    const {getByText, getByPlaceholderText} = render(
+      <Dropdown label="Dropdown Label" placeholder="Select an option" options={options} />
+    );
+    const label = getByText("Dropdown Label");
+    const placeholder = getByPlaceholderText("Select an option");
+
+    expect(label).toBeInTheDocument();
+    expect(placeholder).toBeInTheDocument();
+  });
+
+  it("opens the dropdown when the input is clicked", async () => {
+    const {getByText, getByRole} = render(
+      <Dropdown label="Dropdown" options={options} />
+    );
+    const input = getByRole("textbox");
+
+    fireEvent.click(input);
+
+    await waitFor(() => {
+      expect(getByText("Option 1")).toBeInTheDocument();
+      expect(getByText("Option 2")).toBeInTheDocument();
+    });
+  });
+
+  it("selects an option and triggers onChange callback", async () => {
+    const onChange = jest.fn();
+    const {getByRole, getByText} = render(
+      <Dropdown label="Dropdown" options={options} onChange={onChange} />
+    );
+    const input = getByRole("textbox");
+
+    fireEvent.click(input);
+    const option1 = getByText("Option 1");
+    fireEvent.click(option1);
+
+    expect(onChange).toHaveBeenCalledWith("1", false);
+  });
+
+  it("closes the dropdown on option selection if not multipleSelect", async () => {
+    const {getByRole, getByText, queryByText} = render(
+      <Dropdown label="Dropdown" options={options} />
+    );
+    const input = getByRole("textbox");
+
+    fireEvent.click(input);
+    const option1 = getByText("Option 1");
+    fireEvent.click(option1);
+
+    await waitFor(() => {
+      expect(queryByText("Option 1")).not.toBeInTheDocument();
+    });
+  });
+
+  it("renders search input when hasSearch is true", () => {
+    const {getByRole} = render(<Dropdown label="Dropdown" options={options} hasSearch />);
+    const input = getByRole("textbox");
+    fireEvent.click(input);
+
+    const searchInput = getByRole("searchbox");
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it("renders clear selection button when hasClearSelection is true", async () => {
+    const onClearSelection = jest.fn();
+    const {getByRole, getByText} = render(
+      <Dropdown
+        label="Dropdown"
+        options={options}
+        hasClearSelection
+        onClearSelection={onClearSelection}
+      />
+    );
+    const input = getByRole("textbox");
+    fireEvent.click(input);
+
+    const clearButton = getByText("Clear Selection");
+    fireEvent.click(clearButton);
+
+    expect(onClearSelection).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows loading spinner when loading is true", async () => {
+    const {getByText, getByRole} = render(
+      <Dropdown
+        label="Dropdown"
+        options={options}
+        loading
+        loadingIndicator="inline-loading"
+      />
+    );
+    const input = getByRole("textbox");
+    fireEvent.click(input);
+
+    await waitFor(() => {
+      expect(getByText("inline-loading")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
new file mode 100644
index 0000000..2cc5974
--- /dev/null
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -0,0 +1,307 @@
+import React, {useState, useRef} from "react";
+import Box from "../Box";
+import Typography from "../Typography";
+import Input from "../Input";
+import SvgIcon from "../SvgIcon";
+import Button from "../Button";
+import ClickAwayListener from "../ClickAwayListener";
+import {MenuList, MenuListHeading} from "../MenuList";
+import Popover from "../Popover";
+import {ListItem} from "../List";
+import Chip from "../Chip";
+import {faChevronDown, faSearch} from "@fortawesome/pro-regular-svg-icons";
+
+export interface Option {
+  id: string | number;
+  text: string;
+  selected?: boolean;
+  category?: string;
+  endAdornment?: React.ReactNode;
+}
+
+export interface DropdownProps {
+  label?: string;
+  placeholder?: string;
+  options?: Option[];
+  loading?: boolean;
+  defaultValue?: React.ReactNode;
+  maxWidth?: string;
+  multipleSelect?: boolean;
+  hasSelectedCount?: boolean;
+  hasClearSelection?: boolean;
+  hasSearch?: boolean;
+  onChange?: (selectedValue: any, previouslySelected: boolean) => void;
+  onClearSelection?: () => void;
+  error?: string;
+  "data-testid"?: string;
+  "data-cy"?: string;
+  loadingIndicator?: React.ReactNode;
+  selectedIndicator?: React.ReactNode;
+}
+
+/**
+ *
+ * `Dropdown` Describe what it does
+ *
+ * Component Demo: [Dropdown](https://ui.govconnex.com/?path=/story/components-Dropdown--example)
+ *
+ */
+const Dropdown = ({
+  label,
+  placeholder,
+  options = [],
+  loading,
+  defaultValue,
+  maxWidth,
+  multipleSelect = false,
+  hasSelectedCount = false,
+  hasClearSelection = false,
+  hasSearch = false,
+  onChange = () => {},
+  onClearSelection = () => {},
+  error,
+  "data-testid": dataTestId,
+  "data-cy": dataCy,
+  loadingIndicator,
+  selectedIndicator,
+}: DropdownProps) => {
+  const popRef = useRef<any>(null);
+  const [showPopover, setShowPopover] = useState(false);
+  // eslint-disable-next-line
+  const [value, setValue] = useState(defaultValue);
+  const [searchTerm, setSearchTerm] = useState("");
+  const selectedCount = [
+    ...new Set(
+      options?.filter((item: any) => item?.selected)?.map((item: any) => item?.id)
+    ),
+  ]?.length;
+
+  // all is selected if there is nothing selected(for empty selected) and not selected is 0 (for all selected)
+  const notSelectedCount = [
+    ...new Set(
+      options?.filter((item: any) => !item?.selected)?.map((item: any) => item?.id)
+    ),
+  ]?.length;
+
+  const optionsDisplayed = searchTerm
+    ? (options || []).filter(
+        (item: any) => item?.text?.toLowerCase()?.includes(searchTerm?.toLowerCase())
+      )
+    : options || [];
+
+  return (
+    <ClickAwayListener
+      onClickAway={(e) => {
+        // Check if the clicked element is the anchorEl, if so, prevent the clickaway logic
+        if (popRef?.current && popRef?.current?.contains(e?.target)) {
+          return;
+        }
+
+        // Your regular clickaway logic here
+        setShowPopover(false);
+      }}
+    >
+      <Box>
+        <Input
+          data-testid={dataTestId}
+          data-cy={dataCy}
+          error={error}
+          onClick={() => {
+            setShowPopover(true);
+          }}
+          endAdornment={
+            <Box
+              cs={{
+                display: "inline-flex",
+                gap: "spacing.xs",
+                alignItems: "center",
+                paddingLeft: "spacing.sm",
+                background: "white",
+              }}
+            >
+              {hasSelectedCount ? (
+                !notSelectedCount ? (
+                  // needed to disable because eslint is looking for aria attribute role
+                  // eslint-disable-next-line
+                  <Chip priority="low" role="primary" size="md">
+                    ALL
+                  </Chip>
+                ) : selectedCount ? (
+                  // needed to disable because eslint is looking for aria attribute role
+                  // eslint-disable-next-line
+                  <Chip priority="low" role="primary" size="md">
+                    {selectedCount}
+                  </Chip>
+                ) : null
+              ) : null}
+              <SvgIcon
+                icon={faChevronDown}
+                onClick={() => {
+                  setShowPopover(true);
+                }}
+              />
+            </Box>
+          }
+          fullWidth
+          ref={popRef}
+          label={label}
+          placeholder={placeholder}
+          value={
+            multipleSelect
+              ? selectedCount
+                ? label
+                : ""
+              : options?.find((item: any) => item?.id === defaultValue)?.text || ""
+          }
+          readOnly={true}
+        />
+        {showPopover ? (
+          <Popover
+            isBlock
+            anchorEl={popRef}
+            placement="top-start"
+            modifiers={[
+              {
+                name: "preventOverflow",
+                options: {
+                  mainAxis: false, // true by default
+                },
+              },
+            ]}
+            style={{
+              padding: "0px",
+              zIndex: 9,
+              width: "calc(100% - 40px)",
+              maxWidth: maxWidth ? maxWidth : "unset",
+            }}
+          >
+            <MenuList style={{position: "relative"}}>
+              <div style={{maxHeight: "100%", position: "relative"}}>
+                <span
+                  style={{
+                    padding: `0 3px`,
+                    backgroundColor: "white",
+                    top: 0,
+                    zIndex: 1,
+                    position: "sticky",
+                    display: "block",
+                  }}
+                ></span>
+                {loading ? (
+                  loadingIndicator
+                ) : (
+                  <Box cs={{display: "flex", width: "100%", flexDirection: "column"}}>
+                    {hasSearch ? (
+                      <Box cs={{background: "white"}}>
+                        <Input
+                          name="input"
+                          fullWidth
+                          type="search"
+                          value={searchTerm}
+                          onChange={(e) => setSearchTerm(e?.target?.value)}
+                          startAdornment={
+                            <Typography noMargin color="core.content.contentTertiary">
+                              <SvgIcon icon={faSearch} size="lg" />
+                            </Typography>
+                          }
+                        />
+                      </Box>
+                    ) : null}
+                    <Box
+                      cs={{
+                        maxHeight: "240px",
+                        overflow: "auto",
+                        marginTop: hasSearch ? "spacing.xxs" : "0px",
+                        marginBottom: hasClearSelection ? "spacing.xxs" : "0px",
+                      }}
+                    >
+                      {optionsDisplayed?.filter((item: any) => item?.text)?.length ? (
+                        optionsDisplayed
+                          ?.filter((item: any) => item?.text)
+                          ?.map((x: any, idx: any, array: any) => {
+                            const prev = array[idx - 1] || null;
+                            return (
+                              <>
+                                {prev === null || prev?.category !== x?.category ? (
+                                  <Box
+                                    cs={{marginTop: prev === null ? "0px" : "spacing.xs"}}
+                                  >
+                                    <MenuListHeading>{x?.category}</MenuListHeading>
+                                  </Box>
+                                ) : null}
+                                <ListItem
+                                  style={{padding: "4px 8px"}}
+                                  key={idx}
+                                  data-testid={`dropdown-option-item-${x?.id || idx}`}
+                                  data-cy={`dropdown-option-item-${x?.id || idx}`}
+                                  button
+                                  endAdornment={
+                                    x?.endAdornment ||
+                                    ((multipleSelect && x?.selected) ||
+                                    (!multipleSelect && x?.id === defaultValue)
+                                      ? selectedIndicator
+                                      : null)
+                                  }
+                                  onClick={() => {
+                                    onChange(x?.id, x?.selected);
+
+                                    if (!multipleSelect) {
+                                      setShowPopover(false);
+                                    }
+                                  }}
+                                >
+                                  <Box
+                                    cs={{display: "inline-flex", alignItems: "center"}}
+                                  >
+                                    {x?.text}
+                                  </Box>
+                                </ListItem>
+                              </>
+                            );
+                          })
+                      ) : (
+                        <Box
+                          cs={{
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            padding: "spacing.xxs",
+                          }}
+                        >
+                          <Typography
+                            noMargin
+                            variant="label"
+                            size="md"
+                            color="core.content.contentTertiary"
+                          >
+                            No data to show
+                          </Typography>
+                        </Box>
+                      )}
+                    </Box>
+                    {hasClearSelection ? (
+                      <Box cs={{background: "white"}}>
+                        {
+                          <Button
+                            variant="secondary"
+                            isFullWidth={true}
+                            style={{display: "block", textAlign: "center"}}
+                            onClick={onClearSelection}
+                          >
+                            Clear Selection
+                          </Button>
+                        }
+                      </Box>
+                    ) : null}
+                  </Box>
+                )}
+              </div>
+            </MenuList>
+          </Popover>
+        ) : null}
+      </Box>
+    </ClickAwayListener>
+  );
+};
+
+export default Dropdown;
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
new file mode 100644
index 0000000..18d7e5d
--- /dev/null
+++ b/src/components/Dropdown/index.ts
@@ -0,0 +1 @@
+export {default} from "./Dropdown";
diff --git a/src/components/index.ts b/src/components/index.ts
index 2b8e229..13ed77d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,5 @@
 export {default as ThemeProvider} from "./ThemeProvider";
+export {default as Dropdown} from "./Dropdown";
 export {default as Toggle} from "./Toggle";
 export {default as PopIn} from "./PopIn";
 export {default as Snackbar, PopinSnackbar as PopinSnackbar} from "./Snackbar";
diff --git a/src/puppeteer-tests/__image_snapshots__/storyshots-puppeteer-test-js-component-screenshots-should-match-image-snapshot-for-button-1-snap.png b/src/puppeteer-tests/__image_snapshots__/storyshots-puppeteer-test-js-component-screenshots-should-match-image-snapshot-for-button-1-snap.png
index 57a95de..46c3d8b 100644
Binary files a/src/puppeteer-tests/__image_snapshots__/storyshots-puppeteer-test-js-component-screenshots-should-match-image-snapshot-for-button-1-snap.png and b/src/puppeteer-tests/__image_snapshots__/storyshots-puppeteer-test-js-component-screenshots-should-match-image-snapshot-for-button-1-snap.png differ