feat: implement federation post/connections backfill schedulers

schedule_actor_posts_fetch now spawns backfill_outbox in background,
fetching all pages of a remote outbox and persisting via accept_note.
schedule_connections_fetch follows AP collection next-links, resolves
profiles, and caches them in the DB. Both were no-ops ("deferred").

Add connections_repo field to ActivityPubService; wire both factories.

crates/adapters/activitypub-base/src/service.rs

@@ -1,5 +1,7 @@
 use std::sync::Arc;
 
+use domain::ports::FederationFetchPort;
+
 use activitypub_federation::{
     activity_sending::SendActivityTask, fetch::object_id::ObjectId, protocol::context::WithContext,
     traits::Actor,
@@ -154,9 +156,11 @@ pub(crate) async fn send_with_retry(
     failures
 }
 
+#[derive(Clone)]
 pub struct ActivityPubService {
     federation_config: ApFederationConfig,
     base_url: String,
+    connections_repo: Arc<dyn domain::ports::RemoteActorConnectionRepository>,
 }
 
 impl ActivityPubService {
@@ -170,6 +174,7 @@ impl ActivityPubService {
         software_name: String,
         debug: bool,
         event_publisher: Option<Arc<dyn domain::ports::EventPublisher>>,
+        connections_repo: Arc<dyn domain::ports::RemoteActorConnectionRepository>,
     ) -> anyhow::Result<Self> {
         let data = FederationData::new(
             repo,
@@ -184,6 +189,7 @@ impl ActivityPubService {
         Ok(Self {
             federation_config,
             base_url,
+            connections_repo,
         })
     }
 
@@ -1586,11 +1592,14 @@ impl domain::ports::FederationSchedulerPort for ActivityPubService {
         actor_ap_url: &str,
         outbox_url: &str,
     ) -> Result<(), domain::errors::DomainError> {
-        tracing::debug!(
-            actor = actor_ap_url,
-            outbox = outbox_url,
-            "schedule_actor_posts_fetch: deferred"
-        );
+        let service = self.clone();
+        let actor = actor_ap_url.to_string();
+        let outbox = outbox_url.to_string();
+        tokio::spawn(async move {
+            if let Err(e) = service.backfill_outbox(&outbox, &actor).await {
+                tracing::warn!(actor = %actor, error = %e, "posts backfill failed");
+            }
+        });
         Ok(())
     }
 
@@ -1601,13 +1610,107 @@ impl domain::ports::FederationSchedulerPort for ActivityPubService {
         connection_type: &str,
         page: u32,
     ) -> Result<(), domain::errors::DomainError> {
-        tracing::debug!(
-            actor = actor_ap_url,
-            collection = collection_url,
-            connection_type,
-            page,
-            "schedule_connections_fetch: deferred"
-        );
+        // Only trigger a full fetch on page 1 to avoid redundant network traffic.
+        if page != 1 {
+            return Ok(());
+        }
+        let service = self.clone();
+        let actor = actor_ap_url.to_string();
+        let collection = collection_url.to_string();
+        let conn_type = connection_type.to_string();
+        let connections_repo = self.connections_repo.clone();
+        tokio::spawn(async move {
+            let client = match reqwest::Client::builder()
+                .timeout(std::time::Duration::from_secs(HTTP_FETCH_TIMEOUT_SECS))
+                .build()
+            {
+                Ok(c) => c,
+                Err(e) => {
+                    tracing::warn!(error = %e, "connections fetch: failed to build client");
+                    return;
+                }
+            };
+
+            // Walk the AP collection, following first/next links.
+            let mut all_urls: Vec<String> = Vec::new();
+            let mut current_url: Option<String> = Some(collection.clone());
+            const MAX_ACTORS: usize = 500;
+
+            while let Some(url) = current_url.take() {
+                let val: serde_json::Value = match client
+                    .get(&url)
+                    .header("Accept", "application/activity+json, application/ld+json")
+                    .send()
+                    .await
+                {
+                    Ok(r) => match r.json().await {
+                        Ok(v) => v,
+                        Err(e) => {
+                            tracing::warn!(error = %e, url = %url, "connections: parse error");
+                            break;
+                        }
+                    },
+                    Err(e) => {
+                        tracing::warn!(error = %e, url = %url, "connections: HTTP error");
+                        break;
+                    }
+                };
+
+                // OrderedCollection root — follow its `first` page.
+                if val["type"].as_str() == Some("OrderedCollection") {
+                    current_url = val["first"].as_str().map(|s| s.to_string());
+                    continue;
+                }
+
+                // Collect actor URLs from orderedItems (string or {id: ...}).
+                let empty = vec![];
+                let items = val["orderedItems"].as_array().unwrap_or(&empty);
+                for item in items {
+                    let actor_url = item
+                        .as_str()
+                        .or_else(|| item["id"].as_str())
+                        .unwrap_or("");
+                    if !actor_url.is_empty() {
+                        all_urls.push(actor_url.to_string());
+                    }
+                }
+
+                if all_urls.len() >= MAX_ACTORS {
+                    break;
+                }
+                current_url = val["next"].as_str().map(|s| s.to_string());
+                if current_url.is_some() {
+                    tokio::time::sleep(std::time::Duration::from_millis(BATCH_FETCH_SLEEP_MS))
+                        .await;
+                }
+            }
+
+            if all_urls.is_empty() {
+                tracing::debug!(actor = %actor, connection_type = %conn_type, "connections: empty collection");
+                return;
+            }
+
+            // Resolve profiles and cache in pages of PAGE_SIZE.
+            const PAGE_SIZE: usize = 20;
+            for (idx, chunk) in all_urls.chunks(PAGE_SIZE).enumerate() {
+                let page_num = (idx + 1) as u32;
+                let chunk_urls: Vec<String> = chunk.to_vec();
+                let resolved = service.resolve_actor_profiles(chunk_urls).await;
+                if let Err(e) = connections_repo
+                    .upsert_connections(&actor, &conn_type, page_num, &resolved)
+                    .await
+                {
+                    tracing::warn!(error = %e, "connections: upsert failed");
+                }
+            }
+
+            tracing::debug!(
+                actor = %actor,
+                connection_type = %conn_type,
+                count = all_urls.len(),
+                "connections fetch complete"
+            );
+        });
         Ok(())
     }
 }

crates/bootstrap/src/factory.rs

@@ -86,6 +86,7 @@ pub async fn build(cfg: &Config) -> Infrastructure {
             "thoughts".to_string(),
             cfg.debug,
             None,
+            Arc::new(PgRemoteActorConnectionRepository::new(pool.clone())),
         )
         .await
         .expect("Failed to build ActivityPubService"),

crates/worker/src/factory.rs

@@ -1,4 +1,5 @@
 use postgres::failed_event::PgFailedEventStore;
+use postgres::remote_actor_connections::PgRemoteActorConnectionRepository;
 use sqlx::PgPool;
 use std::sync::Arc;
 
@@ -56,6 +57,7 @@ pub async fn build(database_url: &str, base_url: &str, nats_url: &str) -> Worker
             "thoughts".to_string(),
             false,
             None,
+            Arc::new(PgRemoteActorConnectionRepository::new(pool.clone())),
         )
         .await
         .expect("ActivityPubService build failed"),

thoughts-frontend/app/globals.css

@@ -48,10 +48,10 @@
   /* Frutiger Aero Gradients */
   --gradient-fa-blue: 135deg, hsl(217 91% 60%) 0%, hsl(200 90% 70%) 100%;
   --gradient-fa-green: 135deg, hsl(155 70% 55%) 0%, hsl(170 80% 65%) 100%;
-  --gradient-fa-card: 180deg, hsl(var(--card)) 0%, hsl(var(--card)) 90%,
-    hsl(var(--card)) 100%;
-  --gradient-fa-gloss: 135deg, rgba(255, 255, 255, 0.2) 0%,
-    rgba(255, 255, 255, 0) 100%;
+  --gradient-fa-card:
+    180deg, hsl(var(--card)) 0%, hsl(var(--card)) 90%, hsl(var(--card)) 100%;
+  --gradient-fa-gloss:
+    135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%;
 
   --shadow-fa-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
   --shadow-fa-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
@@ -177,17 +177,16 @@
 }
 
 @layer base {
+  html {
+    overflow-y: scroll;
+  }
+
   * {
     @apply border-border outline-ring/50;
   }
 
   body {
     @apply bg-background text-foreground;
-    background-image: url("/background.avif");
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-    background-repeat: no-repeat;
   }
 
   .glossy-effect::before {
@@ -312,3 +311,165 @@
     z-index: 1;
   }
 }
+
+/* ── Frutiger Aero interaction keyframes ── */
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 300px;
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0) rotate(0deg);
+  }
+  15% {
+    transform: translateX(-4px) rotate(-1.5deg);
+  }
+  30% {
+    transform: translateX(4px) rotate(1.5deg);
+  }
+  45% {
+    transform: translateX(-3px) rotate(-1deg);
+  }
+  60% {
+    transform: translateX(3px) rotate(1deg);
+  }
+  75% {
+    transform: translateX(-1px) rotate(-0.5deg);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9) translateY(8px);
+  }
+}
+
+@keyframes floatBob {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes shimmerAero {
+  0% {
+    background-position: -400px 0;
+  }
+  100% {
+    background-position: 400px 0;
+  }
+}
+
+@layer components {
+  .animate-slide-down {
+    overflow: hidden;
+    animation: slideDown 0.22s ease-out forwards;
+  }
+  .animate-shake {
+    animation: shake 0.45s ease-out;
+  }
+  .animate-fade-out {
+    animation: fadeOut 0.3s ease-out forwards;
+  }
+  .animate-float-bob {
+    animation: floatBob 2.8s ease-in-out infinite;
+  }
+
+  /* Aero-tinted shimmer for skeleton loaders */
+  .shimmer-aero {
+    background: linear-gradient(
+      90deg,
+      rgba(96, 165, 250, 0.12) 25%,
+      rgba(96, 165, 250, 0.3) 50%,
+      rgba(96, 165, 250, 0.12) 75%
+    );
+    background-size: 800px 100%;
+    background-repeat: no-repeat;
+    animation: shimmerAero 1.5s infinite linear;
+  }
+
+  /* Widget title icon badges */
+  .widget-icon {
+    width: 22px;
+    height: 22px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    flex-shrink: 0;
+  }
+  .widget-icon-blue {
+    background: linear-gradient(135deg, #60a5fa, #2563eb);
+    box-shadow:
+      0 2px 4px rgba(37, 99, 235, 0.3),
+      inset 0 1px 1px rgba(255, 255, 255, 0.3);
+  }
+  .widget-icon-green {
+    background: linear-gradient(135deg, #6ee7b7, #10b981);
+    box-shadow:
+      0 2px 4px rgba(16, 185, 129, 0.3),
+      inset 0 1px 1px rgba(255, 255, 255, 0.3);
+  }
+  .widget-icon-purple {
+    background: linear-gradient(135deg, #c4b5fd, #7c3aed);
+    box-shadow:
+      0 2px 4px rgba(124, 58, 237, 0.3),
+      inset 0 1px 1px rgba(255, 255, 255, 0.3);
+  }
+
+  /* Landing page ambient orbs */
+  .orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(40px);
+    opacity: 0.45;
+    pointer-events: none;
+  }
+
+  /* Gradient avatar fallback */
+  .avatar-gradient {
+    background: linear-gradient(135deg, #60a5fa, #34d399);
+    box-shadow:
+      0 0 0 2px white,
+      0 0 0 3.5px rgba(59, 130, 246, 0.45);
+  }
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .animate-slide-down {
+    animation: none;
+  }
+  .animate-shake {
+    animation: none;
+  }
+  .animate-fade-out {
+    animation: none;
+  }
+  .animate-float-bob {
+    animation: none;
+  }
+  .shimmer-aero {
+    animation: none;
+    background: rgba(96, 165, 250, 0.18);
+  }
+}

thoughts-frontend/app/layout.tsx

@@ -4,6 +4,7 @@ import { AuthProvider } from "@/hooks/use-auth";
 import { Toaster } from "@/components/ui/sonner";
 import { Header } from "@/components/header";
 import localFont from "next/font/local";
+import Image from "next/image";
 import InstallPrompt from "@/components/install-prompt";
 
 export const metadata: Metadata = {
@@ -52,6 +53,16 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${frutiger.className} antialiased`}>
+        <div className="fixed inset-0 -z-10">
+          <Image
+            src="/bg1.avif"
+            alt=""
+            fill
+            priority
+            quality={85}
+            className="object-cover object-center"
+          />
+        </div>
         <AuthProvider>
           <Header />
           <main className="flex-1">{children}</main>

thoughts-frontend/app/page.tsx

@@ -13,7 +13,11 @@ import { UsersCount } from "@/components/users-count";
 import { PaginationNav } from "@/components/pagination-nav";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
-import { ProfileSkeleton, TagsSkeleton, CountSkeleton } from "@/components/loading-skeleton";
+import {
+  ProfileSkeleton,
+  TagsSkeleton,
+  CountSkeleton,
+} from "@/components/loading-skeleton";
 
 export const metadata: Metadata = {
   title: "Home",
@@ -86,9 +90,7 @@ async function FeedPage({
           </header>
           <ThoughtForm />
 
-          <div className="block lg:hidden space-y-6">
-            {sidebar}
-          </div>
+          <div className="block lg:hidden space-y-6">{sidebar}</div>
 
           <div className="space-y-6">
             {thoughtThreads.map((thought) => (
@@ -99,7 +101,13 @@ async function FeedPage({
               />
             ))}
             {thoughtThreads.length === 0 && (
-              <EmptyState message="Your feed is empty. Follow some users to see their thoughts!" />
+              <EmptyState
+                emoji="💭"
+                title="Your feed is quiet"
+                message="Your feed is empty. Follow some users to see their thoughts!"
+                ctaLabel="Discover people ✨"
+                ctaHref="/users/all"
+              />
             )}
           </div>
           <PaginationNav
@@ -110,9 +118,7 @@ async function FeedPage({
         </main>
 
         <aside className="hidden lg:block lg:col-span-1">
-          <div className="sticky top-20 space-y-6">
-            {sidebar}
-          </div>
+          <div className="sticky top-20 space-y-6">{sidebar}</div>
         </aside>
       </div>
     </div>
@@ -121,28 +127,112 @@ async function FeedPage({
 
 function LandingPage() {
   return (
-    <>
-      <div className="font-sans min-h-screen text-gray-800 flex items-center justify-center">
-        <div className="container mx-auto max-w-2xl p-4 sm:p-6 text-center glass-effect glossy-effect bottom rounded-md shadow-fa-lg">
-          <h1
-            className="text-5xl font-bold"
-            style={{ textShadow: "2px 2px 4px rgba(0,0,0,0.1)" }}
+    <div className="font-sans min-h-screen flex items-center justify-center relative overflow-hidden">
+      {/* Ambient orbs */}
+      <div
+        className="orb"
+        style={{
+          width: 280,
+          height: 280,
+          background:
+            "radial-gradient(circle, #ffffff 0%, #87ceeb 60%, transparent 100%)",
+          top: "-80px",
+          left: "-60px",
+        }}
+      />
+      <div
+        className="orb"
+        style={{
+          width: 220,
+          height: 220,
+          background:
+            "radial-gradient(circle, #b2f5ea 0%, #48bb78 60%, transparent 100%)",
+          bottom: "-40px",
+          right: "5%",
+        }}
+      />
+      <div
+        className="orb"
+        style={{
+          width: 160,
+          height: 160,
+          background:
+            "radial-gradient(circle, #e0f2fe 0%, #38bdf8 60%, transparent 100%)",
+          top: "35%",
+          left: "65%",
+        }}
+      />
+
+      {/* Hero card */}
+      <div
+        className="container mx-auto max-w-lg p-4 sm:p-6 text-center relative z-10"
+        style={{
+          background: "rgba(255,255,255,0.28)",
+          backdropFilter: "blur(20px)",
+          WebkitBackdropFilter: "blur(20px)",
+          border: "1px solid rgba(255,255,255,0.55)",
+          borderRadius: "20px",
+          boxShadow:
+            "0 8px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6)",
+        }}
+      >
+        {/* Gloss sweep */}
+        <div
+          aria-hidden
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: "55%",
+            background:
+              "linear-gradient(180deg, rgba(255,255,255,0.38) 0%, transparent 100%)",
+            borderRadius: "20px 20px 0 0",
+            pointerEvents: "none",
+          }}
+        />
+
+        <h1
+          className="text-5xl font-bold relative"
+          style={{
+            textShadow:
+              "0 2px 4px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1)",
+          }}
+        >
+          Welcome to Thoughts
+        </h1>
+        <p className="text-muted-foreground mt-3 relative">
+          A federated social network for short-form thoughts.
+          <br />
+          Connect with the Fediverse.
+        </p>
+
+        <div className="mt-8 flex justify-center gap-4 relative">
+          <Button asChild className="px-7">
+            <Link href="/login">Login</Link>
+          </Button>
+          <Button asChild variant="secondary" className="px-7">
+            <Link href="/register">Register</Link>
+          </Button>
+        </div>
+
+        {/* Fediverse badge */}
+        <div className="mt-5 relative flex justify-center">
+          <span
+            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs text-muted-foreground"
+            style={{
+              background: "rgba(255,255,255,0.3)",
+              border: "1px solid rgba(255,255,255,0.5)",
+            }}
           >
-            Welcome to Thoughts
-          </h1>
-          <p className="text-muted-foreground mt-2">
-            Throwback to the golden age of microblogging.
-          </p>
-          <div className="mt-8 flex justify-center gap-4">
-            <Button asChild>
-              <Link href="/login">Login</Link>
-            </Button>
-            <Button variant="secondary" asChild>
-              <Link href="/register">Register</Link>
-            </Button>
-          </div>
+            <span
+              className="w-2 h-2 rounded-full bg-emerald-400 inline-block"
+              style={{ boxShadow: "0 0 4px #34d399" }}
+            />
+            Works with Mastodon, Pixelfed &amp; more
+          </span>
         </div>
       </div>
-    </>
+    </div>
   );
 }

thoughts-frontend/app/remote-actor/page.tsx

@@ -65,8 +65,11 @@ export default async function RemoteActorPage({
   }
 
   const actor = actorResult.value;
-  const posts =
-    postsResult.status === "fulfilled" ? postsResult.value.items : [];
+  const postsData = postsResult.status === "fulfilled" ? postsResult.value : null;
+  const posts = postsData?.items ?? [];
+  const totalPages = postsData
+    ? Math.ceil(postsData.total / postsData.per_page)
+    : 1;
   const me =
     meResult.status === "fulfilled" ? (meResult.value as Me | null) : null;
   const following =
@@ -77,7 +80,9 @@ export default async function RemoteActorPage({
     <RemoteUserProfile
       key={actor.url}
       actor={actor}
+      handle={handle}
       initialPosts={posts}
+      initialTotalPages={totalPages}
       me={me}
       initialFollowed={initialFollowed}
     />

thoughts-frontend/app/search/page.tsx

@@ -68,7 +68,7 @@ export default async function SearchPage({ searchParams }: SearchPageProps) {
               <RemoteUserCard actor={remoteActor} />
             </div>
           ) : (
-            <EmptyState message={`No user found at ${query}`} />
+            <EmptyState emoji="🔍" title="No results" message={`No user found at ${query}`} />
           )
         ) : results ? (
           <Tabs defaultValue="thoughts" className="w-full">
@@ -91,7 +91,7 @@ export default async function SearchPage({ searchParams }: SearchPageProps) {
             </TabsContent>
           </Tabs>
         ) : (
-          <EmptyState message="No results found or an error occurred." />
+          <EmptyState emoji="🔍" title="No results" message="No results found or an error occurred." />
         )}
       </main>
     </div>

thoughts-frontend/app/tags/[tagName]/page.tsx

@@ -67,7 +67,7 @@ export default async function TagPage({ params }: TagPageProps) {
           />
         ))}
         {thoughtThreads.length === 0 && (
-          <EmptyState message="No thoughts found for this tag." />
+          <EmptyState emoji="🏷" title="No thoughts here yet" message="No thoughts found for this tag." />
         )}
       </main>
     </div>

thoughts-frontend/app/users/[username]/page.tsx

@@ -53,8 +53,7 @@ import { FollowButton } from "@/components/follow-button";
 import { TopFriends } from "@/components/top-friends";
 import { Suspense } from "react";
 import { ProfileSkeleton } from "@/components/loading-skeleton";
-import { buildThoughtThreads } from "@/lib/utils";
-import { ThoughtThread } from "@/components/thought-thread";
+import { UserThoughtsList } from "@/components/user-thoughts-list";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -95,9 +94,11 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
   const user = userResult.value;
   const me = meResult.status === "fulfilled" ? (meResult.value as Me) : null;
 
-  const thoughts =
-    thoughtsResult.status === "fulfilled" ? thoughtsResult.value.items : [];
-  const thoughtThreads = buildThoughtThreads(thoughts);
+  const thoughtsData = thoughtsResult.status === "fulfilled" ? thoughtsResult.value : null;
+  const thoughts = thoughtsData?.items ?? [];
+  const totalPages = thoughtsData
+    ? Math.ceil(thoughtsData.total / thoughtsData.per_page)
+    : 1;
 
   const localFollowersCount =
     followersResult.status === "fulfilled"
@@ -194,7 +195,7 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
                   @{user.username}
                 </p>
                 {fediverseHandle && (
-                  <p className="text-xs text-muted-foreground/70 mt-0.5 font-mono select-all">
+                  <p className="text-xs text-muted-foreground/70 mt-0.5 font-mono select-all break-all">
                     {fediverseHandle}
                   </p>
                 )}
@@ -262,16 +263,12 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
               )}
             </TabsList>
             <TabsContent value="thoughts" className="space-y-4">
-              {thoughtThreads.map((thought) => (
-                <ThoughtThread
-                  key={thought.id}
-                  thought={thought}
-                  currentUser={me}
-                />
-              ))}
-              {thoughtThreads.length === 0 && (
-                <EmptyState message="This user hasn't posted any public thoughts yet." />
-              )}
+              <UserThoughtsList
+                username={username}
+                initialThoughts={thoughts}
+                totalPages={totalPages}
+                me={me}
+              />
             </TabsContent>
             {isOwnProfile && (
               <TabsContent value="federation">

thoughts-frontend/components/empty-state.tsx

@@ -1,12 +1,39 @@
+import Link from "next/link";
+
 interface EmptyStateProps {
-  message: string
-  className?: string
+  emoji?: string;
+  title?: string;
+  message: string;
+  ctaLabel?: string;
+  ctaHref?: string;
+  className?: string;
 }
 
-export function EmptyState({ message, className }: EmptyStateProps) {
+export function EmptyState({
+  emoji = "💭",
+  title,
+  message,
+  ctaLabel,
+  ctaHref,
+  className = "",
+}: EmptyStateProps) {
   return (
-    <p className={`text-center text-muted-foreground pt-8 ${className ?? ""}`}>
-      {message}
-    </p>
-  )
+    <div className={`flex flex-col items-center text-center py-10 gap-2 ${className}`}>
+      <span className="text-4xl animate-float-bob select-none" aria-hidden="true">
+        {emoji}
+      </span>
+      {title && (
+        <p className="font-bold text-base text-foreground text-shadow-sm">{title}</p>
+      )}
+      <p className="text-sm text-muted-foreground max-w-xs leading-relaxed">{message}</p>
+      {ctaLabel && ctaHref && (
+        <Link
+          href={ctaHref}
+          className="mt-2 inline-flex items-center gap-1.5 px-5 py-2 rounded-full text-sm font-bold text-white fa-gradient-blue shadow-fa-md glossy-effect relative overflow-hidden"
+        >
+          {ctaLabel}
+        </Link>
+      )}
+    </div>
+  );
 }

thoughts-frontend/components/follow-button.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useOptimistic } from "react"
+import { useOptimistic, useRef } from "react"
 import { followUser, unfollowUser } from "@/app/actions/social"
 import { Button } from "@/components/ui/button"
 import { toast } from "sonner"
@@ -11,31 +11,101 @@ interface FollowButtonProps {
   isInitiallyFollowing: boolean
 }
 
+const BURST_COLORS = ["#2563eb", "#06b6d4", "#10b981", "#f59e0b", "#a855f7", "#ef4444"]
+
+function burstParticles(canvas: HTMLCanvasElement) {
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return
+
+  const cx = canvas.width / 2
+  const cy = canvas.height / 2
+  const particles = Array.from({ length: 14 }, (_, i) => {
+    const angle = (i / 14) * Math.PI * 2
+    const speed = 2.5 + Math.random() * 2
+    return {
+      x: cx,
+      y: cy,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      r: 3 + Math.random() * 3,
+      color: BURST_COLORS[i % BURST_COLORS.length],
+      life: 1,
+    }
+  })
+
+  let rafId: number
+
+  function frame() {
+    if (!canvas.isConnected) {
+      cancelAnimationFrame(rafId)
+      return
+    }
+    ctx!.clearRect(0, 0, canvas.width, canvas.height)
+    let alive = false
+    for (const p of particles) {
+      p.x += p.vx
+      p.y += p.vy
+      p.vy += 0.08
+      p.life -= 0.03
+      if (p.life > 0) {
+        alive = true
+        ctx!.globalAlpha = p.life
+        ctx!.fillStyle = p.color
+        ctx!.beginPath()
+        ctx!.arc(p.x, p.y, p.r, 0, Math.PI * 2)
+        ctx!.fill()
+      }
+    }
+    ctx!.globalAlpha = 1
+    if (alive) {
+      rafId = requestAnimationFrame(frame)
+    }
+  }
+
+  rafId = requestAnimationFrame(frame)
+}
+
 export function FollowButton({ username, isInitiallyFollowing }: FollowButtonProps) {
   const [optimisticFollowing, setOptimisticFollowing] = useOptimistic(isInitiallyFollowing)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
 
   async function handleClick() {
     const next = !optimisticFollowing
     setOptimisticFollowing(next)
+
+    if (next && canvasRef.current) {
+      burstParticles(canvasRef.current)
+    }
+
     try {
       await (next ? followUser(username) : unfollowUser(username))
     } catch {
-      setOptimisticFollowing(!next) // revert
+      setOptimisticFollowing(!next)
       toast.error(`Failed to ${next ? "follow" : "unfollow"} user.`)
     }
   }
 
   return (
-    <Button
-      onClick={handleClick}
-      variant={optimisticFollowing ? "secondary" : "default"}
-      data-following={optimisticFollowing}
-    >
-      {optimisticFollowing ? (
-        <><UserMinus className="mr-2 h-4 w-4" /> Unfollow</>
-      ) : (
-        <><UserPlus className="mr-2 h-4 w-4" /> Follow</>
-      )}
-    </Button>
+    <div className="relative inline-block">
+      <canvas
+        ref={canvasRef}
+        width={160}
+        height={80}
+        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+        aria-hidden
+      />
+      <Button
+        onClick={handleClick}
+        variant={optimisticFollowing ? "secondary" : "default"}
+        className="relative rounded-full"
+        data-following={optimisticFollowing}
+      >
+        {optimisticFollowing ? (
+          <><UserMinus className="mr-2 h-4 w-4" /> Unfollow</>
+        ) : (
+          <><UserPlus className="mr-2 h-4 w-4" /> Follow</>
+        )}
+      </Button>
+    </div>
   )
 }

thoughts-frontend/components/header.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useAuth } from "@/hooks/use-auth";
+import Image from "next/image";
 import Link from "next/link";
 import { Button } from "./ui/button";
 import { UserNav } from "./user-nav";
@@ -10,25 +11,33 @@ export function Header() {
   const { token } = useAuth();
 
   return (
-    <header className="sticky top-0 z-50 flex justify-center w-full border-b border-primary/20 bg-background/80 glass-effect glossy-effect bottom rounded-none">
+    <header className="sticky top-0 z-50 flex justify-center w-full border-b border-white/20 bg-background/80 glass-effect glossy-effect bottom rounded-none shadow-fa-md">
       <div className="container flex h-14 items-center px-2">
-        <div className="flex gap-2">
-          <Link href="/" className="flex items-center gap-1">
-            <span className="hidden font-bold text-primary sm:inline-block">
-              Thoughts
-            </span>
-          </Link>
-          <MainNav />
-        </div>
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2 mr-4 shrink-0">
+          <Image
+            src="/icon.avif"
+            alt="Thoughts"
+            width={32}
+            height={32}
+            className="rounded-lg shadow-fa-sm"
+          />
+          <span className="hidden sm:inline-block font-bold text-primary text-shadow-sm">
+            Thoughts
+          </span>
+        </Link>
+
+        <MainNav />
+
         <div className="flex flex-1 items-center justify-end space-x-2">
           {token ? (
             <UserNav />
           ) : (
             <>
-              <Button asChild size="sm">
+              <Button asChild size="sm" variant="outline" className="rounded-full">
                 <Link href="/login">Login</Link>
               </Button>
-              <Button asChild size="sm">
+              <Button asChild size="sm" className="rounded-full">
                 <Link href="/register">Register</Link>
               </Button>
             </>

thoughts-frontend/components/popular-tags.tsx

@@ -2,21 +2,21 @@ import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { getPopularTags } from "@/lib/api";
-import { Hash } from "lucide-react";
 
 export async function PopularTags() {
   const tags = await getPopularTags().catch(() => []);
 
   if (tags.length === 0) {
     return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Popular Tags</CardTitle>
+      <Card className="p-4">
+        <CardHeader className="p-0 pb-2">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <span className="widget-icon widget-icon-blue">🏷</span>
+            Popular Tags
+          </CardTitle>
         </CardHeader>
-        <CardContent>
-          <p className="text-center text-muted-foreground">
-            No popular tags to display.
-          </p>
+        <CardContent className="p-0">
+          <p className="text-center text-sm text-muted-foreground py-4">No tags yet.</p>
         </CardContent>
       </Card>
     );
@@ -24,24 +24,20 @@ export async function PopularTags() {
 
   return (
     <Card className="p-4">
-      <CardHeader className="p-0 pb-2">
-        <CardTitle className="text-lg">Popular Tags</CardTitle>
+      <CardHeader className="p-0 pb-3">
+        <CardTitle className="text-lg flex items-center gap-2">
+          <span className="widget-icon widget-icon-blue">🏷</span>
+          Popular Tags
+        </CardTitle>
       </CardHeader>
       <CardContent className="flex flex-wrap gap-2 p-0">
-        {tags.map((tag) => (
+        {tags.map((tag, i) => (
           <Link href={`/tags/${tag}`} key={tag}>
-            <Badge
-              variant="secondary"
-              className="hover:shadow-lg transition-shadow text-shadow-sm cursor-pointer"
-            >
-              <Hash className="mr-1 h-3 w-3" />
-              {tag}
+            <Badge variant={i < 2 ? "trending" : "branded"}>
+              {i < 2 ? "🔥 " : "#"}{tag}
             </Badge>
           </Link>
         ))}
-        {tags.length === 0 && (
-          <p className="text-sm text-muted-foreground">No popular tags yet.</p>
-        )}
       </CardContent>
     </Card>
   );

thoughts-frontend/components/remote-user-card.tsx

@@ -18,6 +18,19 @@ interface RemoteUserCardProps {
   };
 }
 
+function resolveProfileHref(handle: string): string {
+  const apiDomain = process.env.NEXT_PUBLIC_API_URL
+    ? new URL(process.env.NEXT_PUBLIC_API_URL).hostname
+    : null;
+  const clean = handle.startsWith("@") ? handle.slice(1) : handle;
+  const atIdx = clean.indexOf("@");
+  const domain = atIdx !== -1 ? clean.slice(atIdx + 1) : null;
+  const username = atIdx !== -1 ? clean.slice(0, atIdx) : clean;
+  return apiDomain && domain === apiDomain
+    ? `/users/${username}`
+    : `/remote-actor?handle=@${clean}`;
+}
+
 export function RemoteUserCard({ actor }: RemoteUserCardProps) {
   const [followed, setFollowed] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -43,7 +56,7 @@ export function RemoteUserCard({ actor }: RemoteUserCardProps) {
   return (
     <div className="flex items-center justify-between p-4 border rounded-lg">
       <Link
-        href={`/users/@${actor.handle}`}
+        href={resolveProfileHref(actor.handle)}
         className="flex items-center gap-3 hover:opacity-80"
       >
         <UserAvatar src={actor.avatarUrl} alt={actor.displayName ?? actor.handle} />

thoughts-frontend/components/remote-user-profile/index.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { UserMinus, UserPlus } from "lucide-react";
-import { followUser, unfollowUser, RemoteActor, Thought, Me } from "@/lib/api";
+import { followUser, unfollowUser, getRemoteActorPosts, RemoteActor, Thought, Me } from "@/lib/api";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -14,14 +14,18 @@ import { Connections } from "./connections";
 
 interface RemoteUserProfileProps {
   actor: RemoteActor;
+  handle: string;
   initialPosts: Thought[];
+  initialTotalPages: number;
   me: Me | null;
   initialFollowed?: boolean;
 }
 
 export function RemoteUserProfile({
   actor,
+  handle,
   initialPosts,
+  initialTotalPages,
   me,
   initialFollowed = false,
 }: RemoteUserProfileProps) {
@@ -29,6 +33,24 @@ export function RemoteUserProfile({
   const [followLoading, setFollowLoading] = useState(false);
   const { token } = useAuth();
 
+  const [posts, setPosts] = useState<Thought[]>(initialPosts);
+  const [page, setPage] = useState(1);
+  const [totalPages] = useState(initialTotalPages);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const loadMore = async () => {
+    setLoadingMore(true);
+    try {
+      const result = await getRemoteActorPosts(handle, page + 1, token);
+      setPosts((prev) => [...prev, ...result.items]);
+      setPage((p) => p + 1);
+    } catch {
+      toast.error("Failed to load more posts.");
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
   const [followersActive, setFollowersActive] = useState(false);
   const [followingActive, setFollowingActive] = useState(false);
 
@@ -108,8 +130,20 @@ export function RemoteUserProfile({
             </TabsList>
 
             <TabsContent value="posts" className="space-y-4 mt-4">
-              {initialPosts.length > 0 ? (
-                <ThoughtList thoughts={initialPosts} currentUser={me} />
+              {posts.length > 0 ? (
+                <>
+                  <ThoughtList thoughts={posts} currentUser={me} />
+                  {page < totalPages && (
+                    <Button
+                      onClick={loadMore}
+                      disabled={loadingMore}
+                      variant="outline"
+                      className="w-full rounded-full"
+                    >
+                      {loadingMore ? "Loading…" : "Load more"}
+                    </Button>
+                  )}
+                </>
               ) : (
                 <Card className="flex items-center justify-center h-48">
                   <p className="text-center text-muted-foreground">

thoughts-frontend/components/thought-card.tsx

@@ -46,6 +46,18 @@ interface ThoughtCardProps {
   isReply?: boolean;
 }
 
+function renderWithHashtags(content: string) {
+  return content.split(/(#\w+)/g).map((part, i) =>
+    /^#\w+$/.test(part) ? (
+      <span key={i} className="text-primary font-medium">
+        {part}
+      </span>
+    ) : (
+      part
+    )
+  );
+}
+
 export function ThoughtCard({
   thought,
   currentUser,
@@ -54,6 +66,7 @@ export function ThoughtCard({
   const { author } = thought;
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [isReplyOpen, setIsReplyOpen] = useState(false);
+  const [deletingState, setDeletingState] = useState<"idle" | "shaking" | "fading">("idle");
   const { token } = useAuth();
   const timeAgo = formatDistanceToNow(new Date(thought.createdAt), {
     addSuffix: true,
@@ -62,14 +75,18 @@ export function ThoughtCard({
   const isAuthor = currentUser?.username === thought.author.username;
 
   const handleDelete = async () => {
+    setIsAlertOpen(false);
+    setDeletingState("shaking");
+    await new Promise((r) => setTimeout(r, 450));
+    setDeletingState("fading");
+    await new Promise((r) => setTimeout(r, 300));
     try {
       await deleteThought(thought.id);
-      toast.success("Thought deleted successfully.");
+      toast.success("Thought deleted.");
     } catch (error) {
       console.error("Failed to delete thought:", error);
+      setDeletingState("idle");
       toast.error("Failed to delete thought.");
-    } finally {
-      setIsAlertOpen(false);
     }
   };
 
@@ -115,7 +132,13 @@ export function ThoughtCard({
           </div>
         )}
       </div>
-      <Card className="mt-2">
+      <Card
+        className={cn(
+          "mt-2 transition-transform duration-200 hover:-translate-y-0.5 hover:shadow-fa-lg",
+          deletingState === "shaking" && "animate-shake",
+          deletingState === "fading" && "animate-fade-out pointer-events-none"
+        )}
+      >
         <CardHeader className="flex flex-row items-center justify-between space-y-0">
           <Link
             href={`/users/${author.username}`}
@@ -166,7 +189,7 @@ export function ThoughtCard({
         <CardContent>
           {thought.author.local ? (
             <p className="whitespace-pre-wrap break-words text-shadow-sm">
-              {thought.content}
+              {renderWithHashtags(thought.content)}
             </p>
           ) : (
             <div
@@ -185,6 +208,7 @@ export function ThoughtCard({
             <Button
               variant="ghost"
               size="sm"
+              className="rounded-full bg-primary/8 border border-primary/15 text-primary hover:bg-primary/15"
               onClick={() => setIsReplyOpen(!isReplyOpen)}
             >
               <MessageSquare className="mr-2 h-4 w-4" />
@@ -194,7 +218,7 @@ export function ThoughtCard({
         )}
 
         {isReplyOpen && (
-          <div className="border-t m-4 rounded-2xl border-border/50 bg-secondary/20 ">
+          <div className="animate-slide-down border-t m-4 rounded-2xl border-border/50 bg-secondary/20">
             <ThoughtForm
               replyToId={thought.id}
               onSuccess={() => setIsReplyOpen(false)}

thoughts-frontend/components/top-friends.tsx

@@ -17,12 +17,13 @@ export async function TopFriends({ username }: TopFriendsProps) {
 
   return (
     <Card id="top-friends" className="p-4">
-      <CardHeader id="top-friends__header" className="p-0 pb-2">
-        <CardTitle id="top-friends__title" className="text-lg text-shadow-md">
+      <CardHeader id="top-friends__header" className="p-0 pb-3">
+        <CardTitle id="top-friends__title" className="text-lg flex items-center gap-2">
+          <span className="widget-icon widget-icon-green">👥</span>
           Top Friends
         </CardTitle>
       </CardHeader>
-      <CardContent id="top-friends__content" className="p-0">
+      <CardContent id="top-friends__content" className="p-0 space-y-1">
         {friends.map((friend) => (
           <Link
             id={`top-friends__link-${friend.id}`}
@@ -30,12 +31,17 @@ export async function TopFriends({ username }: TopFriendsProps) {
             key={friend.id}
             className="flex items-center gap-3 py-2 px-2 -mx-2 rounded-lg hover:bg-accent/50 transition-colors"
           >
-            <UserAvatar src={friend.avatarUrl} alt={friend.username} />
-            <span
-              id={`top-friends__name-${friend.id}`}
-              className="text-xs truncate w-full font-medium text-shadow-sm"
-            >
-              {friend.displayName || friend.username}
+            <UserAvatar src={friend.avatarUrl} alt={friend.displayName || friend.username} />
+            <div className="flex flex-col min-w-0">
+              <span className="text-xs font-semibold truncate text-shadow-sm">
+                {friend.displayName || friend.username}
+              </span>
+              <span className="text-[10px] text-muted-foreground truncate">
+                @{friend.username}
+              </span>
+            </div>
+            <span className="ml-auto shrink-0 text-[10px] font-semibold px-2 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-600">
+              following
             </span>
           </Link>
         ))}

thoughts-frontend/components/ui/badge.tsx

@@ -12,10 +12,14 @@ const badgeVariants = cva(
         default:
           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80 glossy-effect bottom text-shadow-sm",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 glossy-effect bottom text-shadow-sm", // Use green for secondary
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 glossy-effect bottom text-shadow-sm",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 glossy-effect bottom text-shadow-sm",
         outline: "text-foreground glossy-effect bottom text-shadow-sm",
+        branded:
+          "border border-primary/20 bg-primary/8 text-primary font-semibold hover:bg-primary/15 hover:scale-105 transition-transform cursor-pointer",
+        trending:
+          "border border-red-300/30 bg-gradient-to-r from-orange-500/10 to-red-500/8 text-red-600 font-semibold hover:from-orange-500/18 hover:to-red-500/14 hover:scale-105 transition-transform cursor-pointer",
       },
     },
     defaultVariants: {

thoughts-frontend/components/ui/skeleton.tsx

@@ -1,13 +1,13 @@
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import { cn } from "@/lib/utils"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="skeleton"
-      className={cn("bg-muted/50 animate-pulse rounded-md", className)}
+      className={cn("rounded-md shimmer-aero", className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Skeleton };
+export { Skeleton }

thoughts-frontend/components/user-avatar.tsx

@@ -1,6 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { cn } from "@/lib/utils";
-import { User } from "lucide-react";
 
 interface UserAvatarProps {
   src?: string | null;
@@ -9,8 +8,10 @@ interface UserAvatarProps {
 }
 
 export function UserAvatar({ src, alt, className }: UserAvatarProps) {
+  const initial = alt?.trim()[0]?.toUpperCase() ?? "?";
+
   return (
-    <Avatar className={cn("border-2 border-primary/50 shadow-md", className)}>
+    <Avatar className={cn("avatar-gradient", className)}>
       {src && (
         <AvatarImage
           className="object-cover object-center"
@@ -18,8 +19,8 @@ export function UserAvatar({ src, alt, className }: UserAvatarProps) {
           alt={alt ?? "User avatar"}
         />
       )}
-      <AvatarFallback>
-        <User className="h-5 w-5" />
+      <AvatarFallback className="avatar-gradient text-white font-bold text-sm">
+        {initial}
       </AvatarFallback>
     </Avatar>
   );

thoughts-frontend/components/user-thoughts-list.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+import { getUserThoughts, Me, Thought } from "@/lib/api";
+import { ThoughtThread } from "@/components/thought-thread";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/empty-state";
+import { buildThoughtThreads } from "@/lib/utils";
+import { toast } from "sonner";
+import { useAuth } from "@/hooks/use-auth";
+
+interface UserThoughtsListProps {
+  username: string;
+  initialThoughts: Thought[];
+  totalPages: number;
+  me: Me | null;
+}
+
+export function UserThoughtsList({
+  username,
+  initialThoughts,
+  totalPages,
+  me,
+}: UserThoughtsListProps) {
+  const [thoughts, setThoughts] = useState<Thought[]>(initialThoughts);
+  const [page, setPage] = useState(1);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const { token } = useAuth();
+
+  const thoughtThreads = buildThoughtThreads(thoughts);
+
+  const loadMore = async () => {
+    setLoadingMore(true);
+    try {
+      const result = await getUserThoughts(username, token, page + 1);
+      setThoughts((prev) => [...prev, ...result.items]);
+      setPage((p) => p + 1);
+    } catch {
+      toast.error("Failed to load more thoughts.");
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  if (thoughtThreads.length === 0) {
+    return (
+      <EmptyState
+        emoji="💭"
+        title="Nothing here yet"
+        message="This user hasn't posted any public thoughts yet."
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {thoughtThreads.map((thought) => (
+        <ThoughtThread key={thought.id} thought={thought} currentUser={me} />
+      ))}
+      {page < totalPages && (
+        <Button
+          onClick={loadMore}
+          disabled={loadingMore}
+          variant="outline"
+          className="w-full rounded-full"
+        >
+          {loadingMore ? "Loading…" : "Load more"}
+        </Button>
+      )}
+    </div>
+  );
+}

thoughts-frontend/components/users-count.tsx

@@ -1,68 +1,57 @@
-import { Link } from "lucide-react";
 import {
   Card,
   CardHeader,
   CardTitle,
   CardContent,
-  CardDescription,
 } from "@/components/ui/card";
 import { getAllUsersCount } from "@/lib/api";
 
 export async function UsersCount() {
   const usersCount = await getAllUsersCount().catch(() => null);
 
-  if (usersCount === null) {
-    return (
-      <Card className="p-4">
-        <CardHeader className="p-0 pb-2">
-          <CardTitle className="text-lg text-shadow-md">Users Count</CardTitle>
-          <CardDescription>
-            Total number of registered users on Thoughts.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="text-muted-foreground text-sm text-center py-4">
-            Could not load users count.
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  if (usersCount.count === 0) {
-    return (
-      <Card className="p-4">
-        <CardHeader className="p-0 pb-2">
-          <CardTitle className="text-lg text-shadow-md">Users Count</CardTitle>
-          <CardDescription>
-            Total number of registered users on Thoughts.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="text-muted-foreground text-sm text-center py-4">
-            No registered users yet. Be the first to{" "}
-            <Link href="/signup" className="text-primary hover:underline">
-              sign up
-            </Link>
-            !
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
+  const count = usersCount?.count ?? null;
 
   return (
     <Card className="p-4">
-      <CardHeader className="p-0 pb-2">
-        <CardTitle className="text-lg text-shadow-md">Users Count</CardTitle>
-        <CardDescription>
-          Total number of registered users on Thoughts.
-        </CardDescription>
+      <CardHeader className="p-0 pb-3">
+        <CardTitle className="text-lg flex items-center gap-2">
+          <span className="widget-icon widget-icon-purple">✨</span>
+          Community
+        </CardTitle>
       </CardHeader>
-      <CardContent>
-        <div className="text-muted-foreground text-sm text-center py-4">
-          {usersCount.count} registered users.
-        </div>
+      <CardContent className="p-0">
+        {count === null ? (
+          <p className="text-sm text-muted-foreground text-center py-2">
+            Could not load member count.
+          </p>
+        ) : count === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-2">
+            Be the first to join!
+          </p>
+        ) : (
+          <div
+            className="rounded-xl p-3 text-center glossy-effect relative overflow-hidden"
+            style={{
+              background: "rgba(255,255,255,0.4)",
+              border: "1px solid rgba(255,255,255,0.6)",
+            }}
+          >
+            <div
+              className="text-3xl font-extrabold leading-none"
+              style={{
+                background: "linear-gradient(135deg, #2563eb, #06b6d4)",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
+                backgroundClip: "text",
+              }}
+            >
+              {count}
+            </div>
+            <div className="text-[10px] uppercase tracking-widest text-muted-foreground mt-1 font-semibold">
+              members
+            </div>
+          </div>
+        )}
       </CardContent>
     </Card>
   );

thoughts-frontend/lib/api.ts

@@ -343,9 +343,9 @@ export const getFeed = (token: string, page: number = 1, pageSize: number = 20)
     token
   );
 
-export const getUserThoughts = (username: string, token: string | null) =>
+export const getUserThoughts = (username: string, token: string | null, page = 1) =>
   apiFetch(
-    `/users/${username}/thoughts`,
+    `/users/${username}/thoughts?page=${page}`,
     { next: { tags: [`profile:${username}`] } },
     z.object({ items: z.array(ThoughtSchema), total: z.number(), page: z.number(), per_page: z.number() }),
     token