diff --git a/app/Helpers/AgeHelper.php b/app/Helpers/AgeHelper.php
new file mode 100644
index 00000000..3207f4f0
--- /dev/null
+++ b/app/Helpers/AgeHelper.php
@@ -0,0 +1,116 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Helpers;
+
+use App\Enums\PetAge;
+
+class AgeHelper
+{
+    public static function parseDbAgeToMonths(string|int|float|null $age): ?int
+    {
+        if ($age === null) {
+            return null;
+        }
+
+        if (is_int($age)) {
+            return $age >= 0 ? $age : null;
+        }
+
+        if (is_float($age)) {
+            return $age >= 0 ? (int)floor($age) : null;
+        }
+
+        $text = trim((string)$age);
+
+        if ($text === "") {
+            return null;
+        }
+
+        if (preg_match('/^\d+(?:[.,]\d+)?$/', $text) === 1) {
+            return (int)floor((float)str_replace(",", ".", $text));
+        }
+
+        $normalized = strtolower($text);
+        $hasBelowQualifier = str_contains($normalized, "poniżej");
+        $normalized = str_replace(['\t', ","], " ", $normalized);
+        $normalized = preg_replace('/\b(około|ok\.|okolo)\b/u', "", $normalized) ?? $normalized;
+        $normalized = preg_replace('/\s+/', " ", $normalized) ?? $normalized;
+
+        $yearsVal = 0.0;
+        $monthsVal = 0.0;
+        $weeksVal = 0.0;
+
+        if (preg_match('/(\d+(?:[.,]\d+)?)\s*(?:rok|roku|lata|lat|r\.)\b/u', $normalized, $m) === 1) {
+            $yearsVal = (float)str_replace(",", ".", $m[1]);
+        }
+
+        if (preg_match('/(\d+(?:[.,]\d+)?)\s*(?:mies(?:\.|iąc|iąca|iące|ięcy)?|m\.)\b/u', $normalized, $m) === 1) {
+            $monthsVal = (float)str_replace(",", ".", $m[1]);
+        }
+
+        if (preg_match('/(\d+(?:[.,]\d+)?)\s*(?:tydz(?:\.|ień|odnie|odni)?|t\.)\b/u', $normalized, $m) === 1) {
+            $weeksVal = (float)str_replace(",", ".", $m[1]);
+        }
+
+        if ($yearsVal === 0.0 && $monthsVal === 0.0 && $weeksVal === 0.0) {
+            return null;
+        }
+
+        $totalMonths = ($yearsVal * 12.0) + $monthsVal + round($weeksVal / 4.0);
+        $totalMonths = (int)floor($totalMonths);
+
+        if ($hasBelowQualifier && $totalMonths > 0) {
+            --$totalMonths;
+        }
+
+        return max($totalMonths, 0);
+    }
+
+    public static function classifyDogAge(?int $months, int $adultFromMonths = 12, int $seniorFromMonths = 96): PetAge
+    {
+        if ($months === null || $months < 0) {
+            return PetAge::Unknown;
+        }
+
+        if ($months < $adultFromMonths) {
+            return PetAge::Juvenile;
+        }
+
+        if ($months >= $seniorFromMonths) {
+            return PetAge::Senior;
+        }
+
+        return PetAge::Adult;
+    }
+
+    public static function classifyDogAgeFromDbAge(string|int|float|null $age, int $adultFromMonths = 12, int $seniorFromMonths = 96): PetAge
+    {
+        $months = self::parseDbAgeToMonths($age);
+
+        if ($months !== null) {
+            return self::classifyDogAge($months, $adultFromMonths, $seniorFromMonths);
+        }
+
+        if ($age === null) {
+            return PetAge::Unknown;
+        }
+
+        $t = mb_strtolower(trim((string)$age));
+
+        if (preg_match("/młod/u", $t) === 1) {
+            return PetAge::Juvenile;
+        }
+
+        if (preg_match("/senior|starsz/u", $t) === 1) {
+            return PetAge::Senior;
+        }
+
+        if (preg_match("/doros/u", $t) === 1) {
+            return PetAge::Adult;
+        }
+
+        return PetAge::Unknown;
+    }
+}
diff --git a/app/Http/Controllers/PetController.php b/app/Http/Controllers/PetController.php
index 974827e2..fcef4748 100644
--- a/app/Http/Controllers/PetController.php
+++ b/app/Http/Controllers/PetController.php
@@ -4,12 +4,15 @@
 
 namespace App\Http\Controllers;
 
+use App\Actions\FindPetsForPreferenceAction;
 use App\Http\Requests\PetRequest;
 use App\Http\Resources\PetIndexResource;
+use App\Http\Resources\PetMatchResource;
 use App\Http\Resources\PetShowResource;
 use App\Models\Pet;
 use App\Services\TagService;
 use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
 use Inertia\Inertia;
 use Inertia\Response;
 
@@ -19,18 +22,59 @@ public function __construct(
         private TagService $tagService,
     ) {}
 
-    public function index(): Response
+    public function index(Request $request): Response
     {
-        $pets = Pet::query()->latest()->paginate(15);
+        $perDog = 20;
+        $perCat = 20;
+        $perOther = 10;
+
+        $dogs = Pet::query()
+            ->with(["tags", "media"])
+            ->where("is_accepted", true)
+            ->whereRaw("LOWER(TRIM(species)) = ?", ["dog"])
+            ->orderByDesc("id")
+            ->take($perDog)
+            ->get();
+
+        $cats = Pet::query()
+            ->with(["tags", "media"])
+            ->where("is_accepted", true)
+            ->whereRaw("LOWER(TRIM(species)) = ?", ["cat"])
+            ->orderByDesc("id")
+            ->take($perCat)
+            ->get();
+
+        $others = Pet::query()
+            ->with(["tags", "media"])
+            ->where("is_accepted", true)
+            ->whereRaw("LOWER(TRIM(species)) = ?", ["other"])
+            ->orderByDesc("id")
+            ->take($perOther)
+            ->get();
+
+        $pets = $dogs->merge($cats)->merge($others)->shuffle()->values();
 
         return Inertia::render("Dashboard/Dashboard", [
             "pets" => PetIndexResource::collection($pets),
         ]);
     }
 
+    public function matches(FindPetsForPreferenceAction $findPetsForPreference): Response
+    {
+        $user = request()->user();
+
+        $preference = $user->preferences()->first();
+
+        $pets = $findPetsForPreference->execute($preference);
+
+        return Inertia::render("Dashboard/Dashboard", [
+            "pets" => PetMatchResource::collection($pets)->resolve(),
+        ]);
+    }
+
     public function show(Pet $pet): Response
     {
-        $pet->load("tags");
+        $pet->load(["tags", "shelter.address", "media"]);
 
         return Inertia::render("Pets/Show", [
             "pet" => new PetShowResource($pet),
diff --git a/app/Http/Controllers/PreferenceController.php b/app/Http/Controllers/PreferenceController.php
index 69bc2100..f1110f09 100644
--- a/app/Http/Controllers/PreferenceController.php
+++ b/app/Http/Controllers/PreferenceController.php
@@ -4,10 +4,10 @@
 
 namespace App\Http\Controllers;
 
-use App\Actions\FindPetsForPreferenceAction;
 use App\Http\Requests\PreferenceRequest;
-use App\Http\Resources\PetMatchResource;
+use App\Models\Pet;
 use App\Models\Preference;
+use App\Models\Tag;
 use App\Services\GeocodingService;
 use Illuminate\Http\RedirectResponse;
 use Inertia\Inertia;
@@ -19,15 +19,47 @@ public function __construct(
         protected GeocodingService $geocodingService,
     ) {}
 
-    public function index(FindPetsForPreferenceAction $findPetsForPreference): Response
+    public function show(): Response
     {
-        $user = request()->user();
-        $preference = $user->preferences()->first();
-
-        $pets = $findPetsForPreference->execute($preference);
-
-        return Inertia::render("Dashboard/Dashboard", [
-            "pets" => PetMatchResource::collection($pets)->resolve(),
+        $tags = Tag::query()
+            ->withCount(["pets as accepted_pets_count" => fn($q) => $q->where("is_accepted", true)])
+            ->whereHas("pets", fn($q) => $q->where("is_accepted", true), ">", 1)
+            ->orderByDesc("accepted_pets_count")
+            ->orderBy("name")
+            ->get()
+            ->map(fn(Tag $tag): array => [
+                "value" => $tag->name,
+                "label" => $tag->name,
+                "count" => (int)$tag->accepted_pets_count,
+            ]);
+
+        $breedQuery = fn(string $species) => Pet::query()
+            ->where("species", $species)
+            ->where("is_accepted", true)
+            ->whereNotNull("breed")
+            ->where("breed", "!=", "")
+            ->distinct()
+            ->orderBy("breed")
+            ->pluck("breed");
+
+        $breeds = [
+            "dog" => $breedQuery("dog"),
+            "cat" => $breedQuery("cat"),
+            "other" => $breedQuery("other"),
+        ];
+
+        $colors = Pet::query()
+            ->where("is_accepted", true)
+            ->whereNotNull("color")
+            ->where("color", "!=", "")
+            ->distinct()
+            ->orderBy("color")
+            ->pluck("color");
+
+        return Inertia::render("Preferences/Preferences", [
+            "tags" => $tags,
+            "breeds" => $breeds,
+            "colors" => $colors,
         ]);
     }
 
diff --git a/app/Http/Resources/PetIndexResource.php b/app/Http/Resources/PetIndexResource.php
index eee0b847..a07ca4af 100644
--- a/app/Http/Resources/PetIndexResource.php
+++ b/app/Http/Resources/PetIndexResource.php
@@ -17,11 +17,45 @@ public function toArray($request): array
         return [
             "id" => $pet->id,
             "name" => $pet->name,
+            // First existing media URL for cards/strips
+            "image_url" => (function () use ($pet) {
+                $mediaItems = $pet->getMedia("pet_images");
+
+                foreach ($mediaItems as $media) {
+                    $path = $media->getPath();
+
+                    if (is_string($path) && file_exists($path)) {
+                        return $media->getUrl();
+                    }
+                }
+            })(),
+            "has_images" => (function () use ($pet) {
+                $mediaItems = $pet->getMedia("pet_images");
+
+                foreach ($mediaItems as $media) {
+                    $path = $media->getPath();
+
+                    if (is_string($path) && file_exists($path)) {
+                        return true;
+                    }
+                }
+
+                return false;
+            })(),
             "species" => $pet->species,
             "breed" => $pet->breed,
             "sex" => $pet->sex,
+            "age" => $pet->age,
+            "admission_date" => $pet->admission_date?->format("Y-m-d"),
+            "size" => $pet->size,
+            "weight" => $pet->weight,
+            "color" => $pet->color,
+            "description" => $pet->description,
             "behavioral_notes" => $pet->behavioral_notes,
             "adoption_status" => $pet->adoption_status,
+            "shelter_city" => optional($pet->shelter?->address)->city,
+            "shelter_postal_code" => optional($pet->shelter?->address)->postal_code,
+            "tags" => $pet->tags->pluck("name")->values(),
         ];
     }
 }
diff --git a/app/Http/Resources/PetShowResource.php b/app/Http/Resources/PetShowResource.php
index 5b1fc204..3b75cd47 100644
--- a/app/Http/Resources/PetShowResource.php
+++ b/app/Http/Resources/PetShowResource.php
@@ -18,6 +18,32 @@ public function toArray($request): array
         return [
             "id" => $pet->id,
             "name" => $pet->name,
+            "photos" => (function () use ($pet) {
+                $mediaItems = $pet->getMedia("pet_images");
+
+                foreach ($mediaItems as $media) {
+                    $path = $media->getPath();
+
+                    if (is_string($path) && file_exists($path)) {
+                        return [$media->getUrl()];
+                    }
+                }
+
+                return [];
+            })(),
+            "has_images" => (function () use ($pet) {
+                $mediaItems = $pet->getMedia("pet_images");
+
+                foreach ($mediaItems as $media) {
+                    $path = $media->getPath();
+
+                    if (is_string($path) && file_exists($path)) {
+                        return true;
+                    }
+                }
+
+                return false;
+            })(),
             "adoption_url" => $pet->adoption_url,
             "species" => $pet->species,
             "breed" => $pet->breed,
@@ -47,6 +73,17 @@ public function toArray($request): array
             "quarantine_end_date" => $pet->quarantine_end_date ? $pet->quarantine_end_date->toDateString() : null,
             "found_location" => $pet->found_location,
             "adoption_status" => $pet->adoption_status,
+            "shelter" => $pet->shelter ? [
+                "id" => $pet->shelter->id,
+                "name" => $pet->shelter->name,
+                "phone" => $pet->shelter->phone,
+                "email" => $pet->shelter->email,
+                "address" => $pet->shelter->address ? [
+                    "address" => $pet->shelter->address->address,
+                    "city" => $pet->shelter->address->city,
+                    "postal_code" => $pet->shelter->address->postal_code,
+                ] : null,
+            ] : null,
             "tags" => $pet->tags->map(fn(Tag $tag): array => [
                 "id" => $tag->id,
                 "name" => $tag->name,
diff --git a/app/Models/Tag.php b/app/Models/Tag.php
index 641391b3..9bbede38 100755
--- a/app/Models/Tag.php
+++ b/app/Models/Tag.php
@@ -6,10 +6,16 @@
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
 class Tag extends Model
 {
     use HasFactory;
 
     protected $fillable = ["name"];
+
+    public function pets(): BelongsToMany
+    {
+        return $this->belongsToMany(Pet::class);
+    }
 }
diff --git a/app/Services/PetMatcher.php b/app/Services/PetMatcher.php
index d82cdfb5..077313e9 100644
--- a/app/Services/PetMatcher.php
+++ b/app/Services/PetMatcher.php
@@ -4,28 +4,58 @@
 
 namespace App\Services;
 
+use App\Enums\PetAge;
+use App\Helpers\AgeHelper;
+
 class PetMatcher
 {
     public function match(array $petData, array $preferences): float
     {
+        $normalized = [];
+
+        foreach ($preferences as $field => $prefValues) {
+            if (!is_array($prefValues)) {
+                continue;
+            }
+            $list = array_is_list($prefValues) ? $prefValues : [$prefValues];
+            $normalized[$field] = array_values(array_filter($list, static fn($p) => is_array($p) && (array_key_exists("value", $p) || array_key_exists("weight", $p))));
+        }
+
         $score = 0.0;
         $maxScore = 0.0;
 
-        foreach ($preferences as $field => $prefValues) {
+        foreach ($normalized as $field => $prefValues) {
             foreach ($prefValues as $pref) {
                 $weight = (float)($pref["weight"] ?? 1);
                 $maxScore += $weight;
 
-                if ($field === "tags" && isset($petData["tags"]) && is_array($petData["tags"])) {
-                    $tagValues = array_map(
-                        fn(array $tag): string|int => $tag["name"] ?? $tag["id"],
-                        $petData["tags"],
-                    );
+                if ($field === "tags") {
+                    $petTags = isset($petData["tags"]) && is_array($petData["tags"]) ? $petData["tags"] : [];
+                    $tagValues = array_map(static function ($tag) {
+                        if (is_array($tag)) {
+                            return $tag["name"] ?? $tag["id"] ?? null;
+                        }
+
+                        return $tag;
+                    }, $petTags);
 
-                    if (in_array($pref["value"], $tagValues, true)) {
+                    if (array_key_exists("value", $pref) && in_array($pref["value"], $tagValues, true)) {
                         $score += $weight;
                     }
-                } elseif (isset($petData[$field]) && $petData[$field] === $pref["value"]) {
+                } elseif ($field === "age" && array_key_exists("value", $pref)) {
+                    $petAgeCategory = AgeHelper::classifyDogAgeFromDbAge($petData["age"] ?? null);
+                    $prefValue = (string)$pref["value"];
+
+                    if ($petAgeCategory instanceof PetAge) {
+                        if ($petAgeCategory->value === $prefValue) {
+                            $score += $weight;
+                        }
+                    } else {
+                        if ((string)$petAgeCategory === $prefValue) {
+                            $score += $weight;
+                        }
+                    }
+                } elseif (isset($petData[$field]) && array_key_exists("value", $pref) && $petData[$field] === $pref["value"]) {
                     $score += $weight;
                 }
             }
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 85151360..850c145d 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -12,6 +12,7 @@ public function run(): void
     {
         $this->call([
             DemoSeeder::class,
+            PetsOnlySeeder::class,
         ]);
     }
 }
diff --git a/database/seeders/PetsOnlySeeder.php b/database/seeders/PetsOnlySeeder.php
new file mode 100644
index 00000000..92f4fe02
--- /dev/null
+++ b/database/seeders/PetsOnlySeeder.php
@@ -0,0 +1,134 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Seeders;
+
+use App\Models\Pet;
+use App\Models\PetShelter;
+use App\Models\Tag;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
+
+class PetsOnlySeeder extends Seeder
+{
+    public function run(): void
+    {
+        $driver = DB::connection()->getDriverName();
+
+        if ($driver === "pgsql") {
+            DB::statement("TRUNCATE TABLE pet_tag RESTART IDENTITY CASCADE");
+            DB::statement("TRUNCATE TABLE pets RESTART IDENTITY CASCADE");
+        } elseif ($driver === "mysql") {
+            DB::statement("SET FOREIGN_KEY_CHECKS=0;");
+            DB::table("pet_tag")->truncate();
+            DB::table("pets")->truncate();
+            DB::statement("SET FOREIGN_KEY_CHECKS=1;");
+        } else {
+            DB::table("pet_tag")->truncate();
+            DB::table("pets")->truncate();
+        }
+
+        if (PetShelter::count() < 5) {
+            PetShelter::factory()->count(5 - PetShelter::count())->create();
+        }
+
+        $requiredTagNames = [
+            "friendly", "playful", "calm", "active", "gentle", "smart", "independent", "curious",
+            "good with kids", "good with dogs", "good with cats", "house trained", "leash trained", "low shedding",
+        ];
+
+        foreach ($requiredTagNames as $name) {
+            Tag::firstOrCreate(["name" => $name]);
+        }
+
+        $tags = Tag::whereIn("name", $requiredTagNames)->get();
+        $shelters = PetShelter::all();
+
+        $curatedPets = [
+            ["name" => "Buddy",   "species" => "dog", "breed" => "Labrador Retriever", "sex" => "male",   "age" => 24, "size" => "large",  "weight" => 28.5, "color" => "yellow", "adoption_status" => "available", "tags" => ["friendly", "playful", "good with kids"]],
+            ["name" => "Luna",    "species" => "cat", "breed" => "Siamese",            "sex" => "female", "age" => 12, "size" => "small",  "weight" => 3.8,  "color" => "seal point", "adoption_status" => "available", "tags" => ["curious", "smart", "independent"]],
+            ["name" => "Max",     "species" => "dog", "breed" => "German Shepherd",    "sex" => "male",   "age" => 36, "size" => "large",  "weight" => 32.0, "color" => "black and tan", "adoption_status" => "available", "tags" => ["smart", "active", "leash trained"]],
+            ["name" => "Bella",   "species" => "dog", "breed" => "Golden Retriever",   "sex" => "female", "age" => 48, "size" => "large",  "weight" => 29.0, "color" => "golden", "adoption_status" => "available", "tags" => ["gentle", "friendly", "good with kids"]],
+            ["name" => "Oliver",  "species" => "cat", "breed" => "British Shorthair",  "sex" => "male",   "age" => 24, "size" => "medium", "weight" => 5.5,  "color" => "blue", "adoption_status" => "available", "tags" => ["calm", "low shedding"]],
+            ["name" => "Milo",    "species" => "cat", "breed" => "Maine Coon",         "sex" => "male",   "age" => 36, "size" => "large",  "weight" => 7.2,  "color" => "brown tabby", "adoption_status" => "available", "tags" => ["friendly", "good with kids"]],
+            ["name" => "Coco",    "species" => "dog", "breed" => "Poodle",             "sex" => "female", "age" => 60, "size" => "medium", "weight" => 18.0, "color" => "white", "adoption_status" => "available", "tags" => ["smart", "low shedding", "house trained"]],
+            ["name" => "Charlie", "species" => "dog", "breed" => "Beagle",             "sex" => "male",   "age" => 24, "size" => "medium", "weight" => 11.0, "color" => "tricolor", "adoption_status" => "available", "tags" => ["curious", "playful"]],
+            ["name" => "Rocky",   "species" => "dog", "breed" => "Boxer",              "sex" => "male",   "age" => 48, "size" => "large",  "weight" => 30.5, "color" => "fawn", "adoption_status" => "available", "tags" => ["active", "friendly"]],
+            ["name" => "Daisy",   "species" => "dog", "breed" => "Bulldog",            "sex" => "female", "age" => 36, "size" => "medium", "weight" => 22.0, "color" => "brindle", "adoption_status" => "available", "tags" => ["gentle", "calm"]],
+            ["name" => "Simba",   "species" => "cat", "breed" => "Bengal",             "sex" => "male",   "age" => 24, "size" => "medium", "weight" => 4.5,  "color" => "brown spotted", "adoption_status" => "available", "tags" => ["active", "curious"]],
+            ["name" => "Chloe",   "species" => "cat", "breed" => "Ragdoll",            "sex" => "female", "age" => 36, "size" => "large",  "weight" => 6.0,  "color" => "seal bicolor", "adoption_status" => "available", "tags" => ["gentle", "friendly"]],
+            ["name" => "Nala",    "species" => "cat", "breed" => "Sphynx",             "sex" => "female", "age" => 24, "size" => "medium", "weight" => 3.2,  "color" => "pink", "adoption_status" => "available", "tags" => ["friendly", "curious"]],
+            ["name" => "Sadie",   "species" => "dog", "breed" => "Dachshund",          "sex" => "female", "age" => 72, "size" => "small",  "weight" => 8.0,  "color" => "red", "adoption_status" => "available", "tags" => ["independent", "house trained"]],
+            ["name" => "Zeus",    "species" => "dog", "breed" => "Rottweiler",         "sex" => "male",   "age" => 60, "size" => "large",  "weight" => 45.0, "color" => "black and tan", "adoption_status" => "available", "tags" => ["smart", "leash trained"]],
+            ["name" => "Lily",    "species" => "dog", "breed" => "Yorkshire Terrier",  "sex" => "female", "age" => 48, "size" => "small",  "weight" => 3.2,  "color" => "blue and tan", "adoption_status" => "available", "tags" => ["playful", "low shedding"]],
+            ["name" => "Leo",     "species" => "cat", "breed" => "Russian Blue",       "sex" => "male",   "age" => 36, "size" => "medium", "weight" => 4.2,  "color" => "blue", "adoption_status" => "available", "tags" => ["calm", "smart"]],
+            ["name" => "Misty",   "species" => "cat", "breed" => "Persian",            "sex" => "female", "age" => 60, "size" => "medium", "weight" => 4.0,  "color" => "white", "adoption_status" => "available", "tags" => ["gentle", "low shedding"]],
+            ["name" => "Finn",    "species" => "dog", "breed" => "Border Collie",      "sex" => "male",   "age" => 24, "size" => "medium", "weight" => 19.0, "color" => "black and white", "adoption_status" => "available", "tags" => ["smart", "active"]],
+            ["name" => "Zoe",     "species" => "cat", "breed" => "Norwegian Forest",   "sex" => "female", "age" => 48, "size" => "large",  "weight" => 5.8,  "color" => "brown tabby", "adoption_status" => "available", "tags" => ["friendly", "curious"]],
+        ];
+
+        foreach ($curatedPets as $data) {
+            $descBySpecies = [
+                "dog" => "Lubi spacery i zabawę, łagodny w domu i towarzyski na zewnątrz.",
+                "cat" => "Ciekawska i spokojna, lubi wylegiwać się na słońcu i bawić wędką.",
+            ];
+            $healthPool = ["healthy", "healthy", "healthy", "recovering"];
+            $health = $healthPool[array_rand($healthPool)];
+            $currentTreatment = $health === "recovering" ? "Krótka rekonwalescencja po szczepieniu, zalecany odpoczynek." : null;
+            $sterilized = rand(0, 1) === 1;
+            $vaccinated = rand(0, 1) === 1;
+            $hasChip = rand(0, 1) === 1;
+            $chip = $hasChip ? strtoupper(Str::random(12)) : null;
+            $dewormed = rand(0, 1) === 1;
+            $deflea = rand(0, 1) === 1;
+            $medicalTests = $health === "healthy" ? "basic: negative" : "blood: normal; xray: clear";
+            $food = collect(["dry", "wet", "mixed"])->random();
+            $behavioral = $data["species"] === "dog" ? "Spokojny w domu, energiczny na zewnątrz." : "Lubi drapaki i ciche otoczenie.";
+            $admission = now()->subDays(rand(7, 180));
+            $city = collect(["Warsaw", "Krakow", "Gdansk", "Wroclaw", "Poznan"])->random();
+            $adoptionUrl = "https://adopt.local/pets/" . Str::slug($data["name"] . " " . $data["breed"]);
+
+            $pet = Pet::create([
+                "name" => $data["name"],
+                "adoption_url" => $adoptionUrl,
+                "species" => $data["species"],
+                "breed" => $data["breed"],
+                "sex" => $data["sex"],
+                "age" => $data["age"],
+                "size" => $data["size"],
+                "weight" => $data["weight"],
+                "color" => $data["color"],
+                "sterilized" => $sterilized,
+                "description" => $descBySpecies[$data["species"]] ?? "Przyjazny i towarzyski.",
+                "health_status" => $health,
+                "current_treatment" => $currentTreatment,
+                "vaccinated" => $vaccinated,
+                "has_chip" => $hasChip,
+                "chip_number" => $chip,
+                "dewormed" => $dewormed,
+                "deflea_treated" => $deflea,
+                "medical_tests" => $medicalTests,
+                "food_type" => $food,
+                "attitude_to_people" => "friendly",
+                "attitude_to_dogs" => "friendly",
+                "attitude_to_cats" => "neutral",
+                "attitude_to_children" => "gentle",
+                "activity_level" => collect(["low", "medium", "high"])->random(),
+                "behavioral_notes" => $behavioral,
+                "admission_date" => $admission,
+                "found_location" => $city,
+                "adoption_status" => $data["adoption_status"],
+                "shelter_id" => $shelters->random()->id,
+                "is_accepted" => true,
+            ]);
+
+            $tagIds = $tags->whereIn("name", $data["tags"])->pluck("id")->toArray();
+
+            if (!empty($tagIds)) {
+                $pet->tags()->sync($tagIds);
+            }
+        }
+    }
+}
diff --git a/eslint.config.js b/eslint.config.js
index a71a506a..cd8b6716 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,5 +1,20 @@
 import blumilkDefault from '@blumilksoftware/eslint-config'
+import globals from 'globals'
 
 export default [
   ...blumilkDefault,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2022,
+      },
+    },
+    rules: {
+      'n/no-unsupported-features/node-builtins': ['error', {
+        allowExperimental: true,
+        ignores: ['fetch', 'localStorage', 'sessionStorage', 'AbortController'],
+      }],
+    },
+  },
 ]
diff --git a/package-lock.json b/package-lock.json
index 84666bc2..1b70ccb7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
                 "dompurify": "^3.2.6",
                 "laravel-vite-plugin": "^2.0.0",
                 "lodash": "^4.17.21",
+                "pinia": "^3.0.3",
                 "vue": "^3.5.17",
                 "vue-easy-lightbox": "^1.19.0",
                 "vue-i18n": "^11.1.11"
@@ -30,6 +31,7 @@
                 "@tailwindcss/typography": "^0.5.10",
                 "@typescript-eslint/eslint-plugin": "^8.37.0",
                 "@vitejs/plugin-vue": "^6.0.1",
+                "ajv": "^6.12.6",
                 "autoprefixer": "^10.4.21",
                 "eslint": "^9.31.0",
                 "eslint-config-prettier": "^10.1.5",
@@ -1143,17 +1145,6 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/@pkgjs/parseargs": {
-            "version": "0.11.0",
-            "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-            "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "engines": {
-                "node": ">=14"
-            }
-        },
         "node_modules/@rolldown/pluginutils": {
             "version": "1.0.0-beta.29",
             "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz",
@@ -2106,18 +2097,11 @@
                 "he": "^1.2.0"
             }
         },
-        "node_modules/@vue/devtools-api": {
-            "version": "7.7.7",
-            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
-            "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
-            "dependencies": {
-                "@vue/devtools-kit": "^7.7.7"
-            }
-        },
         "node_modules/@vue/devtools-kit": {
             "version": "7.7.7",
             "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz",
             "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==",
+            "license": "MIT",
             "dependencies": {
                 "@vue/devtools-shared": "^7.7.7",
                 "birpc": "^2.3.0",
@@ -2132,6 +2116,7 @@
             "version": "7.7.7",
             "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz",
             "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==",
+            "license": "MIT",
             "dependencies": {
                 "rfdc": "^1.4.1"
             }
@@ -2394,6 +2379,7 @@
             "version": "2.5.0",
             "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.5.0.tgz",
             "integrity": "sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==",
+            "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/antfu"
             }
@@ -2658,6 +2644,7 @@
             "version": "3.0.5",
             "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
             "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+            "license": "MIT",
             "dependencies": {
                 "is-what": "^4.1.8"
             },
@@ -3681,7 +3668,8 @@
         "node_modules/hookable": {
             "version": "5.5.3",
             "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
-            "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
+            "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+            "license": "MIT"
         },
         "node_modules/ignore": {
             "version": "7.0.5",
@@ -3814,6 +3802,7 @@
             "version": "4.1.16",
             "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
             "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+            "license": "MIT",
             "engines": {
                 "node": ">=12.13"
             },
@@ -4352,7 +4341,8 @@
         "node_modules/mitt": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
-            "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+            "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+            "license": "MIT"
         },
         "node_modules/mkdirp": {
             "version": "3.0.1",
@@ -4639,7 +4629,8 @@
         "node_modules/perfect-debounce": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
-            "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
+            "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+            "license": "MIT"
         },
         "node_modules/picocolors": {
             "version": "1.1.1",
@@ -4671,6 +4662,7 @@
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
             "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
+            "license": "MIT",
             "dependencies": {
                 "@vue/devtools-api": "^7.7.2"
             },
@@ -4687,6 +4679,15 @@
                 }
             }
         },
+        "node_modules/pinia/node_modules/@vue/devtools-api": {
+            "version": "7.7.7",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
+            "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-kit": "^7.7.7"
+            }
+        },
         "node_modules/pirates": {
             "version": "4.0.7",
             "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
@@ -5006,7 +5007,8 @@
         "node_modules/rfdc": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
-            "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="
+            "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+            "license": "MIT"
         },
         "node_modules/rollup": {
             "version": "4.50.1",
@@ -5199,6 +5201,7 @@
             "version": "14.0.1",
             "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
             "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+            "license": "BSD-3-Clause",
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -5356,6 +5359,7 @@
             "version": "2.2.2",
             "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
             "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
+            "license": "MIT",
             "dependencies": {
                 "copy-anything": "^3.0.2"
             },
diff --git a/package.json b/package.json
index 0e6a2e05..3eda10c2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
         "dompurify": "^3.2.6",
         "laravel-vite-plugin": "^2.0.0",
         "lodash": "^4.17.21",
+        "pinia": "^3.0.3",
         "vue": "^3.5.17",
         "vue-easy-lightbox": "^1.19.0",
         "vue-i18n": "^11.1.11"
@@ -34,6 +35,7 @@
         "@tailwindcss/typography": "^0.5.10",
         "@typescript-eslint/eslint-plugin": "^8.37.0",
         "@vitejs/plugin-vue": "^6.0.1",
+        "ajv": "^6.12.6",
         "autoprefixer": "^10.4.21",
         "eslint": "^9.31.0",
         "eslint-config-prettier": "^10.1.5",
diff --git a/resources/css/app.css b/resources/css/app.css
index 562ab2bb..97fc5548 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -12,42 +12,39 @@
     --color-light-soft-cream: oklch(0.9921 0.0172 99.59) /* Light soft cream */
     --color-light-brown: oklch(0.8152 0.1185 76.54); /* Light brown */
 }
+
 @keyframes heartbeat {
-    0% {
-        transform: scale(1);
-        opacity: 1;
-    }
-    25% {
-        transform: scale(1.14);
-        opacity: 1;
-    }
-    50% {
-        transform: scale(1);
-        opacity: 1;
-    }
-    60% {
-        transform: scale(1.16);
-        opacity: 1;
-    }
-    75% {
-        transform: scale(1);
-        opacity: 1;
-    }
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
+    0% { transform: scale(1); opacity: 1; }
+    25% { transform: scale(1.14); opacity: 1; }
+    50% { transform: scale(1); opacity: 1; }
+    60% { transform: scale(1.16); opacity: 1; }
+    75% { transform: scale(1); opacity: 1; }
+    100% { transform: scale(1); opacity: 1; }
 }
+
 @layer utilities {
-    .animate-heartbeat {
-        animation: heartbeat 0.8s ease-out infinite;
-    }   
+    .animate-heartbeat { animation: heartbeat 0.8s ease-out infinite; }
 }
+
 @layer components {
-    .heading-xl {
-        @apply text-xl font-semibold text-gray-900 mb-3;
-    }
-    .heading-lg {
-        @apply text-3xl sm:text-4xl font-bold text-gray-900;
-    }
+    .heading-xl { @apply text-xl font-semibold text-gray-900 mb-3; }
+    .heading-lg { @apply text-3xl sm:text-4xl font-bold text-gray-900; }
+
+    .disclosure { @apply overflow-hidden bg-white; }
+    .disclosure[open] { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
+    .disclosure-summary::-webkit-details-marker { display: none; }
+    .disclosure-summary { @apply list-none flex items-center justify-between py-3.5 px-4 border-b border-gray-200 bg-gradient-to-b from-indigo-500/5 to-transparent hover:from-indigo-500/10; }
+    .chevron { @apply transition-transform duration-200 ease-linear; }
+    .disclosure[open] .chevron { @apply rotate-180; }
+
+    .badge-selected { @apply inline-flex items-center rounded-full border px-2 py-0.5 text-xs bg-indigo-50 text-indigo-900 border-indigo-200; }
+
+    .tile-checkbox { @apply cursor-pointer transition-all; }
+    .checkbox-content { @apply flex flex-col items-center gap-1 sm:gap-2 p-3 sm:p-4 text-center min-h-[90px] h-0 sm:min-h-[100px] rounded-lg border-2 border-gray-200 bg-white transition-shadow; }
+    .tile-checkbox:hover .checkbox-content { @apply shadow-[0_8px_25px_rgba(0,0,0,0.15)]; }
+    .tile-checkbox input:checked + .checkbox-content { @apply shadow-[0_8px_25px_rgba(99,102,241,0.3)] border-indigo-500 bg-gradient-to-br from-indigo-500 to-violet-500 text-white; }
+    .tile-checkbox:focus-visible .checkbox-content { @apply outline outline-2 outline-offset-2 outline-indigo-500; }
+    .tile-checkbox:focus-visible input:checked + .checkbox-content { @apply outline outline-2 outline-offset-2 outline-white border-white; }
+    .icon-container { @apply flex items-center justify-center h-8 sm:h-10 w-full; }
+    .label-container { @apply break-words whitespace-normal leading-snug; }
 }
diff --git a/resources/js/Components/ActionMessage.vue b/resources/js/Components/ActionMessage.vue
index d999f81f..a2ce0e36 100644
--- a/resources/js/Components/ActionMessage.vue
+++ b/resources/js/Components/ActionMessage.vue
@@ -7,7 +7,7 @@ defineProps({
 <template>
   <div>
     <transition leave-active-class="transition ease-in duration-1000" leave-from-class="opacity-100" leave-to-class="opacity-0">
-      <div v-show="on" class="text-sm text-gray-600 dark:text-gray-400">
+      <div v-show="on" class="text-sm text-gray-600">
         <slot />
       </div>
     </transition>
diff --git a/resources/js/Components/ChoiceTiles.vue b/resources/js/Components/ChoiceTiles.vue
new file mode 100644
index 00000000..188ef85c
--- /dev/null
+++ b/resources/js/Components/ChoiceTiles.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import CommonIcons from '@/Components/Icons/CommonIcons.vue'
+
+const props = defineProps({
+  modelValue: { type: [Number, String, Array], default: null },
+  options: { type: Array, required: true },
+  columns: { type: Number, default: 3 },
+  anyLabel: { type: String, default: '' },
+  multiple: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const tileRefs = ref([])
+const { t } = useI18n()
+
+function toggle(value) {
+  if (props.multiple) {
+    const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
+    const idx = current.findIndex(v => v === value)
+    if (idx === -1) current.push(value)
+    else current.splice(idx, 1)
+    emit('update:modelValue', current)
+  } else {
+    emit('update:modelValue', props.modelValue === value ? null : value)
+  }
+}
+
+const gridClasses = computed(() => {
+  const cols = props.columns ?? 3
+  switch (cols) {
+  case 1:
+    return 'grid grid-cols-1 gap-3'
+  case 2:
+    return 'grid grid-cols-2 sm:grid-cols-2 md:grid-cols-2 gap-3'
+  case 3:
+    return 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 gap-3'
+  case 4:
+    return 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3'
+  case 5:
+    return 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3'
+  default:
+    return 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 gap-3'
+  }
+})
+
+function moveFocus(currentIndex, delta) {
+  const elements = (tileRefs.value || []).filter(Boolean)
+  if (!elements.length) return
+  let next = currentIndex + delta
+  if (next < 0) next = 0
+  if (next >= elements.length) next = elements.length - 1
+  elements[next]?.focus()
+}
+</script>
+
+<template>
+  <div>
+    <div :class="gridClasses">
+      <label
+        v-for="(opt, idx) in options"
+        :key="String(opt.value)"
+        :ref="el => (tileRefs[idx] = el)"
+        class="tile-checkbox focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500 rounded-lg"
+        :tabindex="0"
+        :role="multiple ? 'checkbox' : 'radio'"
+        :aria-checked="multiple ? (Array.isArray(modelValue) && modelValue.includes(opt.value)) : (modelValue === opt.value)"
+        :aria-label="opt.labelKey ? t(opt.labelKey) : (opt.label ? String(opt.label) : `Opcja: ${String(opt.value)}`)"
+        @click.prevent="toggle(opt.value)"
+        @keydown.enter.prevent="toggle(opt.value)"
+        @keydown.space.prevent="toggle(opt.value)"
+        @keydown.right.prevent="moveFocus(idx, 1)"
+        @keydown.left.prevent="moveFocus(idx, -1)"
+        @keydown.down.prevent="moveFocus(idx, columns || 3)"
+        @keydown.up.prevent="moveFocus(idx, -(columns || 3))"
+      >
+        <input
+          type="checkbox"
+          class="sr-only"
+          tabindex="-1"
+          aria-hidden="true"
+          :checked="multiple ? Array.isArray(modelValue) && modelValue.includes(opt.value) : modelValue === opt.value"
+          @change="toggle(opt.value)"
+        >
+        <div class="checkbox-content">
+          <div class="icon-container">
+            <CommonIcons v-if="opt.icon" :name="opt.icon" :class="opt.iconClass || 'w-5 h-5'" />
+          </div>
+          <span class="text-[11px] sm:text-xs font-medium">
+            <div class="label-container">
+              <slot name="label" :option="opt">
+                {{ opt.labelKey ? t(opt.labelKey) : (opt.label || String(opt.value)) }}
+              </slot>
+            </div>
+          </span>
+        </div>
+      </label>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Components/Header.vue b/resources/js/Components/Header.vue
index 05c25b3c..cfa21494 100644
--- a/resources/js/Components/Header.vue
+++ b/resources/js/Components/Header.vue
@@ -32,7 +32,7 @@ const mobileMenuOpen = ref(false)
         </Link>
       </div>
       <div class="flex lg:hidden">
-        <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" @click="mobileMenuOpen = true">
+        <button type="button" :aria-expanded="mobileMenuOpen" aria-controls="mobile-menu-panel" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" @click="mobileMenuOpen = true">
           <span class="sr-only">{{ t('navigation.openMainMenu') }}</span>
           <Bars3Icon class="size-6" aria-hidden="true" />
         </button>
@@ -82,7 +82,7 @@ const mobileMenuOpen = ref(false)
     </nav>
     <Dialog class="lg:hidden" :open="mobileMenuOpen" @close="mobileMenuOpen = false">
       <div class="fixed inset-0 z-50">
-        <DialogPanel class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-4 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+        <DialogPanel id="mobile-menu-panel" class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-4 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
           <div class="flex justify-between sticky top-0 bg-white pb-4">
             <Link :href="routes.home()" class="-m-1.5 p-1.5">
               <span class="sr-only">ŁapGo</span>
diff --git a/resources/js/Components/Icons/CommonIcons.vue b/resources/js/Components/Icons/CommonIcons.vue
index dd2fbf89..7917181a 100644
--- a/resources/js/Components/Icons/CommonIcons.vue
+++ b/resources/js/Components/Icons/CommonIcons.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="component" />
+  <component :is="component" v-bind="$attrs" />
 </template>
 
 <script setup>
@@ -23,6 +23,22 @@ import {
   IconAlertTriangle,
   IconDeviceDesktop,
   IconDeviceMobile,
+  IconMoodKid,
+  IconMan,
+  IconOld,
+  IconHorse,
+  IconWeight,
+  IconDog,
+  IconMoodSad,
+  IconMoodNeutral,
+  IconMoodSmile,
+  IconHeart,
+  IconMoodEmpty,
+  IconZzz,
+  IconWalk,
+  IconRun,
+  IconBolt,
+  IconFlame,
   IconLoader,
 } from '@tabler/icons-vue'
 
@@ -34,7 +50,9 @@ const props = defineProps({
       'arrow-left', 'location', 'phone', 'email', 'external-link',
       'chevron-left', 'chevron-right', 'user', 'settings', 'logout',
       'close', 'edit', 'delete', 'plus', 'search', 'warning',
-      'desktop', 'mobile', 'loading',
+      'desktop', 'mobile', 'mood-kid', 'man', 'old', 'horse',
+      'weight', 'dog', 'mood-sad', 'mood-neutral', 'mood-smile', 'heart', 'mood-empty',
+      'zzz', 'walk', 'run', 'bolt', 'flame','loading',
     ].includes(value),
   },
 })
@@ -58,6 +76,22 @@ const map = {
   'warning': { comp: IconAlertTriangle },
   'desktop': { comp: IconDeviceDesktop },
   'mobile': { comp: IconDeviceMobile },
+  'mood-kid': { comp: IconMoodKid },
+  'man': { comp: IconMan },
+  'old': { comp: IconOld },
+  'horse': { comp: IconHorse },
+  'weight': { comp: IconWeight },
+  'dog': { comp: IconDog },
+  'mood-sad': { comp: IconMoodSad },
+  'mood-neutral': { comp: IconMoodNeutral },
+  'mood-smile': { comp: IconMoodSmile },
+  'heart': { comp: IconHeart },
+  'mood-empty': { comp: IconMoodEmpty },
+  'zzz': { comp: IconZzz },
+  'walk': { comp: IconWalk },
+  'run': { comp: IconRun },
+  'bolt': { comp: IconBolt },
+  'flame': { comp: IconFlame },
   'loading': { comp: IconLoader },
 }
 
diff --git a/resources/js/Components/PawPrints.vue b/resources/js/Components/PawPrints.vue
index b0486c27..3baa22ac 100644
--- a/resources/js/Components/PawPrints.vue
+++ b/resources/js/Components/PawPrints.vue
@@ -112,8 +112,6 @@ onMounted(() => {
 }
 
 @keyframes fadeIn {
-  to {
-    opacity: 1;
-  }
+  to { opacity: 1; }
 }
 </style>
diff --git a/resources/js/Components/PetStrip.vue b/resources/js/Components/PetStrip.vue
index 0abc260c..24c9cb0e 100644
--- a/resources/js/Components/PetStrip.vue
+++ b/resources/js/Components/PetStrip.vue
@@ -6,7 +6,8 @@ import { useI18n } from 'vue-i18n'
 import { HeartIcon } from '@heroicons/vue/24/solid'
 import { HeartIcon as HeartOutlineIcon } from '@heroicons/vue/24/outline'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
-import { getPetTags, getGenderInfo } from '@/helpers/mappers'
+import { getGenderInfo } from '@/helpers/mappers'
+import { parsePolishAgeToMonths, formatAge } from '@/helpers/formatters/age.ts'
 
 const { t } = useI18n()
 
@@ -28,8 +29,6 @@ const scrollContainer = ref(null)
 const canScrollLeft = ref(false)
 const canScrollRight = ref(true)
 
-const petTags = getPetTags()
-
 const toggleLike = (petId) => {
   if (likedPets.value.has(petId)) {
     likedPets.value.delete(petId)
@@ -38,9 +37,61 @@ const toggleLike = (petId) => {
   }
 }
 
-const getPetTagsForPet = (pet) => {
-  if (!pet.tags || !Array.isArray(pet.tags)) return []
-  return pet.tags.map(tagId => petTags[tagId]).filter(Boolean)
+const getPetTagsForPet = (pet) => Array.isArray(pet.tags)
+  ? pet.tags.map((t) => (typeof t === 'string' ? t : t?.name)).filter(Boolean)
+  : []
+
+const descriptionFor = (pet) => {
+  const desc = typeof pet.description === 'string' ? pet.description.trim() : ''
+  if (desc) return desc
+  return t('dashboard.mvp.description', { breed: pet.breed || '', name: pet.name || '' })
+}
+
+const getTranslatedStatus = (pet) => {
+  const sexValue = String((pet.sex && typeof pet.sex === 'object' && 'value' in pet.sex) ? pet.sex.value : pet.sex || '').toLowerCase()
+  const rawStatus = (pet.status ?? pet.adoption_status)
+  if (!rawStatus) return ''
+  const statusStr = String((rawStatus && typeof rawStatus === 'object' && ('value' in rawStatus || 'name' in rawStatus))
+    ? (rawStatus.value ?? rawStatus.name)
+    : rawStatus)
+  const statusLower = statusStr.toLowerCase()
+
+  if (statusLower === 'available') {
+    return (sexValue === 'male' || sexValue === 'm')
+      ? t('dashboard.mvp.availablemale')
+      : t('dashboard.mvp.availablefemale')
+  }
+
+  const knownEnglish = ['adopted', 'waiting for adoption', 'quarantined', 'in temporary home']
+  if (knownEnglish.includes(statusLower)) {
+    const key = `dashboard.mvp.statuses.${statusLower.replaceAll(' ', '_')}`
+    const translated = t(key)
+    return translated === key ? statusStr : translated
+  }
+
+  return statusStr
+}
+
+const getStatusClasses = (pet) => {
+  const rawStatus = (pet.adoption_status ?? pet.status)
+  if (!rawStatus) return 'bg-green-100 text-green-800'
+  const statusLower = String((rawStatus && typeof rawStatus === 'object' && ('value' in rawStatus || 'name' in rawStatus))
+    ? (rawStatus.value ?? rawStatus.name)
+    : rawStatus).toLowerCase()
+
+  if (statusLower === 'quarantined') {
+    return 'bg-amber-100 text-amber-800'
+  }
+
+  if (statusLower === 'adopted') {
+    return 'bg-gray-200 text-gray-800'
+  }
+
+  if (statusLower === 'in temporary home') {
+    return 'bg-indigo-100 text-indigo-800'
+  }
+
+  return 'bg-green-100 text-green-800'
 }
 
 const checkScrollPosition = () => {
@@ -89,16 +140,20 @@ nextTick(() => {
       <button 
         v-show="canScrollLeft"
         class="absolute left-1 sm:left-2 top-1/2 -translate-y-1/2 z-10 size-8 sm:size-10 bg-white/90 hover:bg-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110"
+        :aria-label="t('common.prev')"
         @click="scrollLeft"
       >
+        <span class="sr-only">{{ t('common.prev') }}</span>
         <ChevronLeftIcon class="size-4 sm:size-6 text-gray-700" />
       </button>
       
       <button 
         v-show="canScrollRight"
         class="absolute right-1 sm:right-2 top-1/2 -translate-y-1/2 z-10 size-8 sm:size-10 bg-white/90 hover:bg-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110"
+        :aria-label="t('common.next')"
         @click="scrollRight"
       >
+        <span class="sr-only">{{ t('common.next') }}</span>
         <ChevronRightIcon class="size-4 sm:size-6 text-gray-700" />
       </button>
       
@@ -111,15 +166,25 @@ nextTick(() => {
           :key="pet.id" 
           class="shrink-0 w-64 sm:w-72 md:w-80 bg-white rounded-xl shadow-lg ring-2 m-4 ring-gray-100 hover:shadow-xl hover:ring-blue-200 focus-within:ring-2 focus-within:ring-indigo-500 transition-all duration-300 overflow-hidden relative"
         >
-          <div class="relative aspect-square ">
-            <Link :href="routes.pets.show(pet.id)" class="focus-visible:outline-none">
-              <img class="size-full object-cover" :src="pet.imageUrl" :alt="`${pet.name} - ${pet.breed}`">
-            </Link> 
+          <div class="relative aspect-square">
+            <Link v-if="pet.has_images" :href="routes.pets.show(pet.id)" :aria-label="`${t('dashboard.mvp.goToPetView') || t('dashboard.mvp.seeMore')}: ${pet.name}`" class="focus-visible:outline-none">
+              <img class="size-full object-cover" :src="pet.imageUrl" :alt="`${pet.name} - ${pet.breed}`" @error="($event) => { $event.target.src = '/Images/cat-dog.png' }">
+            </Link>
+            <div v-else class="size-full bg-gray-100 flex items-center justify-center rounded-lg">
+              <div class="text-center text-gray-500 px-2">
+                <svg class="mx-auto size-8 text-gray-400 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                <p class="text-xs font-medium">{{ t('pets.strip.noImage') }}</p>
+              </div>
+            </div> 
 
             <button 
-              class="absolute top-2 sm:top-3 right-2 sm:right-3 size-7 sm:size-8 flex items-center justify-center bg-white rounded-full shadow-md hover:shadow-lg transition-all duration-200 z-10 hover:scale-110 active:scale-95" 
+              class="absolute top-2 cursor-pointer sm:top-3 right-2 sm:right-3 size-7 sm:size-8 flex items-center justify-center bg-white rounded-full shadow-md hover:shadow-lg transition-all duration-200 z-10 hover:scale-110 active:scale-95" 
+              :aria-label="`${t('dashboard.mvp.like')} - ${pet.name}`"
               @click.prevent.stop="toggleLike(pet.id)"
             >
+              <span class="sr-only">{{ `${t('dashboard.mvp.like')} - ${pet.name}` }}</span>
               <HeartIcon v-if="likedPets.has(pet.id)" class="size-4 sm:size-5 text-purple-600 animate-heartbeat [transition:all_0.3s_cubic-bezier(0.68,_-0.55,_0.265,_1.55)]" />
               <HeartOutlineIcon v-else class="size-4 sm:size-5 text-purple-600 [transition:all_0.3s_cubic-bezier(0.68,_-0.55,_0.265,_1.55)] hover:scale-110" />
             </button>
@@ -131,27 +196,32 @@ nextTick(() => {
           
           <div class="flex flex-1 flex-col p-3 sm:p-4 text-center">
             <div class="flex flex-col items-center mb-2">
-              <h3 class="text-lg sm:text-xl font-bold text-gray-900">{{ pet.name }}</h3>
+              <h3 class="text-lg sm:text-xl font-bold text-gray-900" :aria-label="`${pet.name} - ${pet.breed}`">{{ pet.name }}</h3>
               <span class="text-sm sm:text-base text-gray-600">{{ pet.breed }}</span>
             </div>
             
             <div class="flex items-center justify-center gap-1 sm:gap-2 mb-2">
-              <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-1 text-xs sm:text-sm font-semibold text-blue-800">{{ pet.age }}</span>
-              <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-xs sm:text-sm font-semibold text-green-800">{{ pet.status }}</span>
+              <span 
+                v-if="parsePolishAgeToMonths(pet.age) > 0"
+                class="inline-flex items-center rounded-full bg-blue-100 px-2 py-1 text-xs sm:text-sm font-semibold text-blue-800" 
+                :aria-label="`${t('dashboard.mvp.age')}: ${formatAge(parsePolishAgeToMonths(pet.age))}`"
+              >{{ formatAge(parsePolishAgeToMonths(pet.age)) }}</span>
+              <span class="inline-flex items-center rounded-full px-2 py-1 text-xs sm:text-sm font-semibold" :class="getStatusClasses(pet)" :aria-label="`${t('dashboard.mvp.status')}: ${getTranslatedStatus(pet)}`">{{ getTranslatedStatus(pet) }}</span>
             </div>
             
             <div class="border-t border-gray-200 my-2 sm:my-3" />
             
-            <div class="flex flex-wrap gap-1 sm:gap-2 justify-center">
-              <span 
-                v-for="tag in getPetTagsForPet(pet)" 
-                :key="tag.name"
-                class="inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs sm:text-sm font-medium justify-center truncate border max-w-full"
-                :class="tag.color"
-              >
-                <span class="text-xs sm:text-sm shrink-0">{{ tag.emoji }}</span>
-                <span class="truncate text-xs sm:text-sm">{{ tag.name }}</span>
-              </span>
+            <div class="flex flex-col gap-2 items-center">
+              <p class="text-xs sm:text-sm text-gray-700 leading-relaxed text-center px-2">{{ descriptionFor(pet) }}</p>
+              <div class="flex flex-wrap gap-1 sm:gap-2 justify-center">
+                <span 
+                  v-for="tag in getPetTagsForPet(pet)" 
+                  :key="`${pet.id}-${tag}`"
+                  class="inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs sm:text-sm font-medium justify-center truncate border max-w-full"
+                >
+                  <span class="truncate text-xs sm:text-sm">{{ tag }}</span>
+                </span>
+              </div>
             </div>
           </div>
         </div>
diff --git a/resources/js/Components/filters/FilterBreedPopover.vue b/resources/js/Components/filters/FilterBreedPopover.vue
new file mode 100644
index 00000000..71ccd820
--- /dev/null
+++ b/resources/js/Components/filters/FilterBreedPopover.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  filterId: { type: String, default: 'breed' },
+  label: { type: String, required: true },
+  dogBreeds: { type: Array, default: () => [] },
+  catBreeds: { type: Array, default: () => [] },
+  modelValue: { type: Array, default: () => [] },
+  open: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:open', 'changed'])
+
+const { t } = useI18n()
+
+const selected = computed({
+  get: () => Array.isArray(props.modelValue) ? props.modelValue : [],
+  set: (newValue) => {
+    emit('update:modelValue', newValue)
+    emit('changed', props.filterId)
+  },
+})
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (newValue) => emit('update:open', newValue),
+})
+
+const summary = computed(() => {
+  if (!Array.isArray(selected.value) || selected.value.length === 0) return t('preferences.placeholders.any')
+  return selected.value.join(', ')
+})
+
+const rootRef = ref(null)
+
+function handleClickOutside(event) {
+  if (!isOpen.value) return
+  const root = rootRef.value
+  if (root && !root.contains(event.target)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside, true)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside, true)
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="filter-item transition-all duration-200 ease-in-out hover:shadow-lg" :data-filter-id="filterId" :style="{ zIndex: isOpen ? 1000 : 'auto' }">
+    <span class="block text-sm font-medium text-gray-700 mb-1">{{ label }}</span>
+    <div class="relative">
+      <button type="button" :disabled="(dogBreeds.length + catBreeds.length) === 0" class="w-full text-left cursor-pointer text-black rounded-md border border-gray-300 px-3 py-2 flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50" @click="isOpen = !isOpen">
+        <span>{{ summary }}</span>
+        <div class="flex items-center gap-2">
+          <span v-if="Array.isArray(selected) && selected.length > 0" class="bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">{{ selected.length }}</span>
+          <svg class="size-4 text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd" />
+          </svg>
+        </div>
+      </button>
+      <div v-if="isOpen" class="absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg p-2">
+        <div class="max-h-64 overflow-auto space-y-2">
+          <div v-if="dogBreeds.length > 0">
+            <div class="px-2 py-1 text-xs font-semibold uppercase text-gray-500">{{ t('preferences.breeds.dogs') }}</div>
+            <label v-for="dogBreed in dogBreeds" :key="'dog-'+dogBreed" class="checkbox-wrapper cursor-pointer flex items-center gap-2 text-sm text-gray-700 px-2 py-1 rounded hover:bg-gray-50">
+              <input v-model="selected" type="checkbox" :value="dogBreed" class="rounded border-gray-300 ">
+              <span>{{ dogBreed }}</span>
+            </label>
+          </div>
+          <div v-if="catBreeds.length > 0">
+            <div class="px-2 py-1 text-xs font-semibold uppercase text-gray-500">{{ t('preferences.breeds.cats') }}</div>
+            <label v-for="catBreed in catBreeds" :key="'cat-'+catBreed" class="checkbox-wrapper flex items-center gap-2 text-sm text-gray-700 px-2 py-1 rounded hover:bg-gray-50">
+              <input v-model="selected" type="checkbox" :value="catBreed" class="rounded border-gray-300">
+              <span>{{ catBreed }}</span>
+            </label>
+          </div>
+        </div>
+        <div class="mt-2 flex justify-end gap-2">
+          <button type="button" class="text-xs px-2 py-1 rounded-md border border-gray-300 text-gray-700 cursor-pointer hover:bg-gray-100" @click="selected = []">{{ t('preferences.placeholders.any') }}</button>
+          <button type="button" class="text-xs px-2 py-1 rounded-md bg-indigo-600 text-white cursor-pointer hover:bg-indigo-500" @click="isOpen = false">{{ t('preferences.actions.ok') }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Components/filters/FilterLocationPopover.vue b/resources/js/Components/filters/FilterLocationPopover.vue
new file mode 100644
index 00000000..c66a6078
--- /dev/null
+++ b/resources/js/Components/filters/FilterLocationPopover.vue
@@ -0,0 +1,192 @@
+<script setup>
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  filterId: { type: String, default: 'location' },
+  label: { type: String, required: true },
+  modelValue: { type: String, default: '' },
+  open: { type: Boolean, default: false },
+  recentLocations: { type: Array, default: () => [] },
+  filteredLocations: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:open', 'use', 'clear', 'changed'])
+
+const { t } = useI18n()
+
+const valueProxy = computed({
+  get: () => props.modelValue,
+  set: (newValue) => {
+    emit('update:modelValue', newValue)
+    emit('changed', props.filterId)
+  },
+})
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (newValue) => emit('update:open', newValue),
+})
+
+const rootRef = ref(null)
+function handleClickOutside(e) {
+  if (!isOpen.value) return
+  const root = rootRef.value
+  if (root && !root.contains(e.target)) isOpen.value = false
+}
+onMounted(() => document.addEventListener('click', handleClickOutside, true))
+onBeforeUnmount(() => document.removeEventListener('click', handleClickOutside, true))
+
+const loading = ref(false)
+const errorMsg = ref('')
+const remoteResults = ref([]) // { label, display, lat, lon, kind, importance }
+const cache = new Map()
+let inFlight = null
+
+let debounceTimer = null
+function debounceFetch(q) {
+  clearTimeout(debounceTimer)
+  if (!q || q.trim().length < 3) { remoteResults.value = []; loading.value = false; errorMsg.value = ''; return }
+  loading.value = true; errorMsg.value = ''
+  debounceTimer = setTimeout(() => fetchNominatim(q.trim()), 400)
+}
+
+function normalize(s) { return (s || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').trim() }
+
+function rankOf(kind) {
+  if (kind === 'city') return 3
+  if (kind === 'town') return 2
+  if (kind === 'village') return 1
+  return 0
+}
+
+function dedupeByCanonical(items) {
+  const pick = new Map()
+  for (const it of items) {
+    const key = normalize(`${it.main || ''}|${it.county || ''}|${it.state || ''}`)
+    const prev = pick.get(key)
+    if (!prev) { pick.set(key, it); continue }
+    const a = rankOf(it.kind) + (Number(it.importance) || 0)
+    const b = rankOf(prev.kind) + (Number(prev.importance) || 0)
+    if (a > b) pick.set(key, it)
+  }
+  const seenLabel = new Set()
+  const out = []
+  for (const it of pick.values()) {
+    const lk = normalize(it.label)
+    if (seenLabel.has(lk)) continue
+    seenLabel.add(lk)
+    out.push(it)
+  }
+  return out
+}
+
+async function fetchNominatim(q) {
+  const nq = normalize(q)
+  if (cache.has(nq)) { remoteResults.value = cache.get(nq); loading.value = false; return }
+  if (inFlight) inFlight.abort()
+  inFlight = new AbortController()
+  try {
+    const viewbox = '14.07,54.84,24.15,49.00'
+    const url = `https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&countrycodes=pl&bounded=1&viewbox=${viewbox}&limit=25&q=${encodeURIComponent(q)}`
+    const res = await fetch(url, { headers: { 'Accept': 'application/json', 'Accept-Language': 'pl,en' }, signal: inFlight.signal })
+    if (!res.ok) throw new Error('HTTP')
+    const data = await res.json()
+    const raw = (Array.isArray(data) ? data : []).map(it => {
+      const a = it.address || {}
+      const main = a.city || a.town || a.village || a.hamlet || (it.display_name?.split(',')[0] || it.name) || ''
+      const county = a.county || a.municipality || ''
+      const state = a.state || ''
+      const admin = state || county
+      const label = [main, admin].filter(Boolean).join(', ')
+      const kind = a.city ? 'city' : a.town ? 'town' : a.village ? 'village' : 'other'
+      return { label: label || it.display_name, display: it.display_name, lat: it.lat, lon: it.lon, kind, importance: it.importance || 0, main, county, state }
+    })
+    const sorted = raw.sort((a,b) => {
+      const rk = rankOf(b.kind) - rankOf(a.kind)
+      if (rk !== 0) return rk
+      return (Number(b.importance)||0) - (Number(a.importance)||0)
+    })
+    const results = dedupeByCanonical(sorted).slice(0, 12)
+    cache.set(nq, results)
+    remoteResults.value = results
+    loading.value = false
+  } catch (e) {
+    if (e?.name === 'AbortError') return
+    loading.value = false
+    errorMsg.value = t('preferences.location.loadingError')
+    remoteResults.value = []
+  }
+}
+
+watch(() => valueProxy.value, (q) => { if (isOpen.value) debounceFetch(q) })
+
+const listRef = ref(null)
+const itemHeight = 36
+const viewportHeight = 240
+const scrollTop = ref(0)
+function onScroll() { scrollTop.value = listRef.value ? listRef.value.scrollTop : 0 }
+const startIndex = computed(() => Math.max(0, Math.floor(scrollTop.value / itemHeight) - 3))
+const endIndex = computed(() => startIndex.value + Math.ceil(viewportHeight / itemHeight) + 6)
+const totalHeight = computed(() => (remoteResults.value.length * itemHeight))
+const visibleItems = computed(() => remoteResults.value.slice(startIndex.value, endIndex.value))
+const offsetTop = computed(() => startIndex.value * itemHeight)
+
+function pickRemote(item) { emit('use', item.label) }
+</script>
+
+<template>
+  <div ref="rootRef" class="filter-item" :data-filter-id="filterId" :style="{ zIndex: isOpen ? 1000 : 'auto' }">
+    <label class="block text-sm font-medium text-gray-700 mb-1">{{ label }}</label>
+    <div class="sm:relative z-[3000]">
+      <input :id="`${filterId}-input`" v-model="valueProxy" type="text" class="w-full rounded-md border-gray-300 focus:border-indigo-500 transition-all duration-150 ease-in-out focus:scale-[1.01] focus:ring-2 focus:ring-indigo-500/10" :placeholder="t('preferences.placeholders.cityOrZip')" @focus="isOpen = true" @input="isOpen = true; $emit('changed', filterId)">
+      <div v-if="isOpen" class="mt-1 w-full bg-white border border-gray-200 rounded-md p-2 sm:absolute sm:z-[4000] sm:shadow-lg">
+        <template v-if="(valueProxy || '').length >= 3">
+          <div class="px-2 py-1 text-xs font-semibold uppercase text-gray-500">{{ t('preferences.location.suggestions') }}</div>
+          <div ref="listRef" :style="{ height: viewportHeight + 'px' }" class="relative overflow-auto" @scroll="onScroll">
+            <div :style="{ height: totalHeight + 'px', position: 'relative' }">
+              <div :style="{ position: 'absolute', top: offsetTop + 'px', left: 0, right: 0 }">
+                <button v-for="it in visibleItems" :key="it.display + it.lat + it.lon" type="button" class="w-full cursor-pointer text-left px-2 py-1 rounded hover:bg-gray-50 text-sm text-gray-700" @click="pickRemote(it)">
+                  {{ it.label }}
+                </button>
+              </div>
+            </div>
+          </div>
+          <div v-if="loading" class="flex items-center gap-2 p-2 text-xs text-gray-500">
+            <svg class="animate-spin size-4 text-indigo-600" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" />
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+            </svg>
+            <span>{{ t('preferences.location.loading') }}</span>
+          </div>
+          <div v-if="!loading && visibleItems.length === 0" class="px-2 py-1 text-xs text-gray-500">{{ t('preferences.location.noResults') }}</div>
+        </template>
+
+        <template v-else>
+          <div class="max-h-64 overflow-auto">
+            <template v-if="valueProxy && filteredLocations.length > 0">
+              <div class="px-2 py-1 text-xs font-semibold uppercase text-gray-500">{{ t('preferences.location.results') }}</div>
+              <button v-for="loc in filteredLocations" :key="'f-'+loc" type="button" class="w-full cursor-pointer text-left px-2 py-1 rounded hover:bg-gray-50 text-sm text-gray-700" @click="$emit('use', loc)">
+                {{ loc }}
+              </button>
+            </template>
+            <template v-else-if="valueProxy">
+              <div class="px-2 py-1 text-xs text-gray-500">{{ t('preferences.location.noResultsUseEntered') }}</div>
+            </template>
+            <div v-if="recentLocations.length > 0" class="mt-2">
+              <div class="px-2 py-1 text-xs font-semibold uppercase text-gray-500">{{ t('preferences.location.recent') }}</div>
+              <button v-for="loc in recentLocations" :key="'r-'+loc" type="button" class="w-full cursor-pointer text-left px-2 py-1 rounded hover:bg-gray-50 text-sm text-gray-700" @click="$emit('use', loc)">
+                {{ loc }}
+              </button>
+            </div>
+          </div>
+        </template>
+
+        <div class="mt-2 flex justify-between gap-2">
+          <button type="button" class="text-xs px-2 py-1 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 cursor-pointer" @click="$emit('clear')">{{ t('preferences.actions.clear') }}</button>
+          <button type="button" class="text-xs px-2 py-1 rounded-md bg-indigo-600 text-white hover:bg-indigo-500 cursor-pointer" @click="$emit('use', valueProxy)">{{ t('preferences.location.useThis') }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Components/filters/FilterPopoverMulti.vue b/resources/js/Components/filters/FilterPopoverMulti.vue
new file mode 100644
index 00000000..09631a7d
--- /dev/null
+++ b/resources/js/Components/filters/FilterPopoverMulti.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  filterId: { type: String, required: true },
+  label: { type: String, required: true },
+  options: { type: Array, required: true },
+  modelValue: { type: Array, default: () => [] },
+  open: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:open', 'changed'])
+
+const { t } = useI18n()
+
+const selected = computed({
+  get: () => Array.isArray(props.modelValue) ? props.modelValue : [],
+  set: (newValue) => {
+    emit('update:modelValue', newValue)
+    emit('changed', props.filterId)
+  },
+})
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (newValue) => emit('update:open', newValue),
+})
+
+const summary = computed(() => {
+  if (!Array.isArray(selected.value) || selected.value.length === 0) return t('preferences.placeholders.any')
+  const map = new Map(props.options.map(o => [o.value, o.labelKey ? t(o.labelKey) : (o.label || o.value)]))
+  return selected.value.map(v => map.get(v) || v).join(', ')
+})
+
+const ariaLabel = computed(() => {
+  const s = summary.value
+  const anyText = t('preferences.placeholders.any')
+  return s === anyText ? props.label : `${props.label}: ${s}`
+})
+
+const rootRef = ref(null)
+function handleClickOutside(event) {
+  if (!isOpen.value) return
+  const root = rootRef.value
+  if (root && !root.contains(event.target)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside, true)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside, true)
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="filter-item" :data-filter-id="filterId" :style="{ zIndex: isOpen ? 1000 : 'auto' }">
+    <span class="block text-sm font-medium text-gray-700 mb-1">{{ label }}</span>
+    <div class="relative z-30">
+      <button type="button" :aria-label="ariaLabel" :aria-expanded="isOpen" class="w-full text-left cursor-pointer text-black rounded-md border border-gray-300 px-3 py-2 flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-150 ease-in-out" @click="isOpen = !isOpen">
+        <span>{{ summary }}</span>
+        <div class="flex items-center gap-2">
+          <span v-if="selected.length > 0" class="bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">{{ selected.length }}</span>
+          <svg class="size-4 text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd" />
+          </svg>
+        </div>
+      </button>
+      <div v-if="isOpen" class="absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg p-2">
+        <div class="max-h-60 overflow-auto">
+          <label v-for="opt in options" :key="opt.value" class="checkbox-wrapper cursor-pointer flex items-center gap-2 text-sm text-gray-700 px-2 py-1 rounded hover:bg-gray-50">
+            <input v-model="selected" type="checkbox" :value="opt.value" class="rounded border-gray-300 transition-all duration-150 ease-in-out checked:scale-105">
+            <span>{{ opt.labelKey ? t(opt.labelKey) : (opt.label || opt.value) }}</span>
+          </label>
+        </div>
+        <div class="mt-2 flex justify-end gap-2">
+          <button type="button" class="text-xs px-2 py-1 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all cursor-pointer duration-150 ease-in-out" @click="selected = [];">{{ t('preferences.placeholders.any') }}</button>
+          <button type="button" class="text-xs px-2 py-1 rounded-md bg-indigo-600 text-white hover:bg-indigo-500 transition-all cursor-pointer duration-150 ease-in-out" @click="isOpen = false">{{ t('preferences.actions.ok') }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Components/filters/FilterPopoverSingle.vue b/resources/js/Components/filters/FilterPopoverSingle.vue
new file mode 100644
index 00000000..ccdf8167
--- /dev/null
+++ b/resources/js/Components/filters/FilterPopoverSingle.vue
@@ -0,0 +1,85 @@
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  filterId: { type: String, required: true },
+  label: { type: String, required: true },
+  options: { type: Array, required: true },
+  modelValue: { type: [String, Number, null], default: '' },
+  open: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:open', 'changed'])
+
+const { t } = useI18n()
+
+const valueProxy = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit('update:modelValue', val)
+    emit('changed', props.filterId)
+  },
+})
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (val) => emit('update:open', val),
+})
+
+const summary = computed(() => {
+  const v = valueProxy.value
+  if (!v) return t('preferences.placeholders.any')
+  const opt = props.options.find(o => o.value === v)
+  return opt ? (opt.labelKey ? t(opt.labelKey) : (opt.label || v)) : v
+})
+
+const ariaLabel = computed(() => {
+  const s = summary.value
+  const anyText = t('preferences.placeholders.any')
+  return s === anyText ? props.label : `${props.label}: ${s}`
+})
+
+const rootRef = ref(null)
+function handleClickOutside(event) {
+  if (!isOpen.value) return
+  const root = rootRef.value
+  if (root && !root.contains(event.target)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside, true)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside, true)
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="filter-item" :data-filter-id="filterId" :style="{ zIndex: isOpen ? 1000 : 'auto' }">
+    <span class="block text-sm font-medium text-gray-700 mb-1">{{ label }}</span>
+    <div class="relative z-30">
+      <button type="button" :aria-label="ariaLabel" :aria-expanded="isOpen" class="w-full cursor-pointer text-left text-black rounded-md border border-gray-300 px-3 py-2 flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-150 ease-in-out" @click="isOpen = !isOpen">
+        <span>{{ summary }}</span>
+        <svg class="size-4 text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd" />
+        </svg>
+      </button>
+      <div v-if="isOpen" class="absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg p-2">
+        <div class="max-h-60 overflow-auto">
+          <label v-for="opt in options" :key="opt.value" class="checkbox-wrapper cursor-pointer flex items-center gap-2 text-sm text-gray-700 px-2 py-1 rounded hover:bg-gray-50">
+            <input v-model="valueProxy" type="radio" :name="filterId" :value="opt.value" class="border-gray-300 transition-all duration-150 ease-in-out checked:scale-105">
+            <span>{{ opt.labelKey ? t(opt.labelKey) : (opt.label || opt.value) }}</span>
+          </label>
+        </div>
+        <div class="mt-2 flex justify-end gap-2">
+          <button type="button" class="text-xs px-2 py-1 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all cursor-pointer duration-150 ease-in-out" @click="valueProxy = ''">{{ t('preferences.placeholders.any') }}</button>
+          <button type="button" class="text-xs px-2 py-1 rounded-md bg-indigo-600 text-white hover:bg-indigo-500 transition-all cursor-pointer duration-150 ease-in-out" @click="isOpen = false">{{ t('preferences.actions.ok') }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Components/preferences/MapPreview.vue b/resources/js/Components/preferences/MapPreview.vue
new file mode 100644
index 00000000..637fd3c8
--- /dev/null
+++ b/resources/js/Components/preferences/MapPreview.vue
@@ -0,0 +1,157 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  query: { type: String, default: '' },
+  radiusKm: { type: [Number, null], default: null },
+})
+
+const containerRef = ref(null)
+let mapInstance = null
+let marker = null
+let circle = null
+let polygon = null
+let leaflet = null
+
+let polandGeo = null
+const geoCache = new Map()
+
+const POLAND_BOUNDS = [
+  [49.0, 14.07],
+  [54.84, 24.15],
+]
+
+const { t } = useI18n()
+
+function isWholeCountry(query) {
+  const normalizedQuery = (query || '').trim().toLowerCase()
+  const whole = (t('preferences.location.wholeCountry') || '').toLowerCase()
+  const country = (t('preferences.location.countryFallback') || '').toLowerCase()
+  return normalizedQuery === country || normalizedQuery === whole
+}
+function normalizeString(text) { return (text || '').toLowerCase().trim() }
+
+async function ensureLeafletLoaded() {
+  if (leaflet) return
+  leaflet = await import('https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js')
+  if (!document.getElementById('leaflet-css')) {
+    const link = document.createElement('link')
+    link.id = 'leaflet-css'
+    link.rel = 'stylesheet'
+    link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
+    document.head.appendChild(link)
+  }
+}
+
+async function geocodeNominatim(query, signal) {
+  const viewbox = '14.07,54.84,24.15,49.00'
+  const url = `https://nominatim.openstreetmap.org/search?format=json&limit=1&bounded=1&viewbox=${viewbox}&q=${encodeURIComponent(query)}`
+  const res = await fetch(url, { headers: { 'Accept': 'application/json', 'Accept-Language': 'pl,en' }, signal })
+  if (!res.ok) throw new Error('nom http')
+  const data = await res.json()
+  if (!Array.isArray(data) || data.length === 0) throw new Error('nom empty')
+  const { lat, lon } = data[0]
+  return [parseFloat(lat), parseFloat(lon)]
+}
+
+async function fetchPolandGeoJSON() {
+  if (polandGeo) return polandGeo
+  try {
+    const url = 'https://nominatim.openstreetmap.org/search?country=Poland&polygon_geojson=1&format=json'
+    const res = await fetch(url, { headers: { 'Accept': 'application/json' } })
+    if (!res.ok) throw new Error('geojson http')
+    const data = await res.json()
+    const item = Array.isArray(data) ? data.find(entry => entry?.geojson) : null
+    if (item?.geojson) { polandGeo = item.geojson; return polandGeo }
+    throw new Error('geojson empty')
+  } catch {
+    return null
+  }
+}
+
+function renderCenter(center) {
+  if (!mapInstance) return
+  if (!marker) marker = leaflet.marker(center).addTo(mapInstance)
+  else marker.setLatLng(center)
+  const radiusMeters = (props.radiusKm ? Number(props.radiusKm) : 0) * 1000
+  if (radiusMeters > 0) {
+    if (!circle) circle = leaflet.circle(center, { radius: radiusMeters, color: '#4f46e5', fillColor: '#6366f1', fillOpacity: 0.15 }).addTo(mapInstance)
+    else { circle.setLatLng(center); circle.setRadius(radiusMeters) }
+    try { mapInstance.fitBounds(circle.getBounds(), { padding: [20, 20] }) } catch { mapInstance.setView(center, 11) }
+  } else {
+    if (circle) { mapInstance.removeLayer(circle); circle = null }
+    mapInstance.setView(center, 11)
+  }
+}
+
+let inFlight = null
+let debounceTimer = null
+
+async function render() {
+  await ensureLeafletLoaded()
+  if (!containerRef.value) {
+    await nextTick()
+    if (!containerRef.value) return
+  }
+  const searchQueryRaw = (props.query || '')
+  const searchQuery = searchQueryRaw.trim()
+
+  if (!mapInstance) {
+    mapInstance = leaflet.map(containerRef.value, { scrollWheelZoom: false, attributionControl: true })
+    leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; OpenStreetMap contributors' }).addTo(mapInstance)
+  }
+
+  if (mapInstance && polygon) { mapInstance.removeLayer(polygon); polygon = null }
+
+  if (isWholeCountry(searchQuery) || searchQuery === '') {
+    const geo = await fetchPolandGeoJSON()
+    if (!mapInstance) return
+    if (geo) {
+      polygon = leaflet.geoJSON(geo, { style: { color: '#4f46e5', weight: 1, fillColor: '#6366f1', fillOpacity: 0.15 } }).addTo(mapInstance)
+      try { mapInstance.fitBounds(polygon.getBounds(), { padding: [10, 10] }) } catch { mapInstance.fitBounds(POLAND_BOUNDS, { padding: [10, 10] }) }
+    } else {
+      polygon = leaflet.rectangle(POLAND_BOUNDS, { color: '#4f46e5', weight: 1, fillColor: '#6366f1', fillOpacity: 0.15 }).addTo(mapInstance)
+      mapInstance.fitBounds(POLAND_BOUNDS, { padding: [10, 10] })
+    }
+    if (mapInstance && marker) { mapInstance.removeLayer(marker); marker = null }
+    if (mapInstance && circle) { mapInstance.removeLayer(circle); circle = null }
+    return
+  }
+
+  const cacheKey = normalizeString(searchQuery)
+  const cached = geoCache.get(cacheKey)
+  if (cached) {
+    renderCenter(cached)
+  }
+
+  clearTimeout(debounceTimer)
+  if (inFlight) inFlight.abort()
+  inFlight = new AbortController()
+  debounceTimer = setTimeout(async () => {
+    try {
+      const center = await geocodeNominatim(searchQuery, inFlight.signal)
+      if (center) { geoCache.set(cacheKey, center); renderCenter(center) }
+    } catch (error) { /* ignore abort/errors */ }
+  }, 300)
+}
+
+let stopWatch = null
+onMounted(async () => {
+  await nextTick()
+  await render()
+  stopWatch = watch(() => [props.query, props.radiusKm], () => { render() }, { deep: false })
+})
+
+onBeforeUnmount(() => {
+  if (stopWatch) stopWatch()
+  if (inFlight) inFlight.abort()
+  if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = null }
+  if (mapInstance) { mapInstance.remove(); mapInstance = null }
+  marker = null; circle = null; polygon = null
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="w-full" style="height: 260px;" />
+</template>
diff --git a/resources/js/Components/preferences/PreferencesForm.vue b/resources/js/Components/preferences/PreferencesForm.vue
new file mode 100644
index 00000000..6e14f949
--- /dev/null
+++ b/resources/js/Components/preferences/PreferencesForm.vue
@@ -0,0 +1,188 @@
+<script setup>
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { usePage } from '@inertiajs/vue3'
+import { Step1Basic, Step2Health, Step3Location, Step4Attitudes, Step5ActivityTags } from './Steps'
+import TopFilters from './TopFilters.vue'
+import PawPrints from '@/Components/PawPrints.vue'
+import { usePreferencesStore } from '@/stores/preferences'
+import { useLocation } from '@/composables/useLocation'
+import { useBreeds } from '@/composables/useBreeds'
+import { useTopFilters } from '@/composables/useTopFilters'
+import { selectorConfigs } from '@/helpers/selectors'
+import { speciesOptions as speciesCfg, sexOptions as sexCfg, healthOptions as healthCfg, adoptionOptions as adoptionCfg } from '@/helpers/preferencesConfig'
+
+const { t } = useI18n()
+
+const currentStep = ref(1)
+
+const stepTitles = computed(() => [
+  t('preferences.steps.basic'),
+  t('preferences.steps.health'),
+  t('preferences.steps.location'),
+  t('preferences.steps.attitudes'),
+  t('preferences.steps.activity'),
+])
+
+const prefs = usePreferencesStore()
+const form = computed({
+  get: () => prefs.form,
+  set: (newValue) => prefs.setForm(newValue || {}),
+})
+
+const { locationOpen, recentLocations, filteredLocations, selectLocation, clearLocation, loadRecentLocations, radiusOptions } = useLocation(form)
+const { dogBreedsAvailable, catBreedsAvailable } = useBreeds(form)
+const { moveFilterById } = useTopFilters()
+
+const speciesOptions = speciesCfg
+const sexOptions = sexCfg
+const page = usePage()
+const colorOptions = computed(() => {
+  const colors = page?.props?.colors || []
+  return Array.isArray(colors) ? colors.map((c) => ({ value: c, label: c })) : []
+})
+const healthOptions = healthCfg
+const adoptionOptions = adoptionCfg
+
+const speciesOpen = ref(false)
+const colorOpen = ref(false)
+const healthOpen = ref(false)
+const adoptionOpen = ref(false)
+const healthChecksOpen = ref(false)
+const breedOpen = ref(false)
+const sexOpen = ref(false)
+
+const tagOptions = computed(() => {
+  const tags = page?.props?.tags
+  return Array.isArray(tags) ? tags : []
+})
+
+function toggleTag(tag) {
+  const idx = form.value.tags.indexOf(tag)
+  if (idx === -1) form.value.tags.push(tag)
+  else form.value.tags.splice(idx, 1)
+  moveFilterById('tags')
+}
+
+watch(() => form.value.species, async () => {
+  form.value.breed = []
+  await nextTick()
+  moveFilterById('species')
+}, { deep: true })
+
+onMounted(() => {
+  loadRecentLocations()
+})
+</script>
+
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-orange-200/40 via-pink-100/40 to-blue-200/40 relative">
+    <PawPrints />
+
+    <div class="mx-auto max-w-5xl px-6 lg:px-8 py-10">
+      <div class="mb-6">
+        <h1 class="text-3xl font-semibold text-gray-900">{{ t('preferences.title') }}</h1>
+        <p class="mt-2 text-gray-800">{{ t('preferences.subtitle') }}</p>
+      </div>
+
+      <div class="bg-white/70 backdrop-blur-md border border-gray-200/50 rounded-xl p-6 space-y-6 shadow-lg">
+        <div class="flex flex-col gap-2">
+          <div class="grid grid-cols-5 gap-2">
+            <div v-for="stepNumber in 5" :key="`dot-` + stepNumber" class="flex items-center justify-center">
+              <button :aria-label="`Przejdź do kroku ${stepNumber}: ${stepTitles[stepNumber - 1]}`" :title="`${stepNumber}. ${stepTitles[stepNumber - 1]}`" type="button" class="size-8 cursor-pointer rounded-full flex items-center justify-center text-sm shrink-0 transition-all duration-150 ease-in-out"
+                      :class="stepNumber === currentStep ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-700'"
+                      @click="currentStep = stepNumber"
+              >
+                {{ stepNumber }}
+              </button>
+            </div>
+          </div>
+          <div class="grid grid-cols-5 gap-2">
+            <span v-for="(title, idx) in stepTitles" :key="idx" class="text-center text-xs sm:text-sm text-gray-600 truncate"
+                  :class="(idx + 1) === currentStep ? 'text-indigo-700 font-medium' : ''"
+            >
+              {{ title }}
+            </span>
+          </div>
+        </div>
+
+        <TopFilters />
+
+        <div v-if="currentStep === 1">
+          <Step1Basic
+            v-model:species-open="speciesOpen"
+            v-model:breed-open="breedOpen"
+            v-model:sex-open="sexOpen"
+            v-model:color-open="colorOpen"
+            aria-
+            :form="form"
+            :selector-configs="selectorConfigs"
+            :species-options="speciesOptions"
+            :sex-options="sexOptions"
+            :color-options="colorOptions"
+            :dog-breeds-available="dogBreedsAvailable"
+            :cat-breeds-available="catBreedsAvailable"
+            :move-filter-by-id="moveFilterById"
+          />
+        </div>
+
+        <div v-else-if="currentStep === 2">
+          <Step2Health
+            v-model:health-open="healthOpen"
+            v-model:adoption-open="adoptionOpen"
+            v-model:health-checks-open="healthChecksOpen"
+            :form="form"
+            :health-options="healthOptions"
+            :adoption-options="adoptionOptions"
+            :move-filter-by-id="moveFilterById"
+          />
+        </div>
+
+        <div v-else-if="currentStep === 3">
+          <Step3Location
+            v-model:location-open="locationOpen"
+            :form="form"
+            :recent-locations="recentLocations"
+            :filtered-locations="filteredLocations"
+            :radius-options="radiusOptions"
+            :select-location="selectLocation"
+            :clear-location="clearLocation"
+            :move-filter-by-id="moveFilterById"
+          />
+        </div>
+
+        <div v-else-if="currentStep === 4">
+          <Step4Attitudes
+            :form="form"
+            :selector-configs="selectorConfigs"
+            :move-filter-by-id="moveFilterById"
+          />
+        </div>
+
+        <div v-else-if="currentStep === 5">
+          <Step5ActivityTags
+            :form="form"
+            :selector-configs="selectorConfigs"
+            :tag-options="tagOptions"
+            :move-filter-by-id="moveFilterById"
+            :toggle-tag="toggleTag"
+          />
+        </div>
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <div class="w-full sm:w-auto">
+            <button type="button" class="inline-flex items-center cursor-pointer rounded-md bg-gray-100 px-6 py-3 text-sm font-medium text-gray-800 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 transition-all duration-150 ease-in-out" @click="prefs.reset()">
+              {{ t('preferences.actions.reset') }}
+            </button>
+          </div>
+          <div class="flex items-center gap-3 w-full sm:w-auto justify-end">
+            <button type="button" class="px-6 py-3 rounded-md border cursor-pointer border-gray-300 text-gray-700 text-sm font-medium transition-all duration-150 ease-in-out hover:bg-gray-50" :disabled="currentStep===1" @click="currentStep--">{{ t('common.prev') || 'Wstecz' }}</button>
+            <button v-if="currentStep < 5" type="button" class="px-6 py-3 cursor-pointer rounded-md bg-indigo-600 text-white text-sm font-medium transition-all duration-150 ease-in-out hover:bg-indigo-700" :disabled="currentStep===5" @click="currentStep++">{{ t('common.next') || 'Dalej' }}</button>
+            <button v-else type="button" class="inline-flex cursor-pointer items-center rounded-md bg-indigo-600 px-6 py-3 text-sm font-medium text-white hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-150 ease-in-out" @click="prefs.apply()">
+              {{ t('preferences.actions.apply') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Components/preferences/Steps/Step1Basic.vue b/resources/js/Components/preferences/Steps/Step1Basic.vue
new file mode 100644
index 00000000..db31dc7c
--- /dev/null
+++ b/resources/js/Components/preferences/Steps/Step1Basic.vue
@@ -0,0 +1,114 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ChoiceTiles from '@/Components/ChoiceTiles.vue'
+import FilterPopoverMulti from '@/Components/filters/FilterPopoverMulti.vue'
+import FilterPopoverSingle from '@/Components/filters/FilterPopoverSingle.vue'
+import FilterBreedPopover from '@/Components/filters/FilterBreedPopover.vue'
+import { usePreferencesStore } from '@/stores/preferences'
+
+const props = defineProps({
+  selectorConfigs: { type: Object, required: true },
+  speciesOptions: { type: Array, required: true },
+  sexOptions: { type: Array, required: true },
+  colorOptions: { type: Array, required: true },
+  dogBreedsAvailable: { type: Object, required: true },
+  catBreedsAvailable: { type: Object, required: true },
+  speciesOpen: { type: Boolean, required: true },
+  breedOpen: { type: Boolean, required: true },
+  sexOpen: { type: Boolean, required: true },
+  colorOpen: { type: Boolean, required: true },
+  moveFilterById: { type: Function, required: true },
+})
+
+const emit = defineEmits(['update:speciesOpen','update:breedOpen','update:sexOpen','update:colorOpen'])
+
+const { t } = useI18n()
+
+const speciesOpenModel = computed({ get: () => props.speciesOpen, set: (value) => emit('update:speciesOpen', value) })
+const breedOpenModel = computed({ get: () => props.breedOpen, set: (value) => emit('update:breedOpen', value) })
+const sexOpenModel = computed({ get: () => props.sexOpen, set: (value) => emit('update:sexOpen', value) })
+const colorOpenModel = computed({ get: () => props.colorOpen, set: (value) => emit('update:colorOpen', value) })
+
+const prefs = usePreferencesStore()
+const form = computed({ get: () => prefs.form, set: (value) => prefs.setForm(value || {}) })
+</script>
+
+<template>
+  <main role="main">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <FilterPopoverMulti
+        v-model="form.species"
+        v-model:open="speciesOpenModel"
+        filter-id="species"
+        :label="t('preferences.labels.species')"
+        :options="speciesOptions"
+        @changed="() => moveFilterById('species')"
+      />
+
+      <FilterBreedPopover
+        v-model="form.breed"
+        v-model:open="breedOpenModel"
+        filter-id="breed"
+        :label="t('preferences.labels.breed')"
+        :dog-breeds="dogBreedsAvailable"
+        :cat-breeds="catBreedsAvailable"
+        @changed="() => moveFilterById('breed')"
+      />
+
+      <FilterPopoverSingle
+        v-model="form.sex"
+        v-model:open="sexOpenModel"
+        filter-id="sex"
+        :label="t('preferences.labels.sex')"
+        :options="sexOptions"
+        @changed="() => moveFilterById('sex')"
+      />
+
+      <FilterPopoverMulti
+        v-model="form.color"
+        v-model:open="colorOpenModel"
+        filter-id="color"
+        :label="t('preferences.labels.color')"
+        :options="colorOptions"
+        @changed="() => moveFilterById('color')"
+      />
+
+      <div class="filter-item transition-all duration-200 ease-in-out" data-filter-id="age">
+        <div class="flex items-center justify-between mb-3">
+          <span class="block text-sm font-medium text-gray-700">{{ t('preferences.labels.age') }}</span>
+          <button type="button" class="text-xs px-2 py-1 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all cursor-pointer duration-150 ease-in-out" @click="form.ageIndex = []; moveFilterById('age')">{{ t('preferences.placeholders.any') }}</button>
+        </div>
+        <ChoiceTiles :columns="props.selectorConfigs.age.columns" :options="props.selectorConfigs.age.options" :model-value="form.ageIndex" :multiple="true" @update:model-value="value => { form.ageIndex = value; moveFilterById('age') }">
+          <template #label="{ option }">
+            <span class="text-sm font-medium">{{ option.labelKey ? t(option.labelKey) : option.label }}</span>
+          </template>
+        </ChoiceTiles>
+      </div>
+
+      <div class="filter-item" data-filter-id="size">
+        <div class="flex items-center justify-between mb-3">
+          <span class="block text-sm font-medium text-gray-700">{{ t('preferences.labels.size') }}</span>
+          <button type="button" class="text-xs px-2 py-1 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all cursor-pointer duration-150 ease-in-out" @click="form.sizeIndex = []; moveFilterById('size')">{{ t('preferences.placeholders.any') }}</button>
+        </div>
+        <ChoiceTiles :columns="props.selectorConfigs.size.columns" :options="props.selectorConfigs.size.options" :model-value="form.sizeIndex" :multiple="true" @update:model-value="value => { form.sizeIndex = value; moveFilterById('size') }">
+          <template #label="{ option }">
+            <span class="text-sm font-medium">{{ option.labelKey ? t(option.labelKey) : option.label }}</span>
+          </template>
+        </ChoiceTiles>
+      </div>
+
+      <div class="filter-item" data-filter-id="weight">
+        <div class="flex items-center justify-between mb-3">
+          <span class="block text-sm font-medium text-gray-700">{{ t('preferences.labels.weightKg') }}</span>
+          <button type="button" class="text-xs px-2 py-1 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all cursor-pointer duration-150 ease-in-out" @click="form.weightState = []; moveFilterById('weight')">{{ t('preferences.placeholders.any') }}</button>
+        </div>
+        <ChoiceTiles :columns="props.selectorConfigs.weight.columns" :options="props.selectorConfigs.weight.options" :model-value="form.weightState" :multiple="true" @update:model-value="value => { form.weightState = value; moveFilterById('weight') }">
+          <template #label="{ option }">
+            <span class="text-sm font-medium">{{ option.labelKey ? t(option.labelKey) : option.label }}</span>
+          </template>
+        </ChoiceTiles>
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/resources/js/Components/preferences/Steps/Step2Health.vue b/resources/js/Components/preferences/Steps/Step2Health.vue
new file mode 100644
index 00000000..d784569c
--- /dev/null
+++ b/resources/js/Components/preferences/Steps/Step2Health.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import FilterPopoverMulti from '@/Components/filters/FilterPopoverMulti.vue'
+import { usePreferencesStore } from '@/stores/preferences'
+
+const props = defineProps({
+  healthOptions: { type: Array, required: true },
+  adoptionOptions: { type: Array, required: true },
+  healthOpen: { type: Boolean, required: true },
+  adoptionOpen: { type: Boolean, required: true },
+  healthChecksOpen: { type: Boolean, required: true },
+  moveFilterById: { type: Function, required: true },
+})
+
+const emit = defineEmits(['update:healthOpen','update:adoptionOpen','update:healthChecksOpen'])
+
+const { t } = useI18n()
+
+const healthOpenModel = computed({ get: () => props.healthOpen, set: (value) => emit('update:healthOpen', value) })
+const adoptionOpenModel = computed({ get: () => props.adoptionOpen, set: (value) => emit('update:adoptionOpen', value) })
+const healthChecksOpenModel = computed({ get: () => props.healthChecksOpen, set: (value) => emit('update:healthChecksOpen', value) })
+
+const prefs = usePreferencesStore()
+const form = computed({ get: () => prefs.form, set: (value) => prefs.setForm(value || {}) })
+
+const healthChecksCount = computed(() =>
+  (form.value.vaccinated ? 1 : 0) +
+  (form.value.sterilized ? 1 : 0) +
+  (form.value.microchipped ? 1 : 0) +
+  (form.value.dewormed ? 1 : 0) +
+  (form.value.defleaTreated ? 1 : 0),
+)
+
+const healthChecksSummary = computed(() => {
+  const selected = []
+  if (form.value.vaccinated) selected.push(t('preferences.checks.vaccinated'))
+  if (form.value.sterilized) selected.push(t('preferences.checks.sterilized'))
+  if (form.value.microchipped) selected.push(t('preferences.checks.microchipped'))
+  if (form.value.dewormed) selected.push(t('preferences.checks.dewormed'))
+  if (form.value.defleaTreated) selected.push(t('preferences.checks.defleaTreated'))
+  if (selected.length === 0) return t('preferences.placeholders.any')
+  return selected.join(', ')
+})
+</script>
+
+<template>
+  <main role="main">
+    <div class="space-y-6">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <FilterPopoverMulti
+          v-model="form.healthStatus"
+          v-model:open="healthOpenModel"
+          filter-id="health"
+          :label="t('preferences.labels.healthStatus')"
+          :options="healthOptions"
+          @changed="() => moveFilterById('health')"
+        />
+
+        <FilterPopoverMulti
+          v-model="form.adoptionStatus"
+          v-model:open="adoptionOpenModel"
+          filter-id="adoption"
+          :label="t('preferences.labels.adoptionStatus')"
+          :options="adoptionOptions"
+          @changed="() => moveFilterById('adoption')"
+        />
+      </div>
+
+      <div class="filter-item" data-filter-id="health-checks" :style="{ zIndex: healthChecksOpenModel ? 1000 : 'auto' }">
+        <span class="block text-sm font-medium text-gray-700 mb-1">{{ t('preferences.labels.healthChecks') }}</span>
+        <div class="relative z-30">
+          <button type="button" :aria-label="(healthChecksCount > 0 ? (t('preferences.labels.healthChecks') + ': ' + healthChecksSummary) : t('preferences.labels.healthChecks'))" :aria-expanded="healthChecksOpenModel" class="w-full text-left text-black rounded-md border border-gray-300 px-3 py-2 flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-150 ease-in-out" @click="healthChecksOpenModel = !healthChecksOpenModel">
+            <span>{{ healthChecksSummary }}</span>
+            <div class="flex items-center gap-2">
+              <span v-if="healthChecksCount > 0" class="bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">{{ healthChecksCount }}</span>
+              <svg class="size-4 text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clip-rule="evenodd" />
+              </svg>
+            </div>
+          </button>
+          <div v-if="healthChecksOpenModel" class="absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg p-3">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <label class="inline-flex items-center cursor-pointer gap-2 text-sm text-gray-700">
+                <input v-model="form.vaccinated" type="checkbox" :aria-label="t('preferences.checks.vaccinated')" class="rounded cursor-pointer border-gray-300 transition-all duration-150 ease-in-out checked:scale-105" @change="moveFilterById('health-checks')"> {{ t('preferences.checks.vaccinated') }}
+              </label>
+              <label class="inline-flex items-center cursor-pointer gap-2 text-sm text-gray-700">
+                <input v-model="form.sterilized" type="checkbox" :aria-label="t('preferences.checks.sterilized')" class="rounded cursor-pointer border-gray-300 transition-all duration-150 ease-in-out checked:scale-105" @change="moveFilterById('health-checks')"> {{ t('preferences.checks.sterilized') }}
+              </label>
+              <label class="inline-flex items-center cursor-pointer gap-2 text-sm text-gray-700">
+                <input v-model="form.microchipped" type="checkbox" :aria-label="t('preferences.checks.microchipped')" class="rounded cursor-pointer border-gray-300 transition-all duration-150 ease-in-out checked:scale-105" @change="moveFilterById('health-checks')"> {{ t('preferences.checks.microchipped') }}
+              </label>
+              <label class="inline-flex items-center cursor-pointer gap-2 text-sm text-gray-700">
+                <input v-model="form.dewormed" type="checkbox" :aria-label="t('preferences.checks.dewormed')" class="rounded cursor-pointer border-gray-300 transition-all duration-150 ease-in-out checked:scale-105" @change="moveFilterById('health-checks')"> {{ t('preferences.checks.dewormed') }}
+              </label>
+              <label class="inline-flex items-center cursor-pointer gap-2 text-sm text-gray-700">
+                <input v-model="form.defleaTreated" type="checkbox" :aria-label="t('preferences.checks.defleaTreated')" class="rounded cursor-pointer border-gray-300 transition-all duration-150 ease-in-out checked:scale-105" @change="moveFilterById('health-checks')"> {{ t('preferences.checks.defleaTreated') }}
+              </label>
+            </div>
+            <div class="mt-3 flex justify-end gap-2">
+              <button type="button" class="text-xs px-2 py-1 rounded-md border cursor-pointer border-gray-300 text-gray-700 hover:bg-gray-100 transition-all duration-150 ease-in-out" @click="form.vaccinated=false;form.sterilized=false;form.microchipped=false;form.dewormed=false;form.defleaTreated=false; moveFilterById('health-checks')">{{ t('preferences.placeholders.any') }}</button>
+              <button type="button" class="text-xs px-2 py-1 cursor-pointer rounded-md bg-indigo-600 text-white hover:bg-indigo-500 transition-all duration-150 ease-in-out" @click="healthChecksOpenModel = false">{{ t('common.ok') }}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main> 
+</template>
diff --git a/resources/js/Components/preferences/Steps/Step3Location.vue b/resources/js/Components/preferences/Steps/Step3Location.vue
new file mode 100644
index 00000000..5f3316f4
--- /dev/null
+++ b/resources/js/Components/preferences/Steps/Step3Location.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import FilterLocationPopover from '@/Components/filters/FilterLocationPopover.vue'
+import MapPreview from '@/Components/preferences/MapPreview.vue'
+import { usePreferencesStore } from '@/stores/preferences'
+
+const props = defineProps({
+  recentLocations: { type: Object, required: true },
+  filteredLocations: { type: Object, required: true },
+  locationOpen: { type: Boolean, required: true },
+  radiusOptions: { type: Array, required: true },
+  selectLocation: { type: Function, required: true },
+  clearLocation: { type: Function, required: true },
+  moveFilterById: { type: Function, required: true },
+})
+
+const emit = defineEmits(['update:locationOpen'])
+
+const { t } = useI18n()
+
+const locationOpenModel = computed({ get: () => props.locationOpen, set: (value) => emit('update:locationOpen', value) })
+
+const prefs = usePreferencesStore()
+const form = computed({ get: () => prefs.form, set: (value) => prefs.setForm(value || {}) })
+
+const locationText = computed(() => {
+  const loc = form.value?.location
+  if (typeof loc === 'string') return loc
+  if (loc && typeof loc === 'object') return loc.city || loc.name || loc.label || ''
+  return ''
+})
+
+const effectiveRadius = computed(() => {
+  const q = locationText.value?.trim()
+  const wholeCountry = t('preferences.location.wholeCountry').toLowerCase()
+  if (!q || q.toLowerCase() === wholeCountry) return null
+  return form.value?.radiusKm ?? null
+})
+</script>
+
+<template>
+  <main role="main">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <FilterLocationPopover
+        v-model="form.location"
+        v-model:open="locationOpenModel"
+        filter-id="location"
+        :label="t('preferences.labels.location')"
+        :recent-locations="recentLocations"
+        :filtered-locations="filteredLocations"
+        @use="selectLocation"
+        @clear="clearLocation"
+      />
+
+      <div class="space-y-4">
+        <div class="filter-item" data-filter-id="radius">
+          <label for="radius-select" class="block text-sm font-medium text-gray-700 mb-1">{{ t('preferences.labels.radiusKm') }}</label>
+          <select id="radius-select" v-model="form.radiusKm" class="w-full cursor-pointer rounded-md border-gray-300 focus:border-indigo-500 transition-all duration-150 ease-in-out focus:scale-[1.01] focus:ring-2 focus:ring-indigo-500/10" :disabled="!locationText || locationText.toLowerCase() === t('preferences.location.wholeCountry').toLowerCase()" @change="moveFilterById('radius')">
+            <option :value="null">{{ t('preferences.placeholders.any') }}</option>
+            <option v-for="opt in radiusOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+          </select>
+        </div>
+
+        <div class="rounded-lg overflow-hidden border border-gray-200 bg-white">
+          <div class="px-3 py-2 text-sm text-gray-700 border-b border-gray-200">
+            {{ locationText || t('preferences.placeholders.cityOrZip') }}
+          </div>
+          <MapPreview :query="locationText || t('preferences.location.countryFallback')" :radius-km="effectiveRadius" />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/resources/js/Components/preferences/Steps/Step4Attitudes.vue b/resources/js/Components/preferences/Steps/Step4Attitudes.vue
new file mode 100644
index 00000000..b92930cd
--- /dev/null
+++ b/resources/js/Components/preferences/Steps/Step4Attitudes.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ChoiceTiles from '@/Components/ChoiceTiles.vue'
+import { usePreferencesStore } from '@/stores/preferences'
+
+const props = defineProps({
+  selectorConfigs: { type: Object, required: true },
+  moveFilterById: { type: Function, required: true },
+})
+
+const { t } = useI18n()
+const prefs = usePreferencesStore()
+const form = computed({ get: () => prefs.form, set: (value) => prefs.setForm(value || {}) })
+</script>
+
+<template>
+  <main role="main">
+    <div class="bg-white/70 backdrop-blur-md border border-gray-200/60 rounded-xl p-4 filter-item transition-all duration-200 ease-in-outhover:shadow-lg" data-filter-id="attitudes">
+      <div class="flex items-center justify-between mb-4">
+        <span class="block text-base font-medium text-gray-800">{{ t('preferences.attitudes') }}</span>
+      </div>
+      <div class="grid grid-cols-1 md:auto-rows-fr gap-6">
+        <div class="h-full border border-gray-200/70 rounded-lg p-3 bg-white/60 filter-item" data-filter-id="attitude-dogs">
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-xs font-medium text-gray-600">{{ t('preferences.labels.attitudeToDogs') }}</span>
+            <button type="button" :aria-label="t('preferences.labels.attitudeToDogs') + ': ' + t('preferences.placeholders.any')" class="text-[11px] px-2 py-0.5 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all cursor-pointer duration-150 ease-in-out" @click="form.attitudeToDogs = null; props.moveFilterById('attitude-dogs')">{{ t('preferences.placeholders.any') }}</button>
+          </div>
+          <ChoiceTiles :columns="props.selectorConfigs.attitudes.columns" :options="props.selectorConfigs.attitudes.options" :model-value="form.attitudeToDogs" @update:model-value="val => { form.attitudeToDogs = val; props.moveFilterById('attitude-dogs') }">
+            <template #label="{ option }">
+              <span class="text-sm font-medium">{{ option.labelKey ? t(option.labelKey) : option.label }}</span>
+            </template>
+          </ChoiceTiles>
+        </div>
+
+        <div class="h-full border border-gray-200/70 rounded-lg p-3 bg-white/60 filter-item" data-filter-id="attitude-cats">
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-xs font-medium text-gray-600">{{ t('preferences.labels.attitudeToCats') }}</span>
+            <button type="button" :aria-label="t('preferences.labels.attitudeToCats') + ': ' + t('preferences.placeholders.any')" class="text-[11px] px-2 py-0.5 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all cursor-pointer duration-150 ease-in-out  " @click="form.attitudeToCats = null; props.moveFilterById('attitude-cats')">{{ t('preferences.placeholders.any') }}</button>
+          </div>
+          <ChoiceTiles :columns="props.selectorConfigs.attitudes.columns" :options="props.selectorConfigs.attitudes.options" :model-value="form.attitudeToCats" @update:model-value="val => { form.attitudeToCats = val; props.moveFilterById('attitude-cats') }">
+            <template #label="{ option }">
+              <span class="text-sm font-medium">{{ option.labelKey ? t(option.labelKey) : option.label }}</span>
+            </template>
+          </ChoiceTiles>
+        </div>
+
+        <div class="h-full border border-gray-200/70 rounded-lg p-3 bg-white/60 filter-item" data-filter-id="attitude-children">
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-xs font-medium text-gray-600">{{ t('preferences.labels.attitudeToChildren') }}</span>
+            <button type="button" :aria-label="t('preferences.labels.attitudeToChildren') + ': ' + t('preferences.placeholders.any')" class="text-[11px] px-2 py-0.5 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all cursor-pointer duration-150 ease-in-out hover: -translate-y-0.5" @click="form.attitudeToChildren = null; props.moveFilterById('attitude-children')">{{ t('preferences.placeholders.any') }}</button>
+          </div>
+          <ChoiceTiles :columns="props.selectorConfigs.attitudes.columns" :options="props.selectorConfigs.attitudes.options" :model-value="form.attitudeToChildren" @update:model-value="val => { form.attitudeToChildren = val; props.moveFilterById('attitude-children') }">
+            <template #label="{ option }">
+              <span class="text-sm font-medium">{{ option.labelKey ? t(option.labelKey) : option.label }}</span>
+            </template>
+          </ChoiceTiles>
+        </div>
+
+        <div class="h-full border border-gray-200/70 rounded-lg p-3 bg-white/60 filter-item" data-filter-id="attitude-adults">
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-xs font-medium text-gray-600">{{ t('preferences.labels.attitudeToAdults') }}</span>
+            <button type="button" :aria-label="t('preferences.labels.attitudeToAdults') + ': ' + t('preferences.placeholders.any')" class="text-[11px] px-2 py-0.5 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all cursor-pointer duration-150 ease-in-out" @click="form.attitudeToAdults = null; props.moveFilterById('attitude-adults')">{{ t('preferences.placeholders.any') }}</button>
+          </div>
+          <ChoiceTiles :columns="props.selectorConfigs.attitudes.columns" :options="props.selectorConfigs.attitudes.options" :model-value="form.attitudeToAdults" @update:model-value="val => { form.attitudeToAdults = val; props.moveFilterById('attitude-adults') }">
+            <template #label="{ option }">
+              <span class="text-sm font-medium">{{ option.labelKey ? t(option.labelKey) : option.label }}</span>
+            </template>
+          </ChoiceTiles>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/resources/js/Components/preferences/Steps/Step5ActivityTags.vue b/resources/js/Components/preferences/Steps/Step5ActivityTags.vue
new file mode 100644
index 00000000..93ed4dbb
--- /dev/null
+++ b/resources/js/Components/preferences/Steps/Step5ActivityTags.vue
@@ -0,0 +1,143 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ChoiceTiles from '@/Components/ChoiceTiles.vue'
+import { usePreferencesStore } from '@/stores/preferences'
+import { usePreferencesSummary } from '@/composables/usePreferencesSummary'
+
+const props = defineProps({
+  selectorConfigs: { type: Object, required: true },
+  tagOptions: { type: Array, required: true },
+  moveFilterById: { type: Function, required: true },
+})
+
+const { t } = useI18n()
+const prefs = usePreferencesStore()
+const form = computed({ get: () => prefs.form, set: (value) => prefs.setForm(value || {}) })
+
+const { summary, clearItem } = usePreferencesSummary(form, props.selectorConfigs, props.tagOptions)
+
+function toggleTag(tag) {
+  const idx = form.value.tags.indexOf(tag)
+  if (idx === -1) form.value.tags.push(tag)
+  else form.value.tags.splice(idx, 1)
+  props.moveFilterById('tags')
+}
+
+function clearTags() {
+  if (Array.isArray(form.value.tags) && form.value.tags.length) {
+    form.value.tags = []
+    props.moveFilterById('tags')
+  }
+}
+
+function handleClearItem(sectionKey, value) {
+  clearItem(sectionKey, value, props.moveFilterById)
+}
+
+const flatBadges = computed(() => {
+  const items = []
+  for (const sec of summary.value) {
+    for (const it of sec.items) {
+      items.push({ key: sec.key, title: sec.title, value: it.value, label: it.label })
+    }
+  }
+  return items
+})
+
+const showAllBadges = ref(false)
+const baseLimit = computed(() => {
+  try { return (typeof window !== 'undefined' && window.innerWidth < 640) ? 6 : 12 } catch { return 12 }
+})
+const limitedBadges = computed(() => {
+  const arr = flatBadges.value
+  if (showAllBadges.value) return arr
+  const limit = baseLimit.value
+  if (arr.length <= limit) return arr
+  return [...arr.slice(0, limit), { ellipsis: true }]
+})
+
+const showAllTags = ref(false)
+const baseTagLimit = computed(() => {
+  try { return (typeof window !== 'undefined' && window.innerWidth < 640) ? 12 : 30 } catch { return 30 }
+})
+const limitedTags = computed(() => {
+  const tags = Array.isArray(props.tagOptions) ? props.tagOptions : []
+  if (showAllTags.value) return tags
+  const limit = baseTagLimit.value
+  if (tags.length <= limit) return tags
+  return tags.slice(0, limit)
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="filter-item" data-filter-id="activity">
+      <div class="flex items-center justify-between mb-3">
+        <span class="block text-sm font-medium text-gray-700">{{ t('preferences.labels.activityLevel') }}</span>
+        <button type="button" class="text-xs px-2 py-1 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all cursor-pointer duration-150 ease-in-out" @click="form.activityLevel = null; props.moveFilterById('activity')">{{ t('preferences.placeholders.any') }}</button>
+      </div>
+      <ChoiceTiles :columns="props.selectorConfigs.activity.columns" :options="props.selectorConfigs.activity.options" :model-value="form.activityLevel" @update:model-value="val => { form.activityLevel = val; props.moveFilterById('activity') }">
+        <template #label="{ option }">
+          <span class="text-sm font-medium">{{ option.labelKey ? t(option.labelKey) : option.label }}</span>
+        </template>
+      </ChoiceTiles>
+    </div>
+
+    <div class="filter-item" data-filter-id="tags">
+      <div class="flex items-center justify-between mb-2">
+        <span class="block text-sm font-medium text-gray-700">{{ t('preferences.labels.tags') }}</span>
+        <div class="flex items-center gap-2">
+          <button
+            v-if="Array.isArray(tagOptions) && tagOptions.length > baseTagLimit"
+            type="button"
+            class="text-xs px-2 py-1 cursor-pointer rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all duration-150 ease-in-out"
+            @click="showAllTags = !showAllTags"
+          >
+            {{ showAllTags ? t('preferences.actions.collapse') : t('preferences.actions.expand') }}
+          </button>
+          <button
+            v-if="Array.isArray(form.tags) && form.tags.length"
+            type="button"
+            class="text-xs px-2 py-1 cursor-pointer rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-all duration-150 ease-in-out"
+            @click="clearTags"
+          >
+            {{ t('preferences.actions.clear') }}
+          </button>
+        </div>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="tag in limitedTags"
+          :key="tag.value"
+          type="button"
+          class="px-3 py-1 cursor-pointer rounded-full border text-sm transition-all duration-150 ease-in-out"
+          :class="form.tags.includes(tag.value) ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-transparent text-gray-700 border-gray-300'"
+          @click="toggleTag(tag.value, $event)"
+        >
+          {{ tag.label }}<span v-if="typeof tag.count === 'number'" class="ml-1 text-xs" :class="form.tags.includes(tag.value) ? 'text-white' : 'text-gray-500'">({{ tag.count }})</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="filter-item" data-filter-id="summary">
+      <span class="block text-sm font-medium text-gray-700 mb-2">{{ t('preferences.summary') }}</span>
+      <div v-if="summary.length === 0" class="text-sm text-gray-500">{{ t('preferences.placeholders.noActiveFilters') }}</div>
+      <div v-else class="flex flex-wrap gap-2">
+        <template v-for="badge in limitedBadges" :key="badge.ellipsis ? 'ellipsis' : (badge.title + '-' + String(badge.value))">
+          <button v-if="badge.ellipsis" type="button" class="badge-selected cursor-pointer" @click="showAllBadges = true">...</button>
+          <span v-else class="badge-selected">
+            {{ badge.title }}: {{ badge.label }}
+            <button type="button" :aria-label="`Usuń ${badge.title}: ${badge.label}`" class="ml-1 inline-flex items-center justify-center size-4 rounded-full hover:bg-white/20" @click="handleClearItem(badge.key, badge.value)">
+              <svg class="size-3 cursor-pointer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </span>
+        </template>
+        <button v-if="showAllBadges && flatBadges.length > baseLimit" type="button" class="badge-selected cursor-pointer" @click="showAllBadges = false">{{ t('preferences.actions.collapse') }}</button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/Components/preferences/Steps/index.js b/resources/js/Components/preferences/Steps/index.js
new file mode 100644
index 00000000..766215ba
--- /dev/null
+++ b/resources/js/Components/preferences/Steps/index.js
@@ -0,0 +1,5 @@
+export { default as Step1Basic } from './Step1Basic.vue'
+export { default as Step2Health } from './Step2Health.vue'
+export { default as Step3Location } from './Step3Location.vue'
+export { default as Step4Attitudes } from './Step4Attitudes.vue'
+export { default as Step5ActivityTags } from './Step5ActivityTags.vue'
diff --git a/resources/js/Components/preferences/TopFilters.vue b/resources/js/Components/preferences/TopFilters.vue
new file mode 100644
index 00000000..7ce0d61d
--- /dev/null
+++ b/resources/js/Components/preferences/TopFilters.vue
@@ -0,0 +1,6 @@
+<script setup>
+</script>
+
+<template>
+  <div style="display:none" />
+</template>
diff --git a/resources/js/Pages/Dashboard/Dashboard.vue b/resources/js/Pages/Dashboard/Dashboard.vue
index 950873b3..5dfc0d6f 100644
--- a/resources/js/Pages/Dashboard/Dashboard.vue
+++ b/resources/js/Pages/Dashboard/Dashboard.vue
@@ -1,11 +1,14 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Header from '@/Components/Header.vue'
 import MVPSection from './MVPSection.vue'
 import PetGrid from './PetGrid.vue'
 import Footer from '@/Components/Footer.vue'
-import { Head } from '@inertiajs/vue3'
+import { Head, usePage, router } from '@inertiajs/vue3'
+import { usePreferencesStore } from '@/stores/preferences'
+import { routes } from '@/routes'
+import { scorePet } from '@/helpers/scoring'
 
 const { t } = useI18n()
 
@@ -20,6 +23,72 @@ const handleShowPetList = (data) => {
 const handleHidePetList = () => {
   showPetList.value = false
 }
+
+const prefs = usePreferencesStore()
+const filters = computed(() => prefs.form || {})
+
+onMounted(() => {
+  if (prefs.isEmpty) {
+    router.get(routes.preferences.index(), {}, { replace: true })
+  }
+})
+
+const page = usePage()
+const petImageFor = (base) => (base && base.image_url) ? base.image_url : null
+
+const normalizeEnum = (v) => (v && typeof v === 'object') ? (('value' in v) ? v.value : (('name' in v) ? v.name : String(v))) : v
+
+const sourcePets = computed(() => Array.isArray(page.props.pets) ? page.props.pets : (page.props.pets?.data || []))
+const pets = computed(() => (sourcePets.value || []).map((p, idx) => {
+  const base = (p && typeof p === 'object' && 'pet' in p) ? p.pet : p
+  const sexNormalized = normalizeEnum(base.sex)
+  const sexValue = String(sexNormalized ?? '').toLowerCase()
+  const rawStatus = normalizeEnum(base.adoption_status ?? base.status)
+  let statusLabel = rawStatus
+  if (String(rawStatus).toLowerCase() === 'available') {
+    statusLabel = (sexValue === 'male' || sexValue === 'm')
+      ? (t('dashboard.mvp.availablemale'))
+      : (t('dashboard.mvp.availablefemale'))
+  } else if (rawStatus) {
+    const statusKey = String(rawStatus).toLowerCase().replaceAll(' ', '_')
+    statusLabel = t(`dashboard.mvp.statuses.${statusKey}`)
+  }
+
+  const img = petImageFor(base)
+  return {
+    ...base,
+    species: String(normalizeEnum(base.species) ?? '').trim().toLowerCase(),
+    sex: sexNormalized,
+    gender: base.sex ?? base.gender,
+    tags: Array.isArray(base.tags) ? base.tags.map(t => (typeof t === 'string' ? t : t?.name)).filter(Boolean) : [],
+    imageUrl: img,
+    status: statusLabel,
+  }
+}))
+
+const scorePetWrapper = (pet) => scorePet(pet, filters.value)
+
+const sortedPets = computed(() => [...pets.value].sort((a, b) => scorePetWrapper(b) - scorePetWrapper(a)))
+const featuredPet = computed(() => sortedPets.value[0] || null)
+const bestMatchesRest = computed(() => sortedPets.value.slice(1, 13))
+
+const usedIds = computed(() => {
+  const ids = new Set()
+  if (featuredPet.value?.id) ids.add(featuredPet.value.id)
+  for (const p of bestMatchesRest.value) {
+    if (p?.id) ids.add(p.id)
+  }
+  return ids
+})
+
+const dogs = computed(() => sortedPets.value
+  .filter(p => String(p.species).toLowerCase() === 'dog')
+  .slice(0, 12))
+
+const cats = computed(() => sortedPets.value
+  .filter(p => String(p.species).toLowerCase() === 'cat')
+  .slice(0, 12))
+
 </script>
 
 <template>
@@ -40,12 +109,17 @@ const handleHidePetList = () => {
       
     <div v-else class="min-h-screen">
       <Header />
-      <MVPSection />
-      <PetGrid :show-pet-list="showPetList" :current-pet-list="currentPetList" @show-pet-list="handleShowPetList" @hide-pet-list="handleHidePetList" />
+      <MVPSection v-if="featuredPet" :pet="featuredPet" />
+      <PetGrid 
+        :show-pet-list="showPetList" 
+        :current-pet-list="currentPetList"
+        :best-matches-rest="bestMatchesRest"
+        :dogs="dogs"
+        :cats="cats"
+        @show-pet-list="handleShowPetList"
+        @hide-pet-list="handleHidePetList"
+      />
       <Footer />
     </div>
   </transition>
 </template>
-
-<style scoped>
-</style>
diff --git a/resources/js/Pages/Dashboard/MVPSection.vue b/resources/js/Pages/Dashboard/MVPSection.vue
index d7e39671..eeef2d66 100644
--- a/resources/js/Pages/Dashboard/MVPSection.vue
+++ b/resources/js/Pages/Dashboard/MVPSection.vue
@@ -3,28 +3,47 @@ import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { Link } from '@inertiajs/vue3'
 import { HeartIcon, StarIcon, CalendarIcon, MapPinIcon } from '@heroicons/vue/20/solid'
-import { bestMatches } from '@/data/petsData.js'
-import { getPetTags } from '@/helpers/mappers'
 import { routes } from '@/routes'
+import { parsePolishAgeToMonths, formatAge } from '@/helpers/formatters/age.ts'
 
 const { t } = useI18n()
 
-const petData = bestMatches[0]
+const props = defineProps({
+  pet: {
+    type: Object,
+    required: true,
+  },
+})
+
+const petData = props.pet
+const petPersonality = computed(() => Array.isArray(petData.tags) ? petData.tags.slice(0, 6) : [])
 
-const petTags = getPetTags()
-const petPersonality = computed(() => {
-  if (!petData.tags || !Array.isArray(petData.tags)) return []
-  return petData.tags.map(tagId => petTags[tagId]?.name).filter(Boolean)
+const petTagObjects = computed(() => {
+  return petPersonality.value.map(tag => ({
+    name: tag,
+    color: 'rounded-full bg-yellow-100 text-yellow-800',
+  }))
 })
 
+const ageMonths = computed(() => parsePolishAgeToMonths(petData.age))
+const showAge = computed(() => typeof ageMonths.value === 'number' && ageMonths.value > 0)
+const formattedAge = computed(() => showAge.value ? formatAge(ageMonths.value) : '')
+
+const arrivalDate = computed(() => petData.admission_date || '')
+const showArrival = computed(() => typeof arrivalDate.value === 'string' && arrivalDate.value.length > 0)
+const shelterCity = computed(() => petData.shelter_city || '')
+const shelterPostal = computed(() => petData.shelter_postal_code || '')
+const showCity = computed(() => (shelterCity.value && shelterCity.value.length > 0) || (shelterPostal.value && shelterPostal.value.length > 0))
+const formattedLocation = computed(() => [shelterCity.value, shelterPostal.value].filter(Boolean).join(', '))
+
 const characteristics = computed(() => [
-  `${t('dashboard.mvp.age')}: ${petData.age}`,
+  showAge.value ? `${t('dashboard.mvp.age')}: ${formattedAge.value}` : null,
   `${t('dashboard.mvp.breed')}: ${petData.breed}`,
   `${t('dashboard.mvp.status')}: ${petData.status}`,
   `${t('dashboard.mvp.gender')}: ${petData.gender === 'male' ? t('dashboard.mvp.male') : t('dashboard.mvp.female')}`,
   `${t('dashboard.mvp.health')}: ${t('dashboard.mvp.vaccinated')}`,
   `${t('dashboard.mvp.temperament')}: ${t('dashboard.mvp.gentle')}`,
-])
+].filter(Boolean))
 
 </script>
 
@@ -47,27 +66,35 @@ const characteristics = computed(() => [
                 <span class="text-sm font-bold text-red-600">{{ t('dashboard.mvp.featuredPet') }}</span>
               </div>
             </div>
-            <p class="mt-2 sm:mt-3 text-sm/6 sm:text-base/6 font-medium text-pretty text-gray-700">{{ t('dashboard.mvp.description', { breed: petData.breed, name: petData.name }) }}</p>
+            <p class="mt-2 sm:mt-3 text-sm/6 sm:text-base/6 font-medium text-pretty text-gray-700">{{ (petData.description && petData.description.trim()) || t('dashboard.mvp.description', { breed: petData.breed, name: petData.name }) }}</p>
             
             <div class="mt-4 flex gap-4 text-sm font-medium">
-              <div class="flex items-center gap-2">
-                <CalendarIcon class="size-5 text-gray-600" />
-                <span class="text-gray-700">{{ petData.age }}</span>
-              </div>
-              <div class="flex items-center gap-2">
-                <MapPinIcon class="size-5 text-gray-600" />
-                <span class="text-gray-700">{{ petData.breed }}</span>
-              </div>
+              <template v-if="showArrival">
+                <div class="flex items-center gap-2">
+                  <CalendarIcon class="size-5 text-gray-600" />
+                  <span class="text-gray-700">{{ arrivalDate }}</span>
+                </div>
+              </template>
+              <template v-if="showCity">
+                <div class="flex items-center gap-2">
+                  <MapPinIcon class="size-5 text-gray-600" />
+                  <span class="text-gray-700">{{ formattedLocation }}</span>
+                </div>
+              </template>
             </div>
 
             <div class="mt-4">
               <h3 class="text-base font-bold text-[#3B2F1A] mb-3">{{ t('dashboard.mvp.personalityTraits') }}</h3>
-              <ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-2 text-sm/5 font-medium text-gray-700 sm:grid-cols-2 lg:grid">
-                <li v-for="trait in petPersonality" :key="trait" class="flex gap-x-3">
-                  <StarIcon class="size-5 flex-none text-yellow-500" aria-hidden="true" />
-                  {{ trait }}
-                </li>
-              </ul>
+              <div class="flex flex-wrap gap-2">
+                <span 
+                  v-for="tag in petTagObjects" 
+                  :key="tag.name"
+                  class="inline-flex items-center gap-1 rounded-full px-2 py-1 text-sm font-medium justify-center truncate shadow-lg border"
+                  :class="tag.color"
+                >
+                  <span class="truncate text-sm">{{ tag.name }}</span>
+                </span>
+              </div>
             </div>
 
             <div class="mt-4">
diff --git a/resources/js/Pages/Dashboard/PetGrid.vue b/resources/js/Pages/Dashboard/PetGrid.vue
index c34e8165..d140edf4 100644
--- a/resources/js/Pages/Dashboard/PetGrid.vue
+++ b/resources/js/Pages/Dashboard/PetGrid.vue
@@ -2,8 +2,8 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import PetStrip from '@/Components/PetStrip.vue'
-import { bestMatches, dogs, cats } from '@/data/petsData.js'
-import { getPetTags, getGenderInfo } from '@/helpers/mappers'
+import { getGenderInfo } from '@/helpers/mappers'
+import { parsePolishAgeToMonths, formatAge } from '@/helpers/formatters/age.ts'
 import { Link } from '@inertiajs/vue3'
 import { routes } from '@/routes'
 
@@ -16,20 +16,33 @@ const props = defineProps({
     type: Object,
     default: null,
   },
+  bestMatchesRest: {
+    type: Array,
+    default: () => [],
+  },
+  dogs: {
+    type: Array,
+    default: () => [],
+  },
+  cats: {
+    type: Array,
+    default: () => [],
+  },
 })
 
 const emit = defineEmits(['showPetList', 'hidePetList'])
 
-const petTags = getPetTags()
-
 const { t } = useI18n()
 
-const getPetTagsForPet = (pet) => {
-  if (!pet.tags || !Array.isArray(pet.tags)) return []
-  return pet.tags.map(tagId => petTags[tagId]).filter(Boolean)
-}
+const getPetTagsForPet = (pet) => Array.isArray(pet.tags)
+  ? pet.tags.map((t) => (typeof t === 'string' ? t : t?.name)).filter(Boolean)
+  : []
 
-const bestMatchesRest = computed(() => bestMatches.slice(1))
+const descriptionFor = (pet) => {
+  const desc = typeof pet.description === 'string' ? pet.description.trim() : ''
+  if (desc) return desc
+  return t('dashboard.mvp.description', { breed: pet.breed || '', name: pet.name || '' })
+}
 
 const handleShowPetList = (data) => {
   emit('showPetList', data)
@@ -89,26 +102,27 @@ const handleHidePetList = () => {
                 </div>
                 
                 <div class="flex items-center gap-2 mb-3">
-                  <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-1 text-sm font-semibold text-blue-800">{{ pet.age }}</span>
+                  <span 
+                    v-if="parsePolishAgeToMonths(pet.age) > 0"
+                    class="inline-flex items-center rounded-full bg-blue-100 px-2 py-1 text-sm font-semibold text-blue-800"
+                  >{{ formatAge(parsePolishAgeToMonths(pet.age)) }}</span>
                   <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-sm font-semibold text-green-800">{{ pet.status }}</span>
                 </div>
                 
                 <div class="flex flex-wrap gap-1 mb-3">
                   <span 
                     v-for="tag in getPetTagsForPet(pet)" 
-                    :key="`${pet.id}-${tag.name}`"
+                    :key="`${pet.id}-${tag}`"
                     class="inline-flex items-center gap-1 rounded-full px-2 py-1 text-sm font-medium border"
-                    :class="tag.color"
                   >
-                    <span class="text-sm">{{ tag.emoji }}</span>
-                    <span class="text-sm">{{ tag.name }}</span>
+                    <span class="text-sm">{{ tag }}</span>
                   </span>
                 </div>
               </div>
               
               <div class="w-full md:w-80 p-4 border-t md:border-t-0 md:border-l border-gray-200">
                 <h4 class="text-base font-semibold text-gray-700 mb-2">{{ t('dashboard.aboutPet') }}</h4>
-                <p class="text-base text-gray-700 leading-relaxed">{{ pet.description }}</p>
+                <p class="text-base text-gray-700 leading-relaxed">{{ descriptionFor(pet) }}</p>
                 <div class="mt-3">
                   <Link :href="routes.pets.show(pet.id)" class="text-indigo-600 hover:text-indigo-800 transition-all duration-300 font-semibold">{{ t('dashboard.mvp.seeMore') }}</Link>
                 </div>
diff --git a/resources/js/Pages/LandingPage/ButtonSection.vue b/resources/js/Pages/LandingPage/ButtonSection.vue
index 1f80bc4e..1c4ee23b 100644
--- a/resources/js/Pages/LandingPage/ButtonSection.vue
+++ b/resources/js/Pages/LandingPage/ButtonSection.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 import PawPrints from '@/Components/PawPrints.vue'
+import { Link } from '@inertiajs/vue3'
+import { routes } from '@/routes'
 
 const { t } = useI18n()
 </script>
diff --git a/resources/js/Pages/LandingPage/ImageSection.vue b/resources/js/Pages/LandingPage/ImageSection.vue
index 52c1db51..d6d8c87f 100644
--- a/resources/js/Pages/LandingPage/ImageSection.vue
+++ b/resources/js/Pages/LandingPage/ImageSection.vue
@@ -1,12 +1,26 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
-import { dogs, cats } from '@/data/petsData.js'
 import { Link } from '@inertiajs/vue3'
-import { routes } from '@/routes.js'
+import { routes } from '@/routes'
 
 const { t } = useI18n()
 
-const animals = [...dogs, ...cats].slice(0, 6)
+const props = defineProps({
+  pets: {
+    type: [Array, Object],
+    default: () => [],
+  },
+})
+
+const sourcePets = Array.isArray(props.pets) ? props.pets : (props.pets?.data || [])
+const animals = (sourcePets || []).slice(0, 6).map((p) => ({
+  id: p.id,
+  name: p.name,
+  species: p.species,
+  breed: p.breed,
+  description: p.description,
+  imageUrl: p.image_url || null,
+}))
 
 </script>
 
@@ -19,7 +33,7 @@ const animals = [...dogs, ...cats].slice(0, 6)
       </div>
       <div class="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
         <article v-for="post in animals" :key="post.id" class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 sm:pt-48 lg:pt-80">
-          <img :src="post.imageUrl" alt="Pet image" class="absolute inset-0 -z-10 size-full object-cover" width="1200" height="800" loading="lazy" decoding="async">
+          <img :src="post.imageUrl" :alt="`${post.name} - ${post.species} - ${post.breed}`" class="absolute inset-0 -z-10 size-full object-cover" width="1200" height="800" loading="lazy" decoding="async">
           <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
           <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-gray-900/10" />
           <h3 class="mt-3 text-lg/6 font-semibold text-white">
@@ -34,6 +48,3 @@ const animals = [...dogs, ...cats].slice(0, 6)
     </div>
   </div>
 </template>
-
-<style scoped>
-</style>
diff --git a/resources/js/Pages/LandingPage/LandingPage.vue b/resources/js/Pages/LandingPage/LandingPage.vue
index f0f831a3..04cad66f 100644
--- a/resources/js/Pages/LandingPage/LandingPage.vue
+++ b/resources/js/Pages/LandingPage/LandingPage.vue
@@ -1,21 +1,30 @@
 <script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
 import Header from '@/Components/Header.vue'
 import ImageSection from './ImageSection.vue'
-import BackgroundGradient from '@/Components/BackgroundGradient.vue'
 import ButtonSection from './ButtonSection.vue'
+import BackgroundGradient from '@/Components/BackgroundGradient.vue'
 import Footer from '@/Components/Footer.vue'
 import { Head } from '@inertiajs/vue3'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
+const props = defineProps({
+  pets: {
+    type: [Array, Object],
+    default: () => [],
+  },
+})
 </script>
 
 <template>
   <Head :title="t('titles.landingPage')" />
   <BackgroundGradient />
   <Header />
-  <ImageSection />
-  <ButtonSection />
+  <main role="main">
+    <ImageSection :pets="props.pets" />
+    <ButtonSection />
+  </main>
   <Footer />
 </template>
diff --git a/resources/js/Pages/Pets/Partials/PetDetails.vue b/resources/js/Pages/Pets/Partials/PetDetails.vue
index da4106c7..0142bb9f 100644
--- a/resources/js/Pages/Pets/Partials/PetDetails.vue
+++ b/resources/js/Pages/Pets/Partials/PetDetails.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { getPetTags, getAvailableMedicalInfo, getHealthStatusInfo, getPetCharacteristics, getStatusInfo } from '@/helpers/mappers'
+import { getAvailableMedicalInfo, getHealthStatusInfo, getPetCharacteristics, getStatusInfo } from '@/helpers/mappers'
 import PetIcons from '@/Components/Icons/PetIcons.vue'
+import { parsePolishAgeToMonths, formatAge } from '@/helpers/formatters/age.ts'
 
 const props = defineProps({
   pet: {
@@ -13,22 +14,26 @@ const props = defineProps({
 
 const { t } = useI18n()
 
-const petTags = getPetTags()
-
-const petTagObjects = computed(() => {
-  const petData = props.pet
-  if (!petData?.tags || !Array.isArray(petData.tags)) return []
-  return petData.tags.map(tagId => petTags[tagId]).filter(Boolean)
-})
-
 const personalityTraits = computed(() => {
   const pet = props.pet
   if (!pet?.tags || !Array.isArray(pet.tags)) return []
-  return pet.tags.map(tagId => petTags[tagId]?.name).filter(Boolean)
+  return pet.tags.map(tag => (typeof tag === 'string' ? tag : String(tag))).filter(Boolean)
+})
+
+const petTagObjects = computed(() => {
+  return personalityTraits.value.map(tag => ({
+    name: tag,
+    color: 'rounded-full bg-yellow-100 text-yellow-800',
+  }))
 })
 
 const characteristics = computed(() => {
-  return getPetCharacteristics(props.pet).map(item => ({
+  const months = parsePolishAgeToMonths(props.pet?.age)
+  const showAge = typeof months === 'number' && months > 0
+  return getPetCharacteristics({
+    ...props.pet,
+    age: showAge ? formatAge(months) : null,
+  }).map(item => ({
     ...item,
     label: t(item.label),
     value: item.value.startsWith('dashboard.mvp.') ? t(item.value) : item.value,
@@ -38,6 +43,20 @@ const characteristics = computed(() => {
 const medicalInfo = computed(() => {
   return getAvailableMedicalInfo(props.pet)
 })
+
+const getPetStatusVisual = (pet) => {
+  const raw = String((pet?.adoption_status ?? pet?.status) || '').toLowerCase()
+  if (raw === 'quarantined') {
+    return { bg: 'bg-amber-100 text-amber-800 border-amber-200', dot: 'bg-amber-500' }
+  }
+  if (raw === 'adopted') {
+    return { bg: 'bg-gray-200 text-gray-800 border-gray-300', dot: 'bg-gray-500' }
+  }
+  if (raw === 'in temporary home') {
+    return { bg: 'bg-indigo-100 text-indigo-800 border-indigo-200', dot: 'bg-indigo-500' }
+  }
+  return { bg: 'bg-green-100 text-green-800 border-green-200', dot: 'bg-green-500' }
+}
 </script>
 
 <template>
@@ -51,11 +70,11 @@ const medicalInfo = computed(() => {
         <div v-if="props.pet?.status" class="mt-4 mr-4">
           <div 
             class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium border"
-            :class="getStatusInfo(props.pet.status, [t('dashboard.mvp.availablemale'), t('dashboard.mvp.availablefemale')]).bgColor"
+            :class="getPetStatusVisual(props.pet).bg"
           >
             <span 
               class="size-2 rounded-full"
-              :class="getStatusInfo(props.pet.status, [t('dashboard.mvp.availablemale'), t('dashboard.mvp.availablefemale')]).dotColor"
+              :class="getPetStatusVisual(props.pet).dot"
             />
             <span>{{ props.pet.status }}</span>
           </div>
@@ -87,10 +106,9 @@ const medicalInfo = computed(() => {
           <span 
             v-for="tag in petTagObjects" 
             :key="tag.name"
-            class="inline-flex items-center gap-1 rounded-full px-2 py-1 text-sm font-medium justify-center truncate border"
+            class="inline-flex items-center gap-1 rounded-full px-2 py-1 text-sm font-medium justify-center truncate shadow-lg border"
             :class="tag.color"
           >
-            <span class="text-sm shrink-0">{{ tag.emoji }}</span>
             <span class="truncate text-sm">{{ tag.name }}</span>
           </span>
         </div>
@@ -100,59 +118,59 @@ const medicalInfo = computed(() => {
         <h2 class="heading-xl">{{ t('dashboard.aboutPet') }}</h2>
         <p class="text-base text-gray-700 leading-relaxed">{{ props.pet?.description }}</p>
         <div class="mt-8 space-y-6">
-          <div v-if="props.pet?.health_status" class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-xl p-6 border border-blue-200 dark:border-blue-800">
+          <div v-if="props.pet?.health_status" class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-200">
             <div class="flex items-center gap-3 mb-4">
-              <div class="shrink-0 size-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
+              <div class="shrink-0 size-10 bg-blue-100 rounded-full flex items-center justify-center">
                 <PetIcons name="heart" />
               </div>
               <div>
-                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('dashboard.mvp.healthStatus.title') }}</h3>
-                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('dashboard.mvp.healthStatus.description') }}</p>
+                <h3 class="text-lg font-semibold text-gray-900">{{ t('dashboard.mvp.healthStatus.title') }}</h3>
+                <p class="text-sm text-gray-600">{{ t('dashboard.mvp.healthStatus.description') }}</p>
               </div>
             </div>
             
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <div v-if="props.pet?.health_status" class="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+              <div v-if="props.pet?.health_status" class="flex items-center gap-3 p-4 bg-white rounded-lg border border-gray-200">
                 <div class="shrink-0">
                   <div :class="`size-8 ${getHealthStatusInfo(props.pet.health_status).bgColor} rounded-full flex items-center justify-center`">
                     <PetIcons :name="getHealthStatusInfo(props.pet.health_status).icon" />
                   </div>
                 </div>
                 <div>
-                  <p class="text-sm font-medium text-gray-900 dark:text-white">
+                  <p class="text-sm font-medium text-gray-900">
                     {{ t(getHealthStatusInfo(props.pet.health_status).label) }}
                   </p>
-                  <p class="text-xs text-gray-500 dark:text-gray-400">{{ t(getHealthStatusInfo(props.pet.health_status).description) }}</p>
+                  <p class="text-xs text-gray-500">{{ t(getHealthStatusInfo(props.pet.health_status).description) }}</p>
                 </div>
               </div>
             </div>
 
-            <div v-if="props.pet?.current_treatment" class="mt-4 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
+            <div v-if="props.pet?.current_treatment" class="mt-4 p-4 bg-amber-50 rounded-lg border border-amber-200">
               <div class="flex items-start gap-3">
-                <div class="shrink-0 size-6 bg-amber-100 dark:bg-amber-900 rounded-full flex items-center justify-center mt-0.5">
+                <div class="shrink-0 size-6 bg-amber-100 rounded-full flex items-center justify-center mt-0.5">
                   <PetIcons name="treatment" />
                 </div>
                 <div>
-                  <p class="text-sm font-medium text-amber-900 dark:text-amber-100">{{ t('dashboard.mvp.healthStatus.currentTreatment') }}</p>
-                  <p class="text-sm text-amber-800 dark:text-amber-200 mt-1">{{ props.pet.current_treatment }}</p>
+                  <p class="text-sm font-medium text-amber-900">{{ t('dashboard.mvp.healthStatus.currentTreatment') }}</p>
+                  <p class="text-sm text-amber-800 mt-1">{{ props.pet.current_treatment }}</p>
                 </div>
               </div>
             </div>
 
             <div v-if="medicalInfo.length" class="mt-6">
-              <h4 class="text-md font-semibold text-gray-900 dark:text-white mb-3">{{ t('dashboard.mvp.healthStatus.medicalInfo') }}</h4>
+              <h4 class="text-md font-semibold text-gray-900 mb-3">{{ t('dashboard.mvp.healthStatus.medicalInfo') }}</h4>
               <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                 <div 
                   v-for="info in medicalInfo" 
                   :key="info.type"
-                  class="flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
+                  class="flex items-center gap-3 p-3 bg-white rounded-lg border border-gray-200"
                 >
                   <div :class="`size-8 ${info.bgColor} rounded-full flex items-center justify-center`">
                     <PetIcons :name="info.icon" />
                   </div>
                   <div>
-                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ t(info.label) }}</p>
-                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ t(info.description) }}</p>
+                    <p class="text-sm font-medium text-gray-900">{{ t(info.label) }}</p>
+                    <p class="text-xs text-gray-500">{{ t(info.description) }}</p>
                   </div>
                 </div>
               </div>
@@ -160,6 +178,27 @@ const medicalInfo = computed(() => {
           </div>
         </div>
       </div>
+
+      <!-- Adoption Announcement Link -->
+      <div v-if="props.pet?.adoption_url" class="mt-8 pt-6 border-t border-gray-200">
+        <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-6 border border-green-200">
+          <div class="text-center">
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ t('dashboard.mvp.adoptionAnnouncement') }}</h3>
+            <p class="text-sm text-gray-600 mb-4">{{ t('dashboard.mvp.adoptionAnnouncementDescription') }}</p>
+            <a
+              :href="props.pet.adoption_url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors duration-200"
+            >
+              <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+              {{ t('dashboard.mvp.viewAdoptionPost') }}
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/resources/js/Pages/Pets/Partials/PetGallery.vue b/resources/js/Pages/Pets/Partials/PetGallery.vue
index b43cd8ca..fe2c1c84 100644
--- a/resources/js/Pages/Pets/Partials/PetGallery.vue
+++ b/resources/js/Pages/Pets/Partials/PetGallery.vue
@@ -14,11 +14,18 @@ const props = defineProps({
 const imageUrls = computed(() => {
   const pet = props.pet
   if (!pet) return []
-  if (Array.isArray(pet.photos) && pet.photos.length) return pet.photos
+  const originals = Array.isArray(pet.photos) ? pet.photos : []
+  const previews = Array.isArray(pet.photos_preview) ? pet.photos_preview : []
+  if (originals.length) return originals
+  if (previews.length) return previews
   if (pet.imageUrl) return [pet.imageUrl]
   return []
 })
 
+const hasImages = computed(() => {
+  return imageUrls.value.length > 0
+})
+
 const currentImageIndex = ref(0)
 const hasMultipleImages = computed(() => imageUrls.value.length > 1)
 const isDragging = ref(false)
@@ -170,18 +177,18 @@ onBeforeUnmount(() => {
     @touchmove="handleTouchMove"
     @touchend="handleTouchEnd"
   >
-    <div v-if="imageUrls.length > 0" class="relative hidden sm:flex h-80 md:h-128 justify-center">
-      <div 
-        class="flex h-full transition-transform duration-300 ease-out" 
+    <div v-if="hasImages" class="relative hidden sm:flex h-80 md:h-128 justify-center">
+      <div
+        class="flex h-full transition-transform duration-300 ease-out"
         :class="{ 'ml-[50vw]': hasMultipleImages, 'duration-0': isDragging }"
         :style="{ transform: carouselTransform, 'will-change': 'transform', 'touch-action': 'pan-y' }"
       >
-        <div 
-          v-for="(url, index) in imageUrls" 
+        <div
+          v-for="(url, index) in imageUrls"
           :key="index"
           class="w-[50vw] shrink-0 px-2 md:px-[2vw] lg:px-[5vw]"
         >
-          <div class="flex justify-center h-full bg-transparent dark:bg-neutral-900">
+          <div class="flex justify-center h-full bg-transparent">
             <img
               :src="url"
               :alt="`${props.pet?.name || 'Pet'} - ${index + 1}`"
@@ -195,7 +202,19 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <div v-if="imageUrls.length > 0" class="relative sm:hidden">
+    <div v-else class="relative hidden sm:flex h-80 md:h-128 justify-center">
+      <div class="flex justify-center items-center size-full bg-gray-100 rounded-lg">
+        <div class="text-center text-gray-500">
+          <svg class="mx-auto size-16 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+          <h3 class="text-lg font-medium text-gray-900 mb-2">{{ t('pets.gallery.noImagesTitle') }}</h3>
+          <p class="text-sm text-gray-500">{{ t('pets.gallery.noImagesText') }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="hasImages" class="relative sm:hidden">
       <div class="relative w-full h-72 overflow-hidden">
         <div
           class="flex h-full transition-transform duration-300 ease-out"
@@ -215,11 +234,23 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <button 
-      v-if="imageUrls.length > 1"
-      type="button" 
+    <div v-else class="relative sm:hidden">
+      <div class="w-full h-72 flex items-center justify-center bg-gray-100 rounded-lg">
+        <div class="text-center text-gray-500 px-4">
+          <svg class="mx-auto size-12 text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+          <h3 class="text-base font-medium text-gray-900 mb-1">{{ t('pets.gallery.noImagesTitle') }}</h3>
+          <p class="text-xs text-gray-500">{{ t('pets.gallery.noImagesText') }}</p>
+        </div>
+      </div>
+    </div>
+
+    <button
+      v-if="hasMultipleImages"
+      type="button"
       :disabled="currentImageIndex === 0"
-      class="absolute inset-y-0 start-0 inline-flex justify-center items-center w-11.5 h-full text-gray-800 hover:bg-gray-800/10 focus:outline-hidden focus:bg-gray-800/10 rounded-s-lg dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="absolute inset-y-0 start-0 inline-flex justify-center items-center w-11.5 h-full text-gray-800 hover:bg-gray-800/10 focus:outline-hidden focus:bg-gray-800/10 rounded-s-lg disabled:opacity-50 disabled:cursor-not-allowed"
       @click="prevImage"
     >
       <span class="text-2xl" aria-hidden="true">
@@ -229,11 +260,11 @@ onBeforeUnmount(() => {
       </span>
       <span class="sr-only">{{ t('pets.gallery.previous') }}</span>
     </button>
-    <button 
-      v-if="imageUrls.length > 1"
-      type="button" 
+    <button
+      v-if="hasMultipleImages"
+      type="button"
       :disabled="currentImageIndex >= imageUrls.length - 1"
-      class="absolute inset-y-0 end-0 inline-flex justify-center items-center w-11.5 h-full text-gray-800 hover:bg-gray-800/10 focus:outline-hidden focus:bg-gray-800/10 rounded-e-lg dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="absolute inset-y-0 end-0 inline-flex justify-center items-center w-11.5 h-full text-gray-800 hover:bg-gray-800/10 focus:outline-hidden focus:bg-gray-800/10 rounded-e-lg disabled:opacity-50 disabled:cursor-not-allowed"
       @click="nextImage"
     >
       <span class="sr-only">{{ t('pets.gallery.next') }}</span>
diff --git a/resources/js/Pages/Pets/Partials/PetLocation.vue b/resources/js/Pages/Pets/Partials/PetLocation.vue
index b67b6802..2157bf3b 100644
--- a/resources/js/Pages/Pets/Partials/PetLocation.vue
+++ b/resources/js/Pages/Pets/Partials/PetLocation.vue
@@ -1,6 +1,27 @@
 <script setup>
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+
 const { t } = useI18n()
+
+const props = defineProps({
+  pet: {
+    type: Object,
+    default: null,
+  },
+})
+
+const shelterName = computed(() => props.pet?.shelter?.name || t('pets.location.shelterName'))
+const addressText = computed(() => {
+  const addr = props.pet?.shelter?.address
+  if (!addr) return t('pets.location.address')
+  const parts = [addr.address, addr.postal_code, addr.city].filter(Boolean)
+  return parts.join(', ')
+})
+
+const mapsQuery = computed(() => encodeURIComponent(addressText.value))
+const mapsEmbed = computed(() => `https://www.google.com/maps?q=${mapsQuery.value}&output=embed`)
+const mapsLink = computed(() => `https://maps.google.com/?q=${mapsQuery.value}`)
 </script>
 
 <template>
@@ -20,20 +41,8 @@ const { t } = useI18n()
               </svg>
             </div>
             <div>
-              <h3 class="font-medium text-gray-900 dark:text-white">{{ t('pets.location.shelterName') }}</h3>
-              <p class="text-gray-600 dark:text-gray-300">{{ t('pets.location.address') }}</p>
-            </div>
-          </div>
-          
-          <div class="flex items-start space-x-3">
-            <div class="shrink-0 size-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
-              <svg class="size-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-            </div>
-            <div>
-              <h3 class="font-medium text-gray-900 dark:text-white">{{ t('pets.location.openingHoursTitle') }}</h3>
-              <p class="text-gray-600 dark:text-gray-300">{{ t('pets.location.openingHoursWeek') }}<br>{{ t('pets.location.openingHoursWeekend') }}</p>
+              <h3 class="font-medium text-gray-900 dark:text-white">{{ shelterName }}</h3>
+              <p class="text-gray-600 dark:text-gray-300">{{ addressText }}</p>
             </div>
           </div>
           
@@ -45,7 +54,19 @@ const { t } = useI18n()
             </div>
             <div>
               <h3 class="font-medium text-gray-900 dark:text-white">{{ t('pets.location.contactTitle') }}</h3>
-              <p class="text-gray-600 dark:text-gray-300">{{ t('pets.location.contactPhone') }}<br>{{ t('pets.location.contactEmail', { email: 'kontakt@przyjaznelapki.pl' }) }}</p>
+              <div class="space-y-1 mt-1">
+                <template v-if="props.pet?.shelter?.phone">
+                  <span class="text-gray-600 dark:text-gray-300">Nr tel: </span><a class="text-blue-700 hover:underline" :href="`tel:${props.pet.shelter.phone}`">{{ props.pet.shelter.phone }}</a>
+                </template>
+                <template v-else>
+                  <span class="text-gray-600 dark:text-gray-300">{{ t('pets.location.contactPhone') }}</span>
+                </template>
+                <template v-if="props.pet?.shelter?.email">
+                  <div>
+                    <a :href="`mailto:${props.pet.shelter.email}`">{{ props.pet.shelter.email }}</a>
+                  </div>
+                </template>
+              </div>
             </div>
           </div>
         </div>
@@ -57,12 +78,12 @@ const { t } = useI18n()
               loading="lazy"
               allowfullscreen
               referrerpolicy="no-referrer-when-downgrade"
-              src="https://www.google.com/maps?q=ul.+Leśna+15,+Warszawa&output=embed"
+              :src="mapsEmbed"
             />
           </div>
           
           <a 
-            href="https://maps.google.com/?q=ul.+Leśna+15,+Warszawa" 
+            :href="mapsLink" 
             target="_blank" 
             rel="noopener noreferrer"
             class="inline-flex items-center justify-center w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 group"
diff --git a/resources/js/Pages/Pets/Show.vue b/resources/js/Pages/Pets/Show.vue
index 4c2e3b7c..ff18f01b 100644
--- a/resources/js/Pages/Pets/Show.vue
+++ b/resources/js/Pages/Pets/Show.vue
@@ -3,14 +3,13 @@ import { computed, ref } from 'vue'
 import Header from '@/Components/Header.vue'
 import Footer from '@/Components/Footer.vue'
 import { Head, Link } from '@inertiajs/vue3'
-import { bestMatches, dogs, cats } from '@/data/petsData.js'
-import { getGenderInfo } from '@/helpers/mappers'
 import PetGallery from './Partials/PetGallery.vue'
 import PetDetails from './Partials/PetDetails.vue'
 import PetLocation from './Partials/PetLocation.vue'
 import PetStrip from '@/Components/PetStrip.vue'
 import { useI18n } from 'vue-i18n'
 import { routes } from '@/routes'
+import { parsePolishAgeToMonths, formatAge } from '@/helpers/formatters/age.ts'
 
 const { t } = useI18n()
 
@@ -21,48 +20,46 @@ const props = defineProps({
   },
 })
 
-const allPets = [...bestMatches, ...dogs, ...cats]
-
-const routeId = computed(() => {
-  const path = typeof window !== 'undefined' ? window.location.pathname : ''
-  const match = path.match(/\/(?:pets)(?:\/static)?\/(\d+)/)
-  const id = match ? Number(match[1]) : NaN
-  return Number.isFinite(id) ? id : null
-})
-
-const staticPet = computed(() => allPets.find(pet => pet.id === routeId.value) || null)
-
-const effectivePet = computed(() => {
-  if (props.pet && staticPet.value) {
-    return {
-      ...props.pet,
-      ...staticPet.value,
-    }
+const displayPet = computed(() => {
+  const p = props.pet && typeof props.pet === 'object' && 'data' in props.pet ? props.pet.data : props.pet
+  if (!p) return null
+  const tagNames = Array.isArray(p.tags) ? p.tags.map(t => (typeof t === 'string' ? t : t?.name)).filter(Boolean) : []
+  const originals = Array.isArray(p.photos) ? p.photos : []
+  const previews = Array.isArray(p.photos_preview) ? p.photos_preview : []
+  const photos = originals.length ? originals : previews
+  const imageUrl = (photos && photos.length) ? photos[0] : null
+  const rawStatus = p.adoption_status ?? p.status
+  const sexValue = String(p.sex ?? p.gender ?? '').toLowerCase()
+  let statusLabel = rawStatus
+  if (String(rawStatus).toLowerCase() === 'available') {
+    statusLabel = (sexValue === 'male' || sexValue === 'm') ? (t('dashboard.mvp.availablemale')) : (t('dashboard.mvp.availablefemale'))
+  } else if (rawStatus) {
+    const statusKey = String(rawStatus).toLowerCase().replaceAll(' ', '_')
+    const translated = t(`dashboard.mvp.statuses.${statusKey}`)
+    statusLabel = translated || rawStatus
+  }
+  const months = parsePolishAgeToMonths(p.age)
+  const showAge = typeof months === 'number' && months > 0
+  return {
+    ...p,
+    photos,
+    tags: tagNames,
+    status: statusLabel,
+    gender: p.sex ?? p.gender,
+    microchipped: p.has_chip ?? p.microchipped ?? false,
+    imageUrl,
+    age: showAge ? formatAge(months) : null,
   }
-  return props.pet ?? staticPet.value
 })
 
-const similarPets = computed(() => {
-  const current = effectivePet.value
-  if (!current) return []
-  const currentTags = new Set(Array.isArray(current.tags) ? current.tags : [])
-  const candidates = allPets.filter(pet => pet.id !== current.id)
-  const scored = candidates.map(pet => {
-    const petTags = Array.isArray(pet.tags) ? pet.tags : []
-    const overlap = petTags.filter(tag => currentTags.has(tag)).length
-    return { pet: pet, score: overlap }
-  })
-  const filtered = scored.filter(s => s.score > 0)
-  filtered.sort((a, b) => b.score - a.score)
-  return filtered.slice(0, 10).map(s => s.pet)
-})
+const similarPets = computed(() => [])
 
 const showSimilarOverlay = ref(false)
 const similarListTitle = ref('')
 const similarList = ref([])
 
 const onShowSimilar = ({ title, pets }) => {
-  similarListTitle.value = title || (t('dashboard.mvp.similarPets') || 'Podobne zwierzaki')
+  similarListTitle.value = title || (t('dashboard.mvp.similarPets'))
   similarList.value = Array.isArray(pets) ? pets : []
   showSimilarOverlay.value = true
 }
@@ -74,22 +71,22 @@ const onHideSimilar = () => { showSimilarOverlay.value = false }
     <Head :title="t('titles.petShow')" />     
     <Header />
 
-    <PetGallery v-if="effectivePet" :pet="effectivePet" />
+    <PetGallery v-if="displayPet" :pet="displayPet" />
 
     <div class="mx-auto max-w-6xl px-6 lg:px-2 py-4">
-      <PetDetails v-if="effectivePet" :pet="effectivePet" />
+      <PetDetails v-if="displayPet" :pet="displayPet" />
     </div>
 
     <div v-if="similarPets.length" class="mx-auto max-w-6xl p-6 lg:px-2">
       <PetStrip 
-        :title="t('dashboard.mvp.similarPets') || 'Podobne zwierzaki'" 
+        :title="t('dashboard.mvp.similarPets')" 
         :pets="similarPets"
         @show-pet-list="onShowSimilar"
         @hide-pet-list="onHideSimilar"
       />
     </div>
 
-    <PetLocation />
+    <PetLocation :pet="displayPet" />
 
     <transition 
       enter-active-class="transition-opacity duration-500"
@@ -144,7 +141,7 @@ const onHideSimilar = () => { showSimilarOverlay.value = false }
                     </div>
                   </div>
                   <div class="flex items-center gap-2 mb-3">
-                    <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-1 text-sm font-semibold text-blue-800">{{ similarPet.age }}</span>
+                    <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-1 text-sm font-semibold text-blue-800">{{ formatAge(similarPet.age) }}</span>
                     <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-sm font-semibold text-green-800">{{ similarPet.status }}</span>
                     <span :class="getGenderInfo(similarPet.gender).color + ' text-xl'">{{ getGenderInfo(similarPet.gender).symbol }}</span>
                   </div>
diff --git a/resources/js/Pages/Preferences/Preferences.vue b/resources/js/Pages/Preferences/Preferences.vue
new file mode 100644
index 00000000..b014736d
--- /dev/null
+++ b/resources/js/Pages/Preferences/Preferences.vue
@@ -0,0 +1,16 @@
+<script setup>
+import PreferencesForm from '@/Components/preferences/PreferencesForm.vue'
+import { Head } from '@inertiajs/vue3'
+
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+</script>
+
+<template>
+  <div>
+    <Head :title="t('titles.preferences')" />
+    <PreferencesForm />
+  </div>
+</template>
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 84bfff2c..c1105140 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -5,6 +5,7 @@ import { createInertiaApp } from '@inertiajs/vue3'
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
 import { createI18n } from 'vue-i18n'
 import VueEasyLightbox from 'vue-easy-lightbox'
+import { createPinia } from 'pinia'
 
 const plModules = import.meta.glob<Record<string, any>>('./lang/pl/*.json', { eager: true })
 const pl = Object.values(plModules).reduce((merged, mod) => {
@@ -27,6 +28,7 @@ createInertiaApp({
   resolve: (name: string) => resolvePageComponent(`./Pages/${name}.vue`, pages) as any,
   setup({ el, App, props, plugin }) {
     const app = createApp({ render: () => h(App, props) })
+      .use(createPinia())
       .use(plugin)
       .use(i18n)
       .use(VueEasyLightbox)
diff --git a/resources/js/composables/useBreeds.js b/resources/js/composables/useBreeds.js
new file mode 100644
index 00000000..2ac72e7d
--- /dev/null
+++ b/resources/js/composables/useBreeds.js
@@ -0,0 +1,22 @@
+import { computed } from 'vue'
+import { usePage } from '@inertiajs/vue3'
+
+export function useBreeds(form) {
+  const page = usePage()
+  const breeds = computed(() => page?.props?.breeds || { dog: [], cat: [], other: [] })
+
+  const dogBreedsAvailable = computed(() => (Array.isArray(form.value.species) && form.value.species.includes('dog')) ? (breeds.value.dog || []) : [])
+  const catBreedsAvailable = computed(() => (Array.isArray(form.value.species) && form.value.species.includes('cat')) ? (breeds.value.cat || []) : [])
+
+  const breedOptions = computed(() => {
+    const selected = form.value.species
+    if (!Array.isArray(selected) || selected.length === 0) return []
+    let list = []
+    if (selected.includes('dog')) list = list.concat(breeds.value.dog || [])
+    if (selected.includes('cat')) list = list.concat(breeds.value.cat || [])
+    if (selected.includes('other')) list = list.concat(breeds.value.other || [])
+    return Array.from(new Set(list)).sort()
+  })
+
+  return { dogBreedsAvailable, catBreedsAvailable, breedOptions }
+}
diff --git a/resources/js/composables/useFormState.js b/resources/js/composables/useFormState.js
new file mode 100644
index 00000000..bf7e9c02
--- /dev/null
+++ b/resources/js/composables/useFormState.js
@@ -0,0 +1,60 @@
+import { ref } from 'vue'
+
+export function useFormState() {
+  const form = ref({
+    species: [],
+    breed: [],
+    sex: '',
+    ageIndex: [],
+    sizeIndex: [],
+    weightState: [],
+    color: [],
+    healthStatus: [],
+    vaccinated: false,
+    sterilized: false,
+    microchipped: false,
+    dewormed: false,
+    defleaTreated: false,
+    attitudeToDogs: null,
+    attitudeToCats: null,
+    attitudeToChildren: null,
+    attitudeToAdults: null,
+    activityLevel: null,
+    adoptionStatus: [],
+    tags: [],
+    location: '',
+    radiusKm: null,
+  })
+
+  function resetForm() {
+    form.value = {
+      species: [],
+      breed: [],
+      sex: '',
+      ageIndex: [],
+      sizeIndex: [],
+      weightState: [],
+      color: [],
+      healthStatus: [],
+      vaccinated: false,
+      sterilized: false,
+      microchipped: false,
+      dewormed: false,
+      defleaTreated: false,
+      attitudeToDogs: null,
+      attitudeToCats: null,
+      attitudeToChildren: null,
+      attitudeToAdults: null,
+      activityLevel: null,
+      adoptionStatus: [],
+      tags: [],
+      location: '',
+      radiusKm: null,
+    }
+  }
+
+  function applyPreferences() {
+  }
+
+  return { form, resetForm, applyPreferences }
+}
diff --git a/resources/js/composables/useLocation.js b/resources/js/composables/useLocation.js
new file mode 100644
index 00000000..3af84434
--- /dev/null
+++ b/resources/js/composables/useLocation.js
@@ -0,0 +1,69 @@
+import { ref, computed } from 'vue'
+
+export function useLocation(form) {
+  const locationOpen = ref(false)
+  const recentLocations = ref([])
+
+  function loadRecentLocations() {
+    if (typeof localStorage !== 'undefined') {
+      try {
+        const raw = localStorage.getItem('recentLocations')
+        if (raw) recentLocations.value = JSON.parse(raw)
+      } catch (error) {
+        return[]
+      }
+    }
+  }
+  function saveRecentLocations() {
+    if (typeof localStorage !== 'undefined') {
+      try {
+        localStorage.setItem('recentLocations', JSON.stringify(recentLocations.value.slice(0, 10)))
+      } catch (error) {
+        return[]
+      }
+    }
+  }
+
+  function normalized(searchString) { return searchString.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '') }
+  const filteredLocations = computed(() => {
+    const query = (form.value.location || '').trim()
+    if (!query) return []
+    const base = Array.from(new Set([...recentLocations.value]))
+    return base.filter(location => normalized(location).includes(normalized(query))).slice(0, 20)
+  })
+
+  function selectLocation(location) {
+    form.value.location = location
+    if (!form.value.radiusKm || form.value.radiusKm <= 0) {
+      form.value.radiusKm = 5
+    }
+    const locationIndex = recentLocations.value.indexOf(location)
+    if (locationIndex !== -1) recentLocations.value.splice(locationIndex, 1)
+    recentLocations.value.unshift(location)
+    saveRecentLocations()
+    locationOpen.value = false
+  }
+
+  function clearLocation() {
+    form.value.location = ''
+    locationOpen.value = false
+  }
+
+  const radiusOptions = [
+    { value: 5, label: '5 km' },
+    { value: 10, label: '10 km' },
+    { value: 15, label: '15 km' },
+    { value: 20, label: '20 km' },
+    { value: 25, label: '25 km' },
+    { value: 30, label: '30 km' },
+    { value: 35, label: '35 km' },
+    { value: 40, label: '40 km' },
+    { value: 45, label: '45 km' },
+    { value: 50, label: '50 km' },
+    { value: 75, label: '75 km' },
+    { value: 100, label: '100 km' },
+    { value: 200, label: '200 km' },
+  ]
+
+  return { locationOpen, recentLocations, filteredLocations, selectLocation, clearLocation  , loadRecentLocations, radiusOptions }
+}
diff --git a/resources/js/composables/usePreferencesSummary.js b/resources/js/composables/usePreferencesSummary.js
new file mode 100644
index 00000000..76bdc33f
--- /dev/null
+++ b/resources/js/composables/usePreferencesSummary.js
@@ -0,0 +1,140 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { speciesOptions, sexOptions, colorOptions, healthOptions, adoptionOptions } from '@/helpers/preferencesConfig'
+
+export function usePreferencesSummary(form, selectorConfigs, tagOptions) {
+  const { t } = useI18n()
+
+  const fieldConfigs = {
+    species: { options: speciesOptions, labelKey: 'preferences.labels.species', isArray: true },
+    breed: { options: null, labelKey: 'preferences.labels.breed', isArray: true, customMapper: (val) => ({ value: val, label: val }) },
+    sex: { options: sexOptions, labelKey: 'preferences.labels.sex', isArray: false },
+    color: { options: colorOptions, labelKey: 'preferences.labels.color', isArray: true },
+    ageIndex: { options: selectorConfigs.age.options, labelKey: 'preferences.labels.age', isArray: true },
+    sizeIndex: { options: selectorConfigs.size.options, labelKey: 'preferences.labels.size', isArray: true },
+    weightState: { options: selectorConfigs.weight.options, labelKey: 'preferences.labels.weightKg', isArray: true },
+    healthStatus: { options: healthOptions, labelKey: 'preferences.labels.healthStatus', isArray: true },
+    adoptionStatus: { options: adoptionOptions, labelKey: 'preferences.labels.adoptionStatus', isArray: true },
+    attitudeToDogs: { options: selectorConfigs.attitudes.options, labelKey: 'preferences.labels.attitudeToDogs', isArray: false },
+    attitudeToCats: { options: selectorConfigs.attitudes.options, labelKey: 'preferences.labels.attitudeToCats', isArray: false },
+    attitudeToChildren: { options: selectorConfigs.attitudes.options, labelKey: 'preferences.labels.attitudeToChildren', isArray: false },
+    attitudeToAdults: { options: selectorConfigs.attitudes.options, labelKey: 'preferences.labels.attitudeToAdults', isArray: false },
+    activityLevel: { options: selectorConfigs.activity.options, labelKey: 'preferences.labels.activityLevel', isArray: false },
+  }
+
+  const sectionToFilterMap = {
+    species: 'species',
+    breed: 'breed', 
+    sex: 'sex',
+    color: 'color',
+    ageIndex: 'age',
+    sizeIndex: 'size',
+    weightState: 'weight',
+    location: 'location',
+    healthStatus: 'health',
+    adoptionStatus: 'adoption',
+    attitudeToDogs: 'attitude-dogs',
+    attitudeToCats: 'attitude-cats',
+    attitudeToChildren: 'attitude-children',
+    attitudeToAdults: 'attitude-adults',
+    activityLevel: 'activity',
+    tags: 'tags',
+    healthChecks: 'health-checks',
+  }
+
+  function mapByOptionsWithValues(values, options, tFn) {
+    if (values === null || values === undefined || values === '') return []
+    const arr = Array.isArray(values) ? values : [values]
+    const labelMap = new Map(options.map(o => [o.value, o.labelKey ? tFn(o.labelKey) : (o.label || String(o.value))]))
+    return arr
+      .filter(val => val !== null && val !== undefined && String(val) !== '')
+      .map(val => ({ value: val, label: labelMap.get(val) ?? String(val) }))
+  }
+
+  const summary = computed(() => {
+    const formData = form.value || {}
+    const sections = []
+
+    Object.entries(fieldConfigs).forEach(([fieldKey, config]) => {
+      const value = formData[fieldKey]
+      if (!value || (Array.isArray(value) && value.length === 0)) return
+
+      let items = []
+      
+      if (config.customMapper) {
+        items = Array.isArray(value) ? value.map(config.customMapper) : [config.customMapper(value)]
+      } else if (config.options) {
+        items = mapByOptionsWithValues(value, config.options, (key) => t(key))
+      }
+      
+      if (items.length > 0) {
+        sections.push({ 
+          key: fieldKey, 
+          title: t(config.labelKey), 
+          items, 
+        })
+      }
+    })
+
+    if (formData.location) {
+      const radius = formData.radiusKm ? `±${formData.radiusKm} km` : ''
+      sections.push({ 
+        key: 'location', 
+        title: t('preferences.labels.location'), 
+        items: [{ value: 'location', label: radius ? `${formData.location} (${radius})` : formData.location }], 
+      })
+    }
+
+    const checks = []
+    const healthCheckFields = ['vaccinated', 'sterilized', 'microchipped', 'dewormed', 'defleaTreated']
+    healthCheckFields.forEach(field => {
+      if (formData[field]) {
+        checks.push({ value: field, label: t(`preferences.checks.${field}`) })
+      }
+    })
+    if (checks.length) {
+      sections.push({ key: 'healthChecks', title: t('preferences.labels.healthChecks'), items: checks })
+    }
+
+    if (Array.isArray(formData.tags) && formData.tags.length) {
+      const tagMap = new Map((Array.isArray(tagOptions) ? tagOptions : []).map(o => [o.value, o.label]))
+      const tagItems = formData.tags.map(v => ({ value: v, label: tagMap.get(v) || String(v) }))
+      sections.push({ key: 'tags', title: t('preferences.labels.tags'), items: tagItems })
+    }
+
+    return sections
+  })
+
+  function clearItem(sectionKey, value, moveFilterById) {
+    const formData = form.value
+    
+    if (sectionKey === 'location') {
+      formData.location = ''
+    } else if (sectionKey === 'healthChecks') {
+      if (value) formData[value] = false
+    } else if (sectionKey === 'tags') {
+      formData.tags = (formData.tags || []).filter(v => v !== value)
+    } else {
+      const config = fieldConfigs[sectionKey]
+      if (config) {
+        if (config.isArray) {
+          formData[sectionKey] = (formData[sectionKey] || []).filter(v => v !== value)
+        } else {
+          formData[sectionKey] = formData[sectionKey] === value ? null : formData[sectionKey]
+        }
+      }
+    }
+    
+    const filterKey = sectionToFilterMap[sectionKey]
+    if (filterKey && moveFilterById) {
+      moveFilterById(filterKey)
+    }
+  }
+
+  return {
+    summary,
+    clearItem,
+    fieldConfigs,
+    sectionToFilterMap,
+  }
+}
diff --git a/resources/js/composables/useScroll.js b/resources/js/composables/useScroll.js
new file mode 100644
index 00000000..bfc9a123
--- /dev/null
+++ b/resources/js/composables/useScroll.js
@@ -0,0 +1,9 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useScroll() {
+  const showScrollToTop = ref(false)
+  function handleScroll() { showScrollToTop.value = window.scrollY > 300 }
+  onMounted(() => window.addEventListener('scroll', handleScroll))
+  onUnmounted(() => window.removeEventListener('scroll', handleScroll))
+  return { showScrollToTop }
+}
diff --git a/resources/js/composables/useTopFilters.js b/resources/js/composables/useTopFilters.js
new file mode 100644
index 00000000..593a40a9
--- /dev/null
+++ b/resources/js/composables/useTopFilters.js
@@ -0,0 +1,4 @@
+export function useTopFilters() {
+  function moveFilterById() {}
+  return { moveFilterById }
+}
diff --git a/resources/js/data/petTagsConfig.js b/resources/js/data/petTagsConfig.js
deleted file mode 100644
index 00042c3e..00000000
--- a/resources/js/data/petTagsConfig.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useI18n } from 'vue-i18n'
-
-export function getPetTags() {
-  const { t } = useI18n()
-  
-  return {
-    friendly: { name: t('landing.petTags.friendly'), emoji: '😊', color: 'bg-white text-green-600 border-green-300' },
-    gentle: { name: t('landing.petTags.gentle'), emoji: '🥰', color: 'bg-white text-pink-600 border-pink-300' },
-    energetic: { name: t('landing.petTags.energetic'), emoji: '⚡', color: 'bg-white text-yellow-600 border-yellow-300' },
-    playful: { name: t('landing.petTags.playful'), emoji: '🎾', color: 'bg-white text-blue-600 border-blue-300' },
-    calm: { name: t('landing.petTags.calm'), emoji: '😌', color: 'bg-white text-indigo-600 border-indigo-300' },
-    loyal: { name: t('landing.petTags.loyal'), emoji: '❤️', color: 'bg-white text-red-600 border-red-300' },
-    smart: { name: t('landing.petTags.smart'), emoji: '🧠', color: 'bg-white text-purple-600 border-purple-300' },
-    protective: { name: t('landing.petTags.protective'), emoji: '🛡️', color: 'bg-white text-gray-600 border-gray-300' },
-    social: { name: t('landing.petTags.social'), emoji: '👥', color: 'bg-white text-teal-600 border-teal-300' },
-    active: { name: t('landing.petTags.active'), emoji: '🏃', color: 'bg-white text-orange-600 border-orange-300' },
-  }
-} 
diff --git a/resources/js/data/petsData.js b/resources/js/data/petsData.js
index 8c23da80..8323f216 100644
--- a/resources/js/data/petsData.js
+++ b/resources/js/data/petsData.js
@@ -1,242 +1,55 @@
+export const dogs = [
+  { breed: 'Labrador Retriever' },
+  { breed: 'German Shepherd' },
+  { breed: 'Golden Retriever' },
+  { breed: 'Bulldog' },
+  { breed: 'Poodle' },
+  { breed: 'Beagle' },
+  { breed: 'Rottweiler' },
+  { breed: 'Yorkshire Terrier' },
+  { breed: 'Dachshund' },
+  { breed: 'Boxer' },
+]
+
+export const cats = [
+  { breed: 'British Shorthair' },
+  { breed: 'Siamese' },
+  { breed: 'Maine Coon' },
+  { breed: 'Sphynx' },
+  { breed: 'Persian' },
+  { breed: 'Ragdoll' },
+  { breed: 'Bengal' },
+  { breed: 'Russian Blue' },
+  { breed: 'Norwegian Forest' },
+  { breed: 'Scottish Fold' },
+]
+
 export const bestMatches = [
   {
     id: 1,
-    name: 'Max',
-    breed: 'Kot',
-    age: '2 lata',
-    status: 'Dostępny',
-    gender: 'male',
-    vaccinated: true,
-    sterilized: true,
-    dewormed: true,
-    healthy: true,
-    health_status: 'healthy',
-    microchipped: true,
-    description: 'Energiczny kocur, uwielbia eksplorować i wspinaczki. Jest bardzo aktywny i lubi się bawić. Jego ulubionym zajęciem jest gra w piłkę. Jest bardzo inteligentny i lubi się uczyć nowych rzeczy. Jest bardzo miły i lubi się przytulać.',
-    imageUrl: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    photos: [
-      'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-      'https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-      'https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    ],
-    tags: ['energetic', 'playful', 'smart'],
-  },
-  {
-    id: 2,
-    name: 'Sophie',
-    breed: 'Kotka',
-    age: '3 lata',
-    status: 'Dostępna',
-    gender: 'female',
-    vaccinated: true,
-    sterilized: false,
-    dewormed: true,
-    healthy: true,
-    health_status: 'healthy',
-    microchipped: false,
-    description: 'Łagodna kotka, uwielbia się przytulać i być czesana',
-    imageUrl: 'https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['gentle', 'calm', 'social'],
-  },
-  {
-    id: 3,
     name: 'Buddy',
-    breed: 'Golden Retriever',
-    age: '3 lata',
-    status: 'Dostępny',
+    breed: 'Labrador Retriever',
+    age: '2 years',
+    status: 'Available',
     gender: 'male',
-    vaccinated: false,
-    sterilized: true,
-    dewormed: true,
-    healthy: false,
-    health_status: 'sick',
-    microchipped: true,
-    description: 'Przyjazny pies, uwielbia aportowanie i pływanie',
-    imageUrl: 'https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    photos: [
-      'https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-      'https://images.unsplash.com/photo-1601758228041-f3b2795255f1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-      'https://images.unsplash.com/photo-1505628346881-b72b27e84b2a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-      'https://images.unsplash.com/photo-1568393691622-c7ba131d63b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    ],
-    tags: ['friendly', 'loyal', 'playful', 'active'],
+    imageUrl: '/Images/cat-dog.png',
+    description: 'Friendly and energetic companion.',
+    tags: ['friendly', 'playful', 'active'],
   },
   {
-    id: 4,
+    id: 2,
     name: 'Luna',
-    breed: 'Husky',
-    age: '2 lata',
-    status: 'Dostępna',
-    gender: 'female',
-    vaccinated: true,
-    sterilized: true,
-    dewormed: true,
-    healthy: true,
-    health_status: 'healthy',
-    microchipped: true,
-    description: 'Energiczna suczka, uwielbia biegać i zabawy na śniegu',
-    imageUrl: 'https://images.unsplash.com/photo-1547407139-3c921a66005c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['energetic', 'active', 'social', 'playful'],
-  },
-  {
-    id: 5,
-    name: 'Bella',
-    breed: 'York',
-    age: '2 lata',
-    status: 'Dostępny',
+    breed: 'Siamese',
+    age: '1 year',
+    status: 'Available',
     gender: 'female',
-    vaccinated: true,
-    sterilized: true,
-    dewormed: true,
-    healthy: true,
-    health_status: 'healthy',
-    microchipped: true,
-    description: 'Energiczna suczka, uwielbia biegać i zabawy na śniegu',
-    imageUrl: 'https://images.unsplash.com/photo-1547407139-3c921a66005c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['energetic', 'active', 'social', 'playful'],
-  },
-  
-]
-
-export const dogs = [
-  {
-    id: 6,
-    name: 'Milo',
-    breed: 'Beagle',
-    age: '1.5 roku',
-    status: 'Dostępny',
-    gender: 'male',
-    vaccinated: true,
-    sterilized: true,
-    dewormed: false,
-    healthy: true,
-    health_status: 'healthy',
-    microchipped: true,
-    description: 'Ciekawski piesek, uwielbia tropić i zabawy w chowanego',
-    imageUrl: 'https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['playful', 'smart', 'active', 'social'],
-  },
-  {
-    id: 7,
-    name: 'Charlie',
-    breed: 'Labrador',
-    age: '2.5 roku',
-    status: 'Dostępny',
-    gender: 'male',
-    vaccinated: true,
-    sterilized: true,
-    dewormed: true,
-    healthy: false,
-    health_status: 'sick',
-    microchipped: false,
-    description: 'Przyjazny labrador, uwielbia wodę i zabawy z piłką',
-    imageUrl: 'https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['friendly', 'playful', 'active', 'loyal'],
-  },
-  {
-    id: 8,
-    name: 'Duke',
-    breed: 'Bernardyn',
-    age: '3.5 roku',
-    status: 'Dostępny',
-    gender: 'male',
-    vaccinated: true,
-    sterilized: true,
-    dewormed: true,
-    healthy: true,
-    health_status: 'healthy',
-    microchipped: true,
-    description: 'Łagodny olbrzym, uwielbia dzieci i długie spacery',
-    imageUrl: 'https://images.unsplash.com/photo-1587300003388-59208cc962cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['gentle', 'calm', 'protective', 'social'],
-  },
-  {
-    id: 9,
-    name: 'Rex',
-    breed: 'Owczarek Australijski',
-    age: '2 lata',
-    status: 'Dostępny',
-    gender: 'male',
-    vaccinated: true,
-    sterilized: true,
-    dewormed: true,
-    healthy: true,
-    health_status: 'healthy',
-    microchipped: true,
-    description: 'Inteligentny pies, uwielbia agility i zabawy z frisbee',
-    imageUrl: 'https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['smart', 'energetic', 'active', 'loyal'],
+    imageUrl: '/Images/cat-dog.png',
+    description: 'Gentle and smart.',
+    tags: ['gentle', 'smart', 'calm'],
   },
 ]
 
-export const cats = [
-  {
-    id: 11,
-    name: 'Bella',
-    breed: 'Perska',
-    age: '4 lata',
-    status: 'Dostępna',
-    gender: 'female',
-    vaccinated: true,
-    sterilized: true,
-    dewormed: true,
-    healthy: false,
-    health_status: 'recovering',
-    microchipped: true,
-    description: 'Dostojna kotka, uwielbia spokój i delikatne głaskanie',
-    imageUrl: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['calm', 'gentle', 'social'],
-  },
-  {
-    id: 12,
-    name: 'Nala',
-    breed: 'Syjamka',
-    age: '1 rok',
-    status: 'Dostępna',
-    gender: 'female',
-    vaccinated: false,
-    sterilized: false,
-    dewormed: true,
-    healthy: true,
-    health_status: 'healthy',
-    microchipped: true,
-    description: 'Inteligentna kotka, uwielbia wspinaczki i interaktywne zabawki',
-    imageUrl: 'https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['smart', 'energetic', 'playful'],
-  },
-  {
-    id: 13,
-    name: 'Oliver',
-    breed: 'Brytyjski Krótkowłosy',
-    age: '3 lata',
-    status: 'Dostępny',
-    gender: 'male',
-    vaccinated: true,
-    sterilized: true,
-    dewormed: true,
-    healthy: true,
-    health_status: 'healthy',
-    microchipped: true,
-    description: 'Spokojny kocur, uwielbia drzemki i delikatne głaskanie',
-    imageUrl: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['calm', 'gentle', 'social'],
-  },
-  {
-    id: 14,
-    name: 'Misty',
-    breed: 'Maine Coon',
-    age: '2.5 roku',
-    status: 'Dostępna',
-    gender: 'female',
-    vaccinated: true,
-    sterilized: true,
-    dewormed: true,
-    healthy: true,
-    health_status: 'healthy',
-    microchipped: true,
-    description: 'Duża kotka, uwielbia polowania i zabawy z piórkami',
-    imageUrl: 'https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
-    tags: ['playful', 'energetic', 'smart'],
-  },
-
-] 
+export const samplePetImages = Array.from({ length: 100 }, (_, i) => {
+  const id = i + 1
+  return { id, imageUrl: `https://placedog.net/500?id=${id}` }
+})
diff --git a/resources/js/helpers/formatters/age.ts b/resources/js/helpers/formatters/age.ts
new file mode 100644
index 00000000..f018ffab
--- /dev/null
+++ b/resources/js/helpers/formatters/age.ts
@@ -0,0 +1,96 @@
+export const formatAge = (age: number | string | null | undefined): string => {
+  let months = Number(age)
+  if (!Number.isFinite(months) || months < 0) {
+    const parsed = parsePolishAgeToMonths(age)
+    if (parsed === null) return String(age ?? '')
+    months = parsed
+  }
+
+  const formatYearsPl = (years: number) => {
+    if (years === 1) return '1 rok'
+    if (years % 10 >= 2 && years % 10 <= 4 && (years % 100 < 10 || years % 100 >= 20)) return `${years} lata`
+    return `${years} lat`
+  }
+
+  if (months < 12) {
+    return `${months} mies.`
+  }
+
+  const years = Math.floor(months / 12)
+  const rem = months % 12
+  if (rem === 0) return formatYearsPl(years)
+  return `${formatYearsPl(years)} ${rem} mies.`
+}
+
+export type DogAgeCategory = 'young' | 'adult' | 'senior' | 'unknown'
+
+export const classifyDogAgeCategory = (
+  age: number | string | null | undefined,
+  options?: { adultFromMonths?: number; seniorFromMonths?: number }
+): DogAgeCategory => {
+  const months = Number(age)
+  if (!Number.isFinite(months) || months < 0) return 'unknown'
+
+  const adultFrom = options?.adultFromMonths ?? 12
+  const seniorFrom = options?.seniorFromMonths ?? 96
+
+  if (months < adultFrom) return 'young'
+  if (months >= seniorFrom) return 'senior'
+  return 'adult'
+}
+
+export const classifyDogAgeLabelPl = (
+  age: number | string | null | undefined,
+  options?: { adultFromMonths?: number; seniorFromMonths?: number }
+): string => {
+  const category = classifyDogAgeCategory(age, options)
+  if (category === 'young') return 'młody'
+  if (category === 'adult') return 'dorosły'
+  if (category === 'senior') return 'stary'
+  return 'nieznany'
+}
+
+export const parsePolishAgeToMonths = (
+  ageText: string | number | null | undefined
+): number | null => {
+  if (ageText === null || ageText === undefined) return null
+
+  if (typeof ageText === 'number') {
+    return Number.isFinite(ageText) && ageText >= 0 ? Math.floor(ageText) : null
+  }
+
+  const trimmed = String(ageText).trim()
+  if (trimmed === '') return null
+
+  const direct = Number(trimmed)
+  if (Number.isFinite(direct) && direct >= 0) return Math.floor(direct)
+
+  const normalized = trimmed
+    .toLowerCase()
+    .replaceAll(',', ' ')
+    .replaceAll('\t', ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+
+  const yearsMatch = normalized.match(/(\d+)\s*(?:rok|lata|lat|r\.?)(?:\b|\s)/i)
+  const monthsMatch = normalized.match(/(\d+)\s*(?:mies(?:\.|iąc(?:e|y)?|iące|ięcy)?|m\.?)(?:\b|\s|$)/i)
+
+  let years = 0
+  let months = 0
+
+  if (yearsMatch) years = Number(yearsMatch[1])
+  if (monthsMatch) months = Number(monthsMatch[1])
+
+  if (!yearsMatch && !monthsMatch) return null
+
+  return years * 12 + months
+}
+
+export const classifyDogAgeFromPolishText = (
+  ageText: string | number | null | undefined,
+  options?: { adultFromMonths?: number; seniorFromMonths?: number }
+): DogAgeCategory => {
+  const months = parsePolishAgeToMonths(ageText)
+  if (months === null) return 'unknown'
+  return classifyDogAgeCategory(months, options)
+}
diff --git a/resources/js/helpers/mappers.js b/resources/js/helpers/mappers.js
new file mode 100644
index 00000000..53ed1bae
--- /dev/null
+++ b/resources/js/helpers/mappers.js
@@ -0,0 +1,4 @@
+export { getGenderInfo } from './mappers/genderMapper.ts'
+export { getAvailableMedicalInfo, getHealthStatusInfo } from './mappers/medicalInfoMapper.ts'
+export { getStatusInfo } from './mappers/statusMapper.ts'
+export { getPetCharacteristics } from './mappers/characteristicsMapper.ts'
diff --git a/resources/js/helpers/mappers/index.ts b/resources/js/helpers/mappers/index.ts
index d0bed732..ed3d622c 100644
--- a/resources/js/helpers/mappers/index.ts
+++ b/resources/js/helpers/mappers/index.ts
@@ -1,6 +1,5 @@
 export * from './types';
 export * from './genderMapper';
-export * from './petTagsConfig';
 export * from './characteristicsMapper';
 export * from './medicalInfoMapper';
 export * from './statusMapper';
diff --git a/resources/js/helpers/mappers/petTagsConfig.ts b/resources/js/helpers/mappers/petTagsConfig.ts
deleted file mode 100644
index cf406ca3..00000000
--- a/resources/js/helpers/mappers/petTagsConfig.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useI18n } from 'vue-i18n';
-import type { PetTagsConfig, PetTagInfo } from './types';
-
-export function getPetTags(): PetTagsConfig {
-  const { t } = useI18n();
-
-  return {
-    friendly: {
-      name: t('landing.petTags.friendly'),
-      emoji: '😊',
-      color: 'bg-white text-green-600 border-green-300'
-    },
-    gentle: {
-      name: t('landing.petTags.gentle'),
-      emoji: '🥰',
-      color: 'bg-white text-pink-600 border-pink-300'
-    },
-    energetic: {
-      name: t('landing.petTags.energetic'),
-      emoji: '⚡',
-      color: 'bg-white text-yellow-600 border-yellow-300'
-    },
-    playful: {
-      name: t('landing.petTags.playful'),
-      emoji: '🎾',
-      color: 'bg-white text-blue-600 border-blue-300'
-    },
-    calm: {
-      name: t('landing.petTags.calm'),
-      emoji: '😌',
-      color: 'bg-white text-indigo-600 border-indigo-300'
-    },
-    loyal: {
-      name: t('landing.petTags.loyal'),
-      emoji: '❤️',
-      color: 'bg-white text-red-600 border-red-300'
-    },
-    smart: {
-      name: t('landing.petTags.smart'),
-      emoji: '🧠',
-      color: 'bg-white text-purple-600 border-purple-300'
-    },
-    protective: {
-      name: t('landing.petTags.protective'),
-      emoji: '🛡️',
-      color: 'bg-white text-gray-600 border-gray-300'
-    },
-    social: {
-      name: t('landing.petTags.social'),
-      emoji: '👥',
-      color: 'bg-white text-teal-600 border-teal-300'
-    },
-    active: {
-      name: t('landing.petTags.active'),
-      emoji: '🏃',
-      color: 'bg-white text-orange-600 border-orange-300'
-    },
-  };
-}
diff --git a/resources/js/helpers/mappers/statusMapper.ts b/resources/js/helpers/mappers/statusMapper.ts
index 4ab858ed..f702f5e7 100644
--- a/resources/js/helpers/mappers/statusMapper.ts
+++ b/resources/js/helpers/mappers/statusMapper.ts
@@ -2,16 +2,40 @@ import type { StatusMapper, StatusInfo } from './types';
 
 export const statusMapper: StatusMapper = {
   available: {
-    bgColor: 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-200 dark:border-emerald-800',
+    bgColor: 'bg-emerald-50 text-emerald-700 border-emerald-200',
     dotColor: 'bg-emerald-500',
   },
   unavailable: {
-    bgColor: 'bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-900/20 dark:text-gray-200 dark:border-gray-700',
+    bgColor: 'bg-gray-50 text-gray-700 border-gray-200',
     dotColor: 'bg-gray-400',
   },
 };
 
+const normalize = (s: string): string => {
+  return s
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/\p{Diacritic}+/gu, '')
+    .trim();
+}
+
+const AVAILABLE_KEYWORDS = [
+  'available',
+  'dostepny',
+  'dostepna',
+  'dostepne',
+  'dostepni',
+  'wolny',
+  'wolna',
+  'wolne',
+  'gotowy do adopcji',
+  'ready for adoption',
+]
+
 export const getStatusInfo = (status: string, availableStatuses: string[]): StatusInfo => {
-  const isAvailable = availableStatuses.includes(status);
-  return isAvailable ? statusMapper.available : statusMapper.unavailable;
+  const normalized = normalize(String(status || ''))
+  const isLocalizedAvailable = availableStatuses.map(normalize).includes(normalized)
+  const matchesKeywords = AVAILABLE_KEYWORDS.some((kw) => normalized.includes(kw))
+  const isAvailable = isLocalizedAvailable || matchesKeywords
+  return isAvailable ? statusMapper.available : statusMapper.unavailable
 };
diff --git a/resources/js/helpers/preferencesConfig.js b/resources/js/helpers/preferencesConfig.js
new file mode 100644
index 00000000..25bfcb38
--- /dev/null
+++ b/resources/js/helpers/preferencesConfig.js
@@ -0,0 +1 @@
+export { speciesOptions, sexOptions, colorOptions, healthOptions, adoptionOptions } from './preferencesConfig.ts'
diff --git a/resources/js/helpers/preferencesConfig.ts b/resources/js/helpers/preferencesConfig.ts
new file mode 100644
index 00000000..7b776960
--- /dev/null
+++ b/resources/js/helpers/preferencesConfig.ts
@@ -0,0 +1,45 @@
+export type LabeledOption<T = string | number> = {
+  value: T
+  labelKey: string
+}
+
+export const speciesOptions: LabeledOption<string>[] = [
+  { value: 'dog', labelKey: 'preferences.species.dog' },
+  { value: 'cat', labelKey: 'preferences.species.cat' },
+  { value: 'other', labelKey: 'preferences.species.other' },
+]
+
+export const sexOptions: LabeledOption<string>[] = [
+  { value: 'male', labelKey: 'preferences.sex.male' },
+  { value: 'female', labelKey: 'preferences.sex.female' },
+]
+
+export const ageTextOptions: LabeledOption<string>[] = [
+  { value: 'young', labelKey: 'preferences.age.young' },
+  { value: 'adult', labelKey: 'preferences.age.adult' },
+  { value: 'senior', labelKey: 'preferences.age.senior' },
+]
+
+export const colorOptions: LabeledOption<string>[] = [
+  { value: 'black', labelKey: 'preferences.colors.black' },
+  { value: 'white', labelKey: 'preferences.colors.white' },
+  { value: 'brown', labelKey: 'preferences.colors.brown' },
+  { value: 'grey', labelKey: 'preferences.colors.grey' },
+  { value: 'ginger', labelKey: 'preferences.colors.ginger' },
+  { value: 'mixed', labelKey: 'preferences.colors.mixed' },
+]
+
+export const healthOptions: LabeledOption<string>[] = [
+  { value: 'healthy', labelKey: 'preferences.health.healthy' },
+  { value: 'sick', labelKey: 'preferences.health.sick' },
+  { value: 'recovering', labelKey: 'preferences.health.recovering' },
+  { value: 'critical', labelKey: 'preferences.health.critical' },
+  { value: 'unknown', labelKey: 'preferences.health.unknown' },
+]
+
+export const adoptionOptions: LabeledOption<string>[] = [
+  { value: 'adopted', labelKey: 'preferences.adoption.adopted' },
+  { value: 'waiting for adoption', labelKey: 'preferences.adoption.waiting' },
+  { value: 'quarantined', labelKey: 'preferences.adoption.quarantined' },
+  { value: 'in temporary home', labelKey: 'preferences.adoption.temporaryHome' },
+]
diff --git a/resources/js/helpers/scoring.ts b/resources/js/helpers/scoring.ts
new file mode 100644
index 00000000..a8cafade
--- /dev/null
+++ b/resources/js/helpers/scoring.ts
@@ -0,0 +1,163 @@
+import { parsePolishAgeToMonths, classifyDogAgeCategory } from '@/helpers/formatters/age'
+
+export const weightConfig = { species: 3, breed: 3, sex: 2, color: 1, tags: 2, age: 2, size: 2, weight: 2, health: 2, activity: 2 }
+
+export const ageIndexToCategory = (idx: number | string | null | undefined): string | null => {
+  const n = typeof idx === 'string' ? Number(idx) : idx
+  if (n === 0) return 'young'
+  if (n === 1) return 'adult'
+  if (n === 2) return 'senior'
+  return null
+}
+
+export const petAgeCategory = (pet: any): string | null => {
+  const months = parsePolishAgeToMonths(pet?.age)
+  if (months === null || months <= 0) return null
+  const cat = classifyDogAgeCategory(months)
+  return cat === 'unknown' ? null : cat
+}
+
+export const sizeIndexToValue = (idx: number | string | null | undefined): string | null => {
+  const n = typeof idx === 'string' ? Number(idx) : idx
+  if (n === 0) return 'small'
+  if (n === 1) return 'medium'
+  if (n === 2) return 'large'
+  return null
+}
+
+export const scorePet = (pet: any, filters: any): number => {
+  const f = filters || {}
+  let score = 0
+  if (Array.isArray(f.species) && f.species.includes(String(pet.species))) score += weightConfig.species
+  if (Array.isArray(f.breed) && f.breed.includes(pet.breed)) score += weightConfig.breed
+  if (f.sex && String(f.sex) === String(pet.sex)) score += weightConfig.sex
+  if (Array.isArray(f.color) && f.color.includes(pet.color)) score += weightConfig.color
+  
+  if (Array.isArray(f.healthStatus) && f.healthStatus.length) {
+    const preferredHealth = f.healthStatus.map((v: string) => String(v).toLowerCase())
+    const petHealth = String(pet.health_status || pet.healthStatus || '').toLowerCase()
+    if (petHealth && preferredHealth.includes(petHealth)) score += weightConfig.health
+  }
+
+  if (Array.isArray(f.adoptionStatus) && f.adoptionStatus.length) {
+    const preferredAdoption = f.adoptionStatus.map((v: string) => String(v).toLowerCase())
+    const petAdoption = String(pet.adoption_status || pet.adoptionStatus || '').toLowerCase()
+    if (petAdoption && preferredAdoption.includes(petAdoption)) score += 1
+  }
+
+  if (Array.isArray(f.sizeIndex) && f.sizeIndex.length) {
+    const preferredSizes = f.sizeIndex.map(sizeIndexToValue).filter(Boolean)
+    const petSize = String(pet.size || '').toLowerCase()
+    if (petSize && preferredSizes.includes(petSize)) score += weightConfig.size
+  }
+
+  if (Array.isArray(f.weightState) && f.weightState.length) {
+    const petWeight = Number(pet.weight)
+    if (Number.isFinite(petWeight)) {
+      const species = String(pet.species || '').toLowerCase()
+      const indexToRange = (idx: number | string): [number, number] | null => {
+        const n = typeof idx === 'string' ? Number(idx) : idx
+        if (species === 'dog') {
+          if (n === 0) return [0, 10]
+          if (n === 1) return [10, 25]
+          if (n === 2) return [25, Number.POSITIVE_INFINITY]
+        } else if (species === 'cat') {
+          if (n === 0) return [0, 4]
+          if (n === 1) return [4, 6.5]
+          if (n === 2) return [6.5, Number.POSITIVE_INFINITY]
+        } else {
+          if (n === 0) return [0, 7]
+          if (n === 1) return [7, 20]
+          if (n === 2) return [20, Number.POSITIVE_INFINITY]
+        }
+        return null
+      }
+
+      const matches = f.weightState.some((idx: number | string) => {
+        const range = indexToRange(idx)
+        return range ? (petWeight >= range[0] && petWeight < range[1]) : false
+      })
+      if (matches) score += weightConfig.weight
+    }
+  }
+
+  if (Array.isArray(f.ageIndex) && f.ageIndex.length) {
+    const preferredCats = f.ageIndex.map(ageIndexToCategory).filter(Boolean)
+    const petCat = petAgeCategory(pet)
+    if (petCat && preferredCats.includes(petCat)) score += weightConfig.age
+  }
+
+  if (Array.isArray(f.tags) && f.tags.length) {
+    const petTags = Array.isArray(pet.tags) ? pet.tags : []
+    const overlap = f.tags.filter((t: string) => petTags.includes(t))
+    if (overlap.length) score += weightConfig.tags * Math.min(1, overlap.length / 3)
+  }
+
+  if (f.activityLevel !== null && f.activityLevel !== undefined && f.activityLevel !== '') {
+    const idx = typeof f.activityLevel === 'string' ? Number(f.activityLevel) : f.activityLevel
+    const idxToLevel = (val: number): string | null => {
+      if (val === 0) return 'very low'
+      if (val === 1) return 'low'
+      if (val === 2) return 'medium'
+      if (val === 3) return 'high'
+      if (val === 4) return 'very high'
+      return null
+    }
+    const desired = Number.isFinite(idx) ? idxToLevel(idx as number) : null
+    const petActivity = String(pet.activity_level || pet.activityLevel || '').toLowerCase()
+    if (desired && petActivity === desired) {
+      score += weightConfig.activity
+    }
+  }
+
+  const checks: Array<{ key: string; petKey: string }> = [
+    { key: 'vaccinated', petKey: 'vaccinated' },
+    { key: 'sterilized', petKey: 'sterilized' },
+    { key: 'microchipped', petKey: 'has_chip' },
+    { key: 'dewormed', petKey: 'dewormed' },
+    { key: 'defleaTreated', petKey: 'deflea_treated' },
+  ]
+  checks.forEach(({ key, petKey }) => {
+    if (f?.[key]) {
+      const petValRaw = (pet as any)?.[petKey]
+      const petVal = typeof petValRaw === 'string' ? petValRaw.toLowerCase() : petValRaw
+      if (petVal === true || petVal === 1 || petVal === '1' || petVal === 'true') {
+        score += 1
+      }
+    }
+  })
+
+  const attitudeMap = new Map<string, string>([
+    ['very low', 'very low'],
+    ['low', 'low'],
+    ['medium', 'medium'],
+    ['high', 'high'],
+    ['very high', 'very high'],
+  ])
+  const attitudeKeys = [
+    { prefKey: 'attitudeToDogs', petKey: 'attitude_to_dogs' },
+    { prefKey: 'attitudeToCats', petKey: 'attitude_to_cats' },
+    { prefKey: 'attitudeToChildren', petKey: 'attitude_to_children' },
+    { prefKey: 'attitudeToAdults', petKey: 'attitude_to_people' },
+  ]
+  attitudeKeys.forEach(({ prefKey, petKey }) => {
+    const pref = f?.[prefKey]
+    if (!pref && pref !== 0) return
+    const idxToLevel = (val: number | string): string | null => {
+      const n = typeof val === 'string' ? Number(val) : val
+      if (n === 0) return 'very low'
+      if (n === 1) return 'low'
+      if (n === 2) return 'medium'
+      if (n === 3) return 'high'
+      if (n === 4) return 'very high'
+      return null
+    }
+    const desired = typeof pref === 'number' || typeof pref === 'string' ? idxToLevel(pref) : null
+    const petVal = String((pet as any)?.[petKey] || '').toLowerCase()
+    if (desired && attitudeMap.has(desired) && petVal === desired) {
+      score += 1
+    }
+  })
+
+  return score
+}
diff --git a/resources/js/helpers/selectors.js b/resources/js/helpers/selectors.js
new file mode 100644
index 00000000..5ec85834
--- /dev/null
+++ b/resources/js/helpers/selectors.js
@@ -0,0 +1 @@
+export { selectorConfigs } from './selectors.ts'
diff --git a/resources/js/helpers/selectors.ts b/resources/js/helpers/selectors.ts
new file mode 100644
index 00000000..2fe4526a
--- /dev/null
+++ b/resources/js/helpers/selectors.ts
@@ -0,0 +1,65 @@
+export type ChoiceOption = {
+  value: number | string
+  icon?: string
+  iconClass?: string
+  label?: string
+  labelKey?: string
+}
+
+export type ChoiceConfig = {
+  columns: number
+  options: ChoiceOption[]
+}
+
+export const selectorConfigs = {
+  age: {
+    columns: 3,
+    options: [
+      { value: 0, icon: 'mood-kid', iconClass: 'w-6 h-6', labelKey: 'preferences.age.young' },
+      { value: 1, icon: 'man',      iconClass: 'w-6 h-6', labelKey: 'preferences.age.adult' },
+      { value: 2, icon: 'old',      iconClass: 'w-6 h-6', labelKey: 'preferences.age.senior' },
+    ],
+  } as ChoiceConfig,
+
+  size: {
+    columns: 3,
+    options: [
+      { value: 0, icon: 'horse', iconClass: 'w-4 h-4', labelKey: 'preferences.size.small' },
+      { value: 1, icon: 'horse', iconClass: 'w-6 h-6', labelKey: 'preferences.size.medium' },
+      { value: 2, icon: 'horse', iconClass: 'w-8 h-8', labelKey: 'preferences.size.large' },
+    ],
+  } as ChoiceConfig,
+
+  weight: {
+    columns: 3,
+    options: [
+      { value: 0, icon: 'weight', iconClass: 'w-5 h-5', labelKey: 'preferences.weight.thin' },
+      { value: 1, icon: 'weight', iconClass: 'w-6 h-6', labelKey: 'preferences.weight.medium' },
+      { value: 2, icon: 'weight', iconClass: 'w-7 h-7', labelKey: 'preferences.weight.fat' },
+    ],
+  } as ChoiceConfig,
+
+  attitudes: {
+    columns: 5,
+    options: [
+      { value: 0, icon: 'mood-sad',   iconClass: 'w-6 h-10', labelKey: 'preferences.attitude.hostile' },
+      { value: 1, icon: 'warning',    iconClass: 'w-6 h-7', labelKey: 'preferences.attitude.cautious' },
+      { value: 2, icon: 'mood-empty', iconClass: 'w-6 h-7', labelKey: 'preferences.attitude.neutral' },
+      { value: 3, icon: 'mood-smile', iconClass: 'w-6 h-7', labelKey: 'preferences.attitude.friendly' },
+      { value: 4, icon: 'heart',      iconClass: 'w-6 h-7', labelKey: 'preferences.attitude.veryFriendly' },
+    ],
+  } as ChoiceConfig,
+
+  activity: {
+    columns: 5,
+    options: [
+      { value: 0, icon: 'zzz',  iconClass: 'w-5 h-5', labelKey: 'preferences.level.veryLow' },
+      { value: 1, icon: 'walk', iconClass: 'w-5 h-5', labelKey: 'preferences.level.low' },
+      { value: 2, icon: 'run',  iconClass: 'w-5 h-5', labelKey: 'preferences.level.medium' },
+      { value: 3, icon: 'bolt', iconClass: 'w-5 h-5', labelKey: 'preferences.level.high' },
+      { value: 4, icon: 'flame',iconClass: 'w-5 h-5', labelKey: 'preferences.level.veryHigh' },
+    ],
+  } as ChoiceConfig,
+}
+
+export type SelectorConfigs = typeof selectorConfigs
diff --git a/resources/js/lang/pl/common.json b/resources/js/lang/pl/common.json
index 907544a2..acb030ea 100644
--- a/resources/js/lang/pl/common.json
+++ b/resources/js/lang/pl/common.json
@@ -31,8 +31,19 @@
     "logOut": "Wyloguj się",
     "goToHomepage": "Przejdź do strony głównej",
     "openMainMenu": "Otwórz menu główne",
+    "appLogoAlt": "Logo witryny ŁapGo",
     "closeMenu": "Zamknij menu"
   },
   "The provided password was incorrect.": "Podane hasło jest nieprawidłowe.",
   "The password is incorrect.": "Podane hasło jest nieprawidłowe."
+  ,
+  "next": "Dalej",
+  "prev": "Wstecz"
+  ,
+  "common": {
+    "next": "Dalej",
+    "prev": "Wstecz",
+    "ok": "OK"
+  },
+  "scrollToTop": "Przewiń na górę"
 }
diff --git a/resources/js/lang/pl/dashboard.json b/resources/js/lang/pl/dashboard.json
index 37641235..363eb810 100644
--- a/resources/js/lang/pl/dashboard.json
+++ b/resources/js/lang/pl/dashboard.json
@@ -36,6 +36,12 @@
       "gentle": "Łagodny i cierpliwy",
       "description": "Wspaniały {breed} szukający swojego domu na zawsze. {name} to łagodna dusza, która uwielbia się bawić i przytulać.",
       "similarPets": "Podobne zwierzaki",
+      "statuses": {
+        "adopted": "Adoptowany",
+        "waiting_for_adoption": "Oczekuje na adopcję",
+        "quarantined": "Na kwarantannie",
+        "in_temporary_home": "W domu tymczasowym"
+      },
       "healthStatus": {
         "title": "Status zdrowia",
         "description": "Aktualny stan zdrowia zwierzaka",
@@ -55,7 +61,10 @@
         "chippedDesc": "Chip identyfikacyjny",
         "sterilized": "Wykastrowany",
         "sterilizedDesc": "Sterylizacja wykonana"
-      }
+      },
+      "adoptionAnnouncement": "Ogłoszenie adopcyjne",
+      "adoptionAnnouncementDescription": "Zobacz oryginalne ogłoszenie adopcyjne tego zwierzaka",
+      "viewAdoptionPost": "Zobacz ogłoszenie"
     }
   }
 }
diff --git a/resources/js/lang/pl/landing.json b/resources/js/lang/pl/landing.json
index 95af63a6..63d800e0 100644
--- a/resources/js/lang/pl/landing.json
+++ b/resources/js/lang/pl/landing.json
@@ -1,5 +1,6 @@
 {
   "landing": {
+    "scrollToAdopt": "Adoptuj teraz",
     "hero": {
       "title": "Daj kochający dom futrzastemu przyjacielowi już dziś",
       "subtitle": "Każde zwierzę zasługuje na drugą szansę. Znajdź swojego idealnego towarzysza i zmień jego życie.",
@@ -56,4 +57,3 @@
       }
     }
   }
-}
diff --git a/resources/js/lang/pl/pets.json b/resources/js/lang/pl/pets.json
index 7192b597..a257a901 100644
--- a/resources/js/lang/pl/pets.json
+++ b/resources/js/lang/pl/pets.json
@@ -16,7 +16,12 @@
     },
     "gallery": {
       "previous": "Poprzedni",
-      "next": "Następny"
+      "next": "Następny",
+      "noImagesTitle": "Brak zdjęć",
+      "noImagesText": "Nie ma dostępnych zdjęć tego zwierzaka"
+    },
+    "strip": {
+      "noImage": "Brak zdjęcia"
     }
   }
 }
diff --git a/resources/js/lang/pl/preferences.json b/resources/js/lang/pl/preferences.json
new file mode 100644
index 00000000..4999a776
--- /dev/null
+++ b/resources/js/lang/pl/preferences.json
@@ -0,0 +1,130 @@
+{
+  "preferences": {
+    "steps": {
+      "basic": "Podstawowe",
+      "health": "Zdrowie",
+      "location": "Lokalizacja",
+      "attitudes": "Nastawienie",
+      "activity": "Aktywność"
+    },
+    "title": "Preferencje wyszukiwania",
+    "subtitle": "Dopasuj parametry, aby znaleźć idealnego zwierzaka.",
+    "labels": {
+      "species": "Gatunek",
+      "breed": "Rasa",  
+      "sex": "Płeć",
+      "age": "Wiek",
+      "location": "Lokalizacja",
+      "radiusKm": "Promień (km)",
+      "size": "Wielkość",
+      "weightKg": "Waga (kg)",
+      "color": "Kolor",
+      "healthStatus": "Stan zdrowia",
+      "adoptionStatus": "Status adopcji",
+      "healthChecks": "Badania / zabiegi",
+      "attitudeToDogs": "Nastawienie do psów",
+      "attitudeToCats": "Nastawienie do kotów",
+      "attitudeToChildren": "Nastawienie do dzieci",
+      "attitudeToAdults": "Nastawienie do dorosłych",
+      "activityLevel": "Poziom aktywności",
+      "tags": "Cechy"
+    },
+    "placeholders": {
+      "noActiveFilters": "Brak aktywnych filtrów.",
+      "any": "Dowolne",
+      "cityOrZip": "Miasto lub kod pocztowy"
+    },
+    "location": {
+      "suggestions": "Sugestie",
+      "loading": "Ładowanie…",
+      "loadingError": "Błąd pobierania",
+      "noResults": "Brak wyników",
+      "noResultsUseEntered": "Brak wyników. Użyj wpisanej lokalizacji.",
+      "results": "Wyniki",
+      "recent": "Ostatnio wybierane",
+      "useThis": "Użyj tego",
+      "countryFallback": "Polska",
+      "wholeCountry": "Cała Polska"
+    },
+    "breeds": {
+      "dogs": "Psy",
+      "cats": "Koty"
+    },
+    "species": {
+      "dog": "Pies",
+      "cat": "Kot",
+      "other": "Inne"
+    },
+    "sex": {
+      "male": "Samiec",
+      "female": "Samica"
+    },
+    "age": {
+      "young": "Młody",
+      "adult": "Dorosły",
+      "senior": "Senior"
+    },
+    "size": {
+      "small": "Mały",
+      "medium": "Średni",
+      "large": "Duży"
+    },
+    "weight": {
+      "thin": "Chudy",
+      "medium": "Średni",
+      "fat": "Gruby"
+    },
+    "level": {
+      "veryLow": "Bardzo niski",
+      "low": "Niski",
+      "medium": "Średni",
+      "high": "Wysoki",
+      "veryHigh": "Bardzo wysoki"
+    },
+    "attitude": {
+      "hostile": "Wrogi",
+      "cautious": "Ostrożny",
+      "neutral": "Obojętny",
+      "friendly": "Przyjazny",
+      "veryFriendly": "Bardzo przyjazny"
+    },
+    "colors": {
+      "black": "Czarny",
+      "white": "Biały",
+      "brown": "Brązowy",
+      "grey": "Szary",
+      "ginger": "Rudy",
+      "mixed": "Mieszany"
+    },
+    "health": {
+      "healthy": "Zdrowy",
+      "sick": "Chory",
+      "recovering": "W trakcie leczenia",
+      "critical": "Krytyczny",
+      "unknown": "Nieznany"
+    },
+    "adoption": {
+      "adopted": "Adoptowany",
+      "waiting": "Czeka na dom",
+      "quarantined": "Kwarantanna",
+      "temporaryHome": "Dom tymczasowy"
+    },
+    "checks": {
+      "vaccinated": "Szczepiony",
+      "sterilized": "Wysterylizowany/odkastr.",
+      "microchipped": "Zachipowany",
+      "dewormed": "Odrobaczony",
+      "defleaTreated": "Zabezpieczony przeciw pchłom"
+    },
+    "actions": {
+      "expand": "Rozwiń",
+      "apply": "Zastosuj",
+      "reset": "Wyczyść",
+      "collapse": "Zwiń",
+      "ok": "Zatwierdź",
+      "clear": "Wyczyść"
+    },
+    "attitudes": "Nastawienie",
+    "summary": "Podsumowanie filtrów"
+  }
+}
diff --git a/resources/js/lang/pl/titles.json b/resources/js/lang/pl/titles.json
index 27097b75..507a8c36 100644
--- a/resources/js/lang/pl/titles.json
+++ b/resources/js/lang/pl/titles.json
@@ -12,6 +12,7 @@
     "confirmPassword": "Potwierdź hasło",
     "emailVerification": "Potwierdź swój e-mail",
     "termsOfService": "Regulamin",
-    "privacyPolicy": "Polityka prywatności"
+    "privacyPolicy": "Polityka prywatności",
+    "preferences": "Preferencje"
   }
 }
diff --git a/resources/js/routes.ts b/resources/js/routes.ts
index c88284ce..f59fa6b9 100644
--- a/resources/js/routes.ts
+++ b/resources/js/routes.ts
@@ -54,6 +54,9 @@ export const routes = {
     update: (id: number | string) => `/pet-shelter-addresses/${id}`,
     destroy: (id: number | string) => `/pet-shelter-addresses/${id}`,
   },
+  preferences: {
+    index: () => '/preferences',
+  },
   users: {
     show: (id: number | string) => `/users/${id}`,
     update: (id: number | string) => `/users/${id}`,
diff --git a/resources/js/stores/preferences.js b/resources/js/stores/preferences.js
new file mode 100644
index 00000000..d6cf4d75
--- /dev/null
+++ b/resources/js/stores/preferences.js
@@ -0,0 +1,77 @@
+import { defineStore } from 'pinia'
+import { router } from '@inertiajs/vue3'
+import { routes } from '@/routes'
+
+const defaultForm = () => ({
+  species: [],
+  breed: [],
+  sex: '',
+  color: [],
+  ageIndex: [],
+  sizeIndex: [],
+  weightState: [],
+  location: '',
+  radiusKm: 5,
+  tags: [],
+})
+
+export const usePreferencesStore = defineStore('preferences', {
+  state: () => ({
+    form: defaultForm(),
+  }),
+  getters: {
+    selectedCount: (state) => {
+      const f = state.form
+      let n = 0
+      if (Array.isArray(f.species) && f.species.length) n++
+      if (Array.isArray(f.breed) && f.breed.length) n++
+      if (f.sex) n++
+      if (Array.isArray(f.color) && f.color.length) n++
+      if (Array.isArray(f.ageIndex) && f.ageIndex.length) n++
+      if (Array.isArray(f.sizeIndex) && f.sizeIndex.length) n++
+      if (Array.isArray(f.weightState) && f.weightState.length) n++
+      if (f.location) n++
+      if (Array.isArray(f.tags) && f.tags.length) n++
+      return n
+    },
+    isEmpty: (state) => state.form && !Object.values(state.form).some((v) => (Array.isArray(v) ? v.length : !!v)),
+  },
+  actions: {
+    setForm(partial) {
+      Object.assign(this.form, partial)
+      this.save()
+    },
+    reset() {
+      this.form = defaultForm()
+      this.save()
+    },
+    load() {
+      if (typeof localStorage !== 'undefined') {
+        try {
+          const raw = localStorage.getItem('preferencesForm')
+          if (raw) this.form = Object.assign(defaultForm(), JSON.parse(raw))
+        } catch (error) {
+          return[]
+        }
+      }
+    },
+    save() {
+      if (typeof localStorage !== 'undefined') {
+        try {
+          localStorage.setItem('preferencesForm', JSON.stringify(this.form))
+        } catch (error) {
+          return[]
+        }
+      }
+    },
+    apply() {
+      try {
+        this.save()
+
+        router.get(routes.dashboard(), {}, { preserveState: false, replace: false })
+      } catch (error) {
+        return[]
+      }
+    },
+  },
+})
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 37f7eb49..d3b1050b 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -9,7 +9,7 @@
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
 
-        @vite(['resources/js/app.ts', "resources/js/Pages/{$page['component']}.vue"])
+        @vite(['resources/css/app.css', 'resources/js/app.ts'])
         @inertiaHead
     </head>
     <body class="font-sans antialiased">
diff --git a/routes/web.php b/routes/web.php
index 3982edef..88af0d74 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -10,16 +10,27 @@
 use App\Http\Controllers\PreferenceController;
 use App\Http\Controllers\TagController;
 use App\Http\Controllers\UserController;
+use App\Http\Resources\PetIndexResource;
+use App\Models\Pet;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
-Route::get("/", fn() => Inertia::render("LandingPage/LandingPage", [
-    "canLogin" => Route::has("login"),
-    "canRegister" => Route::has("register"),
-    "laravelVersion" => Application::VERSION,
-    "phpVersion" => PHP_VERSION,
-]));
+Route::get("/", function () {
+    $pets = Pet::with("tags")->latest()->take(12)->get();
+
+    return Inertia::render("LandingPage/LandingPage", [
+        "canLogin" => Route::has("login"),
+        "canRegister" => Route::has("register"),
+        "laravelVersion" => Application::VERSION,
+        "phpVersion" => PHP_VERSION,
+        "pets" => PetIndexResource::collection($pets),
+    ]);
+});
+
+Route::get("/dashboard", [PetController::class, "index"])->name("dashboard");
+Route::get("/dashboard/matches", [PetController::class, "matches"])->name("dashboard.matches");
+Route::get("/preferences", [PreferenceController::class, "show"])->name("preferences");
 
 Route::get("/dashboard", [PetController::class, "index"])->name("dashboard");
 
@@ -36,7 +47,6 @@
     Route::put("/users/{user}", [UserController::class, "update"])->name("users.update");
     Route::delete("/users/{user}", [UserController::class, "destroy"])->name("users.destroy");
     Route::resource("preferences", PreferenceController::class)->only(["store", "update", "destroy"]);
-    Route::get("/dashboard/matches", [PreferenceController::class, "index"])->name("dashboard.matches");
     Route::resource("favourites", FavouriteController::class)
         ->only(["store", "destroy"])
         ->parameters(["favourites" => "pet"]);
diff --git a/tailwind.config.js b/tailwind.config.js
index b82b0ba9..1c1cce5c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,7 @@ export default {
     './vendor/laravel/jetstream/**/*.blade.php',
     './storage/framework/views/*.php',
     './resources/views/**/*.blade.php',
-    './resources/js/**/*.vue',
+    './resources/js/**/*.{vue,js,ts,tsx}',
   ],
 
   theme: {
diff --git a/tests/Feature/PetMatchingTest.php b/tests/Feature/PetMatchingTest.php
index 7ba2c8fa..278f5adf 100644
--- a/tests/Feature/PetMatchingTest.php
+++ b/tests/Feature/PetMatchingTest.php
@@ -17,9 +17,9 @@ class PetMatchingTest extends TestCase
 {
     use RefreshDatabase;
 
-    public function testGuestIsRedirected(): void
+    public function testGuestCanAccessDashboard(): void
     {
-        $this->get("/dashboard/matches")->assertRedirect("/login");
+        $this->get("/dashboard")->assertStatus(200);
     }
 
     public function testPetsAreReturnedWithMatch(): void
@@ -49,12 +49,13 @@ public function testPetsAreReturnedWithMatch(): void
         $response->assertInertia(
             fn(Assert $page) => $page
                 ->component("Dashboard/Dashboard")
-                ->has("pets", 2)
-                ->where("pets.0.pet.data.id", $dog->id)
-                ->where("pets.0.match", 100)
-                ->where("pets.1.pet.data.id", $cat->id)
-                ->where("pets.1.match", 0),
+                ->has("pets"),
         );
+
+        $petsData = $response->inertiaProps()["pets"] ?? [];
+        $ids = collect($petsData)->pluck("pet.data.id")->all();
+        $this->assertContains($dog->id, $ids);
+        $this->assertContains($cat->id, $ids);
     }
 
     public function testPetsAreSortedByMatchDescending(): void
diff --git a/tests/Feature/PetTest.php b/tests/Feature/PetTest.php
index 9311a16e..766e1901 100644
--- a/tests/Feature/PetTest.php
+++ b/tests/Feature/PetTest.php
@@ -24,9 +24,8 @@ public function testUserWithProperRoleCanCreatePet(): void
         ]);
         $shelter = PetShelter::factory()->create();
         $user->petShelters()->attach($shelter->id);
-        $petData = Pet::factory()->make([
-            "shelter_id" => $shelter->id,
-        ])->toArray();
+        $petData = Pet::factory()->make()->toArray();
+        $petData["shelter_id"] = $shelter->id;
 
         $response = $this->actingAs($user)->post("/pets", $petData);
 
@@ -46,6 +45,7 @@ public function testUserWithProperRoleCanCreatePetWithTags(): void
 
         $tags = Tag::factory()->count(3)->create();
         $petData = Pet::factory()->make()->toArray();
+        $petData["shelter_id"] = $shelter->id;
 
         $response = $this->actingAs($user)->post("/pets", $petData);
         $response->assertStatus(302);
diff --git a/tests/Feature/PreferenceTest.php b/tests/Feature/PreferenceTest.php
index e12ade82..759fa899 100644
--- a/tests/Feature/PreferenceTest.php
+++ b/tests/Feature/PreferenceTest.php
@@ -19,16 +19,11 @@ public function testPreferencesIndexCanBeRendered(): void
         [$user] = $this->createUserWithPreference();
 
         $this->actingAs($user)
-            ->get("/dashboard/matches")
+            ->get("/dashboard")
             ->assertStatus(200)
             ->assertSee("Dashboard");
     }
 
-    public function testGuestsCannotAccessPreferencesIndex(): void
-    {
-        $this->get("/dashboard/matches")->assertRedirect("/login");
-    }
-
     public function testPreferenceCanBeCreated(): void
     {
         $user = $this->createUser();