diff --git a/src/components/PostComponents/PostCard.tsx b/src/components/PostComponents/PostCard.tsx
deleted file mode 100644
index f114468..0000000
--- a/src/components/PostComponents/PostCard.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { getRelativeTime } from "@/lib/date";
-import React from "react";
-import {
-  FaGlobe,
-  FaHashtag,
-  FaReddit,
-  FaTelegram,
-  FaTwitter,
-} from "react-icons/fa";
-import {
-  MdSentimentDissatisfied,
-  MdSentimentNeutral,
-  MdSentimentSatisfied,
-} from "react-icons/md";
-
-import type { Post } from "@prisma/client";
-
-type PostCardProps = {
-  post: Post;
-};
-
-const sentimentIcon = (sentiment: string) => {
-  if (sentiment === "BULLISH")
-    return <MdSentimentSatisfied className="text-green-600" />;
-  if (sentiment === "NEUTRAL")
-    return <MdSentimentNeutral className="text-gray-500" />;
-  if (sentiment === "BEARISH")
-    return <MdSentimentDissatisfied className="text-orange-700" />;
-  return <MdSentimentNeutral className="text-gray-400" />;
-};
-
-const platformIcon = (source: string) => {
-  if (source === "TWITTER") return <FaTwitter className="text-blue-400" />;
-  if (source === "REDDIT") return <FaReddit className="text-orange-500" />;
-  if (source === "TELEGRAM") return <FaTelegram className="text-blue-500" />;
-  return <FaGlobe className="text-gray-400" />;
-};
-
-const PostCard: React.FC<PostCardProps> = ({ post }) => (
-  <Card className="bg-gradient-to-br from-white via-gray-100 to-blue-50 text-black border-none rounded-2xl shadow-xl hover:scale-[1.02] hover:shadow-2xl transition-all duration-300 w-full max-w-4xl px-6 py-4">
-    <CardHeader className="p-2">
-      <div className="flex flex-col gap-2">
-        {(post.categories?.length || post.subcategories?.length) && (
-          <div className="flex gap-2 mb-1 flex-wrap">
-            {(post.categories ?? []).map((cat: string, idx: number) => (
-              <span
-                key={`cat-${idx}`}
-                className="inline-flex items-center px-2 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs font-semibold"
-              >
-                <FaHashtag className="mr-1" />
-                {cat}
-              </span>
-            ))}
-            {(post.subcategories ?? []).map((subcat: string, idx: number) => (
-              <span
-                key={`subcat-${idx}`}
-                className="inline-flex items-center px-2 py-0.5 rounded-full bg-purple-100 text-purple-700 text-xs font-semibold"
-              >
-                <FaHashtag className="mr-1" />
-                {subcat}
-              </span>
-            ))}
-          </div>
-        )}
-        <CardTitle className="text-2xl font-bold tracking-tight leading-snug">
-          {post.title}
-        </CardTitle>
-      </div>
-    </CardHeader>
-    <CardContent className="p-2">
-      <div className="mb-3">
-        <span className="text-base text-gray-800 italic">
-          {post.content && post.content.length > 56
-            ? post.content.slice(0, 56) + "..."
-            : post.content}
-        </span>
-      </div>
-      <div className="flex items-center mt-2 gap-4">
-        <div className="flex h-5 w-28 rounded-full overflow-hidden shadow">
-          <div className="flex-1 bg-green-600" />
-          <div className="flex-1 bg-gray-300" />
-          <div className="flex-1 bg-orange-600" />
-        </div>
-        <span
-          className={`flex items-center gap-1 text-xs font-semibold ${
-            post.sentiment === "BULLISH"
-              ? "text-green-600"
-              : post.sentiment === "BEARISH"
-              ? "text-orange-600"
-              : "text-gray-500"
-          }`}
-        >
-          {sentimentIcon(post.sentiment)}
-          {post.sentiment}
-        </span>
-        <span className="flex items-center gap-1 text-xs text-gray-700">
-          {platformIcon(post.source)}
-          {post.source}
-        </span>
-        <span className="flex items-center gap-1 text-xs text-gray-500">
-          {/* <FaClock /> Time removed as signalTime is not in schema */}
-          {post.createdAt
-            ? getRelativeTime(
-                typeof post.createdAt === "string"
-                  ? post.createdAt
-                  : post.createdAt.toISOString()
-              )
-            : "Invalid date"}
-        </span>
-      </div>
-    </CardContent>
-  </Card>
-);
-
-export default PostCard;
diff --git a/src/components/PostComponents/PostFilters.tsx b/src/components/PostComponents/PostFilters.tsx
index 1894135..f260eee 100644
--- a/src/components/PostComponents/PostFilters.tsx
+++ b/src/components/PostComponents/PostFilters.tsx
@@ -1,38 +1,18 @@
-import {
-  Select,
-  SelectItem,
-} from "@/components/ui/select";
+import { Select, SelectItem } from "@/components/ui/select";
 import { Input } from "@/components/ui/input";
 import { PostSortSelect, SortField, SortOrder } from "./PostSortSelect";
 
 interface PostFiltersProps {
   search: string;
   onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  sortField: SortField;
-  sortOrder: SortOrder;
-  onSortFieldChange: (field: SortField) => void;
-  onSortOrderChange: (order: SortOrder) => void;
-  sentimentFilter: string;
-  onSentimentChange: (value: string) => void;
-  sourceFilter: string;
-  onSourceChange: (value: string) => void;
 }
 
 export default function PostFilters({
   search,
   onSearchChange,
-  sortField,
-  sortOrder,
-  onSortFieldChange,
-  onSortOrderChange,
-  sentimentFilter,
-  onSentimentChange,
-  sourceFilter,
-  onSourceChange,
 }: PostFiltersProps) {
   return (
-    <div className="mb-8 space-y-6">
-      {/* Search Bar */}
+    <div className="mb-8">
       <div className="flex justify-center">
         <Input
           value={search}
@@ -41,56 +21,6 @@ export default function PostFilters({
           className="w-full max-w-md shadow-md rounded-lg border border-gray-200 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition"
         />
       </div>
-
-      {/* Filters & Sorters Card */}
-      <div className="flex flex-wrap justify-between items-center gap-6 p-4 bg-white rounded-xl shadow-lg border border-gray-100">
-        {/* Sorters */}
-        <div className="flex flex-col items-center justify-center pl-6 pr-8">
-          <label className="text-base font-semibold text-blue-700 mb-2 self-center tracking-wide">
-            Sort
-          </label>
-          <div className="w-40">
-            <PostSortSelect
-              sortField={sortField}
-              sortOrder={sortOrder}
-              onSortFieldChange={onSortFieldChange}
-              onSortOrderChange={onSortOrderChange}
-            />
-          </div>
-        </div>
-
-        {/* Filters */}
-        <div className="flex gap-6">
-          <div className="flex flex-col min-w-[170px]">
-            <label className="text-base font-semibold text-purple-500 mb-2">
-              Sentiment
-            </label>
-            <Select value={sentimentFilter} onChange={(e) => onSentimentChange(e.target.value)}>
-              <SelectItem value="all">All</SelectItem>
-              <SelectItem value="BULLISH">Bullish</SelectItem>
-              <SelectItem value="NEUTRAL">Neutral</SelectItem>
-              <SelectItem value="BEARISH">Bearish</SelectItem>
-            </Select>
-          </div>
-
-          <div className="flex flex-col min-w-[170px]">
-            <label className="text-base font-semibold text-purple-500 mb-2">
-              Source
-            </label>
-            <Select
-              value={sourceFilter}
-              onChange={(e) => onSourceChange(e.target.value)}
-            >
-              <SelectItem value="all">All Sources</SelectItem>
-              <SelectItem value="REDDIT">Reddit</SelectItem>
-              <SelectItem value="TWITTER">Twitter</SelectItem>
-              <SelectItem value="YOUTUBE">YouTube</SelectItem>
-              <SelectItem value="TELEGRAM">Telegram</SelectItem>
-              <SelectItem value="FARCASTER">Farcaster</SelectItem>
-            </Select>
-          </div>
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/src/components/PostComponents/PostGallery.tsx b/src/components/PostComponents/PostGallery.tsx
new file mode 100644
index 0000000..13fc099
--- /dev/null
+++ b/src/components/PostComponents/PostGallery.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { IoIosTrendingUp } from "react-icons/io";
+import { CiChat1 } from "react-icons/ci";
+import { FaTwitter, FaLinkedin, FaReddit } from "react-icons/fa";
+
+import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import TagRenderer from "./TagRenderer";
+import { Sentiment } from "@prisma/client";
+
+type Source = {
+  name: string;
+  count: number;
+};
+
+type PostData = {
+  title: string;
+  description: string;
+  sentiment: Sentiment;
+  sentimentBar: { bullish: number; neutral: number; bearish: number };
+  postCount: number;
+  sources: Source[];
+  categories: string[];
+  subcategories?: string[];
+};
+
+// Mock data array
+const mockPostsData: PostData[] = [
+  {
+    title: "Bitcoin Institutional Adoption & Market Sentiment",
+    description:
+      "Major financial institutions showing increased interest in Bitcoin with positive analyst reports...",
+    sentiment: "BULLISH",
+    sentimentBar: { bullish: 60, neutral: 25, bearish: 15 },
+    postCount: 24,
+    sources: [
+      {
+        name: "Twitter",
+        count: 12,
+      },
+      {
+        name: "LinkedIn",
+        count: 8,
+      },
+      {
+        name: "Reddit",
+        count: 4,
+      },
+    ],
+    categories: ["Bitcoin", "Institutional"],
+    subcategories: ["ETF", "Regulation", "Spot", "Futures"],
+  },
+  {
+    title: "Ethereum DeFi Protocol Updates",
+    description:
+      "New developments in decentralized finance protocols showing promising growth patterns...",
+    sentiment: "NEUTRAL",
+    sentimentBar: { bullish: 30, neutral: 50, bearish: 20 },
+    postCount: 18,
+    sources: [
+      {
+        name: "Twitter",
+        count: 10,
+      },
+      {
+        name: "Reddit",
+        count: 8,
+      },
+    ],
+    categories: ["Ethereum"],
+    subcategories: ["Lending", "DEX", "Staking", "Yield", "Bridge"],
+  },
+  {
+    title: "Market Volatility Analysis",
+    description:
+      "Recent market downturn showing concerning trends across major cryptocurrencies...",
+    sentiment: "BEARISH",
+    sentimentBar: { bullish: 15, neutral: 25, bearish: 60 },
+    postCount: 32,
+    sources: [
+      {
+        name: "LinkedIn",
+        count: 15,
+      },
+      {
+        name: "Reddit",
+        count: 17,
+      },
+    ],
+    categories: ["Market", "Volatility"],
+    subcategories: ["Crash", "Recovery", "Bear", "Bull"],
+  },
+];
+
+type PostsGalleryProps = {
+  posts?: PostData[];
+};
+
+// Single card component
+export function SinglePostCard({ post }: { post: PostData }) {
+  const sentimentColor =
+    post.sentiment === "BULLISH"
+      ? "text-green-700 bg-green-100"
+      : post.sentiment === "BEARISH"
+      ? "text-red-700 bg-red-100"
+      : "text-gray-700 bg-gray-100";
+
+  return (
+    <Card className="w-54 h-66 font-sans">
+      <CardHeader className="p-2">
+        <CardTitle className="text-[10px] font-semibold leading-tight mb-1">
+          {post.title}
+        </CardTitle>
+
+        <CardDescription className="text-[8px] text-gray-600 mb-2 line-clamp-2">
+          {post.description}
+        </CardDescription>
+
+        {/* Sentiment indicators */}
+        <div className="flex items-center gap-1 mb-2">
+          <span
+            className={`inline-flex items-center gap-0.5 px-1 py-0.5 text-[8px] font-medium rounded ${sentimentColor}`}
+          >
+            <IoIosTrendingUp className="w-2 h-2" />
+            {post.sentiment}
+          </span>
+          <div className="flex items-center gap-0.5 text-[8px] text-gray-600">
+            <CiChat1 className="w-2 h-2" />
+            {post.postCount}
+          </div>
+        </div>
+
+        {/* Sentiment Bar */}
+        <div className="mb-2">
+          <div className="flex h-1 w-20 rounded overflow-hidden">
+            <div
+              className="bg-green-500"
+              style={{ flex: post.sentimentBar.bullish }}
+            ></div>
+            <div
+              className="bg-gray-300"
+              style={{ flex: post.sentimentBar.neutral }}
+            ></div>
+            <div
+              className="bg-red-500"
+              style={{ flex: post.sentimentBar.bearish }}
+            ></div>
+          </div>
+        </div>
+
+        {/* Source Tags */}
+        <div className="flex flex-wrap gap-1 mb-2 text-[8px]">
+          {post.sources.map((src, idx) => {
+            let pillClass =
+              "px-2 py-0.5 rounded-full flex items-center gap-1 border text-[9px] font-medium";
+            let icon = null;
+            if (src.name === "Twitter") {
+              pillClass += " bg-blue-50 text-blue-600 border-blue-200";
+              icon = <FaTwitter className="w-2 h-2" />;
+            } else if (src.name === "LinkedIn") {
+              pillClass += " bg-blue-50 text-blue-600 border-blue-200";
+              icon = <FaLinkedin className="w-2 h-2" />;
+            } else if (src.name === "Reddit") {
+              pillClass += " bg-orange-50 text-orange-600 border-orange-200";
+              icon = <FaReddit className="w-2 h-2" />;
+            } else {
+              pillClass += " bg-gray-50 text-gray-600 border-gray-200";
+            }
+            return (
+              <span key={src.name + idx} className={pillClass}>
+                {icon}
+                {src.name} <span className="font-semibold">({src.count})</span>
+              </span>
+            );
+          })}
+        </div>
+
+        {/* Category/Subcategory Tags */}
+        <div className="flex flex-wrap gap-0.5">
+          <TagRenderer
+            categories={post.categories}
+            subcategories={post.subcategories}
+          />
+        </div>
+      </CardHeader>
+    </Card>
+  );
+}
+
+export default function PostsGallery({
+  posts = mockPostsData,
+}: PostsGalleryProps) {
+  return (
+    <div className="flex flex-row justify-center gap-6 p-2">
+      {posts.map((post, index) => (
+        <SinglePostCard key={index} post={post} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/PostComponents/PostsList.tsx b/src/components/PostComponents/PostsList.tsx
index d776ed6..ec1e560 100644
--- a/src/components/PostComponents/PostsList.tsx
+++ b/src/components/PostComponents/PostsList.tsx
@@ -1,11 +1,11 @@
 "use client";
 import { useEffect, useState, useRef, useCallback } from "react";
-import PostCard from "./PostCard";
 import SentimentBar from "./SentimentBar";
 import PostFilters from "./PostFilters";
 import { SortField, SortOrder } from "./PostSortSelect";
 import Spinner from "./Spinner";
 import type { Post } from "@prisma/client";
+import PostGallery from "./PostGallery";
 
 export default function PostsList() {
   const [error, setError] = useState<string | null>(null);
@@ -96,69 +96,12 @@ export default function PostsList() {
   }, [hasMore, loading, nextCursor, fetchPosts]);
 
   return (
-    <>
-      <div className="mt-8">
-        <PostFilters
-          search={search}
-          onSearchChange={onChangeHandler}
-          sortField={sortField}
-          sortOrder={sortOrder}
-          onSortFieldChange={setSortField}
-          onSortOrderChange={setSortOrder}
-          sentimentFilter={sentimentFilter}
-          onSentimentChange={setSentimentFilter}
-          sourceFilter={sourceFilter}
-          onSourceChange={setSourceFilter}
-        />
-      </div>
-
-      {!loading && !error && info.length > 0 && (
-        <SentimentBar
-          info={info.filter(
-            (post) =>
-              (sentimentFilter === "all" ||
-                post.sentiment === sentimentFilter) &&
-              (sourceFilter === "all" || post.source === sourceFilter)
-          )}
-        />
-      )}
-
-      {error && <div className="text-destructive text-center">{error}</div>}
-
-      {loading && (
-        <div className="py-8 flex justify-center">
-          <Spinner label="Loading posts" />
-        </div>
-      )}
-
-      {!loading && !error && !info.length && (
-        <div className="text-destructive text-center">No Posts Found</div>
-      )}
-
-      {!loading && !error && info.length > 0 && (
-        <div className="flex flex-col gap-4 items-center">
-          {info
-            .filter(
-              (post) =>
-                (sentimentFilter === "all" ||
-                  post.sentiment === sentimentFilter) &&
-                (sourceFilter === "all" || post.source === sourceFilter)
-            )
-            .map((post: Post) => (
-              <PostCard key={post.id} post={post} />
-            ))}
-          {/* Infinite scroll trigger */}
-          {hasMore && (
-            <div ref={loadMoreRef} className="py-4">
-              {loadingMore ? (
-                <Spinner label="Loading more posts" />
-              ) : (
-                <span>Loading more...</span>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-    </>
+    <div className="mt-8">
+      <PostFilters
+        search={search}
+        onSearchChange={onChangeHandler}
+      />
+      <PostGallery/>
+    </div>
   );
 }
diff --git a/src/components/PostComponents/TagRenderer.tsx b/src/components/PostComponents/TagRenderer.tsx
new file mode 100644
index 0000000..03f76cf
--- /dev/null
+++ b/src/components/PostComponents/TagRenderer.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+type Tag = {
+  type: "category" | "subcategory";
+  value: string;
+};
+
+type TagRendererProps = {
+  categories: string[];
+  subcategories?: string[];
+};
+
+export default function TagRenderer({
+  categories,
+  subcategories,
+}: TagRendererProps) {
+  const allTags: Tag[] = [
+    ...categories.map((cat) => ({ type: "category" as const, value: cat })),
+    ...(subcategories || []).map((subcat) => ({
+      type: "subcategory" as const,
+      value: subcat,
+    })),
+  ];
+
+  const visibleTags = allTags.slice(0, 5);
+  const remainingCount = allTags.length - 5;
+
+  return (
+    <>
+      {visibleTags.map((tag, idx) => (
+        <span
+          key={tag.value + idx}
+          className={`px-1 py-0.5 text-[7px] font-medium rounded-full ${
+            tag.type === "category"
+              ? "text-white bg-blue-500"
+              : "text-blue-700 border border-blue-500 bg-transparent"
+          }`}
+        >
+          #{tag.value}
+        </span>
+      ))}
+      {remainingCount > 0 && (
+        <span className="px-1 py-0.5 text-[7px] font-medium text-gray-700 bg-gray-100 rounded-full">
+          +{remainingCount} more
+        </span>
+      )}
+    </>
+  );
+}