diff --git a/README.md b/README.md
index 5abe647..a235897 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,10 @@
 
 ## An app that allows you rate companies based on their diversity & company culture.
 
+Kinfolx: An app that allows you rate companies based on their diversity & company culture.
+
+Make sure to use npm install to install all Dependencies.
+
 View our app live : https://kinfolx-production.up.railway.app/
 
 ## Instructions to run the code locally
diff --git a/server/controllers/company.js b/server/controllers/company.js
index 2610e0b..3c1c1ab 100644
--- a/server/controllers/company.js
+++ b/server/controllers/company.js
@@ -4,15 +4,15 @@ const companyController = {
     //fetches all companies: MIGHT NOT WORK WITHOUT FRONT END?
     getAllCompanies: async (req, res, next) => {
         try {
-            const companies = await Company.find({})
-            console.log(companies)
+            const companies = await Company.find()
             res.json({ companies })
         } catch (error) {
             next(error)
         }
     },
-    
-    //fetches a specfic company (and all of its data):
+
+    //fetches a specific company (and all of its data):
+
     getCompany: async (req, res, next) => {
         try {
             const { id } = req.params // Get the company ID from the route parameters
diff --git a/server/controllers/user.js b/server/controllers/user.js
index 2887311..9788ef8 100644
--- a/server/controllers/user.js
+++ b/server/controllers/user.js
@@ -33,6 +33,21 @@ const userController = {
             next(error)
         }
     },
+    addFavoriteCompany: async (req, res, next) => {
+        try {
+        } catch (error) {
+            next(error)
+        }
+    },
+    getFavoritesCompanies: async (req, res, next) => {
+        try {
+            const favorites = await User.find({
+                clerkId: req.auth.userId,
+            }).select('favoriteCompanies')
+        } catch (error) {
+            next(error)
+        }
+    },
 }
 
 export default userController
diff --git a/server/routes/user.js b/server/routes/user.js
index 77b9261..ba8c160 100644
--- a/server/routes/user.js
+++ b/server/routes/user.js
@@ -5,5 +5,7 @@ const userRouter = express.Router()
 
 userRouter.post('/', userController.addUser)
 userRouter.get('/', userController.getAllUsers)
+userRouter.get('/favorites', userController.getFavoritesCompanies)
+userRouter.post('/favorites', userController.addFavoriteCompany)
 
 export default userRouter
diff --git a/src/components/ReviewList/ReviewList.jsx b/src/components/ReviewList/ReviewList.jsx
index 90fbf8a..d1767d9 100644
--- a/src/components/ReviewList/ReviewList.jsx
+++ b/src/components/ReviewList/ReviewList.jsx
@@ -4,97 +4,141 @@ import './reviewList.css';
 const categories = [
   "accountability",
   "representation",
-  "work-life-balance",
-  "career-growth",
-  "diversity-scale",
-  "company-culture",
+  "workLifeBalance",
+  "careerGrowth",
+  "diversityScale",
+  "companyCulture",
   "salaries",
 ];
 
-const ReviewList = (props) => {
-  const [ratings, setRatings] = useState({});
-  const [comment, setComment] = useState("");
-  const [newCompany, setNewCompany] = useState("");
-
-  const handleMouseOver = (category, value) => {
-    setRatings((prev) => ({
-      ...prev,
-      [`${category}-hover`]: value,
-    }));
-  };
-
-  const handleMouseLeave = (category) => {
-    setRatings((prev) => ({
-      ...prev,
-      [`${category}-hover`]: undefined,
-    }));
-  };
-
-  const handleClick = (category, value) => {
-    setRatings((prev) => ({
-      ...prev,
-      [category]: value,
-    }));
-  };
-
-  const handleSubmit = () => {
-    const companyName = props.company;
-
-    if (!companyName) {
-      alert("Please select or add a company name.");
-      return;
+
+const ReviewList =  (props) => {
+    const [ratings, setRatings] = useState({})
+    const [comment, setComment] = useState('')
+    // const [newCompany, setNewCompany] = useState("");
+    
+    console.log(ratings)
+
+    const handleMouseOver = (category, value) => {
+        setRatings((prev) => ({
+            ...prev,
+            [`${category}-hover`]: value,
+        }))
+    }
+
+    const handleMouseLeave = (category) => {
+        setRatings((prev) => ({
+            ...prev,
+            [`${category}-hover`]: undefined,
+        }))
     }
 
-    if (categories.some((category) => !ratings[category])) {
-      alert("Please rate all categories before submitting.");
-      return;
+    const handleClick = (category, value) => {
+        setRatings((prev) => ({
+            ...prev,
+            [category]: value,
+        }))
     }
 
-    console.log({ companyName, ratings, comment });
-    alert("Review submitted successfully!");
-  };
-
-  
-  return (
-    <div>
-      <div className="rating-section">
-        {categories.map((category) => (
-          <div key={category} className="rating-category">
-            <label>{category.split('-').join(' ')}:</label>
-            <div className="star-rating">
-              {[1, 2, 3, 4, 5].map((value) => (
-                <img
-                  key={value}
-                  src={
-                    value <= (ratings[`${category}-hover`] || ratings[category])
-                      ? "../../public/img/star-yellow.png"
-                      : "../../public/img/star-white-transp.png"
-                  }
-                  alt="star"
-                  className="star"
-                  onMouseOver={() => handleMouseOver(category, value)}
-                  onMouseLeave={() => handleMouseLeave(category)}
-                  onClick={() => handleClick(category, value)}
-                />
-              ))}
+    const handleSubmit = async () => {
+        const companyName = props.company
+        const position = props.position
+        let newRatings = {}
+        for(let rating in ratings){
+            if(ratings[rating] !== undefined){
+                newRatings[rating] = ratings[rating]
+
+            }
+        }
+        console.log(newRatings)
+        
+        const reviewData = {
+            companyName,
+            position,
+            newRatings,
+            comment,
+        };
+        
+        if (!companyName || !position) {
+            alert('Please select or add a company name and role.')
+            return
+        }
+
+        if (categories.some((category) => !ratings[category])) {
+            alert('Please rate all categories before submitting.')
+            return
+        }
+
+        console.log({reviewData})
+        alert('Review submitted successfully!')
+
+
+
+        try {
+            const response = await fetch(`/api/review/${companyName}`, {
+                 method: 'POST',
+                 headers: {
+                     'Content-Type': 'application/json',
+                 },
+                 body: JSON.stringify(reviewData),
+            });
+            if (!response.ok) {
+                console.log({reviewData})
+                throw new Error (`Response status: ${response.status}`)
+            }
+            const responseData = await response.json()
+            console.log(`Response received: ${responseData}`);
+        } catch (error) {
+             console.log(error)
+        }
+
+    }
+    return (
+        <div>
+            <div className="rating-section">
+                {categories.map((category) => (
+                    <div key={category} className="rating-category">
+                        <label>{category.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, str => str.toUpperCase())}:</label>
+                        <div className="star-rating">
+                            {[1, 2, 3, 4, 5].map((value) => (
+                                <img
+                                    key={value}
+                                    src={
+                                        value <=
+                                        (ratings[`${category}-hover`] ||
+                                            ratings[category])
+                                            ? '../../public/img/star-yellow.png'
+                                            : '../../public/img/star-white-transp.png'
+                                    }
+                                    alt="star"
+                                    className="star"
+                                    onMouseOver={() =>
+                                        handleMouseOver(category, value)
+                                    }
+                                    onMouseLeave={() =>
+                                        handleMouseLeave(category)
+                                    }
+                                    onClick={() => handleClick(category, value)}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                ))}
             </div>
-          </div>
-        ))}
-      </div>
-
-      <textarea
-        id="comment"
-        rows="5"
-        placeholder="Add a comment"
-        value={comment}
-        onChange={(e) => setComment(e.target.value)}
-      />
-
-      <button id="submit-review" onClick={handleSubmit}>
-        Submit
-      </button>
-    </div>
-  );
+
+            <textarea
+                id="comment"
+                rows="5"
+                placeholder="Add a comment"
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+            />
+
+            <button id="submit-review" onClick={handleSubmit}>
+                Submit
+            </button>
+        </div>
+    )
 };
 
 export default ReviewList;
diff --git a/src/pages/Review/Review.jsx b/src/pages/Review/Review.jsx
index 48eb216..be3381b 100644
--- a/src/pages/Review/Review.jsx
+++ b/src/pages/Review/Review.jsx
@@ -1,24 +1,65 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import ReviewList from "../../components/ReviewList/ReviewList.jsx"
 import './review.css'
 
 const Review = () => {
   const [selectedCompany, setSelectedCompany] = useState("");
+  const [position, setPosition] = useState('')
+  const [companies, setCompanies] = useState([]);
 
+  useEffect(() => {
+    const fetchCompanies = async () => {
+        try {
+            const response = await fetch("/api/company");
+            console.log({response});
+            if (!response.ok) throw new Error("Failed to fetch companies.");
+
+            const data = await response.json();
+            console.log(data.companies)
+            setCompanies(data.companies); 
+
+            
+        } catch (error) {
+            console.error("Error fetching companies:", error);
+        }
+    };
+
+    fetchCompanies();
+}, []);
   return (
-    <main className="review-form-container">
-        <h1>Review Form</h1>
-
-        <label htmlFor = "company-select">Select a company:</label>
-        <select onChange={(e) => setSelectedCompany(e.target.value)} id="company-select">
-          <option value="" disabled selected>Choose an existing company</option>
-          <option value="Facebook">Facebook</option>
-          <option value="Google">Google</option>
-          <option value="Apple">Apple</option>
-        </select>
-        <input type="text" id="new-company" placeholder="Or add a new company name" />
-        <ReviewList company = {selectedCompany}/>
-        
+      <main className="review-form-container">
+          <h1>Review Form</h1>
+
+          <label htmlFor="company-select">Select a company:</label>
+          <select
+              onChange={(e) => setSelectedCompany(e.target.value)}
+              id="company-select"
+          >
+              <option value="" defaultValue> Choose an existing company </option>
+
+              {companies.map((company)=>(<option key={company.name} value={company.name}>{company.name}</option>))}
+              
+          </select>
+          
+          {/* Roles Dropdown */}
+          <select onChange={(e) => setPosition(e.target.value)} id="position-select">
+              <option value="" defaultValue> Choose your position at your company </option>
+
+              <option value="Technical + Operations">
+                  Technical + Operations
+              </option>
+              <option value="Administration and Support">
+                  Administration and Support
+              </option>
+              <option value="Leadership and Strategy">
+                  Leadership and Strategy
+              </option>
+              <option value="Client and Service Delivery">
+                  Client and Service Delivery
+              </option>
+          </select>
+          {/* <input type="text" id="new-company" placeholder="Or add a new company name" /> */}
+          <ReviewList company={selectedCompany} position={position} />
       </main>
   )
 }