diff --git a/frontend/src/App.css b/frontend/src/App.css
index df8c919..aaddd80 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2,7 +2,7 @@
 @import "flowbite-react/plugin/tailwindcss";
 @source "../.flowbite-react/class-list.json";
 @plugin "daisyui" {
-    themes: light --default
+  themes: light --default;
 }
 @plugin "daisyui/theme" {
   name: "garden";
@@ -13,7 +13,7 @@
   --color-base-200: oklch(86.445% 0.002 17.197);
   --color-base-300: oklch(79.938% 0.001 17.197);
   --color-base-content: oklch(16.961% 0.001 17.32);
-  --color-primary: #EE2536;
+  --color-primary: #ee2536;
   --color-primary-content: oklch(100% 0 0);
   --color-secondary: oklch(48.495% 0.11 355.095);
   --color-secondary-content: oklch(89.699% 0.022 355.095);
@@ -39,43 +39,52 @@
   --noise: 0;
 }
 
-
 h1 {
-    @apply text-3xl font-bold
+  @apply text-3xl font-bold;
 }
 
 h2 {
-    @apply text-2xl
+  @apply text-2xl;
 }
 
 h3 {
-    @apply text-xl
+  @apply text-xl;
 }
 
 p a {
- @apply text-blue-500 hover:underline
+  @apply text-blue-500 hover:underline;
 }
 
 :where(.shadow) {
-    box-shadow: 0 1px 2px 0 rgb(239 68 68 / 0.15), 0 1px 3px 0 rgb(239 68 68 / 0.10) !important;
+  box-shadow:
+    0 1px 2px 0 rgb(239 68 68 / 0.15),
+    0 1px 3px 0 rgb(239 68 68 / 0.1) !important;
 }
 
 :where(.shadow-sm) {
-    box-shadow: 0 1px 2px 0 rgb(239 68 68 / 0.12), 0 1px 3px 0 rgb(239 68 68 / 0.08) !important;
+  box-shadow:
+    0 1px 2px 0 rgb(239 68 68 / 0.12),
+    0 1px 3px 0 rgb(239 68 68 / 0.08) !important;
 }
 
 :where(.shadow-md) {
-    box-shadow: 0 4px 6px -1px rgb(239 68 68 / 0.16), 0 2px 4px -2px rgb(239 68 68 / 0.12) !important;
+  box-shadow:
+    0 4px 6px -1px rgb(239 68 68 / 0.16),
+    0 2px 4px -2px rgb(239 68 68 / 0.12) !important;
 }
 
 :where(.shadow-lg) {
-    box-shadow: 0 10px 15px -3px rgb(239 68 68 / 0.18), 0 4px 6px -4px rgb(239 68 68 / 0.14) !important;
+  box-shadow:
+    0 10px 15px -3px rgb(239 68 68 / 0.18),
+    0 4px 6px -4px rgb(239 68 68 / 0.14) !important;
 }
 
 :where(.shadow-xl) {
-    box-shadow: 0 20px 25px -5px rgb(239 68 68 / 0.20), 0 8px 10px -6px rgb(239 68 68 / 0.16) !important;
+  box-shadow:
+    0 20px 25px -5px rgb(239 68 68 / 0.2),
+    0 8px 10px -6px rgb(239 68 68 / 0.16) !important;
 }
 
 :where(.shadow-2xl) {
-    box-shadow: 0 25px 50px -12px rgb(239 68 68 / 0.22) !important;
-}
\ No newline at end of file
+  box-shadow: 0 25px 50px -12px rgb(239 68 68 / 0.22) !important;
+}
diff --git a/frontend/src/components/maps/Map.tsx b/frontend/src/components/maps/Map.tsx
index 3489724..54f6596 100644
--- a/frontend/src/components/maps/Map.tsx
+++ b/frontend/src/components/maps/Map.tsx
@@ -28,10 +28,12 @@ type MapViewport = {
 };
 
 const SINGAPORE_CENTER: PositionType = [1.364917, 103.822872];
+const SINGAPORE_CBD_CENTER: PositionType = [1.283, 103.851];
 const SINGAPORE_BOUNDS: [PositionType, PositionType] = [
   [1.144, 103.535],
   [1.494, 104.502],
 ];
+const ONE_MAP_DEFAULT_ZOOM = 15;
 
 const ONE_MAP_ATTRIBUTION =
   '<img src="https://www.onemap.gov.sg/web-assets/images/logo/om_logo.png" style="height:20px;width:20px;"/>&nbsp;<a href="https://www.onemap.gov.sg/" target="_blank" rel="noopener noreferrer">OneMap</a>&nbsp;&copy;&nbsp;contributors&nbsp;&#124;&nbsp;<a href="https://www.sla.gov.sg/" target="_blank" rel="noopener noreferrer">Singapore Land Authority</a>';
@@ -45,7 +47,10 @@ interface MapProps {
   points?: MapPoint[];
   basemap?: BasemapType;
   onViewportChange?: (viewport: MapViewport) => void;
+  onRenderedPointsChange?: (points: MapPoint[]) => void;
+  onLoadingChange?: (isLoading: boolean) => void;
   scrollWheelZoom?: boolean;
+  className?: string;
 }
 
 const ViewportEvents = ({
@@ -86,6 +91,65 @@ const ViewportEvents = ({
   return null;
 };
 
+const MapLoadEvents = ({
+  onLoadingChange,
+}: {
+  onLoadingChange?: (isLoading: boolean) => void;
+}) => {
+  const map = useMap();
+
+  useEffect(() => {
+    map.whenReady(() => {
+      onLoadingChange?.(false);
+    });
+  }, [map, onLoadingChange]);
+
+  return null;
+};
+
+const OneMapDefaultView = ({
+  enabled,
+  center,
+  zoom,
+}: {
+  enabled: boolean;
+  center: PositionType;
+  zoom: number;
+}) => {
+  const map = useMap();
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    map.whenReady(() => {
+      map.setView(center, zoom, { animate: false });
+    });
+  }, [map, enabled, center, zoom]);
+
+  return null;
+};
+
+const InvalidateMapOnResize = () => {
+  const map = useMap();
+
+  useEffect(() => {
+    const container = map.getContainer();
+    if (!container) return;
+
+    const observer = new ResizeObserver(() => {
+      map.invalidateSize({ animate: false });
+    });
+
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [map]);
+
+  return null;
+};
+
 const getMinDistancePx = (zoom: number) => {
   if (zoom >= 18) return 10;
   if (zoom >= 16) return 14;
@@ -93,6 +157,11 @@ const getMinDistancePx = (zoom: number) => {
   return 28;
 };
 
+const getEffectivePriority = (priority?: number) => {
+  if (!priority || priority <= 0) return Number.MAX_SAFE_INTEGER;
+  return priority;
+};
+
 const AttractionPopupContent = ({ point }: { point: MapPoint }) => {
   return (
     <div className="space-y-1">
@@ -115,12 +184,25 @@ const AttractionPopupContent = ({ point }: { point: MapPoint }) => {
   );
 };
 
-const AttractionMarkersLayer = ({ points }: { points: MapPoint[] }) => {
+const AttractionMarkersLayer = ({
+  points,
+  onRenderedPointsChange,
+}: {
+  points: MapPoint[];
+  onRenderedPointsChange?: (points: MapPoint[]) => void;
+}) => {
   const map = useMap();
+  const onRenderedPointsChangeRef = useRef(onRenderedPointsChange);
+  const lastRenderedSignatureRef = useRef<string>("");
+
+  useEffect(() => {
+    onRenderedPointsChangeRef.current = onRenderedPointsChange;
+  }, [onRenderedPointsChange]);
+
   const zoom = map.getZoom();
   const minimumDistancePx = getMinDistancePx(zoom);
   const sortedPoints = [...points].sort(
-    (a, b) => (a.priority ?? 0) - (b.priority ?? 0),
+    (a, b) => getEffectivePriority(a.priority) - getEffectivePriority(b.priority),
   );
 
   const accepted: Array<{ point: MapPoint; x: number; y: number }> = [];
@@ -143,6 +225,23 @@ const AttractionMarkersLayer = ({ points }: { points: MapPoint[] }) => {
     }
   }
 
+  const renderedPoints = accepted.map(({ point }) => point);
+  const renderedSignature = renderedPoints
+    .map(
+      (point) =>
+        `${point.id ?? point.title}:${point.position[0].toFixed(6)}:${point.position[1].toFixed(6)}`,
+    )
+    .join("|");
+
+  useEffect(() => {
+    const callback = onRenderedPointsChangeRef.current;
+    if (!callback) return;
+    if (lastRenderedSignatureRef.current === renderedSignature) return;
+
+    lastRenderedSignatureRef.current = renderedSignature;
+    callback(renderedPoints);
+  }, [renderedPoints, renderedSignature]);
+
   return (
     <>
       {accepted.map(({ point }) => (
@@ -168,23 +267,29 @@ const Map = ({
   points,
   basemap = "openstreetmap",
   onViewportChange,
+  onRenderedPointsChange,
+  onLoadingChange,
   scrollWheelZoom = false,
+  className,
 }: MapProps) => {
   const mapPoints = points ?? [];
   const hasPoints = mapPoints.length > 0;
-  const mapCenter = mapPoints[0]?.position ?? homePosition ?? centerPosition;
   const isOneMap = basemap === "onemap";
+  const mapCenter = isOneMap
+    ? SINGAPORE_CBD_CENTER
+    : mapPoints[0]?.position ?? homePosition ?? centerPosition;
+  const mapZoom = isOneMap ? ONE_MAP_DEFAULT_ZOOM : 13;
 
   return (
     <MapContainer
       center={mapCenter}
-      zoom={13}
+      zoom={mapZoom}
       minZoom={isOneMap ? 11 : undefined}
       maxZoom={isOneMap ? 19 : undefined}
       maxBounds={isOneMap ? SINGAPORE_BOUNDS : undefined}
       maxBoundsViscosity={isOneMap ? 1 : undefined}
       scrollWheelZoom={scrollWheelZoom}
-      className="relative z-0 w-full h-100 overflow-hidden rounded-2xl border border-base-300"
+      className={`relative z-0 w-full h-full overflow-hidden rounded-2xl border border-base-300 ${className ?? ""}`}
     >
       <TileLayer
         attribution={isOneMap ? ONE_MAP_ATTRIBUTION : OSM_ATTRIBUTION}
@@ -196,10 +301,25 @@ const Map = ({
         detectRetina={isOneMap}
         minZoom={isOneMap ? 11 : undefined}
         maxZoom={isOneMap ? 19 : undefined}
+        eventHandlers={{
+          loading: () => onLoadingChange?.(true),
+          load: () => onLoadingChange?.(false),
+          tileerror: () => onLoadingChange?.(false),
+        }}
+      />
+      <OneMapDefaultView
+        enabled={isOneMap}
+        center={SINGAPORE_CBD_CENTER}
+        zoom={ONE_MAP_DEFAULT_ZOOM}
       />
+      <InvalidateMapOnResize />
+      <MapLoadEvents onLoadingChange={onLoadingChange} />
       <ViewportEvents onViewportChange={onViewportChange} />
       {hasPoints ? (
-        <AttractionMarkersLayer points={mapPoints} />
+        <AttractionMarkersLayer
+          points={mapPoints}
+          onRenderedPointsChange={onRenderedPointsChange}
+        />
       ) : homePosition ? (
         <>
           {isOneMap ? (
diff --git a/frontend/src/components/maps/style.css b/frontend/src/components/maps/style.css
new file mode 100644
index 0000000..00ef974
--- /dev/null
+++ b/frontend/src/components/maps/style.css
@@ -0,0 +1,3 @@
+.leaflet-control-attribution {
+    display: flex;
+}
\ No newline at end of file
diff --git a/frontend/src/components/navigation/Navbar.tsx b/frontend/src/components/navigation/Navbar.tsx
index 60f7617..6f9a0c7 100644
--- a/frontend/src/components/navigation/Navbar.tsx
+++ b/frontend/src/components/navigation/Navbar.tsx
@@ -234,7 +234,7 @@ const Navbar = () => {
         </div>
       </div>
 
-      <div id="megamenu-portal" />
+      <div id="megamenu-portal" className="z-50"/>
     </>
   );
 };
diff --git a/frontend/src/pages/public/Home.tsx b/frontend/src/pages/public/Home.tsx
index 03afb49..c663798 100644
--- a/frontend/src/pages/public/Home.tsx
+++ b/frontend/src/pages/public/Home.tsx
@@ -18,7 +18,7 @@ const Home = () => {
             <HeroSection>
                 <Map key="map-container" homePosition={location || undefined}></Map>
             </HeroSection>
-            
+
             <p>{formatCurrency(1000 * rate, currency)}</p>
             <p>{t('greeting', { ns: 'system' })}</p>
         </Layout>
diff --git a/frontend/src/pages/public/explore/TopAttractions.tsx b/frontend/src/pages/public/explore/TopAttractions.tsx
index caca8c9..21e2495 100644
--- a/frontend/src/pages/public/explore/TopAttractions.tsx
+++ b/frontend/src/pages/public/explore/TopAttractions.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
+import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
 import Layout from "../../layout";
 import AttractionsMap from "../../../components/maps/Map";
 import CONFIG from "../../../config";
@@ -12,6 +13,7 @@ const SINGAPORE_BOUNDS = {
 
 const CACHE_KEY = "top-attractions-cache-v2";
 const CACHE_TTL_MS = 10 * 60 * 1000;
+const DEFAULT_MAP_CENTER: [number, number] = [1.283, 103.851];
 
 type AttractionResponse = {
   id: string;
@@ -44,7 +46,7 @@ type AttractionsApiResponse = {
 };
 
 type MapPoint = {
-  id: string;
+  id?: string;
   title: string;
   description?: string;
   position: [number, number];
@@ -75,6 +77,11 @@ const normalizeTypeId = (value: string | null | undefined) => {
   return normalized.length > 0 ? normalized : null;
 };
 
+const getEffectivePriority = (priority?: number | null) => {
+  if (!priority || priority <= 0) return Number.MAX_SAFE_INTEGER;
+  return priority;
+};
+
 const addAssetVersionParam = (
   iconUrl: string | null,
   version: string,
@@ -105,7 +112,11 @@ const mapApiPoints = (data: AttractionResponse[], iconVersion: string): MapPoint
       website: item.website,
       typeName: item.location_type_name,
     }))
-    .sort((a, b) => a.priority - b.priority);
+    .sort((a, b) => {
+      const priorityDelta = getEffectivePriority(a.priority) - getEffectivePriority(b.priority);
+      if (priorityDelta !== 0) return priorityDelta;
+      return a.title.localeCompare(b.title);
+    });
 
 const getCachedAttractions = (): MapPoint[] | null => {
   try {
@@ -159,7 +170,7 @@ const selectViewportPoints = (points: MapPoint[], viewport: Viewport | null) =>
     );
   });
 
-  filtered.sort((a, b) => a.priority - b.priority);
+  filtered.sort((a, b) => getEffectivePriority(a.priority) - getEffectivePriority(b.priority));
 
   if (viewport.zoom >= 14) {
     return filtered;
@@ -175,7 +186,7 @@ const selectViewportPoints = (points: MapPoint[], viewport: Viewport | null) =>
     const key = `${latBucket}-${lngBucket}`;
 
     const current = bucketed.get(key);
-    if (!current || point.priority < current.priority) {
+    if (!current || getEffectivePriority(point.priority) < getEffectivePriority(current.priority)) {
       bucketed.set(key, point);
     }
   }
@@ -183,20 +194,63 @@ const selectViewportPoints = (points: MapPoint[], viewport: Viewport | null) =>
   return [...bucketed.values()];
 };
 
+const getViewportCenter = (viewport: Viewport | null): [number, number] => {
+  if (!viewport) {
+    return DEFAULT_MAP_CENTER;
+  }
+
+  return [
+    (viewport.minLat + viewport.maxLat) / 2,
+    (viewport.minLng + viewport.maxLng) / 2,
+  ];
+};
+
+const getPointDistanceSquared = (point: MapPoint, center: [number, number]) => {
+  const [lat, lng] = point.position;
+  const [centerLat, centerLng] = center;
+  const latDistance = lat - centerLat;
+  const lngDistance = lng - centerLng;
+  return latDistance * latDistance + lngDistance * lngDistance;
+};
+
+const sortLocations = (points: MapPoint[], center: [number, number]) => {
+  return [...points].sort((a, b) => {
+    const priorityA = getEffectivePriority(a.priority);
+    const priorityB = getEffectivePriority(b.priority);
+
+    if (priorityA !== priorityB) {
+      return priorityA - priorityB;
+    }
+
+    const distanceA = getPointDistanceSquared(a, center);
+    const distanceB = getPointDistanceSquared(b, center);
+
+    if (distanceA !== distanceB) {
+      return distanceA - distanceB;
+    }
+
+    return a.title.localeCompare(b.title);
+  });
+};
+
 
 const TopAttractions = () => {
   const [allPoints, setAllPoints] = useState<MapPoint[]>([]);
+  const [renderedPoints, setRenderedPoints] = useState<MapPoint[]>([]);
   const [locationTypes, setLocationTypes] = useState<LocationType[]>([]);
   const [selectedTypeIds, setSelectedTypeIds] = useState<string[]>([]);
   const [viewport, setViewport] = useState<Viewport | null>(null);
+  const [isLocationsCollapsed, setIsLocationsCollapsed] = useState(false);
+  const [isMapLoading, setIsMapLoading] = useState(true);
   const [loading, setLoading] = useState(false);
   const [loadingTypes, setLoadingTypes] = useState(false);
-  const [stats, setStats] = useState<{ total: number; visible: number; isClusterMode: boolean }>( {
+  const [stats, setStats] = useState<{ total: number; visible: number; isClusterMode: boolean }>({
     total: 0,
     visible: 0,
     isClusterMode: true,
   });
   const refreshIntervalRef = useRef<number | null>(null);
+  const hasMapLoadedRef = useRef(false);
 
   const filteredPoints = useMemo(() => {
     if (selectedTypeIds.length === 0) {
@@ -214,6 +268,10 @@ const TopAttractions = () => {
     [filteredPoints, viewport],
   );
 
+  const sortedLocations = useMemo(() => {
+    return sortLocations(renderedPoints, getViewportCenter(viewport));
+  }, [renderedPoints, viewport]);
+
   useEffect(() => {
     setStats({
       total: filteredPoints.length,
@@ -344,6 +402,31 @@ const TopAttractions = () => {
     );
   };
 
+  const handleMapLoadingChange = (isLoading: boolean) => {
+    if (hasMapLoadedRef.current) {
+      return;
+    }
+
+    if (!isLoading) {
+      hasMapLoadedRef.current = true;
+      setIsMapLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isMapLoading) return;
+
+    // Fallback so the map never stays hidden if a tile event is missed.
+    const timeoutId = window.setTimeout(() => {
+      hasMapLoadedRef.current = true;
+      setIsMapLoading(false);
+    }, 8000);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [isMapLoading]);
+
   return (
     <Layout>
       <div className="space-y-6">
@@ -361,38 +444,134 @@ const TopAttractions = () => {
           </p>
         </div>
 
-        <div className="grid gap-4 lg:grid-cols-12">
-          <div className="lg:col-span-8">
+        <div className="flex flex-col gap-4 lg:w-7xl lg:flex-row lg:items-stretch h-150">
+          <section
+            className={`card bg-base-100 border border-base-300 rounded-2xl overflow-hidden transition-all duration-300 h-136 lg:h-auto ${isLocationsCollapsed ? "lg:w-20" : "lg:w-96"}`}
+          >
+            <div className={`card-body h-full overflow-hidden ${isLocationsCollapsed ? "p-2" : "p-3 lg:p-4"}`}>
+              <div className={`flex gap-2 ${isLocationsCollapsed ? "items-center justify-center" : "items-start justify-between"}`}>
+                <div className={`${isLocationsCollapsed ? "lg:hidden" : ""}`}>
+                  <h2 className="text-lg font-semibold">Locations</h2>
+                  <p className="text-sm text-base-content/70">
+                    Priority, then closeness to map center.
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  className="btn btn-sm btn-outline hidden lg:inline-flex w-9 min-w-9 p-0"
+                  onClick={() => setIsLocationsCollapsed((prev) => !prev)}
+                  aria-label={isLocationsCollapsed ? "Expand locations" : "Collapse locations"}
+                  title={isLocationsCollapsed ? "Expand locations" : "Collapse locations"}
+                >
+                  {isLocationsCollapsed ? <FiChevronRight size={16} /> : <FiChevronLeft size={16} />}
+                </button>
+              </div>
+
+              <div className={`${isLocationsCollapsed ? "lg:hidden" : ""} mt-3 flex items-center justify-between text-sm text-base-content/70`}>
+                <span>
+                  {sortedLocations.length} location{sortedLocations.length === 1 ? "" : "s"}
+                </span>
+              </div>
+
+              {sortedLocations.length === 0 ? (
+                <p className={`${isLocationsCollapsed ? "lg:hidden" : ""} mt-3 text-sm text-base-content/70`}>
+                  No locations found for the selected type filters.
+                </p>
+              ) : (
+                <div className={`${isLocationsCollapsed ? "lg:hidden" : ""} mt-3 space-y-2 overflow-y-auto pr-1`}>
+                  {sortedLocations.map((point) => (
+                    <article
+                      key={point.id ?? `${point.title}-${point.position[0]}-${point.position[1]}`}
+                      className="rounded-xl border border-base-300 bg-base-100 px-3 py-2"
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <h3 className="font-medium leading-snug">{point.title}</h3>
+                      </div>
+                      <p className="mt-1 text-xs text-base-content/70">
+                        {typeNameById.get(normalizeTypeId(point.typeId) ?? "") ??
+                          point.typeName ??
+                          "Uncategorized"}
+                      </p>
+                      {point.website && (
+                        <a
+                          className="link link-primary text-sm mt-1 inline-flex"
+                          href={point.website}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          Visit
+                        </a>
+                      )}
+                    </article>
+                  ))}
+                </div>
+              )}
+            </div>
+          </section>
+
+          <section className="min-w-0 flex-1 lg:flex-[3.2] relative">
+            {isMapLoading && (
+              <div className="absolute inset-0 z-20 flex items-center justify-center rounded-2xl border border-base-300 bg-base-100/95 backdrop-blur-sm">
+                <div className="text-center space-y-3 px-6">
+                  <span className="loading loading-spinner loading-lg text-primary" aria-hidden="true"></span>
+                  <p className="text-sm text-base-content/80">
+                    Rendering map. Please wait...
+                  </p>
+                </div>
+              </div>
+            )}
             <AttractionsMap
               basemap="onemap"
               points={visiblePoints}
               onViewportChange={handleViewportChange}
+              onLoadingChange={handleMapLoadingChange}
+              onRenderedPointsChange={(points) => {
+                setRenderedPoints(
+                  points.map((point) => ({
+                    id: point.id,
+                    title: point.title,
+                    description: point.description,
+                    position: point.position,
+                    priority: point.priority ?? 0,
+                    typeId: null,
+                    iconUrl: point.iconUrl,
+                    mapColor: point.mapColor,
+                    website: point.website,
+                    typeName: point.typeName,
+                  })),
+                );
+              }}
               scrollWheelZoom
             />
-          </div>
+          </section>
 
-          <div className="lg:col-span-4">
-            <div className="card bg-base-100 border border-base-300 rounded-2xl h-100 overflow-hidden">
-              <div className="card-body p-4 overflow-y-auto">
-                <div className="flex items-start justify-between gap-3">
+          <section className="card bg-base-100 border border-base-300 rounded-2xl overflow-hidden w-full h-136 lg:h-auto lg:w-88">
+            <div className="card-body p-4 h-full overflow-hidden">
+              <div className="flex items-start justify-between gap-3">
+                <div>
                   <h2 className="text-lg font-semibold">Filter by location type</h2>
-                  {selectedTypeIds.length > 0 && (
-                    <button
-                      type="button"
-                      className="btn btn-xs btn-ghost"
-                      onClick={() => setSelectedTypeIds([])}
-                    >
-                      Clear
-                    </button>
-                  )}
+                  <p className="text-sm text-base-content/70">
+                    Narrow the map to a specific attraction type.
+                  </p>
                 </div>
+                {selectedTypeIds.length > 0 && (
+                  <button
+                    type="button"
+                    className="btn btn-xs btn-ghost"
+                    onClick={() => setSelectedTypeIds([])}
+                  >
+                    Clear
+                  </button>
+                )}
+              </div>
 
+              <div className="mt-3 overflow-y-auto pr-1">
                 {loadingTypes ? (
                   <p className="text-sm text-base-content/70">Loading types...</p>
                 ) : locationTypes.length === 0 ? (
                   <p className="text-sm text-base-content/70">No location types available.</p>
                 ) : (
-                  <div className="space-y-2 mt-1">
+                  <div className="space-y-2">
                     {locationTypes.map((type) => {
                       const typeId = normalizeTypeId(type.id);
                       if (!typeId) return null;
@@ -403,11 +582,10 @@ const TopAttractions = () => {
                       return (
                         <label
                           key={typeId}
-                          className={`flex items-center justify-between gap-3 rounded-xl border px-3 py-2 cursor-pointer transition ${
-                            selected
-                              ? "border-primary bg-primary/10"
-                              : "border-base-300 hover:border-base-content/20"
-                          }`}
+                          className={`flex items-center justify-between gap-3 rounded-xl border px-3 py-2 cursor-pointer transition ${selected
+                            ? "border-primary bg-primary/10"
+                            : "border-base-300 hover:border-base-content/20"
+                            }`}
                         >
                           <span className="flex items-center gap-3 min-w-0">
                             <input
@@ -433,63 +611,8 @@ const TopAttractions = () => {
                 )}
               </div>
             </div>
-          </div>
+          </section>
         </div>
-
-        <section className="card bg-base-100 border border-base-300 rounded-2xl">
-          <div className="card-body">
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <h2 className="text-lg font-semibold">Locations</h2>
-              <span className="text-sm text-base-content/70">
-                {filteredPoints.length} location{filteredPoints.length === 1 ? "" : "s"}
-              </span>
-            </div>
-
-            {filteredPoints.length === 0 ? (
-              <p className="text-sm text-base-content/70">
-                No locations found for the selected type filters.
-              </p>
-            ) : (
-              <div className="overflow-x-auto">
-                <table className="table table-zebra">
-                  <thead>
-                    <tr>
-                      <th>Name</th>
-                      <th>Type</th>
-                      <th>Website</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {filteredPoints.map((point) => (
-                      <tr key={point.id}>
-                        <td>{point.title}</td>
-                        <td>
-                          {typeNameById.get(normalizeTypeId(point.typeId) ?? "") ??
-                            point.typeName ??
-                            "Uncategorized"}
-                        </td>
-                        <td>
-                          {point.website ? (
-                            <a
-                              className="link link-primary"
-                              href={point.website}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                            >
-                              Visit
-                            </a>
-                          ) : (
-                            <span className="text-base-content/50">-</span>
-                          )}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </div>
-        </section>
       </div>
     </Layout>
   )