diff --git a/package-lock.json b/package-lock.json
index 9d0902a..6908f3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,13 @@
       "name": "chanakya",
       "version": "0.0.0",
       "dependencies": {
+        "@emailjs/browser": "^4.3.3",
         "bootstrap": "^5.3.2",
+        "framer-motion": "^11.2.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-h5-audio-player": "^3.9.1",
+        "react-router-dom": "^6.23.1",
         "react-top-loading-bar": "^2.3.1"
       },
       "devDependencies": {
@@ -385,6 +388,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.3.3.tgz",
+      "integrity": "sha512-ltpt2S/WVREIBXptxYAVYBvXb2O6yTUYiRUWF8OLikMxlmiGsIgKpgHppikNd4Df0uAav7jCsQKcOJ3TJFUx5g==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
@@ -969,6 +980,14 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.9.6",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
@@ -2240,6 +2259,30 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz",
+      "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3417,6 +3460,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.1",
+        "react-router": "6.23.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-top-loading-bar": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/react-top-loading-bar/-/react-top-loading-bar-2.3.1.tgz",
@@ -3830,6 +3903,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index b628aa1..5aab3f6 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.3.3",
     "bootstrap": "^5.3.2",
+    "framer-motion": "^11.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-h5-audio-player": "^3.9.1",
+    "react-router-dom": "^6.23.1",
     "react-top-loading-bar": "^2.3.1"
   },
   "devDependencies": {
diff --git a/public/c7.png b/public/c7.png
new file mode 100644
index 0000000..6984e43
Binary files /dev/null and b/public/c7.png differ
diff --git a/public/cr2.png b/public/cr2.png
new file mode 100644
index 0000000..0a4db99
Binary files /dev/null and b/public/cr2.png differ
diff --git a/src/App.css b/src/App.css
index fddaa73..4d66f2c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -53,3 +53,11 @@ input[type=number]::-webkit-outer-spin-button {
 .info-button-container:hover .info-box {
   display: block;
 }
+
+.NavLink-container {
+  position: fixed;
+  bottom: 20px; 
+  right: 20px; 
+  z-index: 999; 
+}
+
diff --git a/src/App.jsx b/src/App.jsx
index c415ce5..585f901 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,9 @@ import RequestEpisode from './components/Pages/RequestEpisode';
 import Alert from './components/Alert/Alert';
 import './App.css';
 import QuoteSection from './components/Quotes/QuotesSection';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+import Contact from './components/Pages/ContactUs';
 
 function App() {
   const [value, setValue] = useState(1);
@@ -84,6 +87,19 @@ function App() {
       </div>
       
       {startPlayback && <RequestEpisode episodeNumber={episodeNumber} setEpisodeNumber={setEpisodeNumber} setProgress={setProgress} />}
+   
+      <div className="NavLink-container">
+  <BrowserRouter>
+    <Routes className="">
+      <Route path="/contact" element={<Contact/>}/>
+    </Routes>
+    <NavLink to="/contact">
+      <img src="/c7.png" className=''   style={{ width: '3rem' }} />
+    </NavLink>
+  </BrowserRouter>
+</div>
+
+
     </div>
   );
 }
diff --git a/src/components/Pages/ContactUs.jsx b/src/components/Pages/ContactUs.jsx
new file mode 100644
index 0000000..ec1cb0d
--- /dev/null
+++ b/src/components/Pages/ContactUs.jsx
@@ -0,0 +1,124 @@
+import React, { useRef, useState } from "react";
+import emailjs from "@emailjs/browser";
+import { useNavigate } from "react-router-dom";
+import "./Contact.css"; // Import your custom CSS file
+
+const Contact = () => {
+  const formRef = useRef();
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    const { target } = e;
+    const { name, value } = target;
+
+    setForm({
+      ...form,
+      [name]: value,
+    });
+  };
+
+  const handleClose = () => {
+    navigate("/");
+  };
+
+  const handleEmailSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      await emailjs.send(
+        'service_kssjugu',//write service id here 
+        'template_cg8qcij',//write templet id here
+        {
+          from_name: form.name,
+          to_name: "FoodiesWeb",
+          from_email: form.email,
+          to_email: "info@foodiweb.com",
+          message: form.message,
+        },
+        'EJL9aVO3EzRRm0TRE'  //write public_key here
+      );
+
+      setLoading(false);
+      alert("Thank you. I will get back to you as soon as possible.");
+
+      setForm({
+        name: "",
+        email: "",
+        message: "",
+      });
+
+      handleClose();
+    } catch (error) {
+      setLoading(false);
+      console.error(error);
+
+      alert("Sorry, something went wrong while sending your message. Please try again later.");
+    }
+  };
+
+  return (
+    <div className="contact-container">
+      <div className="close-button" onClick={handleClose}>
+        <img src="cr2.png" alt="Close" style={{ width: '2.4rem' }} />
+      </div>
+      <p className="contact-heading">Get in touch</p>
+      <div className="form-container">
+        <form
+          ref={formRef}
+          onSubmit={handleEmailSubmit}
+          className="form"
+        >
+          <label className="form-label">
+            <span className="form-label-text">Your Name</span>
+            <input
+              type="text"
+              name="name"
+              value={form.name}
+              onChange={handleChange}
+              placeholder="What's your good name?"
+              className="form-input"
+            />
+          </label>
+          <label className="form-label">
+            <span className="form-label-text">Your email</span>
+            <input
+              type="email"
+              name="email"
+              value={form.email}
+              onChange={handleChange}
+              placeholder="What's your web address?"
+              className="form-input"
+            />
+          </label>
+          <label className="form-label">
+            <span className="form-label-text">Your Message</span>
+            <textarea
+              rows={5}
+              name="message"
+              value={form.message}
+              onChange={handleChange}
+              placeholder="What you want to say?"
+              className="form-textarea"
+            />
+          </label>
+          <button
+            type="submit"
+            className="form-button"
+          >
+            {loading ? "Sending..." : "Send Mail"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Contact;
diff --git a/src/components/Pages/contact.css b/src/components/Pages/contact.css
new file mode 100644
index 0000000..3e007bb
--- /dev/null
+++ b/src/components/Pages/contact.css
@@ -0,0 +1,98 @@
+.contact-container {
+    position: absolute;
+    overflow: hidden;
+    top: 50%;
+    left: 50%;
+    transform: translate(-280%, -100%);
+    background-color: #f9f9f9;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    width: 20rem;
+}
+
+.contact-heading,
+.contact-subheading {
+    color: #2e2d32;
+    font-size: 2.6rem;
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 1.5rem;
+    font-family: serif;
+}
+
+.contact-heading:hover {
+    color: #6A0DAD;
+    transition: color 0.3s ease;
+}
+
+.form-container {
+    padding-top: 1rem;
+}
+
+.form-label {
+    display: block;
+    margin-bottom: 1rem;
+}
+
+.form-label-text {
+    font-weight: bold;
+    display: block;
+    color: #333;
+    font-size: 1rem;
+    font-family: cursive;
+}
+
+.form-input,
+.form-textarea {
+    width: 100%;
+    padding: 0.75rem;
+    margin-top: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 0.5rem;
+    outline: none;
+    color: #333;
+    font-size: 1rem;
+    font-family: Arial, sans-serif;
+}
+
+.form-textarea {
+    height: 8rem;
+    resize: none;
+    overflow-y: auto;
+}
+
+.form-input,
+.form-textarea {
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.form-button {
+    background-color: #0f74c1;
+    color: #fff;
+    border: none;
+    padding: 0.75rem 2rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    font-weight: bold;
+    margin-top: 1.5rem;
+    display: block;
+    margin: 0 auto;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    transition: background-color 0.3s ease;
+}
+
+.form-button:hover {
+    background-color: #06418e;
+}
+
+.image-container {
+    margin-top: 2rem;
+    text-align: center;
+}
+
+.image {
+    width: 100%;
+    height: auto;
+}