feat: improve UX across all listing pages and homepage

- Make model/video cards fully clickable on homepage, models, videos, magazine, and tags pages
- Replace inline blob divs with SexyBackground component on magazine and play pages
- Replace magazine hero section with PageHero component for consistency
- Remove redundant action buttons from cards (cards are now the link targets)
- Fix nested anchor/button invalid HTML in magazine featured article
- Convert inner overlay anchors to aria-hidden divs to avoid nested <a> elements
- Add bg-muted skeleton placeholder to all card images
- Update magazine pagination to smart numbered style with ellipsis (matching videos/models)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/routes/+page.svelte

@@ -5,6 +5,7 @@
   import { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
   import { formatVideoDuration } from "$lib/utils.js";
+  import SexyBackground from "$lib/components/background/background.svelte";
 
   const { data } = $props();
 </script>
@@ -12,11 +13,10 @@
 <Meta title={$_("home.hero.title")} description={$_("home.hero.description")} />
 
 <!-- Hero Section -->
-<section class="relative min-h-[70vh] flex items-center justify-center overflow-hidden">
+<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
-  <!-- Background Gradient -->
   <div class="absolute inset-0 bg-gradient-to-br from-primary/20 via-accent/10 to-background"></div>
+  <SexyBackground />
 
-  <!-- Content -->
   <div class="relative z-10 container mx-auto px-4 text-center">
     <div class="max-w-5xl mx-auto space-y-12">
       <h1
@@ -47,14 +47,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Floating Elements -->
-  <div
-    class="absolute top-20 left-10 w-20 h-20 bg-primary/20 rounded-full blur-xl animate-pulse"
-  ></div>
-  <div
-    class="absolute bottom-20 right-10 w-32 h-32 bg-accent/20 rounded-full blur-xl animate-pulse delay-1000"
-  ></div>
 </section>
 
 <!-- Featured Models -->
@@ -71,40 +63,22 @@
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl mx-auto">
       {#each data.models as model (model.slug)}
-        <Card
+        <a href="/models/{model.slug}" class="block group">
-          class="p-0 group hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
+          <Card
-        >
+            class="p-0 h-full hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
-          <CardContent class="p-6 text-center">
+          >
-            <div class="relative mb-4">
+            <CardContent class="p-6 text-center">
-              <img
+              <div class="relative mb-4">
-                src={getAssetUrl(model.avatar, "thumbnail")}
+                <img
-                alt={model.artist_name}
+                  src={getAssetUrl(model.avatar, "thumbnail")}
-                class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all"
+                  alt={model.artist_name}
-              />
+                  class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all bg-muted"
-              <!-- <div
+                />
-                class="absolute -bottom-2 -right-2 bg-primary text-primary-foreground rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold"
-              >
-                <HeartIcon class="w-4 h-4 fill-current" />
-              </div> -->
-            </div>
-            <h3 class="font-semibold text-lg mb-2">{model.artist_name}</h3>
-            <!-- <div
-              class="flex items-center justify-center gap-4 text-sm text-muted-foreground"
-            >
-              <div class="flex items-center gap-1">
-                <StarIcon class="w-4 h-4 text-yellow-500 fill-current" />
-                {model.rating}
               </div>
-              <div>{model.videos} {$_("home.featured_models.videos")}</div>
+              <h3 class="font-semibold text-lg group-hover:text-primary transition-colors">{model.artist_name}</h3>
-            </div> -->
+            </CardContent>
-            <Button
+          </Card>
-              variant="ghost"
+        </a>
-              size="sm"
-              class="mt-4 w-full group-hover:bg-primary/10"
-              href="/models/{model.slug}">{$_("home.featured_models.view_profile")}</Button
-            >
-          </CardContent>
-        </Card>
       {/each}
     </div>
   </div>
@@ -122,50 +96,42 @@
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
       {#each data.videos as video (video.slug)}
-        <Card
+        <a href="/videos/{video.slug}" class="block group">
-          class="p-0 group hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
+          <Card
-        >
+            class="p-0 h-full hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
-          <div class="relative">
+          >
-            <img
+            <div class="relative">
-              src={getAssetUrl(video.image, "preview")}
+              <img
-              alt={video.title}
+                src={getAssetUrl(video.image, "preview")}
-              class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
+                alt={video.title}
-            />
+                class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
-            <div
+              />
-              class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent group-hover:scale-105 transition-transform duration-300"
+              <div
-            ></div>
+                class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent group-hover:scale-105 transition-transform duration-300"
-            <div class="absolute bottom-2 left-2 text-white text-sm font-medium">
+              ></div>
-              {#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
+              <div class="absolute bottom-2 left-2 text-white text-sm font-medium">
-            </div>
+                {#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
-            <!-- <div
+              </div>
-              class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-full"
+              <div
-            >
+                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-              {video.views}
+                aria-hidden="true"
-              {$_("home.trending.views")}
-            </div> -->
-            <div
-              class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-            >
-              <a
-                class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center"
-                href="/videos/{video.slug}"
-                aria-label={video.title}
               >
-                <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
+                <div class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center">
-              </a>
+                  <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
+                </div>
+              </div>
             </div>
-          </div>
+            <CardContent class="px-4 pb-4 pt-0">
-          <CardContent class="px-4 pb-4 pt-0">
+              <h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
-            <h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
+                {video.title}
-              {video.title}
+              </h3>
-            </h3>
+              <div class="flex items-center gap-2 text-sm text-muted-foreground">
-
+                <span class="icon-[ri--fire-line] w-4 h-4"></span>
-            <div class="flex items-center gap-2 text-sm text-muted-foreground">
+                {$_("home.trending.trending")}
-              <span class="icon-[ri--fire-line] w-4 h-4"></span>
+              </div>
-              {$_("home.trending.trending")}
+            </CardContent>
-            </div>
+          </Card>
-          </CardContent>
+        </a>
-        </Card>
       {/each}
     </div>
   </div>

packages/frontend/src/routes/magazine/+page.svelte

@@ -11,6 +11,8 @@
   import { getAssetUrl } from "$lib/api";
   import { calcReadingTime } from "$lib/utils.js";
   import Meta from "$lib/components/meta/meta.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
+  import PageHero from "$lib/components/page-hero/page-hero.svelte";
 
   const timeAgo = new TimeAgo("en");
   const { data } = $props();
@@ -48,6 +50,21 @@
   }
 
   const totalPages = $derived(Math.ceil(data.total / data.limit));
+
+  const pageNumbers = $derived(() => {
+    const pages: (number | -1)[] = [];
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+    } else {
+      pages.push(1);
+      if (data.page > 3) pages.push(-1);
+      for (let i = Math.max(2, data.page - 1); i <= Math.min(totalPages - 1, data.page + 1); i++)
+        pages.push(i);
+      if (data.page < totalPages - 2) pages.push(-1);
+      pages.push(totalPages);
+    }
+    return pages;
+  });
 </script>
 
 <Meta title={$_("magazine.title")} description={$_("magazine.description")} />
@@ -55,109 +72,80 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <!-- Global Plasma Background -->
+  <SexyBackground />
-  <div class="absolute inset-0 pointer-events-none">
-    <div
-      class="absolute top-40 left-1/4 w-80 h-80 bg-gradient-to-r from-primary/16 via-accent/20 to-primary/12 rounded-full blur-3xl animate-blob-slow"
-    ></div>
-    <div
-      class="absolute bottom-40 right-1/4 w-96 h-96 bg-gradient-to-r from-accent/16 via-primary/20 to-accent/12 rounded-full blur-3xl animate-blob-slow animation-delay-5000"
-    ></div>
-    <div
-      class="absolute top-1/3 right-1/3 w-64 h-64 bg-gradient-to-r from-primary/14 via-accent/18 to-primary/10 rounded-full blur-2xl animate-blob-reverse animation-delay-2500"
-    ></div>
-  </div>
 
-  <section class="relative py-20 overflow-hidden">
+  <PageHero title={$_("magazine.title")} description={$_("magazine.description")}>
-    <div
+    <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
-      class="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/5 to-background"
+      <!-- Search -->
-    ></div>
+      <div class="relative flex-1">
-    <div class="relative container mx-auto px-4 text-center">
+        <span
-      <div class="max-w-5xl mx-auto">
+          class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
-        <h1
+        ></span>
-          class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
+        <Input
-        >
+          placeholder={$_("magazine.search_placeholder")}
-          {$_("magazine.title")}
+          value={searchValue}
-        </h1>
+          oninput={(e) => {
-        <p
+            searchValue = (e.target as HTMLInputElement).value;
-          class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
+            debounceSearch(searchValue);
-        >
+          }}
-          {$_("magazine.description")}
+          class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
-        </p>
+        />
-        <!-- Filters -->
-        <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
-          <!-- Search -->
-          <div class="relative flex-1">
-            <span
-              class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
-            ></span>
-            <Input
-              placeholder={$_("magazine.search_placeholder")}
-              value={searchValue}
-              oninput={(e) => {
-                searchValue = (e.target as HTMLInputElement).value;
-                debounceSearch(searchValue);
-              }}
-              class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
-            />
-          </div>
-
-          <!-- Category Filter -->
-          <Select
-            type="single"
-            value={data.category ?? "all"}
-            onValueChange={(v) => v && setParam("category", v)}
-          >
-            <SelectTrigger
-              class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
-            >
-              <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
-              {!data.category
-                ? $_("magazine.categories.all")
-                : data.category === "photography"
-                  ? $_("magazine.categories.photography")
-                  : data.category === "production"
-                    ? $_("magazine.categories.production")
-                    : data.category === "interview"
-                      ? $_("magazine.categories.interview")
-                      : data.category === "psychology"
-                        ? $_("magazine.categories.psychology")
-                        : data.category === "trends"
-                          ? $_("magazine.categories.trends")
-                          : $_("magazine.categories.spotlight")}
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{$_("magazine.categories.all")}</SelectItem>
-              <SelectItem value="photography">{$_("magazine.categories.photography")}</SelectItem>
-              <SelectItem value="production">{$_("magazine.categories.production")}</SelectItem>
-              <SelectItem value="interview">{$_("magazine.categories.interview")}</SelectItem>
-              <SelectItem value="psychology">{$_("magazine.categories.psychology")}</SelectItem>
-              <SelectItem value="trends">{$_("magazine.categories.trends")}</SelectItem>
-              <SelectItem value="spotlight">{$_("magazine.categories.spotlight")}</SelectItem>
-            </SelectContent>
-          </Select>
-
-          <!-- Sort -->
-          <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
-            <SelectTrigger
-              class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
-            >
-              {data.sort === "featured"
-                ? $_("magazine.sort.featured")
-                : data.sort === "name"
-                  ? $_("magazine.sort.name")
-                  : $_("magazine.sort.recent")}
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="recent">{$_("magazine.sort.recent")}</SelectItem>
-              <SelectItem value="featured">{$_("magazine.sort.featured")}</SelectItem>
-              <SelectItem value="name">{$_("magazine.sort.name")}</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
       </div>
+
+      <!-- Category Filter -->
+      <Select
+        type="single"
+        value={data.category ?? "all"}
+        onValueChange={(v) => v && setParam("category", v)}
+      >
+        <SelectTrigger
+          class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
+        >
+          <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
+          {!data.category
+            ? $_("magazine.categories.all")
+            : data.category === "photography"
+              ? $_("magazine.categories.photography")
+              : data.category === "production"
+                ? $_("magazine.categories.production")
+                : data.category === "interview"
+                  ? $_("magazine.categories.interview")
+                  : data.category === "psychology"
+                    ? $_("magazine.categories.psychology")
+                    : data.category === "trends"
+                      ? $_("magazine.categories.trends")
+                      : $_("magazine.categories.spotlight")}
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">{$_("magazine.categories.all")}</SelectItem>
+          <SelectItem value="photography">{$_("magazine.categories.photography")}</SelectItem>
+          <SelectItem value="production">{$_("magazine.categories.production")}</SelectItem>
+          <SelectItem value="interview">{$_("magazine.categories.interview")}</SelectItem>
+          <SelectItem value="psychology">{$_("magazine.categories.psychology")}</SelectItem>
+          <SelectItem value="trends">{$_("magazine.categories.trends")}</SelectItem>
+          <SelectItem value="spotlight">{$_("magazine.categories.spotlight")}</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <!-- Sort -->
+      <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
+        <SelectTrigger
+          class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
+        >
+          {data.sort === "featured"
+            ? $_("magazine.sort.featured")
+            : data.sort === "name"
+              ? $_("magazine.sort.name")
+              : $_("magazine.sort.recent")}
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="recent">{$_("magazine.sort.recent")}</SelectItem>
+          <SelectItem value="featured">{$_("magazine.sort.featured")}</SelectItem>
+          <SelectItem value="name">{$_("magazine.sort.name")}</SelectItem>
+        </SelectContent>
+      </Select>
     </div>
-  </section>
+  </PageHero>
 
   <div class="container mx-auto px-4 py-12">
     <!-- Featured Article -->
@@ -187,9 +175,7 @@
               </span>
             </div>
             <h2 class="text-2xl md:text-3xl font-bold mb-4 hover:text-primary transition-colors">
-              <button class="text-left">
+              <a href="/magazine/{featuredArticle.slug}">{featuredArticle.title}</a>
-                <a href="/article/{featuredArticle.slug}">{featuredArticle.title}</a>
-              </button>
             </h2>
             <p class="text-muted-foreground mb-6 text-lg leading-relaxed">
               {featuredArticle.excerpt}
@@ -229,100 +215,83 @@
     <!-- Articles Grid -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       {#each data.items as article (article.slug)}
-        <Card
+        <a href="/magazine/{article.slug}" class="block group">
-          class="p-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
+          <Card
-        >
+            class="p-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
-          <div class="relative">
+          >
-            <img
+            <div class="relative">
-              src={getAssetUrl(article.image, "preview")}
+              <img
-              alt={article.title}
+                src={getAssetUrl(article.image, "preview")}
-              class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
+                alt={article.title}
-            />
+                class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
-            <div
+              />
-              class="absolute group-hover:scale-105 transition-transform inset-0 bg-gradient-to-t from-black/40 to-transparent duration-300"
-            ></div>
-
-            <!-- Category Badge -->
-            <div
-              class="absolute top-3 left-3 bg-primary/90 text-white text-xs px-2 py-1 rounded-full capitalize"
-            >
-              {article.category}
-            </div>
-
-            <!-- Featured Badge -->
-            {#if article.featured}
               <div
-                class="absolute top-3 right-3 bg-gradient-to-r from-primary to-accent text-white text-xs px-2 py-1 rounded-full"
+                class="absolute group-hover:scale-105 transition-transform inset-0 bg-gradient-to-t from-black/40 to-transparent duration-300"
+              ></div>
+
+              <!-- Category Badge -->
+              <div
+                class="absolute top-3 left-3 bg-primary/90 text-white text-xs px-2 py-1 rounded-full capitalize"
               >
-                {$_("magazine.featured")}
+                {article.category}
               </div>
-            {/if}
 
-            <!-- Views -->
+              <!-- Featured Badge -->
-            <!-- <div
+              {#if article.featured}
-              class="absolute bottom-3 right-3 text-white text-sm flex items-center gap-1"
+                <div
-            >
+                  class="absolute top-3 right-3 bg-gradient-to-r from-primary to-accent text-white text-xs px-2 py-1 rounded-full"
-              <TrendingUpIcon class="w-4 h-4" />
-              {article.views}
-            </div> -->
-          </div>
-
-          <CardContent class="p-6">
-            <div class="mb-4">
-              <h3
-                class="font-semibold text-lg mb-2 group-hover:text-primary transition-colors line-clamp-2"
-              >
-                <a href="/magazine/{article.slug}">{article.title}</a>
-              </h3>
-              <p class="text-muted-foreground text-sm line-clamp-3 leading-relaxed">
-                {article.excerpt}
-              </p>
-            </div>
-
-            <!-- Tags -->
-            <div class="flex flex-wrap gap-2 mb-4">
-              {#each (article.tags ?? []).slice(0, 3) as tag (tag)}
-                <a
-                  class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full"
-                  href="/tags/{tag}"
                 >
-                  #{tag}
+                  {$_("magazine.featured")}
-                </a>
+                </div>
-              {/each}
+              {/if}
             </div>
 
-            <!-- Author & Meta -->
+            <CardContent class="p-6">
-            <div class="flex items-center justify-between">
+              <div class="mb-4">
-              <div class="flex items-center gap-2">
+                <h3
-                <img
+                  class="font-semibold text-lg mb-2 group-hover:text-primary transition-colors line-clamp-2"
-                  src={getAssetUrl(article.author?.avatar, "mini")}
+                >
-                  alt={article.author?.artist_name}
+                  {article.title}
-                  class="w-8 h-8 rounded-full object-cover"
+                </h3>
-                />
+                <p class="text-muted-foreground text-sm line-clamp-3 leading-relaxed">
-                <div>
+                  {article.excerpt}
-                  <p class="text-sm font-medium">{article.author?.artist_name}</p>
+                </p>
-                  <div class="flex items-center gap-2 text-xs text-muted-foreground">
+              </div>
-                    <span class="icon-[ri--calendar-line] w-4 h-4"></span>
+
-                    {timeAgo.format(new Date(article.publish_date))}
+              <!-- Tags -->
+              <div class="flex flex-wrap gap-2 mb-4">
+                {#each (article.tags ?? []).slice(0, 3) as tag (tag)}
+                  <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
+                    #{tag}
+                  </span>
+                {/each}
+              </div>
+
+              <!-- Author & Meta -->
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <img
+                    src={getAssetUrl(article.author?.avatar, "mini")}
+                    alt={article.author?.artist_name}
+                    class="w-8 h-8 rounded-full object-cover bg-muted"
+                  />
+                  <div>
+                    <p class="text-sm font-medium">{article.author?.artist_name}</p>
+                    <div class="flex items-center gap-2 text-xs text-muted-foreground">
+                      <span class="icon-[ri--calendar-line] w-4 h-4"></span>
+                      {timeAgo.format(new Date(article.publish_date))}
+                    </div>
                   </div>
                 </div>
+                <div class="text-xs text-muted-foreground">
+                  {$_("magazine.read_time", {
+                    values: { time: calcReadingTime(article.content) },
+                  })}
+                </div>
               </div>
-              <div class="text-xs text-muted-foreground">
+            </CardContent>
-                {$_("magazine.read_time", {
+          </Card>
-                  values: { time: calcReadingTime(article.content) },
+        </a>
-                })}
-              </div>
-            </div>
-
-            <!-- Read More Button -->
-            <Button
-              variant="outline"
-              size="sm"
-              class="w-full mt-4 border-primary/20 hover:bg-primary/10"
-              href="/magazine/{article.slug}">{$_("magazine.read_article")}</Button
-            >
-          </CardContent>
-        </Card>
       {/each}
     </div>
 
@@ -339,32 +308,40 @@
 
     <!-- Pagination -->
     {#if totalPages > 1}
-      <div class="flex items-center justify-between mt-10">
+      <div class="flex flex-col items-center gap-3 mt-10">
-        <span class="text-sm text-muted-foreground">
+        <div class="flex items-center gap-1">
-          {$_("common.page_of", { values: { page: data.page, total: totalPages } })}
-          &nbsp;·&nbsp;
-          {$_("common.total_results", { values: { total: data.total } })}
-        </span>
-        <div class="flex gap-2">
           <Button
             variant="outline"
             size="sm"
             disabled={data.page <= 1}
             onclick={() => goToPage(data.page - 1)}
             class="border-primary/20 hover:bg-primary/10"
-          >
+          >{$_("common.previous")}</Button>
-            {$_("common.previous")}
+          {#each pageNumbers() as p}
-          </Button>
+            {#if p === -1}
+              <span class="px-2 text-muted-foreground select-none">…</span>
+            {:else}
+              <Button
+                variant={p === data.page ? "default" : "outline"}
+                size="sm"
+                onclick={() => goToPage(p)}
+                class={p === data.page
+                  ? "bg-gradient-to-r from-primary to-accent min-w-9"
+                  : "border-primary/20 hover:bg-primary/10 min-w-9"}
+              >{p}</Button>
+            {/if}
+          {/each}
           <Button
             variant="outline"
             size="sm"
             disabled={data.page >= totalPages}
             onclick={() => goToPage(data.page + 1)}
             class="border-primary/20 hover:bg-primary/10"
-          >
+          >{$_("common.next")}</Button>
-            {$_("common.next")}
-          </Button>
         </div>
+        <p class="text-sm text-muted-foreground">
+          {$_("common.total_results", { values: { total: data.total } })}
+        </p>
       </div>
     {/if}
   </div>

packages/frontend/src/routes/models/+page.svelte

@@ -44,6 +44,21 @@
   }
 
   const totalPages = $derived(Math.ceil(data.total / data.limit));
+
+  const pageNumbers = $derived(() => {
+    const pages: (number | -1)[] = [];
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+    } else {
+      pages.push(1);
+      if (data.page > 3) pages.push(-1);
+      for (let i = Math.max(2, data.page - 1); i <= Math.min(totalPages - 1, data.page + 1); i++)
+        pages.push(i);
+      if (data.page < totalPages - 2) pages.push(-1);
+      pages.push(totalPages);
+    }
+    return pages;
+  });
 </script>
 
 <Meta title={$_("models.title")} description={$_("models.description")} />
@@ -97,7 +112,7 @@
             <img
               src={getAssetUrl(model.avatar, "preview")}
               alt={model.artist_name}
-              class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300"
+              class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
             />
 
             <!-- Online Status -->
@@ -183,31 +198,40 @@
 
     <!-- Pagination -->
     {#if totalPages > 1}
-      <div class="flex items-center justify-between mt-10">
+      <div class="flex flex-col items-center gap-3 mt-10">
-        <span class="text-sm text-muted-foreground">
+        <div class="flex items-center gap-1">
-          {$_("common.page_of", { values: { page: data.page, total: totalPages } })}
-          &nbsp;·&nbsp;
-          {$_("common.total_results", { values: { total: data.total } })}
-        </span>
-        <div class="flex gap-2">
           <Button
             variant="outline"
             size="sm"
             disabled={data.page <= 1}
             onclick={() => goToPage(data.page - 1)}
             class="border-primary/20 hover:bg-primary/10"
-          >
+          >{$_("common.previous")}</Button>
-            {$_("common.previous")}
+          {#each pageNumbers() as p}
-          </Button>
+            {#if p === -1}
+              <span class="px-2 text-muted-foreground select-none">…</span>
+            {:else}
+              <Button
+                variant={p === data.page ? "default" : "outline"}
+                size="sm"
+                onclick={() => goToPage(p)}
+                class={p === data.page
+                  ? "bg-gradient-to-r from-primary to-accent min-w-9"
+                  : "border-primary/20 hover:bg-primary/10 min-w-9"}
+              >{p}</Button>
+            {/if}
+          {/each}
           <Button
             variant="outline"
             size="sm"
             disabled={data.page >= totalPages}
             onclick={() => goToPage(data.page + 1)}
             class="border-primary/20 hover:bg-primary/10"
-          >
+          >{$_("common.next")}</Button>
-            {$_("common.next")}
+        </div>
-          </Button>
+        <p class="text-sm text-muted-foreground">
+          {$_("common.total_results", { values: { total: data.total } })}
+        </p>
         </div>
       </div>
     {/if}

packages/frontend/src/routes/play/+page.svelte

@@ -17,6 +17,7 @@
   import DeviceMappingDialog from "./components/device-mapping-dialog.svelte";
   import type { BluetoothDevice, RecordedEvent, DeviceInfo } from "$lib/types";
   import { toast } from "svelte-sonner";
+  import SexyBackground from "$lib/components/background/background.svelte";
 
   const client = new ButtplugClient("Sexy.Art");
   let connected = $state(client.connected);
@@ -378,18 +379,7 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <!-- Global Plasma Background -->
+  <SexyBackground />
-  <div class="absolute inset-0 pointer-events-none">
-    <div
-      class="absolute top-40 left-1/4 w-80 h-80 bg-gradient-to-r from-primary/16 via-accent/20 to-primary/12 rounded-full blur-3xl animate-blob-slow"
-    ></div>
-    <div
-      class="absolute bottom-40 right-1/4 w-96 h-96 bg-gradient-to-r from-accent/16 via-primary/20 to-accent/12 rounded-full blur-3xl animate-blob-slow animation-delay-5000"
-    ></div>
-    <div
-      class="absolute top-1/3 right-1/3 w-64 h-64 bg-gradient-to-r from-primary/14 via-accent/18 to-primary/10 rounded-full blur-2xl animate-blob-reverse animation-delay-2500"
-    ></div>
-  </div>
 
   <div class="container mx-auto py-20 relative px-4">
     <div class="max-w-4xl mx-auto">

packages/frontend/src/routes/videos/+page.svelte

@@ -47,6 +47,21 @@
   }
 
   const totalPages = $derived(Math.ceil(data.total / data.limit));
+
+  const pageNumbers = $derived(() => {
+    const pages: (number | -1)[] = [];
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+    } else {
+      pages.push(1);
+      if (data.page > 3) pages.push(-1);
+      for (let i = Math.max(2, data.page - 1); i <= Math.min(totalPages - 1, data.page + 1); i++)
+        pages.push(i);
+      if (data.page < totalPages - 2) pages.push(-1);
+      pages.push(totalPages);
+    }
+    return pages;
+  });
 </script>
 
 <Meta title={$_("videos.title")} description={$_("videos.description")} />
@@ -134,7 +149,7 @@
             <img
               src={getAssetUrl(video.image, "preview")}
               alt={video.title}
-              class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
+              class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
             />
 
             <!-- Overlay Gradient -->
@@ -241,32 +256,40 @@
 
     <!-- Pagination -->
     {#if totalPages > 1}
-      <div class="flex items-center justify-between mt-10">
+      <div class="flex flex-col items-center gap-3 mt-10">
-        <span class="text-sm text-muted-foreground">
+        <div class="flex items-center gap-1">
-          {$_("common.page_of", { values: { page: data.page, total: totalPages } })}
-          &nbsp;·&nbsp;
-          {$_("common.total_results", { values: { total: data.total } })}
-        </span>
-        <div class="flex gap-2">
           <Button
             variant="outline"
             size="sm"
             disabled={data.page <= 1}
             onclick={() => goToPage(data.page - 1)}
             class="border-primary/20 hover:bg-primary/10"
-          >
+          >{$_("common.previous")}</Button>
-            {$_("common.previous")}
+          {#each pageNumbers() as p}
-          </Button>
+            {#if p === -1}
+              <span class="px-2 text-muted-foreground select-none">…</span>
+            {:else}
+              <Button
+                variant={p === data.page ? "default" : "outline"}
+                size="sm"
+                onclick={() => goToPage(p)}
+                class={p === data.page
+                  ? "bg-gradient-to-r from-primary to-accent min-w-9"
+                  : "border-primary/20 hover:bg-primary/10 min-w-9"}
+              >{p}</Button>
+            {/if}
+          {/each}
           <Button
             variant="outline"
             size="sm"
             disabled={data.page >= totalPages}
             onclick={() => goToPage(data.page + 1)}
             class="border-primary/20 hover:bg-primary/10"
-          >
+          >{$_("common.next")}</Button>
-            {$_("common.next")}
-          </Button>
         </div>
+        <p class="text-sm text-muted-foreground">
+          {$_("common.total_results", { values: { total: data.total } })}
+        </p>
       </div>
     {/if}
   </div>