diff --git a/packages/frontend/src/routes/magazine/+page.svelte b/packages/frontend/src/routes/magazine/+page.svelte
index 3c46df9..3ebe5bb 100644
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/packages/frontend/src/routes/magazine/+page.svelte
@@ -60,11 +60,11 @@
   <SexyBackground />
 
   <PageHero title={$_("magazine.title")} description={$_("magazine.description")}>
-    <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
+    <div class="flex flex-col gap-3 max-w-4xl mx-auto">
       <!-- Search -->
-      <div class="relative flex-1">
+      <div class="relative">
         <span
-          class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
+          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")}
@@ -73,62 +73,61 @@
             searchValue = (e.target as HTMLInputElement).value;
             debounceSearch(searchValue);
           }}
-          class="pl-12 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
+          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 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
+      <!-- Filters -->
+      <div class="flex gap-3">
+        <!-- Category Filter -->
+        <Select
+          type="single"
+          value={data.category ?? "all"}
+          onValueChange={(v) => v && setParam("category", v)}
         >
-          <span class="icon-[ri--filter-line] w-5 h-5 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>
+          <SelectTrigger class="flex-1 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>
+        <!-- Sort -->
+        <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
+          <SelectTrigger class="flex-1 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>
   </PageHero>
 
diff --git a/packages/frontend/src/routes/models/+page.svelte b/packages/frontend/src/routes/models/+page.svelte
index ddeac97..7ecdccb 100644
--- a/packages/frontend/src/routes/models/+page.svelte
+++ b/packages/frontend/src/routes/models/+page.svelte
@@ -53,11 +53,11 @@
   <SexyBackground />
 
   <PageHero title={$_("models.title")} description={$_("models.description")}>
-    <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
+    <div class="flex flex-col gap-3 max-w-4xl mx-auto">
       <!-- Search -->
-      <div class="relative flex-1">
+      <div class="relative">
         <span
-          class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
+          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={$_("models.search_placeholder")}
@@ -66,22 +66,22 @@
             searchValue = (e.target as HTMLInputElement).value;
             debounceSearch(searchValue);
           }}
-          class="pl-12 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
+          class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
         />
       </div>
 
-      <!-- Sort -->
-      <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
-        <SelectTrigger
-          class="w-full md:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
-        >
-          {data.sort === "recent" ? $_("models.sort.recent") : $_("models.sort.name")}
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="name">{$_("models.sort.name")}</SelectItem>
-          <SelectItem value="recent">{$_("models.sort.recent")}</SelectItem>
-        </SelectContent>
-      </Select>
+      <!-- Filters -->
+      <div class="flex gap-3">
+        <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
+          <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
+            {data.sort === "recent" ? $_("models.sort.recent") : $_("models.sort.name")}
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="name">{$_("models.sort.name")}</SelectItem>
+            <SelectItem value="recent">{$_("models.sort.recent")}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
     </div>
   </PageHero>
   <!-- Models Grid -->
diff --git a/packages/frontend/src/routes/videos/+page.svelte b/packages/frontend/src/routes/videos/+page.svelte
index 13ee2d8..04d0951 100644
--- a/packages/frontend/src/routes/videos/+page.svelte
+++ b/packages/frontend/src/routes/videos/+page.svelte
@@ -56,11 +56,11 @@
   <SexyBackground />
 
   <PageHero title={$_("videos.title")} description={$_("videos.description")}>
-    <div class="flex flex-col lg:flex-row gap-4 max-w-6xl mx-auto">
+    <div class="flex flex-col gap-3 max-w-6xl mx-auto">
       <!-- Search -->
-      <div class="relative flex-1">
+      <div class="relative">
         <span
-          class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
+          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={$_("videos.search_placeholder")}
@@ -69,56 +69,55 @@
             searchValue = (e.target as HTMLInputElement).value;
             debounceSearch(searchValue);
           }}
-          class="pl-12 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
+          class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
         />
       </div>
 
-      <!-- Duration Filter -->
-      <Select
-        type="single"
-        value={data.duration}
-        onValueChange={(v) => v && setParam("duration", v)}
-      >
-        <SelectTrigger
-          class="w-full lg:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
+      <!-- Filters -->
+      <div class="flex gap-3">
+        <!-- Duration Filter -->
+        <Select
+          type="single"
+          value={data.duration}
+          onValueChange={(v) => v && setParam("duration", v)}
         >
-          <span class="icon-[ri--timer-2-line] w-5 h-5 mr-2"></span>
-          {data.duration === "short"
-            ? $_("videos.duration.short")
-            : data.duration === "medium"
-              ? $_("videos.duration.medium")
-              : data.duration === "long"
-                ? $_("videos.duration.long")
-                : $_("videos.duration.all")}
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="all">{$_("videos.duration.all")}</SelectItem>
-          <SelectItem value="short">{$_("videos.duration.short")}</SelectItem>
-          <SelectItem value="medium">{$_("videos.duration.medium")}</SelectItem>
-          <SelectItem value="long">{$_("videos.duration.long")}</SelectItem>
-        </SelectContent>
-      </Select>
+          <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
+            <span class="icon-[ri--timer-2-line] w-4 h-4 mr-2"></span>
+            {data.duration === "short"
+              ? $_("videos.duration.short")
+              : data.duration === "medium"
+                ? $_("videos.duration.medium")
+                : data.duration === "long"
+                  ? $_("videos.duration.long")
+                  : $_("videos.duration.all")}
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{$_("videos.duration.all")}</SelectItem>
+            <SelectItem value="short">{$_("videos.duration.short")}</SelectItem>
+            <SelectItem value="medium">{$_("videos.duration.medium")}</SelectItem>
+            <SelectItem value="long">{$_("videos.duration.long")}</SelectItem>
+          </SelectContent>
+        </Select>
 
-      <!-- Sort -->
-      <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
-        <SelectTrigger
-          class="w-full lg:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
-        >
-          {data.sort === "most_liked"
-            ? $_("videos.sort.most_liked")
-            : data.sort === "most_played"
-              ? $_("videos.sort.most_played")
-              : data.sort === "name"
-                ? $_("videos.sort.name")
-                : $_("videos.sort.recent")}
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="recent">{$_("videos.sort.recent")}</SelectItem>
-          <SelectItem value="most_liked">{$_("videos.sort.most_liked")}</SelectItem>
-          <SelectItem value="most_played">{$_("videos.sort.most_played")}</SelectItem>
-          <SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
-        </SelectContent>
-      </Select>
+        <!-- Sort -->
+        <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
+          <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
+            {data.sort === "most_liked"
+              ? $_("videos.sort.most_liked")
+              : data.sort === "most_played"
+                ? $_("videos.sort.most_played")
+                : data.sort === "name"
+                  ? $_("videos.sort.name")
+                  : $_("videos.sort.recent")}
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="recent">{$_("videos.sort.recent")}</SelectItem>
+            <SelectItem value="most_liked">{$_("videos.sort.most_liked")}</SelectItem>
+            <SelectItem value="most_played">{$_("videos.sort.most_played")}</SelectItem>
+            <SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
     </div>
   </PageHero>
   <!-- Videos Grid -->