From 229af0b73a91fd39c7147b9b0859bacf29a21b83 Mon Sep 17 00:00:00 2001
From: Abas Mohamed <gmuabas2985@gmail.com>
Date: Wed, 21 Jan 2026 22:36:26 -0800
Subject: [PATCH 1/4] Add/edit products with the new properties is working

---
 backend/src/controllers/products.ts           |  10 +-
 backend/src/models/product.ts                 |  16 +++
 frontend/src/components/Product.tsx           |   4 +
 frontend/src/pages/AddProduct.tsx             |  94 ++++++++++++++-
 frontend/src/pages/EditProduct.tsx            | 109 +++++++++++++++++-
 .../src/pages/Individual-product-page.tsx     |  19 +++
 frontend/src/pages/SavedProducts.tsx          |   8 ++
 7 files changed, 255 insertions(+), 5 deletions(-)

diff --git a/backend/src/controllers/products.ts b/backend/src/controllers/products.ts
index 3c00ae0..c97cb44 100644
--- a/backend/src/controllers/products.ts
+++ b/backend/src/controllers/products.ts
@@ -69,12 +69,12 @@ export const addProduct = [
   upload,
   async (req: AuthenticatedRequest, res: Response) => {
     try {
-      const { name, price, description } = req.body;
+      const { name, price, description, year, category, condition, location} = 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 || !year || !category || !condition || !location) {
+        return res.status(400).json({ message: "Name, price, userEmail, year, category, condition, and location are required." });
       }
 
       const images: string[] = [];
@@ -101,6 +101,10 @@ export const addProduct = [
         description,
         userEmail,
         images,
+        year,
+        category,
+        condition,
+        location,
         timeCreated: new Date(),
         timeUpdated: new Date(),
       });
diff --git a/backend/src/models/product.ts b/backend/src/models/product.ts
index ca7386a..d303661 100644
--- a/backend/src/models/product.ts
+++ b/backend/src/models/product.ts
@@ -12,6 +12,22 @@ const productSchema = new Schema({
   description: {
     type: String,
   },
+  year: {
+    type: Number,
+    required: true,
+  },
+  category: {
+    type: String,
+    required: true,
+  },
+  condition: {
+    type: String,
+    required: true,
+  },
+  location: {
+    type: String,
+    required: true,
+  },
   timeCreated: {
     type: Date,
     required: true,
diff --git a/frontend/src/components/Product.tsx b/frontend/src/components/Product.tsx
index 4a5b4b5..a7b6bc2 100644
--- a/frontend/src/components/Product.tsx
+++ b/frontend/src/components/Product.tsx
@@ -10,6 +10,10 @@ interface Props {
   productImages: string[];
   productName: string;
   productPrice: number;
+  productYear: number;
+  productCategory: string;
+  productCondition: string;
+  productLocation: string;
   isSaved?: boolean;
   onSaveToggle?: (productId: string, newSavedStatus: boolean) => void;
 }
diff --git a/frontend/src/pages/AddProduct.tsx b/frontend/src/pages/AddProduct.tsx
index bf68a9b..f28da10 100644
--- a/frontend/src/pages/AddProduct.tsx
+++ b/frontend/src/pages/AddProduct.tsx
@@ -10,8 +10,21 @@ 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 productLocation = useRef<HTMLInputElement>(null);
   const productImages = useRef<HTMLInputElement>(null);
 
+  
+  const currentYear = new Date().getFullYear();
+  const years = Array.from({ length: currentYear - 1950 }, (_, i) => currentYear - i);
+
+  // Placeholder categories (letters for now)
+  const categories = ["A", "B", "C", "D", "E", "F"];
+
+  const conditions = ["New", "Used"];
+
   const { user } = useContext(FirebaseContext);
   const [error, setError] = useState<boolean>(false);
   const [fileError, setFileError] = useState<string | null>(null);
@@ -56,7 +69,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 && productLocation.current && user) {
         let images;
         if (productImages.current && productImages.current.files) {
           images = productImages.current.files[0];
@@ -66,6 +79,10 @@ 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);
+        body.append("location", productLocation.current.value);
         if (user.email) body.append("userEmail", user.email);
 
         if (productImages.current && productImages.current.files) {
@@ -146,6 +163,81 @@ export function AddProduct() {
           />
         </div>
 
+        {/* Year */}
+        <div className="mb-5">
+          <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>
+
+        {/* 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>
+
+        {/* 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>
+
+        {/* Location */}
+        <div className="mb-5">
+          <label htmlFor="productLocation" className="block mb-2 font-medium font-inter text-black">
+            Location
+          </label>
+          <input
+            id="productLocation"
+            type="text"
+            ref={productLocation}
+            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
+            placeholder="Location"
+            required
+          />
+        </div>
+
         {/* Images */}
         <div className="mb-5">
           <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
diff --git a/frontend/src/pages/EditProduct.tsx b/frontend/src/pages/EditProduct.tsx
index 67f3297..98e3961 100644
--- a/frontend/src/pages/EditProduct.tsx
+++ b/frontend/src/pages/EditProduct.tsx
@@ -14,13 +14,29 @@ export function EditProduct() {
     images: string[];
     userEmail: string;
     description: string;
+    year: number;
+    category: string;
+    condition: string;
+    location: 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 productLocation = useRef<HTMLInputElement>(null);
   const productImages = useRef<HTMLInputElement>(null);
 
+  const currentYear = new Date().getFullYear();
+  const years = Array.from({ length: currentYear - 1950 }, (_, i) => currentYear - i);
+
+  // Placeholder categories (letters for now)
+  const categories = ["A", "B", "C", "D", "E", "F"];
+
+  const conditions = ["New", "Used"];
+
   const [existingImages, setExistingImages] = useState<string[]>([]);
   const [newFiles, setNewFiles] = useState<File[]>([]);
   const [newPreviews, setNewPreviews] = useState<string[]>([]);
@@ -78,11 +94,24 @@ 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 &&
+        productLocation.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("location", productLocation.current.value);
         body.append("userEmail", user.email || "");
 
         // append existing image URLs
@@ -175,6 +204,84 @@ export function EditProduct() {
           />
         </div>
 
+        <div className="mb-5">
+          <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>
+
+        <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>
+
+        <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="mb-5">
+          <label htmlFor="productLocation" className="block mb-2 font-medium font-inter text-black">
+            Location
+          </label>
+          <input
+            id="productLocation"
+            type="text"
+            defaultValue={product?.location}
+            ref={productLocation}
+            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
+            placeholder="Location"
+            required
+          />
+        </div>
+
         <div className="mb-5">
           <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
             Images
diff --git a/frontend/src/pages/Individual-product-page.tsx b/frontend/src/pages/Individual-product-page.tsx
index a54eb83..da2201b 100644
--- a/frontend/src/pages/Individual-product-page.tsx
+++ b/frontend/src/pages/Individual-product-page.tsx
@@ -17,6 +17,10 @@ export function IndividualProductPage() {
   const [product, setProduct] = useState<{
     name: string;
     price: number;
+    year: number;
+    category: string;
+    condition: string;
+    location: string;
     images: string[];
     userEmail: string;
     description: string;
@@ -244,6 +248,21 @@ export function IndividualProductPage() {
                   </p>
                 </div>
               )}
+              <div className="bg-[#F5F0E6] p-5 mb-6">
+                <p className="font-inter text-black text-base md:text-xl font-normal break-words">
+                  {product?.year}
+                </p>
+              </div>
+              <div className="bg-[#F5F0E6] p-5 mb-6">
+                <p className="font-inter text-black text-base md:text-xl font-normal break-words">
+                  {product?.category}
+                </p>
+              </div>
+              <div className="bg-[#F5F0E6] p-5 mb-6">
+                <p className="font-inter text-black text-base md:text-xl font-normal break-words">
+                  {product?.condition}
+                </p>
+              </div>
               {!hasPermissions && (
                 <div
                   onMouseEnter={() => setIsHovered(true)}
diff --git a/frontend/src/pages/SavedProducts.tsx b/frontend/src/pages/SavedProducts.tsx
index 9a722dd..3ac0bb0 100644
--- a/frontend/src/pages/SavedProducts.tsx
+++ b/frontend/src/pages/SavedProducts.tsx
@@ -11,6 +11,10 @@ export function SavedProducts() {
       _id: string;
       name: string;
       price: number;
+      year: number;
+      category: string;
+      condition: string;
+      location: string;
       images: string[];
     }>
   >([]);
@@ -93,6 +97,10 @@ export function SavedProducts() {
                     productId={product._id}
                     productName={product.name}
                     productPrice={product.price}
+                    productYear={product.year}
+                    productCategory={product.category}
+                    productCondition={product.condition}
+                    productLocation={product.location}
                     productImages={
                       product.images && product.images.length > 0
                         ? product.images

From a3743bbb7d9f5be193103e34d1351a01fd3cb4ca Mon Sep 17 00:00:00 2001
From: Abas Mohamed <gmuabas2985@gmail.com>
Date: Fri, 23 Jan 2026 19:27:48 -0800
Subject: [PATCH 2/4] Fixed edit product functionality and updated the ui for
 product display

---
 backend/src/controllers/products.ts           |  4 +
 frontend/src/pages/AddProduct.tsx             |  4 +-
 frontend/src/pages/EditProduct.tsx            |  3 +-
 .../src/pages/Individual-product-page.tsx     | 75 +++++++++++++------
 4 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/backend/src/controllers/products.ts b/backend/src/controllers/products.ts
index c97cb44..6a3ef2c 100644
--- a/backend/src/controllers/products.ts
+++ b/backend/src/controllers/products.ts
@@ -193,6 +193,10 @@ export const updateProductById = [
           name: req.body.name,
           price: req.body.price,
           description: req.body.description,
+          year: req.body.year,
+          category: req.body.category,
+          condition: req.body.condition,
+          location: req.body.location,
           images: finalImages,
           timeUpdated: new Date(),
         },
diff --git a/frontend/src/pages/AddProduct.tsx b/frontend/src/pages/AddProduct.tsx
index f28da10..3e2f299 100644
--- a/frontend/src/pages/AddProduct.tsx
+++ b/frontend/src/pages/AddProduct.tsx
@@ -20,8 +20,8 @@ export function AddProduct() {
   const currentYear = new Date().getFullYear();
   const years = Array.from({ length: currentYear - 1950 }, (_, i) => currentYear - i);
 
-  // Placeholder categories (letters for now)
-  const categories = ["A", "B", "C", "D", "E", "F"];
+
+  const categories = ["Electronics", "School Supplies", "Dorm", "Furniture", "Clothes"];
 
   const conditions = ["New", "Used"];
 
diff --git a/frontend/src/pages/EditProduct.tsx b/frontend/src/pages/EditProduct.tsx
index 98e3961..2b24bbe 100644
--- a/frontend/src/pages/EditProduct.tsx
+++ b/frontend/src/pages/EditProduct.tsx
@@ -32,8 +32,7 @@ export function EditProduct() {
   const currentYear = new Date().getFullYear();
   const years = Array.from({ length: currentYear - 1950 }, (_, i) => currentYear - i);
 
-  // Placeholder categories (letters for now)
-  const categories = ["A", "B", "C", "D", "E", "F"];
+  const categories = ["Electronics", "School Supplies", "Dorm", "Furniture", "Clothes"];
 
   const conditions = ["New", "Used"];
 
diff --git a/frontend/src/pages/Individual-product-page.tsx b/frontend/src/pages/Individual-product-page.tsx
index da2201b..f2fbf8c 100644
--- a/frontend/src/pages/Individual-product-page.tsx
+++ b/frontend/src/pages/Individual-product-page.tsx
@@ -1,6 +1,7 @@
 import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 import { faHeart as faHeartSolid } from "@fortawesome/free-solid-svg-icons";
 import { faHeart as faHeartRegular } from "@fortawesome/free-regular-svg-icons";
+import { faCalendar, faTag, faCheckCircle, faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useContext, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
@@ -232,37 +233,67 @@ export function IndividualProductPage() {
 
             {/* Info Section */}
             <section className="max-w-[100%] md:max-w-[50%] flex-1 flex flex-col">
-              <h1 className="pt-2 font-jetbrains text-black font-bold text-4xl break-words">
+              <h1 className="pt-2 font-jetbrains text-black font-bold text-4xl break-words mb-4">
                 {product?.name}
               </h1>
 
-              <hr className="my-6 w-full mx-auto h-0 border-[1px] border-solid border-gray-300" />
+              {/* Price - Prominent Display */}
+              <div className="mb-6">
+                <h2 className="font-jetbrains text-[#00629B] text-3xl md:text-4xl font-bold">
+                  ${product?.price?.toFixed(2)}
+                </h2>
+                <p className="font-inter text-gray-500 text-sm mt-1">USD</p>
+              </div>
+
+              {/* Product Details Grid */}
+              <div className="grid grid-cols-2 gap-4 mb-6">
+                <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+                  <div className="flex items-center gap-2 mb-2">
+                    <FontAwesomeIcon icon={faCalendar} className="text-[#00629B] text-sm" />
+                    <span className="font-inter text-gray-500 text-xs uppercase tracking-wide">Year</span>
+                  </div>
+                  <p className="font-inter text-black text-lg font-semibold">{product?.year}</p>
+                </div>
+
+                <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+                  <div className="flex items-center gap-2 mb-2">
+                    <FontAwesomeIcon icon={faTag} className="text-[#00629B] text-sm" />
+                    <span className="font-inter text-gray-500 text-xs uppercase tracking-wide">Category</span>
+                  </div>
+                  <p className="font-inter text-black text-lg font-semibold">{product?.category}</p>
+                </div>
+
+                <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+                  <div className="flex items-center gap-2 mb-2">
+                    <FontAwesomeIcon icon={faCheckCircle} className="text-[#00629B] text-sm" />
+                    <span className="font-inter text-gray-500 text-xs uppercase tracking-wide">Condition</span>
+                  </div>
+                  <p className="font-inter text-black text-lg font-semibold">{product?.condition}</p>
+                </div>
 
-              <h2 className="font-inter text-[#35393C] text-base md:text-xl font-normal pb-6">
-                USD ${product?.price?.toFixed(2)}
-              </h2>
+                {product?.location && (
+                  <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+                    <div className="flex items-center gap-2 mb-2">
+                      <FontAwesomeIcon icon={faMapMarkerAlt} className="text-[#00629B] text-sm" />
+                      <span className="font-inter text-gray-500 text-xs uppercase tracking-wide">Location</span>
+                    </div>
+                    <p className="font-inter text-black text-lg font-semibold">{product.location}</p>
+                  </div>
+                )}
+              </div>
+
+              {/* Description */}
               {product?.description && (
-                <div className="bg-[#F5F0E6] p-5 mb-6">
-                  <p className="font-inter text-black text-base md:text-xl font-normal break-words">
+                <div className="bg-gradient-to-br from-[#F5F0E6] to-[#F9F7F3] border border-gray-200 rounded-lg p-6 mb-6 shadow-sm">
+                  <h3 className="font-inter text-gray-700 text-sm uppercase tracking-wide mb-3 font-semibold">
+                    Description
+                  </h3>
+                  <p className="font-inter text-black text-base md:text-lg leading-relaxed break-words whitespace-pre-wrap">
                     {product.description}
                   </p>
                 </div>
               )}
-              <div className="bg-[#F5F0E6] p-5 mb-6">
-                <p className="font-inter text-black text-base md:text-xl font-normal break-words">
-                  {product?.year}
-                </p>
-              </div>
-              <div className="bg-[#F5F0E6] p-5 mb-6">
-                <p className="font-inter text-black text-base md:text-xl font-normal break-words">
-                  {product?.category}
-                </p>
-              </div>
-              <div className="bg-[#F5F0E6] p-5 mb-6">
-                <p className="font-inter text-black text-base md:text-xl font-normal break-words">
-                  {product?.condition}
-                </p>
-              </div>
+
               {!hasPermissions && (
                 <div
                   onMouseEnter={() => setIsHovered(true)}

From 606d9ef599fc6db506b7d0f100744eabf21011e8 Mon Sep 17 00:00:00 2001
From: Abas Mohamed <gmuabas2985@gmail.com>
Date: Tue, 27 Jan 2026 18:19:18 -0800
Subject: [PATCH 3/4] Removed location property, updated image upload ui

---
 backend/src/controllers/products.ts |   8 +-
 backend/src/models/product.ts       |   4 -
 frontend/src/pages/AddProduct.tsx   | 123 ++++++++++++-----------
 frontend/src/pages/EditProduct.tsx  | 147 +++++++++++++++-------------
 4 files changed, 151 insertions(+), 131 deletions(-)

diff --git a/backend/src/controllers/products.ts b/backend/src/controllers/products.ts
index 6a3ef2c..4d200a9 100644
--- a/backend/src/controllers/products.ts
+++ b/backend/src/controllers/products.ts
@@ -69,12 +69,12 @@ export const addProduct = [
   upload,
   async (req: AuthenticatedRequest, res: Response) => {
     try {
-      const { name, price, description, year, category, condition, location} = req.body;
+      const { name, price, description, year, 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 || !year || !category || !condition || !location) {
-        return res.status(400).json({ message: "Name, price, userEmail, year, category, condition, and location are required." });
+      if (!name || !price || !userEmail || !year || !category || !condition) {
+        return res.status(400).json({ message: "Name, price, userEmail, year, category, condition, are required." });
       }
 
       const images: string[] = [];
@@ -104,7 +104,6 @@ export const addProduct = [
         year,
         category,
         condition,
-        location,
         timeCreated: new Date(),
         timeUpdated: new Date(),
       });
@@ -196,7 +195,6 @@ export const updateProductById = [
           year: req.body.year,
           category: req.body.category,
           condition: req.body.condition,
-          location: req.body.location,
           images: finalImages,
           timeUpdated: new Date(),
         },
diff --git a/backend/src/models/product.ts b/backend/src/models/product.ts
index d303661..973f962 100644
--- a/backend/src/models/product.ts
+++ b/backend/src/models/product.ts
@@ -24,10 +24,6 @@ const productSchema = new Schema({
     type: String,
     required: true,
   },
-  location: {
-    type: String,
-    required: true,
-  },
   timeCreated: {
     type: Date,
     required: true,
diff --git a/frontend/src/pages/AddProduct.tsx b/frontend/src/pages/AddProduct.tsx
index 3e2f299..0f8d594 100644
--- a/frontend/src/pages/AddProduct.tsx
+++ b/frontend/src/pages/AddProduct.tsx
@@ -13,7 +13,6 @@ export function AddProduct() {
   const productYear = useRef<HTMLSelectElement>(null);
   const productCategory = useRef<HTMLSelectElement>(null);
   const productCondition = useRef<HTMLSelectElement>(null);
-  const productLocation = useRef<HTMLInputElement>(null);
   const productImages = useRef<HTMLInputElement>(null);
 
   
@@ -21,7 +20,13 @@ export function AddProduct() {
   const years = Array.from({ length: currentYear - 1950 }, (_, i) => currentYear - i);
 
 
-  const categories = ["Electronics", "School Supplies", "Dorm", "Furniture", "Clothes"];
+  const categories = [
+  'Electronics',
+  'School Supplies',
+  'Dorm Essentials',
+  'Furniture',
+  'Clothes',
+  'Miscellaneous'];
 
   const conditions = ["New", "Used"];
 
@@ -69,7 +74,7 @@ export function AddProduct() {
     setIsSubmitting(true);
     e.preventDefault();
     try {
-      if (productName.current && productPrice.current && productDescription.current && productYear.current && productCategory.current && productCondition.current && productLocation.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];
@@ -82,7 +87,6 @@ export function AddProduct() {
         body.append("year", productYear.current.value);
         body.append("category", productCategory.current.value);
         body.append("condition", productCondition.current.value);
-        body.append("location", productLocation.current.value);
         if (user.email) body.append("userEmail", user.email);
 
         if (productImages.current && productImages.current.files) {
@@ -113,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">
@@ -223,57 +287,6 @@ export function AddProduct() {
           </select>
         </div>
 
-        {/* Location */}
-        <div className="mb-5">
-          <label htmlFor="productLocation" className="block mb-2 font-medium font-inter text-black">
-            Location
-          </label>
-          <input
-            id="productLocation"
-            type="text"
-            ref={productLocation}
-            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-            placeholder="Location"
-            required
-          />
-        </div>
-
-        {/* Images */}
-        <div className="mb-5">
-          <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
-            Images
-          </label>
-
-          {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>
-          )}
-
-          <input
-            name="images"
-            id="productImages"
-            type="file"
-            multiple
-            accept="image/png, image/jpeg"
-            onChange={handleImageChange}
-            ref={productImages}
-            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-          />
-        </div>
 
         <div className="flex justify-between gap-3">
           <button
diff --git a/frontend/src/pages/EditProduct.tsx b/frontend/src/pages/EditProduct.tsx
index 2b24bbe..a7adadc 100644
--- a/frontend/src/pages/EditProduct.tsx
+++ b/frontend/src/pages/EditProduct.tsx
@@ -17,7 +17,6 @@ export function EditProduct() {
     year: number;
     category: string;
     condition: string;
-    location: string;
   }>();
 
   const productName = useRef<HTMLInputElement>(null);
@@ -26,13 +25,18 @@ export function EditProduct() {
   const productYear = useRef<HTMLSelectElement>(null);
   const productCategory = useRef<HTMLSelectElement>(null);
   const productCondition = useRef<HTMLSelectElement>(null);
-  const productLocation = useRef<HTMLInputElement>(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", "Furniture", "Clothes"];
+  const categories = [
+  'Electronics',
+  'School Supplies',
+  'Dorm Essentials',
+  'Furniture',
+  'Clothes',
+  'Miscellaneous'];
 
   const conditions = ["New", "Used"];
 
@@ -100,7 +104,6 @@ export function EditProduct() {
         productYear.current &&
         productCategory.current &&
         productCondition.current &&
-        productLocation.current &&
         user
       ) {
         const body = new FormData();
@@ -110,7 +113,6 @@ export function EditProduct() {
         body.append("year", productYear.current.value);
         body.append("category", productCategory.current.value);
         body.append("condition", productCondition.current.value);
-        body.append("location", productLocation.current.value);
         body.append("userEmail", user.email || "");
 
         // append existing image URLs
@@ -153,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
@@ -266,68 +341,6 @@ export function EditProduct() {
           </select>
         </div>
 
-        <div className="mb-5">
-          <label htmlFor="productLocation" className="block mb-2 font-medium font-inter text-black">
-            Location
-          </label>
-          <input
-            id="productLocation"
-            type="text"
-            defaultValue={product?.location}
-            ref={productLocation}
-            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-            placeholder="Location"
-            required
-          />
-        </div>
-
-        <div className="mb-5">
-          <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
-            Images
-          </label>
-
-          {(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>
-          )}
-
-          <input
-            name="images"
-            id="productImages"
-            type="file"
-            multiple
-            accept="image/png, image/jpeg"
-            onChange={handleImageChange}
-            ref={productImages}
-            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-          />
-        </div>
-
         <div className="flex justify-between gap-3">
           <button
             type="button"

From 6b155f9cc480e50f66669236fa954631d47db411 Mon Sep 17 00:00:00 2001
From: Abas Mohamed <gmuabas2985@gmail.com>
Date: Wed, 4 Feb 2026 18:26:17 -0800
Subject: [PATCH 4/4] Updated add/edit product pages to be more desktop
 friendly

---
 frontend/src/pages/AddProduct.tsx  | 373 +++++++++++++------------
 frontend/src/pages/EditProduct.tsx | 426 +++++++++++++++--------------
 2 files changed, 414 insertions(+), 385 deletions(-)

diff --git a/frontend/src/pages/AddProduct.tsx b/frontend/src/pages/AddProduct.tsx
index 0f8d594..d100713 100644
--- a/frontend/src/pages/AddProduct.tsx
+++ b/frontend/src/pages/AddProduct.tsx
@@ -113,202 +113,215 @@ export function AddProduct() {
       <Helmet>
         <title>Low-Price Center Marketplace</title>
       </Helmet>
-      <div className="w-full mt-12 mb-6">
+      <div className="w-full mt-12 mb-8">
         <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>
+      <form className="max-w-6xl mx-auto px-4 pb-10" onSubmit={handleSubmit}>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="space-y-6">
+            {/* Images */}
+            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+              <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
+                Images
+              </label>
+              <p className="text-sm text-gray-600 mb-4">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>
+              {newPreviews.length > 0 && (
+                <div className="mb-4">
+                  <div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-3 gap-3">
+                    {newPreviews.map((src, idx) => (
+                      <div key={idx} className="relative w-full aspect-square">
+                        <img src={src} className="w-full h-full object-cover rounded-md" />
+                        <button
+                          type="button"
+                          onClick={() => removePreview(idx)}
+                          className="absolute top-1 right-1 bg-black/70 text-white rounded-full text-xs w-6 h-6 flex items-center justify-center"
+                          aria-label="Remove image"
+                        >
+                          ✕
+                        </button>
+                      </div>
+                    ))}
                   </div>
-                ))}
-              </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"
+              <label
+                htmlFor="productImages"
+                className="flex flex-col items-center justify-center w-full h-40 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors"
               >
-                <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"
+                <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"
                 />
-              </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>
+              </label>
+              {fileError && <p className="text-sm text-red-800 mt-3">{fileError}</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">
-            Name
-          </label>
-          <input
-            id="productName"
-            type="text"
-            ref={productName}
-            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-            placeholder="Product Name"
-            required
-          />
-        </div>
 
-        {/* Price */}
-        <div className="mb-5">
-          <label htmlFor="productPrice" className="block mb-2 font-medium font-inter text-black">
-            Price
-          </label>
-          <input
-            id="productPrice"
-            type="number"
-            min={0}
-            max={1000000000}
-            step={0.01}
-            ref={productPrice}
-            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-            placeholder="$0.00"
-            required
-          />
-        </div>
-
-        {/* Description */}
-        <div className="mb-5">
-          <label
-            htmlFor="productDescription"
-            className="block mb-2 font-medium font-inter text-black"
-          >
-            Description
-          </label>
-          <textarea
-            id="productDescription"
-            rows={10}
-            ref={productDescription}
-            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-            placeholder="Tell us more about this product..."
-          />
-        </div>
+            {/* Description */}
+            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+              <label
+                htmlFor="productDescription"
+                className="block mb-2 font-medium font-inter text-black"
+              >
+                Description
+              </label>
+              <textarea
+                id="productDescription"
+                rows={12}
+                ref={productDescription}
+                className="border border-gray-300 text-black text-sm rounded-md w-full p-3"
+                placeholder="Tell us more about this product..."
+              />
+            </div>
+          </div>
 
-        {/* Year */}
-        <div className="mb-5">
-          <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>
+          <div className="space-y-6">
+            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {/* Name */}
+                <div className="sm:col-span-2">
+                  <label htmlFor="productName" className="block mb-2 font-medium font-inter text-black">
+                    Name
+                  </label>
+                  <input
+                    id="productName"
+                    type="text"
+                    ref={productName}
+                    className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
+                    placeholder="Product Name"
+                    required
+                  />
+                </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>
+                {/* Price */}
+                <div>
+                  <label htmlFor="productPrice" className="block mb-2 font-medium font-inter text-black">
+                    Price
+                  </label>
+                  <input
+                    id="productPrice"
+                    type="number"
+                    min={0}
+                    max={1000000000}
+                    step={0.01}
+                    ref={productPrice}
+                    className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
+                    placeholder="$0.00"
+                    required
+                  />
+                </div>
 
-        {/* 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>
+                {/* Year */}
+                <div>
+                  <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>
 
+                {/* Category */}
+                <div>
+                  <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>
 
-        <div className="flex justify-between gap-3">
-          <button
-            type="button"
-            onClick={() => navigate(`/products`)}
-            className="bg-[#00629B] text-white font-semibold font-inter py-2 px-4 shadow-lg hover:brightness-90 transition-all"
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            className="bg-[#00629B] text-white font-semibold font-inter py-2 px-4 shadow-lg hover:brightness-90 transition-all"
-          >
-            Submit
-          </button>
-        </div>
+                {/* Condition */}
+                <div>
+                  <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>
+            </div>
 
-        {error && (
-          <p className="text-sm text-red-800 text-center mb-4">Error adding product. Try again.</p>
-        )}
+            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                <button
+                  type="button"
+                  onClick={() => navigate(`/products`)}
+                  className="bg-white text-[#00629B] border border-[#00629B] font-semibold font-inter py-2 px-5 shadow-sm hover:bg-[#00629B] hover:text-white transition-all"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="bg-[#00629B] text-white font-semibold font-inter py-2 px-6 shadow-lg hover:brightness-90 transition-all"
+                >
+                  Submit
+                </button>
+              </div>
 
-        {fileError && <p className="text-sm text-red-800 text-center mb-4">{fileError}</p>}
+              {error && (
+                <p className="text-sm text-red-800 text-center mt-4">Error adding product. Try again.</p>
+              )}
+            </div>
+          </div>
+        </div>
       </form>
     </>
   );
diff --git a/frontend/src/pages/EditProduct.tsx b/frontend/src/pages/EditProduct.tsx
index a7adadc..832258e 100644
--- a/frontend/src/pages/EditProduct.tsx
+++ b/frontend/src/pages/EditProduct.tsx
@@ -151,228 +151,244 @@ export function EditProduct() {
       <Helmet>
         <title>Low-Price Center Marketplace</title>
       </Helmet>
-      <div className="w-full mt-12 mb-6">
+      <div className="w-full mt-12 mb-8">
         <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>
+      <form className="max-w-6xl mx-auto px-4 pb-10" onSubmit={handleEdit}>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="space-y-6">
+            {/* Images */}
+            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+              <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
+                Images
+              </label>
+              <p className="text-sm text-gray-600 mb-4">Upload up to 10 photos</p>
+
+              {(newPreviews.length > 0 || existingImages.length > 0) && (
+                <div className="mb-4">
+                  <div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-3 gap-3">
+                    {existingImages.map((url) => (
+                      <div key={url} className="relative w-full aspect-square">
+                        <img src={url} className="w-full h-full object-cover rounded-md" />
+                        <button
+                          type="button"
+                          onClick={() => removeExisting(url)}
+                          className="absolute top-1 right-1 bg-black/70 text-white rounded-full text-xs w-6 h-6 flex items-center justify-center"
+                          aria-label="Remove image"
+                        >
+                          ✕
+                        </button>
+                      </div>
+                    ))}
+
+                    {newPreviews.map((src, idx) => (
+                      <div key={src} className="relative w-full aspect-square">
+                        <img src={src} className="w-full h-full object-cover rounded-md" />
+                        <button
+                          type="button"
+                          onClick={() => removeNew(idx)}
+                          className="absolute top-1 right-1 bg-black/70 text-white rounded-full text-xs w-6 h-6 flex items-center justify-center"
+                          aria-label="Remove image"
+                        >
+                          ✕
+                        </button>
+                      </div>
+                    ))}
+                  </div>
                 </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"
+              <label
+                htmlFor="productImages"
+                className="flex flex-col items-center justify-center w-full h-40 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"
                   >
-                    ×
-                  </button>
+                    <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>
+              {fileError && <p className="text-sm text-red-800 mt-3">{fileError}</p>}
             </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"
+
+            {/* Description */}
+            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+              <label
+                htmlFor="productDescription"
+                className="block mb-2 font-medium font-inter text-black"
               >
-                <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>
+                Description
+              </label>
+              <textarea
+                id="productDescription"
+                rows={12}
+                defaultValue={product?.description}
+                ref={productDescription}
+                className="border border-gray-300 text-black text-sm rounded-md w-full p-3"
+                placeholder="Tell us more about this product..."
+              />
             </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
-          </label>
-          <input
-            id="productName"
-            type="text"
-            defaultValue={product?.name}
-            ref={productName}
-            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-            placeholder="Product Name"
-            required
-          />
-        </div>
+          </div>
 
-        <div className="mb-5">
-          <label htmlFor="productPrice" className="block mb-2 font-medium font-inter text-black">
-            Price
-          </label>
-          <input
-            id="productPrice"
-            type="number"
-            min={0}
-            max={1000000000}
-            step={0.01}
-            defaultValue={product?.price}
-            ref={productPrice}
-            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-            placeholder="$0.00"
-            required
-          />
-        </div>
+          <div className="space-y-6">
+            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="sm:col-span-2">
+                  <label htmlFor="productName" className="block mb-2 font-medium font-inter text-black">
+                    Name
+                  </label>
+                  <input
+                    id="productName"
+                    type="text"
+                    defaultValue={product?.name}
+                    ref={productName}
+                    className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
+                    placeholder="Product Name"
+                    required
+                  />
+                </div>
 
-        <div className="mb-5">
-          <label
-            htmlFor="productDescription"
-            className="block mb-2 font-medium font-inter text-black"
-          >
-            Description
-          </label>
-          <textarea
-            id="productDescription"
-            rows={10}
-            defaultValue={product?.description}
-            ref={productDescription}
-            className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
-            placeholder="Tell us more about this product..."
-          />
-        </div>
+                <div>
+                  <label htmlFor="productPrice" className="block mb-2 font-medium font-inter text-black">
+                    Price
+                  </label>
+                  <input
+                    id="productPrice"
+                    type="number"
+                    min={0}
+                    max={1000000000}
+                    step={0.01}
+                    defaultValue={product?.price}
+                    ref={productPrice}
+                    className="border border-gray-300 text-black text-sm rounded-md w-full p-2.5"
+                    placeholder="$0.00"
+                    required
+                  />
+                </div>
 
-        <div className="mb-5">
-          <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>
+                <div>
+                  <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>
 
-        <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>
+                <div>
+                  <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>
 
-        <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>
+                  <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>
+            </div>
+
+            <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                <button
+                  type="button"
+                  onClick={() => navigate(`/products/${id}`)}
+                  className="bg-white text-[#00629B] border border-[#00629B] font-semibold font-inter py-2 px-5 shadow-sm hover:bg-[#00629B] hover:text-white transition-all"
+                >
+                  Cancel
+                </button>
+                <div className="flex flex-col sm:flex-row gap-2">
+                  <button
+                    type="button"
+                    onClick={handleDelete}
+                    className="bg-[#DC3545] text-white font-semibold font-inter py-2 px-5 shadow-lg hover:brightness-90 transition-all"
+                  >
+                    Delete
+                  </button>
+                  <button
+                    type="submit"
+                    className="bg-[#00629B] text-white font-semibold font-inter py-2 px-6 shadow-lg hover:brightness-90 transition-all"
+                  >
+                    Done
+                  </button>
+                </div>
+              </div>
 
-        <div className="flex justify-between gap-3">
-          <button
-            type="button"
-            onClick={() => navigate(`/products/${id}`)}
-            className="bg-[#00629B] text-white font-semibold font-inter py-2 px-4 shadow-lg hover:brightness-90 transition-all"
-          >
-            Cancel
-          </button>
-          <div className="flex gap-2">
-            <button
-              type="button"
-              onClick={handleDelete}
-              className="bg-[#DC3545] text-white font-semibold font-inter py-2 px-4 shadow-lg hover:brightness-90 transition-all"
-            >
-              Delete
-            </button>
-            <button
-              type="submit"
-              className="bg-[#00629B] text-white font-semibold font-inter py-2 px-4 shadow-lg hover:brightness-90 transition-all"
-            >
-              Done
-            </button>
+              {error && (
+                <p className="text-sm text-red-800 text-center mt-4">
+                  Error editing product. Try again.
+                </p>
+              )}
+            </div>
           </div>
         </div>
-
-        {fileError && <p className="m-2 mt-4 text-sm text-red-800 text-center">{fileError}</p>}
-
-        {error && (
-          <p className="m-2 mt-4 text-sm text-red-800 text-center">
-            Error editing product. Try again.
-          </p>
-        )}
       </form>
     </>
   );