diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..08b3923
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/src/components/addfoodform.jsx b/src/components/addfoodform.jsx
new file mode 100644
index 0000000..204fc9c
--- /dev/null
+++ b/src/components/addfoodform.jsx
@@ -0,0 +1,84 @@
+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) => {
+    // Handle form submission logic here
+
+    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;
diff --git a/src/components/foodbox.jsx b/src/components/foodbox.jsx
new file mode 100644
index 0000000..bdabd31
--- /dev/null
+++ b/src/components/foodbox.jsx
@@ -0,0 +1,35 @@
+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;
diff --git a/src/components/search.jsx b/src/components/search.jsx
new file mode 100644
index 0000000..799e9bd
--- /dev/null
+++ b/src/components/search.jsx
@@ -0,0 +1,33 @@
+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