diff --git a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
index 048f9fb02..399e0378a 100644
--- a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
+++ b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
@@ -8,7 +8,12 @@ describe("SearchBar", () => {
 
   it("renders label and input elements with the correct props", () => {
     const { getByLabelText, getByText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //looking for text set to "Test Label"
     expect(getByText("Test Label")).toBeInTheDocument()
@@ -18,7 +23,12 @@ describe("SearchBar", () => {
 
   it("calls the onChange callback when the input value changes", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //fireEvent.change to simulate the input value change
     //trigger's a change event on the input element
@@ -30,7 +40,12 @@ describe("SearchBar", () => {
 
   it("renders the input placeholder correctly", () => {
     const { getByPlaceholderText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //check placeholder text
     expect(getByPlaceholderText("Type to filter posts...")).toBeInTheDocument()
@@ -38,7 +53,12 @@ describe("SearchBar", () => {
 
   it("sets the aria-label attribute to the correct value", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //checks  that aria-label is set correctly
     expect(getByLabelText("Search")).toHaveAttribute("aria-label", "Search")
@@ -46,7 +66,12 @@ describe("SearchBar", () => {
 
   it("applies the correct CSS classes to the input element", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //checks that tailwind styling is correct
     expect(getByLabelText("Search")).toHaveClass(
@@ -58,7 +83,12 @@ describe("SearchBar", () => {
 
   it("sets the htmlFor attribute on the label element", () => {
     const { getByText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //check rendered component has attribute id = search-label
     expect(getByText("Test Label")).toHaveAttribute("id", "search-label")
@@ -66,7 +96,12 @@ describe("SearchBar", () => {
 
   it("applies the style prop correctly to the input element", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     expect(getByLabelText("Search")).toHaveStyle({ height: "62%" })
   })
diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
index 2c77f391c..9f2ff16fe 100644
--- a/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
@@ -11,5 +11,9 @@ export default meta
 type Story = StoryObj<typeof SearchBar>
 
 export const Primary: Story = {
-  args: { label: "Search here: " },
+  args: {
+    label: "Search here: ",
+    id: "filter",
+    placeholder: "Type to Search...",
+  },
 }