From d937c187f2d2d89e115163c027833ec28ab409af Mon Sep 17 00:00:00 2001
From: Taha Qamar <tahaqamar10@gmail.com>
Date: Tue, 27 Jan 2026 22:05:56 -0800
Subject: [PATCH 1/4] finishes search feature with multiple filters and sorting

---
 backend/src/controllers/products.ts           | 108 ++++++++--
 backend/src/models/product.ts                 |  11 +
 backend/src/routes/product.ts                 |   2 +-
 frontend/src/components/FilterSort.tsx        | 111 ++++++++++
 frontend/src/components/SearchBar.tsx         |  42 +---
 frontend/src/pages/AddProduct.tsx             | 169 ++++++++++++---
 frontend/src/pages/EditProduct.tsx            | 203 ++++++++++++++----
 .../src/pages/Individual-product-page.tsx     |  13 ++
 frontend/src/pages/Marketplace.tsx            |  69 +++++-
 9 files changed, 604 insertions(+), 124 deletions(-)
 create mode 100644 frontend/src/components/FilterSort.tsx

diff --git a/backend/src/controllers/products.ts b/backend/src/controllers/products.ts
index 3c00ae0..a5da31d 100644
--- a/backend/src/controllers/products.ts
+++ b/backend/src/controllers/products.ts
@@ -16,11 +16,76 @@ const upload = multer({
 }).array("images", 10);
 
 /**
- * get all the products in database
+ * get all the products in database (keep filters, sorting in mind)
  */
 export const getProducts = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const products = await ProductModel.find();
+    const { sortBy, order, minPrice, maxPrice, condition, tags } = req.query;
+
+    // object containing different filters we can apply
+    const filters: any = {}; 
+  
+    // Check for filters and add them to object
+    if(minPrice || maxPrice) {
+      filters.price = {};
+      if(minPrice) filters.price.$gte = Number(minPrice);
+      if(maxPrice) filters.price.$lte = Number(maxPrice);
+    }
+
+    // Filter by specific condition
+    if(condition) {
+      filters.condition = condition;
+    }
+
+    // Filter by tags
+    if(tags) {
+      // Handle both single tag and multiple tags
+      let tagArray: string[];
+      
+      if (Array.isArray(tags)) {
+
+        // Already an array: ?tags=Electronics&tags=Furniture
+        tagArray = tags as string[];
+      } else if (typeof tags === 'string') {
+
+        // Single string, could be comma-separated: ?tags=Electronics,Furniture
+        tagArray = tags.includes(',') ? tags.split(',').map(t => t.trim()) : [tags];
+      
+      } else {
+        tagArray = [];
+      }
+
+      if (tagArray.length > 0) {
+        filters.tags = { $in: tagArray };
+      }
+    }
+
+    // sort object for different sorting options
+    const sortTypes: any = {}
+
+    if(sortBy) {
+      const sortOrder = order === "asc" ? 1 : -1;
+      
+      switch(sortBy) {
+        case "price":
+          sortTypes.price = sortOrder;
+          break;
+        case "timeCreated":
+          sortTypes.timeCreated = sortOrder;
+          break;
+        case "condition":
+          sortTypes.condition = sortOrder;
+          break;
+        default:
+          // newest is default
+          sortTypes.timeCreated = -1;
+      }
+    } else {
+      // default sorting by newest
+      sortTypes.timeCreated = -1;
+    }
+
+    const products = await ProductModel.find(filters).sort(sortTypes);
     res.status(200).json(products);
   } catch (error) {
     res.status(500).json({ message: "Error fetching products", error });
@@ -63,19 +128,21 @@ export const getProductsByName = async (req: AuthenticatedRequest, res: Response
 };
 
 /**
- * add product to database thru name, price, description, and userEmail
+ * add product to database thru name, price, description, userEmail, and condition
  */
 export const addProduct = [
   upload,
   async (req: AuthenticatedRequest, res: Response) => {
     try {
-      const { name, price, description } = req.body;
+      const { name, price, description, category, condition } = req.body;
       if (!req.user) return res.status(404).json({ message: "User not found" });
       const userId = req.user._id;
       const userEmail = req.user.userEmail;
-      if (!name || !price || !userEmail) {
-        return res.status(400).json({ message: "Name, price, and userEmail are required." });
+      if (!name || !price || !userEmail || !condition) {
+        return res.status(400).json({ message: "Name, price, userEmail, and condition are required." });
       }
+      
+      const tags = category ? [category] : [];
 
       const images: string[] = [];
       if (req.files && Array.isArray(req.files)) {
@@ -101,6 +168,8 @@ export const addProduct = [
         description,
         userEmail,
         images,
+        condition,
+        tags,
         timeCreated: new Date(),
         timeUpdated: new Date(),
       });
@@ -168,6 +237,12 @@ export const updateProductById = [
         return res.status(400).json({ message: "User does not own this product" });
       }
 
+      // handle tags input
+      let tags: string[] | undefined;
+      if (req.body.category) {
+        tags = [req.body.category];
+      }
+
       let existing = req.body.existingImages || [];
       if (!Array.isArray(existing)) existing = [existing];
 
@@ -183,15 +258,22 @@ export const updateProductById = [
 
       const finalImages = [...existing, ...newUrls];
 
+      const updateData: any = {
+        name: req.body.name,
+        price: req.body.price,
+        description: req.body.description,
+        condition: req.body.condition,
+        images: finalImages,
+        timeUpdated: new Date(),
+      };
+
+      if (tags) {
+        updateData.tags = tags;
+      }
+
       const updatedProduct = await ProductModel.findByIdAndUpdate(
         id,
-        {
-          name: req.body.name,
-          price: req.body.price,
-          description: req.body.description,
-          images: finalImages,
-          timeUpdated: new Date(),
-        },
+        updateData,
         { new: true },
       );
 
diff --git a/backend/src/models/product.ts b/backend/src/models/product.ts
index ca7386a..7ce1398 100644
--- a/backend/src/models/product.ts
+++ b/backend/src/models/product.ts
@@ -11,6 +11,7 @@ const productSchema = new Schema({
   },
   description: {
     type: String,
+    required: false,
   },
   timeCreated: {
     type: Date,
@@ -24,6 +25,16 @@ const productSchema = new Schema({
     type: String,
     required: true,
   },
+  tags: {
+    type: [String], 
+    enum: ['Electronics', 'School Supplies', 'Dorm Essentials', 'Furniture', 'Clothes', 'Miscellaneous'], 
+    required: false
+  },
+  condition: {
+    type: String,
+    enum: ["New", "Like New", "Used", "For Parts"],
+    required: true,
+  },
   images: [{ type: String }],
 });
 
diff --git a/backend/src/routes/product.ts b/backend/src/routes/product.ts
index 581fb50..3945a82 100644
--- a/backend/src/routes/product.ts
+++ b/backend/src/routes/product.ts
@@ -11,8 +11,8 @@ import { authenticateUser } from "src/validators/authUserMiddleware";
 const router = express.Router();
 
 router.get("/", authenticateUser, getProducts);
-router.get("/:id", authenticateUser, getProductById);
 router.get("/search/:query", authenticateUser, getProductsByName);
+router.get("/:id", authenticateUser, getProductById);
 router.post("/", authenticateUser, addProduct);
 router.delete("/:id", authenticateUser, deleteProductById);
 router.patch("/:id", authenticateUser, updateProductById);
diff --git a/frontend/src/components/FilterSort.tsx b/frontend/src/components/FilterSort.tsx
new file mode 100644
index 0000000..0cbad05
--- /dev/null
+++ b/frontend/src/components/FilterSort.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+
+interface FilterBarProps {
+  filters: any;
+  setFilters: (filters: any) => void;
+}
+
+const TAGS = [
+  'Electronics',
+  'School Supplies',
+  'Dorm Essentials',
+  'Furniture',
+  'Clothes',
+  'Miscellaneous'
+];
+
+export default function FilterBar({ filters, setFilters }: FilterBarProps) {
+  const handleTagToggle = (tag: string) => {
+    const currentTags = filters.tags || [];
+    const newTags = currentTags.includes(tag)
+      ? currentTags.filter((t: string) => t !== tag)
+      : [...currentTags, tag];
+    
+    setFilters({ ...filters, tags: newTags });
+  };
+
+  const clearFilters = () => {
+    setFilters({
+      sortBy: 'timeCreated',
+      order: 'desc'
+    });
+  };
+
+  return (
+    <div className="filter-bar">
+      {/* Price Range */}
+      <div className="filter-section">
+        <h3>Price Range</h3>
+        <input
+          type="number"
+          placeholder="Min"
+          value={filters.minPrice || ''}
+          onChange={(e) => setFilters({ ...filters, minPrice: e.target.value ? Number(e.target.value) : undefined })}
+        />
+        <input
+          type="number"
+          placeholder="Max"
+          value={filters.maxPrice || ''}
+          onChange={(e) => setFilters({ ...filters, maxPrice: e.target.value ? Number(e.target.value) : undefined })}
+        />
+      </div>
+
+      {/* Condition */}
+      <div className="filter-section">
+        <h3>Condition</h3>
+        <select
+          value={filters.condition || ''}
+          onChange={(e) => setFilters({ ...filters, condition: e.target.value })}
+        >
+          <option value="">All</option>
+          <option value="New">New</option>
+          <option value="Used">Used</option>
+        </select>
+      </div>
+
+      {/* Tags/Categories */}
+      <div className="filter-section">
+        <h3>Categories</h3>
+        <div className="tag-buttons">
+          {TAGS.map(tag => (
+            <button
+              key={tag}
+              className={filters.tags?.includes(tag) ? 'active' : ''}
+              onClick={() => handleTagToggle(tag)}
+            >
+              {tag}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Sorting */}
+      <div className="filter-section">
+        <h3>Sort By</h3>
+        <select
+          value={filters.sortBy || 'timeCreated'}
+          onChange={(e) => setFilters({ ...filters, sortBy: e.target.value })}
+        >
+          <option value="timeCreated">Date Posted</option>
+          <option value="price">Price</option>
+        </select>
+        
+        <select
+          value={filters.order || 'desc'}
+          onChange={(e) => setFilters({ ...filters, order: e.target.value })}
+        >
+          <option value="desc">
+            {filters.sortBy === 'price' ? 'High to Low' : 
+             filters.sortBy === 'timeCreated' ? 'Newest First' : 'Descending'}
+          </option>
+          <option value="asc">
+            {filters.sortBy === 'price' ? 'Low to High' : 
+             filters.sortBy === 'timeCreated' ? 'Oldest First' : 'Ascending'}
+          </option>
+        </select>
+      </div>
+
+      <button onClick={clearFilters}>Clear All Filters</button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
index aa40a0f..80d2ee6 100644
--- a/frontend/src/components/SearchBar.tsx
+++ b/frontend/src/components/SearchBar.tsx
@@ -1,50 +1,22 @@
-import { useEffect, useState } from "react";
-import { get } from "src/api/requests";
+import { useState } from "react";
 
 interface Props {
-  setProducts: (products: []) => void;
+  setProducts: (query: string) => void;
   setError: (error: string) => void;
 }
 
 export default function SearchBar({ setProducts, setError }: Props) {
   const [query, setQuery] = useState<string | null>(null);
 
-  useEffect(() => {
-    /*
-     * if query is null, get all products
-     * otherwise get products that match the query
-     */
-    const search = async () => {
-      try {
-        if (query && query.trim().length > 0) {
-          await get(`/api/products/search/${query}`).then((res) => {
-            if (res.ok) {
-              res.json().then((data) => {
-                setProducts(data);
-              });
-            }
-          });
-        } else {
-          await get(`/api/products/`).then((res) => {
-            if (res.ok) {
-              res.json().then((data) => {
-                setProducts(data);
-              });
-            }
-          });
-        }
-      } catch (err) {
-        setError("Unable to display products. Try again later.");
-        console.error(err);
-      }
-    };
-    search();
-  }, [query]);
+  const handleChange = (value: string) => {
+    setQuery(value);
+    setProducts(value);
+  };
 
   return (
     <input
       type="text"
-      onChange={(e) => setQuery(e.target.value)}
+      onChange={(e) => handleChange(e.target.value)}
       placeholder="Search for a product..."
       className="w-full bg-[#F8F8F8] shadow-md p-3 px-6 mx-auto my-2 rounded-3xl"
     />
diff --git a/frontend/src/pages/AddProduct.tsx b/frontend/src/pages/AddProduct.tsx
index bf68a9b..87cdc66 100644
--- a/frontend/src/pages/AddProduct.tsx
+++ b/frontend/src/pages/AddProduct.tsx
@@ -10,8 +10,26 @@ export function AddProduct() {
   const productName = useRef<HTMLInputElement>(null);
   const productPrice = useRef<HTMLInputElement>(null);
   const productDescription = useRef<HTMLTextAreaElement>(null);
+  const productYear = useRef<HTMLSelectElement>(null);
+  const productCategory = useRef<HTMLSelectElement>(null);
+  const productCondition = useRef<HTMLSelectElement>(null);
   const productImages = useRef<HTMLInputElement>(null);
 
+  
+  const currentYear = new Date().getFullYear();
+  const years = Array.from({ length: currentYear - 1950 }, (_, i) => currentYear - i);
+
+
+  const categories = [
+  'Electronics',
+  'School Supplies',
+  'Dorm Essentials',
+  'Furniture',
+  'Clothes',
+  'Miscellaneous'];
+
+  const conditions = ["New", "Used"];
+
   const { user } = useContext(FirebaseContext);
   const [error, setError] = useState<boolean>(false);
   const [fileError, setFileError] = useState<string | null>(null);
@@ -56,7 +74,7 @@ export function AddProduct() {
     setIsSubmitting(true);
     e.preventDefault();
     try {
-      if (productName.current && productPrice.current && productDescription.current && user) {
+      if (productName.current && productPrice.current && productDescription.current && productYear.current && productCategory.current && productCondition.current && user) {
         let images;
         if (productImages.current && productImages.current.files) {
           images = productImages.current.files[0];
@@ -66,6 +84,9 @@ export function AddProduct() {
         body.append("name", productName.current.value);
         body.append("price", productPrice.current.value);
         body.append("description", productDescription.current.value);
+        body.append("year", productYear.current.value);
+        body.append("category", productCategory.current.value);
+        body.append("condition", productCondition.current.value);
         if (user.email) body.append("userEmail", user.email);
 
         if (productImages.current && productImages.current.files) {
@@ -96,6 +117,66 @@ export function AddProduct() {
         <p className="text-3xl text-center font-jetbrains font-medium">Add Product</p>
       </div>
       <form className="max-w-sm mx-auto p-4" onSubmit={handleSubmit}>
+        {/* Images */}
+        <div className="mb-5">
+          <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
+            Images
+          </label>
+          <p className="text-sm text-gray-600 mb-3">Upload up to 10 photos</p>
+
+          {newPreviews.length > 0 && (
+            <div className="text-center mb-4">
+              <div className="inline-flex flex-wrap justify-center gap-2 ">
+                {newPreviews.map((src, idx) => (
+                  <div key={idx} className="relative m-1 w-24 h-24">
+                    <img src={src} className="w-full h-full object-cover rounded-md" />
+                    <button
+                      type="button"
+                      onClick={() => removePreview(idx)}
+                      className="absolute top-0 right-0 bg-red-600 text-white rounded-full text-xs px-1"
+                    >
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <label
+            htmlFor="productImages"
+            className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors"
+          >
+            <div className="flex flex-col items-center justify-center pt-5 pb-6">
+              <svg
+                className="w-10 h-10 mb-3 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+                />
+              </svg>
+              <p className="mb-2 text-sm text-gray-500">
+                <span className="font-semibold">Click to upload</span>
+              </p>
+              <p className="text-xs text-gray-500">PNG or JPG (MAX. 5MB per image)</p>
+            </div>
+            <input
+              name="images"
+              id="productImages"
+              type="file"
+              multiple
+              accept="image/png, image/jpeg"
+              onChange={handleImageChange}
+              ref={productImages}
+              className="hidden"
+            />
+          </label>
+        </div>
         {/* Name */}
         <div className="mb-5">
           <label htmlFor="productName" className="block mb-2 font-medium font-inter text-black">
@@ -146,43 +227,67 @@ export function AddProduct() {
           />
         </div>
 
-        {/* Images */}
+        {/* Year */}
         <div className="mb-5">
-          <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
-            Images
+          <label htmlFor="productYear" className="block mb-2 font-medium font-inter text-black">
+            Year
           </label>
+          <select
+            id="productYear"
+            ref={productYear}
+            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
+            required
+          >
+            <option value="">Select Year</option>
+            {years.map((year) => (
+              <option key={year} value={year}>
+                {year}
+              </option>
+            ))}
+          </select>
+        </div>
 
-          {newPreviews.length > 0 && (
-            <div className="text-center mb-2">
-              <div className="inline-flex flex-wrap justify-center gap-2 ">
-                {newPreviews.map((src, idx) => (
-                  <div key={idx} className="relative m-1 w-24 h-24">
-                    <img src={src} className="w-full h-full object-cover rounded-md" />
-                    <button
-                      type="button"
-                      onClick={() => removePreview(idx)}
-                      className="absolute top-0 right-0 bg-red-600 text-white rounded-full text-xs px-1"
-                    >
-                      ×
-                    </button>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
+        {/* Category */}
+        <div className="mb-5">
+          <label htmlFor="productCategory" className="block mb-2 font-medium font-inter text-black">
+            Category
+          </label>
+          <select
+            id="productCategory"
+            ref={productCategory}
+            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
+            required
+          >
+            <option value="">Select Category</option>
+            {categories.map((category) => (
+              <option key={category} value={category}>
+                {category}
+              </option>
+            ))}
+          </select>
+        </div>
 
-          <input
-            name="images"
-            id="productImages"
-            type="file"
-            multiple
-            accept="image/png, image/jpeg"
-            onChange={handleImageChange}
-            ref={productImages}
+        {/* Condition */}
+        <div className="mb-5">
+          <label htmlFor="productCondition" className="block mb-2 font-medium font-inter text-black">
+            Condition
+          </label>
+          <select
+            id="productCondition"
+            ref={productCondition}
             className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-          />
+            required
+          >
+            <option value="">Select Condition</option>
+            {conditions.map((condition) => (
+              <option key={condition} value={condition}>
+                {condition}
+              </option>
+            ))}
+          </select>
         </div>
 
+
         <div className="flex justify-between gap-3">
           <button
             type="button"
@@ -207,4 +312,4 @@ export function AddProduct() {
       </form>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/EditProduct.tsx b/frontend/src/pages/EditProduct.tsx
index 67f3297..83205f9 100644
--- a/frontend/src/pages/EditProduct.tsx
+++ b/frontend/src/pages/EditProduct.tsx
@@ -14,13 +14,32 @@ export function EditProduct() {
     images: string[];
     userEmail: string;
     description: string;
+    year: number;
+    category: string;
+    condition: string;
   }>();
 
   const productName = useRef<HTMLInputElement>(null);
   const productPrice = useRef<HTMLInputElement>(null);
   const productDescription = useRef<HTMLTextAreaElement>(null);
+  const productYear = useRef<HTMLSelectElement>(null);
+  const productCategory = useRef<HTMLSelectElement>(null);
+  const productCondition = useRef<HTMLSelectElement>(null);
   const productImages = useRef<HTMLInputElement>(null);
 
+  const currentYear = new Date().getFullYear();
+  const years = Array.from({ length: currentYear - 1950 }, (_, i) => currentYear - i);
+
+  const categories = [
+  'Electronics',
+  'School Supplies',
+  'Dorm Essentials',
+  'Furniture',
+  'Clothes',
+  'Miscellaneous'];
+
+  const conditions = ["New", "Used"];
+
   const [existingImages, setExistingImages] = useState<string[]>([]);
   const [newFiles, setNewFiles] = useState<File[]>([]);
   const [newPreviews, setNewPreviews] = useState<string[]>([]);
@@ -78,11 +97,22 @@ export function EditProduct() {
   const handleEdit = async (e: FormEvent) => {
     e.preventDefault();
     try {
-      if (productName.current && productPrice.current && productDescription.current && user) {
+      if (
+        productName.current &&
+        productPrice.current &&
+        productDescription.current &&
+        productYear.current &&
+        productCategory.current &&
+        productCondition.current &&
+        user
+      ) {
         const body = new FormData();
         body.append("name", productName.current.value);
         body.append("price", productPrice.current.value);
         body.append("description", productDescription.current.value);
+        body.append("year", productYear.current.value);
+        body.append("category", productCategory.current.value);
+        body.append("condition", productCondition.current.value);
         body.append("userEmail", user.email || "");
 
         // append existing image URLs
@@ -125,6 +155,79 @@ export function EditProduct() {
         <p className="text-3xl text-center font-jetbrains font-medium">Edit Product</p>
       </div>
       <form className="max-w-sm mx-auto p-4" onSubmit={handleEdit}>
+        {/* Images */}
+        <div className="mb-5">
+          <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
+            Images
+          </label>
+          <p className="text-sm text-gray-600 mb-3">Upload up to 10 photos</p>
+
+          {(newPreviews.length > 0 || existingImages.length > 0) && (
+            <div className="inline-flex flex-wrap justify-start gap-2">
+              {existingImages.map((url) => (
+                <div key={url} className="relative m-1 w-24 h-24">
+                  <img src={url} className="w-full h-full object-cover rounded-md" />
+                  <button
+                    type="button"
+                    onClick={() => removeExisting(url)}
+                    className="absolute top-0 right-0 bg-red-600 text-white rounded-full text-xs px-1"
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+
+              {newPreviews.map((src, idx) => (
+                <div key={src} className="relative m-1 w-24 h-24">
+                  <img src={src} className="w-full h-full object-cover rounded-md" />
+                  <button
+                    type="button"
+                    onClick={() => removeNew(idx)}
+                    className="absolute top-0 right-0 bg-red-600 text-white rounded-full text-xs px-1"
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <label
+            htmlFor="productImages"
+            className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors"
+          >
+            <div className="flex flex-col items-center justify-center pt-5 pb-6">
+              <svg
+                className="w-10 h-10 mb-3 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+                />
+              </svg>
+              <p className="mb-2 text-sm text-gray-500">
+                <span className="font-semibold">Click to upload</span>
+              </p>
+              <p className="text-xs text-gray-500">PNG or JPG (MAX. 5MB per image)</p>
+            </div>
+          <input
+            name="images"
+            id="productImages"
+            type="file"
+            multiple
+            accept="image/png, image/jpeg"
+            onChange={handleImageChange}
+            ref={productImages}
+            className="hidden"
+          />
+        </label>
+        </div>
+        
         <div className="mb-5">
           <label htmlFor="productName" className="block mb-2 font-medium font-inter text-black">
             Name
@@ -176,50 +279,66 @@ export function EditProduct() {
         </div>
 
         <div className="mb-5">
-          <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
-            Images
+          <label htmlFor="productYear" className="block mb-2 font-medium font-inter text-black">
+            Year
           </label>
+          <select
+            id="productYear"
+            ref={productYear}
+            key={`year-${product?.year}`}
+            defaultValue={product?.year || ""}
+            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
+            required
+          >
+            <option value="">Select Year</option>
+            {years.map((year) => (
+              <option key={year} value={year}>
+                {year}
+              </option>
+            ))}
+          </select>
+        </div>
 
-          {(newPreviews.length > 0 || existingImages.length > 0) && (
-            <div className="inline-flex flex-wrap justify-start gap-2">
-              {existingImages.map((url) => (
-                <div key={url} className="relative m-1 w-24 h-24">
-                  <img src={url} className="w-full h-full object-cover rounded-md" />
-                  <button
-                    type="button"
-                    onClick={() => removeExisting(url)}
-                    className="absolute top-0 right-0 bg-red-600 text-white rounded-full text-xs px-1"
-                  >
-                    ×
-                  </button>
-                </div>
-              ))}
-
-              {newPreviews.map((src, idx) => (
-                <div key={src} className="relative m-1 w-24 h-24">
-                  <img src={src} className="w-full h-full object-cover rounded-md" />
-                  <button
-                    type="button"
-                    onClick={() => removeNew(idx)}
-                    className="absolute top-0 right-0 bg-red-600 text-white rounded-full text-xs px-1"
-                  >
-                    ×
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
+        <div className="mb-5">
+          <label htmlFor="productCategory" className="block mb-2 font-medium font-inter text-black">
+            Category
+          </label>
+          <select
+            id="productCategory"
+            ref={productCategory}
+            key={`category-${product?.category}`}
+            defaultValue={product?.category || ""}
+            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
+            required
+          >
+            <option value="">Select Category</option>
+            {categories.map((category) => (
+              <option key={category} value={category}>
+                {category}
+              </option>
+            ))}
+          </select>
+        </div>
 
-          <input
-            name="images"
-            id="productImages"
-            type="file"
-            multiple
-            accept="image/png, image/jpeg"
-            onChange={handleImageChange}
-            ref={productImages}
+        <div className="mb-5">
+          <label htmlFor="productCondition" className="block mb-2 font-medium font-inter text-black">
+            Condition
+          </label>
+          <select
+            id="productCondition"
+            ref={productCondition}
+            key={`condition-${product?.condition}`}
+            defaultValue={product?.condition || ""}
             className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-          />
+            required
+          >
+            <option value="">Select Condition</option>
+            {conditions.map((condition) => (
+              <option key={condition} value={condition}>
+                {condition}
+              </option>
+            ))}
+          </select>
         </div>
 
         <div className="flex justify-between gap-3">
@@ -257,4 +376,4 @@ export function EditProduct() {
       </form>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Individual-product-page.tsx b/frontend/src/pages/Individual-product-page.tsx
index a54eb83..a36e59d 100644
--- a/frontend/src/pages/Individual-product-page.tsx
+++ b/frontend/src/pages/Individual-product-page.tsx
@@ -20,6 +20,7 @@ export function IndividualProductPage() {
     images: string[];
     userEmail: string;
     description: string;
+    tags: string[];
   }>();
   const [error, setError] = useState<string>();
   const [hasPermissions, setHasPermissions] = useState<boolean>(false);
@@ -244,6 +245,18 @@ export function IndividualProductPage() {
                   </p>
                 </div>
               )}
+              {product?.tags && (
+                <div className="flex flex-row flex-wrap gap-2 py-4">
+                  {product.tags.map((tag) => (
+                    <div
+                      key={tag}
+                      className="flex items-center gap-2 p-1 px-2 w-fit bg-slate-200 rounded-2xl"
+                    >
+                      <span className="text-sm font-medium">{tag}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
               {!hasPermissions && (
                 <div
                   onMouseEnter={() => setIsHovered(true)}
diff --git a/frontend/src/pages/Marketplace.tsx b/frontend/src/pages/Marketplace.tsx
index a80effd..e1a9fee 100644
--- a/frontend/src/pages/Marketplace.tsx
+++ b/frontend/src/pages/Marketplace.tsx
@@ -2,9 +2,19 @@ import { useState, useEffect, useContext } from "react";
 import { Helmet } from "react-helmet-async";
 import Product from "src/components/Product";
 import SearchBar from "src/components/SearchBar";
+import FilterSort from "src/components/FilterSort";
 import { FirebaseContext } from "src/utils/FirebaseProvider";
 import { get, post } from "src/api/requests";
 
+interface FilterState {
+  minPrice?: number;
+  maxPrice?: number;
+  condition?: "New" | "Used" | "";
+  tags?: string[];
+  sortBy?: "price" | "timeCreated";
+  order?: "asc" | "desc";
+}
+
 export function Marketplace() {
   const [products, setProducts] = useState<
     Array<{
@@ -15,6 +25,13 @@ export function Marketplace() {
     }>
   >([]);
   const [error, setError] = useState<string>("");
+  const [searchQuery, setSearchQuery] = useState<string>(""); 
+  const [filters, setFilters] = useState<FilterState>({
+    sortBy: "timeCreated",
+    order: "desc",
+    tags: [],
+  });
+
   const { user } = useContext(FirebaseContext);
   const [savedProducts, setSavedProducts] = useState<string[]>([]);
 
@@ -44,6 +61,53 @@ export function Marketplace() {
     }
   };
 
+  const fetchProducts = async () => {
+    try {
+      setError("");
+
+      // If there's a search query, use search endpoint
+      if (searchQuery && searchQuery.trim().length > 0) {
+        const res = await get(`/api/products/search/${searchQuery}`);
+        if (res.ok) {
+          const data = await res.json();
+          setProducts(data);
+        } else {
+          setError("Unable to search products. Try again later.");
+        }
+        return;
+      }
+
+      // Otherwise, use filter/sort endpoint
+      const params = new URLSearchParams();
+
+      if (filters.minPrice) params.append("minPrice", filters.minPrice.toString());
+      if (filters.maxPrice) params.append("maxPrice", filters.maxPrice.toString());
+      if (filters.condition) params.append("condition", filters.condition);
+      if (filters.tags && filters.tags.length > 0) {
+        filters.tags.forEach((tag) => params.append("tags", tag));
+      }
+      if (filters.sortBy) params.append("sortBy", filters.sortBy);
+      if (filters.order) params.append("order", filters.order);
+
+      const queryString = params.toString();
+      const res = await get(`/api/products${queryString ? `?${queryString}` : ""}`);
+      
+      if (res.ok) {
+        const data = await res.json();
+        setProducts(data);
+      } else {
+        setError("Unable to display products. Try again later.");
+      }
+    } catch (err) {
+      setError("Unable to display products. Try again later.");
+      console.error(err);
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, [filters, searchQuery]);
+
   useEffect(() => {
     fetchSavedProducts();
   }, [user]);
@@ -64,7 +128,10 @@ export function Marketplace() {
               Add Product
             </button>
           </div>
-          <SearchBar setProducts={setProducts} setError={setError} />
+          <SearchBar setProducts={setSearchQuery} setError={setError} />
+          
+          <FilterSort filters={filters} setFilters={setFilters} />
+
           {error && <p className="max-w-[80%] w-full px-3 pt-3 text-red-800">{error}</p>}
           {!error && products?.length === 0 && (
             <p className="max-w-[80%] font-inter text-lg w-full px-3 pt-3">No products available</p>

From 955dbc1ba04f4d7a451afd0ec21522fc0206c75b Mon Sep 17 00:00:00 2001
From: Taha Qamar <tahaqamar10@gmail.com>
Date: Wed, 4 Feb 2026 18:22:58 -0800
Subject: [PATCH 2/4] fixes bug with searching and filtering at the same time

---
 backend/src/controllers/products.ts | 60 ++++++++++++++++++++++++++++-
 frontend/.env.development           |  3 --
 frontend/src/pages/Marketplace.tsx  | 29 +++++++-------
 3 files changed, 74 insertions(+), 18 deletions(-)
 delete mode 100644 frontend/.env.development

diff --git a/backend/src/controllers/products.ts b/backend/src/controllers/products.ts
index a5da31d..d06153c 100644
--- a/backend/src/controllers/products.ts
+++ b/backend/src/controllers/products.ts
@@ -37,7 +37,7 @@ export const getProducts = async (req: AuthenticatedRequest, res: Response) => {
       filters.condition = condition;
     }
 
-    // Filter by tags
+    // Filter by category
     if(tags) {
       // Handle both single tag and multiple tags
       let tagArray: string[];
@@ -117,7 +117,63 @@ export const getProductById = async (req: AuthenticatedRequest, res: Response) =
 export const getProductsByName = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const query = req.params.query;
-    const products = await ProductModel.find({ name: { $regex: query, $options: "i" } });
+    const { sortBy, order, minPrice, maxPrice, condition, tags } = req.query;
+    
+    // Name is now a filter we can apply
+    const filters: any = {
+      name: { $regex: query, $options: "i" }
+    };
+    
+    // price range 
+    if (minPrice || maxPrice) {
+      filters.price = {};
+      if (minPrice) filters.price.$gte = Number(minPrice);
+      if (maxPrice) filters.price.$lte = Number(maxPrice);
+    }
+
+    // condition
+    if (condition) {
+      filters.condition = condition;
+    }
+
+    // filter by category
+    if (tags) {
+      let tagArray: string[];
+      
+      if (Array.isArray(tags)) {
+        tagArray = tags as string[];
+      } else if (typeof tags === 'string') {
+        tagArray = tags.includes(',') ? tags.split(',').map(t => t.trim()) : [tags];
+      } else {
+        tagArray = [];
+      }
+
+      if (tagArray.length > 0) {
+        filters.tags = { $in: tagArray };
+      }
+    }
+
+    // Creates sorting options
+    const sortOptions: any = {};
+    if (sortBy) {
+      const sortOrder = order === "asc" ? 1 : -1;
+      
+      switch (sortBy) {
+        case "price":
+          sortOptions.price = sortOrder;
+          break;
+        case "timeCreated":
+          sortOptions.timeCreated = sortOrder;
+          break;
+        default:
+          sortOptions.timeCreated = -1;
+      }
+    } else {
+      sortOptions.timeCreated = -1;
+    }
+
+    const products = await ProductModel.find(filters).sort(sortOptions);
+
     if (!products) {
       return res.status(404).json({ message: "Product not found" });
     }
diff --git a/frontend/.env.development b/frontend/.env.development
deleted file mode 100644
index 3cd2602..0000000
--- a/frontend/.env.development
+++ /dev/null
@@ -1,3 +0,0 @@
-# Don't stop the React webpack build if there are lint errors.
-ESLINT_NO_DEV_ERRORS=true
-VITE_API_BASE_URL=http://localhost:5000
diff --git a/frontend/src/pages/Marketplace.tsx b/frontend/src/pages/Marketplace.tsx
index e1a9fee..85f8333 100644
--- a/frontend/src/pages/Marketplace.tsx
+++ b/frontend/src/pages/Marketplace.tsx
@@ -65,19 +65,7 @@ export function Marketplace() {
     try {
       setError("");
 
-      // If there's a search query, use search endpoint
-      if (searchQuery && searchQuery.trim().length > 0) {
-        const res = await get(`/api/products/search/${searchQuery}`);
-        if (res.ok) {
-          const data = await res.json();
-          setProducts(data);
-        } else {
-          setError("Unable to search products. Try again later.");
-        }
-        return;
-      }
-
-      // Otherwise, use filter/sort endpoint
+      // Search a part of filter/sort endpoint
       const params = new URLSearchParams();
 
       if (filters.minPrice) params.append("minPrice", filters.minPrice.toString());
@@ -90,6 +78,21 @@ export function Marketplace() {
       if (filters.order) params.append("order", filters.order);
 
       const queryString = params.toString();
+
+      // Use in case of search with filters
+      if (searchQuery && searchQuery.trim().length > 0) {
+        const res = await get(
+          `/api/products/search/${searchQuery}${queryString ? `?${queryString}` : ""}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          setProducts(data);
+        } else {
+          setError("Unable to search products. Try again later.");
+        }
+        return;
+      }
+
       const res = await get(`/api/products${queryString ? `?${queryString}` : ""}`);
       
       if (res.ok) {

From 6dfecb955682f65d35a6d60fad2e4759103ec890 Mon Sep 17 00:00:00 2001
From: Taha Qamar <tahaqamar10@gmail.com>
Date: Wed, 18 Feb 2026 05:29:31 -0800
Subject: [PATCH 3/4] adds sidebar and filtering/categories dropdown, seperates
 sorting under search bar to match ui

---
 frontend/src/components/FilterSort.tsx | 273 ++++++++++++++++++-------
 frontend/src/pages/Marketplace.tsx     | 138 +++++++++----
 2 files changed, 289 insertions(+), 122 deletions(-)

diff --git a/frontend/src/components/FilterSort.tsx b/frontend/src/components/FilterSort.tsx
index 0cbad05..4f896f4 100644
--- a/frontend/src/components/FilterSort.tsx
+++ b/frontend/src/components/FilterSort.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 interface FilterBarProps {
   filters: any;
@@ -11,101 +11,220 @@ const TAGS = [
   'Dorm Essentials',
   'Furniture',
   'Clothes',
-  'Miscellaneous'
+  'Miscellaneous',
 ];
 
+function Chevron({ open }: { open: boolean }) {
+  return (
+    <svg
+      className={`w-3 h-3 text-gray-400 transition-transform duration-200 shrink-10 ${open ? 'rotate-90' : ''}`}
+      viewBox="0 0 6 10"
+      fill="none"
+    >
+      <path
+        d="M1 1l4 4-4 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function TreeItem({
+  label,
+  isLast,
+  active,
+  onClick,
+  right,
+}: {
+  label: string;
+  isLast?: boolean;
+  active?: boolean;
+  onClick: () => void;
+  right?: React.ReactNode;
+}) {
+  return (
+    <div className="relative">
+      {/* Vertical gold spine — clips at midpoint for last item */}
+      <div
+        className="absolute left-0 w-[2px] bg-ucsd-gold"
+        style={{ top: 0, bottom: isLast ? '50%' : 0 }}
+      />
+      <button
+        onClick={onClick}
+        className="flex items-center w-full text-left py-[5px] pl-5 relative group"
+      >
+        {/* Horizontal gold branch */}
+        <span className="absolute left-[2px] top-1/2 -translate-y-1/2 h-[2px] w-3 bg-ucsd-gold" />
+        <span
+          className={`text-sm flex-1 transition-colors duration-150 ${
+            active
+              ? 'font-semibold text-ucsd-darkblue'
+              : 'text-gray-500 group-hover:text-ucsd-darkblue'
+          }`}
+        >
+          {label}
+        </span>
+        {active && (
+          <span className="w-2 h-2 rounded-full bg-ucsd-gold shrink-0 mr-1" />
+        )}
+        {right}
+      </button>
+    </div>
+  );
+}
+
 export default function FilterBar({ filters, setFilters }: FilterBarProps) {
+  const [categoryOpen, setCategoryOpen] = useState(true);
+  const [filterOpen, setFilterOpen] = useState(true);
+  const [conditionOpen, setConditionOpen] = useState(false);
+  const [priceOpen, setPriceOpen] = useState(false);
+
   const handleTagToggle = (tag: string) => {
     const currentTags = filters.tags || [];
     const newTags = currentTags.includes(tag)
       ? currentTags.filter((t: string) => t !== tag)
       : [...currentTags, tag];
-    
     setFilters({ ...filters, tags: newTags });
   };
 
   const clearFilters = () => {
-    setFilters({
-      sortBy: 'timeCreated',
-      order: 'desc'
-    });
+    setFilters({ sortBy: 'timeCreated', order: 'desc', tags: [] });
   };
 
+  const sectionHeaderClass =
+    'flex items-center gap-2 w-full py-2 hover:opacity-80 transition-opacity';
+  const iconBoxClass =
+    'flex items-center justify-center w-5 h-5 rounded border border-ucsd-blue text-ucsd-blue shrink-0';
+
   return (
-    <div className="filter-bar">
-      {/* Price Range */}
-      <div className="filter-section">
-        <h3>Price Range</h3>
-        <input
-          type="number"
-          placeholder="Min"
-          value={filters.minPrice || ''}
-          onChange={(e) => setFilters({ ...filters, minPrice: e.target.value ? Number(e.target.value) : undefined })}
-        />
-        <input
-          type="number"
-          placeholder="Max"
-          value={filters.maxPrice || ''}
-          onChange={(e) => setFilters({ ...filters, maxPrice: e.target.value ? Number(e.target.value) : undefined })}
-        />
-      </div>
-
-      {/* Condition */}
-      <div className="filter-section">
-        <h3>Condition</h3>
-        <select
-          value={filters.condition || ''}
-          onChange={(e) => setFilters({ ...filters, condition: e.target.value })}
-        >
-          <option value="">All</option>
-          <option value="New">New</option>
-          <option value="Used">Used</option>
-        </select>
-      </div>
-
-      {/* Tags/Categories */}
-      <div className="filter-section">
-        <h3>Categories</h3>
-        <div className="tag-buttons">
-          {TAGS.map(tag => (
-            <button
+    <div className="text-sm font-inter select-none">
+
+      {/* ══ CATEGORY ══ */}
+      <button
+        onClick={() => setCategoryOpen((o) => !o)}
+        className={sectionHeaderClass}
+      >
+        <span className={iconBoxClass}>
+          <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
+            <rect x="0.75" y="0.75" width="7.5" height="7.5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+            <line x1="2.5" y1="4.5" x2="6.5" y2="4.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+            {!categoryOpen && (
+              <line x1="4.5" y1="2.5" x2="4.5" y2="6.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+            )}
+          </svg>
+        </span>
+        <span className="font-bold text-[15px] text-ucsd-darkblue">Category</span>
+        <Chevron open={categoryOpen} />
+      </button>
+
+      {categoryOpen && (
+        <div className="ml-[10px] mt-0.5 mb-4">
+          {TAGS.map((tag, i) => (
+            <TreeItem
               key={tag}
-              className={filters.tags?.includes(tag) ? 'active' : ''}
+              label={tag}
+              isLast={i === TAGS.length - 1}
+              active={filters.tags?.includes(tag)}
               onClick={() => handleTagToggle(tag)}
-            >
-              {tag}
-            </button>
+            />
           ))}
         </div>
-      </div>
-
-      {/* Sorting */}
-      <div className="filter-section">
-        <h3>Sort By</h3>
-        <select
-          value={filters.sortBy || 'timeCreated'}
-          onChange={(e) => setFilters({ ...filters, sortBy: e.target.value })}
-        >
-          <option value="timeCreated">Date Posted</option>
-          <option value="price">Price</option>
-        </select>
-        
-        <select
-          value={filters.order || 'desc'}
-          onChange={(e) => setFilters({ ...filters, order: e.target.value })}
-        >
-          <option value="desc">
-            {filters.sortBy === 'price' ? 'High to Low' : 
-             filters.sortBy === 'timeCreated' ? 'Newest First' : 'Descending'}
-          </option>
-          <option value="asc">
-            {filters.sortBy === 'price' ? 'Low to High' : 
-             filters.sortBy === 'timeCreated' ? 'Oldest First' : 'Ascending'}
-          </option>
-        </select>
-      </div>
-
-      <button onClick={clearFilters}>Clear All Filters</button>
+      )}
+
+      {/* ══ FILTER ══ */}
+      <button
+        onClick={() => setFilterOpen((o) => !o)}
+        className={sectionHeaderClass}
+      >
+        <span className={iconBoxClass}>
+          {/* Funnel / filter icon */}
+          <svg width="11" height="10" viewBox="0 0 11 10" fill="none">
+            <path d="M1 1.5h9M2.5 5h6M4 8.5h3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+          </svg>
+        </span>
+        <span className="font-bold text-[15px] text-ucsd-darkblue">Filter</span>
+        <Chevron open={filterOpen} />
+      </button>
+
+      {filterOpen && (
+        <div className="ml-[10px] mt-0.5 mb-3">
+
+          {/* Condition */}
+          <TreeItem
+            label="Condition"
+            isLast={false}
+            onClick={() => setConditionOpen((o) => !o)}
+            right={<Chevron open={conditionOpen} />}
+          />
+          {conditionOpen && (
+            <div className="ml-5 mt-1 mb-2">
+              <select
+                className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
+                value={filters.condition || ''}
+                onChange={(e) => setFilters({ ...filters, condition: e.target.value })}
+              >
+                <option value="">All</option>
+                <option value="New">New</option>
+                <option value="Used">Used</option>
+              </select>
+            </div>
+          )}
+
+          {/* Price Range */}
+          <TreeItem
+            label="Price Range"
+            isLast={true}
+            onClick={() => setPriceOpen((o) => !o)}
+            right={<Chevron open={priceOpen} />}
+          />
+            {priceOpen && (
+            <div className="ml-5 mt-1 mb-2 space-y-2">
+
+                {/* Row for Min / Max */}
+                <div className="flex gap-2">
+                <input
+                    className="w-24 border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
+                    type="number"
+                    placeholder="Min"
+                    value={filters.minPrice || ""}
+                    onChange={(e) =>
+                    setFilters({
+                        ...filters,
+                        minPrice: e.target.value ? Number(e.target.value) : undefined,
+                    })
+                    }
+                />
+                <span className="flex justify-between text-xs text-ucsd-gold font-semibold w-52">—</span>
+                <input
+                    className="w-24 border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
+                    type="number"
+                    placeholder="Max"
+                    value={filters.maxPrice || ""}
+                    onChange={(e) =>
+                    setFilters({
+                        ...filters,
+                        maxPrice: e.target.value ? Number(e.target.value) : undefined,
+                    })
+                    }
+                />
+                </div>
+            </div>
+            )}
+
+
+        </div>
+      )}
+
+      {/* Clear Filters */}
+      <button
+        onClick={clearFilters}
+        className="mt-3 text-xs text-gray-400 hover:text-ucsd-blue underline underline-offset-2 transition-colors"
+      >
+        Clear All Filters
+      </button>
     </div>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/pages/Marketplace.tsx b/frontend/src/pages/Marketplace.tsx
index 85f8333..e7068c6 100644
--- a/frontend/src/pages/Marketplace.tsx
+++ b/frontend/src/pages/Marketplace.tsx
@@ -25,7 +25,7 @@ export function Marketplace() {
     }>
   >([]);
   const [error, setError] = useState<string>("");
-  const [searchQuery, setSearchQuery] = useState<string>(""); 
+  const [searchQuery, setSearchQuery] = useState<string>("");
   const [filters, setFilters] = useState<FilterState>({
     sortBy: "timeCreated",
     order: "desc",
@@ -65,9 +65,7 @@ export function Marketplace() {
     try {
       setError("");
 
-      // Search a part of filter/sort endpoint
       const params = new URLSearchParams();
-
       if (filters.minPrice) params.append("minPrice", filters.minPrice.toString());
       if (filters.maxPrice) params.append("maxPrice", filters.maxPrice.toString());
       if (filters.condition) params.append("condition", filters.condition);
@@ -79,14 +77,12 @@ export function Marketplace() {
 
       const queryString = params.toString();
 
-      // Use in case of search with filters
       if (searchQuery && searchQuery.trim().length > 0) {
         const res = await get(
           `/api/products/search/${searchQuery}${queryString ? `?${queryString}` : ""}`
         );
         if (res.ok) {
-          const data = await res.json();
-          setProducts(data);
+          setProducts(await res.json());
         } else {
           setError("Unable to search products. Try again later.");
         }
@@ -94,10 +90,8 @@ export function Marketplace() {
       }
 
       const res = await get(`/api/products${queryString ? `?${queryString}` : ""}`);
-      
       if (res.ok) {
-        const data = await res.json();
-        setProducts(data);
+        setProducts(await res.json());
       } else {
         setError("Unable to display products. Try again later.");
       }
@@ -107,57 +101,111 @@ export function Marketplace() {
     }
   };
 
-  useEffect(() => {
-    fetchProducts();
-  }, [filters, searchQuery]);
-
-  useEffect(() => {
-    fetchSavedProducts();
-  }, [user]);
+  useEffect(() => { fetchProducts(); }, [filters, searchQuery]);
+  useEffect(() => { fetchSavedProducts(); }, [user]);
 
   return (
     <>
       <Helmet>
         <title>Low-Price Center Marketplace</title>
       </Helmet>
-      <main className="w-full flex justify-center items-center mt-12 mb-20">
-        <div className="max-w-[80%] w-full">
-          <div id="grid-header" className="flex justify-between flex-wrap mb-2 px-3">
-            <p className="text-lg sm:text-3xl font-jetbrains font-medium">Marketplace</p>
+
+      <main className="w-full flex justify-center mt-12 mb-20">
+        <div className="w-full max-w-[1300px] px-4">
+
+          {/* ── Page header ── */}
+          <div className="flex justify-between items-center mb-8">
+            <p className="text-3xl font-jetbrains font-medium text-ucsd-darkblue">
+              Marketplace
+            </p>
             <button
-              className="bg-[#00629B] text-white text-[0.6rem] font-inter font-semibold px-1 py-2 sm:text-base sm:px-4 shadow-lg hover:brightness-90 transition-all"
+              className="bg-ucsd-blue text-white font-inter font-semibold px-5 py-2 rounded-xl shadow-md hover:brightness-90 transition"
               onClick={() => (window.location.href = "/add-product")}
             >
               Add Product
             </button>
           </div>
-          <SearchBar setProducts={setSearchQuery} setError={setError} />
-          
-          <FilterSort filters={filters} setFilters={setFilters} />
-
-          {error && <p className="max-w-[80%] w-full px-3 pt-3 text-red-800">{error}</p>}
-          {!error && products?.length === 0 && (
-            <p className="max-w-[80%] font-inter text-lg w-full px-3 pt-3">No products available</p>
-          )}
-          <div
-            id="grid"
-            className="grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 xxl:grid-cols-4"
-          >
-            {products.map((product) => (
-              <div key={product._id} className="px-3 py-3">
-                <Product
-                  productId={product._id}
-                  productName={product.name}
-                  productPrice={product.price}
-                  productImages={product.images ? product.images : []}
-                  isSaved={savedProducts.includes(product._id)}
-                  onSaveToggle={handleSaveToggle}
-                />
+
+          {/* ── White card ── */}
+          <div className="bg-white rounded-3xl shadow-lg p-8 flex gap-8">
+
+            {/* LEFT SIDEBAR */}
+            <div className="w-[220px] shrink-0 border-r-2 border-ucsd-gold pr-6">
+              <FilterSort filters={filters} setFilters={setFilters} />
+            </div>
+
+            {/* RIGHT CONTENT */}
+            <div className="flex-1 min-w-0 flex flex-col gap-5">
+
+              {/* Search + Sort row */}
+              <div className="flex items-center gap-3">
+                {/* SearchBar expands to fill space */}
+                <div className="flex-1">
+                  <SearchBar setProducts={setSearchQuery} setError={setError} />
+                </div>
+
+                {/* Sort controls */}
+                <div className="flex items-center gap-2 shrink-0">
+                  <span className="text-sm font-inter text-gray-500 whitespace-nowrap">
+                    Sort:
+                  </span>
+                  <select
+                    className="border border-gray-200 rounded-lg px-3 py-[7px] text-sm font-inter bg-white
+                               focus:ring-2 focus:ring-ucsd-blue focus:border-ucsd-blue outline-none cursor-pointer"
+                    value={filters.sortBy || "timeCreated"}
+                    onChange={(e) =>
+                      setFilters({ ...filters, sortBy: e.target.value as "price" | "timeCreated" })
+                    }
+                  >
+                    <option value="timeCreated">Featured</option>
+                    <option value="price">Price</option>
+                  </select>
+
+                  <select
+                    className="border border-gray-200 rounded-lg px-3 py-[7px] text-sm font-inter bg-white
+                               focus:ring-2 focus:ring-ucsd-blue focus:border-ucsd-blue outline-none cursor-pointer"
+                    value={filters.order || "desc"}
+                    onChange={(e) =>
+                      setFilters({ ...filters, order: e.target.value as "asc" | "desc" })
+                    }
+                  >
+                    <option value="desc">
+                      {filters.sortBy === "price" ? "High to Low" : "Newest First"}
+                    </option>
+                    <option value="asc">
+                      {filters.sortBy === "price" ? "Low to High" : "Oldest First"}
+                    </option>
+                  </select>
+                </div>
               </div>
-            ))}
+
+              {/* Status messages */}
+              {error && (
+                <p className="text-red-500 text-sm font-inter">{error}</p>
+              )}
+              {!error && products?.length === 0 && (
+                <p className="font-inter text-gray-400">No products available</p>
+              )}
+
+              {/* Product grid */}
+              <div className="grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 xxl:grid-cols-4 gap-6">
+                {products.map((product) => (
+                  <Product
+                    key={product._id}
+                    productId={product._id}
+                    productName={product.name}
+                    productPrice={product.price}
+                    productImages={product.images || []}
+                    isSaved={savedProducts.includes(product._id)}
+                    onSaveToggle={handleSaveToggle}
+                  />
+                ))}
+              </div>
+
+            </div>
           </div>
         </div>
       </main>
     </>
   );
-}
+}
\ No newline at end of file

From 79936a4f2f924a98e524cc0bb40edced81a7b4a3 Mon Sep 17 00:00:00 2001
From: Taha Qamar <tahaqamar10@gmail.com>
Date: Wed, 18 Feb 2026 15:09:28 -0800
Subject: [PATCH 4/4] fixes sidebar and adds LowPriceCenter, changed colors to
 match figma design in config file

---
 frontend/src/components/FilterSort.tsx     | 327 ++++++++++-----------
 frontend/src/components/FilterSort_old.tsx | 232 +++++++++++++++
 frontend/src/pages/Marketplace.tsx         | 102 ++++---
 frontend/tailwind.config.js                |   8 +-
 4 files changed, 459 insertions(+), 210 deletions(-)
 create mode 100644 frontend/src/components/FilterSort_old.tsx

diff --git a/frontend/src/components/FilterSort.tsx b/frontend/src/components/FilterSort.tsx
index 4f896f4..9fd5317 100644
--- a/frontend/src/components/FilterSort.tsx
+++ b/frontend/src/components/FilterSort.tsx
@@ -14,65 +14,27 @@ const TAGS = [
   'Miscellaneous',
 ];
 
-function Chevron({ open }: { open: boolean }) {
+function Chevron({ open, className = '' }: { open: boolean; className?: string }) {
   return (
     <svg
-      className={`w-3 h-3 text-gray-400 transition-transform duration-200 shrink-10 ${open ? 'rotate-90' : ''}`}
-      viewBox="0 0 6 10"
+      className={`w-3.5 h-3.5 transition-transform duration-200 shrink-0 ${open ? 'rotate-180' : ''} ${className}`}
+      viewBox="0 0 12 12"
       fill="none"
     >
-      <path
-        d="M1 1l4 4-4 4"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
 }
 
-function TreeItem({
-  label,
-  isLast,
-  active,
-  onClick,
-  right,
-}: {
-  label: string;
-  isLast?: boolean;
-  active?: boolean;
-  onClick: () => void;
-  right?: React.ReactNode;
-}) {
+function RightChevron({ className = '' }: { className?: string }) {
   return (
-    <div className="relative">
-      {/* Vertical gold spine — clips at midpoint for last item */}
-      <div
-        className="absolute left-0 w-[2px] bg-ucsd-gold"
-        style={{ top: 0, bottom: isLast ? '50%' : 0 }}
-      />
-      <button
-        onClick={onClick}
-        className="flex items-center w-full text-left py-[5px] pl-5 relative group"
-      >
-        {/* Horizontal gold branch */}
-        <span className="absolute left-[2px] top-1/2 -translate-y-1/2 h-[2px] w-3 bg-ucsd-gold" />
-        <span
-          className={`text-sm flex-1 transition-colors duration-150 ${
-            active
-              ? 'font-semibold text-ucsd-darkblue'
-              : 'text-gray-500 group-hover:text-ucsd-darkblue'
-          }`}
-        >
-          {label}
-        </span>
-        {active && (
-          <span className="w-2 h-2 rounded-full bg-ucsd-gold shrink-0 mr-1" />
-        )}
-        {right}
-      </button>
-    </div>
+    <svg
+      className={`w-3.5 h-3.5 shrink-0 ${className}`}
+      viewBox="0 0 12 12"
+      fill="none"
+    >
+      <path d="M4 2l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
   );
 }
 
@@ -80,7 +42,7 @@ export default function FilterBar({ filters, setFilters }: FilterBarProps) {
   const [categoryOpen, setCategoryOpen] = useState(true);
   const [filterOpen, setFilterOpen] = useState(true);
   const [conditionOpen, setConditionOpen] = useState(false);
-  const [priceOpen, setPriceOpen] = useState(false);
+  const [priceOpen, setPriceOpen] = useState(true);
 
   const handleTagToggle = (tag: string) => {
     const currentTags = filters.tags || [];
@@ -94,134 +56,169 @@ export default function FilterBar({ filters, setFilters }: FilterBarProps) {
     setFilters({ sortBy: 'timeCreated', order: 'desc', tags: [] });
   };
 
-  const sectionHeaderClass =
-    'flex items-center gap-2 w-full py-2 hover:opacity-80 transition-opacity';
-  const iconBoxClass =
-    'flex items-center justify-center w-5 h-5 rounded border border-ucsd-blue text-ucsd-blue shrink-0';
-
   return (
-    <div className="text-sm font-inter select-none">
+    <div className="font-inter select-none text-ucsd-darkblue">
 
       {/* ══ CATEGORY ══ */}
-      <button
-        onClick={() => setCategoryOpen((o) => !o)}
-        className={sectionHeaderClass}
-      >
-        <span className={iconBoxClass}>
-          <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
-            <rect x="0.75" y="0.75" width="7.5" height="7.5" rx="1" stroke="currentColor" strokeWidth="1.2" />
-            <line x1="2.5" y1="4.5" x2="6.5" y2="4.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-            {!categoryOpen && (
-              <line x1="4.5" y1="2.5" x2="4.5" y2="6.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-            )}
-          </svg>
-        </span>
-        <span className="font-bold text-[15px] text-ucsd-darkblue">Category</span>
-        <Chevron open={categoryOpen} />
-      </button>
-
-      {categoryOpen && (
-        <div className="ml-[10px] mt-0.5 mb-4">
-          {TAGS.map((tag, i) => (
-            <TreeItem
-              key={tag}
-              label={tag}
-              isLast={i === TAGS.length - 1}
-              active={filters.tags?.includes(tag)}
-              onClick={() => handleTagToggle(tag)}
-            />
-          ))}
-        </div>
-      )}
+      <div className="mb-6">
+        <button
+          onClick={() => setCategoryOpen((o) => !o)}
+          className="flex items-center gap-2 w-full py-1 group"
+        >
+          {/* Box icon matching mockup */}
+          <span className="flex items-center justify-center w-5 h-5 rounded border-2 border-ucsd-blue text-ucsd-blue shrink-0">
+            <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
+              <rect x="0.75" y="0.75" width="7.5" height="7.5" rx="1" stroke="currentColor" strokeWidth="1.3" />
+              <line x1="2.5" y1="4.5" x2="6.5" y2="4.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+              {!categoryOpen && (
+                <line x1="4.5" y1="2.5" x2="4.5" y2="6.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+              )}
+            </svg>
+          </span>
+          <span className="font-bold text-base text-ucsd-darkblue">Category</span>
+          <Chevron open={categoryOpen} className="text-gray-400 ml-1" />
+        </button>
+
+        {categoryOpen && (
+          <div className="relative mt-2 ml-[10px]">
+            {/* Continuous gold vertical spine */}
+            <div className="absolute left-0 top-0 bottom-0 w-[1px] bg-ucsd-gold rounded-full" />
+
+            {TAGS.map((tag, i) => {
+              const active = filters.tags?.includes(tag);
+              const isLast = i === TAGS.length - 1;
+              return (
+                <div key={tag} className="relative">
+                  {/* Clip spine past midpoint of last row */}
+                  {isLast && (
+                    <div className="absolute left-0 bottom-0 w-[3px] bg-white" style={{ top: '50%' }} />
+                  )}
+                  <button
+                    onClick={() => handleTagToggle(tag)}
+                    className="flex items-center w-full text-left py-[5px] pl-5 group"
+                  >
+                    {/* Horizontal gold branch */}
+                    <span className="absolute left-[1px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-ucsd-gold" />
+                    <span
+                      className={`text-[13.5px] transition-colors ${
+                        active
+                          ? 'font-semibold text-ucsd-darkblue'
+                          : 'text-gray-500 group-hover:text-ucsd-darkblue'
+                      }`}
+                    >
+                      {tag}
+                    </span>
+                    {active && (
+                      <span className="ml-auto mr-0.5 w-1.5 h-1.5 rounded-full bg-ucsd-gold shrink-0" />
+                    )}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
 
       {/* ══ FILTER ══ */}
-      <button
-        onClick={() => setFilterOpen((o) => !o)}
-        className={sectionHeaderClass}
-      >
-        <span className={iconBoxClass}>
-          {/* Funnel / filter icon */}
-          <svg width="11" height="10" viewBox="0 0 11 10" fill="none">
-            <path d="M1 1.5h9M2.5 5h6M4 8.5h3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
-          </svg>
-        </span>
-        <span className="font-bold text-[15px] text-ucsd-darkblue">Filter</span>
-        <Chevron open={filterOpen} />
-      </button>
+      <div>
+        <button
+          onClick={() => setFilterOpen((o) => !o)}
+          className="flex items-center gap-2 w-full py-1 group"
+        >
+          {/* Funnel icon */}
+          <span className="flex items-center justify-center w-5 h-5 rounded border-2 border-ucsd-blue text-ucsd-blue shrink-0">
+            <svg width="11" height="10" viewBox="0 0 11 10" fill="none">
+              <path d="M1 1.5h9M2.5 5h6M4 8.5h3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+            </svg>
+          </span>
+          <span className="font-bold text-base text-ucsd-darkblue">Filter</span>
+          <Chevron open={filterOpen} className="text-gray-400 ml-1" />
+        </button>
+
+        {filterOpen && (
+          <div className="relative mt-2 ml-[10px]">
+            {/* Gold spine — only covers the two items, clipped at last */}
+            <div
+              className="absolute left-0 w-[1px] bg-ucsd-gold rounded-full"
+              style={{ top: 0, bottom: priceOpen ? 0 : '20%' }}
+            />
 
-      {filterOpen && (
-        <div className="ml-[10px] mt-0.5 mb-3">
-
-          {/* Condition */}
-          <TreeItem
-            label="Condition"
-            isLast={false}
-            onClick={() => setConditionOpen((o) => !o)}
-            right={<Chevron open={conditionOpen} />}
-          />
-          {conditionOpen && (
-            <div className="ml-5 mt-1 mb-2">
-              <select
-                className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
-                value={filters.condition || ''}
-                onChange={(e) => setFilters({ ...filters, condition: e.target.value })}
+            {/* Condition */}
+            <div className="relative">
+              <button
+                onClick={() => setConditionOpen((o) => !o)}
+                className="flex items-center w-full text-left py-[5px] pl-5 group"
               >
-                <option value="">All</option>
-                <option value="New">New</option>
-                <option value="Used">Used</option>
-              </select>
-            </div>
-          )}
-
-          {/* Price Range */}
-          <TreeItem
-            label="Price Range"
-            isLast={true}
-            onClick={() => setPriceOpen((o) => !o)}
-            right={<Chevron open={priceOpen} />}
-          />
-            {priceOpen && (
-            <div className="ml-5 mt-1 mb-2 space-y-2">
-
-                {/* Row for Min / Max */}
-                <div className="flex gap-2">
-                <input
-                    className="w-24 border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
-                    type="number"
-                    placeholder="Min"
-                    value={filters.minPrice || ""}
-                    onChange={(e) =>
-                    setFilters({
-                        ...filters,
-                        minPrice: e.target.value ? Number(e.target.value) : undefined,
-                    })
-                    }
-                />
-                <span className="flex justify-between text-xs text-ucsd-gold font-semibold w-52">—</span>
-                <input
-                    className="w-24 border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
-                    type="number"
-                    placeholder="Max"
-                    value={filters.maxPrice || ""}
-                    onChange={(e) =>
-                    setFilters({
-                        ...filters,
-                        maxPrice: e.target.value ? Number(e.target.value) : undefined,
-                    })
-                    }
-                />
+                <span className="absolute left-[1px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-ucsd-gold" />
+                <span className="text-[13.5px] text-gray-500 group-hover:text-ucsd-darkblue flex-1">
+                  Condition
+                </span>
+                <RightChevron className="text-gray-400 mr-1" />
+              </button>
+              {conditionOpen && (
+                <div className="ml-5 mt-1 mb-2">
+                  <select
+                    className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
+                    value={filters.condition || ''}
+                    onChange={(e) => setFilters({ ...filters, condition: e.target.value })}
+                  >
+                    <option value="">All</option>
+                    <option value="New">New</option>
+                    <option value="Used">Used</option>
+                  </select>
                 </div>
+              )}
             </div>
-            )}
 
-
-        </div>
-      )}
+            {/* Price Range */}
+            <div className="relative">
+              {/* Clip gold spine after midpoint */}
+              <div className="absolute left-0 w-[1px] bg-white" style={{ top: '50%', bottom: 0 }} />
+              <button
+                onClick={() => setPriceOpen((o) => !o)}
+                className="flex items-center w-full text-left py-[5px] pl-5 group"
+              >
+                <span className="absolute left-[1px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-ucsd-gold" />
+                <span className="text-[13.5px] text-gray-500 group-hover:text-ucsd-darkblue flex-1">
+                  Price Range
+                </span>
+                <Chevron open={priceOpen} className="text-gray-400 mr-1" />
+              </button>
+              {priceOpen && (
+                <div className="ml-5 mt-2 mb-1">
+                  {/* Min — Max inline like mockup */}
+                  <div className="flex items-center gap-2">
+                    <input
+                      className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
+                      type="number"
+                      placeholder="Min"
+                      value={filters.minPrice || ''}
+                      onChange={(e) =>
+                        setFilters({ ...filters, minPrice: e.target.value ? Number(e.target.value) : undefined })
+                      }
+                    />
+                    <span className="text-ucsd-gold font-bold shrink-0">—</span>
+                    <input
+                      className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
+                      type="number"
+                      placeholder="Max"
+                      value={filters.maxPrice || ''}
+                      onChange={(e) =>
+                        setFilters({ ...filters, maxPrice: e.target.value ? Number(e.target.value) : undefined })
+                      }
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
 
       {/* Clear Filters */}
       <button
         onClick={clearFilters}
-        className="mt-3 text-xs text-gray-400 hover:text-ucsd-blue underline underline-offset-2 transition-colors"
+        className="mt-7 text-xs text-gray-400 hover:text-ucsd-blue underline underline-offset-2 transition-colors"
       >
         Clear All Filters
       </button>
diff --git a/frontend/src/components/FilterSort_old.tsx b/frontend/src/components/FilterSort_old.tsx
new file mode 100644
index 0000000..117ec48
--- /dev/null
+++ b/frontend/src/components/FilterSort_old.tsx
@@ -0,0 +1,232 @@
+import React, { useState } from 'react';
+
+interface FilterBarProps {
+  filters: any;
+  setFilters: (filters: any) => void;
+}
+
+const TAGS = [
+  'Electronics',
+  'School Supplies',
+  'Dorm Essentials',
+  'Furniture',
+  'Clothes',
+  'Miscellaneous',
+];
+
+function Chevron({ open }: { open: boolean }) {
+  return (
+    <svg
+      className={`w-3 h-3 text-gray-400 transition-transform duration-200 shrink-10 ${open ? 'rotate-90' : ''}`}
+      viewBox="0 0 6 10"
+      fill="none"
+    >
+      <path
+        d="M1 1l4 4-4 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function TreeItem({
+  label,
+  isLast,
+  active,
+  onClick,
+  right,
+}: {
+  label: string;
+  isLast?: boolean;
+  active?: boolean;
+  onClick: () => void;
+  right?: React.ReactNode;
+}) {
+  return (
+    <div className="relative">
+      {/* Vertical gold spine — clips at midpoint for last item */}
+      <div
+        className="absolute left-0 w-[1px] bg-ucsd-gold"
+        style={{ top: 0, bottom: isLast ? '50%' : 0 }}
+      />
+      <button
+        onClick={onClick}
+        className="flex items-center w-full text-left py-[5px] pl-5 relative group"
+      >
+        {/* Horizontal gold branch */}
+        <span className="absolute left-[1px] top-1/2 -translate-y-1/2 h-[1px] w-3 bg-ucsd-gold" />
+        <span
+          className={`text-sm flex-1 transition-colors duration-150 ${
+            active
+              ? 'font-semibold text-ucsd-darkblue'
+              : 'text-gray-500 group-hover:text-ucsd-darkblue'
+          }`}
+        >
+          {label}
+        </span>
+        {active && (
+          <span className="w-2 h-2 rounded-full bg-ucsd-gold shrink-0 mr-1" />
+        )}
+        {right}
+      </button>
+    </div>
+  );
+}
+
+export default function FilterBar({ filters, setFilters }: FilterBarProps) {
+  const [categoryOpen, setCategoryOpen] = useState(true);
+  const [filterOpen, setFilterOpen] = useState(true);
+  const [conditionOpen, setConditionOpen] = useState(false);
+  const [priceOpen, setPriceOpen] = useState(false);
+
+  const handleTagToggle = (tag: string) => {
+    const currentTags = filters.tags || [];
+    const newTags = currentTags.includes(tag)
+      ? currentTags.filter((t: string) => t !== tag)
+      : [...currentTags, tag];
+    setFilters({ ...filters, tags: newTags });
+  };
+
+  const clearFilters = () => {
+    setFilters({ sortBy: 'timeCreated', order: 'desc', tags: [] });
+  };
+
+  const sectionHeaderClass =
+    'flex items-center gap-2 w-full py-2 hover:opacity-80 transition-opacity';
+  const iconBoxClass =
+    'flex items-center justify-center w-5 h-5 rounded border border-ucsd-blue text-ucsd-blue shrink-0';
+
+  return (
+    <div className="text-sm font-inter select-none">
+
+      {/* ══ CATEGORY ══ */}
+      <button
+        onClick={() => setCategoryOpen((o) => !o)}
+        className={sectionHeaderClass}
+      >
+        <span className={iconBoxClass}>
+          <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
+            <rect x="0.75" y="0.75" width="7.5" height="7.5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+            <line x1="2.5" y1="4.5" x2="6.5" y2="4.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+            {!categoryOpen && (
+              <line x1="4.5" y1="2.5" x2="4.5" y2="6.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+            )}
+          </svg>
+        </span>
+        <span className="font-bold text-[15px] text-ucsd-darkblue">Category</span>
+        <Chevron open={categoryOpen} />
+      </button>
+
+      {categoryOpen && (
+        <div className="ml-[10px] mt-0.5 mb-4">
+          {TAGS.map((tag, i) => (
+            <TreeItem
+              key={tag}
+              label={tag}
+              isLast={i === TAGS.length - 1}
+              active={filters.tags?.includes(tag)}
+              onClick={() => handleTagToggle(tag)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* ══ FILTER ══ */}
+      <button
+        onClick={() => setFilterOpen((o) => !o)}
+        className={sectionHeaderClass}
+      >
+        <span className={iconBoxClass}>
+          {/* Funnel / filter icon */}
+          <svg width="11" height="10" viewBox="0 0 11 10" fill="none">
+            <path d="M1 1.5h9M2.5 5h6M4 8.5h3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+          </svg>
+        </span>
+        <span className="font-bold text-[15px] text-ucsd-darkblue">Filter</span>
+        <Chevron open={filterOpen} />
+      </button>
+
+      {filterOpen && (
+        <div className="ml-[10px] mt-0.5 mb-3">
+
+          {/* Condition */}
+          <TreeItem
+            label="Condition"
+            isLast={false}
+            onClick={() => setConditionOpen((o) => !o)}
+            right={<Chevron open={conditionOpen} />}
+          />
+          {conditionOpen && (
+            <div className="ml-5 mt-1 mb-2">
+              <select
+                className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
+                value={filters.condition || ''}
+                onChange={(e) => setFilters({ ...filters, condition: e.target.value })}
+              >
+                <option value="">All</option>
+                <option value="New">New</option>
+                <option value="Used">Used</option>
+              </select>
+            </div>
+          )}
+
+          {/* Price Range */}
+          <TreeItem
+            label="Price Range"
+            isLast={true}
+            onClick={() => setPriceOpen((o) => !o)}
+            right={<Chevron open={priceOpen} />}
+          />
+            {priceOpen && (
+            <div className="ml-5 mt-1 mb-2 space-y-2">
+
+                {/* Row for Min / Max */}
+                <div className="flex gap-2">
+                <input
+                    className="w-24 border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
+                    type="number"
+                    placeholder="Min"
+                    value={filters.minPrice || ""}
+                    onChange={(e) =>
+                    setFilters({
+                        ...filters,
+                        minPrice: e.target.value ? Number(e.target.value) : undefined,
+                    })
+                    }
+                />
+                <span className="flex justify-between text-xs text-ucsd-gold font-semibold w-52">—</span>
+                <input
+                    className="w-24 border border-gray-200 rounded-lg px-2 py-1.5 text-sm focus:ring-2 focus:ring-ucsd-blue outline-none"
+                    type="number"
+                    placeholder="Max"
+                    value={filters.maxPrice || ""}
+                    onChange={(e) =>
+                    setFilters({
+                        ...filters,
+                        maxPrice: e.target.value ? Number(e.target.value) : undefined,
+                    })
+                    }
+                />
+                </div>
+
+            </div>
+            )}
+
+
+        </div>
+      )}
+
+      {/* Clear Filters */}
+      <button
+        onClick={clearFilters}
+        className="mt-3 text-xs text-gray-400 hover:text-ucsd-blue underline underline-offset-2 transition-colors"
+      >
+        Clear All Filters
+      </button>
+    </div>
+  );
+}
+
diff --git a/frontend/src/pages/Marketplace.tsx b/frontend/src/pages/Marketplace.tsx
index e7068c6..07e376b 100644
--- a/frontend/src/pages/Marketplace.tsx
+++ b/frontend/src/pages/Marketplace.tsx
@@ -113,8 +113,8 @@ export function Marketplace() {
       <main className="w-full flex justify-center mt-12 mb-20">
         <div className="w-full max-w-[1300px] px-4">
 
-          {/* ── Page header ── */}
-          <div className="flex justify-between items-center mb-8">
+          {/* Outer page header: Marketplace title + Add Product */}
+          <div className="flex justify-between items-center mb-6">
             <p className="text-3xl font-jetbrains font-medium text-ucsd-darkblue">
               Marketplace
             </p>
@@ -127,30 +127,32 @@ export function Marketplace() {
           </div>
 
           {/* ── White card ── */}
-          <div className="bg-white rounded-3xl shadow-lg p-8 flex gap-8">
-
-            {/* LEFT SIDEBAR */}
-            <div className="w-[220px] shrink-0 border-r-2 border-ucsd-gold pr-6">
-              <FilterSort filters={filters} setFilters={setFilters} />
-            </div>
-
-            {/* RIGHT CONTENT */}
-            <div className="flex-1 min-w-0 flex flex-col gap-5">
+          <div className="bg-white rounded-3xl shadow-lg overflow-hidden">
+
+            {/* ── TOP BANNER ROW ──
+                Left:  "Low Price Center" heading blended into white
+                Right: Search bar + sort controls stacked
+            */}
+            <div className="flex items-start justify-between px-8 pt-7 pb-4">
+
+              {/* Low Price Center — "Low" in ucsd-blue, "Price Center" in ucsd-gold, blended white bg */}
+              <div className="font-jetbrains font-bold leading-tight">
+                <span className="text-4xl text-ucsd-blue">Low </span>
+                <span className="text-4xl text-ucsd-gold">Price Center</span>
+              </div>
 
-              {/* Search + Sort row */}
-              <div className="flex items-center gap-3">
-                {/* SearchBar expands to fill space */}
-                <div className="flex-1">
+              {/* Search bar + sort stacked on the right */}
+              <div className="flex flex-col items-end gap-2 w-[420px] shrink-0">
+                {/* Search bar */}
+                <div className="w-full">
                   <SearchBar setProducts={setSearchQuery} setError={setError} />
                 </div>
 
-                {/* Sort controls */}
-                <div className="flex items-center gap-2 shrink-0">
-                  <span className="text-sm font-inter text-gray-500 whitespace-nowrap">
-                    Sort:
-                  </span>
+                {/* Sort row — right-aligned, underneath search */}
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-inter text-gray-500 whitespace-nowrap">Sort:</span>
                   <select
-                    className="border border-gray-200 rounded-lg px-3 py-[7px] text-sm font-inter bg-white
+                    className="border border-gray-200 rounded-lg px-3 py-[6px] text-sm font-inter bg-white
                                focus:ring-2 focus:ring-ucsd-blue focus:border-ucsd-blue outline-none cursor-pointer"
                     value={filters.sortBy || "timeCreated"}
                     onChange={(e) =>
@@ -162,7 +164,7 @@ export function Marketplace() {
                   </select>
 
                   <select
-                    className="border border-gray-200 rounded-lg px-3 py-[7px] text-sm font-inter bg-white
+                    className="border border-gray-200 rounded-lg px-3 py-[6px] text-sm font-inter bg-white
                                focus:ring-2 focus:ring-ucsd-blue focus:border-ucsd-blue outline-none cursor-pointer"
                     value={filters.order || "desc"}
                     onChange={(e) =>
@@ -178,32 +180,46 @@ export function Marketplace() {
                   </select>
                 </div>
               </div>
+            </div>
+
+            {/* Thin gold divider under the top banner */}
+            <div className="mx-8 border-t border-gray-100" />
 
-              {/* Status messages */}
-              {error && (
-                <p className="text-red-500 text-sm font-inter">{error}</p>
-              )}
-              {!error && products?.length === 0 && (
-                <p className="font-inter text-gray-400">No products available</p>
-              )}
-
-              {/* Product grid */}
-              <div className="grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 xxl:grid-cols-4 gap-6">
-                {products.map((product) => (
-                  <Product
-                    key={product._id}
-                    productId={product._id}
-                    productName={product.name}
-                    productPrice={product.price}
-                    productImages={product.images || []}
-                    isSaved={savedProducts.includes(product._id)}
-                    onSaveToggle={handleSaveToggle}
-                  />
-                ))}
+            {/* ── BOTTOM SECTION: Sidebar | Products ── */}
+            <div className="flex">
+
+              {/* LEFT SIDEBAR — fixed width, gold right border */}
+              <div className="w-[220px] shrink-0 px-6 py-6">
+                <FilterSort filters={filters} setFilters={setFilters} />
+              </div>
+
+              {/* RIGHT: Product grid */}
+              <div className="flex-1 min-w-0 px-8 py-6">
+                {error && (
+                  <p className="text-red-500 text-sm font-inter mb-4">{error}</p>
+                )}
+                {!error && products?.length === 0 && (
+                  <p className="font-inter text-gray-400">No products available</p>
+                )}
+
+                <div className="grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 xxl:grid-cols-4 gap-6">
+                  {products.map((product) => (
+                    <Product
+                      key={product._id}
+                      productId={product._id}
+                      productName={product.name}
+                      productPrice={product.price}
+                      productImages={product.images || []}
+                      isSaved={savedProducts.includes(product._id)}
+                      onSaveToggle={handleSaveToggle}
+                    />
+                  ))}
+                </div>
               </div>
 
             </div>
           </div>
+
         </div>
       </main>
     </>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 1247a45..1d48fea 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -9,9 +9,13 @@ export default {
         xxl: "1300px",
       },
       colors: {
-        "ucsd-blue": "#00629B",
+        // Figma mockup uses different blue
+        // "ucsd-blue": "#00629B",
+        "ucsd-blue": "#0E7395",
         "ucsd-darkblue": "#182B49",
-        "ucsd-gold": "#FFCD00",
+        // Figma mockup uses different gold
+        // "ucsd-gold": "#FFCD00",
+        "ucsd-gold": "#F6AE2D",
       },
       fontFamily: {
         jetbrains: ["JetBrains Mono", "monospace"],