diff --git a/src/App.jsx b/src/App.jsx
index 0218d5b..ba9c14b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,22 +1,59 @@
+import { useState } from "react";
+
 import Footer from "./Footer";
 import Header from "./Header";
+import Menu from "./Menu";
+
+
 
 function App() {
+
+const [currentOrder, setCurrentOrder] = useState([])
+const [total, setTotal] = useState(0)
+
+const handleOrder = (item) => {
+  setCurrentOrder([...currentOrder, item])
+  setTotal(total + item.price)
+}
+
+const removeOrder = (index, price) => {
+  const updatedOrder = [...currentOrder];
+  updatedOrder.splice(index, 1);
+  setCurrentOrder(updatedOrder);
+  setTotal(total - price)
+ 
+}
+
+ const closeOrder = () => {
+  setTotal(0)
+  setCurrentOrder([])
+ }
+
+
   return (
     <div className="App">
       <Header />
       <main>
         <aside>
-          <table></table>
+          <Menu handleOrder = {handleOrder}/>
         </aside>
         <section>
           <div>
             <h2>Current Order</h2>
-            <ul></ul>
-            <h4>Total:</h4>
+            <ul>
+              {currentOrder.map((item, i) => 
+              <li key={i}>
+               <span onClick={() => {removeOrder(i, item.price)}}>❌</span>
+               <span>{item.name}</span>
+               <span>${item.price}</span>
+              </li>
+
+              )}
+            </ul>
+            <h4>Total:${total}</h4>
             <div>
               <button>Tidy order</button>
-              <button>Close order</button>
+              <button onClick= {closeOrder}>Close order</button>
             </div>
           </div>
         </section>
@@ -27,3 +64,4 @@ function App() {
 }
 
 export default App;
+
diff --git a/src/Menu.css b/src/Menu.css
new file mode 100644
index 0000000..4e41e03
--- /dev/null
+++ b/src/Menu.css
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+.header {
+   text-align: center;
+   text-decoration: 2px underline black;
+   padding-top: 0em; 
+}
\ No newline at end of file
diff --git a/src/Menu.jsx b/src/Menu.jsx
new file mode 100644
index 0000000..f661cc9
--- /dev/null
+++ b/src/Menu.jsx
@@ -0,0 +1,37 @@
+
+import menuItems from "./data";
+
+import  "./Menu.css"
+
+
+
+function Menu({handleOrder}) {
+
+
+
+    return (
+        <div>
+            <h2 className= "header">Welcome here is our menu, Enjoy !</h2>
+            <table>
+                <tbody>
+                {menuItems.map((item) => 
+                
+        <tr key= {item.id} onClick={() => handleOrder(item)}>
+            
+            <td>{item.image}</td>
+            <td className= "item-name"> <span>{item.name}</span> <br/> 
+            <span>
+                { "🌶️".repeat(item.spiceLevel)}
+                </span></td>
+            <td> $ {item.price}</td> 
+        </tr>
+    )}
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+
+
+export default Menu
\ No newline at end of file
diff --git a/src/index.jsx b/src/index.jsx
index 159616e..fe5542b 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,7 +1,7 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import "./index.css";
 
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);