diff --git a/backend/src/controllers/products.ts b/backend/src/controllers/products.ts
index 3c00ae0..d06153c 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 category
+    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 });
@@ -52,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" });
     }
@@ -63,19 +184,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 +224,8 @@ export const addProduct = [
         description,
         userEmail,
         images,
+        condition,
+        tags,
         timeCreated: new Date(),
         timeUpdated: new Date(),
       });
@@ -168,6 +293,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 +314,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/.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/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..85f8333 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,56 @@ export function Marketplace() {
     }
   };
 
+  const fetchProducts = async () => {
+    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);
+      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();
+
+      // 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) {
+        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 +131,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>