diff --git a/package-lock.json b/package-lock.json
index 0498d3e2..0ddfd55e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,6 +63,7 @@
         "typeface-francois-one": "0.0.71",
         "typeface-public-sans": "^1.1.4",
         "url": "^0.11.0",
+        "usehooks-ts": "^3.1.0",
         "uuid": "^3.4.0",
         "zlib": "npm:browserify-zlib@^0.2.0"
       },
@@ -30759,6 +30760,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
+      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18"
+      }
+    },
     "node_modules/utf-8-validate": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
@@ -56138,6 +56154,14 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "usehooks-ts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
+      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
+      "requires": {
+        "lodash.debounce": "^4.0.8"
+      }
+    },
     "utf-8-validate": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
diff --git a/package.json b/package.json
index b0cc5ce7..bf9a3448 100644
--- a/package.json
+++ b/package.json
@@ -147,6 +147,7 @@
     "typeface-francois-one": "0.0.71",
     "typeface-public-sans": "^1.1.4",
     "url": "^0.11.0",
+    "usehooks-ts": "^3.1.0",
     "uuid": "^3.4.0",
     "zlib": "npm:browserify-zlib@^0.2.0"
   },
diff --git a/src/components/Cellar/CellarInventoryTabPanel.js b/src/components/Cellar/CellarInventoryTabPanel.js
index 999bb050..b14c86f3 100644
--- a/src/components/Cellar/CellarInventoryTabPanel.js
+++ b/src/components/Cellar/CellarInventoryTabPanel.js
@@ -1,11 +1,12 @@
 /** @typedef {import("../../index").farmhand.keg} keg */
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import { number } from 'prop-types'
 import Divider from '@mui/material/Divider/index.js'
 import Card from '@mui/material/Card/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
 import ReactMarkdown from 'react-markdown'
 
+import SearchBar from '../SearchBar/index.js'
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import {
   KEG_INTEREST_RATE,
@@ -15,6 +16,8 @@ import {
 } from '../../constants.js'
 
 import { integerString } from '../../utils/index.js'
+import { itemsMap } from '../../data/maps.js'
+import { FERMENTED_CROP_NAME } from '../../templates.js'
 
 import { TabPanel } from './TabPanel/index.js'
 import { Keg } from './Keg.js'
@@ -25,6 +28,8 @@ import { Keg } from './Keg.js'
  * @param {number} props.currentTab
  */
 export const CellarInventoryTabPanel = ({ index, currentTab }) => {
+  const [searchQuery, setSearchQuery] = useState('')
+
   /**
    * @type {{
    *   gameState: {
@@ -37,14 +42,32 @@ export const CellarInventoryTabPanel = ({ index, currentTab }) => {
     gameState: { cellarInventory, purchasedCellar },
   } = useContext(FarmhandContext)
 
+  const searchTerms = searchQuery
+    .toLowerCase()
+    .split(' ')
+    .filter(term => term.length > 0)
+
+  const filteredKegs = cellarInventory.filter(keg => {
+    const item = itemsMap[keg.itemId]
+    const itemName = item.name.toLowerCase()
+    const fermentationRecipeName = `${FERMENTED_CROP_NAME}${itemName}`
+
+    return searchTerms.every(
+      term => fermentationRecipeName.includes(term) || itemName.includes(term)
+    )
+  })
+
   return (
     <TabPanel value={currentTab} index={index}>
       <h3>
         Capacity: {integerString(cellarInventory.length)} /{' '}
         {integerString(PURCHASEABLE_CELLARS.get(purchasedCellar).space)}
       </h3>
+      {cellarInventory.length > 0 && (
+        <SearchBar placeholder="Search kegs..." onSearch={setSearchQuery} />
+      )}
       <ul className="card-list">
-        {cellarInventory.map(keg => (
+        {filteredKegs.map(keg => (
           <li key={keg.id}>
             <Keg keg={keg} />
           </li>
diff --git a/src/components/CowPenContextMenu/CowPenContextMenu.js b/src/components/CowPenContextMenu/CowPenContextMenu.js
index 53add0ba..e2e54a35 100644
--- a/src/components/CowPenContextMenu/CowPenContextMenu.js
+++ b/src/components/CowPenContextMenu/CowPenContextMenu.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { array, func, number, object, string } from 'prop-types'
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward.js'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward.js'
@@ -23,9 +23,9 @@ import { PURCHASEABLE_COW_PENS } from '../../constants.js'
 import cowShopInventory from '../../data/shop-inventory-cow.js'
 
 import CowCard from '../CowCard/index.js'
+import SearchBar from '../SearchBar/index.js'
 
 import { TabPanel, a11yProps } from './TabPanel/index.js'
-
 import './CowPenContextMenu.sass'
 
 const { AGE, COLOR, GENDER, HAPPINESS, VALUE, WEIGHT } = enumify([
@@ -84,6 +84,23 @@ export const CowPenContextMenu = ({
   const [sortType, setSortType] = useState(AGE)
   const [isAscending, setIsAscending] = useState(false)
   const [currentTab, setCurrentTab] = useState(0)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  useEffect(() => {
+    setSearchQuery('')
+  }, [currentTab])
+
+  const filteredCowInventory = searchQuery
+    ? cowInventory.filter(cow =>
+        cow.name.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : cowInventory
+
+  const filteredShopInventory = searchQuery
+    ? cowShopInventory.filter(item =>
+        item.name.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : cowShopInventory
 
   return (
     <div className="CowPenContextMenu">
@@ -108,95 +125,139 @@ export const CowPenContextMenu = ({
           Capacity: {cowInventory.length} /{' '}
           {PURCHASEABLE_COW_PENS.get(purchasedCowPen).cows}
         </h3>
-        {cowInventory.length > 1 && (
-          <div {...{ className: 'sort-wrapper' }}>
-            <Fab
-              {...{
-                'aria-label': 'Toggle sorting order',
-                onClick: () => setIsAscending(!isAscending),
-                color: 'primary',
-              }}
-            >
-              {isAscending ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
-            </Fab>
-            <Select
-              variant="standard"
-              {...{
-                className: 'sort-select',
-                displayEmpty: true,
-                value: sortType,
-                onChange: ({ target: { value } }) => setSortType(value),
-              }}
-            >
-              <MenuItem {...{ value: VALUE }}>Sort by Value</MenuItem>
-              <MenuItem {...{ value: AGE }}>Sort by Age</MenuItem>
-              <MenuItem {...{ value: HAPPINESS }}>Sort by Happiness</MenuItem>
-              <MenuItem {...{ value: WEIGHT }}>Sort by Weight</MenuItem>
-              <MenuItem {...{ value: GENDER }}>Sort by Gender</MenuItem>
-              <MenuItem {...{ value: COLOR }}>Sort by Color</MenuItem>
-            </Select>
-          </div>
+
+        {cowInventory.length > 0 && (
+          <SearchBar
+            placeholder="Search cows by name..."
+            onSearch={setSearchQuery}
+          />
         )}
 
-        <ul className="card-list purchased-cows">
-          {sortCows(cowInventory, sortType, isAscending).map(cow =>
-            isCowInBreedingPen(cow, cowBreedingPen) ? null : (
-              <li
-                {...{
-                  key: cow.id,
-                  onFocus: () => handleCowSelect(cow),
-                  onClick: () => handleCowSelect(cow),
-                }}
-              >
-                <CowCard
+        {filteredCowInventory.length > 0 && (
+          <>
+            {filteredCowInventory.length > 1 && (
+              <div {...{ className: 'sort-wrapper' }}>
+                <Fab
                   {...{
-                    cow,
-                    handleCowAutomaticHugChange,
-                    handleCowBreedChange,
-                    handleCowHugClick,
-                    handleCowNameInputChange,
-                    handleCowOfferClick,
-                    handleCowSellClick,
-                    handleCowWithdrawClick,
-                    isCowPurchased: true,
-                    isSelected: cow.id === selectedCowId,
+                    'aria-label': 'Toggle sorting order',
+                    onClick: () => setIsAscending(!isAscending),
+                    color: 'primary',
                   }}
-                />
-              </li>
-            )
-          )}
-        </ul>
-      </TabPanel>
-      <TabPanel value={currentTab} index={1}>
-        <h3>Capacity: {numberOfCowsBreeding(cowBreedingPen)} / 2</h3>
-        <ul className="card-list purchased-cows breeding-cows">
-          {nullArray(numberOfCowsBreeding(cowBreedingPen)).map((_null, i) => {
-            const cowId = cowBreedingPen[`cowId${i + 1}`]
-            const cow = findCowById(cowInventory, cowId)
-            return (
-              <li {...{ key: cowId }}>
-                <CowCard
+                >
+                  {isAscending ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
+                </Fab>
+                <Select
+                  variant="standard"
                   {...{
-                    cow,
-                    handleCowAutomaticHugChange,
-                    handleCowBreedChange,
-                    handleCowHugClick,
-                    handleCowNameInputChange,
-                    handleCowOfferClick,
-                    handleCowSellClick,
-                    handleCowWithdrawClick,
-                    isCowPurchased: true,
-                    isSelected: cow.id === selectedCowId,
+                    className: 'sort-select',
+                    displayEmpty: true,
+                    value: sortType,
+                    onChange: ({ target: { value } }) => setSortType(value),
                   }}
+                >
+                  <MenuItem {...{ value: VALUE }}>Sort by Value</MenuItem>
+                  <MenuItem {...{ value: AGE }}>Sort by Age</MenuItem>
+                  <MenuItem {...{ value: HAPPINESS }}>
+                    Sort by Happiness
+                  </MenuItem>
+                  <MenuItem {...{ value: WEIGHT }}>Sort by Weight</MenuItem>
+                  <MenuItem {...{ value: GENDER }}>Sort by Gender</MenuItem>
+                  <MenuItem {...{ value: COLOR }}>Sort by Color</MenuItem>
+                </Select>
+              </div>
+            )}
+
+            <ul className="card-list purchased-cows">
+              {sortCows(filteredCowInventory, sortType, isAscending).map(cow =>
+                isCowInBreedingPen(cow, cowBreedingPen) ? null : (
+                  <li
+                    {...{
+                      key: cow.id,
+                      onFocus: () => handleCowSelect(cow),
+                      onClick: () => handleCowSelect(cow),
+                    }}
+                  >
+                    <CowCard
+                      {...{
+                        cow,
+                        handleCowAutomaticHugChange,
+                        handleCowBreedChange,
+                        handleCowHugClick,
+                        handleCowNameInputChange,
+                        handleCowOfferClick,
+                        handleCowSellClick,
+                        handleCowWithdrawClick,
+                        isCowPurchased: true,
+                        isSelected: cow.id === selectedCowId,
+                      }}
+                    />
+                  </li>
+                )
+              )}
+            </ul>
+          </>
+        )}
+      </TabPanel>
+      <TabPanel value={currentTab} index={1}>
+        {(() => {
+          const filteredCows = nullArray(numberOfCowsBreeding(cowBreedingPen))
+            .map((_null, i) => {
+              const cowId = cowBreedingPen[`cowId${i + 1}`]
+              const cow = findCowById(cowInventory, cowId)
+
+              if (
+                !cow ||
+                !cow.name.toLowerCase().includes(searchQuery.toLowerCase())
+              ) {
+                return null
+              }
+
+              return cow
+            })
+            .filter(Boolean)
+
+          return (
+            <>
+              <h3>Capacity: {numberOfCowsBreeding(cowBreedingPen)} / 2</h3>
+              {cowInventory.length > 0 && (
+                <SearchBar
+                  placeholder="Search cows by name..."
+                  onSearch={setSearchQuery}
                 />
-              </li>
-            )
-          })}
-        </ul>
+              )}
+              <ul className="card-list purchased-cows breeding-cows">
+                {filteredCows.map(cow => (
+                  <li key={cow.id}>
+                    <CowCard
+                      {...{
+                        cow,
+                        handleCowAutomaticHugChange,
+                        handleCowBreedChange,
+                        handleCowHugClick,
+                        handleCowNameInputChange,
+                        handleCowOfferClick,
+                        handleCowSellClick,
+                        handleCowWithdrawClick,
+                        isCowPurchased: true,
+                        isSelected: cow.id === selectedCowId,
+                      }}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </>
+          )
+        })()}
       </TabPanel>
       <TabPanel value={currentTab} index={2}>
+        {cowShopInventory.length > 0 && (
+          <SearchBar
+            placeholder="Search supplies..."
+            onSearch={setSearchQuery}
+          />
+        )}
         <ul className="card-list">
-          {cowShopInventory.map(item => (
+          {filteredShopInventory.map(item => (
             <li key={item.id}>
               <Item
                 {...{
diff --git a/src/components/FermentationRecipeList/FermentationRecipeList.js b/src/components/FermentationRecipeList/FermentationRecipeList.js
index 0e2ea856..3e3d6205 100644
--- a/src/components/FermentationRecipeList/FermentationRecipeList.js
+++ b/src/components/FermentationRecipeList/FermentationRecipeList.js
@@ -1,9 +1,13 @@
-import React, { useContext } from 'react'
+import React, { useState, useContext } from 'react'
 
 import { fermentableItemsMap } from '../../data/maps.js'
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import { getCropsAvailableToFerment } from '../../utils/getCropsAvailableToFerment.js'
 
+import { FERMENTED_CROP_NAME } from '../../templates.js'
+
+import SearchBar from '../SearchBar/index.js'
+
 import { FermentationRecipe } from './FermentationRecipe.js'
 
 const totalFermentableItems = Object.keys(fermentableItemsMap).length
@@ -15,8 +19,23 @@ export const FermentationRecipeList = () => {
 
   const cropsAvailableToFerment = getCropsAvailableToFerment(levelEntitlements)
 
-  const numberOfCropsAvailableToFerment = Object.keys(cropsAvailableToFerment)
-    .length
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const searchTerms = searchQuery
+    .toLowerCase()
+    .split(' ')
+    .filter(term => term.length > 0)
+
+  const filteredCrops = cropsAvailableToFerment.filter(item => {
+    const fermentationRecipeName = `${FERMENTED_CROP_NAME}${item.name}`.toLowerCase()
+    return searchTerms.every(
+      term =>
+        fermentationRecipeName.includes(term) ||
+        item.name.toLowerCase().includes(term)
+    )
+  })
+
+  const numberOfCropsAvailableToFerment = filteredCrops.length
 
   return (
     <>
@@ -24,13 +43,21 @@ export const FermentationRecipeList = () => {
         Available Fermentation Recipes ({numberOfCropsAvailableToFerment} /{' '}
         {totalFermentableItems})
       </h3>
-      <ul className="card-list">
-        {cropsAvailableToFerment.map(item => (
-          <li key={item.id}>
-            <FermentationRecipe item={item} />
-          </li>
-        ))}
-      </ul>
+      {cropsAvailableToFerment.length > 0 && (
+        <SearchBar
+          placeholder="Search fermentation recipes..."
+          onSearch={setSearchQuery}
+        />
+      )}
+      {filteredCrops.length > 0 && (
+        <ul className="card-list">
+          {filteredCrops.map(item => (
+            <li key={item.id}>
+              <FermentationRecipe item={item} />
+            </li>
+          ))}
+        </ul>
+      )}
     </>
   )
 }
diff --git a/src/components/FermentationRecipeList/FermentationRecipeList.test.js b/src/components/FermentationRecipeList/FermentationRecipeList.test.js
index 0dd4d507..8b87d814 100644
--- a/src/components/FermentationRecipeList/FermentationRecipeList.test.js
+++ b/src/components/FermentationRecipeList/FermentationRecipeList.test.js
@@ -1,9 +1,7 @@
-/**
- * @typedef {import('../../index').farmhand.levelEntitlements} levelEntitlements
- */
 import React from 'react'
 import { screen } from '@testing-library/dom'
 import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import { getLevelEntitlements } from '../../utils/getLevelEntitlements.js'
@@ -15,13 +13,9 @@ import { FermentationRecipeList } from './FermentationRecipeList.js'
 const totalFermentableItems = Object.keys(fermentableItemsMap).length
 
 vitest.mock('./FermentationRecipe.js', () => ({
-  FermentationRecipe: () => <></>,
+  FermentationRecipe: ({ item }) => <div>{item.name}</div>,
 }))
 
-/**
- * @param {Object} props
- * @param {levelEntitlements} props.levelEntitlements
- */
 const FermentationRecipeListStub = ({ levelEntitlements } = {}) => (
   <FarmhandContext.Provider
     value={{
@@ -62,4 +56,61 @@ describe('FermentationRecipeList', () => {
 
     expect(header).toBeInTheDocument()
   })
+
+  test('filters recipes based on search query', async () => {
+    const levelEntitlements = getLevelEntitlements(100)
+    const cropsAvailableToFerment = getCropsAvailableToFerment(
+      levelEntitlements
+    )
+
+    render(<FermentationRecipeListStub levelEntitlements={levelEntitlements} />)
+
+    const searchBar = screen.getByPlaceholderText(
+      'Search fermentation recipes...'
+    )
+    expect(searchBar).toBeInTheDocument()
+
+    await userEvent.type(searchBar, 'apple')
+
+    const filteredCrops = cropsAvailableToFerment.filter(item => {
+      const fermentationRecipeName = `Fermented ${item.name}`.toLowerCase()
+      return (
+        fermentationRecipeName.includes('apple') ||
+        item.name.toLowerCase().includes('apple')
+      )
+    })
+
+    filteredCrops.forEach(crop => {
+      expect(screen.getByText(crop.name)).toBeInTheDocument()
+    })
+
+    const nonMatchingCrops = cropsAvailableToFerment.filter(
+      item => !filteredCrops.includes(item)
+    )
+
+    nonMatchingCrops.forEach(crop => {
+      const nonMatchingElements = screen.queryAllByText(crop.name)
+      expect(nonMatchingElements).toHaveLength(1)
+    })
+  })
+
+  test('handles empty search query', async () => {
+    const levelEntitlements = getLevelEntitlements(100)
+    const cropsAvailableToFerment = getCropsAvailableToFerment(
+      levelEntitlements
+    )
+
+    render(<FermentationRecipeListStub levelEntitlements={levelEntitlements} />)
+
+    const searchBar = screen.getByPlaceholderText(
+      'Search fermentation recipes...'
+    )
+    expect(searchBar).toBeInTheDocument()
+
+    await userEvent.clear(searchBar)
+
+    cropsAvailableToFerment.forEach(crop => {
+      expect(screen.getByText(crop.name)).toBeInTheDocument()
+    })
+  })
 })
diff --git a/src/components/Inventory/Inventory.js b/src/components/Inventory/Inventory.js
index 16bfc972..e0eabaaa 100644
--- a/src/components/Inventory/Inventory.js
+++ b/src/components/Inventory/Inventory.js
@@ -1,136 +1,170 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useState } from 'react'
+import Accordion from '@mui/material/Accordion/index.js'
+import AccordionSummary from '@mui/material/AccordionSummary/index.js'
+import AccordionDetails from '@mui/material/AccordionDetails/index.js'
+import Checkbox from '@mui/material/Checkbox/index.js'
+import FormControlLabel from '@mui/material/FormControlLabel/index.js'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore.js'
 import { array } from 'prop-types'
-import Divider from '@mui/material/Divider/index.js'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import Item from '../Item/index.js'
 import { itemsMap } from '../../data/maps.js'
-import { enumify, itemType } from '../../enums.js'
 import { sortItems } from '../../utils/index.js'
+import SearchBar from '../SearchBar/index.js'
+import './Inventory.sass'
 
-const {
-  COW_FEED,
-  CRAFTED_ITEM,
-  CROP,
-  FERTILIZER,
-  HUGGING_MACHINE,
-  MILK,
-  ORE,
-  SCARECROW,
-  SPRINKLER,
-  STONE,
-  FUEL,
-  TOOL_UPGRADE,
-  WEED,
-} = itemType
-
-export const categoryIds = enumify([
-  'ANIMAL_PRODUCTS',
-  'ANIMAL_SUPPLIES',
-  'CRAFTED_ITEMS',
-  'CROPS',
-  'FIELD_TOOLS',
-  'FORAGED_ITEMS',
-  'MINED_RESOURCES',
-  'SEEDS',
-  'UPGRADES',
+// Using Map for categories to preserve key order and enable Map methods
+export const categoryIds = new Map([
+  ['CROPS', 'CROPS'],
+  ['SEEDS', 'SEEDS'],
+  ['FORAGED_ITEMS', 'FORAGED_ITEMS'],
+  ['FIELD_TOOLS', 'FIELD_TOOLS'],
+  ['ANIMAL_PRODUCTS', 'ANIMAL_PRODUCTS'],
+  ['ANIMAL_SUPPLIES', 'ANIMAL_SUPPLIES'],
+  ['CRAFTED_ITEMS', 'CRAFTED_ITEMS'],
+  ['MINED_RESOURCES', 'MINED_RESOURCES'],
 ])
-const categoryIdKeys = Object.keys(categoryIds)
-const {
-  ANIMAL_PRODUCTS,
-  ANIMAL_SUPPLIES,
-  CRAFTED_ITEMS,
-  CROPS,
-  FIELD_TOOLS,
-  FORAGED_ITEMS,
-  MINED_RESOURCES,
-  SEEDS,
-  UPGRADES,
-} = categoryIds
 
-const itemTypeCategoryMap = Object.freeze({
-  SEEDS,
-  [COW_FEED]: ANIMAL_SUPPLIES,
-  [CRAFTED_ITEM]: CRAFTED_ITEMS,
-  [CROP]: CROPS,
-  [FERTILIZER]: FIELD_TOOLS,
-  [FUEL]: MINED_RESOURCES,
-  [HUGGING_MACHINE]: ANIMAL_SUPPLIES,
-  [MILK]: ANIMAL_PRODUCTS,
-  [ORE]: MINED_RESOURCES,
-  [SCARECROW]: FIELD_TOOLS,
-  [SPRINKLER]: FIELD_TOOLS,
-  [STONE]: MINED_RESOURCES,
-  [TOOL_UPGRADE]: UPGRADES,
-  [WEED]: FORAGED_ITEMS,
-})
+const itemTypeCategoryMap = new Map([
+  ['SEEDS', 'SEEDS'],
+  ['COW_FEED', 'ANIMAL_SUPPLIES'],
+  ['CRAFTED_ITEM', 'CRAFTED_ITEMS'],
+  ['CROP', 'CROPS'],
+  ['FERTILIZER', 'FIELD_TOOLS'],
+  ['FUEL', 'MINED_RESOURCES'],
+  ['HUGGING_MACHINE', 'ANIMAL_SUPPLIES'],
+  ['MILK', 'ANIMAL_PRODUCTS'],
+  ['ORE', 'MINED_RESOURCES'],
+  ['SCARECROW', 'FIELD_TOOLS'],
+  ['SPRINKLER', 'FIELD_TOOLS'],
+  ['STONE', 'MINED_RESOURCES'],
+  ['WEED', 'FORAGED_ITEMS'],
+])
 
+// Initialize Map to group items into categories
 const getItemCategories = () =>
-  categoryIdKeys.reduce((acc, key) => {
-    acc[key] = []
-    return acc
-  }, {})
+  new Map(Array.from(categoryIds.keys()).map(key => [key, []]))
 
 export const separateItemsIntoCategories = items =>
-  sortItems(items).reduce((acc, item) => {
+  sortItems(items).reduce((categories, item) => {
     const { type } = itemsMap[item.id]
-    const category = itemTypeCategoryMap[type]
+    const category = itemTypeCategoryMap.get(type)
 
-    if (category === CROPS) {
-      acc[item.isPlantableCrop ? SEEDS : CROPS].push(item)
-    } else if (acc[category]) {
-      acc[category].push(item)
+    if (category === 'CROPS') {
+      const targetCategory = item.isPlantableCrop ? 'SEEDS' : 'CROPS'
+      categories.get(targetCategory)?.push(item)
+    } else if (categories.has(category)) {
+      categories.get(category)?.push(item)
     }
 
-    return acc
+    return categories
   }, getItemCategories())
 
-export const Inventory = ({
+const formatCategoryName = key =>
+  key
+    .replace(/_/g, ' ')
+    .toLowerCase()
+    .replace(/\b\w/g, char => char.toUpperCase())
+
+const Inventory = ({
   items,
   playerInventory,
   shopInventory,
-
   isPurchaseView = false,
   isSellView = false,
-
   itemCategories = separateItemsIntoCategories(items),
-}) => (
-  <div className="Inventory">
-    {[
-      [CROPS, 'Crops'],
-      [SEEDS, 'Seeds'],
-      [FORAGED_ITEMS, 'Foraged Items'],
-      [FIELD_TOOLS, 'Field Tools'],
-      [ANIMAL_PRODUCTS, 'Animal Products'],
-      [ANIMAL_SUPPLIES, 'Animal Supplies'],
-      [CRAFTED_ITEMS, 'Crafted Items'],
-      [MINED_RESOURCES, 'Mined Resources'],
-    ].map(([category, headerText]) =>
-      itemCategories[category].length ? (
-        <Fragment key={category}>
-          <section>
-            {isPurchaseView ? null : <h3>{headerText}</h3>}
-            <ul className="card-list">
-              {itemCategories[category].map(item => (
-                <li key={item.id}>
-                  <Item
-                    {...{
-                      isPurchaseView,
-                      isSellView,
-                      item,
-                      showQuantity: isPurchaseView,
-                    }}
-                  />
-                </li>
+  placeholder = 'Search inventory...',
+}) => {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCategories, setSelectedCategories] = useState([])
+  const toggleCategory = category => {
+    setSelectedCategories(prev =>
+      prev.includes(category)
+        ? prev.filter(c => c !== category)
+        : [...prev, category]
+    )
+  }
+
+  const filteredCategories = Array.from(itemCategories.entries()).reduce(
+    (filtered, [category, items]) => {
+      const matchingItems = items.filter(item =>
+        itemsMap[item.id]?.name
+          ?.toLowerCase()
+          ?.includes(searchQuery.toLowerCase())
+      )
+
+      if (
+        matchingItems.length &&
+        (!selectedCategories.length || selectedCategories.includes(category))
+      ) {
+        filtered.set(category, matchingItems)
+      }
+      return filtered
+    },
+    new Map()
+  )
+
+  return (
+    <div className="Inventory">
+      <SearchBar placeholder={placeholder} onSearch={setSearchQuery} />
+      {!isPurchaseView && (
+        <Accordion>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="filter-content"
+            id="filter-header"
+          >
+            <h4>Filter by category</h4>
+          </AccordionSummary>
+          <AccordionDetails>
+            <div className="filter-section">
+              {Array.from(categoryIds.keys()).map(key => (
+                <FormControlLabel
+                  key={key}
+                  sx={{
+                    display: 'block',
+                  }}
+                  control={
+                    <Checkbox
+                      disabled={isPurchaseView}
+                      checked={selectedCategories.includes(key)}
+                      onChange={() => toggleCategory(key)}
+                    />
+                  }
+                  label={formatCategoryName(key)}
+                />
               ))}
-            </ul>
-          </section>
-          {isPurchaseView ? null : <Divider />}
-        </Fragment>
-      ) : null
-    )}
-  </div>
-)
+            </div>
+          </AccordionDetails>
+        </Accordion>
+      )}
+      {Array.from(filteredCategories.entries()).map(([category, items]) =>
+        items.length ? (
+          <Fragment key={category}>
+            <section>
+              <h3>{formatCategoryName(category)}</h3>
+              <ul className="card-list">
+                {items.map(item => (
+                  <li key={item.id}>
+                    <Item
+                      {...{
+                        isPurchaseView,
+                        isSellView,
+                        item,
+                        showQuantity: isPurchaseView,
+                      }}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </section>
+          </Fragment>
+        ) : null
+      )}
+    </div>
+  )
+}
 
 Inventory.propTypes = {
   items: array.isRequired,
diff --git a/src/components/Inventory/Inventory.sass b/src/components/Inventory/Inventory.sass
new file mode 100644
index 00000000..a7796d66
--- /dev/null
+++ b/src/components/Inventory/Inventory.sass
@@ -0,0 +1,41 @@
+.Inventory
+  .filter-container
+    transition: height 0.3s ease, opacity 0.3s ease
+    overflow: hidden
+
+    &.hidden
+      height: 0
+      opacity: 0
+      pointer-events: none
+
+    &.visible
+      height: auto
+      opacity: 1
+
+  .filter-toggle
+    cursor: pointer
+    text-align: center
+    margin-bottom: 10px
+    color: #007bff
+    font-size: 14px
+    font-weight: bold
+
+  .filter-section
+    margin-bottom: 20px
+    padding: 10px
+    border: 1px solid #ccc
+    border-radius: 5px
+    background-color: #f7f7f7
+
+    h4
+      margin-bottom: 10px
+      font-size: 16px
+      color: #555
+
+    .filter-checkbox
+      display: block
+      margin-bottom: 8px
+      font-size: 14px
+
+      input
+        margin-right: 5px
diff --git a/src/components/Inventory/Inventory.test.js b/src/components/Inventory/Inventory.test.js
index 957c2e6c..c3a4dfd8 100644
--- a/src/components/Inventory/Inventory.test.js
+++ b/src/components/Inventory/Inventory.test.js
@@ -1,95 +1,177 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render, screen, fireEvent } from '@testing-library/react'
 
-import Item from '../Item/index.js'
 import { testItem } from '../../test-utils/index.js'
 import { sortItems } from '../../utils/index.js'
-import { carrot, carrotSeed, pumpkinSeed } from '../../data/crops/index.js'
-import { carrotSoup } from '../../data/recipes.js'
-
-import {
-  Inventory,
-  categoryIds,
-  separateItemsIntoCategories,
-} from './Inventory.js'
-
-let component
-
-beforeEach(() => {
-  component = shallow(
-    <Inventory
-      {...{
-        items: [],
-      }}
-    />
+import { generateValueAdjustments } from '../../common/utils.js'
+import { pumpkinSeed, carrotSeed } from '../../data/crops/index.js'
+import FarmhandContext from '../Farmhand/Farmhand.context.js'
+
+import { separateItemsIntoCategories } from './Inventory.js'
+
+import Inventory from './Inventory.js'
+
+const defaultGameState = {
+  valueAdjustments: generateValueAdjustments(),
+  historicalValueAdjustments: [],
+  inventory: [],
+  playerInventoryQuantities: {},
+  completedAchievements: {},
+  inventoryLimit: 100,
+  money: 500,
+}
+
+vitest.useFakeTimers()
+
+const StubInventory = ({ gameState = {}, ...overrides }) => {
+  return (
+    <FarmhandContext.Provider
+      value={{ gameState: { ...defaultGameState, ...gameState }, handlers: {} }}
+    >
+      <Inventory
+        items={[]}
+        playerInventory={[]}
+        shopInventory={[]}
+        {...overrides}
+      />
+    </FarmhandContext.Provider>
   )
-})
+}
+describe('Inventory Component', () => {
+  describe('Displaying items', () => {
+    test('displays all items when no categories are selected', () => {
+      const items = [
+        testItem({ id: 'carrot', name: 'Carrot' }),
+        testItem({ id: 'pumpkin', name: 'Pumpkin' }),
+        testItem({ id: 'carrot-seed', name: 'Carrot Seed' }),
+      ]
+      render(<StubInventory items={items} selectedCategories={[]} />)
+      items.forEach(item => {
+        expect(screen.getByText(item.name)).toBeInTheDocument()
+      })
+    })
 
-describe('rendering items', () => {
-  test('shows the inventory', () => {
-    component.setProps({ items: [testItem({ id: carrot.id })] })
+    test('filters items by search query', () => {
+      const items = [
+        testItem({ id: 'carrot', name: 'Carrot', category: 'CROPS' }),
+        testItem({
+          id: 'pumpkin-seed',
+          name: 'Pumpkin Seed',
+          category: 'SEEDS',
+        }),
+      ]
 
-    const li = component.find('li')
-    expect(li).toHaveLength(1)
-    expect(li.find(Item)).toHaveLength(1)
+      render(<StubInventory items={items} selectedCategories={[]} />)
+
+      const searchInput = screen.getByPlaceholderText('Search inventory...')
+      fireEvent.change(searchInput, { target: { value: 'Carrot' } })
+
+      vitest.runAllTimers()
+
+      expect(screen.getByText('Carrot')).toBeInTheDocument()
+      expect(screen.queryByText('Pumpkin Seed')).not.toBeInTheDocument()
+    })
   })
-})
 
-describe('item sorting', () => {
-  test('sorts by type and base value', () => {
-    expect(
-      sortItems([
+  describe('Categorizing items', () => {
+    test('divides items into type categories', () => {
+      const items = [
+        testItem({
+          id: 'carrot-seed',
+          type: 'SEEDS',
+          name: 'Carrot Seed',
+          isPlantableCrop: true,
+        }),
+        testItem({
+          id: 'carrot',
+          type: 'CROP',
+          name: 'Carrot',
+          isPlantableCrop: false,
+        }),
+        testItem({
+          id: 'fertilizer',
+          type: 'FIELD_TOOLS',
+          name: 'Fertilizer',
+        }),
+      ]
+
+      const categorizedItems = separateItemsIntoCategories(items)
+
+      expect(categorizedItems).toEqual(
+        new Map([
+          [
+            'CROPS',
+            [
+              testItem({
+                id: 'carrot',
+                type: 'CROP',
+                name: 'Carrot',
+                isPlantableCrop: false,
+              }),
+            ],
+          ],
+          [
+            'SEEDS',
+            [
+              testItem({
+                id: 'carrot-seed',
+                type: 'SEEDS',
+                name: 'Carrot Seed',
+                isPlantableCrop: true,
+              }),
+            ],
+          ],
+          ['FORAGED_ITEMS', []],
+          [
+            'FIELD_TOOLS',
+            [
+              testItem({
+                id: 'fertilizer',
+                type: 'FIELD_TOOLS',
+                name: 'Fertilizer',
+              }),
+            ],
+          ],
+          ['ANIMAL_PRODUCTS', []],
+          ['ANIMAL_SUPPLIES', []],
+          ['CRAFTED_ITEMS', []],
+          ['MINED_RESOURCES', []],
+        ])
+      )
+    })
+  })
+
+  describe('SearchBar functionality', () => {
+    test('renders SearchBar with correct placeholder', () => {
+      render(
+        <StubInventory
+          items={[]}
+          selectedCategories={[]}
+          searchQuery=""
+          onSearch={() => {}}
+        />
+      )
+
+      const searchBar = screen.getByPlaceholderText('Search inventory...')
+      expect(searchBar).toBeInTheDocument()
+    })
+  })
+
+  describe('Item sorting and categorization', () => {
+    test('sorts items by type and base value', () => {
+      const sortedItems = sortItems([
         testItem({ id: pumpkinSeed.id, value: 0.5 }),
         testItem({ id: 'scarecrow' }),
         testItem({ id: 'sprinkler' }),
         testItem({ id: carrotSeed.id }),
       ])
-    ).toEqual([
-      testItem({ id: carrotSeed.id }),
-      testItem({ id: pumpkinSeed.id, value: 0.5 }),
-      testItem({ id: 'sprinkler' }),
-      testItem({ id: 'scarecrow' }),
-    ])
-  })
 
-  test('divides into type categories', () => {
-    expect(
-      separateItemsIntoCategories(
-        [
-          testItem({ id: pumpkinSeed.id, isPlantableCrop: true }),
-          testItem({ id: 'scarecrow' }),
-          testItem({ id: 'sprinkler' }),
-          testItem({ id: carrotSeed.id, isPlantableCrop: true }),
-          testItem({ id: carrotSoup.id }),
-          testItem({ id: 'cow-feed' }),
-          testItem({ id: carrot.id }),
-          testItem({ id: 'milk-1' }),
-          testItem({ id: 'stone' }),
-          testItem({ id: 'iron-ore' }),
-          testItem({ id: 'coal' }),
-        ],
-        {}
-      )
-    ).toEqual({
-      [categoryIds.CROPS]: [testItem({ id: carrot.id })],
-      [categoryIds.FORAGED_ITEMS]: [],
-      [categoryIds.MINED_RESOURCES]: [
-        testItem({ id: 'coal' }),
-        testItem({ id: 'stone' }),
-        testItem({ id: 'iron-ore' }),
-      ],
-      [categoryIds.SEEDS]: [
-        testItem({ id: carrotSeed.id, isPlantableCrop: true }),
-        testItem({ id: pumpkinSeed.id, isPlantableCrop: true }),
-      ],
-      [categoryIds.FIELD_TOOLS]: [
+      expect(sortedItems).toEqual([
+        testItem({ id: carrotSeed.id }),
+        testItem({ id: pumpkinSeed.id, value: 0.5 }),
         testItem({ id: 'sprinkler' }),
         testItem({ id: 'scarecrow' }),
-      ],
-      [categoryIds.ANIMAL_PRODUCTS]: [testItem({ id: 'milk-1' })],
-      [categoryIds.ANIMAL_SUPPLIES]: [testItem({ id: 'cow-feed' })],
-      [categoryIds.CRAFTED_ITEMS]: [testItem({ id: carrotSoup.id })],
-      [categoryIds.UPGRADES]: [],
+      ])
     })
   })
 })
diff --git a/src/components/RecipeList/RecipeList.js b/src/components/RecipeList/RecipeList.js
index 43c991f0..f55c8955 100644
--- a/src/components/RecipeList/RecipeList.js
+++ b/src/components/RecipeList/RecipeList.js
@@ -1,10 +1,21 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
+import SearchBar from '../SearchBar/index.js'
 import Recipe from '../Recipe/index.js'
 
 export function RecipeList({ allRecipes, learnedRecipes }) {
-  const numLearnedRecipes = learnedRecipes.length
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const filteredRecipes = searchQuery
+    ? learnedRecipes.filter(recipeId =>
+        allRecipes[recipeId]?.name
+          ?.toLowerCase()
+          .includes(searchQuery.toLowerCase())
+      )
+    : learnedRecipes
+
+  const numLearnedRecipes = filteredRecipes.length
   const totalRecipes = Object.keys(allRecipes).length
 
   return (
@@ -12,17 +23,22 @@ export function RecipeList({ allRecipes, learnedRecipes }) {
       <h3>
         Learned Recipes ({numLearnedRecipes} / {totalRecipes})
       </h3>
-      <ul className="card-list">
-        {learnedRecipes.map(recipeId => (
-          <li key={recipeId}>
-            <Recipe
-              {...{
-                recipe: allRecipes[recipeId],
-              }}
-            />
-          </li>
-        ))}
-      </ul>
+      {learnedRecipes.length > 0 && (
+        <SearchBar placeholder="Search recipes..." onSearch={setSearchQuery} />
+      )}
+      {filteredRecipes.length > 0 && (
+        <ul className="card-list">
+          {filteredRecipes.map(recipeId => (
+            <li key={recipeId}>
+              <Recipe
+                {...{
+                  recipe: allRecipes[recipeId],
+                }}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
     </>
   )
 }
diff --git a/src/components/SearchBar/SearchBar.js b/src/components/SearchBar/SearchBar.js
new file mode 100644
index 00000000..57fc75c7
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDebounceCallback } from 'usehooks-ts'
+import TextField from '@mui/material/TextField/index.js'
+import './SearchBar.sass'
+
+const SearchBar = ({ placeholder, onSearch }) => {
+  const debouncedSearch = useDebounceCallback(value => {
+    onSearch(value)
+  }, 300)
+
+  const handleInputChange = event => {
+    debouncedSearch(event.target.value)
+  }
+
+  return (
+    <div className="search-bar">
+      <TextField
+        variant="outlined"
+        fullWidth
+        placeholder={placeholder || 'Search...'}
+        onChange={handleInputChange}
+        inputProps={{
+          'aria-label': 'search',
+        }}
+      />
+    </div>
+  )
+}
+
+SearchBar.propTypes = {
+  placeholder: PropTypes.string,
+  onSearch: PropTypes.func.isRequired,
+}
+
+export default SearchBar
diff --git a/src/components/SearchBar/SearchBar.sass b/src/components/SearchBar/SearchBar.sass
new file mode 100644
index 00000000..07b08de7
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.sass
@@ -0,0 +1,48 @@
+@import '../../styles/variables.sass'
+@import '../../styles/utils.sass'
+
+.search-bar
+  position: relative
+  max-width: 100%
+  padding: 0.5em
+  margin: 1em 0
+  display: flex
+  justify-content: center
+  align-items: center
+  background-color: #fff
+  border-radius: 1em
+  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1)
+
+  .MuiOutlinedInput-root
+    width: 100%
+    font-size: 1em
+    background-color: transparent
+    border-radius: 0.5em
+    transition: all 0.3s ease
+
+    &:hover .MuiOutlinedInput-notchedOutline
+      border-color: #ffd24d 
+
+    &.Mui-focused .MuiOutlinedInput-notchedOutline
+      border-color: #ffb913 
+
+    .MuiOutlinedInput-notchedOutline
+      transition: border-color 0.3s ease 
+
+    input
+      color: #333
+      caret-color: #333
+      transition: background-color 0.3s ease 
+      &:focus
+        background-color: #fff
+
+    input::placeholder
+      color: #999
+      transition: color 0.3s ease 
+
+  @media (max-width: 768px)
+    padding: 1em
+    margin: 0.5em 0
+
+    .MuiOutlinedInput-root
+      font-size: 0.9em
diff --git a/src/components/SearchBar/SearchBar.test.js b/src/components/SearchBar/SearchBar.test.js
new file mode 100644
index 00000000..c9c989b4
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.test.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+
+import SearchBar from './SearchBar.js'
+
+describe('SearchBar Component', () => {
+  it('renders correctly with placeholder', () => {
+    render(<SearchBar placeholder="Search for items" onSearch={() => {}} />)
+
+    const inputElement = screen.getByPlaceholderText('Search for items')
+    expect(inputElement).toBeInTheDocument()
+  })
+
+  it('renders with default placeholder if none provided', () => {
+    render(<SearchBar onSearch={() => {}} />)
+
+    const inputElement = screen.getByPlaceholderText('Search...')
+    expect(inputElement).toBeInTheDocument()
+  })
+
+  it('calls onSearch with correct value when typing', async () => {
+    const onSearchMock = vi.fn()
+    render(<SearchBar placeholder="Type here" onSearch={onSearchMock} />)
+
+    const inputElement = screen.getByPlaceholderText('Type here')
+    await userEvent.type(inputElement, 'test query')
+
+    await waitFor(() => {
+      expect(onSearchMock).toHaveBeenCalledTimes(1)
+      expect(onSearchMock).toHaveBeenCalledWith('test query')
+    })
+  })
+})
diff --git a/src/components/SearchBar/index.js b/src/components/SearchBar/index.js
new file mode 100644
index 00000000..450d6866
--- /dev/null
+++ b/src/components/SearchBar/index.js
@@ -0,0 +1 @@
+export { default } from './SearchBar.js'
diff --git a/src/components/Shop/Shop.js b/src/components/Shop/Shop.js
index c7f08ff4..c4643551 100644
--- a/src/components/Shop/Shop.js
+++ b/src/components/Shop/Shop.js
@@ -102,6 +102,7 @@ export const Shop = ({
           {...{
             items: seeds,
             isPurchaseView: true,
+            placeholder: 'Search seeds...',
           }}
         />
       </TabPanel>
@@ -110,6 +111,7 @@ export const Shop = ({
           {...{
             items: fieldTools,
             isPurchaseView: true,
+            placeholder: 'Search supplies...',
           }}
         />
       </TabPanel>
diff --git a/src/components/WineRecipeList/WineRecipeList.js b/src/components/WineRecipeList/WineRecipeList.js
index 9867b60b..509b654d 100644
--- a/src/components/WineRecipeList/WineRecipeList.js
+++ b/src/components/WineRecipeList/WineRecipeList.js
@@ -1,7 +1,9 @@
-import React, { useContext } from 'react'
+import React, { useState, useContext } from 'react'
 
+import SearchBar from '../SearchBar/index.js'
 import { getWineVarietiesAvailableToMake } from '../../utils/getWineVarietiesAvailableToMake.js'
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
+
 import { grapeVariety } from '../../enums.js'
 
 import { WineRecipe } from './WineRecipe.js'
@@ -17,8 +19,13 @@ export const WineRecipeList = () => {
     itemsSold
   )
 
-  const numberOfWineVarietiesAvailableToMake =
-    wineVarietiesAvailableToMake.length
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const filteredWineVarieties = wineVarietiesAvailableToMake.filter(
+    wineVariety => wineVariety.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  const numberOfWineVarietiesAvailableToMake = filteredWineVarieties.length
 
   return (
     <>
@@ -26,8 +33,16 @@ export const WineRecipeList = () => {
         Available Wine Recipes ({numberOfWineVarietiesAvailableToMake} /{' '}
         {totalGrapeVarieties})
       </h3>
+
+      {wineVarietiesAvailableToMake.length > 0 && (
+        <SearchBar
+          placeholder="Search wine varieties..."
+          onSearch={setSearchQuery}
+        />
+      )}
+
       <ul className="card-list">
-        {wineVarietiesAvailableToMake.map(wineVariety => (
+        {filteredWineVarieties.map(wineVariety => (
           <li key={wineVariety}>
             <WineRecipe wineVariety={wineVariety} />
           </li>