diff --git a/react-client/src/App.jsx b/react-client/src/App.jsx
index b3f532d..a85fa89 100644
--- a/react-client/src/App.jsx
+++ b/react-client/src/App.jsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react'
 import promo_data from "./assets/promo.json";
-import Promotion from "./components/Promotion";
 import Footer from "./components/Footer";
 import Search from "./components/Search";
 import Home from "./components/Home";
 import About from "./components/About";
-import Featured from "./components/Featured"
+import Featured from "./components/Featured";
+import AddSock from "./components/AddSock";
 
 import {
   BrowserRouter as Router,
@@ -71,19 +71,10 @@ export default function App() {
                     About
                 </Link>
               </li>
-              <li className="nav-item dropdown">
-                <a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                  Dropdown
-                </a>
-                <ul className="dropdown-menu">
-                  <li><a className="dropdown-item" href="#">Action</a></li>
-                  <li><a className="dropdown-item" href="#">Another action</a></li>
-                  <li><hr className="dropdown-divider" /></li>
-                  <li><a className="dropdown-item" href="#">Something else here</a></li>
-                </ul>
-              </li>
               <li className="nav-item">
-                <a className="nav-link disabled" aria-disabled="true">Disabled</a>
+                <Link className='nav-link' to="/add-sock">
+                  Add a Sock
+                </Link>
               </li>
             </ul>
             <Search setData = {setData}/>
@@ -99,6 +90,7 @@ export default function App() {
             <Routes>
               <Route exact path="/" element={<Home data={data} handleDelete={handleDelete} /> }/>
               <Route path="/about" element={<About/>}/>
+              <Route path="/add-sock" element={<AddSock setData={setData}/>}/>
             </Routes>
             
             <Footer environment={import.meta.env.VITE_ENVIRONMENT}/>
diff --git a/react-client/src/components/AddSock.jsx b/react-client/src/components/AddSock.jsx
index ef71df6..46df762 100644
--- a/react-client/src/components/AddSock.jsx
+++ b/react-client/src/components/AddSock.jsx
@@ -1,11 +1,31 @@
-import Reacrt, {useState} from 'react'
+import React, {useState} from 'react'
 
 export default function AddSock(props){
-
-    const [sock, setSock] = useState({});
+    const defaultSock = {
+        sockDetails: {
+            size: "Small",
+            color: "Blue",
+            pattern: "Striped",
+            material: "Wool",
+            condition: "Used",
+            forFoot: "Left"
+        },
+        additionalFeatures: {
+            waterResistant: false,
+            padded: false,
+            antiBacterial: false
+        }
+    }
+    const [sock, setSock] = useState(defaultSock);
 
     const handleSubmit = (e) => {
         e.preventDefault();
+        if(!sock.userId){
+            alert("Please provide a user ID and try again.");
+            return;
+        }
+        sock.addedTimestamp = new Date().toLocaleString("en-US");
+        setSock(sock);
         fetch(`${import.meta.env.VITE_SOCKS_API_URL}`, {
             method: "POST",
             body: JSON.stringify(sock),
@@ -13,24 +33,39 @@ export default function AddSock(props){
                 "Content-Type": "application/json",
             },
         })
-        .then((response) => response.json())
-        .then((data) => {
-            // Handle the response data
-            props.setData(data);
-            console.log(data);
+        .then((response) => {
+            console.log(response);
+            alert("Sock submitted succesfully!");
         })
         .catch((error) => {
             // Handle any errors
             console.error(error);
-        });e.preventDefault();
-            console.log('ock submitted');
+        });
+        
     };
 
     const handleChange = (e) => {
-        //setSock(e.target.value);
-        console.log(e);
+        const field = e.target.name;
+       
+        const val =  e.target.value;
+        if(field === "userId"){
+            sock[field] = val;
+        } else {
+            sock.sockDetails[field] = val;
+        }
+       
+        setSock(sock);
+        console.log(sock);
     }; 
 
+    const handleCheck = (e) => {
+        const field = e.target.name;
+        const isChecked =  e.target.checked; 
+        sock.additionalFeatures[field] =isChecked;
+        setSock(sock);
+        console.log(sock); 
+    }
+
     return(
     <form className="p-3" onSubmit={handleSubmit}>
         <div className="form-group">
@@ -40,6 +75,7 @@ export default function AddSock(props){
                 className="form-control"
                 id="userId"
                 name="userId"
+                onChange = {handleChange}
             />
         </div>
         <div className="form-group">
@@ -48,6 +84,7 @@ export default function AddSock(props){
                 className="form-control"
                 id="size"
                 name="size"
+                onChange={handleChange}
             >
                 <option>Small</option>
                 <option>Medium</option>
@@ -61,6 +98,7 @@ export default function AddSock(props){
                 className="form-control"
                 id="color"
                 name="color"
+                onChange={handleChange}
             />
         </div>
         <div className="form-group">
@@ -70,6 +108,7 @@ export default function AddSock(props){
                 className="form-control"
                 id="pattern"
                 name="pattern"
+                onChange = {handleChange}
             />
         </div>
         <div className="form-group">
@@ -79,6 +118,7 @@ export default function AddSock(props){
                 className="form-control"
                 id="material"
                 name="material"
+                onChange={handleChange}
             />
         </div>
         <div className="form-group">
@@ -87,6 +127,7 @@ export default function AddSock(props){
                 className="form-control"
                 id="condition"
                 name="condition"
+                onChange={handleChange}
             >
                 <option>Used</option>
                 <option>New</option>
@@ -98,6 +139,7 @@ export default function AddSock(props){
                 className="form-control"
                 id="forFoot"
                 name="forFoot"
+                onChange={handleChange}
             >
                 <option>Left</option>
                 <option>Right</option>
@@ -111,6 +153,7 @@ export default function AddSock(props){
                     type="checkbox"
                     id="waterResistant"
                     name="waterResistant"
+                    onChange={handleCheck}
                 />
                 <label className="form-check-label" htmlFor="waterResistant">
                     Water Resistant
@@ -122,6 +165,7 @@ export default function AddSock(props){
                     type="checkbox"
                     id="padded"
                     name="padded"
+                    onChange={handleCheck}
                 />
                 <label className="form-check-label" htmlFor="padded">
                     Padded
@@ -133,13 +177,14 @@ export default function AddSock(props){
                     type="checkbox"
                     id="antiBacterial"
                     name="antiBacterial"
+                    onChange={handleCheck}
                 />
                 <label className="form-check-label" htmlFor="antiBacterial">
                     Anti Bacterial
                 </label>
             </div>
         </div>
-        <button type="submit" className="btn btn-primary">
+        <button type="submit" className="btn btn-primary" onClick={handleSubmit}>
             Submit
         </button>
     </form>