diff --git a/backend/src/controllers/products.ts b/backend/src/controllers/products.ts
index 3c00ae0..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 } = 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) {
-        return res.status(400).json({ message: "Name, price, and userEmail 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[] = [];
@@ -101,6 +101,9 @@ export const addProduct = [
         description,
         userEmail,
         images,
+        year,
+        category,
+        condition,
         timeCreated: new Date(),
         timeUpdated: new Date(),
       });
@@ -189,6 +192,9 @@ 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,
           images: finalImages,
           timeUpdated: new Date(),
         },
diff --git a/backend/src/models/product.ts b/backend/src/models/product.ts
index ca7386a..973f962 100644
--- a/backend/src/models/product.ts
+++ b/backend/src/models/product.ts
@@ -12,6 +12,18 @@ const productSchema = new Schema({
   description: {
     type: String,
   },
+  year: {
+    type: Number,
+    required: true,
+  },
+  category: {
+    type: String,
+    required: true,
+  },
+  condition: {
+    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..d100713 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) {
@@ -92,118 +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}>
-        {/* 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>
+      <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>
 
-        {/* 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>
+              {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>
+              )}
 
-        {/* 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>
+              <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"
+                  >
+                    <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>
 
-        {/* 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>
+            {/* 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>
-          )}
-
-          <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>
 
-        <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>
+          <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>
+
+                {/* 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>
 
-        {error && (
-          <p className="text-sm text-red-800 text-center mb-4">Error adding product. Try again.</p>
-        )}
+                {/* 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>
 
-        {fileError && <p className="text-sm text-red-800 text-center mb-4">{fileError}</p>}
+                {/* 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>
+
+                {/* 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>
+
+            <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>
+
+              {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 67f3297..832258e 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
@@ -121,139 +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}>
-        <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>
+      <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>
 
-        <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>
+              {(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>
+                    ))}
 
-        <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>
+                    {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>
+              )}
+
+              <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"
+                  >
+                    <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>
 
-        <div className="mb-5">
-          <label htmlFor="productImages" className="block mb-2 font-medium font-inter text-black">
-            Images
-          </label>
+            {/* 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}
+                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>
+          </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"
+          <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>
+                  <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>
+                  <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
                   >
-                    ×
-                  </button>
+                    <option value="">Select Year</option>
+                    {years.map((year) => (
+                      <option key={year} value={year}>
+                        {year}
+                      </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>
-              ))}
 
-              {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" />
+                <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={() => removeNew(idx)}
-                    className="absolute top-0 right-0 bg-red-600 text-white rounded-full text-xs px-1"
+                    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>
-          )}
-
-          <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>
 
-        <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>
     </>
   );
diff --git a/frontend/src/pages/Individual-product-page.tsx b/frontend/src/pages/Individual-product-page.tsx
index a54eb83..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";
@@ -17,6 +18,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;
@@ -228,22 +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>
 
-              <h2 className="font-inter text-[#35393C] text-base md:text-xl font-normal pb-6">
-                USD ${product?.price?.toFixed(2)}
-              </h2>
+                <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>
+
+                {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>
               )}
+
               {!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