diff --git a/src/App.js b/src/App.js
index 8325f48..213720b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,26 @@
-import React from "react";
+import React, { useState } from "react";
 
 import Header from "./components/Layout/Header";
 import Meals from "./components/Meals/Meals";
 import Cart from "./components/Cart/Cart";
 
 const App = () => {
+  const [cartIsShown, setCartIsShown] = useState(false);
+
+  const showCartHandler = () => {
+    setCartIsShown(true);
+  };
+
+  const hideCartHandler = () => {
+    setCartIsShown(false);
+  };
+
   return (
     <>
-      <Cart />
-      <Header />
+      {cartIsShown && (
+        <Cart onShowCart={showCartHandler} onHideCart={hideCartHandler} />
+      )}
+      <Header onShowCart={showCartHandler} />
       <main>
         <Meals />
       </main>
diff --git a/src/components/Cart/Cart.js b/src/components/Cart/Cart.js
index 9afe23e..c449a4d 100644
--- a/src/components/Cart/Cart.js
+++ b/src/components/Cart/Cart.js
@@ -11,14 +11,16 @@ const Cart = (props) => {
   );
 
   return (
-    <Modal>
+    <Modal onShowCart={props.onShowCart} onHideCart={props.onHideCart}>
       {cartItems}
       <div className={classes.total}>
         <span>Total Amount</span>
         <span>35.63</span>
       </div>
       <div className={classes.actions}>
-        <button className={classes["button--alt"]}>Close</button>
+        <button className={classes["button--alt"]} onClick={props.onHideCart}>
+          Close
+        </button>
         <button className={classes.button}>Order</button>
       </div>
     </Modal>
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index fdd661e..a24038a 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -4,12 +4,12 @@ import mealsImage from "../../assets/meals.jpg";
 import classes from "./Header.module.css";
 import HeaderCartButton from "./HeaderCartButton";
 
-const Header = () => {
+const Header = (props) => {
   return (
     <>
       <header className={classes.header}>
         <h1>ReactMeals</h1>
-        <HeaderCartButton />
+        <HeaderCartButton onShowCart={props.onShowCart} />
       </header>
       <div className={classes["main-image"]}>
         <img src={mealsImage} alt="A table full of delicious food!" />
diff --git a/src/components/Layout/HeaderCartButton.js b/src/components/Layout/HeaderCartButton.js
index adf6271..f67b123 100644
--- a/src/components/Layout/HeaderCartButton.js
+++ b/src/components/Layout/HeaderCartButton.js
@@ -3,7 +3,7 @@ import classes from "./HeaderCartButton.module.css";
 
 const HeaderCartButton = (props) => {
   return (
-    <button className={classes.button}>
+    <button className={classes.button} onClick={props.onShowCart}>
       <span className={classes.icon}>
         <CartIcon />
       </span>
diff --git a/src/components/UI/Modal.js b/src/components/UI/Modal.js
index cc5e9ea..ebbf280 100644
--- a/src/components/UI/Modal.js
+++ b/src/components/UI/Modal.js
@@ -2,7 +2,7 @@ import classes from "./Modal.module.css";
 import ReactDOM from "react-dom";
 
 const Backdrop = (props) => {
-  return <div className={classes.backdrop}></div>;
+  return <div className={classes.backdrop} onClick={props.onHideCart}></div>;
 };
 
 const ModalOverlay = (props) => {
@@ -18,7 +18,10 @@ const portalElement = document.getElementById("root-overlays");
 const Modal = (props) => {
   return (
     <>
-      {ReactDOM.createPortal(<Backdrop />, portalElement)}
+      {ReactDOM.createPortal(
+        <Backdrop onHideCart={props.onHideCart} />,
+        portalElement
+      )}
       {ReactDOM.createPortal(
         <ModalOverlay>{props.children}</ModalOverlay>,
         portalElement