diff --git a/scruter-nextjs/actions/seller/listing.tsx b/scruter-nextjs/actions/seller/listing.tsx
index abbcc524..918303dd 100644
--- a/scruter-nextjs/actions/seller/listing.tsx
+++ b/scruter-nextjs/actions/seller/listing.tsx
@@ -1,6 +1,6 @@
 'use server';
 import prismadb from '@/lib/prismadb';
-import { Image, Listing } from '@prisma/client';
+import { Category, Image, Listing } from '@prisma/client';
 
 export interface ListingWithImages extends Listing {
   images: Image[];
@@ -184,24 +184,65 @@ export async function DeleteListing({
   }
 }
 
-export async function GetAllListing(): Promise<{
+
+export async function GetAllListing(
+  category?: Category, 
+  searchQuery?: string, 
+  sort?: "" | "asc" | "desc" | undefined
+): Promise<{
   success: boolean;
   error?: string;
   data?: ListingWithImages[];
 }> {
-  const resp = await prismadb.listing.findMany({
-    include: {
-      images: true,
-    },
-  });
-
-  if (!resp) {
-    return { success: false, error: 'Error occured in fetching all listing' };
+  // Set no-cache headers to ensure fresh data
+  const headers = new Headers();
+  headers.append('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+  headers.append('Pragma', 'no-cache');
+  headers.append('Expires', '0');
+  
+  // Build the where clause based on provided parameters
+  let whereClause = {};
+  
+  if (category) {
+    whereClause = { ...whereClause, category };
+  }
+
+  if (searchQuery) {
+    whereClause = {
+      ...whereClause,
+      OR: [
+        { name: { contains: searchQuery, mode: 'insensitive' } },
+        { description: { contains: searchQuery, mode: 'insensitive' } },
+      ],
+    };
   }
 
-  return { success: true, data: resp };
+  try {
+    // Query the database for listings with optional filters and sorting
+    const resp: ListingWithImages[] = await prismadb.listing.findMany({
+      where: whereClause,
+      include: {
+        images: true,
+      },
+      orderBy: sort ? { price: sort } : undefined, // Sort by price if 'sort' is provided
+    });
+
+    if (!resp) {
+      return { success: false, error: 'Error occurred in fetching all listings' };
+    }
+
+    return { success: true, data: resp };
+  } catch (error: unknown) {
+    // Narrowing the error type to handle it properly
+    if (error instanceof Error) {
+      return { success: false, error: error.message || 'An error occurred' };
+    } else {
+      return { success: false, error: 'An unknown error occurred' };
+    }
+  }
 }
 
+
 export async function getSpecificListing({
   listingId,
 }: {
diff --git a/scruter-nextjs/app/(routes)/food/page.tsx b/scruter-nextjs/app/(routes)/food/page.tsx
index c8e12f73..67cfd63a 100644
--- a/scruter-nextjs/app/(routes)/food/page.tsx
+++ b/scruter-nextjs/app/(routes)/food/page.tsx
@@ -5,22 +5,28 @@ import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons'; // Import FontAwesomeIcon
 import '../../globals.css'; // Ensure your global styles are imported
+import { GetAllListing, ListingWithImages } from '@/actions/seller/listing';
+import { Listing } from '@prisma/client';
+import toast, { Toaster } from 'react-hot-toast';
+import ListingCardFE from '@/components/listingCardFE';
 
 const FoodPage: React.FC = () => {
-  const [foodItems, setFoodItems] = useState<any[]>([]);
+  const [foodItems, setFoodItems] = useState<ListingWithImages[]>([]);
   const [loading, setLoading] = useState(true);
   const [query, setQuery] = useState('');
-  const [type, setType] = useState('food'); // Default search type is 'food'
-  const [sort, setSort] = useState('');
+  const [sort, setSort] = useState<"" | "asc" | "desc" | undefined>('');
 
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
       try {
         // Example API call to fetch food data
-        const foodResponse = await axios.get('/api/food', {
-          params: { query, type, sort },
-        });
+        const foodResponse = await GetAllListing('Fooding',query,sort);
+
+        if (!foodResponse || !foodResponse.data) {
+          toast.error('No data fetched from BE');
+          return;
+        }
         setFoodItems(foodResponse.data);
       } catch (error) {
         console.error('Error fetching food data:', error);
@@ -29,11 +35,13 @@ const FoodPage: React.FC = () => {
       }
     };
 
-    //fetchData();
-  }, [query, type, sort]);
+    fetchData();
+  }, [query, sort]);
 
+  console.log(foodItems);
   return (
     <div className="bg-gray-50 text-gray-800">
+      <Toaster />
       {/* Hero Section with Banner Image */}
       <section
         className="relative h-[60vh] bg-cover bg-center text-white"
@@ -87,9 +95,11 @@ const FoodPage: React.FC = () => {
               id="sort-by-price"
               name="sort"
               value={sort}
-              onChange={e => setSort(e.target.value)}
+              onChange={e => {
+                const value = e.target.value as "" | "asc" | "desc" | undefined; // Type the value to be one of these options
+                setSort(value); // Update the sort state
+              }}
             >
-              <option value="">Sort by Price</option>
               <option value="asc">Low to High</option>
               <option value="desc">High to Low</option>
             </select>
@@ -111,43 +121,49 @@ const FoodPage: React.FC = () => {
       {/* Food Items Section */}
       <section className="py-16 bg-white">
         <h2 className="text-2xl font-bold text-center mb-12">Available Food</h2>
-        {/*
+
         <div
           id="food-items"
-          className="max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
+          className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
         >
           {loading ? (
             <div className="loading flex justify-center items-center h-48">
               <div className="spinner border-4 border-t-4 border-blue-600 rounded-full w-10 h-10 animate-spin"></div>
             </div>
           ) : (
-            foodItems.map((food) => (
-              <FoodCard key={food.id} food={food} />
+            foodItems.map(food => (
+              <ListingCardFE
+                key={food.id}
+                name={food.name}
+                price={food.price}
+                description={food.description}
+                images={food.images}
+              />
             ))
           )}
-        </div> */}
+        </div>
       </section>
     </div>
   );
 };
 
-const FoodCard: React.FC<{ food: any }> = ({ food }) => (
-  <div className="bg-white p-6 rounded-lg shadow-md flex flex-col items-center">
-    <img
-      src={food.imageUrl}
-      alt={food.title}
-      className="w-full h-48 object-cover rounded-lg mb-4"
-    />
-    <h3 className="text-xl font-bold text-gray-800 mb-4">{food.title}</h3>
-    <p className="text-gray-600 mb-4">{food.description}</p>
-    <p className="text-lg font-semibold text-gray-800 mb-4">{food.price}</p>
-    <a
-      href={`/food/${food.id}`}
-      className="text-blue-500 hover:text-blue-700 transition"
-    >
-      View Details
-    </a>
-  </div>
-);
+// const FoodCard: React.FC<{ food: any }> = ({ food }) => (
+//   <div className="bg-white p-6 rounded-lg shadow-md flex flex-col items-center">
+//     <img
+//       src={food.imageUrl}
+//       alt={food.title}
+//       className="w-full h-48 object-cover rounded-lg mb-4"
+//     />
+//     <h3 className="text-xl font-bold text-gray-800 mb-4">{food.title}</h3>
+//     <p className="text-gray-600 mb-4">{food.description}</p>
+//     <p className="text-lg font-semibold text-gray-800 mb-4">{food.price}</p>
+//     <a
+//       href={`/food/${food.id}`}
+//       className="text-blue-500 hover:text-blue-700 transition"
+//     >
+//       View Details
+//     </a>
+//   </div>
+// );
 
 export default FoodPage;
diff --git a/scruter-nextjs/app/(routes)/for-sale/page.tsx b/scruter-nextjs/app/(routes)/for-sale/page.tsx
index f633586c..2d65ad57 100644
--- a/scruter-nextjs/app/(routes)/for-sale/page.tsx
+++ b/scruter-nextjs/app/(routes)/for-sale/page.tsx
@@ -1,39 +1,43 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch } from '@fortawesome/free-solid-svg-icons'; // Import FontAwesomeIcon
-import '../../globals.css'; // Ensure your global styles are imported
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import toast, { Toaster } from 'react-hot-toast';
+import { GetAllListing } from '@/actions/seller/listing';
+import ListingCardFE from '@/components/listingCardFE';
 
 const ForSalePage: React.FC = () => {
   const [items, setItems] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [query, setQuery] = useState('');
-  const [type, setType] = useState('sale'); // Default search type is 'sale'
-  const [sort, setSort] = useState('');
+  const [sort, setSort] = useState<'asc' | 'desc' | ''>('');
 
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
       try {
-        // Example API call to fetch for sale data
-        const response = await axios.get('/api/sale', {
-          params: { query, type, sort },
-        });
-        setItems(response.data);
+        // Fetching the items with search query and sort applied
+        const forSaleResp = await GetAllListing('For_Sale', query, sort);
+
+        if (!forSaleResp || !forSaleResp.data) {
+          toast.error('No data fetched from BE');
+          return;
+        }
+        setItems(forSaleResp.data);
       } catch (error) {
-        console.error('Error fetching sale items:', error);
+        console.error('Error fetching data:', error);
       } finally {
         setLoading(false);
       }
     };
 
-    //fetchData();
-  }, [query, type, sort]);
+    fetchData();
+  }, [query, sort]); // Only depend on query and sort
 
   return (
     <div className="bg-gray-50 text-gray-800">
+      <Toaster />
       {/* Hero Section with Banner Image */}
       <section
         className="relative h-[60vh] bg-cover bg-center text-white"
@@ -87,7 +91,7 @@ const ForSalePage: React.FC = () => {
               id="sort-by-price"
               name="sort"
               value={sort}
-              onChange={e => setSort(e.target.value)}
+              onChange={e => setSort(e.target.value as 'asc' | 'desc' | '')}
             >
               <option value="">Sort by Price</option>
               <option value="asc">Low to High</option>
@@ -113,43 +117,30 @@ const ForSalePage: React.FC = () => {
         <h2 className="text-2xl font-bold text-center mb-12">
           Available Items
         </h2>
-        {/*
+
         <div
           id="items-for-sale"
-          className="max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
+          className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
         >
           {loading ? (
             <div className="loading flex justify-center items-center h-48">
               <div className="spinner border-4 border-t-4 border-blue-600 rounded-full w-10 h-10 animate-spin"></div>
             </div>
           ) : (
-            items.map((item) => (
-              <ForSaleCard key={item.id} item={item} />
+            items.map(item => (
+              <ListingCardFE
+                key={item.id}
+                name={item.name}
+                price={item.price}
+                description={item.description}
+                images={item.images}
+              />
             ))
           )}
-        </div> */}
+        </div>
       </section>
     </div>
   );
 };
 
-const ForSaleCard: React.FC<{ item: any }> = ({ item }) => (
-  <div className="bg-white p-6 rounded-lg shadow-md flex flex-col items-center">
-    <img
-      src={item.imageUrl}
-      alt={item.title}
-      className="w-full h-48 object-cover rounded-lg mb-4"
-    />
-    <h3 className="text-xl font-bold text-gray-800 mb-4">{item.title}</h3>
-    <p className="text-gray-600 mb-4">{item.description}</p>
-    <p className="text-lg font-semibold text-gray-800 mb-4">{item.price}</p>
-    <a
-      href={`/sale/${item.id}`}
-      className="text-blue-500 hover:text-blue-700 transition"
-    >
-      View Details
-    </a>
-  </div>
-);
-
 export default ForSalePage;
diff --git a/scruter-nextjs/app/(routes)/house/page.tsx b/scruter-nextjs/app/(routes)/house/page.tsx
index d67a6474..73fc3346 100644
--- a/scruter-nextjs/app/(routes)/house/page.tsx
+++ b/scruter-nextjs/app/(routes)/house/page.tsx
@@ -3,37 +3,45 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch } from '@fortawesome/free-solid-svg-icons'; // Import FontAwesomeIcon
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import '../../globals.css'; // Ensure your global styles are imported
+import toast, { Toaster } from 'react-hot-toast';
+import { GetAllListing } from '@/actions/seller/listing';
+import ListingCardFE from '@/components/listingCardFE';
 
 const HousePage: React.FC = () => {
   const [houses, setHouses] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [query, setQuery] = useState('');
   const [type, setType] = useState('house'); // Default search type is 'house'
-  const [sort, setSort] = useState('');
+  const [sort, setSort] = useState<'asc' | 'desc' | ''>('');
 
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
       try {
-        // Example API call to fetch houses data
-        const housesResponse = await axios.get('/api/houses', {
-          params: { query, type, sort },
-        });
-        setHouses(housesResponse.data);
+        // Example API call to fetch housing data
+        const forSaleResp = await GetAllListing('Housing', query, sort);
+
+        if (!forSaleResp || !forSaleResp.data) {
+          toast.error('No data fetched from BE');
+          return;
+        }
+        setHouses(forSaleResp.data);
       } catch (error) {
-        console.error('Error fetching house data:', error);
+        console.error('Error fetching data:', error);
+        toast.error('An error occurred while fetching the data.');
       } finally {
         setLoading(false);
       }
     };
 
-    //fetchData();
+    fetchData();
   }, [query, type, sort]);
 
   return (
     <div className="bg-gray-50 text-gray-800">
+      <Toaster />
       {/* Hero Section with Banner Image */}
       <section
         className="relative h-[60vh] bg-cover bg-center text-white"
@@ -75,7 +83,7 @@ const HousePage: React.FC = () => {
               onChange={e => setQuery(e.target.value)}
             />
             <FontAwesomeIcon
-              icon={faSearch} // Using FontAwesomeIcon component
+              icon={faSearch}
               className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
             />
           </div>
@@ -87,7 +95,7 @@ const HousePage: React.FC = () => {
               id="sort-by-price"
               name="sort"
               value={sort}
-              onChange={e => setSort(e.target.value)}
+              onChange={e => setSort(e.target.value as 'asc' | 'desc' | '')}
             >
               <option value="">Sort by Price</option>
               <option value="asc">Low to High</option>
@@ -95,7 +103,7 @@ const HousePage: React.FC = () => {
             </select>
           </div>
 
-          {/* Search Button with Dark Hover Effect */}
+          {/* Search Button */}
           <div className="mb-2">
             <button
               className="btn btn-dark text-light p-3 rounded-md w-full md:w-auto transition-colors duration-300 hover:bg-gray-400 border border-gray-300 hover:border-gray-600 focus:ring-2 focus:ring-gray-500 focus:outline-none"
@@ -110,47 +118,31 @@ const HousePage: React.FC = () => {
 
       {/* Houses Section */}
       <section className="py-16 bg-white">
-        <h2 className="text-2xl font-bold text-center mb-12">
-          Available Houses
-        </h2>
+        <h2 className="text-2xl font-bold text-center mb-12">Available Houses</h2>
 
-        {/*
         <div
           id="houses"
-          className="max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
+          className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
         >
           {loading ? (
             <div className="loading flex justify-center items-center h-48">
               <div className="spinner border-4 border-t-4 border-blue-600 rounded-full w-10 h-10 animate-spin"></div>
             </div>
           ) : (
-            houses.map((house) => (
-              <HouseCard key={house.id} house={house} />
+            houses.map(house => (
+              <ListingCardFE
+                key={house.id}
+                name={house.name}
+                price={house.price}
+                description={house.description}
+                images={house.images}
+              />
             ))
           )}
-        </div> */}
+        </div>
       </section>
     </div>
   );
 };
 
-const HouseCard: React.FC<{ house: any }> = ({ house }) => (
-  <div className="bg-white p-6 rounded-lg shadow-md flex flex-col items-center">
-    <img
-      src={house.imageUrl}
-      alt={house.title}
-      className="w-full h-48 object-cover rounded-lg mb-4"
-    />
-    <h3 className="text-xl font-bold text-gray-800 mb-4">{house.title}</h3>
-    <p className="text-gray-600 mb-4">{house.location}</p>
-    <p className="text-lg font-semibold text-gray-800 mb-4">{house.price}</p>
-    <a
-      href={`/house/${house.id}`}
-      className="text-blue-500 hover:text-blue-700 transition"
-    >
-      View Details
-    </a>
-  </div>
-);
-
 export default HousePage;
diff --git a/scruter-nextjs/components/listingCardFE.tsx b/scruter-nextjs/components/listingCardFE.tsx
new file mode 100644
index 00000000..359e5bf7
--- /dev/null
+++ b/scruter-nextjs/components/listingCardFE.tsx
@@ -0,0 +1,73 @@
+'use client';
+import React from 'react';
+import { Image as ImageInterface } from '@prisma/client';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from '@/components/ui/carousel';
+import Image from 'next/image';
+import Autoplay from 'embla-carousel-autoplay';
+import { Button } from '@/components/ui/button'; // Importing the Button component from Shadcn
+import Link from 'next/link';
+
+interface ListingCardProps {
+  name: string;
+  price: number;
+  description: string;
+  images: ImageInterface[]; 
+}
+
+const ListingCardFE: React.FC<ListingCardProps> = ({
+  name,
+  price,
+  description,
+  images,
+}) => {
+  return (
+    <div className="bg-white overflow-hidden shadow-lg rounded-lg">
+      <Carousel
+        className="h-48"
+        opts={{
+          align: 'start',
+          loop: true,
+        }}
+        plugins={[
+          Autoplay({
+            delay: 2000,
+          }),
+        ]}
+      >
+        <CarouselContent className="flex gap-4">
+          {images.map((image, index) => (
+            <CarouselItem key={index}>
+              <Image
+                src={image.url} // Use the image URL from the database
+                alt={name}
+                width={1000}
+                height={1000} // Fill the parent container
+                objectFit="cover" // Cover the area while maintaining aspect ratio
+                className="rounded-t-lg h-48" // Optional: Add styling for rounded corners
+              />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+      <div className="p-4">
+        <h3 className="text-xl font-semibold mb-2">{name}</h3>
+        <p className="text-gray-600 mb-2">{description}</p>
+        <p className="text-lg font-bold mb-2">Price: ₹{price}</p>
+        <div className="flex justify-between">
+          <Button variant="outline" className="text-blue-600">
+            Add
+          </Button>
+          <Button variant="outline" className="text-red-600">
+            Bookmark
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListingCardFE;