diff --git a/Section 11/code/04-adding-individual-meal-items/src/components/Layout/Header.module.css b/Section 11/code/04-adding-individual-meal-items/src/components/Layout/Header.module.css
new file mode 100644
index 000000000..5dedcb114
--- /dev/null
+++ b/Section 11/code/04-adding-individual-meal-items/src/components/Layout/Header.module.css	
@@ -0,0 +1,29 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 5rem;
+  background-color: #8a2b06;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  z-index: 10;
+}
+
+.main-image {
+  width: 100%;
+  height: 25rem;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.main-image img {
+  width: 110%;
+  height: 100%;
+  object-fit: cover;
+  transform: rotateZ(-5deg) translateY(-4rem) translateX(-1rem);
+}
\ No newline at end of file
diff --git a/Section 11/code/04-adding-individual-meal-items/src/components/Layout/HeaderCartButton.js b/Section 11/code/04-adding-individual-meal-items/src/components/Layout/HeaderCartButton.js
new file mode 100644
index 000000000..4ce14bbee
--- /dev/null
+++ b/Section 11/code/04-adding-individual-meal-items/src/components/Layout/HeaderCartButton.js	
@@ -0,0 +1,11 @@
+import CartIcon from "../Cart/CartIcon"
+import classes from "./HeaderCartButton.module.css"
+const HeaderCartButton = props => {
+    return <button className={classes.button}>
+        <span className={classes.icon}><CartIcon /></span>
+        <span>Your cart</span>
+        <span className={classes.badge}>3</span>
+    </button>
+}
+
+export default HeaderCartButton
\ No newline at end of file
diff --git a/Section 11/code/04-adding-individual-meal-items/src/components/Layout/HeaderCartButton.module.css b/Section 11/code/04-adding-individual-meal-items/src/components/Layout/HeaderCartButton.module.css
new file mode 100644
index 000000000..c1bb7fe4a
--- /dev/null
+++ b/Section 11/code/04-adding-individual-meal-items/src/components/Layout/HeaderCartButton.module.css	
@@ -0,0 +1,59 @@
+.button {
+    cursor: pointer;
+    font: inherit;
+    border: none;
+    background-color: #4d1601;
+    color: white;
+    padding: 0.75rem 3rem;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border-radius: 25px;
+    font-weight: bold;
+  }
+  
+  .button:hover,
+  .button:active {
+    background-color: #2c0d00;
+  }
+  
+  .icon {
+    width: 1.35rem;
+    height: 1.35rem;
+    margin-right: 0.5rem;
+  }
+  
+  .badge {
+    background-color: #b94517;
+    padding: 0.25rem 1rem;
+    border-radius: 25px;
+    margin-left: 1rem;
+    font-weight: bold;
+  }
+  
+  .button:hover .badge,
+  .button:active .badge {
+    background-color: #92320c;
+  }
+  
+  .bump {
+    animation: bump 300ms ease-out;
+  }
+  
+  @keyframes bump {
+    0% {
+      transform: scale(1);
+    }
+    10% {
+      transform: scale(0.9);
+    }
+    30% {
+      transform: scale(1.1);
+    }
+    50% {
+      transform: scale(1.15);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
\ No newline at end of file
diff --git a/Section 11/code/04-adding-individual-meal-items/src/components/Meals/AvailableMeals.js b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/AvailableMeals.js
new file mode 100644
index 000000000..6bd65e396
--- /dev/null
+++ b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/AvailableMeals.js	
@@ -0,0 +1,38 @@
+import Card from "../UI/Card";
+import classes from "./AvailableMeals.module.css"
+import MealItem from "./MealItem/MealItem.js";
+const DUMMY_MEALS = [
+    {
+      id: 'm1',
+      name: 'Sushi',
+      description: 'Finest fish and veggies',
+      price: 22.99,
+    },
+    {
+      id: 'm2',
+      name: 'Schnitzel',
+      description: 'A german specialty!',
+      price: 16.5,
+    },
+    {
+      id: 'm3',
+      name: 'Barbecue Burger',
+      description: 'American, raw, meaty',
+      price: 12.99,
+    },
+    {
+      id: 'm4',
+      name: 'Green Bowl',
+      description: 'Healthy...and green...',
+      price: 18.99,
+    },
+  ];
+
+  const AvailableMeals = () => {
+    const mealList = DUMMY_MEALS.map(meal => <MealItem key={meal.id} name={meal.name} price={meal.price} description={meal.description} />)
+    return <section className={classes.meals}>
+        <Card><ul>{mealList}</ul></Card>
+    </section>
+  }
+
+  export default AvailableMeals;
diff --git a/Section 11/code/04-adding-individual-meal-items/src/components/Meals/AvailableMeals.module.css b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/AvailableMeals.module.css
new file mode 100644
index 000000000..1dad46c22
--- /dev/null
+++ b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/AvailableMeals.module.css	
@@ -0,0 +1,24 @@
+.meals {
+    max-width: 60rem;
+    width: 90%;
+    margin: 2rem auto;
+    animation: meals-appear 1s ease-out forwards;
+  }
+  
+  .meals ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  
+  @keyframes meals-appear {
+    from {
+      opacity: 0;
+      transform: translateY(3rem);
+    }
+  
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
\ No newline at end of file
diff --git a/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealItem/MealItem.js b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealItem/MealItem.js
new file mode 100644
index 000000000..fafa49e6e
--- /dev/null
+++ b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealItem/MealItem.js	
@@ -0,0 +1,15 @@
+import classes from "./MealItem.module.css"
+
+const MealItem = props => {
+    const price = `$${props.price.toFixed(2)}`
+    return <li className={classes.meal}>
+        <div>
+            <h3>{props.name}</h3>
+            <div className={classes.description}> {props.description}</div>
+            <div className={classes.price}>{price}</div>
+        </div>
+        <div></div>
+    </li>
+}
+
+export default MealItem
\ No newline at end of file
diff --git a/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealItem/MealItem.module.css b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealItem/MealItem.module.css
new file mode 100644
index 000000000..de6496b9f
--- /dev/null
+++ b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealItem/MealItem.module.css	
@@ -0,0 +1,22 @@
+.meal {
+    display: flex;
+    justify-content: space-between;
+    margin: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #ccc;
+  }
+  
+  .meal h3 {
+    margin: 0 0 0.25rem 0;
+  }
+  
+  .description {
+    font-style: italic;
+  }
+  
+  .price {
+    margin-top: 0.25rem;
+    font-weight: bold;
+    color: #ad5502;
+    font-size: 1.25rem;
+  }
\ No newline at end of file
diff --git a/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealsSummary.js b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealsSummary.js
new file mode 100644
index 000000000..e71b7bfcd
--- /dev/null
+++ b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealsSummary.js	
@@ -0,0 +1,18 @@
+import classes from './MealsSummary.module.css';
+const MealsSummary = () => {
+    return (
+      <section className={classes.summary}>
+        <h2>Delicious Food, Delivered To You</h2>
+        <p>
+          Choose your favorite meal from our broad selection of available meals
+          and enjoy a delicious lunch or dinner at home.
+        </p>
+        <p>
+          All our meals are cooked with high-quality ingredients, just-in-time and
+          of course by experienced chefs!
+        </p>
+      </section>
+    );
+  };
+  
+  export default MealsSummary;
\ No newline at end of file
diff --git a/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealsSummary.module.css b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealsSummary.module.css
new file mode 100644
index 000000000..d204a3875
--- /dev/null
+++ b/Section 11/code/04-adding-individual-meal-items/src/components/Meals/MealsSummary.module.css	
@@ -0,0 +1,18 @@
+.summary {
+    text-align: center;
+    max-width: 45rem;
+    width: 90%;
+    margin: auto;
+    margin-top: -10rem;
+    position: relative;
+    background-color: #383838;
+    color: white;
+    border-radius: 14px;
+    padding: 1rem;
+    box-shadow: 0 1px 18px 10px rgba(0, 0, 0, 0.25);
+  }
+  
+  .summary h2 {
+    font-size: 2rem;
+    margin-top: 0;
+  }