diff --git a/web/frontend/app/features/breweries/components/BreweryMap.tsx b/web/frontend/app/features/breweries/components/BreweryMap.tsx
index 3d793dbd..d624a4cd 100644
--- a/web/frontend/app/features/breweries/components/BreweryMap.tsx
+++ b/web/frontend/app/features/breweries/components/BreweryMap.tsx
@@ -32,7 +32,7 @@ const WORLD_BOUNDS: LatLngTuple[] = [
 
 const CURRENT_LOCATION_ICON = L.divIcon({
     className: 'brewery-map-current-location',
-    html: '<span class="block h-3.5 w-3.5 rounded-full bg-blue-500 border-2 border-white shadow-md"></span>',
+    html: '<span class="block h-3.5 w-3.5 rounded-full bg-primary border-2 border-base-100 shadow-md"></span>',
     iconSize: [14, 14],
     iconAnchor: [7, 7],
 });
diff --git a/web/frontend/app/features/breweries/components/NearbyBreweriesSection.tsx b/web/frontend/app/features/breweries/components/NearbyBreweriesSection.tsx
index 51ac7ee9..955842a2 100644
--- a/web/frontend/app/features/breweries/components/NearbyBreweriesSection.tsx
+++ b/web/frontend/app/features/breweries/components/NearbyBreweriesSection.tsx
@@ -10,7 +10,7 @@ import type { NearbyMapPin } from './NearbyBreweryMap';
 
 const NearbyBreweryMap = lazy(() => import('./NearbyBreweryMap'));
 
-const MAP_PLACEHOLDER_CLASS = 'min-h-[30rem] h-full w-full rounded-box bg-base-300';
+const MAP_PLACEHOLDER_CLASS = 'skeleton min-h-[30rem] h-full w-full rounded-box';
 const DEFAULT_RADIUS_KM = 120;
 const MIN_RADIUS_KM = 10;
 const MAX_RADIUS_KM = 150;
@@ -41,8 +41,8 @@ interface NearbyBreweriesSectionProps {
 const FILLER_NOTE = 'A stop worth the detour.';
 
 const cardClassName = (selected: boolean) =>
-    `text-left rounded-box bg-base-100 shadow p-4 cursor-pointer transition-shadow hover:shadow-lg border-l-4 ${
-        selected ? 'border-l-primary' : 'border-l-transparent'
+    `card card-sm card-border bg-base-100 text-left shadow transition-shadow hover:shadow-lg ${
+        selected ? 'border-2 border-primary' : ''
     }`;
 
 interface BreweriesNearByHeaderParams {
@@ -288,21 +288,23 @@ const NearbyBreweriesSection = ({
                                 onClick={() => onSelect(brewery.breweryPostId)}
                                 className={cardClassName(selectedId === brewery.breweryPostId)}
                             >
-                                <div className="flex justify-between items-baseline gap-3">
-                                    <h3 className="font-serif text-lg m-0">
-                                        {brewery.breweryName}
-                                    </h3>
-                                    <span className="text-sm font-semibold text-primary whitespace-nowrap">
-                                        {formatDistance(distanceMetres, unit)}
-                                    </span>
-                                </div>
-                                {brewery.location && (
-                                    <div className="text-sm text-base-content/60 mt-1">
-                                        {brewery.location.cityName},{' '}
-                                        {brewery.location.stateProvinceCode}
+                                <div className="card-body">
+                                    <div className="flex justify-between items-baseline gap-3">
+                                        <h3 className="card-title font-serif text-lg">
+                                            {brewery.breweryName}
+                                        </h3>
+                                        <span className="text-sm font-semibold text-primary whitespace-nowrap">
+                                            {formatDistance(distanceMetres, unit)}
+                                        </span>
                                     </div>
-                                )}
-                                <div className="text-sm mt-2">{FILLER_NOTE}</div>
+                                    {brewery.location && (
+                                        <div className="text-sm text-base-content/60">
+                                            {brewery.location.cityName},{' '}
+                                            {brewery.location.stateProvinceCode}
+                                        </div>
+                                    )}
+                                    <div className="text-sm mt-2">{FILLER_NOTE}</div>
+                                </div>
                             </button>
                         )}
                     />
diff --git a/web/frontend/app/features/breweries/components/NearbyBreweryMap.tsx b/web/frontend/app/features/breweries/components/NearbyBreweryMap.tsx
index 423e9e40..8302ebdf 100644
--- a/web/frontend/app/features/breweries/components/NearbyBreweryMap.tsx
+++ b/web/frontend/app/features/breweries/components/NearbyBreweryMap.tsx
@@ -19,6 +19,14 @@ interface NearbyBreweryMapProps {
     userLocationLabel: string;
 }
 
+// Leaflet paints markers as SVG attributes, which can't reference CSS custom
+// properties the way class names can - resolve the current theme's colors instead.
+const resolveThemeColor = (variable: string, fallback: string) => {
+    if (typeof document === 'undefined') return fallback;
+    const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+    return value || fallback;
+};
+
 const pinIcon = (active: boolean) =>
     L.divIcon({
         className: '',
@@ -85,7 +93,12 @@ const NearbyBreweryMap = ({
             <CircleMarker
                 center={userLocation}
                 radius={6}
-                pathOptions={{ color: '#fff', weight: 2, fillColor: '#2b6cb0', fillOpacity: 1 }}
+                pathOptions={{
+                    color: resolveThemeColor('--color-base-100', '#fff'),
+                    weight: 2,
+                    fillColor: resolveThemeColor('--color-primary', '#2b6cb0'),
+                    fillOpacity: 1,
+                }}
             >
                 <Popup>You are here &mdash; {userLocationLabel}</Popup>
             </CircleMarker>
diff --git a/web/frontend/app/features/breweries/components/RecentBreweries.tsx b/web/frontend/app/features/breweries/components/RecentBreweries.tsx
index 04984593..d6cca409 100644
--- a/web/frontend/app/features/breweries/components/RecentBreweries.tsx
+++ b/web/frontend/app/features/breweries/components/RecentBreweries.tsx
@@ -13,25 +13,27 @@ const RecentBreweries = ({ breweries }: RecentBreweriesProps) => {
             <h2 className="font-serif text-2xl mb-3.5">Recently added</h2>
             <div className="grid gap-5 grid-cols-[repeat(auto-fit,minmax(15rem,1fr))]">
                 {breweries.map((brewery) => (
-                    <div
-                        key={brewery.breweryPostId}
-                        className="card bg-base-100 shadow p-6 flex flex-col gap-1.5"
-                    >
-                        <h3 className="font-serif text-xl m-0">{brewery.breweryName}</h3>
-                        {brewery.location && (
-                            <div className="text-sm text-base-content/60">
-                                {brewery.location.cityName}, {brewery.location.stateProvinceCode}
-                            </div>
-                        )}
-                        <p className="text-sm leading-snug mt-1 line-clamp-2">
-                            {brewery.description}
-                        </p>
-                        <Link
-                            to={`/breweries/${brewery.breweryPostId}`}
-                            className="link link-hover text-sm font-semibold text-secondary hover:text-primary mt-2"
-                        >
-                            View brewery &rarr;
-                        </Link>
+                    <div key={brewery.breweryPostId} className="card bg-base-100 shadow">
+                        <div className="card-body gap-1.5">
+                            <h3 className="card-title font-serif text-xl">
+                                {brewery.breweryName}
+                            </h3>
+                            {brewery.location && (
+                                <div className="text-sm text-base-content/60">
+                                    {brewery.location.cityName},{' '}
+                                    {brewery.location.stateProvinceCode}
+                                </div>
+                            )}
+                            <p className="text-sm leading-snug mt-1 line-clamp-2">
+                                {brewery.description}
+                            </p>
+                            <Link
+                                to={`/breweries/${brewery.breweryPostId}`}
+                                className="link link-hover text-sm font-semibold text-secondary hover:text-primary mt-2"
+                            >
+                                View brewery &rarr;
+                            </Link>
+                        </div>
                     </div>
                 ))}
             </div>
diff --git a/web/frontend/app/features/breweries/routes/brewery-directory.tsx b/web/frontend/app/features/breweries/routes/brewery-directory.tsx
index 6f5f15c0..9c67223c 100644
--- a/web/frontend/app/features/breweries/routes/brewery-directory.tsx
+++ b/web/frontend/app/features/breweries/routes/brewery-directory.tsx
@@ -9,7 +9,7 @@ import { useFetcher } from 'react-router';
 import type { BreweryMapPin } from '../components/BreweryMap';
 
 const PAGE_SIZE = 12;
-const MAP_PLACEHOLDER_CLASS = 'h-[28rem] md:h-[34rem] w-full rounded-box bg-base-300';
+const MAP_PLACEHOLDER_CLASS = 'skeleton h-[28rem] md:h-[34rem] w-full rounded-box';
 
 export const meta = ({}: Route.MetaArgs) => {
     return [{ title: 'Brewery Directory | The Biergarten App' }];