diff --git a/Frontend/react/src/components/BlogCard.js b/Frontend/react/src/components/BlogCard.js
index c7a9799..7e67631 100644
--- a/Frontend/react/src/components/BlogCard.js
+++ b/Frontend/react/src/components/BlogCard.js
@@ -1,20 +1,21 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+// import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 const BlogCard = ( {blog} ) => {
-  const navigate = useNavigate();
-  const handleCardClick = () => {
-    // console.log(blog.id);
-    navigate(`/blog/${blog.id}`);
-  }
+  // const navigate = useNavigate();
+  // const handleCardClick = () => {
+  //   // console.log(blog.id);
+  //   navigate(`/blog/${blog.id}`);
+  // }
   console.log(blog.image);
   return (
-    <div className="blog-card" onClick={handleCardClick}>
+    <div className="blog-card" /*onClick={handleCardClick}*/>
       <img src={blog.image} alt={blog.title} />
       <div className="blog-content">
         <h3>{blog.title}</h3>
-        <p>{blog.content}</p>
-        <a href={blog.link} className="read-more">Read More</a>
+        <p>{blog.summary}</p>
+        <Link to={`/blog/${blog.id}`} className="read-more">Read More</Link>
       </div>
     </div>
   );
diff --git a/Frontend/react/src/components/BlogDetail.js b/Frontend/react/src/components/BlogDetail.js
index 679a630..f23e935 100644
--- a/Frontend/react/src/components/BlogDetail.js
+++ b/Frontend/react/src/components/BlogDetail.js
@@ -1,15 +1,59 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import axios from 'axios';
 import { useParams } from 'react-router-dom';
-import blogs from "../data/blogs.json";
+// import blogs from "../data/blogs.json";
 import { Link } from 'react-router-dom';
 
-const Blog = () => {
+const Blog = () => {  
+  const [blogs, setBlogs] = useState([]); // State to store blogs
+  const [isLoading, setIsLoading] = useState(true); // State to show loading indicator
+  const [error, setError] = useState(null); // State to handle errors
   const { id } = useParams();
 
+  useEffect(() => {
+
+    // Fetch blogs from the Django backend
+    const fetchBlogs = async () => {
+      try {
+        const response = await axios.get('http://127.0.0.1:8000/api/blogs/'); // Update with your backend URL
+        setBlogs(response.data.blogs); // Set blogs data
+        console.log(response.data.blogs);
+        setIsLoading(false); // Loading done
+      } catch (err) {
+        console.error("Error fetching blogs:", err);
+        setError("Failed to load blogs. Please try again later.");
+        setIsLoading(false);
+      }
+    };
+
+    fetchBlogs();
+  }, []);
+
+  if (isLoading) {
+    return <div>Loading blogs...</div>; // Loading indicator
+  }
+
+  if (error) {
+    return <div>{error}</div>; // Error message
+  }
+
+  
+
   const blog = blogs.find(blog => blog.id === Number(id));
 
+  const formattedDate = new Date(blog.date).toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+
   const mostViewedBlogs = blogs.filter(blog => blog.id !== Number(id)).sort((a, b) => b.views - a.views).slice(0,5);
 
+
+  // console.log(mostViewedBlogs);
   return (
     <div className="blog-body">
         <div className="blogmain-container">
@@ -18,7 +62,7 @@ const Blog = () => {
             <h2>{blog.title}</h2>
 
             <div className="blog-meta">
-              <span className="date">{blog.date}</span>
+              <span className="date">{formattedDate}</span>
               <span className="views">
                 <i className="bi bi-eye-fill"></i> {blog.views} Views
               </span>
@@ -31,7 +75,7 @@ const Blog = () => {
               {/* {blog.hooks.map((hook, index) => (
                 <p key={`hook-${index}`}>{hook}</p>
               ))} */}
-              {blog.content.map((paragraph, index) => (
+              {blog.content.split('\n').map((paragraph, index) => (
                 <p key={`content-${index}`}>{paragraph}</p>
               ))}
             </div>
diff --git a/Frontend/react/src/components/Blogs.js b/Frontend/react/src/components/Blogs.js
index 66146e1..aaf9461 100644
--- a/Frontend/react/src/components/Blogs.js
+++ b/Frontend/react/src/components/Blogs.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState }  from 'react';
 import axios from 'axios';
-import blogs from '../data/blogs.json';
+// import blogs from '../data/blogs.json';
 import BlogCard from "./BlogCard";
 import { Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
diff --git a/Frontend/react/src/components/CityCard.js b/Frontend/react/src/components/CityCard.js
index 450365b..219f861 100644
--- a/Frontend/react/src/components/CityCard.js
+++ b/Frontend/react/src/components/CityCard.js
@@ -2,10 +2,10 @@ import React from 'react';
 import axios from 'axios';
 const CityCard = ({ name, image, description, onClick }) => {
 
-  axios
-  .get('http://localhost:8000/api/hostels/')
-  .then((response) => console.log(response.data))
-  .catch((error) => console.error('Error:', error));
+  // axios
+  // .get('http://localhost:8000/api/hostels/')
+  // .then((response) => console.log(response.data))
+  // .catch((error) => console.error('Error:', error));
 
   return (
     <div className="card" onClick={onClick}>
diff --git a/Frontend/react/src/components/FeaturedHostels.js b/Frontend/react/src/components/FeaturedHostels.js
index 06c264f..8eca576 100644
--- a/Frontend/react/src/components/FeaturedHostels.js
+++ b/Frontend/react/src/components/FeaturedHostels.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import HostelCard from './HostelCard';
 import '../style.css';
-import hostels from '../data/hostels.json';
+// import hostels from '../data/hostels.json';
+import {useState, useEffect} from 'react';
 
 import { Pagination, Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -11,6 +12,42 @@ import 'swiper/css/navigation';
 
 
 const FeaturedHostels = () => {
+    const [featured, setFeatured]=useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+
+    const fetchFeaturedHostels = async () => {
+        setLoading(true);
+        setError(null);
+    
+        // const payload = {};
+    
+        try {
+          const response = await fetch('http://127.0.0.1:8000/api/hostels/', {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            // body: JSON.stringify(payload),
+          });
+          if (!response.ok) {
+              throw new Error('Failed to fetch hostels. Please try again.');
+            }
+            
+            const data = await response.json();
+            setFeatured(data.hostels);
+            // console.log(featured);
+        } catch (err) {
+          setError(err.message);
+        } finally {
+          setLoading(false);
+        }
+      };
+    
+      useEffect(() => {
+        fetchFeaturedHostels();
+      }, []);
+
     return (
         <div className="featuredhostel-section">
             <h2>Featured Hostels</h2>
@@ -36,7 +73,7 @@ const FeaturedHostels = () => {
                     }}
                     modules={[Pagination, Navigation]}
                     >
-                    {hostels.filter(hostel => hostel.isFeatured).map((hostel, index) => (
+                    {featured.filter(hostel => !hostel.isFeatured).map((hostel, index) => (
                         <SwiperSlide>
                             <HostelCard
                                 key={index}
diff --git a/Frontend/react/src/components/HostelCard.js b/Frontend/react/src/components/HostelCard.js
index d5acf12..8420968 100644
--- a/Frontend/react/src/components/HostelCard.js
+++ b/Frontend/react/src/components/HostelCard.js
@@ -8,7 +8,7 @@ const HostelCard = ({ id, image, name, isFeatured, rating, location, price, gend
   };
   return (
     <div className="card" onClick={handleCardClick}>
-      {isFeatured && <div className="ribbon">Featured</div>}
+      {!isFeatured && <div className="ribbon">Featured</div>}
       <img src={image} alt={name} />
       <div className="card-content">
         <div className="card-title">{name}</div>
@@ -18,8 +18,10 @@ const HostelCard = ({ id, image, name, isFeatured, rating, location, price, gend
         <div className="card-location">
           <i className="bi bi-geo-alt-fill"></i> {location}
         </div>
-        <div className="card-price">Rs. {price}</div>
-        <div className="card-gender">{gender} Hostel</div>
+        {/* <div className="card-price">Rs. {price}</div> */}
+        <div className="card-gender">
+          {gender === 0 ? 'Girls Hostel' : 'Boys Hostel'}
+        </div>
       </div>
     </div>
   );
diff --git a/Frontend/react/src/components/TopCities.js b/Frontend/react/src/components/TopCities.js
index 3ff3ba9..e687ac7 100644
--- a/Frontend/react/src/components/TopCities.js
+++ b/Frontend/react/src/components/TopCities.js
@@ -1,17 +1,19 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import CityCard from './CityCard';
 import topCitiesData from '../data/topcities.json';
 
 const TopCities = () => {
   const [showAll, setShowAll] = useState(false);
+  const navigate = useNavigate();
 
   const toggleCityRows = () => {
     setShowAll(!showAll);
   };
 
   const goToDetails = (city) => {
-    // Implement navigation logic here
     console.log(`Navigating to details of ${city}`);
+    navigate(`/search-results?location=${city}&lat=${0}&lon=${0}`);
   };
 
   return (