diff --git a/app/blog/page.js b/app/blog/page.js
index a8d529c..b41e6dd 100644
--- a/app/blog/page.js
+++ b/app/blog/page.js
@@ -1,7 +1,7 @@
-
 import Layout from "@/components/layout/Layout";
 import Link from "next/link";
 import Blogs from "@/utils/Blog.utils";
+import BlogList from "@/components/blog/BlogList";
 
 export const metadata = {
   title: "Rapharehab Blog – Wellness Tips & Rehab Insights",
@@ -18,46 +18,7 @@ export default function Blog() {
             <h2>Stay Updated with <br />Our Recent Blog Posts</h2>
           </div>
 
-          <div className="row clearfix">
-            {Blogs.map((blog, i) => (
-              <div key={i} className="col-lg-4 col-md-6 col-sm-12 news-block">
-                <div
-                  className="news-block-one wow fadeInUp animated"
-                  data-wow-delay={`${i * 20}ms`}
-                  data-wow-duration="300ms"
-                >
-                  <div className="inner-box">
-                    <figure className="image-box">
-                      <Link href={`/blog/${blog.slug}`} aria-label="Blog Image">
-                        <img src={blog.thumbnail} alt={blog.title} loading="lazy"/>
-                      </Link>
-                    </figure>
-                    <div className="lower-content">
-                      {/* <ul className="post-info mb_15 clearfix">
-                        <li><Link href="#">{blog.author}</Link></li>
-                        <li>{blog.date}</li>
-                        <li>{blog.comments}</li>
-                      </ul> */}
-                      <h3>
-                        {/* <Link href={`/blog/${blog.slug}`} aria-label="Our Blog Title">
-                          {blog.title.split(" ").length > 5
-                            ? blog.title.split(" ").slice(0, 5).join(" ") + "..."
-                            : blog.title}
-                        </Link> */}
-                          <Link href={`/blog/${blog.slug}`} aria-label="Our Blog title">
-                        {blog.title.length > 35 ? blog.title.slice(0, 35) + "..." : blog.title}
-                      </Link>
-                      </h3>
-                      <p> {blog.shortDesc.length > 80 ? blog.shortDesc.slice(0, 80) + "..." : blog.shortDesc}</p>
-                      <div className="link">
-                        <Link href={`/blog/${blog.slug}`} aria-label="Read More"><span>Read More</span></Link>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
+          <BlogList blogs={Blogs} />
 
         </div>
       </section>
diff --git a/components/blog/BlogList.js b/components/blog/BlogList.js
new file mode 100644
index 0000000..118ee57
--- /dev/null
+++ b/components/blog/BlogList.js
@@ -0,0 +1,216 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import Link from "next/link";
+
+export default function BlogList({ blogs }) {
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 12;
+    const listRef = useRef(null);
+
+    const totalPages = Math.ceil(blogs.length / itemsPerPage);
+
+    const indexOfLastItem = currentPage * itemsPerPage;
+    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+    const currentItems = blogs.slice(indexOfFirstItem, indexOfLastItem);
+
+    // Scroll to top of the list when page changes
+    useEffect(() => {
+        if (listRef.current) {
+            // Scroll to the top of the blog section, adjusting for some offset if needed
+            const yOffset = -100; // Adjust for header height if sticky
+            const y = listRef.current.getBoundingClientRect().top + window.pageYOffset + yOffset;
+            window.scrollTo({ top: y, behavior: 'smooth' });
+        }
+    }, [currentPage]);
+
+    const paginate = (pageNumber) => setCurrentPage(pageNumber);
+    const nextPage = () => currentPage < totalPages && setCurrentPage(currentPage + 1);
+    const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);
+
+    return (
+        <>
+            <div ref={listRef} className="row clearfix">
+                {currentItems.map((blog, i) => (
+                    <div key={i} className="col-lg-4 col-md-6 col-sm-12 news-block">
+                        <div
+                            className="news-block-one wow fadeInUp animated"
+                            data-wow-delay={`${i * 20}ms`}
+                            data-wow-duration="300ms"
+                        >
+                            <div className="inner-box">
+                                <figure className="image-box">
+                                    <Link href={`/blog/${blog.slug}`} aria-label="Blog Image">
+                                        <img src={blog.thumbnail} alt={blog.title} loading="lazy" />
+                                    </Link>
+                                </figure>
+                                <div className="lower-content">
+                                    <h3>
+                                        <Link href={`/blog/${blog.slug}`} aria-label="Our Blog title">
+                                            {blog.title.length > 35
+                                                ? blog.title.slice(0, 35) + "..."
+                                                : blog.title}
+                                        </Link>
+                                    </h3>
+                                    <p>
+                                        {blog.shortDesc.length > 80
+                                            ? blog.shortDesc.slice(0, 80) + "..."
+                                            : blog.shortDesc}
+                                    </p>
+                                    <div className="link">
+                                        <Link href={`/blog/${blog.slug}`} aria-label="Read More">
+                                            <span>Read More</span>
+                                        </Link>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Pagination Controls */}
+            {totalPages > 1 && (
+                <div
+                    className="pagination-wrapper centred"
+                    style={{ marginTop: "30px", marginBottom: "30px" }}
+                >
+                    <ul
+                        className="pagination clearfix"
+                        style={{
+                            display: "inline-flex",
+                            gap: "10px",
+                            listStyle: "none",
+                            padding: 0,
+                        }}
+                    >
+                        {/* Previous Button */}
+                        <li>
+                            <button
+                                onClick={prevPage}
+                                // disabled={currentPage === 1} // Keep enabled but maybe visually distinct if needed, user said do not hide
+                                style={{
+                                    width: "40px",
+                                    height: "40px",
+                                    lineHeight: "40px",
+                                    textAlign: "center",
+                                    border: "1px solid #101A30", // Using one of the requested colors
+                                    backgroundColor: currentPage === 1 ? "#fff" : "#fff",
+                                    color: "#101A30",
+                                    fontSize: "18px",
+                                    fontWeight: "700",
+                                    cursor: currentPage === 1 ? "not-allowed" : "pointer",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    transition: "all 0.3s ease",
+                                    opacity: currentPage === 1 ? 0.5 : 1 // Visually indicate disabled but keep color
+                                }}
+                                onMouseEnter={(e) => {
+                                    if (currentPage !== 1) {
+                                        e.target.style.backgroundColor = "#bc0000";
+                                        e.target.style.color = "#fff";
+                                        e.target.style.borderColor = "#bc0000";
+                                    }
+                                }}
+                                onMouseLeave={(e) => {
+                                    if (currentPage !== 1) {
+                                        e.target.style.backgroundColor = "#fff";
+                                        e.target.style.color = "#101A30";
+                                        e.target.style.borderColor = "#101A30";
+                                    }
+                                }}
+                            >
+                                <i className="fas fa-angle-double-left"></i>
+                            </button>
+                        </li>
+
+                        {/* Page Numbers */}
+                        {Array.from({ length: totalPages }, (_, i) => i + 1).map((number) => (
+                            <li key={number}>
+                                <button
+                                    onClick={() => paginate(number)}
+                                    style={{
+                                        width: "40px",
+                                        height: "40px",
+                                        lineHeight: "40px",
+                                        textAlign: "center",
+                                        border:
+                                            currentPage === number
+                                                ? "1px solid #bc0000"
+                                                : "1px solid #101A30",
+                                        backgroundColor: currentPage === number ? "#bc0000" : "#fff",
+                                        color: currentPage === number ? "#fff" : "#101A30",
+                                        fontSize: "16px",
+                                        fontWeight: "600",
+                                        cursor: "pointer",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        transition: "all 0.3s ease",
+                                    }}
+                                    onMouseEnter={(e) => {
+                                        if (currentPage !== number) {
+                                            e.target.style.backgroundColor = "#bc0000";
+                                            e.target.style.color = "#fff";
+                                            e.target.style.borderColor = "#bc0000";
+                                        }
+                                    }}
+                                    onMouseLeave={(e) => {
+                                        if (currentPage !== number) {
+                                            e.target.style.backgroundColor = "#fff";
+                                            e.target.style.color = "#101A30";
+                                            e.target.style.borderColor = "#101A30";
+                                        }
+                                    }}
+                                >
+                                    {number}
+                                </button>
+                            </li>
+                        ))}
+
+                        {/* Next Button */}
+                        <li>
+                            <button
+                                onClick={nextPage}
+                                // disabled={currentPage === totalPages}
+                                style={{
+                                    width: "40px",
+                                    height: "40px",
+                                    lineHeight: "40px",
+                                    textAlign: "center",
+                                    border: "1px solid #101A30",
+                                    backgroundColor: currentPage === totalPages ? "#fff" : "#fff",
+                                    color: "#101A30",
+                                    fontSize: "18px",
+                                    fontWeight: "700",
+                                    cursor: currentPage === totalPages ? "not-allowed" : "pointer",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    transition: "all 0.3s ease",
+                                    opacity: currentPage === totalPages ? 0.5 : 1
+                                }}
+                                onMouseEnter={(e) => {
+                                    if (currentPage !== totalPages) {
+                                        e.target.style.backgroundColor = "#bc0000";
+                                        e.target.style.color = "#fff";
+                                        e.target.style.borderColor = "#bc0000";
+                                    }
+                                }}
+                                onMouseLeave={(e) => {
+                                    if (currentPage !== totalPages) {
+                                        e.target.style.backgroundColor = "#fff";
+                                        e.target.style.color = "#101A30";
+                                        e.target.style.borderColor = "#101A30";
+                                    }
+                                }}
+                            >
+                                <i className="fas fa-angle-double-right"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            )}
+        </>
+    );
+}