diff --git a/src/assets/1.jpg b/src/assets/1.jpg
new file mode 100644
index 0000000..39095fc
Binary files /dev/null and b/src/assets/1.jpg differ
diff --git a/src/assets/mountain.jpg b/src/assets/mountain.jpg
new file mode 100644
index 0000000..c6f4d3f
Binary files /dev/null and b/src/assets/mountain.jpg differ
diff --git a/src/pages/Blog/BlogContent.tsx b/src/pages/Blog/BlogContent.tsx
index 5aab8f0..c9c2d60 100644
--- a/src/pages/Blog/BlogContent.tsx
+++ b/src/pages/Blog/BlogContent.tsx
@@ -6,16 +6,25 @@ import {
 
 import MaxWidthWrapper from '@/components/MaxWidthWrapper';
 
-interface Blog {
+export interface Tag {
+    id: number;
+    name: string;
+    slug: string;
+}
+
+export interface Blog {
     id: number;
     title: string;
-    excerpt: string;
+    slug: string;
+    cover_image: string;
     content: string;
-    date: string;
-    author: string;
-    category: string;
-    image: string;
-    readTime: string;
+    author_name: string;
+    tags: Tag[];
+    reading_time: number;
+    published_at: string;
+    status: string;
+    created_at: string;
+    updated_at: string;
 }
 
 interface BlogContentProps {
@@ -23,51 +32,93 @@ interface BlogContentProps {
     blogs: Blog[];
 }
 
+// Helper function to format date
+const formatDate = (dateString: string) => new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+});
+
+// Helper function to strip HTML and create excerpt
+const createExcerpt = (htmlContent: string, maxLength: number = 150) => {
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+    const textContent = tempDiv.textContent || tempDiv.innerText || '';
+    return textContent.length > maxLength
+        ? `${textContent.substring(0, maxLength)}...`
+        : textContent;
+};
+
 function BlogContent(props: BlogContentProps) {
-    const {
-        selectedCategory, blogs,
-    } = props;
+    const { selectedCategory, blogs } = props;
+
+    if (!blogs || blogs.length === 0) {
+        return (
+            <section className="py-16 bg-white">
+                <MaxWidthWrapper>
+                    <div className="text-center">
+                        <p className="text-gray-600">No blog posts available.</p>
+                    </div>
+                </MaxWidthWrapper>
+            </section>
+        );
+    }
 
     return (
         <section className="py-16 bg-white">
             <MaxWidthWrapper>
                 {/* Featured Post */}
-
                 <div className="mb-16">
                     <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                         <div className="md:flex">
                             <div className="md:w-1/2">
                                 <img
-                                    src={blogs[0].image}
+                                    src={blogs[0].cover_image}
                                     alt={blogs[0].title}
                                     className="w-full h-64 md:h-full object-cover"
                                 />
                             </div>
                             <div className="md:w-1/2 p-8">
-                                <div className="flex items-center text-sm text-gray-500 mb-4">
-                                    <span className="bg-primary text-white px-3 py-1 rounded-full mr-4">
-                                        {blogs[0].category}
-                                    </span>
-                                    <Calendar className="h-4 w-4 mr-2" />
-                                    {blogs[0].date}
+                                <div className="flex items-center flex-wrap text-sm text-gray-500 mb-4">
+                                    <div className="flex flex-wrap gap-2 mr-4 mb-2">
+                                        {blogs[0].tags.map((tag) => (
+                                            <span
+                                                key={tag.id}
+                                                className="bg-primary text-white px-3 py-1 rounded-full text-xs"
+                                            >
+                                                {tag.name}
+                                            </span>
+                                        ))}
+                                    </div>
+                                    <div className="flex items-center mb-2">
+                                        <Calendar className="h-4 w-4 mr-2" />
+                                        {formatDate(blogs[0].published_at)}
+                                    </div>
                                 </div>
                                 <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
                                     {blogs[0].title}
                                 </h2>
                                 <p className="text-gray-600 mb-6 text-lg">
-                                    {blogs[0].excerpt}
+                                    {createExcerpt(blogs[0].content, 200)}
                                 </p>
                                 <div className="flex items-center justify-between">
                                     <div className="flex items-center">
                                         <Users className="h-4 w-4 mr-2 text-gray-400" />
-                                        <span className="text-gray-600">{blogs[0].author}</span>
+                                        <span className="text-gray-600">{blogs[0].author_name}</span>
+                                    </div>
+                                    <div className="flex items-center gap-4">
+                                        <span className="text-sm text-gray-500">
+                                            {blogs[0].reading_time}
+                                            {' '}
+                                            min read
+                                        </span>
+                                        <Link
+                                            to={`/blog/${blogs[0].id}`}
+                                            className="bg-primary hover:brightness-90 text-white px-6 py-2 rounded-lg font-medium transition-colors"
+                                        >
+                                            Read More
+                                        </Link>
                                     </div>
-                                    <Link
-                                        to={`/blog/${blogs[0].id}`}
-                                        className="bg-primary hover:brightness-90 text-white px-6 py-2 rounded-lg font-medium transition-colors"
-                                    >
-                                        Read More
-                                    </Link>
                                 </div>
                             </div>
                         </div>
@@ -79,31 +130,50 @@ function BlogContent(props: BlogContentProps) {
                     {blogs.slice(selectedCategory === 'All' ? 1 : 0).map((blog) => (
                         <article key={blog.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                             <img
-                                src={blog.image}
+                                src={blog.cover_image}
                                 alt={blog.title}
                                 className="w-full h-48 object-cover"
                             />
                             <div className="p-6">
-                                <div className="flex items-center text-sm text-gray-500 mb-3">
-                                    <span className="bg-primary text-white px-2 py-1 rounded mr-3 text-xs">
-                                        {blog.category}
-                                    </span>
-                                    <Calendar className="h-3 w-3 mr-1" />
-                                    {blog.date}
+                                <div className="flex items-center flex-wrap text-sm text-gray-500 mb-3">
+                                    <div className="flex flex-wrap gap-1 mr-3 mb-1">
+                                        {blog.tags.slice(0, 2).map((tag) => (
+                                            <span
+                                                key={tag.id}
+                                                className="bg-primary text-white px-2 py-1 rounded text-xs"
+                                            >
+                                                {tag.name}
+                                            </span>
+                                        ))}
+                                        {blog.tags.length > 2 && (
+                                            <span className="text-xs text-gray-400">
+                                                +
+                                                {blog.tags.length - 2}
+                                            </span>
+                                        )}
+                                    </div>
+                                    <div className="flex items-center mb-1">
+                                        <Calendar className="h-3 w-3 mr-1" />
+                                        {formatDate(blog.published_at)}
+                                    </div>
                                 </div>
                                 <h3 className="text-xl font-semibold text-gray-900 mb-3 line-clamp-2">
                                     {blog.title}
                                 </h3>
                                 <p className="text-gray-600 mb-4 line-clamp-3">
-                                    {blog.excerpt}
+                                    {createExcerpt(blog.content)}
                                 </p>
                                 <div className="flex items-center justify-between">
                                     <div className="flex items-center text-sm text-gray-500">
                                         <Users className="h-3 w-3 mr-1" />
-                                        {blog.author}
+                                        {blog.author_name}
                                     </div>
-                                    <div className="flex items-center">
-                                        <span className="text-xs text-gray-500 mr-3">{blog.readTime}</span>
+                                    <div className="flex items-center gap-3">
+                                        <span className="text-xs text-gray-500">
+                                            {blog.reading_time}
+                                            {' '}
+                                            min read
+                                        </span>
                                         <Link
                                             to={`/blog/${blog.id}`}
                                             className="text-primary hover:brightness-90 font-medium text-sm"
diff --git a/src/pages/Blog/index.tsx b/src/pages/Blog/index.tsx
index fb7d9fd..37ae943 100644
--- a/src/pages/Blog/index.tsx
+++ b/src/pages/Blog/index.tsx
@@ -1,87 +1,131 @@
 import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 
 import BlogContent from './BlogContent';
 
 import HeroSection from '@/components/HeroSection';
+import { baseRequest } from '@/lib/base';
+
+export interface Tag {
+    id: number;
+    name: string;
+    slug: string;
+}
+
+export interface BlogPost {
+    id: number;
+    title: string;
+    slug: string;
+    cover_image: string;
+    content: string;
+    author_name: string;
+    tags: Tag[];
+    reading_time: number;
+    published_at: string;
+    status: string;
+    created_at: string;
+    updated_at: string;
+}
+
+interface BlogAPIResponse {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    results: BlogPost[];
+}
+
+const blogService = {
+    async getPosts(): Promise<BlogAPIResponse> {
+        const response = await baseRequest({
+            url: '/cms/blog-posts/',
+            method: 'GET',
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch blog posts: ${response.statusText}`);
+        }
+
+        return response.data;
+    },
+};
 
 function Blog() {
     const title = 'Our Blog';
     const description = 'Stay updated with the latest news, stories, and updates from Mountain Children Home. Read about our children&apos;s achievements, ongoing projects, and community impact.';
 
-    const blogs = [
-        {
-            id: 1,
-            title: 'A Day in the Life at Mountain Children Home',
-            excerpt: 'Follow along as we share what a typical day looks like for our children, from morning prayers to evening activities. See how structure, love, and learning come together to create a nurturing environment.',
-            content: 'Every day at Mountain Children Home begins at 6:00 AM with the gentle sound of morning prayers...',
-            date: 'March 15, 2024',
-            author: 'Sarah Johnson',
-            category: 'Daily Life',
-            image: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-            readTime: '5 min read',
-        },
-        {
-            id: 2,
-            title: "Success Story: Maria's Journey to University",
-            excerpt: 'Read about Maria, who grew up at our home and is now pursuing her dreams at university thanks to your support. Her story is a testament to what love and education can achieve.',
-            content: 'Maria arrived at Mountain Children Home when she was just 8 years old...',
-            date: 'March 10, 2024',
-            author: 'Michael Chen',
-            category: 'Success Stories',
-            image: 'https://images.unsplash.com/photo-1649972904349-6e44c42644a7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-            readTime: '7 min read',
-        },
-        {
-            id: 3,
-            title: 'Building Our New Learning Center',
-            excerpt: "We're excited to share updates on our new learning center construction, which will provide better educational facilities for our children and expand our capacity to serve more kids in need.",
-            content: 'Construction on our new learning center is progressing wonderfully...',
-            date: 'March 5, 2024',
-            author: 'Sarah Johnson',
-            category: 'Updates',
-            image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-            readTime: '4 min read',
-        },
-        {
-            id: 4,
-            title: 'Celebrating Our 15th Anniversary',
-            excerpt: 'This month marks 15 years since Mountain Children Home first opened its doors. Join us as we reflect on our journey and celebrate the hundreds of lives that have been transformed.',
-            content: 'Fifteen years ago, our founders had a simple but powerful vision...',
-            date: 'February 28, 2024',
-            author: 'Dr. Maria Rodriguez',
-            category: 'Milestones',
-            image: 'https://images.unsplash.com/photo-1527576539890-dfa815648363?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-            readTime: '6 min read',
-        },
-        {
-            id: 5,
-            title: 'Health and Wellness Initiative Launch',
-            excerpt: "We're launching a comprehensive health and wellness program to ensure every child receives the physical and mental health support they need to thrive.",
-            content: "Good health is fundamental to a child's ability to learn and grow...",
-            date: 'February 20, 2024',
-            author: 'Dr. Maria Rodriguez',
-            category: 'Health',
-            image: 'https://images.unsplash.com/photo-1535268647677-300dbf3d78d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-            readTime: '5 min read',
-        },
-        {
-            id: 6,
-            title: 'Community Partnership Spotlight',
-            excerpt: 'Learn about our amazing partnership with local businesses and organizations that help make our mission possible. Community support is the backbone of our work.',
-            content: 'Our work would not be possible without the incredible support of our community partners...',
-            date: 'February 15, 2024',
-            author: 'Michael Chen',
-            category: 'Community',
-            image: 'https://images.unsplash.com/photo-1439886183900-e79ec0057170?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-            readTime: '4 min read',
-        },
-    ];
-
     const [selectedCategory] = useState('All');
 
+    const {
+        data: blogResponse,
+        isLoading,
+        isError,
+        error,
+    } = useQuery({
+        queryKey: ['blogs'],
+        queryFn: blogService.getPosts,
+    });
+
+    // Get published blogs only - with proper null checks
+    const publishedBlogs = blogResponse?.results?.filter((blog) => blog.status === 'published') || [];
+
+    // Filter blogs by category (if you implement category filtering later)
     const filteredBlogs = selectedCategory === 'All'
-        ? blogs
-        : blogs.filter((blog) => blog.category === selectedCategory);
+        ? publishedBlogs
+        : publishedBlogs.filter((blog) => blog.tags?.some(
+            (tag) => tag.name === selectedCategory,
+        ) || false);
+
+    // Handle loading state
+    if (isLoading) {
+        return (
+            <>
+                <HeroSection title={title} description={description} />
+                <div className="container mx-auto px-4 py-8">
+                    <div className="flex items-center justify-center min-h-[400px]">
+                        <div className="text-center">
+                            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4" />
+                            <p className="text-gray-600">Loading blog posts...</p>
+                        </div>
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    // Handle error state
+    if (isError) {
+        return (
+            <>
+                <HeroSection title={title} description={description} />
+                <div className="container mx-auto px-4 py-8">
+                    <div className="flex items-center justify-center min-h-[400px]">
+                        <div className="text-center">
+                            <p className="text-red-600 mb-4">Failed to load blog posts</p>
+                            <p className="text-gray-600">
+                                {error instanceof Error ? error.message : 'An unexpected error occurred'}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    // Handle empty state
+    if (filteredBlogs.length === 0) {
+        return (
+            <>
+                <HeroSection title={title} description={description} />
+                <div className="container mx-auto px-4 py-8">
+                    <div className="flex items-center justify-center min-h-[400px]">
+                        <div className="text-center">
+                            <p className="text-gray-600">No blog posts found</p>
+                        </div>
+                    </div>
+                </div>
+            </>
+        );
+    }
 
     return (
         <>
@@ -93,5 +137,4 @@ function Blog() {
         </>
     );
 }
-
 export default Blog;
diff --git a/src/pages/BlogDetail/index.tsx b/src/pages/BlogDetail/index.tsx
index c759a9a..14904e8 100644
--- a/src/pages/BlogDetail/index.tsx
+++ b/src/pages/BlogDetail/index.tsx
@@ -3,6 +3,7 @@ import {
     Link,
     useParams,
 } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
 import {
     Book,
     Calendar,
@@ -10,120 +11,153 @@ import {
 } from 'lucide-react';
 
 import MaxWidthWrapper from '@/components/MaxWidthWrapper';
+import { baseRequest } from '@/lib/base';
+
+// Types
+export interface Tag {
+    id: number;
+    name: string;
+    slug: string;
+}
+
+export interface BlogPost {
+    id: number;
+    title: string;
+    slug: string;
+    cover_image: string;
+    content: string;
+    author_name: string;
+    tags: Tag[];
+    reading_time: number;
+    published_at: string;
+    status: string;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface BlogAPIResponse {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    results: BlogPost[];
+}
+
+// API service
+const blogService = {
+    async getPosts(): Promise<BlogAPIResponse> {
+        const response = await baseRequest({
+            url: '/cms/blog-posts/',
+            method: 'GET',
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch blog posts: ${response.statusText}`);
+        }
+
+        return response.data;
+    },
+
+    async getPostById(id: string): Promise<BlogPost> {
+        const response = await baseRequest({
+            url: `/cms/blog-posts/${id}/`,
+            method: 'GET',
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch blog post: ${response.statusText}`);
+        }
+
+        return response.data;
+    },
+};
 
 function BlogDetail() {
     const { id } = useParams();
 
-    // This would typically come from an API or database
-    const blogs = [
-        {
-            id: 1,
-            title: 'A Day in the Life at Mountain Children Home',
-            content: `
-        <p>Every day at Mountain Children Home begins at 6:00 AM with the gentle sound of morning prayers. The children wake up naturally to this peaceful routine that has become second nature to them over the years.</p>
-        
-        <h3>Morning Routine (6:00 AM - 8:00 AM)</h3>
-        <p>After prayers, the children help each other get ready for the day. Personal hygiene is emphasized, and older children often help the younger ones brush their teeth and get dressed. Breakfast is served at 7:00 AM, featuring nutritious local foods prepared with love by our kitchen staff.</p>
-        
-        <h3>School Time (8:00 AM - 3:00 PM)</h3>
-        <p>Education is at the heart of everything we do. Our children attend both our on-site learning center and local schools in the community. We ensure each child receives quality education appropriate to their age and learning needs. Homework support is provided by our dedicated teaching staff.</p>
-        
-        <h3>Afternoon Activities (3:00 PM - 6:00 PM)</h3>
-        <p>After school, children engage in various activities including sports, arts and crafts, music lessons, and free play time. These activities help develop their creativity, physical fitness, and social skills.</p>
-        
-        <h3>Evening Wind Down (6:00 PM - 9:00 PM)</h3>
-        <p>Dinner is served at 6:00 PM, followed by family time where children share their daily experiences. Study time begins at 7:30 PM, and younger children have bedtime stories before lights out at 9:00 PM.</p>
-        
-        <p>This structured yet loving environment helps our children feel secure and supported as they grow and learn. Every day is filled with opportunities for growth, learning, and joy.</p>
-      `,
-            date: 'March 15, 2024',
-            author: 'Sarah Johnson',
-            category: 'Daily Life',
-            image: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-            readTime: '5 min read',
-        },
-        {
-            id: 2,
-            title: "Success Story: Maria's Journey to University",
-            content: `
-        <p>Maria arrived at Mountain Children Home when she was just 8 years old, having lost both parents in a tragic accident. Scared and alone, she barely spoke for the first few months of her stay with us.</p>
-        
-        <h3>Finding Her Voice</h3>
-        <p>With patience, love, and dedicated support from our care team, Maria slowly began to open up. She showed a natural aptitude for mathematics and science, subjects that became her refuge and passion.</p>
-        
-        <h3>Academic Excellence</h3>
-        <p>Throughout her years at Mountain Children Home, Maria consistently excelled in her studies. She received tutoring support from volunteers and participated in academic competitions, often placing in the top positions.</p>
-        
-        <h3>Dreams Take Flight</h3>
-        <p>When it came time for university applications, Maria set her sights high. With support from our education fund and her own determination, she was accepted into the prestigious State University's Engineering program.</p>
-        
-        <h3>Giving Back</h3>
-        <p>Now in her second year of studies, Maria regularly visits Mountain Children Home to tutor younger children in mathematics. She says our home gave her not just shelter and education, but hope and purpose.</p>
-        
-        <p>"Mountain Children Home didn't just save my life," Maria says, "they gave me the tools to build the life I dreamed of. Now I want to help other children discover their own potential."</p>
-        
-        <p>Maria's story is one of many that inspire us every day. It reminds us why we do this work and the incredible potential that lies within every child who walks through our doors.</p>
-      `,
-            date: 'March 10, 2024',
-            author: 'Michael Chen',
-            category: 'Success Stories',
-            image: 'https://images.unsplash.com/photo-1649972904349-6e44c42644a7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-            readTime: '7 min read',
-        },
-        {
-            id: 3,
-            title: 'Building Our New Learning Center',
-            content: `
-        <p>Construction on our new learning center is progressing wonderfully, and we're excited to share this milestone with our supporters who have made this dream possible.</p>
-        
-        <h3>Why We Need More Space</h3>
-        <p>Our current facility has served us well for 15 years, but as our family has grown, so has our need for dedicated learning spaces. The new center will provide modern classrooms, a computer lab, library, and multipurpose rooms for arts and crafts.</p>
-        
-        <h3>Construction Progress</h3>
-        <p>Ground was broken in January 2024, and we're pleased to report that construction is on schedule. The foundation has been completed, and walls are now rising. Local contractors have generously donated their services, and community volunteers help with various tasks.</p>
-        
-        <h3>Features of the New Center</h3>
-        <ul>
-          <li>Six modern classrooms with improved lighting and ventilation</li>
-          <li>Computer lab with 20 workstations</li>
-          <li>Library with space for 2,000 books</li>
-          <li>Science laboratory for hands-on learning</li>
-          <li>Multipurpose hall for events and gatherings</li>
-        </ul>
-        
-        <h3>Expected Completion</h3>
-        <p>We anticipate the learning center will be ready for use by the start of the new school year in September 2024. This will allow us to serve up to 50 more children and provide enhanced educational opportunities for all.</p>
-        
-        <p>Thank you to everyone who has supported this project. Your contributions are literally building the foundation for countless children's futures.</p>
-      `,
-            date: 'March 5, 2024',
-            author: 'Sarah Johnson',
-            category: 'Updates',
-            image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-            readTime: '4 min read',
-        },
-    ];
-
-    const blog = blogs.find((b) => b.id === Number(id));
-    const relatedBlogs = blogs.filter((b) => b.id !== Number(id)).slice(0, 3);
+    // Fetch all blog posts for related articles
+    const {
+        data: blogResponse,
+        isLoading: isLoadingBlogs,
+        isError: isBlogsError,
+        error: blogsError,
+    } = useQuery({
+        queryKey: ['blogs'],
+        queryFn: blogService.getPosts,
+    });
+
+    // Fetch specific blog post by id
+    const {
+        data: blog,
+        isLoading: isLoadingBlog,
+        isError: isBlogError,
+        error: blogError,
+    } = useQuery({
+        queryKey: ['blog', id],
+        queryFn: () => blogService.getPostById(id || ''),
+    });
+
+    // Format date helper
+    const formatDate = (dateString: string) => new Date(dateString).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    });
+
+    // Loading state
+    if (isLoadingBlog || isLoadingBlogs) {
+        return (
+            <MaxWidthWrapper>
+                <div className="max-w-4xl mx-auto px-4 py-16 text-center">
+                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4" />
+                    <p className="text-gray-600">Loading blog post...</p>
+                </div>
+            </MaxWidthWrapper>
+        );
+    }
+
+    // Error state
+    if (isBlogError || isBlogsError) {
+        return (
+            <MaxWidthWrapper>
+                <div className="max-w-4xl mx-auto px-4 py-16 text-center">
+                    <h1 className="text-2xl font-bold text-gray-900 mb-4">
+                        {blogError?.message || blogsError?.message || 'Something went wrong'}
+                    </h1>
+                    <Link to="/blog" className="text-blue-600 hover:text-blue-700">
+                        ← Back to Blog
+                    </Link>
+                </div>
+            </MaxWidthWrapper>
+        );
+    }
 
+    // Blog not found
     if (!blog) {
         return (
-            <div className="max-w-4xl mx-auto px-4 py-16 text-center">
-                <h1 className="text-2xl font-bold text-gray-900 mb-4">Blog post not found</h1>
-                <Link to="/blog" className="text-blue-600 hover:text-blue-700">
-                    ← Back to Blog
-                </Link>
-            </div>
+            <MaxWidthWrapper>
+                <div className="max-w-4xl mx-auto px-4 py-16 text-center">
+                    <h1 className="text-2xl font-bold text-gray-900 mb-4">Blog post not found</h1>
+                    <Link to="/blog" className="text-blue-600 hover:text-blue-700">
+                        ← Back to Blog
+                    </Link>
+                </div>
+            </MaxWidthWrapper>
         );
     }
 
-    return (
+    // Get related blogs (exclude current blog)
+    const relatedBlogs = blogResponse?.results
+        ?.filter((b) => b.id !== blog.id)
+        ?.slice(0, 3) || [];
 
+    // Get primary category from tags
+    const primaryTag = blog.tags?.[0];
+
+    return (
         <MaxWidthWrapper>
             {/* Breadcrumb */}
             <nav className="mb-8">
-                <Link to="/blog" className="text-blue-600 hover:text-blue-700 font-medium">
+                <Link to="/blog" className="text-primary hover:text-blue-700 font-medium">
                     ← Back to Blog
                 </Link>
             </nav>
@@ -131,14 +165,18 @@ function BlogDetail() {
             {/* Article Header */}
             <header className="mb-8">
                 <div className="flex items-center text-sm text-gray-500 mb-4">
-                    <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full mr-4">
-                        {blog.category}
-                    </span>
+                    {primaryTag && (
+                        <span className="bg-primary text-white px-3 py-1 rounded-full mr-4">
+                            {primaryTag.name}
+                        </span>
+                    )}
                     <Calendar className="h-4 w-4 mr-2" />
-                    {blog.date}
+                    {formatDate(blog.published_at)}
                     <span className="mx-2">•</span>
                     <Book className="h-4 w-4 mr-2" />
-                    {blog.readTime}
+                    {blog.reading_time}
+                    {' '}
+                    min read
                 </div>
 
                 <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
@@ -150,13 +188,14 @@ function BlogDetail() {
                         <Users className="h-5 w-5 mr-2 text-gray-400" />
                         <span className="text-gray-600 font-medium">
                             By
-                            {blog.author}
+                            {' '}
+                            {blog.author_name}
                         </span>
                     </div>
                 </div>
 
                 <img
-                    src={blog.image}
+                    src={blog.cover_image}
                     alt={blog.title}
                     className="w-full h-64 md:h-96 object-cover rounded-lg shadow-lg"
                 />
@@ -165,29 +204,59 @@ function BlogDetail() {
             {/* Article Content */}
             <div className="prose prose-lg max-w-none mb-12">
                 <div
-                    dangerouslySetInnerHTML={{ __html: blog.content.replace(/\n/g, '') }}
+                    dangerouslySetInnerHTML={{ __html: blog.content }}
                     className="text-gray-700 leading-relaxed space-y-6"
                 />
             </div>
 
+            {/* Tags */}
+            {blog.tags && blog.tags.length > 0 && (
+                <div className="mb-8">
+                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Tags</h3>
+                    <div className="flex flex-wrap gap-2">
+                        {blog.tags.map((tag) => (
+                            <span
+                                key={tag.id}
+                                className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors"
+                            >
+                                {tag.name}
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            )}
+
             {/* Social Sharing */}
             <div className="border-t border-gray-200 pt-8 mb-12">
                 <h3 className="text-lg font-semibold text-gray-900 mb-4">Share this story</h3>
                 <div className="flex space-x-4">
                     <button
                         type="button"
+                        onClick={() => {
+                            const url = window.location.href;
+                            window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank');
+                        }}
                         className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium transition-colors"
                     >
                         Share on Facebook
                     </button>
                     <button
                         type="button"
+                        onClick={() => {
+                            const url = window.location.href;
+                            const text = `Check out this story: ${blog.title}`;
+                            window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank');
+                        }}
                         className="bg-blue-400 hover:bg-blue-500 text-white px-4 py-2 rounded font-medium transition-colors"
                     >
                         Share on Twitter
                     </button>
                     <button
                         type="button"
+                        onClick={() => {
+                            navigator.clipboard.writeText(window.location.href);
+                            // You might want to show a toast notification here
+                        }}
                         className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded font-medium transition-colors"
                     >
                         Copy Link
@@ -196,41 +265,42 @@ function BlogDetail() {
             </div>
 
             {/* Related Articles */}
-            <section className="border-t border-gray-200 pt-12">
-                <h3 className="text-2xl font-bold text-gray-900 mb-8">Related Stories</h3>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    {relatedBlogs.map((relatedBlog) => (
-                        <Link
-                            key={relatedBlog.id}
-                            to={`/blog/${relatedBlog.id}`}
-                            className="group"
-                        >
-                            <article className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
-                                <img
-                                    src={relatedBlog.image}
-                                    alt={relatedBlog.title}
-                                    className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
-                                />
-                                <div className="p-4">
-                                    <div className="flex items-center text-xs text-gray-500 mb-2">
-                                        <Calendar className="h-3 w-3 mr-1" />
-                                        {relatedBlog.date}
+            {relatedBlogs.length > 0 && (
+                <section className="border-t border-gray-200 pt-12">
+                    <h3 className="text-2xl font-bold text-gray-900 mb-8">Related Stories</h3>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        {relatedBlogs.map((relatedBlog) => (
+                            <Link
+                                key={relatedBlog.id}
+                                to={`/blog/${relatedBlog.id}`}
+                                className="group"
+                            >
+                                <article className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                                    <img
+                                        src={relatedBlog.cover_image}
+                                        alt={relatedBlog.title}
+                                        className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
+                                    />
+                                    <div className="p-4">
+                                        <div className="flex items-center text-xs text-gray-500 mb-2">
+                                            <Calendar className="h-3 w-3 mr-1" />
+                                            {formatDate(relatedBlog.published_at)}
+                                        </div>
+                                        <h4 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
+                                            {relatedBlog.title}
+                                        </h4>
+                                        <p className="text-gray-600 text-sm line-clamp-2">
+                                            {relatedBlog.content.replace(/<[^>]*>/g, '').substring(0, 100)}
+                                            ...
+                                        </p>
                                     </div>
-                                    <h4 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
-                                        {relatedBlog.title}
-                                    </h4>
-                                    <p className="text-gray-600 text-sm line-clamp-2">
-                                        {relatedBlog.content.replace(/<[^>]*>/g, '').substring(0, 100)}
-                                        ...
-                                    </p>
-                                </div>
-                            </article>
-                        </Link>
-                    ))}
-                </div>
-            </section>
+                                </article>
+                            </Link>
+                        ))}
+                    </div>
+                </section>
+            )}
         </MaxWidthWrapper>
-
     );
 }
 
diff --git a/src/pages/ContactUs/ContactSection.tsx b/src/pages/ContactUs/ContactSection.tsx
index a851b6a..ff3e7c5 100644
--- a/src/pages/ContactUs/ContactSection.tsx
+++ b/src/pages/ContactUs/ContactSection.tsx
@@ -135,7 +135,7 @@ function ContactSection(props:ContactSectionProps) {
 
                             <button
                                 type="submit"
-                                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 px-6 rounded-lg transition-colors"
+                                className="w-full bg-primary hover:brightness-90 text-white font-semibold py-4 px-6 rounded-lg transition-colors"
                             >
                                 Send Message
                             </button>
@@ -152,7 +152,7 @@ function ContactSection(props:ContactSectionProps) {
                                 <h3 className="text-xl font-semibold text-gray-900 mb-4">Contact Information</h3>
                                 <div className="space-y-4">
                                     <div className="flex items-start">
-                                        <ContactIcon className="h-5 w-5 text-blue-600 mr-3 mt-1" />
+                                        <ContactIcon className="h-5 w-5 text-primary mr-3 mt-1" />
                                         <div>
                                             <p className="font-medium text-gray-900">Address</p>
                                             <p className="text-gray-600">
@@ -163,14 +163,14 @@ function ContactSection(props:ContactSectionProps) {
                                         </div>
                                     </div>
                                     <div className="flex items-start">
-                                        <ContactIcon className="h-5 w-5 text-blue-600 mr-3 mt-1" />
+                                        <ContactIcon className="h-5 w-5 text-primary mr-3 mt-1" />
                                         <div>
                                             <p className="font-medium text-gray-900">Phone</p>
                                             <p className="text-gray-600">(555) 123-4567</p>
                                         </div>
                                     </div>
                                     <div className="flex items-start">
-                                        <ContactIcon className="h-5 w-5 text-blue-600 mr-3 mt-1" />
+                                        <ContactIcon className="h-5 w-5 text-primary mr-3 mt-1" />
                                         <div>
                                             <p className="font-medium text-gray-900">Email</p>
                                             <p className="text-gray-600">info@mountainchildrenhome.org</p>
diff --git a/src/pages/Gallery/GallerySection.tsx b/src/pages/Gallery/GallerySection.tsx
index bc2bcc7..7dac965 100644
--- a/src/pages/Gallery/GallerySection.tsx
+++ b/src/pages/Gallery/GallerySection.tsx
@@ -6,25 +6,30 @@ import { X } from 'lucide-react';
 
 import MaxWidthWrapper from '@/components/MaxWidthWrapper';
 
-// Define interfaces - make sure these match the parent component
-interface Image {
-  src: string;
-  alt: string;
-}
+export interface Photo {
+    id: number;
+    image: string;
+    caption: string;
+    created_at: string;
+    album: number;
+  }
 
-interface Album {
-  id: string; // Changed from string | number to just string to match parent
-  cover: string;
-  name: string;
-  images: Image[];
-}
+export interface Album {
+    id: number;
+    title: string;
+    slug: string;
+    description: string;
+    cover_image: string;
+    created_at: string;
+    photos: Photo[];
+  }
 
 interface GalleryProps {
-  selectedAlbum: string | null; // Changed from string | number | null to string | null
-  setSelectedAlbum: (id: string | null) => void; // Changed from string | number | null
+  selectedAlbum: string | null;
+  setSelectedAlbum: (id: string | null) => void;
   albums: Album[];
   currentAlbum: Album | undefined;
-  currentImages: Image[];
+  currentImages: Photo[];
   selectedImage: number | null;
   openImage: (index: number) => void;
   closeImage: () => void;
@@ -67,18 +72,18 @@ function GallerySection(props: GalleryProps) {
                                     <div
                                         key={album.id}
                                         className="relative group cursor-pointer"
-                                        onClick={() => setSelectedAlbum(album.id)}
+                                        onClick={() => setSelectedAlbum(album.slug)}
                                     >
                                         <div className="relative overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow">
                                             <img
-                                                src={album.cover}
-                                                alt={album.name}
+                                                src={album.cover_image}
+                                                alt={album.title}
                                                 className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                                             />
                                             <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
-                                                <h3 className="text-white font-semibold text-lg">{album.name}</h3>
+                                                <h3 className="text-white font-semibold text-lg">{album.title}</h3>
                                                 <p className="text-gray-200 text-sm">
-                                                    {album.images.length}
+                                                    {album.photos.length}
                                                     {' '}
                                                     photos
                                                 </p>
@@ -100,21 +105,21 @@ function GallerySection(props: GalleryProps) {
                                     >
                                         ← Back to Albums
                                     </button>
-                                    <h2 className="text-3xl font-bold text-gray-900">{currentAlbum?.name}</h2>
+                                    <h2 className="text-3xl font-bold text-gray-900">{currentAlbum?.title}</h2>
                                 </div>
                             </div>
 
                             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                                 {currentImages.map((image, index) => (
                                     <div
-                                        key={image.src}
+                                        key={image.image}
                                         className="relative group cursor-pointer"
                                         onClick={() => openImage(index)}
                                     >
                                         <div className="relative overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow">
                                             <img
-                                                src={image.src}
-                                                alt={image.alt}
+                                                src={image.image}
+                                                alt={image.caption}
                                                 className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                                             />
                                         </div>
@@ -144,8 +149,8 @@ function GallerySection(props: GalleryProps) {
                         </button>
 
                         <img
-                            src={currentImages[selectedImage].src}
-                            alt={currentImages[selectedImage].alt}
+                            src={currentImages[selectedImage].image}
+                            alt={currentImages[selectedImage].caption}
                             className="max-w-full max-h-full object-contain"
                             onClick={(e) => e.stopPropagation()}
                         />
diff --git a/src/pages/Gallery/index.tsx b/src/pages/Gallery/index.tsx
index 31a648e..95a7a66 100644
--- a/src/pages/Gallery/index.tsx
+++ b/src/pages/Gallery/index.tsx
@@ -1,99 +1,71 @@
 import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 
-import GallerySection from './GallerySection';
+import GallerySection, { type Album } from './GallerySection';
 
 import HeroSection from '@/components/HeroSection';
+import { baseRequest } from '@/lib/base';
+
+interface AlbumAPIResponse {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    results: Album[];
+}
+
+export interface Photo {
+    id: number;
+    image: string;
+    caption: string;
+    created_at: string;
+    album: number;
+  }
+
+const galleryService = {
+    async getAlbums(): Promise<AlbumAPIResponse> {
+        const response = await baseRequest({
+            url: '/cms/albums/',
+            method: 'GET',
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch albums: ${response.statusText}`);
+        }
+
+        return response.data;
+    },
+};
+
+const QUERY_KEYS = {
+    photos: ['photos'] as const,
+    albums: ['albums'] as const,
+} as const;
 
 function Gallery() {
     const [selectedImage, setSelectedImage] = useState<number | null>(null);
     const [selectedAlbum, setSelectedAlbum] = useState<string | null>(null);
     const title = 'Our Gallery';
     const description = 'Explore the moments of joy, learning, and growth at Mountain Children Home through our photo gallery.';
-    const albums = [
-        {
-            id: 'daily-life',
-            name: 'Daily Life',
-            cover: 'https://images.unsplash.com/photo-1517022812141-23620dba5c23?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
-            images: [
-                {
-                    src: 'https://images.unsplash.com/photo-1517022812141-23620dba5c23?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Children playing together',
-                },
-                {
-                    src: 'https://images.unsplash.com/photo-1535268647677-300dbf3d78d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Study time',
-                },
-                {
-                    src: 'https://images.unsplash.com/photo-1439886183900-e79ec0057170?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Outdoor activities',
-                },
-                {
-                    src: 'https://images.unsplash.com/photo-1649972904349-6e44c42644a7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Learning together',
-                },
-            ],
-        },
-        {
-            id: 'education',
-            name: 'Education & Learning',
-            cover: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
-            images: [
-                {
-                    src: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Classroom learning',
-                },
-                {
-                    src: 'https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Computer learning',
-                },
-                {
-                    src: 'https://images.unsplash.com/photo-1649972904349-6e44c42644a7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Reading time',
-                },
-            ],
-        },
-        {
-            id: 'events',
-            name: 'Special Events',
-            cover: 'https://images.unsplash.com/photo-1527576539890-dfa815648363?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
-            images: [
-                {
-                    src: 'https://images.unsplash.com/photo-1527576539890-dfa815648363?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Birthday celebration',
-                },
-                {
-                    src: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Holiday gathering',
-                },
-                {
-                    src: 'https://images.unsplash.com/photo-1517022812141-23620dba5c23?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Graduation ceremony',
-                },
-            ],
-        },
-        {
-            id: 'facilities',
-            name: 'Our Facilities',
-            cover: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
-            images: [
-                {
-                    src: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Main building',
-                },
-                {
-                    src: 'https://images.unsplash.com/photo-1527576539890-dfa815648363?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Dormitory rooms',
-                },
-                {
-                    src: 'https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-                    alt: 'Learning center',
-                },
-            ],
-        },
-    ];
-
-    const currentAlbum = albums.find((album) => album.id === selectedAlbum);
-    const currentImages = currentAlbum?.images || [];
+
+    const {
+        data: albumsResponse,
+        isLoading,
+        isError,
+        error,
+    } = useQuery({
+        queryKey: QUERY_KEYS.albums, // Add this to your QUERY_KEYS constant
+        queryFn: galleryService.getAlbums,
+        staleTime: 5 * 60 * 1000, // 5 minutes
+        gcTime: 10 * 60 * 1000, // 10 minutes
+        retry: 2,
+        refetchOnWindowFocus: false,
+    });
+
+    // Use API data directly to match GallerySection component types
+    const albums = albumsResponse?.results || [];
+
+    const currentAlbum = albums.find((album) => album.slug === selectedAlbum);
+    const currentImages = currentAlbum?.photos || [];
 
     const openImage = (index: number) => {
         setSelectedImage(index);
@@ -121,10 +93,63 @@ function Gallery() {
         if (e.key === 'Escape') closeImage();
     };
 
+    // Handle loading state
+    if (isLoading) {
+        return (
+            <>
+                <HeroSection title={title} description={description} />
+                <div className="container mx-auto px-4 py-8">
+                    <div className="flex items-center justify-center min-h-[400px]">
+                        <div className="text-center">
+                            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4" />
+                            <p className="text-gray-600">Loading gallery...</p>
+                        </div>
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    // Handle error state
+    if (isError) {
+        return (
+            <>
+                <HeroSection title={title} description={description} />
+                <div className="container mx-auto px-4 py-8">
+                    <div className="flex items-center justify-center min-h-[400px]">
+                        <div className="text-center">
+                            <p className="text-red-600 mb-4">Failed to load gallery</p>
+                            <p className="text-gray-600">
+                                {error instanceof Error ? error.message : 'An unexpected error occurred'}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    // Handle empty state
+    if (albums.length === 0) {
+        return (
+            <>
+                <HeroSection title={title} description={description} />
+                <div className="container mx-auto px-4 py-8">
+                    <div className="flex items-center justify-center min-h-[400px]">
+                        <div className="text-center">
+                            <p className="text-gray-600">No albums found</p>
+                        </div>
+                    </div>
+                </div>
+            </>
+        );
+    }
+
     return (
         <>
             {/* Hero Section */}
             <HeroSection title={title} description={description} />
+
             {/* Gallery Content */}
             <GallerySection
                 selectedAlbum={selectedAlbum}
diff --git a/src/pages/Home/GalleryPreview.tsx b/src/pages/Home/GalleryPreview.tsx
index d2dbf40..f124a80 100644
--- a/src/pages/Home/GalleryPreview.tsx
+++ b/src/pages/Home/GalleryPreview.tsx
@@ -1,26 +1,83 @@
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
 
 import MaxWidthWrapper from '@/components/MaxWidthWrapper';
+import { baseRequest } from '@/lib/base';
 
-function GalleryPreview() {
-    const images = [
-        {
-            src: 'https://images.unsplash.com/photo-1517022812141-23620dba5c23?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
-            alt: 'Children playing',
-        },
-        {
-            src: 'https://images.unsplash.com/photo-1535268647677-300dbf3d78d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
-            alt: 'Study time',
-        },
-        {
-            src: 'https://images.unsplash.com/photo-1439886183900-e79ec0057170?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
-            alt: 'Outdoor activities',
-        },
-        {
-            src: 'https://images.unsplash.com/photo-1649972904349-6e44c42644a7?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
-            alt: 'Learning together',
-        },
-    ];
+interface Photo {
+    id: number;
+    image: string;
+    caption: string;
+    created_at: string;
+    album: number;
+}
+
+interface PhotoResponse {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    results: Photo[];
+}
+
+// Move service outside component to prevent recreation on each render
+const galleryService = {
+    async getPhotos(): Promise<PhotoResponse> {
+        const response = await baseRequest({
+            url: '/cms/photos/',
+            method: 'GET',
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch photos: ${response.statusText}`);
+        }
+
+        return response.data;
+    },
+};
+
+interface GalleryProps {
+    maxImages?: number;
+}
+
+function GalleryPreview({ maxImages = 5 }: GalleryProps) {
+    const { data: photosResponse, isLoading } = useQuery({
+        queryKey: ['photos'],
+        queryFn: galleryService.getPhotos,
+    });
+
+    // Memoize the display photos to prevent unnecessary recalculations
+    const displayPhotos = useMemo(() => {
+        const photos = photosResponse?.results || [];
+        return photos.slice(0, maxImages);
+    }, [photosResponse?.results, maxImages]);
+
+    // Memoize loading skeleton to prevent recreation
+    const loadingSkeleton = useMemo(() => (
+        <section className="py-16 bg-gray-50">
+            <MaxWidthWrapper>
+                <div className="text-center mb-12">
+                    <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Gallery</h2>
+                    <p className="text-lg text-gray-600">
+                        Take a glimpse into the daily lives of our children and see the joy,
+                        learning, and growth happening at Mountain Children Home.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                    {Array.from({ length: maxImages }, (_, index) => (
+                        <div key={index} className="relative overflow-hidden rounded-lg shadow-md">
+                            <div className="w-full h-64 bg-gray-300 animate-pulse" />
+                        </div>
+                    ))}
+                </div>
+            </MaxWidthWrapper>
+        </section>
+    ), [maxImages]);
+
+    if (isLoading) {
+        return loadingSkeleton;
+    }
 
     return (
         <section className="py-16 bg-gray-50">
@@ -34,13 +91,26 @@ function GalleryPreview() {
                 </div>
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-                    {images.map((image) => (
-                        <div key={image.alt} className="relative group overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow">
+                    {displayPhotos.map((photo) => (
+                        <div
+                            key={photo.id}
+                            className="relative group overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow"
+                        >
                             <img
-                                src={image.src}
-                                alt={image.alt}
+                                src={photo.image}
+                                alt={photo.caption || `Gallery image ${photo.id}`}
                                 className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
+                                loading="lazy"
+                                onError={(e) => {
+                                    const target = e.target as HTMLImageElement;
+                                    target.src = '/placeholder-image.jpg';
+                                }}
                             />
+                            {photo.caption && (
+                                <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm">
+                                    {photo.caption}
+                                </div>
+                            )}
                         </div>
                     ))}
                 </div>
diff --git a/src/pages/Home/Hero.tsx b/src/pages/Home/Hero.tsx
index 51dfb0d..75c3382 100644
--- a/src/pages/Home/Hero.tsx
+++ b/src/pages/Home/Hero.tsx
@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 
+import image1 from '@/assets/1.jpg';
 import MaxWidthWrapper from '@/components/MaxWidthWrapper';
 
 function HeroSection() {
@@ -9,7 +10,8 @@ function HeroSection() {
             <div
                 className="relative min-h-[500px] sm:min-h-[600px] flex items-center bg-cover bg-center"
                 style={{
-                    backgroundImage: "url('https://images.unsplash.com/photo-1517022812141-23620dba5c23?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80')",
+                    backgroundImage: `url(${image1})`,
+                    backgroundPosition: 'bottom',
                 }}
             >
                 <div className="absolute inset-0 bg-primary opacity-75" />
diff --git a/src/pages/Home/WhoWeAreSection.tsx b/src/pages/Home/WhoWeAreSection.tsx
index 279fb7a..9e2d66c 100644
--- a/src/pages/Home/WhoWeAreSection.tsx
+++ b/src/pages/Home/WhoWeAreSection.tsx
@@ -1,3 +1,4 @@
+import img1 from '@/assets/mountain.jpg';
 import MaxWidthWrapper from '@/components/MaxWidthWrapper';
 
 function WhoWeAreSection() {
@@ -37,7 +38,7 @@ function WhoWeAreSection() {
                     </div>
                     <div className="relative order-1 lg:order-2">
                         <img
-                            src="https://images.unsplash.com/photo-1517022812141-23620dba5c23?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
+                            src={img1}
                             alt="Children at Mountain Children Home"
                             className="rounded-lg shadow-lg w-full h-64 sm:h-80 lg:h-96 object-cover"
                         />