diff --git a/client/src/App.js b/client/src/App.js
index abd6c12912b2b956dd2de08b857a6bb9efc19e9f..e676230da434dabf42e7a8283f436a22d465b349 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -2,10 +2,12 @@ import logo from './logo.svg';
 import './App.css';
 import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css'
 import Navbar from './components/Navbar';
+import Homescreen from './screens/Homescreen';
 function App() {
   return (
     <div className="App">
       <Navbar/>
+      <Homescreen/>
     </div>
   );
 }
diff --git a/client/src/coffeesdata.js b/client/src/coffeesdata.js
new file mode 100644
index 0000000000000000000000000000000000000000..2afcb5d6608ca89a843be742f4b31e41b702833b
--- /dev/null
+++ b/client/src/coffeesdata.js
@@ -0,0 +1,115 @@
+const coffees =
+    [
+        {
+            name: "Latte",
+            milk: [
+                "whole milk",
+                "2% milk",
+                "almond milk",
+                "oat milk"
+            ],
+            flavor: [
+                "none",
+                "vanilla",
+                "mocha",
+                "caramel"
+            ],
+            temp: [
+                "hot",
+                "iced"
+            ],
+            prices: [
+                {
+                    "whole milk": 3.00,
+                    "2% milk": 3.00,
+                    "almond milk": 3.50,
+                    "oat milk": 3.50
+                }
+            ]
+        },
+        {
+            name: "Cold Brew",
+            milk: [
+                "none",
+                "whole milk",
+                "2% milk",
+                "almond milk",
+                "oat milk"
+            ],
+            flavor: [
+                "none",
+                "vanilla",
+                "mocha",
+                "caramel"
+            ],
+            temp: [
+                "iced"
+            ],
+            prices: [
+                {
+                    "none": 2.00,
+                    "whole milk": 2.00,
+                    "2% milk": 2.00,
+                    "almond milk": 2.50,
+                    "oat milk": 2.50
+                }
+            ]
+        },
+        {
+            name: "Cappuccino",
+            milk: [
+                "none",
+                "whole milk",
+                "2% milk",
+                "almond milk",
+                "oat milk"
+            ],
+            flavor: [
+                "none",
+                "vanilla",
+                "mocha",
+                "caramel"
+            ],
+            temp: [
+                "hot",
+                "iced"
+            ],
+            prices: [
+                {
+                    "none": 3.00,
+                    "whole milk": 3.00,
+                    "2% milk": 3.00,
+                    "almond milk": 3.50,
+                    "oat milk": 3.50
+                }
+            ]
+        },
+        {
+            name: "Macchiato",
+            milk: [
+                "whole milk",
+                "2% milk",
+                "almond milk",
+                "oat milk"
+            ],
+            flavor: [
+                "none",
+                "vanilla",
+                "mocha",
+                "caramel"
+            ],
+            temp: [
+                "hot",
+                "iced"
+            ],
+            prices: [
+                {
+                    "whole milk": 3.00,
+                    "2% milk": 3.00,
+                    "almond milk": 3.50,
+                    "oat milk": 3.50
+                }
+            ]
+        },
+    ];
+export default coffees
\ No newline at end of file
diff --git a/client/src/components/Coffee.js b/client/src/components/Coffee.js
new file mode 100644
index 0000000000000000000000000000000000000000..579a6ba9c80c9b743617a7b1bdc2435b530a04eb
--- /dev/null
+++ b/client/src/components/Coffee.js
@@ -0,0 +1,40 @@
+import React from 'react'
+
+
+export default function Coffee({coffee}) {
+
+
+    return(
+        <div>
+             <h1>{coffee.name}</h1>
+
+             <div className="flex-container">
+             <div className="w-100 m-1">
+                <p>Milk</p>
+                <select>
+                {coffee.milk.map((milk) => {
+                            return <option value={milk}>{milk}</option>;
+                        })}
+                </select>
+                
+            </div>
+
+            <div className="w-100 m-1">
+                <p>Prices</p>
+            </div>
+
+
+
+        </div>
+       
+
+        
+
+
+
+    </div >
+
+
+       
+    )
+}
diff --git a/client/src/screens/Homescreen.js b/client/src/screens/Homescreen.js
new file mode 100644
index 0000000000000000000000000000000000000000..90ada852c61f5cc96553f2bf0d79c22cf620ce49
--- /dev/null
+++ b/client/src/screens/Homescreen.js
@@ -0,0 +1,25 @@
+import React from 'react'
+
+import coffees from '../coffeesdata'
+import Coffee from '../components/Coffee'
+export default function Homescreen() {
+   
+
+    return (
+        <div>
+            <div className="row">
+
+                {coffees.map(coffee =>{
+                        return (
+                            <div className="col-md-3" >
+                                <div>
+                                    <Coffee coffee={coffee} />
+                                </div>
+                            </div>
+                        )
+                })}
+                   
+            </div>
+        </div>
+    )
+}