diff --git a/src/UI/SocialMediaIcons.jsx b/src/UI/SocialMediaIcons.jsx
new file mode 100644
index 0000000..6b84017
--- /dev/null
+++ b/src/UI/SocialMediaIcons.jsx
@@ -0,0 +1,34 @@
+// components/SocialMediaIcons.jsx
+import React from "react";
+import { Facebook, Twitter, Instagram } from "react-feather";
+
+const SocialMediaIcons = ({
+  size = 24,
+  color = "text-gray-500",
+  hoverColor = "hover:text-blue-600"
+}) => {
+  const icons = [
+    { Icon: Facebook, link: "https://facebook.com", label: "Facebook" },
+    { Icon: Twitter, link: "https://twitter.com", label: "Twitter" },
+    { Icon: Instagram, link: "https://instagram.com", label: "Instagram" }
+  ];
+
+  return (
+    <div className="flex space-x-4">
+      {icons.map(({ Icon, link, label }, index) => (
+        <a
+          key={index}
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`${color} ${hoverColor} cursor-pointer`}
+          aria-label={label}
+        >
+          <Icon size={size} />
+        </a>
+      ))}
+    </div>
+  );
+};
+
+export default SocialMediaIcons;
diff --git a/src/UI/customSVG/ArrowIcon.js b/src/UI/customSVG/ArrowIcon.js
new file mode 100644
index 0000000..ab676ad
--- /dev/null
+++ b/src/UI/customSVG/ArrowIcon.js
@@ -0,0 +1,13 @@
+const ArrowIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-4 w-4"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+  </svg>
+);
+
+export default ArrowIcon;
diff --git a/src/app/blogs/[id]/page.js b/src/app/blogs/[id]/page.js
new file mode 100644
index 0000000..83b0b14
--- /dev/null
+++ b/src/app/blogs/[id]/page.js
@@ -0,0 +1,5 @@
+import BlogDetailsPage from "@/components/BlogDetails/BlogDetailsPage";
+
+const BlogDetails = ({ params }) => <BlogDetailsPage params={params} />;
+
+export default BlogDetails;
diff --git a/src/app/blogs/page.js b/src/app/blogs/page.js
index 5269aaf..a4ea75c 100644
--- a/src/app/blogs/page.js
+++ b/src/app/blogs/page.js
@@ -1,5 +1,5 @@
 import BlogPage from "@/components/Blogs";
 
-const Blog = () => <BlogPage />;
+const Blogs = () => <BlogPage />;
 
-export default Blog;
+export default Blogs;
diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx
new file mode 100644
index 0000000..8727349
--- /dev/null
+++ b/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx
@@ -0,0 +1,81 @@
+import React from "react";
+import Image from "next/image";
+import { comments } from "@/data/blogsData";
+import AppButton from "@/UI/AppButton";
+
+const CommentSection = () => {
+  return (
+    <div className="max-w-5xl mx-auto bg-white shadow-md rounded-lg p-6">
+      <h2 className="text-2xl font-semibold mb-6">
+        Total Comment ({comments.length.toString().padStart(2, "0")})
+        {/* Total Comment ({convertNumToPad(comments.length)}) */}
+      </h2>
+      {comments.map(({ id, name, avatar, time, comment, replies }) => (
+        <div key={id} className="mb-6 border-b pb-4 last:border-b-0">
+          {/* Parent Comment */}
+          <div className="flex items-start gap-4">
+            <Image
+              src={avatar}
+              alt={`${name}'s avatar`}
+              width={48}
+              height={48}
+              className="rounded-full object-cover"
+              priority
+            />
+            <div className="flex-1">
+              <div className="flex justify-between items-center">
+                <h3 className="text-lg font-medium text-gray-800">{name}</h3>
+                <p className="text-sm text-gray-500">{time}</p>
+              </div>
+              <p className="text-gray-700 mt-2">{comment}</p>
+              <AppButton
+                text="Reply"
+                customStyles={" mt-2 text-blue-500 text-sm font-medium hover:underline"}
+              />
+            </div>
+          </div>
+
+          {/* Replies */}
+          {replies.length > 0 && (
+            <div className="ml-14 mt-4 space-y-4">
+              {replies.map(
+                ({
+                  id: replyId,
+                  name: replyName,
+                  avatar: replyAvatar,
+                  time: replyTime,
+                  comment: replyComment
+                }) => (
+                  <div key={replyId} className="flex items-start gap-4">
+                    <Image
+                      src={replyAvatar}
+                      alt={`${replyName}'s avatar`}
+                      width={40}
+                      height={40}
+                      className="rounded-full object-cover"
+                      priority
+                    />
+                    <div className="flex-1">
+                      <div className="flex justify-between items-center">
+                        <h3 className="text-md font-medium text-gray-800">{replyName}</h3>
+                        <p className="text-sm text-gray-500">{replyTime}</p>
+                      </div>
+                      <p className="text-gray-700 mt-2">{replyComment}</p>
+                      <AppButton
+                        text="Reply"
+                        withoutHrefBtn={true}
+                        customStyles={" mt-2 text-blue-500 text-sm font-medium hover:underline"}
+                      />
+                    </div>
+                  </div>
+                )
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CommentSection;
diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx
new file mode 100644
index 0000000..1ae345f
--- /dev/null
+++ b/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx
@@ -0,0 +1,149 @@
+"use client";
+
+import AppButton from "@/UI/AppButton";
+import { checkEmailForValid } from "@/utils/appHelpers";
+import React, { useState } from "react";
+
+const BlogCommentForm = () => {
+  const [form, setForm] = useState({ name: "", email: "", comment: "" });
+  const [emailError, setEmailError] = useState("");
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+
+    // Validate email if the field being changed is 'email'
+    if (name === "email") {
+      if (!checkEmailForValid(value)) {
+        setEmailError("Invalid email address");
+      } else {
+        setEmailError(""); // Clear the error if valid
+      }
+    }
+
+    setForm((prevForm) => ({ ...prevForm, [name]: value }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!checkEmailForValid(form.email)) {
+      setEmailError("Invalid email address");
+      return; // Prevent form submission if the email is invalid
+    }
+
+    setForm({ name: "", email: "", comment: "" });
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto bg-white shadow-md rounded-lg p-8">
+      <h2 className="text-2xl font-semibold mb-6 text-gray-800">Leave a Comment</h2>
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div className="flex flex-wrap gap-4">
+          <input
+            type="text"
+            name="name"
+            placeholder="Your Name"
+            value={form.name}
+            onChange={handleChange}
+            className="flex-1 min-w-[240px] p-3 border bg-gray-50 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <div className="flex-1 min-w-[240px]">
+            <input
+              type="email"
+              name="email"
+              placeholder="Your Email"
+              value={form.email}
+              onChange={handleChange}
+              className={`p-3 border ${
+                emailError ? "border-red-500" : "bg-gray-50"
+              } placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500`}
+            />
+            {emailError && <p className="text-red-500 text-sm mt-1">{emailError}</p>}
+          </div>
+        </div>
+
+        <textarea
+          name="comment"
+          placeholder="Write your comment here..."
+          value={form.comment}
+          onChange={handleChange}
+          className="w-full p-3 border bg-gray-50 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          rows="5"
+        ></textarea>
+        <AppButton
+          withoutHrefBtn={true}
+          type="submit"
+          text="Submit Now"
+          customStyles={
+            "w-full md:w-1/3 rounded-full bg-blue-500 text-white py-3 font-semibold hover:bg-blue-600 transition-all duration-300"
+          }
+        />
+      </form>
+    </div>
+  );
+};
+
+export default BlogCommentForm;
+
+// "use client";
+
+// import React, { useState } from "react";
+
+// const BlogCommentForm = () => {
+//   const [form, setForm] = useState({ name: "", email: "", comment: "" });
+
+//   const handleChange = (e) => {
+//     const { name, value } = e.target;
+//     setForm({ ...form, [name]: value });
+//   };
+
+//   const handleSubmit = (e) => {
+//     e.preventDefault();
+//     console.log("Form submitted:", form);
+//     setForm({ name: "", email: "", comment: "" });
+//   };
+
+//   return (
+//     <div className="max-w-4xl mx-auto bg-white shadow-md rounded-lg p-8">
+//       <h2 className="text-2xl font-semibold mb-6 text-gray-800">Leave a Comment</h2>
+//       <form onSubmit={handleSubmit} className="space-y-6">
+//         <div className="flex flex-wrap gap-4">
+//           <input
+//             type="text"
+//             name="name"
+//             placeholder="Your Name"
+//             value={form.name}
+//             onChange={handleChange}
+//             className="flex-1 min-w-[240px] p-3 border bg-gray-50 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+//           />
+//           <input
+//             type="email"
+//             name="email"
+//             placeholder="Your Email"
+//             value={form.email}
+//             onChange={handleChange}
+//             className="flex-1 min-w-[240px] p-3 border bg-gray-50 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+//           />
+//         </div>
+
+//         <textarea
+//           name="comment"
+//           placeholder="Write your comment here..."
+//           value={form.comment}
+//           onChange={handleChange}
+//           className="w-full p-3 border bg-gray-50 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+//           rows="5"
+//         ></textarea>
+
+//         <button
+//           type="submit"
+//           className="w-full md:w-1/3 rounded-full bg-blue-500 text-white py-3 font-semibold hover:bg-blue-600 transition-all duration-300"
+//         >
+//           Submit Now
+//         </button>
+//       </form>
+//     </div>
+//   );
+// };
+
+// export default BlogCommentForm;
diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx
new file mode 100644
index 0000000..6ae2c37
--- /dev/null
+++ b/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx
@@ -0,0 +1,68 @@
+import SocialMediaIcons from "@/UI/SocialMediaIcons";
+import React from "react";
+import { CheckCircle } from "react-feather";
+
+const BlogContent = ({ content }) => {
+  const {
+    title,
+    paragraph1,
+    paragraph2,
+    paragraph3,
+    quote,
+    points = [] // Default to empty array if points is not passed
+  } = content || {};
+
+  return (
+    <div className="max-w-5xl mx-auto bg-white px-4 sm:px-6 lg:px-8">
+      <h1 className="text-2xl sm:text-3xl font-bold text-gray-800 text-center sm:text-left">
+        {title}
+      </h1>
+      <div className="mt-4">
+        <p className="text-gray-600 leading-relaxed text-justify">{paragraph1}</p>
+
+        {/* Render points if available */}
+        {points.length > 0 && (
+          <ul className="mt-4 space-y-2 text-gray-600">
+            {points.map((point, index) => (
+              <li key={index} className="flex items-start">
+                {CheckCircle && <CheckCircle className="text-blue-600 w-5 h-5 mt-1" />}
+                <span className="ml-2">{point}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {/* Render quote if available */}
+        {quote && (
+          <blockquote className="mt-6 bg-blue-100 border-l-4 border-blue-500 pl-4 italic text-gray-700">
+            {quote}
+          </blockquote>
+        )}
+
+        {/* Paragraph 2 and 3 */}
+        <p className="mt-4 text-gray-600">{paragraph2}</p>
+        <p className="mt-4 text-gray-600">{paragraph3}</p>
+      </div>
+
+      {/* Tagging and social media section */}
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-6 border-t pt-4 space-y-4 sm:space-y-0">
+        <div className="flex flex-wrap space-x-3 space-y-2 sm:space-y-0">
+          {["Appointment", "Doctors", "Health", "Hospital"].map((tag, index) => (
+            <span
+              key={index}
+              className="px-4 py-1 text-sm font-semibold bg-gray-100 hover:bg-blue-600 hover:text-white rounded-full"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+        <div className="flex items-center space-x-4">
+          <span className="text-gray-500 font-medium">Share :</span>
+          <SocialMediaIcons />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogContent;
diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx
new file mode 100644
index 0000000..6f6c67f
--- /dev/null
+++ b/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx
@@ -0,0 +1,72 @@
+import Image from "next/image";
+import { User, Calendar, MessageCircle, Heart, Share2 } from "react-feather";
+import BlogContent from "./BlogContent";
+
+const BlogHeader = ({ content }) => {
+  const {
+    title,
+    category,
+    color,
+    image,
+    date,
+    author,
+    comments,
+    likes,
+    shares,
+    paragraph1,
+    paragraph2,
+    paragraph3,
+    quote,
+    points
+  } = content;
+
+  return (
+    <header className="max-w-5xl mx-auto bg-white shadow p-6 rounded-lg">
+      <Image
+        src={image}
+        alt="Blog banner"
+        width={1200}
+        height={600}
+        className="w-full h-auto rounded-lg mb-6 object-cover"
+        priority
+      />
+
+      <div className="flex flex-col md:flex-row md:items-center justify-between text-sm text-gray-500 mb-4 gap-4">
+        <div className="flex flex-wrap items-center gap-4">
+          <span
+            className={`px-3 py-1 text-sm font-semibold rounded-full ${color || "bg-black text-white"}`}
+          >
+            {category}
+          </span>
+          <div className="flex items-center gap-2">
+            <User size={16} className="text-blue-600" />
+            <span>{author}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Calendar size={16} className="text-blue-600" />
+            <span>{date}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-1">
+            <Heart size={16} />
+            <span>{likes}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <MessageCircle size={16} />
+            <span>{comments}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Share2 size={16} />
+            <span>{shares}</span>
+          </div>
+        </div>
+      </div>
+
+      <BlogContent content={{ title, paragraph1, paragraph2, paragraph3, quote, points }} />
+    </header>
+  );
+};
+
+export default BlogHeader;
diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogSidebar.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogSidebar.jsx
new file mode 100644
index 0000000..e24744c
--- /dev/null
+++ b/src/components/BlogDetails/BlogDetailsComponents/BlogSidebar.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import SearchAndCategories from "./SearchAndCategories";
+import RecentPost from "./RecentPost";
+import PostTags from "./PostTags";
+
+const BlogSidebar = () => {
+  return (
+    <aside className="space-y-8">
+      <SearchAndCategories />
+      <RecentPost />
+      <PostTags />
+    </aside>
+  );
+};
+
+export default BlogSidebar;
diff --git a/src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx b/src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx
new file mode 100644
index 0000000..5f1a91a
--- /dev/null
+++ b/src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { tags } from "@/data/blogsData";
+import React from "react";
+
+const PostTags = () => {
+  return (
+    <div className="bg-white p-4 shadow rounded-lg">
+      <h3 className="text-lg font-bold text-gray-800 border-b-2 border-blue-500 inline-block pb-1 mb-4">
+        Post Tags
+      </h3>
+      <div className="flex flex-wrap gap-2">
+        {tags.map((tag, index) => (
+          <span
+            key={index}
+            className="px-3 py-1 bg-gray-100 text-sm rounded-lg hover:bg-blue-100 hover:text-blue-600"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PostTags;
diff --git a/src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx b/src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx
new file mode 100644
index 0000000..bd63aa1
--- /dev/null
+++ b/src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx
@@ -0,0 +1,36 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { posts } from "@/data/blogsData";
+
+const RecentPost = () => {
+  return (
+    <div className="bg-white p-4 shadow rounded-lg">
+      <h3 className="text-lg font-bold text-gray-800 border-b-2 border-blue-500 inline-block pb-1 mb-4">
+        Recent Post
+      </h3>
+      <ul className="space-y-4">
+        {posts.map((post, index) => (
+          <li key={index} className="flex space-x-4">
+            <div className="w-24 h-16 relative">
+              <Image
+                src={post.image}
+                priority
+                alt={post.title}
+                fill
+                className="object-cover rounded-md"
+              />
+            </div>
+            <div>
+              <p className="text-sm text-gray-600">{post.date}</p>
+              <h4 className="text-md font-medium hover:text-blue-600">{post.title}</h4>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default RecentPost;
diff --git a/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx b/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx
new file mode 100644
index 0000000..254ce75
--- /dev/null
+++ b/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { categories } from "@/data/blogsData";
+import ArrowIcon from "@/UI/customSVG/ArrowIcon";
+import React from "react";
+import { Search } from "react-feather";
+
+const SearchAndCategories = () => {
+  return (
+    <div>
+      {/* Search Section */}
+      <div className="bg-white p-4 shadow rounded-lg">
+        <h3 className="text-lg font-semibold mb-4">Search</h3>
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Search..."
+            className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
+          />
+          <button
+            type="submit"
+            className="absolute right-2 top-2 text-blue-600 hover:text-blue-800"
+          >
+            <Search />
+          </button>
+        </div>
+      </div>
+
+      {/* Categories Section */}
+      <div className="bg-white p-4 shadow rounded-lg">
+        <h3 className="text-lg font-bold text-gray-800 border-b-2 border-blue-500 inline-block pb-1 mb-4">
+          Categories
+        </h3>
+        <ul className="space-y-2">
+          {categories.map((category, index) => (
+            <li key={index} className="flex items-center justify-between hover:text-blue-600">
+              <span>{category}</span>
+              <ArrowIcon />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default SearchAndCategories;
diff --git a/src/components/BlogDetails/BlogDetailsPage.jsx b/src/components/BlogDetails/BlogDetailsPage.jsx
new file mode 100644
index 0000000..67e382f
--- /dev/null
+++ b/src/components/BlogDetails/BlogDetailsPage.jsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { blogs } from "@/data/blogsData";
+import BlogHeader from "./BlogDetailsComponents/BlogHeader";
+import BlogComment from "./BlogDetailsComponents/BlogComment";
+import BlogCommentForm from "./BlogDetailsComponents/BlogCommentForm";
+import BlogSidebar from "./BlogDetailsComponents/BlogSidebar";
+
+const BlogDetailsPage = ({ params }) => {
+  const { id } = params;
+
+  const blog = blogs.find((blog) => blog.id.toString() === id);
+
+  const {
+    category,
+    color,
+    title,
+    date,
+    author,
+    comments,
+    likes,
+    shares,
+    image,
+    paragraph1,
+    paragraph2,
+    paragraph3,
+    quote,
+    points
+  } = blog || {};
+
+  if (!blog) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p className="text-xl font-bold text-gray-700">Blog not found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <div className="flex flex-col lg:flex-row lg:space-x-6">
+        <div className="w-full lg:w-3/4">
+          <BlogHeader
+            content={{
+              title,
+              category,
+              color,
+              image,
+              date,
+              author,
+              likes,
+              shares,
+              comments,
+              paragraph1,
+              paragraph2,
+              paragraph3,
+              quote,
+              points
+            }}
+          />
+          <div className="mt-8">
+            <BlogComment />
+          </div>
+          <div className="mt-8">
+            <BlogCommentForm />
+          </div>
+        </div>
+        <div className="w-full lg:w-1/4 mt-8 lg:mt-0">
+          <BlogSidebar />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogDetailsPage;
diff --git a/src/components/Blogs/index.jsx b/src/components/Blogs/index.jsx
index 8bcd473..405e33c 100644
--- a/src/components/Blogs/index.jsx
+++ b/src/components/Blogs/index.jsx
@@ -8,21 +8,6 @@ import { blogs } from "@/data/blogsData";
 import CommonBanner from "@/UI/CommonBanner";
 import Link from "next/link";
 
-const categoryColorMap = {
-  Doctor: "bg-pink-700 text-white",
-  Medical: "bg-green-700 text-white",
-  Hospital: "bg-blue-700 text-white",
-  Technology: "bg-red-700 text-white",
-  Healthcare: "bg-purple-700 text-white",
-  Lifestyle: "bg-yellow-700 text-white",
-  Wellness: "bg-orange-700 text-white",
-  Science: "bg-cyan-700 text-white",
-  Research: "bg-gray-700 text-white",
-  Innovation: "bg-teal-700 text-white",
-  Pediatrics: "bg-indigo-700 text-white",
-  Neurology: "bg-lime-700 text-white"
-};
-
 const BlogPage = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 6;
@@ -49,7 +34,8 @@ const BlogPage = () => {
               comments,
               likes,
               shares,
-              image
+              image,
+              color
             }) => {
               return (
                 <div
@@ -66,9 +52,7 @@ const BlogPage = () => {
                       priority
                     />
                     <span
-                      className={`absolute top-4 left-4 px-3 py-1 text-sm font-semibold rounded-full ${
-                        categoryColorMap[category] || "bg-black text-white"
-                      }`}
+                      className={`absolute top-4 left-4 px-3 py-1 text-sm font-semibold rounded-full ${color}`}
                     >
                       {category}
                     </span>
@@ -98,14 +82,15 @@ const BlogPage = () => {
                         Read More →
                       </Link>
                       <div className="flex items-center space-x-4">
-                        <div className="flex items-center space-x-1">
-                          <MessageCircle size={16} />
-                          <span>{comments}</span>
-                        </div>
                         <div className="flex items-center space-x-1">
                           <Heart size={16} />
                           <span>{likes}</span>
                         </div>
+                        <div className="flex items-center space-x-1">
+                          <MessageCircle size={16} />
+                          <span>{comments}</span>
+                        </div>
+
                         <div className="flex items-center space-x-1">
                           <Share2 size={16} />
                           <span>{shares}</span>
diff --git a/src/data/blogsData.js b/src/data/blogsData.js
index 99091c3..2aa584c 100644
--- a/src/data/blogsData.js
+++ b/src/data/blogsData.js
@@ -1,21 +1,90 @@
-export const categoryColorMap = {
-  Doctor: "bg-pink-700 text-white",
-  Medical: "bg-green-700 text-white",
-  Hospital: "bg-blue-700 text-white",
-  Technology: "bg-red-700 text-white",
-  Healthcare: "bg-purple-700 text-white",
-  Lifestyle: "bg-yellow-700 text-white",
-  Wellness: "bg-orange-700 text-white",
-  Science: "bg-cyan-700 text-white",
-  Research: "bg-gray-700 text-white",
-  Innovation: "bg-teal-700 text-white",
-  Pediatrics: "bg-indigo-700 text-white",
-  Neurology: "bg-lime-700 text-white"
-};
+import { alterredUserAvatar } from "@/utils/appHelpers";
+
+export const categories = [
+  "Urology",
+  "Gynecologist",
+  "Medicine",
+  "Child Care",
+  "Covid Test",
+  "Dentist"
+];
+
+export const posts = [
+  {
+    date: "22 June 2023",
+    title: "Precious Tips To Help You Get Better.",
+    image:
+      "https://media.istockphoto.com/id/2154829989/photo/a-doctor-interacting-with-medical-icons-on-a-futuristic-interfac.jpg?s=1024x1024&w=is&k=20&c=x5B3eD84z1nLokUFjEyw4HtZjIILJUQcdKMBraHTMCo="
+  },
+  {
+    date: "22 June 2023",
+    title: "Your Health Matters: Tips & Tricks.",
+    image:
+      "https://media.istockphoto.com/id/1869420726/photo/human-brain.jpg?s=1024x1024&w=is&k=20&c=ui2uCTPbWaLU3zoAZz2pHVtM97yRR_2y1PBDMyfiGAw="
+  },
+  {
+    date: "22 June 2023",
+    title: "Stay Healthy During the Pandemic.",
+    image:
+      "https://images.unsplash.com/photo-1690306815535-dbe66a7c6185?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+  }
+];
+
+export const tags = [
+  "Appointment",
+  "Doctors",
+  "Health",
+  "Best",
+  "Hospital",
+  "Laboratory",
+  "Antibiotics",
+  "COVID-19",
+  "Care"
+];
+
+export const comments = [
+  {
+    id: 1,
+    name: "Robert Smith",
+    avatar: alterredUserAvatar,
+    time: "4 Hour Ago",
+    comment:
+      "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.",
+    replies: [
+      {
+        id: 11,
+        name: "Steven Smith",
+        avatar: alterredUserAvatar,
+        time: "1 Hour Ago",
+        comment:
+          "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable."
+      }
+    ]
+  },
+  {
+    id: 2,
+    name: "Deni Rover",
+    avatar: alterredUserAvatar,
+    time: "6 Hour Ago",
+    comment:
+      "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.",
+    replies: []
+  },
+  {
+    id: 3,
+    name: "Robert Smith",
+    avatar: alterredUserAvatar,
+    time: "4 Hour Ago",
+    comment:
+      "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.",
+    replies: []
+  }
+];
 export const blogs = [
   {
     id: 1,
     category: "Doctor",
+    color: "bg-pink-700 text-white",
     title: "The Advantages of Virtual Doctor Consultations",
     date: "10 January 2023",
     description:
@@ -25,25 +94,53 @@ export const blogs = [
     likes: 45,
     shares: 30,
     image:
-      "https://media.istockphoto.com/id/2155775525/photo/senior-medical-exam.jpg?s=1024x1024&w=is&k=20&c=7qLMvBRGLq_GQgzhjduRMIlPAtNxT-WFsZd7qKcG6l4="
+      "https://media.istockphoto.com/id/2155775525/photo/senior-medical-exam.jpg?s=1024x1024&w=is&k=20&c=7qLMvBRGLq_GQgzhjduRMIlPAtNxT-WFsZd7qKcG6l4=",
+    paragraph1:
+      "Virtual consultations provide convenience and accessibility, reducing the need for in-person visits.",
+    paragraph2:
+      "Patients in remote areas benefit significantly, accessing specialists without travel.",
+    paragraph3:
+      "These services have grown, especially during the pandemic, proving their value in modern healthcare.",
+    quote:
+      "“Virtual consultations are not just a trend—they are the future of accessible healthcare.”",
+    points: [
+      "Access specialists from anywhere.",
+      "Save time and costs on travel.",
+      "Improved follow-up care through telemedicine.",
+      "Increased convenience for patients and doctors."
+    ]
   },
   {
     id: 2,
     category: "Medical",
-    title: "Top Benefits of Telehealth for Families",
+    color: "bg-green-700 text-white",
+    title: "How Wearable Devices Are Changing Medical Monitoring",
     date: "15 February 2023",
     description:
-      "Learn how telehealth services provide convenient, affordable, and reliable care for your entire family.",
+      "Learn how wearable technology is revolutionizing patient health monitoring and diagnosis.",
     author: "Dr. Smith",
     comments: 12,
     likes: 65,
     shares: 45,
     image:
-      "https://media.istockphoto.com/id/1938542779/photo/senior-medical-check-up.jpg?s=612x612&w=0&k=20&c=v-S0_rxA9t6BeZvQWPo64DLHFxO5vVvPww7jObeIh9E="
+      "https://media.istockphoto.com/id/1938542779/photo/senior-medical-check-up.jpg?s=612x612&w=0&k=20&c=v-S0_rxA9t6BeZvQWPo64DLHFxO5vVvPww7jObeIh9E=",
+    paragraph1:
+      "Wearables like smartwatches and fitness bands are enabling real-time health monitoring.",
+    paragraph2:
+      "These devices provide critical data on heart rate, sleep patterns, and more, aiding in early diagnosis.",
+    paragraph3: "Patients and doctors benefit from continuous health tracking, improving outcomes.",
+    quote: "“Technology in wearables is a game-changer for preventive healthcare.”",
+    points: [
+      "Real-time data helps in early disease detection.",
+      "Improves patient engagement in their health.",
+      "Provides insights for personalized treatments.",
+      "Enables remote health monitoring for chronic conditions."
+    ]
   },
   {
     id: 3,
     category: "Hospital",
+    color: "bg-blue-700 text-white",
     title: "Revolutionizing Hospital Care with AI Technology",
     date: "20 March 2023",
     description:
@@ -53,11 +150,25 @@ export const blogs = [
     likes: 70,
     shares: 55,
     image:
-      "https://images.unsplash.com/photo-1538108149393-fbbd81895907?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      "https://images.unsplash.com/photo-1538108149393-fbbd81895907?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    paragraph1:
+      "Artificial intelligence is enabling hospitals to deliver faster and more accurate diagnoses.",
+    paragraph2:
+      "AI-powered tools streamline administrative workflows, allowing doctors more time for patients.",
+    paragraph3:
+      "Machine learning is also aiding in predictive analytics to prevent hospital readmissions.",
+    quote: "“AI is not replacing human doctors; it’s making them more efficient.”",
+    points: [
+      "Streamlines administrative workflows.",
+      "Provides accurate and early diagnoses.",
+      "Enhances hospital management systems.",
+      "Predicts and prevents readmissions."
+    ]
   },
   {
     id: 4,
     category: "Technology",
+    color: "bg-red-700 text-white",
     title: "Emerging Tech Trends in Modern Clinics",
     date: "5 April 2023",
     description:
@@ -67,11 +178,23 @@ export const blogs = [
     likes: 40,
     shares: 25,
     image:
-      "https://images.unsplash.com/photo-1516549655169-df83a0774514?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      "https://images.unsplash.com/photo-1516549655169-df83a0774514?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    paragraph1: "Technological advancements are revolutionizing patient management systems.",
+    paragraph2:
+      "Tools like EHRs (Electronic Health Records) and telemedicine apps make clinics more efficient.",
+    paragraph3: "AI is being integrated to streamline patient diagnosis and treatment plans.",
+    quote: "“Technology bridges the gap between patient needs and healthcare delivery.”",
+    points: [
+      "Improves patient data management.",
+      "Enables seamless telemedicine consultations.",
+      "Increases diagnostic accuracy.",
+      "Enhances overall patient care."
+    ]
   },
   {
     id: 5,
     category: "Healthcare",
+    color: "bg-purple-700 text-white",
     title: "How to Choose the Right Healthcare Plan",
     date: "12 May 2023",
     description:
@@ -81,11 +204,23 @@ export const blogs = [
     likes: 50,
     shares: 35,
     image:
-      "https://images.unsplash.com/photo-1551601651-2a8555f1a136?q=80&w=1447&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      "https://images.unsplash.com/photo-1551601651-2a8555f1a136?q=80&w=1447&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    paragraph1:
+      "Selecting the right healthcare plan is crucial for financial and physical well-being.",
+    paragraph2: "Consider factors like coverage, premiums, deductibles, and provider networks.",
+    paragraph3: "Tailor your choice based on your specific health needs and family requirements.",
+    quote: "“A healthcare plan is not one-size-fits-all; choose wisely for peace of mind.”",
+    points: [
+      "Understand your medical needs.",
+      "Compare coverage and premiums.",
+      "Check the provider network.",
+      "Review deductibles and out-of-pocket expenses."
+    ]
   },
   {
     id: 6,
     category: "Lifestyle",
+    color: "bg-yellow-700 text-white",
     title: "Balancing Work and Health as a Busy Professional",
     date: "18 June 2023",
     description: "Tips for maintaining a healthy lifestyle while juggling a demanding career.",
@@ -94,11 +229,23 @@ export const blogs = [
     likes: 35,
     shares: 20,
     image:
-      "https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      "https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    paragraph1: "Work-life balance is essential to prevent burnout and maintain overall health.",
+    paragraph2:
+      "Incorporate regular exercise, healthy eating, and mindfulness into your daily routine.",
+    paragraph3: "Small, consistent changes can make a significant difference in well-being.",
+    quote: "“Health is not a luxury—it’s a necessity for peak performance at work.”",
+    points: [
+      "Set boundaries between work and personal life.",
+      "Adopt a consistent sleep schedule.",
+      "Incorporate physical activity into your day.",
+      "Prioritize mental health and stress management."
+    ]
   },
   {
     id: 7,
     category: "Wellness",
+    color: "bg-orange-700 text-white",
     title: "The Role of Nutrition in Preventive Healthcare",
     date: "25 July 2023",
     description:
@@ -108,11 +255,23 @@ export const blogs = [
     likes: 25,
     shares: 18,
     image:
-      "https://media.istockphoto.com/id/2086018126/photo/healthy-eating-and-exercising-concept.jpg?s=1024x1024&w=is&k=20&c=_6UX9ZWtMkkrlYbK34tcwn9MjruZrDmm08D_W6l754o="
+      "https://media.istockphoto.com/id/2086018126/photo/healthy-eating-and-exercising-concept.jpg?s=1024x1024&w=is&k=20&c=_6UX9ZWtMkkrlYbK34tcwn9MjruZrDmm08D_W6l754o=",
+    paragraph1:
+      "A balanced diet reduces the risk of chronic illnesses like diabetes and heart disease.",
+    paragraph2: "Foods rich in nutrients strengthen the immune system and improve overall health.",
+    paragraph3: "Preventive healthcare begins with the daily choices you make about food.",
+    quote: "“Good nutrition is the foundation of a healthy life.”",
+    points: [
+      "Incorporate fruits and vegetables into every meal.",
+      "Choose whole grains over refined options.",
+      "Limit processed foods and added sugars.",
+      "Stay hydrated throughout the day."
+    ]
   },
   {
     id: 8,
     category: "Science",
+    color: "bg-cyan-700 text-white",
     title: "Understanding the Future of Genetic Medicine",
     date: "10 August 2023",
     description:
@@ -122,11 +281,23 @@ export const blogs = [
     likes: 30,
     shares: 10,
     image:
-      "https://media.istockphoto.com/id/2148124381/photo/sparkling-dna-helix-structure-in-blue-and-red-high-tech-concept-of-genetic-research.jpg?s=1024x1024&w=is&k=20&c=uq3OeWr6-44Li4CpXoYNqhyHQ86TuBU32QJj9WOGa9s="
+      "https://media.istockphoto.com/id/2148124381/photo/sparkling-dna-helix-structure-in-blue-and-red-high-tech-concept-of-genetic-research.jpg?s=1024x1024&w=is&k=20&c=uq3OeWr6-44Li4CpXoYNqhyHQ86TuBU32QJj9WOGa9s=",
+    paragraph1: "Genetic medicine opens new possibilities for personalized treatments.",
+    paragraph2: "Advances in CRISPR and gene editing are transforming the medical field.",
+    paragraph3:
+      "Research continues to focus on curing inherited disorders through genetic solutions.",
+    quote: "“The genome is the blueprint of life, and we are learning how to edit it.”",
+    points: [
+      "Offers potential cures for genetic disorders.",
+      "Enables personalized treatment plans.",
+      "Supports early detection of inherited diseases.",
+      "Revolutionizes approaches to chronic illness management."
+    ]
   },
   {
     id: 9,
     category: "Research",
+    color: "bg-gray-700 text-white",
     title: "The Impact of Clinical Trials on Modern Healthcare",
     date: "15 September 2023",
     description: "Insights into how clinical trials shape the future of medicine.",
@@ -135,11 +306,22 @@ export const blogs = [
     likes: 20,
     shares: 12,
     image:
-      "https://images.unsplash.com/photo-1486825586573-7131f7991bdd?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      "https://images.unsplash.com/photo-1486825586573-7131f7991bdd?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    paragraph1: "Clinical trials are essential for developing new treatments and ensuring safety.",
+    paragraph2: "Volunteers play a critical role in advancing medical science and innovation.",
+    paragraph3: "Every major medical breakthrough starts with rigorous testing through trials.",
+    quote: "“Clinical trials are the backbone of medical progress.”",
+    points: [
+      "Evaluate the safety of new treatments.",
+      "Ensure efficacy before public availability.",
+      "Help researchers understand side effects.",
+      "Support the development of groundbreaking therapies."
+    ]
   },
   {
     id: 10,
     category: "Pediatrics",
+    color: "bg-teal-700 text-white",
     title: "Mental Health Awareness: Breaking the Stigma",
     date: "10 October 2023",
     description: "A deep dive into promoting mental well-being and breaking stereotypes.",
@@ -148,25 +330,49 @@ export const blogs = [
     likes: 55,
     shares: 40,
     image:
-      "https://images.unsplash.com/photo-1690306815535-dbe66a7c6185?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      "https://images.unsplash.com/photo-1690306815535-dbe66a7c6185?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    paragraph1: "Children and teenagers face unique mental health challenges today.",
+    paragraph2: "Raising awareness is crucial to ensure they receive timely support and care.",
+    paragraph3: "Breaking stigmas helps foster environments where kids can thrive emotionally.",
+    quote: "“Mental health is as important as physical health, especially in growing children.”",
+    points: [
+      "Promote open conversations about mental health.",
+      "Provide access to counseling and resources.",
+      "Educate families on recognizing early signs.",
+      "Encourage healthy coping mechanisms."
+    ]
   },
   {
     id: 11,
     category: "Neurology",
-    title: "How Regular Exercise Improves Overall Health",
+    color: "bg-indigo-700 text-white",
+    title: "How Regular Exercise Enhances Brain Function",
     date: "15 November 2023",
     description:
-      "An overview of the benefits of consistent physical activity for your body and mind.",
-    author: "Fitness Guru",
+      "Explore the positive impact of physical activity on cognitive function and mental health.",
+    author: "Neuro Specialist",
     comments: 8,
     likes: 60,
     shares: 50,
     image:
-      "https://media.istockphoto.com/id/1869420726/photo/human-brain.jpg?s=1024x1024&w=is&k=20&c=ui2uCTPbWaLU3zoAZz2pHVtM97yRR_2y1PBDMyfiGAw="
+      "https://media.istockphoto.com/id/1869420726/photo/human-brain.jpg?s=1024x1024&w=is&k=20&c=ui2uCTPbWaLU3zoAZz2pHVtM97yRR_2y1PBDMyfiGAw=",
+    paragraph1:
+      "Exercise stimulates the production of brain-derived neurotrophic factor (BDNF), which supports neural growth and connectivity.",
+    paragraph2:
+      "Regular physical activity reduces the risk of neurodegenerative diseases like Alzheimer’s.",
+    paragraph3: "It also helps improve mood, reduce anxiety, and enhance focus and memory.",
+    quote: "“A healthy body fuels a healthy mind—exercise is the ultimate brain booster.”",
+    points: [
+      "Improves memory and learning capabilities.",
+      "Reduces stress and enhances emotional stability.",
+      "Promotes better sleep and recovery.",
+      "Supports overall cognitive health and resilience."
+    ]
   },
   {
     id: 12,
     category: "Innovation",
+    color: "bg-lime-700 text-white",
     title: "AI in Healthcare: A Game Changer",
     date: "20 December 2023",
     description: "Understand how artificial intelligence is reshaping the healthcare landscape.",
@@ -175,6 +381,19 @@ export const blogs = [
     likes: 80,
     shares: 60,
     image:
-      "https://media.istockphoto.com/id/2154829989/photo/a-doctor-interacting-with-medical-icons-on-a-futuristic-interfac.jpg?s=1024x1024&w=is&k=20&c=x5B3eD84z1nLokUFjEyw4HtZjIILJUQcdKMBraHTMCo="
+      "https://media.istockphoto.com/id/2154829989/photo/a-doctor-interacting-with-medical-icons-on-a-futuristic-interfac.jpg?s=1024x1024&w=is&k=20&c=x5B3eD84z1nLokUFjEyw4HtZjIILJUQcdKMBraHTMCo=",
+    paragraph1:
+      "Artificial intelligence is revolutionizing diagnostics, treatment planning, and patient monitoring.",
+    paragraph2:
+      "AI-powered tools like predictive analytics and virtual health assistants improve healthcare efficiency.",
+    paragraph3:
+      "From imaging analysis to robotic surgeries, AI is transforming how care is delivered.",
+    quote: "“The integration of AI into healthcare is not the future—it’s the present.”",
+    points: [
+      "Enhances diagnostic accuracy.",
+      "Improves patient outcomes with predictive insights.",
+      "Streamlines administrative workflows.",
+      "Supports personalized medicine approaches."
+    ]
   }
 ];
diff --git a/tailwind.config.js b/tailwind.config.js
index 483e266..1091bde 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,21 @@ module.exports = {
     "./src/UI/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}"
   ],
+  safelist: [
+    "bg-pink-700",
+    "text-white",
+    "bg-green-700",
+    "bg-blue-700",
+    "bg-red-700",
+    "bg-purple-700",
+    "bg-yellow-700",
+    "bg-orange-700",
+    "bg-cyan-700",
+    "bg-gray-700",
+    "bg-teal-700",
+    "bg-indigo-700",
+    "bg-lime-700"
+  ],
   theme: {
     fontFamily: {
       montserrat: ["var(--font-montserrat)"]