diff --git a/BACKEND/app.js b/BACKEND/app.js
index fa8ef40..588fe4f 100644
--- a/BACKEND/app.js
+++ b/BACKEND/app.js
@@ -98,11 +98,12 @@ app.use(cors({
     credentials: true
 }));
 app.use(passport.initialize());
-app.use("/api", limiter);
 
 // Stripe webhook needs raw body — must be registered before express.json()
 app.post("/api/checkout/webhook", express.raw({ type: 'application/json' }), stripeWebhook);
 
+app.use("/api", limiter);
+
 app.use(express.json());
 
 // ============= API ROUTES =============
diff --git a/FRONTEND/src/components/ui/FilterPanel.jsx b/FRONTEND/src/components/ui/FilterPanel.jsx
index db5f8ad..f6b9bb1 100644
--- a/FRONTEND/src/components/ui/FilterPanel.jsx
+++ b/FRONTEND/src/components/ui/FilterPanel.jsx
@@ -7,7 +7,7 @@ import {
 } from '@chakra-ui/react';
 import { useProductStore } from '../../store/product';
 
-const FilterPanel = ({ filters, setFilters }) => {
+const FilterPanel = ({ filters, setFilters, isDisabled = false }) => {
   const [localFilters, setLocalFilters] = useState(filters);
   const [categories, setCategories] = useState([]);
   const [brands, setBrands] = useState([]);
@@ -101,6 +101,7 @@ const FilterPanel = ({ filters, setFilters }) => {
                 <Checkbox
                   key={cat}
                   colorScheme="blue"
+                  isDisabled={isDisabled}
                   isChecked={(localFilters.categories || []).includes(cat)}
                   onChange={() => handleCategoryChange(cat)}
                 >
@@ -122,6 +123,7 @@ const FilterPanel = ({ filters, setFilters }) => {
                 <Checkbox
                   key={brand}
                   colorScheme="blue"
+                  isDisabled={isDisabled}
                   isChecked={localFilters.brand === brand}
                   onChange={() => handleBrandChange(brand)}
                 >
@@ -143,6 +145,7 @@ const FilterPanel = ({ filters, setFilters }) => {
             </Text>
           </HStack>
           <RangeSlider
+            isDisabled={isDisabled}
             min={0} max={5000} step={10}
             value={[localFilters.minPrice, localFilters.maxPrice]}
             onChange={(val) =>
@@ -166,6 +169,7 @@ const FilterPanel = ({ filters, setFilters }) => {
             onChange={(e) =>
               setLocalFilters({ ...localFilters, minRating: Number(e.target.value) })
             }
+            isDisabled={isDisabled}
           >
             <option value={0}>Any Rating</option>
             <option value={1}>1+ Stars</option>
@@ -184,6 +188,7 @@ const FilterPanel = ({ filters, setFilters }) => {
             onChange={(e) =>
               setLocalFilters({ ...localFilters, inStock: e.target.checked })
             }
+            isDisabled={isDisabled}
           >
             <Text fontSize="sm">In Stock Only</Text>
           </Checkbox>
@@ -192,10 +197,11 @@ const FilterPanel = ({ filters, setFilters }) => {
         <Divider />
 
         <VStack spacing={3}>
-          <Button colorScheme="blue" w="full" onClick={handleApply}>
+          <Button colorScheme="blue" w="full" onClick={handleApply}
+          isDisabled={isDisabled}>
             Apply Filters
           </Button>
-          <Button variant="outline" w="full" onClick={handleReset}>
+          <Button variant="outline" w="full" onClick={handleReset} isDisabled={isDisabled}>
             Clear Filters
           </Button>
         </VStack>
diff --git a/FRONTEND/src/pages/HomePage.jsx b/FRONTEND/src/pages/HomePage.jsx
index 7b88409..2d4b448 100644
--- a/FRONTEND/src/pages/HomePage.jsx
+++ b/FRONTEND/src/pages/HomePage.jsx
@@ -157,6 +157,7 @@ const HomePage = () => {
             }}
             maxW="250px"
             aria-label="Sort products"
+            isDisabled={isSearching}
           >
             <option value="">Default</option>
             <option value="price_asc">Price: Low to High</option>
@@ -195,7 +196,7 @@ const HomePage = () => {
             </Box>
           </VStack>
 
-          <Box
+          <Box 
             w="full"
             display={hasNoProducts ? "block" : "grid"}
             gridTemplateColumns={hasNoProducts ? "1fr" : "300px 1fr"}
@@ -205,10 +206,15 @@ const HomePage = () => {
             {/* Sidebar with Filters — hidden when store has no products */}
             {!hasNoProducts && (
               <Box position="sticky" top="100px">
-                <FilterPanel filters={filters} setFilters={setFilters} />
+                <FilterPanel
+                  filters={filters}
+                  setFilters={setFilters}
+                  isDisabled={isSearching}
+                />
               </Box>
             )}
 
+
             {/* Product grid — skeletons while loading, real cards when ready */}
             <Box>
               <SimpleGrid columns={{ base: 1, md: 2, xl: 3 }} spacing={10} w="full">