diff --git a/.github/workflows/vercel-pull-request.yml b/.github/workflows/vercel-pull-request.yml
index 02eafaa..54fb246 100644
--- a/.github/workflows/vercel-pull-request.yml
+++ b/.github/workflows/vercel-pull-request.yml
@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: amondnet/vercel-action@v20
+      - uses: amondnet/vercel-action@v25
         id: vercel-deploy
         with:
           vercel-token: ${{ secrets.VERCEL_TOKEN }}
diff --git a/src/app/personalize/page.tsx b/src/app/personalize/page.tsx
index d6fa9a1..e976274 100644
--- a/src/app/personalize/page.tsx
+++ b/src/app/personalize/page.tsx
@@ -5,15 +5,41 @@ import { Button } from "@heroui/button";
 import { Card, CardBody, CardHeader } from "@heroui/card";
 import { Input } from "@heroui/input";
 import { Textarea } from "@heroui/input";
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/modal";
-import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@heroui/dropdown";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from "@heroui/modal";
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@heroui/dropdown";
 import { Avatar } from "@heroui/avatar";
 import { Badge } from "@heroui/badge";
 import { Chip } from "@heroui/chip";
 import { Divider } from "@heroui/divider";
-import { Plus, Search, Edit, Trash2, Copy, MoreVertical, User, Sparkles, Calendar, Settings } from "lucide-react";
+import {
+  Plus,
+  Search,
+  Edit,
+  Trash2,
+  Copy,
+  MoreVertical,
+  User,
+  Sparkles,
+  Calendar,
+} from "lucide-react";
 import { useUser } from "@/hooks/data/use-user";
-import { useGetPresets, useCreatePreset, useUpdatePreset, useDeletePreset, useUpdateUserProfile } from "@/hooks/data/use-presets";
+import {
+  useCreatePreset,
+  useUpdatePreset,
+  useDeletePreset,
+  useUpdateUserProfile,
+} from "@/hooks/data/use-presets";
 import LoaderSection from "@/components/shared/loader-section";
 import { addToast } from "@heroui/toast";
 
@@ -24,14 +50,17 @@ export default function PresetsPage() {
   const [selectedPreset, setSelectedPreset] = useState<UserPreset | null>(null);
   const [isEditingProfile, setIsEditingProfile] = useState(false);
 
-  const { data: userProfile, isLoading: userLoading, isError, error } = useUser();
+  const {
+    data: userProfile,
+    isLoading: userLoading,
+    isError,
+    error,
+  } = useUser();
   const createPresetMutation = useCreatePreset();
   const updatePresetMutation = useUpdatePreset();
   const deletePresetMutation = useDeletePreset();
   const updateProfileMutation = useUpdateUserProfile();
 
-  console.log("user", userProfile);
-
   const [presetForm, setPresetForm] = useState({
     title: "",
     description: "",
@@ -59,11 +88,6 @@ export default function PresetsPage() {
           description: presetForm.description,
         });
 
-        addToast({
-          title: "Preset created successfully!",
-          color: "success",
-        });
-
         setPresetForm({ title: "", description: "" });
         setIsCreateModalOpen(false);
       } catch (error) {
@@ -85,7 +109,11 @@ export default function PresetsPage() {
   };
 
   const handleUpdatePreset = async () => {
-    if (selectedPreset && presetForm.title.trim() && presetForm.description.trim()) {
+    if (
+      selectedPreset &&
+      presetForm.title.trim() &&
+      presetForm.description.trim()
+    ) {
       try {
         await updatePresetMutation.mutateAsync({
           title: presetForm.title,
@@ -155,22 +183,6 @@ export default function PresetsPage() {
     }
   };
 
-  interface FormatDateOptions {
-    month: "short" | "numeric" | "2-digit" | "long" | "narrow";
-    day: "numeric" | "2-digit";
-    year: "numeric" | "2-digit";
-  }
-
-  const formatDate = (date: Date): string | undefined => {
-    const options: FormatDateOptions = {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-    };
-    if (!date) return;
-    return new Intl.DateTimeFormat("en-US", options).format(date);
-  };
-
   const isLoading = userLoading;
 
   if (isLoading) return <LoaderSection />;
@@ -178,18 +190,27 @@ export default function PresetsPage() {
   if (!userProfile) {
     return (
       <div className="p-6 text-center">
-        <p className="text-foreground-500">Failed to load user profile. Please try again.</p>
+        <p className="text-foreground-500">
+          Failed to load user profile. Please try again.
+        </p>
       </div>
     );
   }
   return (
-    <div className="p-6 mx-auto space-y-8 min-w-7xl">
+    <div className="p-6 mx-auto space-y-8 w-full">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-3xl font-bold text-foreground">Presets</h1>
-          <p className="mt-1 text-foreground-500">Manage your AI personalities for customized content generation</p>
+          <p className="mt-1 text-foreground-500">
+            Manage your AI personalities for customized content generation
+          </p>
         </div>
-        <Button color="primary" startContent={<Plus size={18} />} onPress={() => setIsCreateModalOpen(true)} className="w-full sm:w-auto">
+        <Button
+          color="primary"
+          startContent={<Plus size={18} />}
+          onPress={() => setIsCreateModalOpen(true)}
+          className="w-full sm:w-auto"
+        >
           New Preset
         </Button>
       </div>
@@ -206,7 +227,10 @@ export default function PresetsPage() {
               variant="light"
               size="sm"
               onPress={() => {
-                setProfileForm({ name: userProfile.name, bio: userProfile.bio || "" });
+                setProfileForm({
+                  name: userProfile.name,
+                  bio: userProfile.bio || "",
+                });
                 setIsEditingProfile(!isEditingProfile);
               }}
             >
@@ -216,26 +240,65 @@ export default function PresetsPage() {
         </CardHeader>
         <CardBody className="pt-0">
           <div className="flex flex-col gap-4 sm:flex-row">
-            <Avatar src={userProfile.image!} name={userProfile.name} size="lg" className="shrink-0" />
+            <Avatar
+              src={userProfile.image!}
+              name={userProfile.name}
+              size="lg"
+              className="shrink-0"
+            />
             <div className="flex-1 space-y-3">
               {isEditingProfile ? (
                 <div className="space-y-3">
-                  <Input label="Name" value={profileForm.name} onChange={(e) => setProfileForm({ ...profileForm, name: e.target.value })} variant="bordered" isDisabled={updateProfileMutation.isPending} />
-                  <Textarea label="Bio" placeholder="Tell us about yourself..." value={profileForm.bio} onChange={(e) => setProfileForm({ ...profileForm, bio: e.target.value })} variant="bordered" rows={3} isDisabled={updateProfileMutation.isPending} />
+                  <Input
+                    label="Name"
+                    value={profileForm.name}
+                    onChange={(e) =>
+                      setProfileForm({ ...profileForm, name: e.target.value })
+                    }
+                    variant="bordered"
+                    isDisabled={updateProfileMutation.isPending}
+                  />
+                  <Textarea
+                    label="Bio"
+                    placeholder="Tell us about yourself..."
+                    value={profileForm.bio}
+                    onChange={(e) =>
+                      setProfileForm({ ...profileForm, bio: e.target.value })
+                    }
+                    variant="bordered"
+                    rows={3}
+                    isDisabled={updateProfileMutation.isPending}
+                  />
                   <div className="flex gap-2">
-                    <Button color="primary" size="sm" onPress={handleUpdateProfile} isLoading={updateProfileMutation.isPending}>
+                    <Button
+                      color="primary"
+                      size="sm"
+                      onPress={handleUpdateProfile}
+                      isLoading={updateProfileMutation.isPending}
+                    >
                       Save Changes
                     </Button>
-                    <Button variant="light" size="sm" onPress={() => setIsEditingProfile(false)} isDisabled={updateProfileMutation.isPending}>
+                    <Button
+                      variant="light"
+                      size="sm"
+                      onPress={() => setIsEditingProfile(false)}
+                      isDisabled={updateProfileMutation.isPending}
+                    >
                       Cancel
                     </Button>
                   </div>
                 </div>
               ) : (
                 <div>
-                  <h3 className="text-xl font-semibold text-foreground">{userProfile.name}</h3>
-                  <p className="mb-2 text-sm text-foreground-600">{userProfile.email}</p>
-                  <p className="leading-relaxed text-foreground-500">{userProfile.bio || "No bio provided"}</p>
+                  <h3 className="text-xl font-semibold text-foreground">
+                    {userProfile.name}
+                  </h3>
+                  <p className="mb-2 text-sm text-foreground-600">
+                    {userProfile.email}
+                  </p>
+                  <p className="leading-relaxed text-foreground-500">
+                    {userProfile.bio || "No bio provided"}
+                  </p>
                 </div>
               )}
             </div>
@@ -244,7 +307,14 @@ export default function PresetsPage() {
       </Card>
 
       <div className="flex flex-col gap-4 sm:flex-row">
-        <Input placeholder="Search presets..." startContent={<Search size={18} />} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="flex-1" variant="bordered" />
+        <Input
+          placeholder="Search presets..."
+          startContent={<Search size={18} />}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="flex-1"
+          variant="bordered"
+        />
       </div>
 
       {!userProfile.userPreset || userProfile.userPreset.length == 0 ? (
@@ -252,9 +322,18 @@ export default function PresetsPage() {
           <div className="mb-4">
             <Sparkles size={48} className="mx-auto text-primary-400" />
           </div>
-          <h3 className="mb-2 text-xl font-semibold text-foreground">No preset yet</h3>
-          <p className="max-w-md mx-auto mb-6 text-foreground-500">Create your first AI preset to personalize your content generation experience!</p>
-          <Button color="primary" startContent={<Plus size={18} />} onPress={() => setIsCreateModalOpen(true)}>
+          <h3 className="mb-2 text-xl font-semibold text-foreground">
+            No preset yet
+          </h3>
+          <p className="max-w-md mx-auto mb-6 text-foreground-500">
+            Create your first AI preset to personalize your content generation
+            experience!
+          </p>
+          <Button
+            color="primary"
+            startContent={<Plus size={18} />}
+            onPress={() => setIsCreateModalOpen(true)}
+          >
             Create Your First Preset
           </Button>
         </div>
@@ -265,7 +344,9 @@ export default function PresetsPage() {
               <CardHeader className="pb-3">
                 <div className="flex items-start justify-between w-full">
                   <div className="flex-1">
-                    <h3 className="text-lg font-semibold text-foreground line-clamp-1">{preset.title}</h3>
+                    <h3 className="text-lg font-semibold text-foreground line-clamp-1">
+                      {preset.title}
+                    </h3>
                     <div className="flex items-center gap-2 mt-1">
                       <Calendar size={14} className="text-foreground-400" />
                     </div>
@@ -277,13 +358,27 @@ export default function PresetsPage() {
                       </Button>
                     </DropdownTrigger>
                     <DropdownMenu aria-label="Preset actions">
-                      <DropdownItem key="edit" startContent={<Edit size={16} />} onPress={() => handleEditPreset(preset)}>
+                      <DropdownItem
+                        key="edit"
+                        startContent={<Edit size={16} />}
+                        onPress={() => handleEditPreset(preset)}
+                      >
                         Edit
                       </DropdownItem>
-                      <DropdownItem key="duplicate" startContent={<Copy size={16} />} onPress={() => handleDuplicatePreset(preset)}>
+                      <DropdownItem
+                        key="duplicate"
+                        startContent={<Copy size={16} />}
+                        onPress={() => handleDuplicatePreset(preset)}
+                      >
                         Duplicate
                       </DropdownItem>
-                      <DropdownItem key="delete" className="text-danger" color="danger" startContent={<Trash2 size={16} />} onPress={() => handleDeletePreset(preset.id)}>
+                      <DropdownItem
+                        key="delete"
+                        className="text-danger"
+                        color="danger"
+                        startContent={<Trash2 size={16} />}
+                        onPress={() => handleDeletePreset(preset.id)}
+                      >
                         Delete
                       </DropdownItem>
                     </DropdownMenu>
@@ -291,7 +386,9 @@ export default function PresetsPage() {
                 </div>
               </CardHeader>
               <CardBody className="pt-0">
-                <p className="mb-3 text-sm leading-relaxed text-foreground-600 line-clamp-3">{preset.description}</p>
+                <p className="mb-3 text-sm leading-relaxed text-foreground-600 line-clamp-3">
+                  {preset.description}
+                </p>
               </CardBody>
             </Card>
           ))}
@@ -315,8 +412,29 @@ export default function PresetsPage() {
           </ModalHeader>
           <ModalBody>
             <div className="space-y-4">
-              <Input label="Preset Title" placeholder="e.g., Professional LinkedIn, Casual Twitter..." value={presetForm.title} onChange={(e) => setPresetForm({ ...presetForm, title: e.target.value })} variant="bordered" isRequired isDisabled={createPresetMutation.isPending} />
-              <Textarea label="Description" placeholder="Describe the tone, style, and purpose of this preset..." value={presetForm.description} onChange={(e) => setPresetForm({ ...presetForm, description: e.target.value })} variant="bordered" rows={6} isRequired isDisabled={createPresetMutation.isPending} />
+              <Input
+                label="Preset Title"
+                placeholder="e.g., Professional LinkedIn, Casual Twitter..."
+                value={presetForm.title}
+                onChange={(e) =>
+                  setPresetForm({ ...presetForm, title: e.target.value })
+                }
+                variant="bordered"
+                isRequired
+                isDisabled={createPresetMutation.isPending}
+              />
+              <Textarea
+                label="Description"
+                placeholder="Describe the tone, style, and purpose of this preset..."
+                value={presetForm.description}
+                onChange={(e) =>
+                  setPresetForm({ ...presetForm, description: e.target.value })
+                }
+                variant="bordered"
+                rows={6}
+                isRequired
+                isDisabled={createPresetMutation.isPending}
+              />
             </div>
           </ModalBody>
           <ModalFooter>
@@ -329,14 +447,20 @@ export default function PresetsPage() {
             >
               Cancel
             </Button>
-            <Button color="primary" onPress={handleCreatePreset} isDisabled={!presetForm.title.trim() || !presetForm.description.trim()} isLoading={createPresetMutation.isPending}>
+            <Button
+              color="primary"
+              onPress={handleCreatePreset}
+              isDisabled={
+                !presetForm.title.trim() || !presetForm.description.trim()
+              }
+              isLoading={createPresetMutation.isPending}
+            >
               Create Preset
             </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>
 
-      {/* Edit Preset Modal */}
       <Modal
         isOpen={isEditModalOpen}
         onClose={() => {
@@ -355,8 +479,27 @@ export default function PresetsPage() {
           </ModalHeader>
           <ModalBody>
             <div className="space-y-4">
-              <Input label="Preset Title" value={presetForm.title} onChange={(e) => setPresetForm({ ...presetForm, title: e.target.value })} variant="bordered" isRequired isDisabled={updatePresetMutation.isPending} />
-              <Textarea label="Description" value={presetForm.description} onChange={(e) => setPresetForm({ ...presetForm, description: e.target.value })} variant="bordered" rows={6} isRequired isDisabled={updatePresetMutation.isPending} />
+              <Input
+                label="Preset Title"
+                value={presetForm.title}
+                onChange={(e) =>
+                  setPresetForm({ ...presetForm, title: e.target.value })
+                }
+                variant="bordered"
+                isRequired
+                isDisabled={updatePresetMutation.isPending}
+              />
+              <Textarea
+                label="Description"
+                value={presetForm.description}
+                onChange={(e) =>
+                  setPresetForm({ ...presetForm, description: e.target.value })
+                }
+                variant="bordered"
+                rows={6}
+                isRequired
+                isDisabled={updatePresetMutation.isPending}
+              />
             </div>
           </ModalBody>
           <ModalFooter>
@@ -370,7 +513,14 @@ export default function PresetsPage() {
             >
               Cancel
             </Button>
-            <Button color="primary" onPress={handleUpdatePreset} isDisabled={!presetForm.title.trim() || !presetForm.description.trim()} isLoading={updatePresetMutation.isPending}>
+            <Button
+              color="primary"
+              onPress={handleUpdatePreset}
+              isDisabled={
+                !presetForm.title.trim() || !presetForm.description.trim()
+              }
+              isLoading={updatePresetMutation.isPending}
+            >
               Save Changes
             </Button>
           </ModalFooter>
diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx
new file mode 100644
index 0000000..ae35b41
--- /dev/null
+++ b/src/app/posts/page.tsx
@@ -0,0 +1,301 @@
+"use client";
+import { usePosts, Post, Platform, PostStatus } from "@/hooks/data/use-posts";
+import React, { useState, useMemo } from "react";
+import { Card, CardBody, CardHeader } from "@heroui/card";
+import { Button } from "@heroui/button";
+import { Input } from "@heroui/input";
+import { Skeleton } from "@heroui/skeleton";
+import { Pagination } from "@heroui/pagination";
+import { Select, SelectItem } from "@heroui/select";
+import { Chip } from "@heroui/chip";
+import { Search, AlertCircle, FileText } from "lucide-react";
+import PostCard from "@/components/posts/PostCard";
+import PostActivityTracker from "@/components/posts/PostActivityTracker";
+
+function PostGridSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      {Array.from({ length: 8 }).map((_, index) => (
+        <Card key={index} className="w-full animate-pulse">
+          <CardHeader className="flex gap-4">
+            <Skeleton className="w-12 h-12 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="w-3/4 h-4 rounded" />
+              <Skeleton className="w-1/2 h-3 rounded" />
+            </div>
+          </CardHeader>
+          <CardBody>
+            <div className="space-y-3">
+              <Skeleton className="w-full h-20 rounded-lg" />
+              <div className="flex gap-2">
+                <Skeleton className="w-16 h-16 rounded-lg" />
+                <Skeleton className="w-16 h-16 rounded-lg" />
+              </div>
+              <div className="flex gap-2">
+                <Skeleton className="flex-1 h-8 rounded" />
+                <Skeleton className="flex-1 h-8 rounded" />
+                <Skeleton className="w-8 h-8 rounded" />
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+export default function PostsPage() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedPlatform, setSelectedPlatform] = useState<Platform | "ALL">(
+    "ALL"
+  );
+  const [selectedStatus, setSelectedStatus] = useState<PostStatus | "ALL">(
+    "ALL"
+  );
+
+  const pageSize = 12;
+
+  const { data, isLoading, error } = usePosts({
+    page: currentPage,
+    pageSize,
+  });
+
+  // Filter posts based on search and filters
+  const filteredPosts = useMemo(() => {
+    if (!data?.posts) return [];
+
+    return data.posts.filter((post) => {
+      const matchesSearch =
+        post.text.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        post.platform.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesPlatform =
+        selectedPlatform === "ALL" || post.platform === selectedPlatform;
+      const matchesStatus =
+        selectedStatus === "ALL" || post.status === selectedStatus;
+
+      return matchesSearch && matchesPlatform && matchesStatus;
+    });
+  }, [data?.posts, searchQuery, selectedPlatform, selectedStatus]);
+
+  const handlePostView = (post: Post) => {
+    console.log("View post:", post);
+  };
+
+  if (error) {
+    return (
+      <div className="container max-w-7xl mx-auto px-4 py-8">
+        <Card className="border-danger-200 bg-danger-50">
+          <CardBody className="text-center py-12">
+            <AlertCircle size={64} className="mx-auto mb-4 text-danger" />
+            <h2 className="text-2xl font-semibold text-danger mb-2">
+              Unable to Load Posts
+            </h2>
+            <p className="text-danger-600 mb-4">
+              There was an error loading your posts. Please check your
+              connection and try again.
+            </p>
+            <Button
+              color="danger"
+              variant="flat"
+              onPress={() => window.location.reload()}
+            >
+              Retry
+            </Button>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen">
+      <div className="container max-w-4xl mx-auto px-4 py-6">
+        <div className="mb-6">
+          <h1 className="mb-1 text-2xl font-bold text-foreground">
+            Recent Posts
+          </h1>
+          <p className="text-sm text-default-600">
+            Your social media posts in one place
+          </p>
+        </div>
+
+        <div className="mb-8">
+          <PostActivityTracker posts={data?.posts || []} />
+        </div>
+
+        <div className="mb-6">
+          <div className="flex flex-col sm:flex-row gap-3 mb-4">
+            <Input
+              placeholder="Search posts..."
+              startContent={<Search size={16} />}
+              value={searchQuery}
+              onValueChange={setSearchQuery}
+              variant="flat"
+              size="sm"
+              className="flex-1"
+            />
+
+            <div className="flex gap-2">
+              <Select
+                placeholder="Platform"
+                selectedKeys={
+                  selectedPlatform !== "ALL" ? [selectedPlatform] : []
+                }
+                onSelectionChange={(keys) => {
+                  const selected = Array.from(keys)[0] as Platform | undefined;
+                  setSelectedPlatform(selected || "ALL");
+                }}
+                variant="flat"
+                size="sm"
+                className="min-w-[120px]"
+              >
+                <SelectItem key="ALL">All</SelectItem>
+                <SelectItem key="LINKEDIN">LinkedIn</SelectItem>
+                <SelectItem key="TWITTER">Twitter</SelectItem>
+                <SelectItem key="X">X</SelectItem>
+                <SelectItem key="INSTAGRAM">Instagram</SelectItem>
+                <SelectItem key="DEVTO">Dev.to</SelectItem>
+                <SelectItem key="MEDIUM">Medium</SelectItem>
+                <SelectItem key="FACEBOOK">Facebook</SelectItem>
+              </Select>
+
+              <Select
+                placeholder="Status"
+                selectedKeys={selectedStatus !== "ALL" ? [selectedStatus] : []}
+                onSelectionChange={(keys) => {
+                  const selected = Array.from(keys)[0] as
+                    | PostStatus
+                    | undefined;
+                  setSelectedStatus(selected || "ALL");
+                }}
+                variant="flat"
+                size="sm"
+                className="min-w-[100px]"
+              >
+                <SelectItem key="ALL">All</SelectItem>
+                <SelectItem key="DRAFT">Draft</SelectItem>
+                <SelectItem key="READY">Ready</SelectItem>
+                <SelectItem key="SCHEDULED">Scheduled</SelectItem>
+                <SelectItem key="PUBLISHED">Published</SelectItem>
+                <SelectItem key="FAILED">Failed</SelectItem>
+              </Select>
+            </div>
+          </div>
+
+          {/* Active Filters */}
+          {(searchQuery ||
+            selectedPlatform !== "ALL" ||
+            selectedStatus !== "ALL") && (
+            <div className="flex items-center gap-2">
+              {searchQuery && (
+                <Chip
+                  size="sm"
+                  variant="flat"
+                  onClose={() => setSearchQuery("")}
+                  className="text-xs"
+                >
+                  "{searchQuery}"
+                </Chip>
+              )}
+              {selectedPlatform !== "ALL" && (
+                <Chip
+                  size="sm"
+                  variant="flat"
+                  onClose={() => setSelectedPlatform("ALL")}
+                  className="text-xs"
+                >
+                  {selectedPlatform}
+                </Chip>
+              )}
+              {selectedStatus !== "ALL" && (
+                <Chip
+                  size="sm"
+                  variant="flat"
+                  onClose={() => setSelectedStatus("ALL")}
+                  className="text-xs"
+                >
+                  {selectedStatus}
+                </Chip>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="mb-8">
+          {isLoading ? (
+            <PostGridSkeleton />
+          ) : filteredPosts.length > 0 ? (
+            <div
+              className={"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"}
+            >
+              {filteredPosts.map((post) => (
+                <PostCard key={post.id} post={post} onView={handlePostView} />
+              ))}
+            </div>
+          ) : (
+            <Card
+              className="border-dashed border-2 border-default-300"
+              shadow="none"
+            >
+              <CardBody className="text-center py-20">
+                <div className="flex flex-col items-center space-y-4">
+                  <div className="p-4 bg-default-100 rounded-full">
+                    <FileText size={48} className="text-default-400" />
+                  </div>
+                  <div className="space-y-2">
+                    <h3 className="text-xl font-semibold text-default-600">
+                      {searchQuery ||
+                      selectedPlatform !== "ALL" ||
+                      selectedStatus !== "ALL"
+                        ? "No posts match your filters"
+                        : "No posts created yet"}
+                    </h3>
+                    <p className="text-default-500 max-w-md">
+                      {searchQuery ||
+                      selectedPlatform !== "ALL" ||
+                      selectedStatus !== "ALL"
+                        ? "Try adjusting your search criteria or clear the filters to see more posts."
+                        : "Get started by creating your first social media post. Share your content across multiple platforms effortlessly."}
+                    </p>
+                  </div>
+                  <div className="flex gap-3">
+                    {(searchQuery ||
+                      selectedPlatform !== "ALL" ||
+                      selectedStatus !== "ALL") && (
+                      <Button
+                        variant="flat"
+                        onPress={() => {
+                          setSearchQuery("");
+                          setSelectedPlatform("ALL");
+                          setSelectedStatus("ALL");
+                        }}
+                      >
+                        Clear Filters
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </CardBody>
+            </Card>
+          )}
+        </div>
+
+        {data && data.totalPages > 1 && (
+          <div className="flex justify-center">
+            <Pagination
+              total={data.totalPages}
+              page={currentPage}
+              onChange={setCurrentPage}
+              showControls
+              showShadow
+              color="primary"
+              size="lg"
+              className="gap-2"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/posts/PostActivityTracker.tsx b/src/components/posts/PostActivityTracker.tsx
new file mode 100644
index 0000000..2f3b65b
--- /dev/null
+++ b/src/components/posts/PostActivityTracker.tsx
@@ -0,0 +1,199 @@
+"use client";
+import React, { useMemo } from "react";
+import { Tooltip } from "@heroui/tooltip";
+import { Post } from "@/hooks/data/use-posts";
+
+interface ActivityDay {
+  date: Date;
+  count: number;
+  posts: Post[];
+}
+
+// Helper function to calculate current streak
+function getCurrentStreak(calendar: ActivityDay[]): number {
+  let streak = 0;
+  const today = new Date().toDateString();
+
+  // Start from today and go backwards
+  for (let i = calendar.length - 1; i >= 0; i--) {
+    const day = calendar[i];
+    if (day.count > 0) {
+      streak++;
+    } else if (day.date.toDateString() !== today || streak > 0) {
+      // Break streak if no posts (unless it's today and streak is 0)
+      break;
+    }
+  }
+
+  return streak;
+}
+
+interface PostActivityTrackerProps {
+  posts?: Post[];
+  activityData?: ActivityDay[]; // Optional server-provided data
+  className?: string;
+}
+
+export default function PostActivityTracker({
+  posts = [],
+  activityData,
+}: PostActivityTrackerProps) {
+  // Generate the last 365 days of activity data
+  const activityCalendar = useMemo(() => {
+    const today = new Date();
+    const oneYearAgo = new Date();
+    oneYearAgo.setFullYear(today.getFullYear() - 1);
+
+    // Use server data if provided, otherwise aggregate from posts
+    if (activityData) {
+      return activityData;
+    }
+
+    // Client-side aggregation
+    const calendar: ActivityDay[] = [];
+    const postsByDate = new Map<string, Post[]>();
+
+    // Group posts by date
+    posts.forEach((post) => {
+      const dateKey = new Date(post.createdAt).toDateString();
+      if (!postsByDate.has(dateKey)) {
+        postsByDate.set(dateKey, []);
+      }
+      postsByDate.get(dateKey)!.push(post);
+    });
+
+    // Generate calendar for the last 365 days
+    for (let i = 365; i >= 0; i--) {
+      const date = new Date();
+      date.setDate(today.getDate() - i);
+      const dateKey = date.toDateString();
+      const dayPosts = postsByDate.get(dateKey) || [];
+
+      calendar.push({
+        date: new Date(date),
+        count: dayPosts.length,
+        posts: dayPosts,
+      });
+    }
+
+    return calendar;
+  }, [posts, activityData]);
+
+  // Get intensity class based on post count
+  const getIntensityClass = (count: number) => {
+    if (count === 0) return "bg-default-100 border border-default-200";
+    if (count <= 2) return "bg-primary-200 border border-primary-300";
+    if (count <= 4) return "bg-primary-400 border border-primary-500";
+    if (count <= 6) return "bg-primary-600 border border-primary-700";
+    return "bg-primary-800 border border-primary-900";
+  };
+
+  // Group days by weeks for proper grid layout
+  const weeks = useMemo(() => {
+    const weeks: ActivityDay[][] = [];
+    let currentWeek: ActivityDay[] = [];
+
+    activityCalendar.forEach((day, index) => {
+      const dayOfWeek = day.date.getDay(); // 0 = Sunday, 1 = Monday, etc.
+
+      if (index === 0) {
+        // Fill in empty days at the beginning of the first week
+        for (let i = 0; i < dayOfWeek; i++) {
+          currentWeek.push({
+            date: new Date(0),
+            count: 0,
+            posts: [],
+          });
+        }
+      }
+
+      currentWeek.push(day);
+
+      if (dayOfWeek === 6 || index === activityCalendar.length - 1) {
+        // End of week (Saturday) or last day
+        weeks.push([...currentWeek]);
+        currentWeek = [];
+      }
+    });
+
+    return weeks;
+  }, [activityCalendar]);
+
+  const totalPosts = activityCalendar.reduce((sum, day) => sum + day.count, 0);
+
+  return (
+    <div className="w-full p-4">
+      <div className="flex justify-between items-center mb-3">
+        <div>
+          <h3 className="text-sm font-medium text-foreground">Activity</h3>
+          <p className="text-xs text-default-600">
+            {totalPosts} posts in the last year
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex gap-1 overflow-x-auto pb-2">
+          {weeks.map((week, weekIndex) => (
+            <div key={weekIndex} className="flex flex-col gap-1">
+              {week.map((day, dayIndex) => {
+                if (day.date.getTime() === 0) {
+                  return (
+                    <div
+                      key={`empty-${dayIndex}`}
+                      className="w-2.5 h-2.5 rounded-sm"
+                    />
+                  );
+                }
+
+                return (
+                  <Tooltip
+                    key={`${weekIndex}-${dayIndex}`}
+                    content={
+                      <div className="text-xs">
+                        <div>
+                          {day.date.toLocaleDateString("en-US", {
+                            month: "short",
+                            day: "numeric",
+                          })}
+                        </div>
+                        <div className="text-default-500">
+                          {day.count} post{day.count !== 1 ? "s" : ""}
+                        </div>
+                      </div>
+                    }
+                    delay={200}
+                    closeDelay={100}
+                  >
+                    <div
+                      className={`w-2.5 h-2.5 rounded-sm cursor-pointer ${getIntensityClass(
+                        day.count
+                      )}`}
+                    />
+                  </Tooltip>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+
+        <div className="flex items-start space-y-2 flex-col justify-start mt-3 pt-2 border-t border-default-100">
+          <div className="text-xs text-default-700">
+            {getCurrentStreak(activityCalendar)} day streak
+          </div>
+          <div className="flex items-center gap-2 text-xs text-default-700">
+            <span>Less</span>
+            <div className="flex gap-1">
+              <div className="w-2.5 h-2.5 rounded-sm bg-default-100" />
+              <div className="w-2.5 h-2.5 rounded-sm bg-primary-200" />
+              <div className="w-2.5 h-2.5 rounded-sm bg-primary-400" />
+              <div className="w-2.5 h-2.5 rounded-sm bg-primary-600" />
+              <div className="w-2.5 h-2.5 rounded-sm bg-primary-800" />
+            </div>
+            <span>More</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx
new file mode 100644
index 0000000..980e871
--- /dev/null
+++ b/src/components/posts/PostCard.tsx
@@ -0,0 +1,90 @@
+"use client";
+import React from "react";
+import { Card, CardBody, CardHeader, CardFooter } from "@heroui/card";
+import { Avatar } from "@heroui/avatar";
+import { Chip } from "@heroui/chip";
+import { Post, PostStatus } from "@/hooks/data/use-posts";
+
+import moment from "moment";
+import { authClient } from "@/lib/auth-client";
+import { cn } from "@/lib/utils";
+import { getPlatform } from "@/lib/icons";
+
+interface PostCardProps {
+  post: Post;
+  onView?: (post: Post) => void;
+}
+
+export default function PostCard({ post, onView }: PostCardProps) {
+  const { data: session } = authClient.useSession();
+  const platformInfo = getPlatform(post.platform);
+  return (
+    <Card
+      className="w-full"
+      shadow="none"
+      radius="md"
+      isPressable
+      onPress={() => {
+        onView && onView(post);
+      }}
+    >
+      <CardHeader className="flex justify-between items-start pb-2">
+        <div className="flex items-center gap-3">
+          <Avatar
+            size="md"
+            radius="full"
+            src={session?.user.image || ""}
+            name={session?.user.name || "User"}
+          />
+          <div className="flex flex-col justify-start items-start">
+            <p>{session?.user.name || "User"}</p>
+            <p className="text-sm text-default -mt-1">
+              {moment(post.createdAt).fromNow()}
+            </p>
+          </div>
+        </div>
+        <platformInfo.icon
+          className={cn("text-xl", platformInfo.accentColor)}
+        />
+      </CardHeader>
+      <CardBody className="space-y-1">
+        <div className="flex flex-col flex-1">
+          <p className={"text-sm text-default-900 line-clamp-4 -mb-2"}>
+            {post.text.slice(0, 200)}
+            ...
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-2 mt-2">
+          <div className="flex flex-wrap gap-2">
+            <Chip
+              size="sm"
+              variant={"dot"}
+              color={
+                post.status === PostStatus.PUBLISHED
+                  ? "success"
+                  : post.status === PostStatus.DRAFT
+                  ? "default"
+                  : "warning"
+              }
+            >
+              {post.status}
+            </Chip>
+          </div>
+          <div>
+            {post.imageUrl && (
+              <img
+                src={post.imageUrl}
+                alt="Post Image"
+                className="w-full h-auto max-h-60 object-cover rounded-md"
+              />
+            )}
+          </div>
+        </div>
+      </CardBody>
+      <CardFooter className="flex justify-between items-center pt-2">
+        <div className="flex items-center gap-3"></div>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index 8553afa..9788ff6 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -1,7 +1,17 @@
 import React from "react";
 import { usePathname } from "next/navigation";
 import { useSidebar } from "./sidebar-provider";
-import { ChevronLeft, ChevronRight, GalleryVerticalEndIcon, Home, Inbox, HelpCircle, Settings, TimerIcon, SidebarOpenIcon, SidebarCloseIcon, MagnetIcon, BrainCircuit, BellDotIcon } from "lucide-react";
+import {
+  GalleryVerticalEndIcon,
+  Home,
+  Settings,
+  TimerIcon,
+  SidebarOpenIcon,
+  SidebarCloseIcon,
+  BellDotIcon,
+  LayoutGrid,
+  BrainCircuit,
+} from "lucide-react";
 
 import { Drawer, DrawerContent } from "@heroui/drawer";
 import { Button } from "@heroui/button";
@@ -33,12 +43,8 @@ const navigationData: NavSection[] = [
     items: [
       { icon: Home, label: "Dashboard", href: "/" },
       { icon: TimerIcon, label: "Schedules", href: "/schedules" },
-
-      {
-        icon: GalleryVerticalEndIcon,
-        label: "Gallery",
-        href: "/gallery",
-      },
+      { icon: GalleryVerticalEndIcon, label: "Gallery", href: "/gallery" },
+      { icon: LayoutGrid, label: "Posts", href: "/posts" },
     ],
   },
   {
@@ -77,7 +83,13 @@ const SidebarHeader: React.FC<{
               <Brand className="w-8 h-8" text />
             </div>
           </div>
-          <Button isIconOnly variant="light" onPress={onToggle} aria-label="Collapse sidebar" className="ml-2">
+          <Button
+            isIconOnly
+            variant="light"
+            onPress={onToggle}
+            aria-label="Collapse sidebar"
+            className="ml-2"
+          >
             <SidebarCloseIcon className="w-4 h-4" />
           </Button>
         </>
@@ -87,7 +99,13 @@ const SidebarHeader: React.FC<{
           <div className="flex items-center justify-center w-8 h-8 mb-2 rounded-full bg-primary-100">
             <Brand />
           </div>
-          <Button isIconOnly variant="light" onPress={onToggle} aria-label="Expand sidebar" size="sm">
+          <Button
+            isIconOnly
+            variant="light"
+            onPress={onToggle}
+            aria-label="Expand sidebar"
+            size="sm"
+          >
             <SidebarOpenIcon className="w-4 h-4" />
           </Button>
         </div>
@@ -105,7 +123,17 @@ const NavItem: React.FC<{
   collapsed: boolean;
 }> = ({ icon: IconComponent, label, href, active, badge, collapsed }) => {
   const buttonContent = (
-    <Button as={Link} href={href} className={cn(`justify-start w-full mb-1 ${active ? "bg-primary-50" : ""}`, collapsed ? "px-0" : "px-2")} variant={"light"} isIconOnly={collapsed} color={active ? "primary" : "default"}>
+    <Button
+      as={Link}
+      href={href}
+      className={cn(
+        `justify-start w-full mb-1 ${active ? "bg-primary-50" : ""}`,
+        collapsed ? "px-0" : "px-2"
+      )}
+      variant={"light"}
+      isIconOnly={collapsed}
+      color={active ? "primary" : "default"}
+    >
       <IconComponent className={cn("w-5 h-5", collapsed ? "ml-2" : "mr-2")} />
       {!collapsed && label}
     </Button>
@@ -132,9 +160,21 @@ const SidebarSection: React.FC<{
 
   return (
     <div className="px-3 mb-4">
-      {!collapsed && title && <p className="px-3 my-2 text-xs font-medium uppercase text-default-700">{title}</p>}
+      {!collapsed && title && (
+        <p className="px-3 my-2 text-xs font-medium uppercase text-default-700">
+          {title}
+        </p>
+      )}
       {items.map((item, index) => (
-        <NavItem key={index} icon={item.icon} label={item.label} href={item.href} active={isActiveRoute(item.href)} badge={item.badge} collapsed={collapsed} />
+        <NavItem
+          key={index}
+          icon={item.icon}
+          label={item.label}
+          href={item.href}
+          active={isActiveRoute(item.href)}
+          badge={item.badge}
+          collapsed={collapsed}
+        />
       ))}
     </div>
   );
@@ -151,7 +191,12 @@ const SidebarContent: React.FC<{
 
       <div className="flex-1 overflow-y-auto scrollbar-hidden">
         {navigationData.map((section, index) => (
-          <SidebarSection key={index} title={section.title} items={section.items} collapsed={collapsed} />
+          <SidebarSection
+            key={index}
+            title={section.title}
+            items={section.items}
+            collapsed={collapsed}
+          />
         ))}
       </div>
 
@@ -218,13 +263,23 @@ export const DashboardSidebar = () => {
                   <Brand className="w-8 h-8" text />
                 </div>
               </div>
-              <SidebarContent collapsed={false} onToggle={onToggle} isMobile={true} />
+              <SidebarContent
+                collapsed={false}
+                onToggle={onToggle}
+                isMobile={true}
+              />
             </div>
           </DrawerContent>
         </Drawer>
 
         <div className="fixed z-50 -top-1 -left-1 md:hidden">
-          <Button isIconOnly variant="light" onPress={onOpen} aria-label="Open sidebar" size="sm">
+          <Button
+            isIconOnly
+            variant="light"
+            onPress={onOpen}
+            aria-label="Open sidebar"
+            size="sm"
+          >
             <SidebarOpenIcon className="w-4 h-4" />
           </Button>
         </div>
@@ -233,8 +288,16 @@ export const DashboardSidebar = () => {
   }
 
   return (
-    <aside className={`hidden md:flex flex-col h-full bg-background border-r border-default-200 transition-all duration-300 ease-in-out ${collapsed ? "w-16" : "w-64"}`}>
-      <SidebarContent collapsed={collapsed} onToggle={onToggle} isMobile={false} />
+    <aside
+      className={`hidden md:flex flex-col h-full bg-background border-r border-default-200 transition-all duration-300 ease-in-out ${
+        collapsed ? "w-16" : "w-64"
+      }`}
+    >
+      <SidebarContent
+        collapsed={collapsed}
+        onToggle={onToggle}
+        isMobile={false}
+      />
     </aside>
   );
 };
diff --git a/src/hooks/data/use-posts.ts b/src/hooks/data/use-posts.ts
new file mode 100644
index 0000000..2b19381
--- /dev/null
+++ b/src/hooks/data/use-posts.ts
@@ -0,0 +1,78 @@
+import fetcher from "@/lib/fetcher";
+import { useQuery } from "@tanstack/react-query";
+
+export interface PostPaginationResponse {
+  posts: Post[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+
+export function usePosts(filters?: { page?: number; pageSize?: number }) {
+  return useQuery<PostPaginationResponse>({
+    queryKey: [
+      "posts",
+      { page: filters?.page || 1, pageSize: filters?.pageSize || 10 },
+    ],
+    queryFn: async () =>
+      fetcher<PostPaginationResponse>("GET", "/posts", {
+        searchParams: {
+          page: filters?.page || 1,
+          pageSize: filters?.pageSize || 10,
+        },
+      }),
+  });
+}
+
+export const Platform = {
+  LINKEDIN: "LINKEDIN",
+  TWITTER: "TWITTER",
+  INSTAGRAM: "INSTAGRAM",
+  DEVTO: "DEVTO",
+  MEDIUM: "MEDIUM",
+  FACEBOOK: "FACEBOOK",
+  X: "X",
+} as const;
+
+export type Platform = (typeof Platform)[keyof typeof Platform];
+
+export const PostStatus = {
+  CREATED: "CREATED",
+  DRAFTING: "DRAFTING",
+  DRAFT: "DRAFT",
+  READY: "READY",
+  SCHEDULED: "SCHEDULED",
+  PUBLISHING: "PUBLISHING",
+  PUBLISHED: "PUBLISHED",
+  FAILED: "FAILED",
+  CANCELED: "CANCELED",
+} as const;
+
+export type PostStatus = (typeof PostStatus)[keyof typeof PostStatus];
+
+export const ContentType = {
+  TEXT: "TEXT",
+  IMAGE: "IMAGE",
+  VIDEO: "VIDEO",
+  DOCUMENT: "DOCUMENT",
+  POLL: "POLL",
+} as const;
+
+export type ContentType = (typeof ContentType)[keyof typeof ContentType];
+
+export type Post = {
+  id: string;
+  text: string;
+  contentType: ContentType;
+  imageUrl: string | null;
+  videoUrl: string | null;
+  platform: Platform;
+  externalPostId: string | null;
+  status: PostStatus;
+  createdAt: Date;
+  updatedAt: Date;
+  generatedAt: Date | null;
+  isAIgenerated: boolean;
+  scheduleId: string | null;
+};
diff --git a/src/hooks/data/use-presets.ts b/src/hooks/data/use-presets.ts
index 7eae989..b10606d 100644
--- a/src/hooks/data/use-presets.ts
+++ b/src/hooks/data/use-presets.ts
@@ -1,6 +1,11 @@
 import fetcher from "@/lib/fetcher";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { CreatePresetDto, UpdatePresetDto, UpdateUserProfileDto } from "./payload";
+import {
+  CreatePresetDto,
+  UpdatePresetDto,
+  UpdateUserProfileDto,
+} from "./payload";
+import { addToast } from "@heroui/toast";
 
 export function useGetPresets() {
   return useQuery<PresetResponse[]>({
@@ -14,10 +19,15 @@ export function useCreatePreset() {
 
   return useMutation({
     mutationKey: ["createPreset"],
-    mutationFn: async (payload: CreatePresetDto) => fetcher<ApiResponse>("POST", "/users/presets", { body: payload }),
+    mutationFn: async (payload: CreatePresetDto) =>
+      fetcher<ApiResponse>("POST", "/users/presets", { body: payload }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["presets"] });
       queryClient.invalidateQueries({ queryKey: ["user"] });
+      addToast({
+        title: "Preset created successfully!",
+        color: "success",
+      });
     },
   });
 }
@@ -27,7 +37,10 @@ export function useUpdatePreset() {
 
   return useMutation({
     mutationKey: ["updatePreset"],
-    mutationFn: async (payload: UpdatePresetDto) => fetcher<ApiResponse>("PUT", `/users/presets/${payload.id}`, { body: payload }),
+    mutationFn: async (payload: UpdatePresetDto) =>
+      fetcher<ApiResponse>("PUT", `/users/presets/${payload.id}`, {
+        body: payload,
+      }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["presets"] });
       queryClient.invalidateQueries({ queryKey: ["user"] });
@@ -40,7 +53,8 @@ export function useDeletePreset() {
 
   return useMutation({
     mutationKey: ["deletePreset"],
-    mutationFn: async (id: string) => fetcher<ApiResponse>("DELETE", `/users/presets/${id}`),
+    mutationFn: async (id: string) =>
+      fetcher<ApiResponse>("DELETE", `/users/presets/${id}`),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["presets"] });
       queryClient.invalidateQueries({ queryKey: ["user"] });
@@ -53,7 +67,8 @@ export function useUpdateUserProfile() {
 
   return useMutation({
     mutationKey: ["updateUserProfile"],
-    mutationFn: async (payload: UpdateUserProfileDto) => fetcher<ApiResponse>("PUT", "/users/profile", { body: payload }),
+    mutationFn: async (payload: UpdateUserProfileDto) =>
+      fetcher<ApiResponse>("PUT", "/users/profile", { body: payload }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["user"] });
     },