diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..bb4fa4c
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,58 @@
+# AGENTS.md
+
+## Critical Rules
+
+- **Svelte 5 runes only**: Use `$state`, `$derived`, `$props` - never legacy `$:` or `export let`
+- **Context limitation**: `setContext` must be called during component initialization, NOT in `$effect`
+- **No custom CSS**: Use TailwindCSS utility classes exclusively
+- **TypeScript strict**: All code must be typed, no `any` without justification
+- **Package manager**: Use `npm`, not pnpm
+
+## Non-Obvious Architecture
+
+### External Data Source
+
+Brewery data comes from a separate repository: https://github.com/openbrewerydb/openbrewerydb
+
+- Data contributions go to the dataset repo, NOT this repo
+- This repo is the web interface/API wrapper
+
+### SEO Pattern
+
+- Use `SEO` component from `src/lib/components/SEO.svelte`
+- Use `SEOProvider` for nested SEO configuration
+- Context merges parent/child configs via `mergeSEO()` in `src/lib/seo.ts`
+- **Important**: `setContext` in SEOProvider must be called synchronously during init, not in effects
+
+### State Management
+
+- Stores in `src/lib/stores/` use Svelte 5 runes (e.g., `breweries.svelte.ts`)
+- Prefer runes over stores for local component state
+- Only use stores when state needs to be shared across unrelated components
+
+### Type Organization
+
+- `src/lib/types.ts`: Core types (Brewery, BreweryType, Metadata)
+- `src/lib/types/`: Additional type modules (e.g., `metrics.ts`)
+
+### Data Build Scripts
+
+Require `GITHUB_TOKEN` environment variable:
+
+- `npm run data:build` - builds all data
+- `npm run authors:build` - GitHub authors
+- `npm run changelogs:build` - changelog data
+- `npm run contributors:build` - contributor data
+
+## Environment Variables
+
+```env
+SENTRY_AUTH_TOKEN=your_sentry_token  # Optional, for error tracking
+GITHUB_TOKEN=your_github_token      # Required for data build scripts
+```
+
+## Deployment
+
+- Uses Cloudflare Pages/Workers via `@sveltejs/adapter-cloudflare`
+- Config: `wrangler.toml`, `svelte.config.js`
+- Auto-deploys on push to main via GitHub integration
diff --git a/src/lib/components/BreweriesTable.svelte b/src/lib/components/BreweriesTable.svelte
index 1f36114..40c81d7 100644
--- a/src/lib/components/BreweriesTable.svelte
+++ b/src/lib/components/BreweriesTable.svelte
@@ -67,17 +67,17 @@
           ></td
         >
         <td
-          class="whitespace-nowrap px-2 py-2 text-sm text-gray-500 hidden lg:table-cell"
+          class="whitespace-nowrap px-2 py-2 text-sm text-gray-700 hidden lg:table-cell"
           >{brewery.address_1 ?? ''}</td
         >
-        <td class="whitespace-nowrap px-2 py-2 text-sm text-gray-500"
+        <td class="whitespace-nowrap px-2 py-2 text-sm text-gray-700"
           ><a
             class="text-amber-600 hover:text-amber-900 transition-colors duration-200"
             href="/breweries/{brewery.country}/{brewery.state_province}/{brewery.city}"
             >{brewery.city}</a
           ></td
         >
-        <td class="whitespace-nowrap px-2 py-2 text-sm text-gray-500"
+        <td class="whitespace-nowrap px-2 py-2 text-sm text-gray-700"
           ><a
             class="text-amber-600 hover:text-amber-900 transition-colors duration-200"
             href="/breweries/{brewery.country}/{brewery.state_province}"
@@ -85,11 +85,11 @@
           ></td
         >
         <td
-          class="whitespace-nowrap px-2 py-2 text-sm text-gray-500 hidden lg:table-cell"
+          class="whitespace-nowrap px-2 py-2 text-sm text-gray-700 hidden lg:table-cell"
           >{brewery.postal_code}</td
         >
         <td
-          class="whitespace-nowrap px-2 py-2 text-sm text-gray-500 hidden md:table-cell"
+          class="whitespace-nowrap px-2 py-2 text-sm text-gray-700 hidden md:table-cell"
           ><a
             class="text-amber-600 hover:text-amber-900 transition-colors duration-200"
             href="/breweries/{brewery.country}">{brewery.country}</a
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index 7f2aecc..f723ef7 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -23,7 +23,7 @@
     <span class="block text-amber-600 xl:inline">{subtitle}</span>
   </h1>
   <p
-    class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"
+    class="mt-3 max-w-md mx-auto text-base text-gray-700 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"
   >
     {description}
   </p>
diff --git a/src/lib/components/MetricCard.svelte b/src/lib/components/MetricCard.svelte
index bf3fd40..2f2703d 100644
--- a/src/lib/components/MetricCard.svelte
+++ b/src/lib/components/MetricCard.svelte
@@ -24,10 +24,10 @@
     {label}
   </div>
   {#if subtitle}
-    <div class="text-xs text-gray-500">{subtitle}</div>
+    <div class="text-xs text-gray-600">{subtitle}</div>
   {/if}
   {#if breakdown && breakdown.length > 0}
-    <div class="text-xs text-gray-500 space-y-1">
+    <div class="text-xs text-gray-600 space-y-1">
       {#each breakdown as item (item.label)}
         <div>
           {item.label}: {formatNumber(item.value)}
diff --git a/src/lib/components/MetricsSummary.svelte b/src/lib/components/MetricsSummary.svelte
index 9402c26..d47d32d 100644
--- a/src/lib/components/MetricsSummary.svelte
+++ b/src/lib/components/MetricsSummary.svelte
@@ -25,14 +25,14 @@
     Statistics
   </h2>
   <p
-    class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-3 md:text-xl md:max-w-3xl"
+    class="mt-3 max-w-md mx-auto text-base text-gray-700 sm:text-lg md:mt-3 md:text-xl md:max-w-3xl"
   >
     Here's how many developers and breweries we serve every week.
   </p>
 
   {#if !metrics}
     <div class="text-center py-6">
-      <p class="text-gray-500">Metrics unavailable</p>
+      <p class="text-gray-600">Metrics unavailable</p>
     </div>
   {:else if metrics && period}
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
@@ -65,11 +65,11 @@
           {formatBandwidth(period.bandwidth_tb)}
         </div>
         <div class="text-sm font-medium text-gray-700 mb-2">Bandwidth</div>
-        <div class="text-xs text-gray-500">7 days</div>
+        <div class="text-xs text-gray-600">7 days</div>
       </div>
     </div>
 
-    <div class="text-center mt-3 text-sm text-gray-500">
+    <div class="text-center mt-3 text-sm text-gray-600">
       {#if isDataStale(metrics.last_updated)}
         <p class="text-amber-600 font-medium mb-2">
           ⚠️ Metrics data may be outdated
diff --git a/src/lib/components/MobileNav.svelte b/src/lib/components/MobileNav.svelte
index e339f27..70818f1 100644
--- a/src/lib/components/MobileNav.svelte
+++ b/src/lib/components/MobileNav.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
+  import { fade, fly } from 'svelte/transition';
   import NavMenuItem from './NavMenuItem.svelte';
 
   interface Props {
@@ -9,41 +9,51 @@
   let { toggleMenu }: Props = $props();
 </script>
 
+<!-- Backdrop overlay -->
 <div
-  transition:fade
-  class="absolute z-10 top-0 inset-x-0 p-2 origin-top-right md:hidden"
+  transition:fade={{ duration: 200 }}
+  class="fixed inset-0 bg-black/50 z-40 md:hidden"
+  onclick={toggleMenu}
+  aria-hidden="true"
+></div>
+
+<!-- Slide-in menu panel -->
+<div
+  transition:fly={{ x: 300, duration: 300, easing: (t) => t * (2 - t) }}
+  class="fixed inset-y-0 right-0 z-50 w-full max-w-sm bg-white shadow-2xl md:hidden flex flex-col"
 >
+  <!-- Header with close button -->
   <div
-    class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden"
+    class="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-amber-100/60"
   >
-    <div class="px-5 pt-4 flex items-center justify-end">
-      <div class="-mr-2">
-        <button
-          onclick={toggleMenu}
-          type="button"
-          class="bg-white rounded-md p-2 inline-flex items-center justify-center text-amber-600 hover:text-amber-800 hover:bg-amber-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 shadow-sm hover:shadow transition-shadow duration-100 mr-3"
-        >
-          <span class="sr-only">Close menu</span>
-          <!-- Heroicon name: outline/x -->
-          <svg
-            class="h-6 w-6"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div class="px-2 pt-2 pb-3">
+    <span class="text-lg font-bold text-amber-950">Menu</span>
+    <button
+      onclick={toggleMenu}
+      type="button"
+      class="rounded-md p-2 inline-flex items-center justify-center text-amber-800 hover:text-amber-950 hover:bg-amber-200/80 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-600 transition-colors duration-200"
+    >
+      <span class="sr-only">Close menu</span>
+      <svg
+        class="h-6 w-6"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
+  </div>
+
+  <!-- Menu items -->
+  <div class="flex-1 overflow-y-auto px-4 py-6">
+    <div class="grid grid-cols-1 gap-2">
       <NavMenuItem href="/" {toggleMenu} isMobile={true}>Home</NavMenuItem>
       <NavMenuItem href="/breweries" {toggleMenu} isMobile={true}
         >Breweries</NavMenuItem
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
index 911213a..9782ec5 100644
--- a/src/lib/components/Nav.svelte
+++ b/src/lib/components/Nav.svelte
@@ -24,7 +24,7 @@
           alt="Open Brewery DB Logo Link to Home"
         />
       </a>
-      <div class="-mr-2 flex items-center md:hidden">
+      <div class="-mr-2 -mt-4 flex items-center md:hidden">
         <button
           onclick={toggleMenu}
           type="button"
diff --git a/src/lib/components/NavMenuItem.svelte b/src/lib/components/NavMenuItem.svelte
index e9f376e..67c3f3a 100644
--- a/src/lib/components/NavMenuItem.svelte
+++ b/src/lib/components/NavMenuItem.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { page } from '$app/state';
+
   interface Props {
     href: string;
     isMobile?: boolean;
@@ -15,12 +17,22 @@
     children,
   }: Props = $props();
 
-  const classes = $derived(() =>
+  const isActive = $derived(
+    href === '/'
+      ? page.url.pathname === '/'
+      : page.url.pathname === href || page.url.pathname.startsWith(href + '/')
+  );
+
+  const classes = $derived(
     className
       ? className
       : isMobile
-        ? 'block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50'
-        : 'font-medium text-gray-600 hover:text-gray-900'
+        ? isActive
+          ? 'block w-full px-4 py-3 rounded-lg text-base font-bold text-amber-900 bg-amber-100 border-l-4 border-amber-600 transition-all duration-200'
+          : 'block w-full px-4 py-3 rounded-lg text-base font-medium text-gray-700 hover:text-amber-900 hover:bg-amber-100/60 transition-colors duration-200'
+        : isActive
+          ? 'font-semibold text-amber-900 bg-amber-100 px-3 py-1.5 rounded-md transition-colors duration-150'
+          : 'font-medium text-gray-700 hover:text-amber-900 hover:bg-amber-50 px-3 py-1.5 rounded-md transition-colors duration-150'
   );
 </script>
 
diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte
index 71a36df..055ee22 100644
--- a/src/lib/components/Pagination.svelte
+++ b/src/lib/components/Pagination.svelte
@@ -21,17 +21,21 @@
   let totalPages = $derived(Math.ceil(+meta.total / +meta.per_page));
 
   function handlePageChange(targetPage: number) {
-    if (onPageChange) {
+    if (
+      onPageChange &&
+      targetPage !== page &&
+      targetPage >= 1 &&
+      targetPage <= totalPages
+    ) {
       onPageChange(targetPage);
     }
   }
 
   const getPageUrl = (targetPage: number): string => {
-    // For search context, we don't generate URLs since we use the callback
     if (context === 'search') {
       return '#';
     }
-    
+
     let baseUrl = `/breweries/${country}`;
 
     if (context === 'state' || context === 'city') {
@@ -50,48 +54,173 @@
 
     return baseUrl;
   };
+
+  // Calculate the array of pages to display with ellipses
+  let visiblePages = $derived.by(() => {
+    const pages: (number | 'ellipsis')[] = [];
+    const maxVisible = 5; // Number of pages to show in the sliding window
+
+    if (totalPages <= maxVisible + 4) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Always include page 1
+      pages.push(1);
+
+      let start = Math.max(2, page - 2);
+      let end = Math.min(totalPages - 1, page + 2);
+
+      if (page <= 3) {
+        end = 1 + maxVisible;
+      } else if (page >= totalPages - 2) {
+        start = totalPages - maxVisible;
+      }
+
+      if (start > 2) {
+        pages.push('ellipsis');
+      }
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (end < totalPages - 1) {
+        pages.push('ellipsis');
+      }
+
+      // Always include last page
+      pages.push(totalPages);
+    }
+
+    return pages;
+  });
 </script>
 
-<div
-  class="mt-4 flex flex-wrap items-center justify-center sm:justify-end gap-3"
->
-  {#if page > 1}
+{#if totalPages > 1}
+  <!-- Mobile-only simple layout (hidden on sm and up) -->
+  <div class="flex sm:hidden items-center justify-between mt-4 w-full px-2">
+    {#if context === 'search' && onPageChange}
+      <button
+        class="px-3 py-1.5 border border-amber-300 rounded-md shadow-sm text-xs font-medium text-amber-700 bg-white disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer min-w-[70px] text-center"
+        disabled={page <= 1}
+        onclick={() => handlePageChange(page - 1)}
+      >
+        Previous
+      </button>
+    {:else}
+      <a
+        class="px-3 py-1.5 border border-amber-300 rounded-md shadow-sm text-xs font-medium text-amber-700 bg-white min-w-[70px] text-center {page <=
+        1
+          ? 'opacity-50 pointer-events-none cursor-not-allowed'
+          : 'cursor-pointer'}"
+        href={page <= 1 ? '#' : getPageUrl(page - 1)}
+      >
+        Previous
+      </a>
+    {/if}
+
+    <span class="text-xs text-amber-900 font-medium select-none">
+      Page {page} of {totalPages}
+    </span>
+
+    {#if context === 'search' && onPageChange}
+      <button
+        class="px-3 py-1.5 border border-amber-300 rounded-md shadow-sm text-xs font-medium text-amber-700 bg-white disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer min-w-[70px] text-center"
+        disabled={page >= totalPages}
+        onclick={() => handlePageChange(page + 1)}
+      >
+        Next
+      </button>
+    {:else}
+      <a
+        class="px-3 py-1.5 border border-amber-300 rounded-md shadow-sm text-xs font-medium text-amber-700 bg-white min-w-[70px] text-center {page >=
+        totalPages
+          ? 'opacity-50 pointer-events-none cursor-not-allowed'
+          : 'cursor-pointer'}"
+        href={page >= totalPages ? '#' : getPageUrl(page + 1)}
+      >
+        Next
+      </a>
+    {/if}
+  </div>
+
+  <!-- Desktop/Tablet layout (hidden on mobile, flex on sm and up) -->
+  <div
+    class="hidden sm:flex flex-wrap items-center justify-center sm:justify-end gap-2 mt-4"
+  >
+    <!-- Previous Button -->
     {#if context === 'search' && onPageChange}
       <button
-        class="px-5 py-3 border border-amber-300 rounded-md text-amber-700 hover:bg-amber-50 hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200 shadow-sm hover:shadow transition-shadow duration-200 text-sm font-medium min-w-[100px] text-center"
+        class="px-4 py-2 border border-amber-300 rounded-md shadow-sm text-sm font-medium text-amber-700 bg-white cursor-pointer hover:bg-amber-50 disabled:opacity-50 disabled:cursor-not-allowed min-w-[80px] text-center"
+        disabled={page <= 1}
         onclick={() => handlePageChange(page - 1)}
       >
         Previous
       </button>
     {:else}
       <a
-        class="px-5 py-3 border border-amber-300 rounded-md text-amber-700 hover:bg-amber-50 hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200 shadow-sm hover:shadow transition-shadow duration-200 text-sm font-medium min-w-[100px] text-center"
-        href={getPageUrl(page - 1)}
+        class="px-4 py-2 border border-amber-300 rounded-md shadow-sm text-sm font-medium text-amber-700 bg-white hover:bg-amber-50 min-w-[80px] text-center {page <=
+        1
+          ? 'opacity-50 pointer-events-none cursor-not-allowed'
+          : 'cursor-pointer'}"
+        href={page <= 1 ? '#' : getPageUrl(page - 1)}
       >
         Previous
       </a>
     {/if}
-  {/if}
 
-  <span class="text-sm text-gray-600 px-2">
-    Page {page} of {totalPages}
-  </span>
+    <!-- Numeric Pages -->
+    <div class="flex items-center space-x-1">
+      {#each visiblePages as pageItem, i (i)}
+        {#if pageItem === 'ellipsis'}
+          <span
+            class="px-3 py-2 text-amber-800/50 text-sm font-medium select-none"
+            >...</span
+          >
+        {:else if context === 'search' && onPageChange}
+          <button
+            class="px-4 py-2 border rounded-md shadow-sm text-sm font-medium {pageItem ===
+            page
+              ? 'bg-amber-600 text-white border-amber-600 font-semibold'
+              : 'border-amber-300 text-amber-700 bg-white hover:bg-amber-50 cursor-pointer'}"
+            onclick={() => handlePageChange(pageItem)}
+          >
+            {pageItem}
+          </button>
+        {:else}
+          <a
+            class="px-4 py-2 border rounded-md shadow-sm text-sm font-medium {pageItem ===
+            page
+              ? 'bg-amber-600 text-white border-amber-600 font-semibold'
+              : 'border-amber-300 text-amber-700 bg-white hover:bg-amber-50 cursor-pointer'}"
+            href={getPageUrl(pageItem)}
+          >
+            {pageItem}
+          </a>
+        {/if}
+      {/each}
+    </div>
 
-  {#if page < totalPages}
+    <!-- Next Button -->
     {#if context === 'search' && onPageChange}
       <button
-        class="px-5 py-3 border border-amber-300 rounded-md text-amber-700 hover:bg-amber-50 hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200 shadow-sm hover:shadow transition-shadow duration-200 text-sm font-medium min-w-[100px] text-center"
+        class="px-4 py-2 border border-amber-300 rounded-md shadow-sm text-sm font-medium text-amber-700 bg-white cursor-pointer hover:bg-amber-50 disabled:opacity-50 disabled:cursor-not-allowed min-w-[80px] text-center"
+        disabled={page >= totalPages}
         onclick={() => handlePageChange(page + 1)}
       >
         Next
       </button>
     {:else}
       <a
-        class="px-5 py-3 border border-amber-300 rounded-md text-amber-700 hover:bg-amber-50 hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200 shadow-sm hover:shadow transition-shadow duration-200 text-sm font-medium min-w-[100px] text-center"
-        href={getPageUrl(page + 1)}
+        class="px-4 py-2 border border-amber-300 rounded-md shadow-sm text-sm font-medium text-amber-700 bg-white hover:bg-amber-50 min-w-[80px] text-center {page >=
+        totalPages
+          ? 'opacity-50 pointer-events-none cursor-not-allowed'
+          : 'cursor-pointer'}"
+        href={page >= totalPages ? '#' : getPageUrl(page + 1)}
       >
         Next
       </a>
     {/if}
-  {/if}
-</div>
+  </div>
+{/if}
diff --git a/src/lib/components/SearchPagination.svelte b/src/lib/components/SearchPagination.svelte
deleted file mode 100644
index 51c49e2..0000000
--- a/src/lib/components/SearchPagination.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-  let {
-    currentPage,
-    totalPages,
-    hasPrevious,
-    hasNext,
-    onPageChange,
-    maxPagesToShow = 10,
-  } = $props<{
-    currentPage: number;
-    totalPages: number;
-    hasPrevious: boolean;
-    hasNext: boolean;
-    onPageChange: (page: number) => void;
-    maxPagesToShow?: number;
-  }>();
-
-  function handlePageChange(targetPage: number) {
-    if (
-      targetPage !== currentPage &&
-      targetPage >= 1 &&
-      targetPage <= totalPages
-    ) {
-      onPageChange?.(targetPage);
-    }
-  }
-</script>
-
-{#if totalPages > 1}
-  <div class="flex justify-center items-center space-x-2">
-    <button
-      class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white cursor-pointer hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-      disabled={!hasPrevious}
-      onclick={() => handlePageChange(currentPage - 1)}
-    >
-      Previous
-    </button>
-
-    <div class="flex space-x-1">
-      {#each Array(Math.min(totalPages, maxPagesToShow)) as _item, i (i)}
-        {@const pageNum = i + 1}
-        <button
-          class="px-4 py-2 border rounded-md shadow-sm text-sm font-medium {pageNum ===
-          currentPage
-            ? 'bg-amber-600 text-white border-amber-600'
-            : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50 cursor-pointer'}"
-          onclick={() => handlePageChange(pageNum)}
-        >
-          {pageNum}
-        </button>
-      {/each}
-    </div>
-
-    <button
-      class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white cursor-pointer hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-      disabled={!hasNext}
-      onclick={() => handlePageChange(currentPage + 1)}
-    >
-      Next
-    </button>
-  </div>
-{/if}
diff --git a/src/lib/components/SectionContent.svelte b/src/lib/components/SectionContent.svelte
index a8017f8..60ac093 100644
--- a/src/lib/components/SectionContent.svelte
+++ b/src/lib/components/SectionContent.svelte
@@ -14,7 +14,7 @@
     {title}
   </h2>
   <p
-    class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-3 md:text-xl md:max-w-3xl"
+    class="mt-3 max-w-md mx-auto text-base text-gray-700 sm:text-lg md:mt-3 md:text-xl md:max-w-3xl"
   >
     {content}
   </p>
diff --git a/src/lib/data/state-country-mapping.json b/src/lib/data/state-country-mapping.json
new file mode 100644
index 0000000..db2de9f
--- /dev/null
+++ b/src/lib/data/state-country-mapping.json
@@ -0,0 +1,190 @@
+{
+  "ACT": "Australia",
+  "Alabama": "United States",
+  "Bayern": "Germany",
+  "Aveiro": "Portugal",
+  "Arizona": "United States",
+  "Baden-Württemberg": "Germany",
+  "Argyll": "Scotland",
+  "Alaska": "United States",
+  "Bavaria": "Germany",
+  "Arkansas": "United States",
+  "British Columbia": "Canada",
+  "Bouche du Rhône": "France",
+  "Bolzano": "Italy",
+  "Bute": "Scotland",
+  "Beja": "Portugal",
+  "Brandenburg": "Germany",
+  "Blekinge": "Sweden",
+  "Bremen": "Germany",
+  "Berlin": "Germany",
+  "Busan": "South Korea",
+  "California": "United States",
+  "Central Ostrobothnia": "Finland",
+  "Colorado": "United States",
+  "Clare": "Ireland",
+  "Chungcheongbukdo": "South Korea",
+  "Carlow": "Ireland",
+  "Connecticut": "United States",
+  "Coimbra": "Portugal",
+  "Chungcheongnamdo": "South Korea",
+  "Central Finland": "Finland",
+  "Drenthe": "Netherlands",
+  "Daejeon": "South Korea",
+  "Dnipropetrovsk Oblast": "Ukraine",
+  "Delaware": "United States",
+  "Cork": "Ireland",
+  "Dublin": "Ireland",
+  "East Dunbartonshire": "Scotland",
+  "Donegal": "Ireland",
+  "District of Columbia": "United States",
+  "Deagu": "South Korea",
+  "Faro": "Portugal",
+  "Galway": "Ireland",
+  "Gangwondo": "South Korea",
+  "Eastern Cape": "South Africa",
+  "Florida": "United States",
+  "Gauteng": "South Africa",
+  "Friesland": "Netherlands",
+  "East Sussex": "England",
+  "Free State": "South Africa",
+  "Flevoland": "Netherlands",
+  "Gwangju": "South Korea",
+  "Hawaii": "United States",
+  "Groningen": "Netherlands",
+  "Hamburg": "Germany",
+  "Gyeonggido": "South Korea",
+  "Gelderland": "Netherlands",
+  "Georgia": "United States",
+  "Halland": "Sweden",
+  "Gyeongsangnamdo": "South Korea",
+  "Gyeongsangbukdo": "South Korea",
+  "Illinois": "United States",
+  "Jeollabukdo": "South Korea",
+  "Iowa": "United States",
+  "Indiana": "United States",
+  "Incheon": "South Korea",
+  "Jejudo": "South Korea",
+  "Jeollanamdo": "South Korea",
+  "Hessen": "Germany",
+  "Hesse": "Germany",
+  "Idaho": "United States",
+  "Kildare": "Ireland",
+  "KwaZulu-Natal": "South Africa",
+  "Kansas": "United States",
+  "K�rnten": "Austria",
+  "Kymenlaakso": "Finland",
+  "Kentucky": "United States",
+  "Kanta-Häme": "Finland",
+  "Kilkenny": "Ireland",
+  "Kainuu": "Finland",
+  "Kerry": "Ireland",
+  "Louisiana": "United States",
+  "Longford": "Ireland",
+  "Lapland": "Finland",
+  "Laois": "Ireland",
+  "Limerick": "Ireland",
+  "Lisboa": "Portugal",
+  "Limburg": "Netherlands",
+  "Louth": "Ireland",
+  "Limpopo": "South Africa",
+  "Leiria": "Portugal",
+  "Maine": "United States",
+  "Massachusetts": "United States",
+  "Middle": "Isle of Man",
+  "Lower Saxony": "Germany",
+  "Michigan": "United States",
+  "Maryland": "United States",
+  "Mecklenburg-Vorpommern": "Germany",
+  "Mayo": "Ireland",
+  "MIssouri": "United States",
+  "Meath": "Ireland",
+  "Mpumalanga": "South Africa",
+  "Nebraska": "United States",
+  "Montana": "United States",
+  "Missouri": "United States",
+  "Mississippi": "United States",
+  "NSW": "Australia",
+  "NT": "Australia",
+  "SA": "Australia",
+  "WA": "Australia",
+  "Monaghan": "Ireland",
+  "Minnesota": "United States",
+  "Nevada": "United States",
+  "Noord-Holland": "Netherlands",
+  "Noord-Brabant": "Netherlands",
+  "Nordrhein-Westfalen": "Germany",
+  "New York": "United States",
+  "New Mexico": "United States",
+  "New Jersey": "United States",
+  "North Carolina": "United States",
+  "New Hampshire": "United States",
+  "Niedersachsen": "Germany",
+  "Nieder�sterreich": "Austria",
+  "Ohio": "United States",
+  "Oklahoma": "United States",
+  "Offaly": "Ireland",
+  "North Rhine-Westphalia": "Germany",
+  "Oberösterreich": "Austria",
+  "North West": "South Africa",
+  "North Dakota": "United States",
+  "Ontario": "Canada",
+  "North Savo": "Finland",
+  "Northern Ostrobothnia": "Finland",
+  "Päijät-Häme": "Finland",
+  "Oregon": "United States",
+  "Ostrobothnia": "Finland",
+  "Portalegre": "Portugal",
+  "Pirkanmaa": "Finland",
+  "Overijssel": "Netherlands",
+  "Pennsylvania": "United States",
+  "Porto": "Portugal",
+  "QLD": "Australia",
+  "Osaka": "Japan",
+  "Saarland": "Germany",
+  "Rhode Island": "United States",
+  "Roscommon": "Ireland",
+  "Rheinland-Pfalz": "Germany",
+  "Satakunta": "Finland",
+  "Rhineland-Palatinate": "Germany",
+  "Salzburg": "Austria",
+  "Sachsen-Anhalt": "Germany",
+  "Sachsen": "Germany",
+  "South Ostrobothnia": "Finland",
+  "South Carolina": "United States",
+  "Schleswig-Holstein": "Germany",
+  "Seoul": "South Korea",
+  "South Dakota": "United States",
+  "Singapore": "Singapore",
+  "South Karelia": "Finland",
+  "Steiermark": "Austria",
+  "Sligo": "Ireland",
+  "South Savo": "Finland",
+  "Uusimaa": "Finland",
+  "Tipperary": "Ireland",
+  "Varsinais-Suomi": "Finland",
+  "Tennessee": "United States",
+  "Utrecht": "Netherlands",
+  "Utah": "United States",
+  "Thüringen": "Germany",
+  "TAS": "Australia",
+  "Texas": "United States",
+  "VIC": "Australia",
+  "West Virginia": "United States",
+  "Western Cape": "South Africa",
+  "Westmeath": "Ireland",
+  "Waterford": "Ireland",
+  "Virginia": "United States",
+  "Washington": "United States",
+  "West Sussex": "England",
+  "Vermont": "United States",
+  "West Dunbartonshire": "Scotland",
+  "Wicklow": "Ireland",
+  "Zuid-Holland": "Netherlands",
+  "Wyoming": "United States",
+  "Åland": "Finland",
+  "dolnośląskie": "Poland",
+  "Wisconsin": "United States",
+  "Zeeland": "Netherlands",
+  "Wexford": "Ireland"
+}
diff --git a/src/routes/b/[id]/+page.svelte b/src/routes/b/[id]/+page.svelte
index 605efb9..1ff209b 100644
--- a/src/routes/b/[id]/+page.svelte
+++ b/src/routes/b/[id]/+page.svelte
@@ -99,10 +99,7 @@
             <div class="flex flex-col space-y-2 text-gray-700">
               {#if brewery.address_1}
                 <div class="flex items-start gap-2">
-                  <HomeIcon
-                    size={18}
-                    class="text-amber-600 mt-1 flex-shrink-0"
-                  />
+                  <HomeIcon size={18} class="text-amber-600 mt-1 shrink-0" />
                   <span data-testid="brewery-address">
                     {brewery.address_1}{brewery.address_2
                       ? `, ${brewery.address_2}`
@@ -111,10 +108,7 @@
                 </div>
               {/if}
               <div class="flex items-start gap-2">
-                <BuildingIcon
-                  size={18}
-                  class="text-amber-600 mt-1 flex-shrink-0"
-                />
+                <BuildingIcon size={18} class="text-amber-600 mt-1 shrink-0" />
                 <div>
                   <a
                     class="text-amber-600 hover:text-amber-900 transition-colors duration-200"
@@ -134,10 +128,7 @@
                 </div>
               </div>
               <div class="flex items-start gap-2">
-                <MapPinIcon
-                  size={18}
-                  class="text-amber-600 mt-1 flex-shrink-0"
-                />
+                <MapPinIcon size={18} class="text-amber-600 mt-1 shrink-0" />
                 <a
                   class="text-amber-600 hover:text-amber-900 transition-colors duration-200"
                   href={`/breweries/${brewery.country}`}
@@ -148,10 +139,7 @@
               </div>
               {#if brewery.phone}
                 <div class="flex items-start gap-2">
-                  <PhoneIcon
-                    size={18}
-                    class="text-amber-600 mt-1 flex-shrink-0"
-                  />
+                  <PhoneIcon size={18} class="text-amber-600 mt-1 shrink-0" />
                   <span data-testid="brewery-phone">{brewery.phone}</span>
                 </div>
               {/if}
@@ -168,7 +156,14 @@
               <div class="relative w-full h-0 pb-[75%] sm:pb-[65%]">
                 <iframe
                   class="absolute inset-0 w-full h-full border-0"
-                  src="https://www.openstreetmap.org/export/embed.html?bbox={brewery.longitude}%2C{brewery.latitude}%2C{brewery.longitude}%2C{brewery.latitude}&layer=mapnik&marker={brewery.latitude}%2C{brewery.longitude}"
+                  src="https://www.openstreetmap.org/export/embed.html?bbox={Number(
+                    brewery.longitude
+                  ) - 0.005}%2C{Number(brewery.latitude) - 0.005}%2C{Number(
+                    brewery.longitude
+                  ) + 0.005}%2C{Number(brewery.latitude) +
+                    0.005}&layer=mapnik&marker={Number(
+                    brewery.latitude
+                  )}%2C{Number(brewery.longitude)}"
                   title="Map showing location of {brewery.name}"
                   loading="lazy"
                   allow="fullscreen"
@@ -178,7 +173,11 @@
                 class="p-3 bg-gray-50 text-sm flex justify-between items-center border-t border-gray-200"
               >
                 <a
-                  href="https://www.openstreetmap.org/?mlat={brewery.latitude}&mlon={brewery.longitude}#map=18/{brewery.latitude}/{brewery.longitude}"
+                  href="https://www.openstreetmap.org/?mlat={Number(
+                    brewery.latitude
+                  )}&mlon={Number(brewery.longitude)}#map=17/{Number(
+                    brewery.latitude
+                  )}/{Number(brewery.longitude)}"
                   target="_blank"
                   rel="noreferrer"
                   class="text-amber-600 hover:text-amber-900 transition-colors duration-200 flex items-center gap-1"
diff --git a/src/routes/breweries/+page.svelte b/src/routes/breweries/+page.svelte
index 1a0e3bb..001c662 100644
--- a/src/routes/breweries/+page.svelte
+++ b/src/routes/breweries/+page.svelte
@@ -2,8 +2,9 @@
   import BreweriesTable from '$lib/components/BreweriesTable.svelte';
   import BreweryCard from '$lib/components/BreweryCard.svelte';
   import BrewerySearchForm from '$lib/components/BrewerySearchForm.svelte';
-  import SearchPagination from '$lib/components/SearchPagination.svelte';
+  import Pagination from '$lib/components/Pagination.svelte';
   import { goto } from '$app/navigation';
+  import { page } from '$app/state';
   import SEO from '$lib/components/SEO.svelte';
   import {
     getBreweries,
@@ -11,8 +12,6 @@
     getError,
     resetSearch,
     initializeStore,
-    getHasNextPage,
-    getHasPreviousPage,
     getCurrentPage,
     getItemsPerPage,
     getTotalBreweries,
@@ -41,13 +40,18 @@
 
   async function handlePageChange(newPage: number) {
     if (newPage !== getCurrentPage()) {
-      const params = new SvelteURLSearchParams();
+      const params = new SvelteURLSearchParams(page.url.searchParams);
       params.set('page', newPage.toString());
-      const currentQuery = getSearchQuery();
-      if (currentQuery) params.set('query', currentQuery);
       await goto(`/breweries?${params.toString()}`, { replaceState: true });
     }
   }
+
+  function removeParam(param: string): string {
+    const params = new SvelteURLSearchParams(page.url.searchParams);
+    params.delete(param);
+    params.delete('page');
+    return params.toString();
+  }
 </script>
 
 <SEO
@@ -58,13 +62,63 @@
 <div class="px-4 py-8">
   <h1 class="text-3xl text-center font-bold mb-6">Search Breweries</h1>
 
-  <div class="max-w-2xl mx-auto">
+  <div class="max-w-2xl mx-auto mb-8">
     <BrewerySearchForm
       onSearch={handleSearch}
       initialQuery={getSearchQuery()}
     />
   </div>
 
+  {#if !getLoading() && !getError() && (page.url.searchParams.get('query') || page.url.searchParams.get('by_state') || page.url.searchParams.get('by_type'))}
+    <div class="mb-6 flex flex-wrap gap-2.5 items-center">
+      <span
+        class="text-xs font-semibold uppercase tracking-wider text-amber-800/60 mr-1"
+        >Active Filters:</span
+      >
+      {#if page.url.searchParams.get('query')}
+        <span
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 border border-amber-200"
+        >
+          Query: "{page.url.searchParams.get('query')}"
+          <a
+            href="/breweries?{removeParam('query')}"
+            class="text-amber-500 hover:text-amber-800 font-bold ml-1 text-sm leading-none"
+            >×</a
+          >
+        </span>
+      {/if}
+      {#if page.url.searchParams.get('by_state')}
+        <span
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 border border-orange-200"
+        >
+          State: {page.url.searchParams.get('by_state')}
+          <a
+            href="/breweries?{removeParam('by_state')}"
+            class="text-orange-500 hover:text-orange-800 font-bold ml-1 text-sm leading-none"
+            >×</a
+          >
+        </span>
+      {/if}
+      {#if page.url.searchParams.get('by_type')}
+        <span
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 border border-yellow-200"
+        >
+          Type: {page.url.searchParams.get('by_type')}
+          <a
+            href="/breweries?{removeParam('by_type')}"
+            class="text-yellow-500 hover:text-yellow-800 font-bold ml-1 text-sm leading-none"
+            >×</a
+          >
+        </span>
+      {/if}
+      <a
+        href="/breweries"
+        class="text-xs text-amber-700 hover:text-amber-900 font-semibold underline decoration-dotted ml-2"
+        >Clear All</a
+      >
+    </div>
+  {/if}
+
   {#if getLoading()}
     <div class="flex justify-center items-center py-12">
       <div
@@ -78,25 +132,31 @@
       <p>Error: {getError()}</p>
     </div>
   {:else if getBreweries().length > 0}
-    <div class="flex justify-between items-center flex-col md:flex-row">
-      {#if getSearchQuery()}
-        <div class="mb-6 md:mb-0">
-          <p class="text-gray-600">
-            {(getCurrentPage() - 1) * getItemsPerPage() + 1}
+    <div
+      class="flex justify-between items-center flex-col md:flex-row gap-4 mb-6"
+    >
+      {#if getTotalBreweries() > 0}
+        <div class="md:mb-0">
+          <p class="text-gray-600 text-sm font-medium">
+            Showing {(getCurrentPage() - 1) * getItemsPerPage() + 1}
             - {Math.min(
               getCurrentPage() * getItemsPerPage(),
               getTotalBreweries()
             )}
-            of {getTotalBreweries()} breweries (page {getCurrentPage()} of {getTotalPages()})
+            of {getTotalBreweries().toLocaleString()} breweries (page {getCurrentPage()}
+            of {getTotalPages()})
           </p>
         </div>
       {/if}
 
-      <SearchPagination
-        currentPage={getCurrentPage()}
-        totalPages={getTotalPages()}
-        hasPrevious={getHasPreviousPage()}
-        hasNext={getHasNextPage()}
+      <Pagination
+        meta={{
+          page: getCurrentPage().toString(),
+          total: getTotalBreweries().toString(),
+          per_page: getItemsPerPage().toString(),
+        }}
+        country=""
+        context="search"
         onPageChange={handlePageChange}
       />
     </div>
@@ -123,18 +183,21 @@
       </div>
     </div>
 
-    <div class="mt-6">
-      <SearchPagination
-        currentPage={getCurrentPage()}
-        totalPages={getTotalPages()}
-        hasPrevious={getHasPreviousPage()}
-        hasNext={getHasNextPage()}
+    <div class="mt-6 flex justify-center sm:justify-end">
+      <Pagination
+        meta={{
+          page: getCurrentPage().toString(),
+          total: getTotalBreweries().toString(),
+          per_page: getItemsPerPage().toString(),
+        }}
+        country=""
+        context="search"
         onPageChange={handlePageChange}
       />
     </div>
   {:else if getSearchQuery()}
     <div class="text-center py-12">
-      <p class="text-gray-500">
+      <p class="text-gray-700">
         No breweries found matching "{getSearchQuery()}". Try a different search
         term.
       </p>
diff --git a/src/routes/breweries/+page.ts b/src/routes/breweries/+page.ts
index 735ffc8..ee0d0b9 100644
--- a/src/routes/breweries/+page.ts
+++ b/src/routes/breweries/+page.ts
@@ -5,6 +5,8 @@ import type { Brewery, Metadata } from '$lib/types';
 export async function load({ url }) {
   const rawQuery = url.searchParams.get('query');
   const query = (rawQuery ?? '').trim();
+  const byState = url.searchParams.get('by_state');
+  const byType = url.searchParams.get('by_type');
 
   if (rawQuery !== null && query === '') {
     throw redirect(302, '/breweries');
@@ -13,7 +15,7 @@ export async function load({ url }) {
   const page = parseInt(url.searchParams.get('page') || '1');
   const per_page = parseInt(url.searchParams.get('per_page') || '20');
 
-  if (!query) {
+  if (!query && !byState && !byType) {
     return {
       breweries: [],
       meta: {
@@ -26,35 +28,93 @@ export async function load({ url }) {
   }
 
   try {
-    const searchUrl = `${API_URL}/breweries/search?query=${encodeURIComponent(query)}&page=${page}&per_page=${per_page}`;
-    const response = await fetch(searchUrl);
-
-    if (!response.ok) {
-      return {
-        breweries: [],
-        meta: {
-          total: '0',
-          page: page.toString(),
-          per_page: per_page.toString(),
-          query,
-        },
-        error: `Search failed with status ${response.status}`,
+    let breweries: Brewery[] = [];
+    let meta: Metadata;
+
+    if (query) {
+      // Calculate start index and map it to API batch page number of size 200
+      const svelteStart = (page - 1) * per_page;
+      const apiPage = Math.floor(svelteStart / 200) + 1;
+      const localOffset = svelteStart % 200;
+
+      const apiUrl = `${API_URL}/breweries/search?query=${encodeURIComponent(query)}&page=${apiPage}&per_page=200`;
+      const response = await fetch(apiUrl);
+
+      if (!response.ok) {
+        return {
+          breweries: [],
+          meta: {
+            total: '0',
+            page: page.toString(),
+            per_page: per_page.toString(),
+            query: query,
+          },
+          error: `Request failed with status ${response.status}`,
+        };
+      }
+
+      const apiBreweries: Brewery[] = await response.json();
+      breweries = apiBreweries.slice(localOffset, localOffset + per_page);
+
+      let total: number;
+      if (apiBreweries.length < 200) {
+        // We reached the actual end of results
+        total = (apiPage - 1) * 200 + apiBreweries.length;
+      } else {
+        // We got exactly 200 results, so there might be more beyond this batch.
+        // We do progressive discovery beyond the currently fetched batch size.
+        total = (apiPage - 1) * 200 + apiBreweries.length;
+        if (localOffset + per_page >= apiBreweries.length) {
+          total += per_page;
+        }
+      }
+
+      meta = {
+        total: total.toString(),
+        page: page.toString(),
+        per_page: per_page.toString(),
+        query: query,
       };
-    }
+    } else {
+      let apiUrl = `${API_URL}/breweries/?page=${page}&per_page=${per_page}`;
+      let metaUrl = `${API_URL}/breweries/meta?page=${page}&per_page=${per_page}`;
 
-    const breweries: Brewery[] = await response.json();
+      if (byState) {
+        apiUrl += `&by_state=${encodeURIComponent(byState)}`;
+        metaUrl += `&by_state=${encodeURIComponent(byState)}`;
+      }
 
-    const total =
-      breweries.length >= per_page
-        ? page * per_page + per_page
-        : (page - 1) * per_page + breweries.length;
+      if (byType) {
+        apiUrl += `&by_type=${encodeURIComponent(byType)}`;
+        metaUrl += `&by_type=${encodeURIComponent(byType)}`;
+      }
 
-    const meta: Metadata = {
-      total: total.toString(),
-      page: page.toString(),
-      per_page: per_page.toString(),
-      query: query,
-    };
+      const response = await fetch(apiUrl);
+      const metaResponse = await fetch(metaUrl);
+
+      if (!response.ok) {
+        return {
+          breweries: [],
+          meta: {
+            total: '0',
+            page: page.toString(),
+            per_page: per_page.toString(),
+            query: '',
+          },
+          error: `Request failed with status ${response.status}`,
+        };
+      }
+
+      breweries = await response.json();
+      const metaResult = await metaResponse.json();
+
+      meta = {
+        total: metaResult.total,
+        page: page.toString(),
+        per_page: per_page.toString(),
+        query: '',
+      };
+    }
 
     return {
       breweries,
diff --git a/src/routes/breweries/browse/+page.svelte b/src/routes/breweries/browse/+page.svelte
index 6fa44af..e63e4fa 100644
--- a/src/routes/breweries/browse/+page.svelte
+++ b/src/routes/breweries/browse/+page.svelte
@@ -1,68 +1,165 @@
 <script lang="ts">
   import SEO from '$lib/components/SEO.svelte';
+  import { Globe, MapPin, Building2 } from 'lucide-svelte';
 
   let { data } = $props();
 
+  let byCountry = $derived(data.byCountry || []);
   let byState = $derived(data.byState || []);
   let byType = $derived(data.byType || []);
   let error = $derived(data.error);
 </script>
 
 <SEO
-  title="Browse Breweries by State and Type"
-  description="Browse breweries from the Open Brewery DB dataset by state/province and type."
+  title="Browse Breweries by Country, State, and Type"
+  description="Browse breweries from the Open Brewery DB dataset by country, state/province, and type."
 />
 
-<div class="container mx-auto px-4 py-8">
-  <h1 class="text-3xl font-bold mb-8">Browse Breweries</h1>
+<div
+  class="min-h-screen bg-linear-to-br from-amber-50 via-orange-50 to-yellow-50"
+>
+  <div class="container mx-auto px-4 py-12 max-w-7xl">
+    <!-- Header -->
+    <header class="mb-16 text-center">
+      <h1
+        class="text-5xl md:text-6xl font-serif font-bold text-amber-900 mb-4 tracking-tight"
+      >
+        Explore Breweries
+      </h1>
+      <p class="text-xl text-amber-700/80 max-w-2xl mx-auto font-light">
+        Discover breweries around the world through our curated browsing
+        experience
+      </p>
+    </header>
 
-  {#if error}
-    <div
-      class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mt-6"
-    >
-      <p>Error: {error}</p>
-    </div>
-  {:else}
-    <!-- Browse by State/Province -->
-    <section>
-      <h2 class="text-2xl font-semibold mb-4 border-b pb-2">
-        By State/Province
-      </h2>
-      {#if byState.length > 0}
-        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
-          {#each byState as item (item.name)}
-            <a
-              href={`/breweries?query=${encodeURIComponent(item.name)}`}
-              class="block p-4 rounded-lg shadow-md bg-white hover:bg-amber-100 transition-colors"
-            >
-              <p class="font-semibold text-amber-800">{item.name}</p>
-              <p class="text-sm text-gray-600">{item.count} breweries</p>
-            </a>
-          {/each}
+    {#if error}
+      <div
+        class="bg-red-50 border-l-4 border-red-500 text-red-700 p-6 rounded-r-lg shadow-sm"
+      >
+        <p class="font-medium">Error: {error}</p>
+      </div>
+    {:else}
+      <!-- Browse by Country -->
+      <section class="mb-16">
+        <div class="flex items-center gap-3 mb-8">
+          <Globe class="w-8 h-8 text-amber-600" />
+          <h2 class="text-3xl font-serif font-semibold text-amber-900">
+            By Country
+          </h2>
         </div>
-      {:else}
-        <p class="text-gray-500 mt-4">No states available to browse.</p>
-      {/if}
-    </section>
+        {#if byCountry.length > 0}
+          <div
+            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+          >
+            {#each byCountry as item (item.name)}
+              <a
+                href={`/breweries/${encodeURIComponent(item.name)}`}
+                class="group relative overflow-hidden bg-white rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-amber-100"
+              >
+                <div
+                  class="absolute inset-0 bg-linear-to-br from-amber-500/0 via-amber-500/0 to-orange-500/0 group-hover:from-amber-500/5 group-hover:via-orange-500/5 group-hover:to-yellow-500/5 transition-all duration-300"
+                ></div>
+                <div class="relative p-6">
+                  <div class="flex items-start justify-between mb-3">
+                    <h3
+                      class="font-serif text-lg font-semibold text-amber-900 group-hover:text-amber-700 transition-colors"
+                    >
+                      {item.name}
+                    </h3>
+                    <Globe class="w-6 h-6 text-amber-500" />
+                  </div>
+                  <p class="text-sm text-amber-600/70 font-medium">
+                    {item.count.toLocaleString()}
+                    {item.count === 1 ? 'brewery' : 'breweries'}
+                  </p>
+                </div>
+              </a>
+            {/each}
+          </div>
+        {:else}
+          <p class="text-amber-600/60 italic">
+            No countries available to browse.
+          </p>
+        {/if}
+      </section>
 
-    <!-- Browse by Type -->
-    <section class="mt-12">
-      <h2 class="text-2xl font-semibold mb-4 border-b pb-2">By Type</h2>
-      {#if byType.length > 0}
-        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
-          {#each byType as item (item.name)}
-            <a
-              href={`/breweries/?query=${encodeURIComponent(item.name)}`}
-              class="block p-4 rounded-lg shadow-md bg-white hover:bg-amber-100 transition-colors"
-            >
-              <p class="font-semibold text-amber-800">{item.name}</p>
-              <p class="text-sm text-gray-600">{item.count} breweries</p>
-            </a>
-          {/each}
+      <!-- Browse by State/Province -->
+      <section class="mb-16">
+        <div class="flex items-center gap-3 mb-8">
+          <MapPin class="w-8 h-8 text-amber-600" />
+          <h2 class="text-3xl font-serif font-semibold text-amber-900">
+            By State/Province
+          </h2>
         </div>
-      {:else}
-        <p class="text-gray-500 mt-4">No types available to browse.</p>
-      {/if}
-    </section>
-  {/if}
+        {#if byState.length > 0}
+          <div
+            class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3"
+          >
+            {#each byState as item (item.name)}
+              <a
+                href={`/breweries/${encodeURIComponent(item.country)}/${encodeURIComponent(item.name)}`}
+                class="group relative overflow-hidden bg-white rounded-lg shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 border border-amber-100"
+              >
+                <div class="relative p-4">
+                  <h3
+                    class="font-medium text-amber-900 group-hover:text-amber-700 transition-colors text-sm"
+                  >
+                    {item.name}
+                  </h3>
+                  <div class="flex items-center gap-1.5 mt-1">
+                    <MapPin class="w-3 h-3 text-amber-500" />
+                    <p class="text-xs text-amber-600/60">
+                      {item.count.toLocaleString()}
+                      {item.count === 1 ? ' brewery' : ' breweries'}
+                    </p>
+                  </div>
+                </div>
+              </a>
+            {/each}
+          </div>
+        {:else}
+          <p class="text-amber-600/60 italic">No states available to browse.</p>
+        {/if}
+      </section>
+
+      <!-- Browse by Type -->
+      <section>
+        <div class="flex items-center gap-3 mb-8">
+          <Building2 class="w-8 h-8 text-amber-600" />
+          <h2 class="text-3xl font-serif font-semibold text-amber-900">
+            By Type
+          </h2>
+        </div>
+        {#if byType.length > 0}
+          <div
+            class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3"
+          >
+            {#each byType as item (item.name)}
+              <a
+                href={`/breweries?by_type=${encodeURIComponent(item.name)}`}
+                class="group relative overflow-hidden bg-white rounded-lg shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 border border-amber-100"
+              >
+                <div class="relative p-4">
+                  <h3
+                    class="font-medium text-amber-900 group-hover:text-amber-700 transition-colors text-sm"
+                  >
+                    {item.name}
+                  </h3>
+                  <div class="flex items-center gap-1.5 mt-1">
+                    <Building2 class="w-3 h-3 text-amber-500" />
+                    <p class="text-xs text-amber-600/60">
+                      {item.count.toLocaleString()}
+                      {item.count === 1 ? ' brewery' : ' breweries'}
+                    </p>
+                  </div>
+                </div>
+              </a>
+            {/each}
+          </div>
+        {:else}
+          <p class="text-amber-600/60 italic">No types available to browse.</p>
+        {/if}
+      </section>
+    {/if}
+  </div>
 </div>
diff --git a/src/routes/breweries/browse/+page.ts b/src/routes/breweries/browse/+page.ts
index d624aac..3e36994 100644
--- a/src/routes/breweries/browse/+page.ts
+++ b/src/routes/breweries/browse/+page.ts
@@ -1,7 +1,9 @@
 import { API_URL } from '$lib/utils';
+import stateCountryMapping from '$lib/data/state-country-mapping.json';
 
 interface BreweryMetaResponse {
   total: string;
+  by_country: Record<string, number>;
   by_state: Record<string, number>;
   by_type: Record<string, number>;
 }
@@ -13,6 +15,7 @@ export async function load() {
     if (!response.ok) {
       console.error(`❌ API request failed with status ${response.status}`);
       return {
+        byCountry: [],
         byState: [],
         byType: [],
         error: `Failed to fetch metadata with status ${response.status}`,
@@ -21,21 +24,33 @@ export async function load() {
 
     const data: BreweryMetaResponse = await response.json();
 
-    const byState = Object.entries(data.by_state)
+    const byCountry = Object.entries(data.by_country)
       .map(([name, count]) => ({ name, count }))
       .sort((a, b) => a.name.localeCompare(b.name));
 
+    const byState = Object.entries(data.by_state)
+      .map(([name, count]) => ({
+        name,
+        count,
+        country:
+          stateCountryMapping[name as keyof typeof stateCountryMapping] ||
+          'United States',
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+
     const byType = Object.entries(data.by_type)
       .map(([name, count]) => ({ name, count }))
       .sort((a, b) => a.name.localeCompare(b.name));
 
     return {
+      byCountry,
       byState,
       byType,
     };
   } catch (error) {
     console.error('❌ Error fetching brewery metadata:', error);
     return {
+      byCountry: [],
       byState: [],
       byType: [],
       error: 'Failed to fetch brewery metadata',