diff --git a/package.json b/package.json
index 924e778..0b84cb3 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react-icons": "^4.12.0",
     "react-icons-kit": "^2.0.0",
     "react-modal": "^3.16.1",
+    "react-rating": "^2.0.5",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "react-spinners": "^0.13.8",
diff --git a/src/components/Ratings.jsx b/src/components/Ratings.jsx
new file mode 100644
index 0000000..017f6df
--- /dev/null
+++ b/src/components/Ratings.jsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useContext } from 'react';
+import Box from '@mui/material/Box';
+import Rating from '@mui/material/Rating';
+import Typography from '@mui/material/Typography';
+import { ThemeContext } from '../themeContext';
+
+export default function BasicRating() {
+  const [value, setValue] = React.useState(2);
+  const { theme, toggleTheme } = useContext(ThemeContext);
+
+  return (
+    <Box
+      sx={{
+        '& > legend': { mt: 2 },
+      }}
+    >
+      <h2 className="text-lg font-bold mb-4 text-white text-start dark:text-black">Rate Canteen</h2>
+      <Rating
+        name="simple-controlled"
+        value={value}
+        onChange={(event, newValue) => {
+          setValue(newValue);
+        }}
+        size='large'
+      />
+    </Box>
+  );
+}
diff --git a/src/pages/MenuPage.jsx b/src/pages/MenuPage.jsx
index 6cd6b57..68e8cb6 100644
--- a/src/pages/MenuPage.jsx
+++ b/src/pages/MenuPage.jsx
@@ -9,6 +9,7 @@ import FoodCard from "../components/FoodCard";
 import { ThemeContext } from '../themeContext';
 import { Link } from "react-router-dom";
 import { FaInstagram, FaFacebook, FaLinkedinIn, FaYoutube } from "react-icons/fa";
+import BasicRating from "../components/Ratings";
 
 
 
@@ -287,14 +288,17 @@ const handlestudentFeedbackSubmit = async () => {
           </>
         )}
       </div>
+
       <div className=" mt-20 text-purple-800 px-8 mb-4">
           <h2 className="text-2xl font-bold mb-4 text-white text-center dark:text-black">Meal Feedback</h2>
+          <BasicRating/>
           <textarea
-            className="w-full h-32 p-4 border border-purple-300 rounded mb-4"
+            className="w-full h-32 p-4 border border-purple-300 rounded mb-4 mt-5 "
             placeholder="Enter your feedback here..."
             value={studentfeedback}
             onChange={(e) => setstudentFeedback(e.target.value)}
           ></textarea>
+          
           <button
             onClick={handlestudentFeedbackSubmit}
             className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"