diff --git a/src/app/(landing-routes)/blog/[id]/BlogDetailsPage.tsx b/src/app/(landing-routes)/blog/[id]/BlogDetailsPage.tsx
index de2c2d29e..570b6bae0 100644
--- a/src/app/(landing-routes)/blog/[id]/BlogDetailsPage.tsx
+++ b/src/app/(landing-routes)/blog/[id]/BlogDetailsPage.tsx
@@ -7,8 +7,10 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
-import Comment, { CommentProperties } from "~/components/common/Comment";
-import { sampleComments } from "~/components/common/Comment/sample-comments";
+import Comment, {
+  CommentProperties,
+} from "~/components/common/comment-component";
+import { sampleComments } from "~/components/common/comment-component/sample-comments";
 import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import RelatedArticle from "./RelatedArticle";
 
diff --git a/src/app/(landing-routes)/blog/[id]/RelatedArticle.tsx b/src/app/(landing-routes)/blog/[id]/RelatedArticle.tsx
index c5796aa1d..7620c3484 100644
--- a/src/app/(landing-routes)/blog/[id]/RelatedArticle.tsx
+++ b/src/app/(landing-routes)/blog/[id]/RelatedArticle.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 
 import BlogCard from "~/components/layouts/BlogCards";
-import { blogPosts } from "../page";
+import { blogPosts } from "../data/mock";
 
 export type New = {
   id: number;
diff --git a/src/app/(landing-routes)/blog/comments/page.tsx b/src/app/(landing-routes)/blog/comments/page.tsx
index 7f42c1e24..7348e7882 100644
--- a/src/app/(landing-routes)/blog/comments/page.tsx
+++ b/src/app/(landing-routes)/blog/comments/page.tsx
@@ -1,7 +1,7 @@
 import { Session } from "next-auth";
 
-import Comment from "~/components/common/comment";
-import { sampleComments } from "~/components/common/comment/sample-comments";
+import Comment from "~/components/common/comment-component";
+import { sampleComments } from "~/components/common/comment-component/sample-comments";
 
 const CommentPage = () => {
   const mockSession: Session = {
diff --git a/src/app/(landing-routes)/blog/data/mock.ts b/src/app/(landing-routes)/blog/data/mock.ts
new file mode 100644
index 000000000..7b4c6767d
--- /dev/null
+++ b/src/app/(landing-routes)/blog/data/mock.ts
@@ -0,0 +1,65 @@
+import {
+  blogCard1,
+  blogCard2,
+  blogCard3,
+  blogCard4,
+  blogCard5,
+  blogCard6,
+} from "../../../../../public/images/blogPage/utils";
+
+export const blogPosts = [
+  {
+    id: 1,
+    title: "The Power of Networking: How to Build Meaningful Connections",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "Business",
+    image: blogCard1,
+    labelClassName: "bg-primary",
+  },
+  {
+    id: 2,
+    title: "The Global Impact of Climate Change: A Look at the Evidence",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "World News",
+    image: blogCard2,
+    labelClassName: "bg-warning",
+  },
+  {
+    id: 3,
+    title: "5 Easy and Delicious Recipes for Busy Weeknights",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "Food",
+    image: blogCard3,
+    labelClassName: "bg-success",
+  },
+  {
+    id: 4,
+    title: "5 Simple Habits to Improve Your Mental Wellbeing",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "Lifestyle",
+    image: blogCard4,
+    labelClassName: "bg-primary",
+  },
+  {
+    id: 5,
+    title: "The Ultimate Guide to Dressing Stylishly with Fewer Clothes",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "Fashion",
+    image: blogCard5,
+    labelClassName: "bg-success",
+  },
+  {
+    id: 6,
+    title: "The Future of Travel: What Will the World Look Like in 2030?",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "World News",
+    image: blogCard6,
+    labelClassName: "bg-warning",
+  },
+];
diff --git a/src/app/(landing-routes)/blog/page.tsx b/src/app/(landing-routes)/blog/page.tsx
index 43d5a03c4..7d9e541d9 100644
--- a/src/app/(landing-routes)/blog/page.tsx
+++ b/src/app/(landing-routes)/blog/page.tsx
@@ -1,67 +1,9 @@
 import CustomButton from "~/components/common/common-button/common-button";
 import BlogCard from "~/components/layouts/BlogCards";
-import {
-  blogCard1,
-  blogCard2,
-  blogCard3,
-  blogCard4,
-  blogCard5,
-  blogCard6,
-} from "../../../../public/images/blogPage/utils";
 import HeroSection from "../../../components/extDynamicPages/blogCollection/BlogPageHero";
+import { blogPosts } from "./data/mock";
 
 const BlogHome = () => {
-  const blogPosts = [
-    {
-      title: "The Power of Networking: How to Build Meaningful Connections",
-      date: "Jul 12, 2024",
-      readTime: "5",
-      category: "Business",
-      image: blogCard1,
-      labelClassName: "bg-primary",
-    },
-    {
-      title: "The Global Impact of Climate Change: A Look at the Evidence",
-      date: "Jul 12, 2024",
-      readTime: "5",
-      category: "World News",
-      image: blogCard2,
-      labelClassName: "bg-warning",
-    },
-    {
-      title: "5 Easy and Delicious Recipes for Busy Weeknights",
-      date: "Jul 12, 2024",
-      readTime: "5",
-      category: "Food",
-      image: blogCard3,
-      labelClassName: "bg-success",
-    },
-    {
-      title: "5 Simple Habits to Improve Your Mental Wellbeing",
-      date: "Jul 12, 2024",
-      readTime: "5",
-      category: "Lifestyle",
-      image: blogCard4,
-      labelClassName: "bg-primary",
-    },
-    {
-      title: "The Ultimate Guide to Dressing Stylishly with Fewer Clothes",
-      date: "Jul 12, 2024",
-      readTime: "5",
-      category: "Fashion",
-      image: blogCard5,
-      labelClassName: "bg-success",
-    },
-    {
-      title: "The Future of Travel: What Will the World Look Like in 2030?",
-      date: "Jul 12, 2024",
-      readTime: "5",
-      category: "World News",
-      image: blogCard6,
-      labelClassName: "bg-warning",
-    },
-  ];
-
   return (
     <div>
       <HeroSection />
diff --git a/src/components/common/comment/button-wrapper.tsx b/src/components/common/comment-component/button-wrapper.tsx
similarity index 100%
rename from src/components/common/comment/button-wrapper.tsx
rename to src/components/common/comment-component/button-wrapper.tsx
diff --git a/src/components/common/comment/comment-actions.tsx b/src/components/common/comment-component/comment-actions.tsx
similarity index 100%
rename from src/components/common/comment/comment-actions.tsx
rename to src/components/common/comment-component/comment-actions.tsx
diff --git a/src/components/common/comment/comment-body.tsx b/src/components/common/comment-component/comment-body.tsx
similarity index 100%
rename from src/components/common/comment/comment-body.tsx
rename to src/components/common/comment-component/comment-body.tsx
diff --git a/src/components/common/comment/comment-reply.tsx b/src/components/common/comment-component/comment-reply.tsx
similarity index 100%
rename from src/components/common/comment/comment-reply.tsx
rename to src/components/common/comment-component/comment-reply.tsx
diff --git a/src/components/common/comment/index.tsx b/src/components/common/comment-component/index.tsx
similarity index 100%
rename from src/components/common/comment/index.tsx
rename to src/components/common/comment-component/index.tsx
diff --git a/src/components/common/comment/sample-comments.ts b/src/components/common/comment-component/sample-comments.ts
similarity index 100%
rename from src/components/common/comment/sample-comments.ts
rename to src/components/common/comment-component/sample-comments.ts
diff --git a/src/test/blog/comment/button-wrapper.test.tsx b/src/test/blog/comment/button-wrapper.test.tsx
index 6dfc272f8..fce9b759d 100644
--- a/src/test/blog/comment/button-wrapper.test.tsx
+++ b/src/test/blog/comment/button-wrapper.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import ButtonWrapper from "~/components/common/comment/button-wrapper";
+import ButtonWrapper from "~/components/common/comment-component/button-wrapper";
 
 describe("button wrapper component", () => {
   it("should render children correctly", () => {
diff --git a/src/test/blog/comment/comment-actions.test.tsx b/src/test/blog/comment/comment-actions.test.tsx
index 9ee97ab9e..0530b06f5 100644
--- a/src/test/blog/comment/comment-actions.test.tsx
+++ b/src/test/blog/comment/comment-actions.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import CommentActions from "~/components/common/comment/comment-actions";
+import CommentActions from "~/components/common/comment-component/comment-actions";
 
 describe("comment actions component", () => {
   const mockOnLike = vi.fn();
diff --git a/src/test/blog/comment/comment-body.test.tsx b/src/test/blog/comment/comment-body.test.tsx
index 9858c65d9..d0fbc6fa1 100644
--- a/src/test/blog/comment/comment-body.test.tsx
+++ b/src/test/blog/comment/comment-body.test.tsx
@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import moment from "moment";
 import { Session } from "next-auth";
 
-import { CommentBody } from "~/components/common/comment/comment-body";
+import { CommentBody } from "~/components/common/comment-component/comment-body";
 
 describe("comment body component", () => {
   const mockSession: Session = {
diff --git a/src/test/blog/comment/comment-reply.test.tsx b/src/test/blog/comment/comment-reply.test.tsx
index 1473a57fb..cad4e555a 100644
--- a/src/test/blog/comment/comment-reply.test.tsx
+++ b/src/test/blog/comment/comment-reply.test.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { Session } from "next-auth";
 
-import { ReplyForm } from "~/components/common/comment/comment-reply";
+import { ReplyForm } from "~/components/common/comment-component/comment-reply";
 
 describe("comment reply component", () => {
   const mockSession: Session = {
diff --git a/src/test/blog/comment/index.test.tsx b/src/test/blog/comment/index.test.tsx
index e8a825af0..046fabd95 100644
--- a/src/test/blog/comment/index.test.tsx
+++ b/src/test/blog/comment/index.test.tsx
@@ -2,7 +2,9 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { Session } from "next-auth";
 import { describe, expect, it } from "vitest";
 
-import Comment, { CommentProperties } from "~/components/common/comment";
+import Comment, {
+  CommentProperties,
+} from "~/components/common/comment-component";
 
 describe("comment box component", () => {
   const mockSession: Session = {