diff --git a/.env b/.env
new file mode 100644
index 0000000..e81a9d3
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+DISABLE_ESLINT_PLUGIN=true
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index f83c4fa..7745773 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -21,6 +21,7 @@
       {
         "extensions": [".js", ".jsx"]
       }
-    ]
+    ],
+        "prettier/prettier": ["error", { "endOfLine": "auto" }]
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 811566e..b282393 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,9 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "^5.0.1",
+        "rodal": "^2.0.1",
+        "sweetalert": "^2.1.2",
+        "uuid": "^9.0.0",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -5652,6 +5655,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -6948,6 +6956,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -14108,6 +14121,11 @@
         "asap": "~2.0.6"
       }
     },
+    "node_modules/promise-polyfill": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+      "integrity": "sha512-g0LWaH0gFsxovsU7R5LrrhHhWAWiHRnh1GPrhXnPgYsDkIqjRYUYSZEsej/wtleDrz5xVSIDbeKfidztp2XHFQ=="
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -14886,6 +14904,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rodal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rodal/-/rodal-2.0.1.tgz",
+      "integrity": "sha512-nb+Zn8TcIvRVNr3r4gJUd+zzxhkL3rEXu+npudvT/wJ0ukPhpMLCgQsUwhj9Kh2Via1uZrf3cQZMNiqt6n0i2g==",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": ">= ^17.0.0 || >= ^18.0.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
@@ -15327,6 +15357,14 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -15787,6 +15825,15 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/sweetalert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "dependencies": {
+        "es6-object-assign": "^1.1.0",
+        "promise-polyfill": "^6.0.2"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -16345,9 +16392,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -21286,6 +21333,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -22253,6 +22305,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -27202,6 +27259,11 @@
         "asap": "~2.0.6"
       }
     },
+    "promise-polyfill": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+      "integrity": "sha512-g0LWaH0gFsxovsU7R5LrrhHhWAWiHRnh1GPrhXnPgYsDkIqjRYUYSZEsej/wtleDrz5xVSIDbeKfidztp2XHFQ=="
+    },
     "prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -27771,6 +27833,15 @@
         "glob": "^7.1.3"
       }
     },
+    "rodal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rodal/-/rodal-2.0.1.tgz",
+      "integrity": "sha512-nb+Zn8TcIvRVNr3r4gJUd+zzxhkL3rEXu+npudvT/wJ0ukPhpMLCgQsUwhj9Kh2Via1uZrf3cQZMNiqt6n0i2g==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.6.0"
+      }
+    },
     "rollup": {
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
@@ -28091,6 +28162,13 @@
         "faye-websocket": "^0.11.3",
         "uuid": "^8.3.2",
         "websocket-driver": "^0.7.4"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
       }
     },
     "source-list-map": {
@@ -28447,6 +28525,15 @@
         }
       }
     },
+    "sweetalert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "requires": {
+        "es6-object-assign": "^1.1.0",
+        "promise-polyfill": "^6.0.2"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -28848,9 +28935,9 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
     },
     "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
     },
     "v8-to-istanbul": {
       "version": "8.1.1",
diff --git a/package.json b/package.json
index 0efde29..39240fb 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
+    "rodal": "^2.0.1",
+    "sweetalert": "^2.1.2",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/public/index.html b/public/index.html
index aa069f2..01c51a9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/App.css b/src/App.css
index 74b5e05..d7a0036 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,7 +9,7 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+    animation: App-logo-spin infinite 0.82s linear;
   }
 }
 
diff --git a/src/App.jsx b/src/App.jsx
index e97e374..26e2ffe 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,25 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
+import HomePage from './pages/HomePage';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit
-          <code>src/App.js</code>
-          and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <HomePage />
     </div>
   );
 }
diff --git a/src/Components/AddCardModal/AddCardModal.css b/src/Components/AddCardModal/AddCardModal.css
new file mode 100644
index 0000000..3e8a88f
--- /dev/null
+++ b/src/Components/AddCardModal/AddCardModal.css
@@ -0,0 +1,47 @@
+.container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  color: white;
+  text-align: left;
+}
+.container > div {
+  margin-top: 2rem;
+}
+
+.label {
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.input {
+  color: white;
+  font: inherit;
+  margin-top: 12px;
+  display: block;
+  background-color: transparent;
+  outline: none;
+  border: 1px solid rgb(98, 98, 98);
+  font-size: 1.2rem;
+  font-weight: 300;
+  padding: 10px;
+  width: 95%;
+  border-radius: 8px;
+  resize: none;
+}
+
+.saveButton {
+  width: 6rem;
+  align-self: flex-end;
+  margin-top: 1.5rem;
+  background: var(--orange-gradient);
+  border: none;
+  padding: 10px;
+  color: white;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.saveButton:disabled {
+  background: grey;
+}
diff --git a/src/Components/AddCardModal/AddCardModal.jsx b/src/Components/AddCardModal/AddCardModal.jsx
new file mode 100644
index 0000000..2fb86f0
--- /dev/null
+++ b/src/Components/AddCardModal/AddCardModal.jsx
@@ -0,0 +1,110 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useState } from 'react';
+import Rodal from 'rodal';
+import 'rodal/lib/rodal.css';
+import './AddCardModal.css';
+import { useFoodContext } from '../../context/FoodContext';
+
+function AddCardModal({
+  visible,
+  onClose,
+  foodToEdit,
+  setFoodToEdit,
+  handleCardAdd,
+}) {
+  const customStyles = {
+    background: 'rgb(58 58 58)',
+    padding: '10px',
+    width: '60%',
+    height: 'fit-content',
+    maxWidth: '30rem',
+  };
+
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    url: '',
+  });
+
+  const { editFood } = useFoodContext();
+
+  // const endForm = () => {
+  //   setFormData({ title: '', description: '', url: '' });
+  //   onclose();
+  // };
+
+  const handleSave = () => {
+    if (foodToEdit) {
+      editFood(foodToEdit.id, formData);
+      setFoodToEdit(null);
+    } else {
+      const data = formData;
+      handleCardAdd({ ...data });
+    }
+
+    onclose();
+  };
+
+  const handleChange = ({ target: { name, value } }) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  useEffect(() => {
+    if (foodToEdit) setFormData({ ...foodToEdit });
+  }, [foodToEdit]);
+
+  return (
+    <Rodal customStyles={customStyles} visible={visible} onClose={onClose}>
+      <div className="container">
+        <div>
+          <span className="label">Card Title</span>
+          <input
+            type="text"
+            className="input"
+            name="title"
+            value={formData.title}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <span className="label">Image Url</span>
+          <input
+            type="text"
+            className="input"
+            name="url"
+            value={formData.url}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div>
+          <span className="label">description</span>
+          <textArea
+            rows={10}
+            className="input"
+            value={formData.description}
+            placeholder="food description"
+            type="text"
+            name="description"
+            onChange={handleChange}
+          />
+        </div>
+
+        <button
+          type="button"
+          disabled={
+            formData.title.trim() === '' ||
+            formData.description.trim() === '' ||
+            formData.url.trim() === ''
+          }
+          className="saveButton"
+          onClick={handleSave}
+        >
+          Add
+        </button>
+      </div>
+    </Rodal>
+  );
+}
+
+export default AddCardModal;
diff --git a/src/Components/Card/Card.css b/src/Components/Card/Card.css
new file mode 100644
index 0000000..e5c0dbf
--- /dev/null
+++ b/src/Components/Card/Card.css
@@ -0,0 +1,89 @@
+.card {
+  display: flex;
+  display: inline-block;
+  background-color: #eee;
+  border: 1px solid #eee;
+  box-shadow: 0 10px 10px #000;
+  width: 300px;
+  height: 60vh;
+  border-radius: 20px;
+  padding: 20px;
+  margin: 20px;
+  user-select: none;
+}
+
+.btn {
+  background-color: rgb(73, 73, 75);
+  color: #eee;
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  margin-left: 80%;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.btn:hover {
+  background-color: rgb(175, 36, 36);
+}
+
+h5 {
+  color: rgb(73, 73, 75);
+  text-align: left;
+  font-family: 'sofia';
+  font-size: 20px;
+}
+
+p {
+  font-family: 'sofi';
+}
+
+.img {
+  align-items: center;
+  width: 100%;
+  height: 50%;
+  object-fit: contain;
+  border-radius: 30px;
+  margin-top: 40px;
+}
+
+.desc {
+  font-family: 'sofia';
+  font-weight: bold;
+  height: 40px;
+  width: 100px;
+  border-radius: 15px;
+  background-color: rgb(73, 73, 75);
+  color: #fff;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.desc:hover {
+  background-color: gainsboro;
+  color: #000;
+}
+
+.add-btn {
+  cursor: pointer;
+  margin-bottom: 20px;
+  margin-top: 20px;
+  padding: 20px;
+  border-radius: 90px;
+  color: rgb(73, 73, 75);
+  background-color: #fff;
+  border: none;
+  transition: 0.3s;
+}
+
+.add-btn:hover {
+  background-color: gainsboro;
+}
+
+.fa-solid {
+  font-size: 100px;
+}
+
+h5 {
+  text-align: center;
+}
diff --git a/src/Components/Card/Card.jsx b/src/Components/Card/Card.jsx
new file mode 100644
index 0000000..5fc5983
--- /dev/null
+++ b/src/Components/Card/Card.jsx
@@ -0,0 +1,113 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-undef */
+import React, { useState } from 'react';
+import './Card.css';
+import { v4 as uuid4 } from 'uuid';
+import swal from 'sweetalert';
+import asparagus from './asparagus.jpg';
+import pancake from './pancake.jpg';
+import salad from './salad.jpg';
+import { useFoodContext } from '../../context/FoodContext';
+import { LOCALSTORAGE } from '../../service/useStorage';
+import AddCardModal from '../AddCardModal/AddCardModal';
+
+const arrImgs = [chicken, asparagus, pancake, tomatoe, salad, springrollegg];
+
+function Card() {
+  const { foodData, setFoodData } = useFoodContext();
+
+  const [foodToEdit, setFoodToEdit] = useState(null);
+
+  const deleteCard = (id) => {
+    const prevData = LOCALSTORAGE.get('foodData');
+
+    const update = prevData.filter((food) => food.id !== id);
+    LOCALSTORAGE.save('foodData', update);
+    setFoodData([...update]);
+    //
+  };
+
+  const [modalOpened, setModalOpened] = useState(false);
+
+  const handleCardAdd = ({ title, description, url }) => {
+    const card = {
+      id: uuid4(),
+      title,
+      description,
+      url,
+    };
+
+    const updatedCard = [...LOCALSTORAGE.get('foodData'), card];
+    LOCALSTORAGE.save('foodData', updatedCard);
+    setFoodData([...updatedCard]);
+  };
+
+  const showDetails = (food) => {
+    swal(food.description);
+    // setShowPopup({ show: true, data: food });
+  };
+
+  const handleEdit = (food) => {
+    setFoodToEdit({ ...food });
+    setModalOpened(true);
+  };
+
+  return (
+    <div style={{ minHeight: 'max(500px, 60vh)' }}>
+      <div className="add">
+        {modalOpened && (
+          <AddCardModal
+            visible={modalOpened}
+            handleCardAdd={handleCardAdd}
+            foodToEdit={foodToEdit}
+            setFoodToEdit={setFoodToEdit}
+            onClose={() => setModalOpened(false)}
+          />
+        )}
+        <button
+          className="add-btn"
+          type="button"
+          onClick={() => setModalOpened(true)}
+        >
+          <i className="fa-solid fa-circle-plus" />
+        </button>
+        <h5>Add Recipe</h5>
+      </div>
+
+      {foodData?.map((food) => (
+        <div className="card" key={food.id}>
+          <button
+            className="btn"
+            type="button"
+            onClick={() => deleteCard(food.id)}
+          >
+            X
+          </button>
+          <img
+            className="img"
+            src={food.url}
+            alt={food.title || 'food image'}
+          />
+          <h5>{food.title}</h5>
+          <p>Click for more details</p>
+          <button
+            className="desc"
+            type="button"
+            onClick={() => showDetails(food)}
+          >
+            More details
+          </button>
+          <button
+            className="desc"
+            type="button"
+            onClick={() => handleEdit(food)}
+          >
+            Edit
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default Card;
diff --git a/src/Components/Card/asparagus.jpg b/src/Components/Card/asparagus.jpg
new file mode 100644
index 0000000..bcdde1e
Binary files /dev/null and b/src/Components/Card/asparagus.jpg differ
diff --git a/src/Components/Card/buger.jpg b/src/Components/Card/buger.jpg
new file mode 100644
index 0000000..9a24f7a
Binary files /dev/null and b/src/Components/Card/buger.jpg differ
diff --git a/src/Components/Card/pancake.jpg b/src/Components/Card/pancake.jpg
new file mode 100644
index 0000000..205cb0e
Binary files /dev/null and b/src/Components/Card/pancake.jpg differ
diff --git a/src/Components/Card/salad.jpg b/src/Components/Card/salad.jpg
new file mode 100644
index 0000000..2c2ce54
Binary files /dev/null and b/src/Components/Card/salad.jpg differ
diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
new file mode 100644
index 0000000..4bfbc57
--- /dev/null
+++ b/src/Components/Footer/Footer.css
@@ -0,0 +1,30 @@
+#abb {
+  width: 100%;
+  max-height: 60vh;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    url(/src/Images/footerbg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.text {
+  color: #fff;
+  text-align: left;
+  margin-top: 18px;
+  font-family: 'sofi';
+}
+
+.banks {
+  display: flex;
+  margin-left: 50%;
+  margin-top: 15px;
+}
+.bank-cards {
+  margin-left: 20px;
+}
+
+.info {
+  display: flex;
+  background-color: #171413;
+  height: 100px;
+}
\ No newline at end of file
diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
new file mode 100644
index 0000000..0dcd372
--- /dev/null
+++ b/src/Components/Footer/Footer.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import './Footer.css';
+import visa from './visa.png';
+import american from './american-express.png';
+import master from './master-card.png';
+
+function Footer() {
+  return (
+    <div>
+      <div id="abb">
+        <h1>Footer</h1>
+      </div>
+      <div className="info">
+        <h3 className="text">© 2023 - Rebase Academy license!</h3>
+        <div className="banks">
+          <div className="bank-cards">
+            <img src={visa} alt="visa" />
+          </div>
+          <div className="bank-cards">
+            <img src={american} alt="american-express" />
+          </div>
+          <div className="bank-cards">
+            <img src={master} alt="master-card" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Footer;
diff --git a/src/Components/Footer/american-express.png b/src/Components/Footer/american-express.png
new file mode 100644
index 0000000..67264c6
Binary files /dev/null and b/src/Components/Footer/american-express.png differ
diff --git a/src/Components/Footer/master-card.png b/src/Components/Footer/master-card.png
new file mode 100644
index 0000000..139434c
Binary files /dev/null and b/src/Components/Footer/master-card.png differ
diff --git a/src/Components/Footer/visa.png b/src/Components/Footer/visa.png
new file mode 100644
index 0000000..e90d44b
Binary files /dev/null and b/src/Components/Footer/visa.png differ
diff --git a/src/Components/NavBar/Delicia2.png b/src/Components/NavBar/Delicia2.png
new file mode 100644
index 0000000..5334810
Binary files /dev/null and b/src/Components/NavBar/Delicia2.png differ
diff --git a/src/Components/NavBar/NavBar.css b/src/Components/NavBar/NavBar.css
new file mode 100644
index 0000000..fc26079
--- /dev/null
+++ b/src/Components/NavBar/NavBar.css
@@ -0,0 +1,42 @@
+#abc {
+  width: 100%;
+  height: 100vh;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    url(/src/Images/main-banner.jpg);
+  background-size: cover;
+}
+nav {
+  width: 100%;
+  height: 70px;
+  background-color: #0005;
+  line-height: 50px;
+  position: fixed;
+}
+nav ul {
+  float: right;
+  margin-right: 30px;
+}
+nav ul li {
+  list-style-type: none;
+  display: inline-block;
+  transition: 0.7s all;
+}
+nav ul li:hover {
+  background-color: #088;
+}
+nav ul li a {
+  text-decoration: none;
+  color: #fff;
+  padding: 30px;
+}
+
+.del {
+  margin-right: 300px;
+  opacity: 1;
+}
+
+h4 {
+  color: #fff;
+  text-align: center;
+  font-size: 30px;
+}
diff --git a/src/Components/NavBar/NavBar.jsx b/src/Components/NavBar/NavBar.jsx
new file mode 100644
index 0000000..b663017
--- /dev/null
+++ b/src/Components/NavBar/NavBar.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import './NavBar.css';
+import del from './Delicia2.png';
+
+function NavBar() {
+  return (
+    <div>
+      <div id="abc">
+        <nav>
+          <img className="del" src={del} alt="forks" />
+          <ul>
+            <li>
+              <a href="home">Home</a>
+            </li>
+            <li>
+              <a href="menu">Menu</a>
+            </li>
+            <li>
+              <a href="dis">Discover</a>
+            </li>
+            <li>
+              <a href="about">About Us</a>
+            </li>
+            <li>
+              <a href="con">Contact Us</a>
+            </li>
+          </ul>
+        </nav>
+        <h1>Welcome to Delicia</h1>
+        <h4>GET THE FRESHEST INGREDIENTS FROM DELICIA</h4>
+      </div>
+    </div>
+  );
+}
+
+export default NavBar;
diff --git a/src/Components/NavBar/fork-icon.png b/src/Components/NavBar/fork-icon.png
new file mode 100644
index 0000000..5fb07ca
Binary files /dev/null and b/src/Components/NavBar/fork-icon.png differ
diff --git a/src/Images/footerbg.jpg b/src/Images/footerbg.jpg
new file mode 100644
index 0000000..0b01c86
Binary files /dev/null and b/src/Images/footerbg.jpg differ
diff --git a/src/Images/main-banner.jpg b/src/Images/main-banner.jpg
new file mode 100644
index 0000000..8afefa1
Binary files /dev/null and b/src/Images/main-banner.jpg differ
diff --git a/src/context/FoodContext.jsx b/src/context/FoodContext.jsx
new file mode 100644
index 0000000..0535e1c
--- /dev/null
+++ b/src/context/FoodContext.jsx
@@ -0,0 +1,39 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+/* eslint-disable react/prop-types */
+import { createContext, useContext, useState, useEffect } from 'react';
+
+import Data from '../data/data.json';
+import { LOCALSTORAGE } from '../service/useStorage';
+
+const FoodContext = createContext();
+
+export function FoodContextProvider({ children }) {
+  const [foodData, setFoodData] = useState(null);
+
+  const editFood = (id, formData) => {
+    const updates = LOCALSTORAGE.get('foodData').map((food) => {
+      if (food.id === id) return formData;
+
+      return food;
+    });
+
+    LOCALSTORAGE.save('foodData', updates);
+    setFoodData([...updates]);
+  };
+
+  useEffect(() => {
+    if (!LOCALSTORAGE.get('foodData')) LOCALSTORAGE.save('foodData', Data);
+
+    const data = LOCALSTORAGE.get('foodData');
+
+    setFoodData(data);
+  }, []);
+
+  return (
+    <FoodContext.Provider value={{ foodData, setFoodData, editFood }}>
+      {children}
+    </FoodContext.Provider>
+  );
+}
+
+export const useFoodContext = () => useContext(FoodContext);
diff --git a/src/data/data.json b/src/data/data.json
new file mode 100644
index 0000000..638f973
--- /dev/null
+++ b/src/data/data.json
@@ -0,0 +1,51 @@
+[
+  {
+    "id": 0,
+    "name": "Chicken",
+    "description": "lorem ipsum",
+    "img": "url",
+    "fav": false
+  },
+  {
+    "id": 1,
+    "name": "Asparagus",
+    "description": "lorem ipsum",
+    "img": "url",
+    "fav": false
+  },
+  {
+    "id": 2,
+    "name": "Pancake",
+    "description": "lorem ipsum",
+    "img": "url",
+    "fav": false
+  },
+  {
+    "id": 3,
+    "name": "Tomatoe Salad",
+    "description": "lorem ipsum",
+    "img": "url",
+    "fav": false
+  },
+  {
+    "id": 4,
+    "name": "Vegetable Salad",
+    "description": "lorem ipsum",
+    "img": "url",
+    "fav": false
+  },
+  {
+    "id": 5,
+    "name": "Springrollegg",
+    "description": "lorem ipsum",
+    "img": "url",
+    "fav": false
+  },
+  {
+    "id": 6,
+    "name": "Rice and Beans",
+    "description": "lorem ipsum",
+    "img": "url",
+    "fav": true
+  }
+]
diff --git a/src/index.css b/src/index.css
index ec2585e..f4becec 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,8 @@
+@import url('https://fonts.googleapis.com/css?family=Sofia');
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Sofia',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/index.js b/src/index.js
index d563c0f..51a8c43 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { FoodContextProvider } from './context/FoodContext';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <FoodContextProvider>
+      <App />
+    </FoodContextProvider>
   </React.StrictMode>
 );
 
diff --git a/src/pages/HomePage.css b/src/pages/HomePage.css
new file mode 100644
index 0000000..9ad639f
--- /dev/null
+++ b/src/pages/HomePage.css
@@ -0,0 +1,32 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: verdana;
+}
+
+h1 {
+  display: flex;
+  height: 70vh;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 4rem;
+  font-style: italic;
+  font-family: 'Sofia';
+  text-shadow: 3px 3px 3px #ababab;
+  color: #fff;
+}
+
+h2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 4rem;
+  font-style: italic;
+  font-family: 'Sofia';
+  text-shadow: 3px 3px 3px #ababab;
+  color: rgb(73, 73, 75);
+}
+
+
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..3d84ae4
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Card from '../Components/Card/Card';
+import Footer from '../Components/Footer/Footer';
+import './HomePage.css';
+import NavBar from '../Components/NavBar/NavBar';
+
+function HomePage() {
+  return (
+    <div>
+      <NavBar />
+      <h2>Below are some recipes</h2>
+      <Card />
+      <Footer />
+    </div>
+  );
+}
+
+export default HomePage;
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
index 5253d3a..532f29b 100644
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@@ -1,4 +1,4 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
diff --git a/src/service/useStorage.js b/src/service/useStorage.js
new file mode 100644
index 0000000..b7c9776
--- /dev/null
+++ b/src/service/useStorage.js
@@ -0,0 +1,22 @@
+/* eslint-disable max-classes-per-file */
+export class LOCALSTORAGE {
+  static get = (key) => JSON.parse(localStorage.getItem(key));
+
+  static save = (key, value) =>
+    localStorage.setItem(key, JSON.stringify(value));
+
+  static remove = (key) => localStorage.removeItem(key);
+
+  static clear = () => localStorage.clear();
+}
+
+export class SESSIONSTORAGE {
+  static get = (key) => JSON.parse(sessionStorage.getItem(key));
+
+  static save = (key, value) =>
+    sessionStorage.setItem(key, JSON.stringify(value));
+
+  static remove = (key) => sessionStorage.removeItem(key);
+
+  static clear = () => sessionStorage.clear();
+}