diff --git a/app/add-product-page/page.tsx b/app/add-product-page/page.tsx
index 327d5ccc..772addf6 100644
--- a/app/add-product-page/page.tsx
+++ b/app/add-product-page/page.tsx
@@ -11,17 +11,14 @@ import {
   ProductSizePantsInseamList,
 } from "./product-prop-list";
 const AddProduct = () => {
-  const defaultType: string = ProductTypeList.Shoes;
-  const [productType, setProductType] = useState(defaultType);
-  const defaultGender: string = ProductGenderList.MALE
-  const [productGender, setProductGender] = useState(defaultGender);
-  const [productSizeShoe, setProductSizeShoe] = useState(ProductSizeShoeList[0]);
-  const defaultSize: string = ProductSizesList.L;
-  const [productSizes, setProductSizes] = useState(defaultSize);
-  const [productSizePantsWaist, setProductSizePantsWaist] = useState(ProductSizePantsWaistList[0]);
-  const [productSizePantsInseam, setProductSizePantsInseam] = useState(ProductSizePantsInseamList[0]);
-  const [productDescription, setProductDescription] = useState("");
-  const [productImage, setProductImage] = useState("");
+  const [productType, setProductType] = useState<string>('');
+  const [productGender, setProductGender] = useState<string>('');
+  const [productSizeShoe, setProductSizeShoe] = useState<number | string>('');
+  const [productSizes, setProductSizes] = useState<string>('');
+  const [productSizePantsWaist, setProductSizePantsWaist] = useState<number | string>('');
+  const [productSizePantsInseam, setProductSizePantsInseam] = useState<number | string>('');
+  const [productDescription, setProductDescription] = useState<string>('');
+  const [productImage, setProductImage] = useState<string>('');
 
   const handleProductTypeSelect = (e: {
     target: { value: React.SetStateAction<string> };
@@ -35,9 +32,10 @@ const AddProduct = () => {
     setProductGender(e.target.value);
   };
 
-  const handleProductSizeShoeSelect = (event: any) => {
-    const newValue = parseInt(event.target.value.toString(), 10);
-    setProductSizeShoe(newValue);
+  const handleProductSizeShoeSelect = (e: {
+    target: { value: React.SetStateAction<number | string> };
+  }) => {
+    setProductSizeShoe(e.target.value);
   };
 
   const handleProductSizeSelect = (e: {
@@ -46,14 +44,16 @@ const AddProduct = () => {
     setProductSizes(e.target.value);
   };
 
-  const handleProductSizePantsWaistSelect = (event: any) => {
-    const newValue = parseInt(event.target.value.toString(), 10);
-    setProductSizePantsWaist(newValue);
+  const handleProductSizePantsWaistSelect = (e: {
+    target: { value: React.SetStateAction<number | string> };
+  }) => {
+    setProductSizePantsWaist(e.target.value);
   };
 
-  const handleProductSizePantsInseamSelect = (event: any) => {
-    const newValue = parseInt(event.target.value.toString(), 10);
-    setProductSizePantsInseam(newValue);
+  const handleProductSizePantsInseamSelect = (e: {
+    target: { value: React.SetStateAction<number | string> };
+  }) => {
+    setProductSizePantsInseam(e.target.value);
   };
 
   const handleDescriptionChange = (e: {
@@ -101,12 +101,14 @@ const AddProduct = () => {
     }
   };
 
+  const notSizeApplicable = ['', 'Pants', 'Shoes']
+
   return (
     <form onSubmit={handleSubmit}>
       <FormControl>
         <Typography component='h1' variant='h3' sx={{color: 'white', marginBottom: "15px"}}>
             Add a Product
-          </Typography>
+        </Typography>
 
         {/* Product Type Field */}
         <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
@@ -124,103 +126,141 @@ const AddProduct = () => {
         </FormControl>
 
         {/* Product Gender Field */}
-        <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
-          <InputLabel id="gender-selectlabel">Product Gender</InputLabel>
-          <Select labelId="gender-selectlabel" 
-            id="gender-select" 
-            value={productGender}
-            aria-describedby="product-gender-field"
-            onChange={handleProductGenderSelect}
-          >
-            {Object.values(ProductGenderList).map((gender) => (
-              <MenuItem value={gender} key={gender}>{gender}</MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        {
+          productType == '' ? null : (
+            <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+              <InputLabel id="gender-selectlabel">Product Gender</InputLabel>
+              <Select labelId="gender-selectlabel" 
+                id="gender-select" 
+                value={productGender}
+                aria-describedby="product-gender-field"
+                onChange={handleProductGenderSelect}
+              >
+                <MenuItem value={''}>{"-"}</MenuItem>
+                {Object.values(ProductGenderList).map((gender) => (
+                  <MenuItem value={gender} key={gender}>{gender}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )
+        }
 
         {/* Product Size Shoe Field */}
-        <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
-          <InputLabel id="shoesize-selectlabel">Shoe Size</InputLabel>
-          <Select labelId="shoesize-selectlabel" 
-            id="shoesize-select" 
-            value={productSizeShoe}
-            aria-describedby="product-shoesize-field"
-            onChange={handleProductSizeShoeSelect}
-          >
-            {Object.values(ProductSizeShoeList).map((size) => (
-              <MenuItem value={size} key={size}>{size}</MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        {
+          productType != 'Shoes' ? null : (
+            <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+              <InputLabel id="shoesize-selectlabel">Shoe Size</InputLabel>
+              <Select labelId="shoesize-selectlabel" 
+                id="shoesize-select" 
+                value={productSizeShoe}
+                aria-describedby="product-shoesize-field"
+                onChange={handleProductSizeShoeSelect}
+              >
+                <MenuItem value={''}>{"-"}</MenuItem>
+                {Object.values(ProductSizeShoeList).map((size) => (
+                  <MenuItem value={size} key={size}>{size}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )
+        }
 
         {/* Product Size Field */}
-        <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
-          <InputLabel id="size-selectlabel">Product Size</InputLabel>
-          <Select labelId="size-selectlabel" 
-            id="size-select" 
-            value={productSizes}
-            aria-describedby="product-size-field"
-            onChange={handleProductSizeSelect}
-          >
-            {Object.values(ProductSizesList).map((size) => (
-              <MenuItem value={size} key={size}>{size}</MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        {
+          notSizeApplicable.includes(productType) ? null : (
+            <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+              <InputLabel id="size-selectlabel">Product Size</InputLabel>
+              <Select labelId="size-selectlabel" 
+                id="size-select" 
+                value={productSizes}
+                aria-describedby="product-size-field"
+                onChange={handleProductSizeSelect}
+              >
+                <MenuItem value={''}>{"-"}</MenuItem>
+                {Object.values(ProductSizesList).map((size) => (
+                  <MenuItem value={size} key={size}>{size}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )
+        }
 
         {/* Product Size Pants Waist Field */}
-        <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
-          <InputLabel id="waistsize-selectlabel">Waist Size</InputLabel>
-          <Select labelId="waistsize-selectlabel" 
-            id="waistsize-select" 
-            value={productSizePantsWaist}
-            aria-describedby="product-waist-size-field"
-            onChange={handleProductSizePantsWaistSelect}
-          >
-            {Object.values(ProductSizePantsWaistList).map((size) => (
-              <MenuItem value={size} key={size}>{size}</MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        {
+          productType != 'Pants' ? null : (
+            <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+              <InputLabel id="waistsize-selectlabel">Waist Size</InputLabel>
+              <Select labelId="waistsize-selectlabel" 
+                id="waistsize-select" 
+                value={productSizePantsWaist}
+                aria-describedby="product-waist-size-field"
+                onChange={handleProductSizePantsWaistSelect}
+              >
+                <MenuItem value={''}>{"-"}</MenuItem>
+                {Object.values(ProductSizePantsWaistList).map((size) => (
+                  <MenuItem value={size} key={size}>{size}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )
+        }
 
         {/* Product Size Pants Inseam Field */}
-        <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
-          <InputLabel id="inseamsize-selectlabel">Inseam Length</InputLabel>
-          <Select labelId="inseamsize-selectlabel" 
-            id="inseamsize-select" 
-            value={productSizePantsInseam}
-            aria-describedby="product-inseam-size-field"
-            onChange={handleProductSizePantsInseamSelect}
-          >
-            {Object.values(ProductSizePantsInseamList).map((size) => (
-              <MenuItem value={size} key={size}>{size}</MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        {
+          productType != 'Pants' ? null : (
+            <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+              <InputLabel id="inseamsize-selectlabel">Inseam Length</InputLabel>
+              <Select labelId="inseamsize-selectlabel" 
+                id="inseamsize-select" 
+                value={productSizePantsInseam}
+                aria-describedby="product-inseam-size-field"
+                onChange={handleProductSizePantsInseamSelect}
+              >
+                <MenuItem value={''}>{"-"}</MenuItem>
+                {Object.values(ProductSizePantsInseamList).map((size) => (
+                  <MenuItem value={size} key={size}>{size}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )
+        }
 
         {/* Product Description Field */}
-        <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
-          <TextField label="Product Description"
-            aria-describedby="product-description-field"
-            id="product-description"
-            onChange={handleDescriptionChange}
-            multiline
-            minRows={2}
-            variant="filled"/>
-        </FormControl>
+        {
+          productType == '' ? null : (
+            <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+              <TextField label="Product Description"
+                aria-describedby="product-description-field"
+                id="product-description"
+                onChange={handleDescriptionChange}
+                multiline
+                minRows={2}
+                variant="filled"/>
+            </FormControl>
+          )
+        }
         
         {/* Product Upload Image Field */}
-        <Stack direction="row" alignItems="center" justifyContent="center" spacing={2} sx={{ m: 1 }}>
-          <Button variant="contained" component="label" sx={{ width: 1 }}>
-            Upload Image
-            <input hidden multiple type="file" onChange={handleImageUpload} value={productImage}/>
-          </Button>
-        </Stack>
+        {
+          productType == '' ? null : (          
+          <Stack direction="row" alignItems="center" justifyContent="center" spacing={2} sx={{ m: 1 }}>
+            <Button variant="contained" component="label" sx={{ width: 1 }}>
+              Upload Image
+              <input hidden multiple type="file" onChange={handleImageUpload} value={productImage}/>
+            </Button>
+          </Stack>
+          )
+        }
 
         {/* Submit Button */}
-        <Button variant="contained" color="primary" onClick={handleSubmit} type="submit" sx={{ mt: 1 }}>
-          Submit
-        </Button>
+        {
+          productType == '' ? null : (
+          <Button variant="contained" color="primary" onClick={handleSubmit} type="submit" sx={{ mt: 1 }}>
+            Submit
+          </Button>
+          )
+        }
+
       </FormControl>
     </form>
   );