diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..50a1c893
Binary files /dev/null and b/.DS_Store differ
diff --git a/web-frontend/.DS_Store b/web-frontend/.DS_Store
new file mode 100644
index 00000000..c24de7bf
Binary files /dev/null and b/web-frontend/.DS_Store differ
diff --git a/web-frontend/src/.DS_Store b/web-frontend/src/.DS_Store
index dbd07c1a..f1307d8f 100644
Binary files a/web-frontend/src/.DS_Store and b/web-frontend/src/.DS_Store differ
diff --git a/web-frontend/src/App.js b/web-frontend/src/App.js
index 9ef1664f..e6c63ac1 100644
--- a/web-frontend/src/App.js
+++ b/web-frontend/src/App.js
@@ -11,6 +11,7 @@ import NavigationBarAndFooterSignedIn from './components/navigation_bars_and_foo
 import NavigationBarAndFooterSignedOut from './components/navigation_bars_and_footer/signed_out/NavigationBarAndFooterSignedOut';
 import CreateRecipe from './routes/CreateRecipe/CreateRecipe';
 import SearchRecipes from './routes/SearchRecipes/SearchRecipes';
+import Home from './components/homepage';
 
 function App() {
 
@@ -54,6 +55,7 @@ function App() {
           <Route path='forgotPassword' element={<ForgotPassword />} />
           <Route path='createRecipe' element={<CreateRecipe />} />
           <Route path='searchRecipes' element={<SearchRecipes />} />
+          <Route path='home' element={<Home/>}/>
         </Route>
       </Routes>
     </Router>
diff --git a/web-frontend/src/Images/.DS_Store b/web-frontend/src/Images/.DS_Store
new file mode 100644
index 00000000..7c100325
Binary files /dev/null and b/web-frontend/src/Images/.DS_Store differ
diff --git a/web-frontend/src/Images/21227.jpg b/web-frontend/src/Images/21227.jpg
new file mode 100644
index 00000000..4e58e073
Binary files /dev/null and b/web-frontend/src/Images/21227.jpg differ
diff --git a/web-frontend/src/Images/2150777679.jpg b/web-frontend/src/Images/2150777679.jpg
new file mode 100644
index 00000000..36bbadcb
Binary files /dev/null and b/web-frontend/src/Images/2150777679.jpg differ
diff --git a/web-frontend/src/Images/41330_user_purple_icon.png b/web-frontend/src/Images/41330_user_purple_icon.png
new file mode 100644
index 00000000..2844795a
Binary files /dev/null and b/web-frontend/src/Images/41330_user_purple_icon.png differ
diff --git a/web-frontend/src/Images/80866.jpg b/web-frontend/src/Images/80866.jpg
new file mode 100644
index 00000000..9498d144
Binary files /dev/null and b/web-frontend/src/Images/80866.jpg differ
diff --git a/web-frontend/src/components/homepage.jsx b/web-frontend/src/components/homepage.jsx
new file mode 100644
index 00000000..a8666162
--- /dev/null
+++ b/web-frontend/src/components/homepage.jsx
@@ -0,0 +1,70 @@
+import react from "react";
+import '../styles/auth.css';
+
+
+function Home(){
+    return(
+        <><><div className="navBar">
+            <nav id="navbar" className="navbar">
+                <ul>
+                    <li>
+                        <a className="nav-link scrollto active" href="index.html">
+                            Home
+                        </a>
+                    </li>
+                    <li>
+                        <a className="nav-link scrollto" href="#about">
+                            About
+                        </a>
+                    </li>
+                    <li>
+                        <a className="nav-link scrollto" href="#services">
+                            Services
+                        </a>
+                    </li>
+                    <li>
+                        <a className="nav-link scrollto" href="#contact">
+                            Contact
+                        </a>
+                    </li>
+                </ul>
+                <img src={require('../Images/41330_user_purple_icon.png')} alt="pro" className="pro" />
+            </nav>
+        </div></>
+        <div className="main">
+
+            <br /><br />
+
+            <input type="search" name="searchcard" id="sc" className="searchcard" placeholder="Search" />
+            
+            <section className="NutriCard-section">
+            
+            <div className="card" id="card1" >
+            <img src={require('../Images/21227.jpg')} alt="Nutrihelp 1" className="Nutrihelp 1" />
+                <h3>Balanced Essentials</h3>
+                <p>A well-rounded meal plan featuring nutrient-rich options like <br /> oatmeal, grilled chicken, and wholesome grains for a balanced and satisfying diet.</p>
+                <a href="" onClick={() => showDetail('card1')}>View</a>
+            </div>
+
+            <div className="card" id="card2">
+            <img src={require('../Images/80866.jpg')} alt="Nutrihelp 2" className="Nutrihelp 2" />
+                <h3>Energize & Revitalize</h3>
+                <p>Revitalize your energy with this plan that includes whole foods such as <br /> avocado toast, lean proteins, and energizing snacks like nuts and fruit.</p>
+                <a href=""  onClick={() => showDetail('card2')}>View</a>
+            </div>
+
+            <div className="card" id="card3">
+            <img src={require('../Images/2150777679.jpg')} alt="Nutrihelp 3" className="Nutrihelp 3" />
+                <h3>Plant-Powered Delight</h3>
+                <p>Embrace a plant-based delight with this vegan-friendly plan, featuring nutrient-packed meals like chickpea curry, quinoa-stuffed peppers, and vibrant, plant-powered options.</p>
+                <a href="" onClick={() => showDetail('card3')}>View</a>
+            </div>
+            </section>
+            <br /><br />
+            <button>Add More</button> <hr />
+        </div></>
+
+    )
+}
+
+export default Home;
\ No newline at end of file
diff --git a/web-frontend/src/styles/auth.css b/web-frontend/src/styles/auth.css
index 44dd907e..32ef76e7 100644
--- a/web-frontend/src/styles/auth.css
+++ b/web-frontend/src/styles/auth.css
@@ -596,3 +596,236 @@ label {
     margin-bottom: 10px; } }
 
 
+    body {
+      background-color: rgb(245, 243, 246);
+    }
+    
+    .container {
+      display: flex;
+      margin-top: 10%;
+      width: 48%;
+      border-radius: 20px;
+      height: 500px;
+    
+    }
+    
+    .left-side {
+      flex: 1;
+      background-color: rgb(119, 104, 159);
+      padding: 20px;
+      border-radius: 20px 0 0 20px;
+      text-align: center;
+      color: white;
+    
+    }
+    
+    .right-side {
+      flex: 1;
+      padding: 20px;
+      border-radius: 0 20px 20px 0;
+      background-color: white;
+      box-shadow: -4px 0 6px -4px rgba(0, 0, 0, 0.1);
+    }
+    
+    h1 {
+      font-family: "Montserrat", "sans-serif";
+      margin-top: 40%;
+    }
+    
+    h2{
+      font-family: "Montserrat", "sans-serif";
+      font-size: 40px;
+      text-align: center;
+    }
+    
+    h3 {
+      font-family: "Montserrat", "sans-serif";
+      font-size: medium;
+    }
+    .text{
+      margin-left: 10%;
+    }
+    .signIN, .signUP {
+      padding: 10px 20px;
+      font-size: 16px;
+      background-color: rgb(119, 104, 159);
+      color: #ffffff;
+      border: 1px solid #ffffff;
+      border-radius: 20px;
+      cursor: pointer;
+      margin-top: 10px;
+      transition: background-color 0.3s ease-in-out;
+      font-family: "Montserrat", "sans-serif";
+    }
+    
+    .signUP{
+      margin-left: 35%;
+      margin-top: -2px;
+    }
+    
+    .signIN:hover, .signUP:hover {
+      background-color: #2980b9;
+    }
+    
+    .fb, .ggle, .li {
+      border: 0.5px solid black;
+      border-radius: 20px;
+      width: 8%;
+      height: auto;
+      margin: 5px;
+      cursor: pointer;
+      margin-left: 15%;
+    }
+    
+    form {
+      text-align: left;
+      font-family: "Montserrat", "sans-serif";
+    }
+    
+    label {
+      display: block;
+      margin-bottom: 5px;
+      color: #333;
+    }
+    
+    input {
+      width: 100%;
+      padding: 8px;
+      margin-bottom: 10px;
+      box-sizing: border-box;
+      font-family: "Montserrat", "sans-serif";
+      border-radius: 18px;
+      border: 1px solid black;
+    }
+    
+    .navbar {
+      padding: 10px;
+      margin-left: 40%;
+    }
+    .navbar ul {
+      margin: 0;
+      padding: 10px;
+      display: flex;
+      list-style: none;
+      align-items: center;
+    }
+    
+    .navbar li {
+      position: relative;
+    }
+    
+    .navbar a,
+    .navbar a:focus {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 0 10px 30px;
+      font-family: "Montserrat", sans-serif;
+      font-size: 15px;
+      font-weight: 600;
+      color: #000000;
+      white-space: nowrap;
+      transition: 0.3s;
+      text-transform: uppercase;
+    }
+    
+    .navbar a i,
+    .navbar a:focus i {
+      font-size: 12px;
+      line-height: 0;
+      margin-left: 5px;
+    }
+    
+    .navbar a:hover,
+    .navbar .active,
+    .navbar .active:focus,
+    .navbar li:hover>a {
+      color: #8531ce;
+    }
+    
+    .pro{
+      width: 5%;
+      height: auto;
+    }
+    
+    .searchcard{
+      width: 30%;
+      height: auto;
+      text-align: center;
+      margin-left: 35%;
+      border:1px solid rgb(119, 104, 159);
+    }
+    
+    .NutriCard-section {
+      display: flex;
+      justify-content: space-between;
+      padding: 30px;
+    }
+    
+    .card {
+      flex: 1;
+      text-align: center;
+      padding: 20px;
+      background-color: #fff;
+      border: 1px solid #ccc;
+      border-radius: 25px;
+      margin: 10px;
+      transition: transform 0.5s, box-shadow 0.3s;
+      overflow: hidden;
+      height: 600px;
+      width: 300px;
+    }
+    
+    .card:hover {
+      border: 1px solid dodgerblue;
+      transform: scale(1.05);
+      box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    .card img {
+      width: 100%; 
+      height: auto; 
+      object-fit: cover;
+      border-radius: 15px;
+    }
+    
+    .card p {
+      margin: 20px 0;
+    }
+    
+    .card a {
+      display: block;
+      margin: 10px 0;
+      text-decoration: none;
+      background-color: rgb(119, 104, 159);
+      color: #fff;
+      padding: 10px 20px;
+      border-radius: 20px;
+      width: 12%;
+      margin-left: 40%;
+    }
+    
+    .card a:hover {
+      border: 1px solid #777;
+    }
+    button {
+      font-family: 'Roboto', sans-serif;
+      width: 8%;
+      height: 100%;
+      background-color: rgb(2, 102, 223);
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px;
+      margin-left: 45%;
+      cursor: pointer;
+      border-radius: 25px;
+    }
+    
+    button:hover {
+      background-color: rgb(44, 145, 246);
+      border-radius: 25px;
+    }
\ No newline at end of file