diff --git a/src/components/Blog/newss.jsx b/src/components/Blog/newss.jsx
index 7f5f348..ef34cfe 100644
--- a/src/components/Blog/newss.jsx
+++ b/src/components/Blog/newss.jsx
@@ -1,113 +1,114 @@
-import React, { useEffect, useState } from 'react';
-import  "./newss.css";
-import Navbar from '../Navbar';
-import Footer from '../Footer';
-import image1 from "../../assets/news1.jpg"
-import image2 from "../../assets/news2.jpg"
-import image3 from "../../assets/news3.jpeg"
+import React, { useEffect, useState } from "react";
+import "./newss.css";
+import Navbar from "../Navbar";
+import Footer from "../Footer";
+import image1 from "../../assets/news1.jpg";
+import image2 from "../../assets/news2.jpg";
+import image3 from "../../assets/news3.jpeg";
 import { color, motion, useScroll } from "framer-motion";
 const blogPosts = [
   {
     id: 1,
-    title: 'Recipe of Phirni by Masterchef Sanjeev Kapoor',
-    date: '2024-04-30',
+    title: "Recipe of Phirni by Masterchef Sanjeev Kapoor",
+    date: "2024-04-30",
     author: "Niko",
     image: image1,
   },
   {
     id: 2,
-    title: 'Recipe of Phirni by Masterchef Sanjeev Kapoor',
-    date: '2024-04-26',
+    title: "Recipe of Phirni by Masterchef Sanjeev Kapoor",
+    date: "2024-04-26",
     author: "Niko",
     image: image1,
   },
   {
     id: 3,
-    title: '5 delish gourmet desserts with a savoury twist | Mint',
-    date: '2024-03-25',
+    title: "5 delish gourmet desserts with a savoury twist | Mint",
+    date: "2024-03-25",
     author: "Niko",
     image: image3,
   },
   {
     id: 4,
-    title: 'Master The Art of Salad Dressing',
-    date: '2024-04-30',
-     author: "Niko",
+    title: "Master The Art of Salad Dressing",
+    date: "2024-04-30",
+    author: "Niko",
     image: image2,
   },
   {
     id: 5,
-    title: 'Recipe of Phirni by Masterchef Sanjeev Kapoor',
-    date: '2024-04-26',
-     author: "Niko",
+    title: "Recipe of Phirni by Masterchef Sanjeev Kapoor",
+    date: "2024-04-26",
+    author: "Niko",
     image: image1,
   },
   {
     id: 6,
-    title: '5 delish gourmet desserts with a savoury twist | Mint',
-    date: '2024-03-25',
-     author: "Niko",
+    title: "5 delish gourmet desserts with a savoury twist | Mint",
+    date: "2024-03-25",
+    author: "Niko",
     image: image3,
   },
   {
     id: 7,
-    title: 'Master The Art of Salad Dressing',
-    date: '2024-04-30',
-     author: "Niko",
+    title: "Master The Art of Salad Dressing",
+    date: "2024-04-30",
+    author: "Niko",
     image: image2,
   },
   {
     id: 8,
-    title: 'Recipe of Phirni by Masterchef Sanjeev Kapoor',
-    date: '2024-04-26',
-     author: "Niko",
+    title: "Recipe of Phirni by Masterchef Sanjeev Kapoor",
+    date: "2024-04-26",
+    author: "Niko",
     image: image1,
   },
   {
     id: 9,
-    title: '5 delish gourmet desserts with a savoury twist | Mint',
-    date: '2024-03-25',
-     author: "Niko",
+    title: "5 delish gourmet desserts with a savoury twist | Mint",
+    date: "2024-03-25",
+    author: "Niko",
     image: image3,
   },
   {
     id: 10,
-    title: 'Master The Art of Salad Dressing',
-    date: '2024-04-30',
-     author: "Niko",
+    title: "Master The Art of Salad Dressing",
+    date: "2024-04-30",
+    author: "Niko",
     image: image2,
   },
   {
     id: 11,
-    title: 'Recipe of Phirni by Masterchef Sanjeev Kapoor',
-    date: '2024-04-26',
-     author: "Niko",
+    title: "Recipe of Phirni by Masterchef Sanjeev Kapoor",
+    date: "2024-04-26",
+    author: "Niko",
     image: image1,
   },
   {
     id: 12,
-    title: '5 delish gourmet desserts with a savoury twist | Mint',
-    date: '2024-03-25',
+    title: "5 delish gourmet desserts with a savoury twist | Mint",
+    date: "2024-03-25",
     author: "Niko",
     image: image3,
   },
 ];
 
 const Newss = () => {
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useState("");
   const [filteredPosts, setFilteredPosts] = useState([]);
-useEffect(()=>{
-  setFilteredPosts([...blogPosts])
-},[blogPosts])
+  useEffect(() => {
+    setFilteredPosts([...blogPosts]);
+  }, [blogPosts]);
   const handleSearchChange = (event) => {
     setSearchQuery(event.target.value);
   };
 
   const handleSearch = () => {
     const lowercasedQuery = searchQuery.toLowerCase();
-    const newFilteredPosts = blogPosts.filter(post => 
-      post.title.toLowerCase().includes(lowercasedQuery) ||
-      post.author.toLowerCase().includes(lowercasedQuery)
+    const newFilteredPosts = blogPosts.filter(
+      (post) =>
+        post.title.toLowerCase().includes(lowercasedQuery) ||
+        post.author.toLowerCase().includes(lowercasedQuery)
     );
     setFilteredPosts(newFilteredPosts);
   };
@@ -118,57 +119,62 @@ useEffect(()=>{
   };
   return (
     <>
-    <Navbar/>
-    <div className="BlogpageContainer_main">
-      <header className="header">
-        {/* <h1>Trending Food and Health News</h1> */}
-        <div className="p-4 flex flex-col justify-center items-center gap-y-4 w-[100%]">
-        <div className="text-5xl font-extrabold text-center">
-          <span className="bg-clip-text text-green-500">
-          Trending Food and Health News
-          </span>
-        </div>
-        <div className="sm:flex mt-[20px]">
-        <input
-          type="text"
-          placeholder="Your Search..."
-          className="border-[1px] border-black p-2 outline-none"
-          value={searchQuery}
-          onChange={handleSearchChange}
-          required
-        />          <button onClick={handleSearch} className=" border-none bg-yellow-400 text-white p-2" >Search</button>
-        </div>
-        </div>
-      </header>
-    <div className="BlogpageContainer">
-      
-      <div className="container">
-      {filteredPosts.map(post => (
-          <motion.div
-            key={post.id}
-            initial="hidden"
-            whileInView="visible"
-            whileHover={{ scale: 1.06 }}
-            viewport={{ once: true }}
-            variants={eventVariants}
-            transition={{ duration: 0.5, ease: "easeInOut" }}
-            className="card"
-          >
-            <div className="imagecontainer">
-              <img src={post.image} alt={post.title} className="image" />
+      <Navbar />
+      <div className="BlogpageContainer_main">
+        <header className="header">
+          {/* <h1>Trending Food and Health News</h1> */}
+          <div className="p-4 flex flex-col justify-center items-center gap-y-4 w-[100%]">
+            <div className="text-5xl font-extrabold text-center">
+              <span className="bg-clip-text text-green-500">
+                Trending Food and Health News
+              </span>
             </div>
-            <div className="content1">
-              <h2>{post.title}</h2>
-              <p>~{post.author}</p>
-              <p>{post.date}</p>
+            <div className="relative flex mt-5 max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="Your Search..."
+                className="flex-1 border-[1px] border-gray-300 p-2 rounded-l-full outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500 shadow-md"
+                value={searchQuery}
+                onChange={handleSearchChange}
+                required
+              />
+              <button
+                onClick={handleSearch}
+                className="bg-green-500 text-white p-2 rounded-r-full focus:outline-none transition-transform duration-300 ease-in-out hover:scale-105 shadow-lg focus:border-green-500 "
+              >
+                Search
+              </button>
             </div>
-          </motion.div>
-        ))}
+          </div>
+        </header>
+        <div className="BlogpageContainer">
+          <div className="container">
+            {filteredPosts.map((post) => (
+              <motion.div
+                key={post.id}
+                initial="hidden"
+                whileInView="visible"
+                whileHover={{ scale: 1.06 }}
+                viewport={{ once: true }}
+                variants={eventVariants}
+                transition={{ duration: 0.5, ease: "easeInOut" }}
+                className="card"
+              >
+                <div className="imagecontainer">
+                  <img src={post.image} alt={post.title} className="image" />
+                </div>
+                <div className="content1">
+                  <h2>{post.title}</h2>
+                  <p>~{post.author}</p>
+                  <p>{post.date}</p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
       </div>
-    </div>
-    </div>
-    <Footer/>
+      <Footer />
     </>
   );
-}
-export default Newss;
\ No newline at end of file
+};
+export default Newss;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 903e96d..8993a0b 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -90,11 +90,12 @@ function Home() {
             };
           });
           const canteensWithDishes = await Promise.all(allDishesPromises);
-          const filteredData = canteensWithDishes.filter((canteen) =>
-            canteen.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-            canteen.dishes.some((dish) =>
-              dish.dish.toLowerCase().includes(searchTerm.toLowerCase())
-            )
+          const filteredData = canteensWithDishes.filter(
+            (canteen) =>
+              canteen.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+              canteen.dishes.some((dish) =>
+                dish.dish.toLowerCase().includes(searchTerm.toLowerCase())
+              )
           );
           setFilteredCanteenData({ data: filteredData });
         } catch (error) {
@@ -114,20 +115,28 @@ function Home() {
         <Loader />
       ) : (
         <div className="min-h-screen dark:bg-teal-700">
-        <Navbar />
-          <div className="mx-auto max-w-2xl p-4" style={{ paddingTop: "120px" }}>
-            <div className="relative">
-              <AiOutlineSearch className="absolute top-2 left-3 text-gray-400" size={24} />
+          <Navbar />
+          <div
+            className="mx-auto max-w-2xl p-4"
+            style={{ paddingTop: "120px" }}
+          >
+            {/* Search bar */}
+
+            <div className="relative w-full max-w-sm mx-auto">
+              <AiOutlineSearch
+                className="absolute top-1/2 left-3 transform -translate-y-1/2 text-gray-500"
+                size={20}
+              />
               <input
                 type="text"
                 placeholder="Search Dish or Canteen"
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full pl-10 pr-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+                className="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500 shadow-md"
               />
               <button
                 onClick={handleSearch}
-                className="absolute top-0 right-0 h-full px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none"
+                className="absolute top-1/2 right-0 transform -translate-y-1/2 h-full px-6 py-2 text-white bg-green-500 rounded-r-full hover:bg-green-600 focus:outline-none transition-transform duration-300 ease-in-out hover:scale-105 shadow-lg"
               >
                 Search
               </button>