diff --git a/.env.example b/.env.example
index a12311fe4..b3b9035df 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,4 @@
 VITE_MEILISEARCH_HOST=https://search.bettergov.ph
 VITE_MEILISEARCH_PORT=443
-VITE_MEILISEARCH_SEARCH_API_KEY= # Meilisearch Search API Key
\ No newline at end of file
+VITE_MEILISEARCH_SEARCH_API_KEY= # Meilisearch Search API Key
+VITE_MAILER_API=https://better-gov-mailer.onrender.com
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 654dbc375..07a36fe55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,20 @@
       "name": "gov-ph-portal",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^5.2.2",
         "@icons-pack/react-simple-icons": "^13.7.0",
         "@meilisearch/instant-meilisearch": "^0.26.0",
-        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-scroll-area": "^1.0.5",
+        "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@types/react-leaflet": "^3.0.0",
-        "clsx": "^2.1.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "csv-parser": "^3.2.0",
         "date-fns": "^3.3.1",
         "dotenv": "^16.5.0",
@@ -27,17 +33,21 @@
         "leaflet": "^1.9.4",
         "lucide-react": "^0.513.0",
         "meilisearch": "^0.50.0",
+        "next-themes": "^0.4.6",
         "nuqs": "^2.6.0",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-helmet-async": "^2.0.5",
+        "react-hook-form": "^7.63.0",
         "react-i18next": "^15.7.3",
         "react-instantsearch": "^7.15.8",
         "react-leaflet": "5.0.0-rc.2",
         "react-router-dom": "^6.22.2",
         "react-world-flags": "^1.5.0",
         "recharts": "^2.15.3",
-        "tailwind-merge": "^2.2.1",
+        "sonner": "^2.0.7",
+        "tailwind-merge": "^2.6.0",
+        "tailwindcss-animate": "^1.0.7",
         "wrangler": "^4.19.1",
         "zod": "^4.1.11"
       },
@@ -75,58 +85,42 @@
         "vite": "^5.4.2"
       }
     },
-    "node_modules/@algolia/abtesting": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.3.0.tgz",
-      "integrity": "sha512-KqPVLdVNfoJzX5BKNGM9bsW8saHeyax8kmPFXul5gejrSPN3qss7PgsFH5mMem7oR8tvjvNkia97ljEYPYCN8Q==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
-      },
-      "engines": {
-        "node": ">= 14.0.0"
-      }
-    },
     "node_modules/@algolia/client-abtesting": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.37.0.tgz",
-      "integrity": "sha512-Dp2Zq+x9qQFnuiQhVe91EeaaPxWBhzwQ6QnznZQnH9C1/ei3dvtmAFfFeaTxM6FzfJXDLvVnaQagTYFTQz3R5g==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.27.0.tgz",
+      "integrity": "sha512-SITU5umoknxETtw67TxJu9njyMkWiH8pM+Bvw4dzfuIrIAT6Y1rmwV4y0A0didWoT+6xVuammIykbtBMolBcmg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.27.0",
+        "@algolia/requester-browser-xhr": "5.27.0",
+        "@algolia/requester-fetch": "5.27.0",
+        "@algolia/requester-node-http": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-analytics": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.37.0.tgz",
-      "integrity": "sha512-wyXODDOluKogTuZxRII6mtqhAq4+qUR3zIUJEKTiHLe8HMZFxfUEI4NO2qSu04noXZHbv/sRVdQQqzKh12SZuQ==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.27.0.tgz",
+      "integrity": "sha512-go1b9qIZK5vYEQ7jD2bsfhhhVsoh9cFxQ5xF8TzTsg2WOCZR3O92oXCkq15SOK0ngJfqDU6a/k0oZ4KuEnih1Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.27.0",
+        "@algolia/requester-browser-xhr": "5.27.0",
+        "@algolia/requester-fetch": "5.27.0",
+        "@algolia/requester-node-http": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-common": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.37.0.tgz",
-      "integrity": "sha512-GylIFlPvLy9OMgFG8JkonIagv3zF+Dx3H401Uo2KpmfMVBBJiGfAb9oYfXtplpRMZnZPxF5FnkWaI/NpVJMC+g==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.27.0.tgz",
+      "integrity": "sha512-tnFOzdNuMzsz93kOClj3fKfuYoF3oYaEB5bggULSj075GJ7HUNedBEm7a6ScrjtnOaOtipbnT7veUpHA4o4wEQ==",
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -134,64 +128,64 @@
       }
     },
     "node_modules/@algolia/client-insights": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.37.0.tgz",
-      "integrity": "sha512-T63afO2O69XHKw2+F7mfRoIbmXWGzgpZxgOFAdP3fR4laid7pWBt20P4eJ+Zn23wXS5kC9P2K7Bo3+rVjqnYiw==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.27.0.tgz",
+      "integrity": "sha512-y1qgw39qZijjQBXrqZTiwK1cWgWGRiLpJNWBv9w36nVMKfl9kInrfsYmdBAfmlhVgF/+Woe0y1jQ7pa4HyShAw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.27.0",
+        "@algolia/requester-browser-xhr": "5.27.0",
+        "@algolia/requester-fetch": "5.27.0",
+        "@algolia/requester-node-http": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-personalization": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.37.0.tgz",
-      "integrity": "sha512-1zOIXM98O9zD8bYDCJiUJRC/qNUydGHK/zRK+WbLXrW1SqLFRXECsKZa5KoG166+o5q5upk96qguOtE8FTXDWQ==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.27.0.tgz",
+      "integrity": "sha512-XluG9qPZKEbiLoIfXTKbABsWDNOMPx0t6T2ImJTTeuX+U/zBdmfcqqgcgkqXp+vbXof/XX/4of9Eqo1JaqEmKw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.27.0",
+        "@algolia/requester-browser-xhr": "5.27.0",
+        "@algolia/requester-fetch": "5.27.0",
+        "@algolia/requester-node-http": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-query-suggestions": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.37.0.tgz",
-      "integrity": "sha512-31Nr2xOLBCYVal+OMZn1rp1H4lPs1914Tfr3a34wU/nsWJ+TB3vWjfkUUuuYhWoWBEArwuRzt3YNLn0F/KRVkg==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.27.0.tgz",
+      "integrity": "sha512-V8/To+SsAl2sdw2AAjeLJuCW1L+xpz+LAGerJK7HKqHzE5yQhWmIWZTzqYQcojkii4iBMYn0y3+uReWqT8XVSQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.27.0",
+        "@algolia/requester-browser-xhr": "5.27.0",
+        "@algolia/requester-fetch": "5.27.0",
+        "@algolia/requester-node-http": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-search": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.37.0.tgz",
-      "integrity": "sha512-DAFVUvEg+u7jUs6BZiVz9zdaUebYULPiQ4LM2R4n8Nujzyj7BZzGr2DCd85ip4p/cx7nAZWKM8pLcGtkTRTdsg==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.27.0.tgz",
+      "integrity": "sha512-EJJ7WmvmUXZdchueKFCK8UZFyLqy4Hz64snNp0cTc7c0MKaSeDGYEDxVsIJKp15r7ORaoGxSyS4y6BGZMXYuCg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.27.0",
+        "@algolia/requester-browser-xhr": "5.27.0",
+        "@algolia/requester-fetch": "5.27.0",
+        "@algolia/requester-node-http": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -204,87 +198,87 @@
       "license": "MIT"
     },
     "node_modules/@algolia/ingestion": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.37.0.tgz",
-      "integrity": "sha512-pkCepBRRdcdd7dTLbFddnu886NyyxmhgqiRcHHaDunvX03Ij4WzvouWrQq7B7iYBjkMQrLS8wQqSP0REfA4W8g==",
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.27.0.tgz",
+      "integrity": "sha512-xNCyWeqpmEo4EdmpG57Fs1fJIQcPwt5NnJ6MBdXnUdMVXF4f5PHgza+HQWQQcYpCsune96jfmR0v7us6gRIlCw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.27.0",
+        "@algolia/requester-browser-xhr": "5.27.0",
+        "@algolia/requester-fetch": "5.27.0",
+        "@algolia/requester-node-http": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/monitoring": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.37.0.tgz",
-      "integrity": "sha512-fNw7pVdyZAAQQCJf1cc/ih4fwrRdQSgKwgor4gchsI/Q/ss9inmC6bl/69jvoRSzgZS9BX4elwHKdo0EfTli3w==",
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.27.0.tgz",
+      "integrity": "sha512-P0NDiEFyt9UYQLBI0IQocIT7xHpjMpoFN3UDeerbztlkH9HdqT0GGh1SHYmNWpbMWIGWhSJTtz6kSIWvFu4+pw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.27.0",
+        "@algolia/requester-browser-xhr": "5.27.0",
+        "@algolia/requester-fetch": "5.27.0",
+        "@algolia/requester-node-http": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/recommend": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.37.0.tgz",
-      "integrity": "sha512-U+FL5gzN2ldx3TYfQO5OAta2TBuIdabEdFwD5UVfWPsZE5nvOKkc/6BBqP54Z/adW/34c5ZrvvZhlhNTZujJXQ==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.27.0.tgz",
+      "integrity": "sha512-cqfTMF1d1cc7hg0vITNAFxJZas7MJ4Obc36WwkKpY23NOtGb+4tH9X7UKlQa2PmTgbXIANoJ/DAQTeiVlD2I4Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.27.0",
+        "@algolia/requester-browser-xhr": "5.27.0",
+        "@algolia/requester-fetch": "5.27.0",
+        "@algolia/requester-node-http": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-browser-xhr": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.37.0.tgz",
-      "integrity": "sha512-Ao8GZo8WgWFABrU7iq+JAftXV0t+UcOtCDL4mzHHZ+rQeTTf1TZssr4d0vIuoqkVNnKt9iyZ7T4lQff4ydcTrw==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.27.0.tgz",
+      "integrity": "sha512-ErenYTcXl16wYXtf0pxLl9KLVxIztuehqXHfW9nNsD8mz9OX42HbXuPzT7y6JcPiWJpc/UU/LY5wBTB65vsEUg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0"
+        "@algolia/client-common": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-fetch": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.37.0.tgz",
-      "integrity": "sha512-H7OJOXrFg5dLcGJ22uxx8eiFId0aB9b0UBhoOi4SMSuDBe6vjJJ/LeZyY25zPaSvkXNBN3vAM+ad6M0h6ha3AA==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.27.0.tgz",
+      "integrity": "sha512-CNOvmXsVi+IvT7z1d+6X7FveVkgEQwTNgipjQCHTIbF9KSMfZR7tUsJC+NpELrm10ALdOMauah84ybs9rw1cKQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0"
+        "@algolia/client-common": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-node-http": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.37.0.tgz",
-      "integrity": "sha512-npZ9aeag4SGTx677eqPL3rkSPlQrnzx/8wNrl1P7GpWq9w/eTmRbOq+wKrJ2r78idlY0MMgmY/mld2tq6dc44g==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.27.0.tgz",
+      "integrity": "sha512-Nx9EdLYZDsaYFTthqmc0XcVvsx6jqeEX8fNiYOB5i2HboQwl8pJPj1jFhGqoGd0KG7KFR+sdPO5/e0EDDAru2Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0"
+        "@algolia/client-common": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -1911,6 +1905,18 @@
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
       "license": "MIT"
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
+      "integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
@@ -2579,20 +2585,20 @@
       }
     },
     "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
-      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
         "@radix-ui/react-focus-scope": "1.1.7",
         "@radix-ui/react-id": "1.1.1",
         "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-presence": "1.1.5",
         "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-slot": "1.2.3",
         "@radix-ui/react-use-controllable-state": "1.2.2",
@@ -2614,6 +2620,78 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -2743,6 +2821,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu": {
       "version": "2.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.15.tgz",
@@ -2948,6 +3049,129 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -2996,6 +3220,129 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -3081,6 +3428,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
@@ -3117,6 +3479,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/rect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
@@ -3357,6 +3742,12 @@
       "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
       "license": "MIT"
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
@@ -4207,26 +4598,25 @@
       }
     },
     "node_modules/algoliasearch": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.37.0.tgz",
-      "integrity": "sha512-y7gau/ZOQDqoInTQp0IwTOjkrHc4Aq4R8JgpmCleFwiLl+PbN2DMWoDUWZnrK8AhNJwT++dn28Bt4NZYNLAmuA==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.27.0.tgz",
+      "integrity": "sha512-2PvAgvxxJzA3+dB+ERfS2JPdvUsxNf89Cc2GF5iCcFupTULOwmbfinvqrC4Qj9nHJJDNf494NqEN/1f9177ZTQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/abtesting": "1.3.0",
-        "@algolia/client-abtesting": "5.37.0",
-        "@algolia/client-analytics": "5.37.0",
-        "@algolia/client-common": "5.37.0",
-        "@algolia/client-insights": "5.37.0",
-        "@algolia/client-personalization": "5.37.0",
-        "@algolia/client-query-suggestions": "5.37.0",
-        "@algolia/client-search": "5.37.0",
-        "@algolia/ingestion": "1.37.0",
-        "@algolia/monitoring": "1.37.0",
-        "@algolia/recommend": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-abtesting": "5.27.0",
+        "@algolia/client-analytics": "5.27.0",
+        "@algolia/client-common": "5.27.0",
+        "@algolia/client-insights": "5.27.0",
+        "@algolia/client-personalization": "5.27.0",
+        "@algolia/client-query-suggestions": "5.27.0",
+        "@algolia/client-search": "5.27.0",
+        "@algolia/ingestion": "1.27.0",
+        "@algolia/monitoring": "1.27.0",
+        "@algolia/recommend": "5.27.0",
+        "@algolia/requester-browser-xhr": "5.27.0",
+        "@algolia/requester-fetch": "5.27.0",
+        "@algolia/requester-node-http": "5.27.0"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -4661,6 +5051,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/cli-cursor": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -5039,7 +5441,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
       "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
-      "license": "MIT",
       "dependencies": {
         "node-fetch": "^2.6.12"
       }
@@ -5306,10 +5707,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -6752,7 +7152,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
       "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
-      "license": "MIT",
       "dependencies": {
         "void-elements": "3.1.0"
       }
@@ -6817,7 +7216,6 @@
           "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6"
       },
@@ -6834,7 +7232,6 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
       "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.23.2"
       }
@@ -6843,7 +7240,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-3.0.2.tgz",
       "integrity": "sha512-PdlvPnvIp4E1sYi46Ik4tBYh/v/NbYfFFgTjkwFl0is8A18s7/bx9aXqsrOax9WUbeNS6mD2oix7Z0yGGf6m5g==",
-      "license": "MIT",
       "dependencies": {
         "cross-fetch": "4.0.0"
       }
@@ -7464,9 +7860,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
-      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.0.tgz",
+      "integrity": "sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -7888,19 +8284,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -7908,22 +8291,19 @@
       "dev": true
     },
     "node_modules/lint-staged": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.1.6.tgz",
-      "integrity": "sha512-U4kuulU3CKIytlkLlaHcGgKscNfJPNTiDF2avIUGFCv7K95/DCYQ7Ra62ydeRWmgQGg9zJYw2dzdbztwJlqrow==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.2.0.tgz",
+      "integrity": "sha512-spdYSOCQ2MdZ9CM1/bu/kDmaYGsrpNOeu1InFFV8uhv14x6YIubGxbCpSmGILFoxkiheNQPDXSg5Sbb5ZuVnug==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "chalk": "^5.6.0",
-        "commander": "^14.0.0",
-        "debug": "^4.4.1",
-        "lilconfig": "^3.1.3",
-        "listr2": "^9.0.3",
-        "micromatch": "^4.0.8",
-        "nano-spawn": "^1.0.2",
-        "pidtree": "^0.6.0",
-        "string-argv": "^0.3.2",
-        "yaml": "^2.8.1"
+        "commander": "14.0.1",
+        "listr2": "9.0.4",
+        "micromatch": "4.0.8",
+        "nano-spawn": "1.0.3",
+        "pidtree": "0.6.0",
+        "string-argv": "0.3.2",
+        "yaml": "2.8.1"
       },
       "bin": {
         "lint-staged": "bin/lint-staged.js"
@@ -7935,19 +8315,6 @@
         "url": "https://opencollective.com/lint-staged"
       }
     },
-    "node_modules/lint-staged/node_modules/chalk": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
-      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
     "node_modules/lint-staged/node_modules/commander": {
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.1.tgz",
@@ -8359,6 +8726,7 @@
       "version": "3.22.3",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.3.tgz",
       "integrity": "sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -8468,11 +8836,20 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "license": "MIT",
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -8491,20 +8868,17 @@
     "node_modules/node-fetch/node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "license": "MIT"
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/node-fetch/node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "license": "BSD-2-Clause"
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/node-fetch/node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "license": "MIT",
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -9130,11 +9504,26 @@
         "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.63.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
+      "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.7.3.tgz",
       "integrity": "sha512-AANws4tOE+QSq/IeMF/ncoHlMNZaVLxpa5uUGW1wjike68elVYr0018L9xYoqBr1OFO7G7boDPrbn0HpMCJxTw==",
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",
         "html-parse-stringify": "^3.0.1"
@@ -9939,6 +10328,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -10261,9 +10660,17 @@
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
       "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
@@ -10279,9 +10686,9 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.4.tgz",
-      "integrity": "sha512-O1z7ajPkjTgEgmTGz0v9X4eqeEXTDREPTO77pVC1Nbs86feBU1Zhdg+edzavPmYW1olxkwsqA2v4uOw6E8LeDg==",
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
+      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -11356,7 +11763,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
       "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
-      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12288,6 +12694,7 @@
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.11.tgz",
       "integrity": "sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index 5b0a14f33..7220f2ac6 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "tsc && npm run generate:metadata && vite build",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
-    "format": "prettier --write .",
+    "format": "prettier --write ./src/pages/philippines",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:headed": "playwright test --headed",
@@ -34,14 +34,20 @@
     "generate:metadata": "npm run generate:llms-txt && npm run generate:sitemap"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@icons-pack/react-simple-icons": "^13.7.0",
     "@meilisearch/instant-meilisearch": "^0.26.0",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@types/react-leaflet": "^3.0.0",
-    "clsx": "^2.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "csv-parser": "^3.2.0",
     "date-fns": "^3.3.1",
     "dotenv": "^16.5.0",
@@ -53,17 +59,21 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.513.0",
     "meilisearch": "^0.50.0",
+    "next-themes": "^0.4.6",
     "nuqs": "^2.6.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-helmet-async": "^2.0.5",
+    "react-hook-form": "^7.63.0",
     "react-i18next": "^15.7.3",
     "react-instantsearch": "^7.15.8",
     "react-leaflet": "5.0.0-rc.2",
     "react-router-dom": "^6.22.2",
     "react-world-flags": "^1.5.0",
     "recharts": "^2.15.3",
-    "tailwind-merge": "^2.2.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
     "wrangler": "^4.19.1",
     "zod": "^4.1.11"
   },
diff --git a/src/App.tsx b/src/App.tsx
index 23cc1ddd7..fce868b72 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import { NuqsAdapter } from 'nuqs/adapters/react-router/v6';
 import Navbar from './components/layout/Navbar';
 import Ticker from './components/ui/Ticker';
 import Footer from './components/layout/Footer';
+import Toaster from './components/ui/sonner';
 import Home from './pages/Home';
 import DesignGuide from './pages/DesignGuide';
 import Services from './pages/services';
@@ -20,7 +21,7 @@ import PhilippinesCulture from './pages/philippines/culture';
 import PhilippinesRegions from './pages/philippines/regions';
 import PhilippinesMap from './pages/philippines/map';
 import PublicHolidays from './pages/philippines/holidays';
-import Hotlines from './pages/philippines/Hotlines';
+import Hotlines from './pages/philippines/hotline';
 import VisaPage from './pages/travel/visa';
 import VisaTypesPage from './pages/travel/visa-types';
 import VisaTypeDetail from './pages/travel/visa-types/[type]';
@@ -92,6 +93,7 @@ function App() {
         <div className='min-h-screen flex flex-col'>
           <Navbar />
           <Ticker />
+          <Toaster position='top-right' closeButton />
           <ScrollToTop />
           <Routes>
             <Route path='/' element={<Home />} />
@@ -105,17 +107,22 @@ function App() {
             <Route path='/terms-of-service' element={<TermsOfService />} />
             <Route path='/sitemap' element={<SitemapPage />} />
             <Route path='/discord' Component={Discord} />
-
-            <Route path='/philippines'>
-              <Route index element={<Navigate to='about' replace />} />
-              <Route path='about' element={<AboutPhilippines />} />
-              <Route path='history' element={<PhilippinesHistory />} />
-              <Route path='culture' element={<PhilippinesCulture />} />
-              <Route path='regions' element={<PhilippinesRegions />} />
-              <Route path='map' element={<PhilippinesMap />} />
-              <Route path='holidays' element={<PublicHolidays />} />
-              <Route path='hotlines' element={<Hotlines />} />
-            </Route>
+            <Route path='/philippines/about' element={<AboutPhilippines />} />
+            <Route
+              path='/philippines/history'
+              element={<PhilippinesHistory />}
+            />
+            <Route
+              path='/philippines/culture'
+              element={<PhilippinesCulture />}
+            />
+            <Route
+              path='/philippines/regions'
+              element={<PhilippinesRegions />}
+            />
+            <Route path='/philippines/map' element={<PhilippinesMap />} />
+            <Route path='/philippines/holidays' element={<PublicHolidays />} />
+            <Route path='/philippines/hotlines' element={<Hotlines />} />
 
             {/* Data Routes */}
             <Route path='/data/weather' element={<WeatherPage />} />
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 000000000..5637ae27c
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={`fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ${className}`}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={`fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg ${className}`}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500'>
+        <X className='h-4 w-4' />
+        <span className='sr-only'>Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ${className}`}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={`text-lg font-semibold leading-none tracking-tight ${className}`}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={`text-sm text-gray-500 ${className}`}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/src/components/ui/form/constant.tsx b/src/components/ui/form/constant.tsx
new file mode 100644
index 000000000..bfd7ebcd7
--- /dev/null
+++ b/src/components/ui/form/constant.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { type FieldPath, type FieldValues } from 'react-hook-form';
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+export { FormFieldContext, FormItemContext };
diff --git a/src/components/ui/form/hook.ts b/src/components/ui/form/hook.ts
new file mode 100644
index 000000000..99879a337
--- /dev/null
+++ b/src/components/ui/form/hook.ts
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { FormFieldContext, FormItemContext } from './constant';
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+export { useFormField };
diff --git a/src/components/ui/form/index.tsx b/src/components/ui/form/index.tsx
new file mode 100644
index 000000000..f5a7f51b1
--- /dev/null
+++ b/src/components/ui/form/index.tsx
@@ -0,0 +1,139 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  Controller,
+  FormProvider,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form';
+
+import { cn } from '../../../lib/utils';
+import { Label } from '../label';
+import { FormItemContext, FormFieldContext } from './constant';
+import { useFormField } from './hook';
+
+const Form = FormProvider;
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        ref={ref}
+        className={cn('space-y-2 bg-white', className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-[0.8rem] text-gray-600', className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? '') : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-[0.8rem] font-medium text-red-500', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 000000000..49dd7ef43
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 000000000..8071fd263
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 000000000..41bdf7f30
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,157 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className='h-4 w-4 opacity-50' />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className='h-4 w-4' />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className='h-4 w-4' />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin] bg-white',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className='absolute right-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <SelectPrimitive.ItemIndicator>
+        <Check className='h-4 w-4' />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 000000000..0d48e82a2
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,29 @@
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner } from 'sonner';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className='toaster group'
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export default Toaster;
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 000000000..de84826c3
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+type TooltipWrapperProps = {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  sideOffset?: number;
+  delayDuration?: number;
+};
+const TooltipWrapper = ({
+  children,
+  content,
+  side,
+  sideOffset,
+  delayDuration,
+}: TooltipWrapperProps) => {
+  return (
+    <TooltipProvider delayDuration={delayDuration}>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side} sideOffset={sideOffset}>
+          <p>{content}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipWrapper,
+};
diff --git a/src/index.css b/src/index.css
index 7a66fbfeb..59afe6e1c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -160,6 +160,70 @@
   animation: marquee 30s linear infinite;
 }
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+
+  /* * {
+    @apply border-border;
+  } */
+
+  /* body {
+    @apply bg-background text-foreground;
+  } */
+}
+
 @keyframes fadeIn {
   0% {
     opacity: 0;
diff --git a/src/pages/philippines/hotline/api.ts b/src/pages/philippines/hotline/api.ts
new file mode 100644
index 000000000..de78b5949
--- /dev/null
+++ b/src/pages/philippines/hotline/api.ts
@@ -0,0 +1,60 @@
+import { toast } from 'sonner';
+import { useState } from 'react';
+
+const api = async <T>(path: string, options: RequestInit) => {
+  const baseUrl = import.meta.env.VITE_MAILER_API as string;
+  const res = await fetch(baseUrl + path, {
+    headers: {
+      'Content-Type': 'application/json',
+      ...(options.headers || {}),
+    },
+    ...options,
+  });
+
+  if (!res.ok) {
+    const errorText = await res.text();
+    throw new Error(errorText || `Request failed with status ${res.status}`);
+  }
+  const data = await res.text();
+
+  return data ? (JSON.parse(data) as T) : {};
+};
+
+const useSendOutdatedHotlineReport = () => {
+  const [isError, setError] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState(false);
+
+  const sendOutdatedHotlineReport = async (payload: {
+    organization: string;
+    outdated_hotline: string;
+    updated_hotline: string;
+  }) => {
+    try {
+      setLoading(true);
+      const response = await api<{ message: string }>('/hotlines/outdated', {
+        method: 'post',
+        body: JSON.stringify(payload),
+      });
+      toast.success('Report sent', {
+        description: 'Your report was successfully sent',
+      });
+      return response;
+    } catch (error) {
+      setError(true);
+      toast.error('Failed to send', {
+        description: 'Your report was not sent',
+      });
+      console.error('Failed to send hotline report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    isError,
+    isLoading,
+    sendOutdatedHotlineReport,
+  };
+};
+
+export { useSendOutdatedHotlineReport };
diff --git a/src/pages/philippines/hotline/hotlines-data/index.ts b/src/pages/philippines/hotline/hotlines-data/index.ts
new file mode 100644
index 000000000..d5d414d4b
--- /dev/null
+++ b/src/pages/philippines/hotline/hotlines-data/index.ts
@@ -0,0 +1,92 @@
+import hotlinesData from '../../../../data/philippines_hotlines.json';
+
+export interface Hotline {
+  id?: string;
+  name: string;
+  category: string;
+  numbers: string[];
+  description?: string;
+}
+
+const getCategoryHotlines = (category: string): Hotline[] => {
+  switch (category) {
+    case 'emergency':
+      return hotlinesData.emergencyHotlines;
+    case 'disaster':
+      return hotlinesData.disasterHotlines;
+    case 'security':
+      return hotlinesData.securityHotlines;
+    case 'transport':
+      return hotlinesData.transportHotlines;
+    case 'weather':
+      return hotlinesData.weatherHotlines;
+    case 'utility':
+      return hotlinesData.utilityHotlines;
+    case 'social':
+      return hotlinesData.socialServicesHotlines;
+    default:
+      return [
+        ...hotlinesData.emergencyHotlines,
+        ...hotlinesData.disasterHotlines,
+        ...hotlinesData.securityHotlines,
+        ...hotlinesData.transportHotlines,
+        ...hotlinesData.weatherHotlines,
+        ...hotlinesData.utilityHotlines,
+        ...hotlinesData.socialServicesHotlines,
+      ];
+  }
+};
+
+const filterHotlines = (activeCategory: string, searchTerm: string) => {
+  const data = getCategoryHotlines(activeCategory).filter(
+    hotline =>
+      hotline.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      hotline.numbers.some(number => number.includes(searchTerm))
+  );
+
+  return data;
+};
+
+const hotlines: Hotline[] = (() => {
+  return Object.values(hotlinesData)
+    .map(item =>
+      item.map(hotline => ({
+        ...hotline,
+        id: crypto.randomUUID(), // generated once
+      }))
+    )
+    .flat(1);
+})();
+
+const getHotlines = (search?: string): Hotline[] => {
+  if (!search) return hotlines;
+  const filteredHotlines = hotlines.filter(hotline =>
+    hotline.name.toLowerCase().includes(search)
+  );
+  return filteredHotlines;
+};
+
+/** Ensure that the hotline name exist  */
+const getHotlineNumbersByHotlineName = (name: string) => {
+  const hotline = hotlines.find(
+    h => h.name.toLowerCase() === name.toLowerCase()
+  );
+  return hotline?.numbers ?? [];
+};
+
+const getHotlineById = (id: string) => {
+  const hotline = hotlines.find(h => h.id === id);
+  return hotline;
+};
+
+const useHotlinesData = () => {
+  return {
+    getCategoryHotlines,
+    filterHotlines,
+    getHotlines,
+    getHotlineNumbersByHotlineName,
+    getHotlineById,
+  };
+};
+
+export default useHotlinesData;
diff --git a/src/pages/philippines/Hotlines.tsx b/src/pages/philippines/hotline/index.tsx
similarity index 80%
rename from src/pages/philippines/Hotlines.tsx
rename to src/pages/philippines/hotline/index.tsx
index 1540a6474..27fd4f12e 100644
--- a/src/pages/philippines/Hotlines.tsx
+++ b/src/pages/philippines/hotline/index.tsx
@@ -1,12 +1,4 @@
 import React, { useState } from 'react';
-import hotlinesData from '../../data/philippines_hotlines.json';
-
-interface Hotline {
-  name: string;
-  category: string;
-  numbers: string[];
-  description?: string;
-}
 import {
   PhoneIcon,
   SearchIcon,
@@ -17,10 +9,13 @@ import {
   DropletIcon,
   HeartIcon,
 } from 'lucide-react';
+import useHotlinesData from './hotlines-data';
+import { ReportModal } from './ui';
 
 const Hotlines: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [activeCategory, setActiveCategory] = useState<string>('all');
+  const { getCategoryHotlines } = useHotlinesData();
 
   const categories = [
     {
@@ -65,35 +60,6 @@ const Hotlines: React.FC = () => {
     },
   ];
 
-  const getCategoryHotlines = (category: string): Hotline[] => {
-    switch (category) {
-      case 'emergency':
-        return hotlinesData.emergencyHotlines as Hotline[];
-      case 'disaster':
-        return hotlinesData.disasterHotlines as Hotline[];
-      case 'security':
-        return hotlinesData.securityHotlines as Hotline[];
-      case 'transport':
-        return hotlinesData.transportHotlines as Hotline[];
-      case 'weather':
-        return hotlinesData.weatherHotlines as Hotline[];
-      case 'utility':
-        return hotlinesData.utilityHotlines as Hotline[];
-      case 'social':
-        return hotlinesData.socialServicesHotlines as Hotline[];
-      default:
-        return [
-          ...hotlinesData.emergencyHotlines,
-          ...hotlinesData.disasterHotlines,
-          ...hotlinesData.securityHotlines,
-          ...hotlinesData.transportHotlines,
-          ...hotlinesData.weatherHotlines,
-          ...hotlinesData.utilityHotlines,
-          ...hotlinesData.socialServicesHotlines,
-        ] as Hotline[];
-    }
-  };
-
   const filteredHotlines = getCategoryHotlines(activeCategory).filter(
     hotline =>
       hotline.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -102,6 +68,7 @@ const Hotlines: React.FC = () => {
 
   return (
     <div className='container mx-auto px-4 py-8'>
+      <ReportModal />
       <div className='text-center mb-8'>
         <h1 className='text-3xl font-bold mb-2'>
           Philippines Emergency Hotlines
diff --git a/src/pages/philippines/hotline/ui.tsx b/src/pages/philippines/hotline/ui.tsx
new file mode 100644
index 000000000..e12145012
--- /dev/null
+++ b/src/pages/philippines/hotline/ui.tsx
@@ -0,0 +1,219 @@
+import Button from '../../../components/ui/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../../../components/ui/dialog';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../../../components/ui/form';
+import { cn } from '../../../lib/utils';
+import { useSendOutdatedHotlineReport } from './api';
+import { Input } from '../../../components/ui/input';
+import { useEffect, useState } from 'react';
+import { Loader2, Mail } from 'lucide-react';
+import { TooltipWrapper } from '../../../components/ui/tooltip';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../../components/ui/select';
+import useHotlinesData, { Hotline } from './hotlines-data';
+
+const reportSchema = z
+  .object({
+    organizationId: z.string().nonempty('Choose an organization'),
+    outdated_hotline: z
+      .string()
+      .nonempty('Choose the outdated hotline you wish to report'),
+    updated_hotline: z.string().nonempty('Ensure that this field is not empty'),
+  })
+  .refine(data => data.outdated_hotline !== data.updated_hotline, {
+    path: ['updated_hotline'],
+    message: 'The updated hotline must be different from the current one',
+  });
+
+const ReportModal: React.FC = () => {
+  const { sendOutdatedHotlineReport, isError, isLoading } =
+    useSendOutdatedHotlineReport();
+
+  const [open, setOpen] = useState(false);
+  const form = useForm<z.infer<typeof reportSchema>>({
+    resolver: zodResolver(reportSchema),
+    defaultValues: {
+      organizationId: '',
+      outdated_hotline: '',
+      updated_hotline: '',
+    },
+  });
+
+  const { getHotlines, getHotlineById } = useHotlinesData();
+  const [hotline, setHotline] = useState<Hotline | null>(null);
+
+  useEffect(() => {
+    if (!isError) return;
+    setOpen(true);
+  }, [setOpen, isError]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <TooltipWrapper
+        content='Report a Hotline'
+        sideOffset={5}
+        delayDuration={300}
+      >
+        <DialogTrigger asChild>
+          <Button
+            variant='ghost'
+            className='fixed bottom-6 right-6 rounded-full shadow-xl px-4 py-6 bg-blue-600 hover:bg-blue-700 text-white transition-transform transform hover:scale-110 focus:ring-4 focus:ring-blue-300'
+            aria-label='Send a Report'
+          >
+            <Mail className='h-10 w-5' />
+          </Button>
+        </DialogTrigger>
+      </TooltipWrapper>
+
+      <DialogContent className='bg-white w-full'>
+        <DialogHeader>
+          <DialogTitle className='text-xl font-semibold text-gray-900'>
+            Send a Report
+          </DialogTitle>
+          <DialogDescription className='text-gray-800 mt-1'>
+            Help us keep the hotline information accurate. Please provide the
+            updated details below.
+          </DialogDescription>
+        </DialogHeader>
+        <div className='w-full truncate px-1'>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(async data => {
+                const payload = {
+                  organization: hotline!.name,
+                  outdated_hotline: data.outdated_hotline,
+                  updated_hotline: data.updated_hotline,
+                };
+                await sendOutdatedHotlineReport(payload);
+                setOpen(false);
+              })}
+              className='space-y-8'
+            >
+              <FormField
+                control={form.control}
+                name='organizationId'
+                render={({ field }) => (
+                  <FormItem>
+                    <div className='flex justify-between'>
+                      <FormLabel>Organization</FormLabel>
+                      <FormMessage />
+                    </div>
+                    <Select
+                      onValueChange={value => {
+                        const hotline = getHotlineById(value);
+                        setHotline(hotline!);
+                        field.onChange(hotline!.id!);
+                      }}
+                      value={field.value}
+                      name='organizationId'
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder='Choose the organization' />
+                        </SelectTrigger>
+                      </FormControl>
+
+                      <SelectContent className='w-[500px]'>
+                        {getHotlines().map(hotline => (
+                          <SelectItem
+                            value={hotline.id!}
+                            key={hotline.id}
+                            className='w-full truncate'
+                          >
+                            {hotline.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='outdated_hotline'
+                render={({ field }) => (
+                  <FormItem>
+                    <div className='flex justify-between'>
+                      <FormLabel>Outdated Hotline</FormLabel>
+                      <FormMessage />
+                    </div>
+                    <Select
+                      onValueChange={field.onChange}
+                      value={field.value ?? undefined}
+                      disabled={!hotline}
+                      name='outdated_hotline'
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder='Choose the outdated number' />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent className='w-[500px]'>
+                        {hotline?.numbers.map(number => (
+                          <SelectItem value={number} key={number}>
+                            {number}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='updated_hotline'
+                render={({ field }) => (
+                  <FormItem>
+                    <div className='flex justify-between'>
+                      <FormLabel>New Hotline</FormLabel>
+                      <FormMessage />
+                    </div>
+                    <FormControl>
+                      <Input
+                        placeholder='Input the new hotline here'
+                        {...field}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <div className='flex justify-end'>
+                <Button
+                  type='submit'
+                  className={cn(isLoading ?? 'animate-spin')}
+                  disabled={isLoading}
+                >
+                  {isLoading && <Loader2 className='h-4 w-4 animate-spin' />}
+                  {isLoading ? 'Sending...' : 'Send'}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { ReportModal };