diff --git a/package.json b/package.json
index e728852..5b44fd5 100644
--- a/package.json
+++ b/package.json
@@ -1,38 +1,39 @@
-{
-  "name": "lab-react-root-nutrition",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
+{
+  "name": "lab-react-root-nutrition",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.18.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/src/App.css b/src/App.css
index 74b5e05..fe8e2a0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,38 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/App.js b/src/App.js
index 3784575..ca26682 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,68 @@
-import logo from './logo.svg';
-import './App.css';
-
-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>
-    </div>
-  );
-}
-
-export default App;
+import logo from './logo.svg';
+import './App.css';
+import jsonData from "./foods.json";
+import { useState } from "react";
+import "./App.css";
+import FoodBox from "./Components/FoodBox";
+import { Row, Divider } from "antd";
+import AddFoodForm from "./Components/AddFoodForm";
+import Search from "./Components/Search";
+
+function App() {
+  const [foods, setFoods] = useState(jsonData);
+
+  function handleSearch(searchQuery) {
+    const filterFoods = jsonData.filter((food) =>
+      food.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    setFoods(filterFoods);
+  }
+
+  const deleteFood = (calories)=>{
+    const updatedFoods = foods.filter((food) => food.calories!== calories);
+    setFoods(updatedFoods);
+  }
+  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>
+
+      <AddFoodForm foods={foods} addNewFood={setFoods} />
+      <Search handleSearch={handleSearch} />
+      <Divider>
+        <h1>Food List</h1>
+      </Divider>
+      {
+      foods.length>0?
+      (
+      <Row gutter={[16, 16]}>
+        {foods.map((food, index) => (
+          <FoodBox key={index} food={food}  deleteFood={()=>deleteFood(food.calories)}  />
+        ))}
+      </Row>
+      ):
+      (
+      <div style={{textAlign:'center'}}>
+        <h1 >Oop! There is no more content to show</h1>
+        <img src="https://imgs.search.brave.com/LlUypw3emuVXxVmVqVOAFfx3Dy8xf-U-3Ori5tAbsK4/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/cHJlbWl1bS12ZWN0/b3IvcHJvaGliaXRp/b24tc2lnbi1uby1z/aWduLXdvcmtzcGFj/ZS1iYWNrZ3JvdW5k/XzIzMTc4Ni03NTYz/LmpwZw" alt="" />
+      </div>
+      )   
+    }
+    </div>
+  );
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/App.test.js b/src/App.test.js
index 1f03afe..4de7037 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/src/Components/AddFoodForm.jsx b/src/Components/AddFoodForm.jsx
new file mode 100644
index 0000000..10a7002
--- /dev/null
+++ b/src/Components/AddFoodForm.jsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { Form, Input, Button } from "antd";
+
+const AddFoodForm = ({ foods, addNewFood }) => {
+  const [showBtn, setShowBtn] = useState(false);
+  const [form] = Form.useForm();
+  const onFinish = (newFood) => {
+    addNewFood([newFood, ...foods]);
+    form.resetFields();
+  };
+
+  return (
+    <div style={{ margin: "10px" }}>
+      {showBtn ? (
+        <>
+          <Form
+            layout="vertical"
+            form={form}
+            onFinish={onFinish}
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+          >
+            <Form.Item
+              label="Name"
+              name="name"
+              rules={[{ required: true, message: "Please enter the name!" }]}
+            >
+              <Input />
+            </Form.Item>
+
+            <Form.Item
+              label="Image"
+              name="image"
+              rules={[
+                { required: true, message: "Please enter the image URL!" },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+
+            <Form.Item
+              label="Calories"
+              name="calories"
+              rules={[
+                { required: true, message: "Please enter the calories!" },
+              ]}
+            >
+              <Input type="number" />
+            </Form.Item>
+
+            <Form.Item
+              label="Servings"
+              name="servings"
+              rules={[
+                { required: true, message: "Please enter the servings!" },
+              ]}
+            >
+              <Input type="number" />
+            </Form.Item>
+
+            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+              <Button type="primary" htmlType="submit">
+                Create
+              </Button>
+            </Form.Item>
+          </Form>
+          <Button type="primary" ghost onClick={() => setShowBtn(false)}>
+            Hide Form
+          </Button>
+        </>
+      ) : (
+        <Button type="primary" ghost onClick={() => setShowBtn(true)}>
+          Add New Food
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default AddFoodForm;
\ No newline at end of file
diff --git a/src/Components/FoodBox.jsx b/src/Components/FoodBox.jsx
new file mode 100644
index 0000000..991be5c
--- /dev/null
+++ b/src/Components/FoodBox.jsx
@@ -0,0 +1,32 @@
+import { Card, Button, Col } from "antd";
+const FoodBox = ({ food , deleteFood }) => {
+  return (
+    <Col xs={24} sm={12} md={8} lg={6}>
+      <Card
+        style={{ margin: 30 }}
+        title={food.name}
+        cover={
+          <img
+            alt={food.name}
+            src={food.image}
+            style={{ width: "100%", height: "200px", objectFit: "contain" }}
+          />
+        }
+      >
+        <p>Servings: {food.servings}</p>
+        <p>
+          <b>Total Calories: {food.calories} Kcal</b>
+        </p>
+        <Button
+          onClick={deleteFood}
+          type="primary"
+          style={{ background: "#1890ff", borderColor: "#1890ff" }}
+        >
+          Delete
+        </Button>
+      </Card>
+    </Col>
+  );
+};
+
+export default FoodBox;
\ No newline at end of file
diff --git a/src/Components/Search.jsx b/src/Components/Search.jsx
new file mode 100644
index 0000000..832cea0
--- /dev/null
+++ b/src/Components/Search.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import {Divider,Input} from "antd"
+const Search = ({handleSearch}) => {
+  function handleChange(e){
+    const searchQuery= e.target.value ;
+    handleSearch(searchQuery)
+  }
+  return (
+    <>
+      <Divider>Search</Divider>
+      <label style={{margin:'10px'}}>Search</label>
+
+      <Input style={{ width:"50%", display:'block', padding:'10px 20px', margin:'10px'}}
+       value={undefined}
+       type="text" 
+       onChange={handleChange}
+       />
+    </>
+  )
+}
+
+export default Search
\ No newline at end of file
diff --git a/src/foods.json b/src/foods.json
index e6919a6..883b3b4 100644
--- a/src/foods.json
+++ b/src/foods.json
@@ -1,105 +1,105 @@
-[
-    {
-      "name": "Pizza",
-      "calories": 400,
-      "image": "https://i.imgur.com/eTmWoAN.png",
-      "servings": 1
-    },
-    {
-      "name": "Salad",
-      "calories": 150,
-      "image": "https://i.imgur.com/DupGBz5.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Sweet Potato",
-      "calories": 120,
-      "image": "https://i.imgur.com/hGraGyR.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Gnocchi",
-      "calories": 500,
-      "image": "https://i.imgur.com/93ekwW0.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Pot Roast",
-      "calories": 350,
-      "image": "https://i.imgur.com/WCzJDWz.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Lasagna",
-      "calories": 750,
-      "image": "https://i.imgur.com/ClxOafl.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Hamburger",
-      "calories": 400,
-      "image": "https://i.imgur.com/LoG39wK.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Pad Thai",
-      "calories": 475,
-      "image": "https://i.imgur.com/5ktcSzF.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Almonds",
-      "calories": 75,
-      "image": "https://i.imgur.com/JRp4Ksx.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Sarma",
-      "calories": 200,
-      "image": "https://i.imgur.com/yOlf4Fj.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Bacon",
-      "calories": 175,
-      "image": "https://i.imgur.com/7GlqDsG.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Hot Dog",
-      "calories": 275,
-      "image": "https://i.imgur.com/QqVHdRu.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Chocolate Cake",
-      "calories": 490,
-      "image": "https://i.imgur.com/yrgzA9x.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Wheat Bread",
-      "calories": 175,
-      "image": "https://i.imgur.com/TsWzMfM.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Orange",
-      "calories": 85,
-      "image": "https://i.imgur.com/abKGOcv.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Banana",
-      "calories": 175,
-      "image": "https://i.imgur.com/BMdJhu5.jpg",
-      "servings": 1
-    },
-    {
-      "name": "Yogurt",
-      "calories": 125,
-      "image": "https://i.imgur.com/URhdrAm.png",
-      "servings": 1
-    }
-  ]
+[
+    {
+      "name": "Pizza",
+      "calories": 400,
+      "image": "https://i.imgur.com/eTmWoAN.png",
+      "servings": 1
+    },
+    {
+      "name": "Salad",
+      "calories": 150,
+      "image": "https://i.imgur.com/DupGBz5.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Sweet Potato",
+      "calories": 120,
+      "image": "https://i.imgur.com/hGraGyR.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Gnocchi",
+      "calories": 500,
+      "image": "https://i.imgur.com/93ekwW0.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Pot Roast",
+      "calories": 350,
+      "image": "https://i.imgur.com/WCzJDWz.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Lasagna",
+      "calories": 750,
+      "image": "https://i.imgur.com/ClxOafl.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Hamburger",
+      "calories": 400,
+      "image": "https://i.imgur.com/LoG39wK.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Pad Thai",
+      "calories": 475,
+      "image": "https://i.imgur.com/5ktcSzF.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Almonds",
+      "calories": 75,
+      "image": "https://i.imgur.com/JRp4Ksx.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Sarma",
+      "calories": 200,
+      "image": "https://i.imgur.com/yOlf4Fj.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Bacon",
+      "calories": 175,
+      "image": "https://i.imgur.com/7GlqDsG.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Hot Dog",
+      "calories": 275,
+      "image": "https://i.imgur.com/QqVHdRu.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Chocolate Cake",
+      "calories": 490,
+      "image": "https://i.imgur.com/yrgzA9x.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Wheat Bread",
+      "calories": 175,
+      "image": "https://i.imgur.com/TsWzMfM.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Orange",
+      "calories": 85,
+      "image": "https://i.imgur.com/abKGOcv.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Banana",
+      "calories": 175,
+      "image": "https://i.imgur.com/BMdJhu5.jpg",
+      "servings": 1
+    },
+    {
+      "name": "Yogurt",
+      "calories": 125,
+      "image": "https://i.imgur.com/URhdrAm.png",
+      "servings": 1
+    }
+  ]
   
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..bd5bd6d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,13 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/src/index.js b/src/index.js
index d563c0f..176fc7d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
index 5253d3a..77957db 100644
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@@ -1,13 +1,13 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/src/setupTests.js b/src/setupTests.js
index 8f2609b..141e479 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -1,5 +1,5 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';