diff --git a/.env.example b/.env.example
index 1c4b5d2..dac178a 100644
--- a/.env.example
+++ b/.env.example
@@ -41,7 +41,7 @@ BROADCAST_CONNECTION=log
 FILESYSTEM_DISK=local
 QUEUE_CONNECTION=database
 
-CACHE_STORE=database
+CACHE_STORE=redis
 CACHE_PREFIX=
 
 MEMCACHED_HOST=127.0.0.1
diff --git a/app/Contracts/PetApi.php b/app/Contracts/PetApi.php
new file mode 100644
index 0000000..589b400
--- /dev/null
+++ b/app/Contracts/PetApi.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Contracts;
+
+interface PetApi
+{
+    public function searchForPets(string $query = ''): \Illuminate\Support\Collection;
+
+    public function getPet(string $id): ?\Illuminate\Support\Collection;
+
+    public function getImage(string $id): ?string;
+}
diff --git a/app/Http/Controllers/PetController.php b/app/Http/Controllers/PetController.php
new file mode 100644
index 0000000..37fc925
--- /dev/null
+++ b/app/Http/Controllers/PetController.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Contracts\PetApi;
+use App\Services\CatService;
+
+class PetController extends Controller
+{
+    public function __construct(protected CatService $petService)
+    {
+
+    }
+
+    /**
+     * Display a listing of all the pets.
+     */
+    public function index()
+    {
+        $pets = $this->petService->searchForPets()->map(function ($pet) {
+            $pet['path'] = '/pets/' . $pet['id'];
+            return $pet;
+        });
+
+        return view('dashboard', compact('pets'));
+    }
+
+    /**
+     * Display the individual pet.
+     */
+    public function show(string $id)
+    {
+        $pet = $this->petService->getPet($id);
+        if (!$pet) {
+            abort(404);
+        }
+        $image = $this->petService->getImage($pet['reference_image_id']);
+        return view('show', compact('pet', 'image'));
+    }
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 452e6b6..4f321e2 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -2,6 +2,8 @@
 
 namespace App\Providers;
 
+use App\Contracts\PetApi;
+use App\Services\CatService;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
diff --git a/app/Services/CatService.php b/app/Services/CatService.php
new file mode 100644
index 0000000..1614815
--- /dev/null
+++ b/app/Services/CatService.php
@@ -0,0 +1,94 @@
+<?php
+
+namespace App\Services;
+
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\RateLimiter;
+
+class CatService implements \App\Contracts\PetApi
+{
+
+    private function exceededRateLimit(): bool
+    {
+        if (RateLimiter::tooManyAttempts('pet-api-call', 20)) {
+            return true;
+        }
+
+        RateLimiter::increment('pet-api-call');
+
+        return false;
+
+    }
+    public function searchForPets(string $query = ''): \Illuminate\Support\Collection
+    {
+        if (Cache::tags(['pets'])->has($query)) {
+            return Cache::tags(['pets'])->get($query);
+        }
+        else {
+            try {
+                if ($this->exceededRateLimit()) {
+                    return collect([]);
+                }
+                $pets = \Illuminate\Support\Facades\Http::withHeaders([
+                    'Content-Type' => 'application/json',
+                    'x-api-key' => config('app.cat_api_key'),
+                ])->get('https://api.thecatapi.com/v1/breeds', [
+                    'q' => $query
+                ])->collect();
+
+                Cache::tags(['pets'])->put($query, $pets, 3600);
+                return $pets;
+            } catch (\Exception $e) {
+                return collect([]);
+            }
+        }
+    }
+
+    public function getPet(string $id): ?\Illuminate\Support\Collection
+    {
+        if (Cache::tags(['pets page'])->has($id)) {
+            return Cache::tags(['pets page'])->get($id);
+        }
+        else {
+            try {
+                if ($this->exceededRateLimit()) {
+                    return null;
+                }
+                $pets = \Illuminate\Support\Facades\Http::withHeaders([
+                    'Content-Type' => 'application/json',
+                    'x-api-key' => config('app.cat_api_key'),
+                ])->get('https://api.thecatapi.com/v1/breeds/' . $id, [
+                ])->collect();
+
+                Cache::tags(['pets page'])->put($id, $pets, 3600);
+                return $pets;
+            } catch (\Exception $e) {
+                return collect([]);
+            }
+        }
+    }
+
+    public function getImage(string $id): ?string
+    {
+        if (Cache::tags(['pets image'])->has($id)) {
+            return Cache::tags(['pets image'])->get($id);
+        }
+        else {
+            try {
+                if ($this->exceededRateLimit()) {
+                    return null;
+                }
+                $image = \Illuminate\Support\Facades\Http::withHeaders([
+                    'Content-Type' => 'application/json',
+                    'x-api-key' => config('app.cat_api_key'),
+                ])->get('https://api.thecatapi.com/v1/images/' . $id, [
+                ])->collect()['url'];
+
+                Cache::tags(['pets image'])->put($id, $image, 3600);
+                return $image;
+            } catch (\Exception $e) {
+                return null;
+            }
+        }
+    }
+}
diff --git a/config/app.php b/config/app.php
index f467267..c5e084c 100644
--- a/config/app.php
+++ b/config/app.php
@@ -123,4 +123,5 @@
         'store' => env('APP_MAINTENANCE_STORE', 'database'),
     ],
 
+    'cat_api_key' => env('API_CAT','')
 ];
diff --git a/package-lock.json b/package-lock.json
index ad24369..d1e34e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,22 @@
 {
-  "name": "html",
+  "name": "dev-test",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
+      "dependencies": {
+        "@vueuse/core": "^14.0.0",
+        "vue": "^3.5.22"
+      },
       "devDependencies": {
         "axios": "^1.7.4",
         "concurrently": "^9.0.1",
         "laravel-mix": "^6.0.49",
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.79.5",
-        "sass-loader": "^12.6.0"
+        "sass-loader": "^12.6.0",
+        "vue-loader": "^16.8.3"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -351,19 +356,19 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.25.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz",
-      "integrity": "sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==",
-      "dev": true,
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz",
-      "integrity": "sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==",
-      "dev": true,
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -482,12 +487,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.8",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.8.tgz",
-      "integrity": "sha512-HcttkxzdPucv3nNFmfOOMfFf64KgdJVqm1KaCm25dPGMLElo9nsLvXeJECQg8UzPuBGLyTSA0ZzqCtDSzKTEoQ==",
-      "dev": true,
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.8"
+        "@babel/types": "^7.28.5"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -1629,14 +1634,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.25.8",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.8.tgz",
-      "integrity": "sha512-JWtuCu8VQsMladxVz/P4HzHUGCAwpuqacmowgXFs5XjxIgKuNjnLokQzuVjlTvIzODaDmpjT3oxcC48vyk9EWg==",
-      "dev": true,
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.25.7",
-        "@babel/helper-validator-identifier": "^7.25.7",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1704,10 +1708,10 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
@@ -2349,6 +2353,12 @@
       "integrity": "sha512-AZU7vQcy/4WFEuwnwsNsJnFwupIpbllH1++LXScN6uxT1Z4zPzdrWG97w4/I7eFKFTvfy/bHFStWjdBAg2Vjug==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.12",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz",
@@ -2358,6 +2368,156 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.22.tgz",
+      "integrity": "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "@vue/shared": "3.5.22",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.22.tgz",
+      "integrity": "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz",
+      "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "@vue/compiler-core": "3.5.22",
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/compiler-ssr": "3.5.22",
+        "@vue/shared": "3.5.22",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.19",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.22.tgz",
+      "integrity": "sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.22.tgz",
+      "integrity": "sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.22.tgz",
+      "integrity": "sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.22.tgz",
+      "integrity": "sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.22",
+        "@vue/runtime-core": "3.5.22",
+        "@vue/shared": "3.5.22",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.22.tgz",
+      "integrity": "sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.22",
+        "@vue/shared": "3.5.22"
+      },
+      "peerDependencies": {
+        "vue": "3.5.22"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.22.tgz",
+      "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
+      "license": "MIT"
+    },
+    "node_modules/@vueuse/core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.0.0",
+        "@vueuse/shared": "14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.0.0.tgz",
+      "integrity": "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.0.0.tgz",
+      "integrity": "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -3969,6 +4129,12 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -4452,6 +4618,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -5984,6 +6156,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -6256,16 +6437,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -6747,8 +6928,7 @@
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -6775,10 +6955,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
-      "dev": true,
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -6793,9 +6972,10 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
       "engines": {
@@ -8288,7 +8468,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8647,15 +8826,6 @@
       "integrity": "sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==",
       "dev": true
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -8890,6 +9060,49 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
       "dev": true
     },
+    "node_modules/vue": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
+      "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/compiler-sfc": "3.5.22",
+        "@vue/runtime-dom": "3.5.22",
+        "@vue/server-renderer": "3.5.22",
+        "@vue/shared": "3.5.22"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-loader": {
+      "version": "16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.1.0 || ^5.0.0-0"
+      }
+    },
+    "node_modules/vue-loader/node_modules/hash-sum": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
+      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/package.json b/package.json
index 5de3e6d..2bfecd1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,5 @@
 {
   "private": true,
-  "type": "commonjs",
   "scripts": {
     "build": "vite build",
     "dev": "vite"
@@ -11,6 +10,11 @@
     "laravel-mix": "^6.0.49",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.79.5",
-    "sass-loader": "^12.6.0"
+    "sass-loader": "^12.6.0",
+    "vue-loader": "^16.8.3"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.0.0",
+    "vue": "^3.5.22"
   }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index e59d6a0..e888d85 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1,7 @@
-import './bootstrap';
+import { createApp } from "vue";
+import Search  from "./components/Search.vue";
+
+const app = createApp();
+app.component('search', Search);
+
+app.mount('#search');
diff --git a/resources/js/components/Search.vue b/resources/js/components/Search.vue
new file mode 100644
index 0000000..4d1a54f
--- /dev/null
+++ b/resources/js/components/Search.vue
@@ -0,0 +1,52 @@
+<script setup>
+import {ref} from "vue";
+import { useDebounceFn } from "@vueuse/core"
+
+const prop = defineProps({
+    results: {
+        type: String,
+        required: true
+    },
+})
+const searchQuery = ref('');
+const results = ref(JSON.parse(prop.results))
+
+const search = () => {
+    // Couple ways to handle this.
+    // The dataset is very small so we can filter on the client side.
+    // For larger datasets, we would want to make an API call to the server to fetch results.
+    // For the larger datasets we would pass the query to the searchForPets() service function.
+
+    // For the purpose of this developer test I've opted for client side for the reasons above.
+    results.value = JSON.parse(prop.results).filter(item =>
+        item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    );
+
+};
+
+const onInput = useDebounceFn(() => {
+    search();
+}, 500)
+
+</script>
+
+<template>
+    <h3 class="typewriter mb-4">
+        <span id="typewriterText">What pet are you looking for?</span>
+    </h3>
+
+    <form v-on:submit.prevent="search" class="d-flex justify-content-center w-100" style="max-width: 800px;">
+        <div class="position-relative w-100">
+            <input id="searchInput" v-model="searchQuery" @input="onInput" class="form-control me-2 rounded-5 form-control-lg" type="search" placeholder="Search" aria-label="Search">
+            <i class="ph ph-magnifying-glass position-absolute searchInput-icon"></i>
+        </div>
+    </form>
+    <div class="mt-4">
+        <p v-for="item in results">
+            <a :href="item.path">{{ item.name }}</a>
+        </p>
+    </div>
+</template>
+
+<style>
+</style>belg
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index de7bac5..d651e33 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -19,19 +19,14 @@
 @endpush
 
 @section('content')
-    <h3 class="typewriter mb-4">
-        <span id="typewriterText">What pet are you looking for?</span>
-    </h3>
-
-    <form class="d-flex justify-content-center w-100" style="max-width: 800px;">
-        <div class="position-relative w-100">
-            <input id="searchInput" class="form-control me-2 rounded-5 form-control-lg" type="search" placeholder="Search" aria-label="Search">
-            <i class="ph ph-magnifying-glass position-absolute searchInput-icon"></i>
-        </div>
-    </form>
+
+    <div id="search">
+        <search results="{{ $pets }}"></search>
+    </div>
 @endsection
 
 @push('scripts')
+    <script src="{{ asset('js/app.js') }}"></script>
     <script>
         document.addEventListener("DOMContentLoaded", function() {
             document.getElementById('searchInput').focus();
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 9d0df2c..059e1af 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -29,7 +29,7 @@
     <p class="mb-0"><i class="ph ph-copyright"></i> 2024 Shopblocks Dev Test</p>
 </footer>
 
-<script src="{{ asset('js/boostrap5-3.min.js') }}"></script>
+<script src="{{ asset('js/bootstrap5.3.min.js') }}"></script>
 @stack('scripts')
 <script>
     document.addEventListener("DOMContentLoaded", function() {
diff --git a/resources/views/show.blade.php b/resources/views/show.blade.php
new file mode 100644
index 0000000..18f8225
--- /dev/null
+++ b/resources/views/show.blade.php
@@ -0,0 +1,65 @@
+@extends('layouts.app')
+
+@section('title', 'Home')
+
+@push('style')
+    <style>
+        #searchInput {
+            padding: 10px 22px;
+            border-color: var(--primary-bg-color-dark);
+            min-width: 350px;
+        }
+
+        .searchInput-icon {
+            right: 22px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    </style>
+@endpush
+
+@section('content')
+
+    <h1>{{ $pet['name'] }}</h1>
+    <a href="{{route('dashboard')}}">Back</a>
+
+    <div class="container">
+        <div class="row">
+            <div class="col-md-4">
+                @isset($image)
+                    <img class="img-fluid" src="{{ $image }}" alt="Pet Image" />
+                @endisset
+            </div>
+
+            <div class="col-md-8">
+                @isset($pet['origin'])
+                    <p>
+                        <b>Origin:</b>
+                        {{ $pet['origin'] }}
+                    </p>
+                @endisset
+                @isset($pet['life_span'])
+                    <p>
+                        <b>Lifespan:</b>
+                        {{ $pet['life_span'] }}
+                    </p>
+                @endisset
+                @isset($pet['temperament'])
+                    <p>
+                        <b>Temperament:</b>
+                        {{ $pet['temperament'] }}
+                    </p>
+                @endisset
+                @isset($pet['wikipedia_url'])
+                    <p><a href="{{ $pet['wikipedia_url'] }}">Read More</a></p>
+                @endisset
+            </div>
+        </div>
+    </div>
+
+
+@endsection
+
+@push('scripts')
+    <script src="{{ asset('js/app.js') }}"></script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index ef77af2..b2504f6 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -2,6 +2,6 @@
 
 use Illuminate\Support\Facades\Route;
 
-Route::get('/', function () {
-    return view('dashboard');
-});
+
+Route::get('/', [\App\Http\Controllers\PetController::class, 'index'])->name('dashboard');
+Route::get('/pets/{pet}', [\App\Http\Controllers\PetController::class, 'show'])->name('pets.show');
diff --git a/webpack.mix.js b/webpack.mix.js
index 2792ba5..5b8491a 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -4,3 +4,4 @@ mix.css('resources/css/app.css', 'public/css');
 mix.css('resources/css/bootstrap.min.css', 'public/css')
 mix.js('resources/js/phosphor-icons.js', 'public/js');
 mix.js('resources/js/bootstrap5.3.min.js', 'public/js');
+mix.js('resources/js/app.js', 'public/js').vue();