diff --git a/apps/map/src/app/_components/map/filters-all.tsx b/apps/map/src/app/_components/map/filters-all.tsx
index 488452b2..47b16f77 100644
--- a/apps/map/src/app/_components/map/filters-all.tsx
+++ b/apps/map/src/app/_components/map/filters-all.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { ComponentProps } from "react";
-import Image from "next/image"; // Next.js Image component for optimized image rendering.
+import { useMemo } from "react";
 
 import { X } from "lucide-react";
 
@@ -9,19 +9,36 @@ import { SHORT_DAY_ORDER } from "@acme/shared/app/constants";
 import { RERENDER_LOGS } from "@acme/shared/common/constants";
 import { cn } from "@acme/ui";
 import { Button } from "@acme/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@acme/ui/select";
 import { useTheme } from "@acme/ui/theme";
 
+import { VirtualizedCombobox } from "~/app/_components/virtualized-combobox";
+import { orpc, useQuery } from "~/orpc/react";
 import type { FiltersType } from "~/utils/store/filter";
 import {
   filterStore,
   initialFilterState,
   TimeSelection,
 } from "~/utils/store/filter";
-import BootSvgComponent from "../SVGs/boot-camp";
-import RuckSvgComponent from "../SVGs/ruck";
-import RunSvgComponent from "../SVGs/run";
 
-// Defining items for the filter options with their names and corresponding SVG components or image paths.
+const TIME_OPTIONS = Object.values(TimeSelection)
+  .filter((v) => v !== TimeSelection.none)
+  .map((value) => {
+    const match = /^(\d{1,2})(am|pm)$/.exec(value);
+    return {
+      value,
+      label:
+        match?.[1] && match[2]
+          ? `${match[1]} ${match[2].toUpperCase()}`
+          : value,
+    };
+  });
 
 // The main component for the map drawer.
 export const FiltersAll = (props: ComponentProps<"div">) => {
@@ -31,6 +48,28 @@ export const FiltersAll = (props: ComponentProps<"div">) => {
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
 
+  const { data: nationalEventTypesResult, isLoading } = useQuery(
+    orpc.eventType.all.queryOptions({
+      input: {
+        nationalOnly: true,
+        statuses: ["active"],
+        sorting: [{ id: "name", desc: false }],
+      },
+    }),
+  );
+  const nationalEventTypes = nationalEventTypesResult?.eventTypes;
+
+  const eventTypeOptions = useMemo(
+    () =>
+      nationalEventTypes?.map((et) => ({
+        value: String(et.id),
+        label: et.name,
+      })) ?? [],
+    [nationalEventTypes],
+  );
+
+  const selectedIds = filters.nationalEventTypeIds;
+
   // Function to toggle the state of a filter when clicked.
   const handleFilterClick = (
     filterName: keyof FiltersType,
@@ -45,47 +84,10 @@ export const FiltersAll = (props: ComponentProps<"div">) => {
     }
   };
 
-  const handleTypeClick = (
-    filterName: "Bootcamp" | "Ruck" | "Run" | "Swim",
-    newState?: boolean,
-  ) => {
-    filterStore.setState((s) => ({
-      Bootcamp: false,
-      Ruck: false,
-      Run: false,
-      Swim: false,
-      [filterName]: newState ?? !s[filterName],
-    }));
-  };
-
   const handleResetFilters = () => {
     filterStore.setState(initialFilterState);
   };
 
-  const workoutItems = [
-    {
-      name: "Bootcamp" as const,
-      img: BootSvgComponent,
-      onClick: () => {
-        handleTypeClick("Bootcamp");
-      },
-    },
-    {
-      name: "Ruck" as const,
-      img: RuckSvgComponent,
-      onClick: () => {
-        handleTypeClick("Ruck");
-      },
-    },
-    {
-      name: "Run" as const,
-      img: RunSvgComponent,
-      onClick: () => {
-        handleTypeClick("Run");
-      },
-    },
-  ];
-
   return (
     <div
       className={cn(
@@ -130,100 +132,82 @@ export const FiltersAll = (props: ComponentProps<"div">) => {
         </div>
         <div>
           <h2 className="mb-2 text-lg font-semibold">Time of Workout</h2>
-          <div className="flex flex-col space-y-2">
-            <div className="flex items-center gap-4">
-              <select
-                data-vaul-no-drag
-                className="w-40 rounded border border-gray-300 px-2 py-1"
-                value={filters.beforeAfterDirection}
-                onChange={(e) => {
-                  filterStore.setState({
-                    beforeAfterDirection: e.target.value as "before" | "after",
-                  });
-                }}
-              >
-                <option value="before">On or before</option>
-                <option value="after">On or after</option>
-              </select>
-              <select
+          <div className="flex items-center gap-4">
+            <Select
+              value={filters.beforeAfterDirection}
+              onValueChange={(v) =>
+                filterStore.setState({
+                  beforeAfterDirection: v as "before" | "after",
+                })
+              }
+            >
+              <SelectTrigger data-vaul-no-drag className="w-40">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="before">On or before</SelectItem>
+                <SelectItem value="after">On or after</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select
+              value={filters.beforeAfterTime}
+              onValueChange={(v) =>
+                filterStore.setState({
+                  beforeAfterTime: v as TimeSelection,
+                })
+              }
+            >
+              <SelectTrigger
                 data-vaul-no-drag
-                className={cn("w-40 rounded border border-gray-300 px-2 py-1", {
-                  "border-blue-500 bg-blue-100":
-                    filters.beforeAfterTime !== TimeSelection.none,
-                })}
-                value={filters.beforeAfterTime}
-                onChange={(e) => {
-                  filterStore.setState({
-                    beforeAfterTime: e.target.value as TimeSelection,
-                  });
-                }}
+                className={cn(
+                  "w-40",
+                  filters.beforeAfterTime !== TimeSelection.none &&
+                    "border-blue-500 bg-blue-100",
+                )}
               >
-                <option value={TimeSelection.none}>--</option>
-                <option value={TimeSelection["12am"]}>12 AM</option>
-                <option value={TimeSelection["1am"]}>1 AM</option>
-                <option value={TimeSelection["2am"]}>2 AM</option>
-                <option value={TimeSelection["3am"]}>3 AM</option>
-                <option value={TimeSelection["4am"]}>4 AM</option>
-                <option value={TimeSelection["5am"]}>5 AM</option>
-                <option value={TimeSelection["6am"]}>6 AM</option>
-                <option value={TimeSelection["7am"]}>7 AM</option>
-                <option value={TimeSelection["8am"]}>8 AM</option>
-                <option value={TimeSelection["9am"]}>9 AM</option>
-                <option value={TimeSelection["10am"]}>10 AM</option>
-                <option value={TimeSelection["11am"]}>11 AM</option>
-                <option value={TimeSelection["12pm"]}>12 PM</option>
-                <option value={TimeSelection["1pm"]}>1 PM</option>
-                <option value={TimeSelection["2pm"]}>2 PM</option>
-                <option value={TimeSelection["3pm"]}>3 PM</option>
-                <option value={TimeSelection["4pm"]}>4 PM</option>
-                <option value={TimeSelection["5pm"]}>5 PM</option>
-                <option value={TimeSelection["6pm"]}>6 PM</option>
-                <option value={TimeSelection["7pm"]}>7 PM</option>
-                <option value={TimeSelection["8pm"]}>8 PM</option>
-                <option value={TimeSelection["9pm"]}>9 PM</option>
-                <option value={TimeSelection["10pm"]}>10 PM</option>
-                <option value={TimeSelection["11pm"]}>11 PM</option>
-              </select>
-            </div>
+                <SelectValue placeholder="--" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={TimeSelection.none}>--</SelectItem>
+                {TIME_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         </div>
         <div>
           <h2 className="mb-2 text-lg font-semibold">Type of Workout</h2>
-          <div className="grid grid-cols-4">
-            {workoutItems.map((item, index) => (
-              <button
-                key={index}
-                className="flex flex-col items-center space-y-2"
-                onClick={item.onClick ?? (() => handleFilterClick(item.name))}
-              >
-                <div
-                  className={`rounded-lg border p-4 ${
-                    filters[item.name]
-                      ? isDark
-                        ? "border-blue-500 bg-blue-900"
-                        : "border-blue-500 bg-blue-100"
-                      : "border-gray-300 bg-background"
-                  }`}
-                >
-                  <div className="flex h-6 w-6 items-center justify-center">
-                    {typeof item.img === "string" ? (
-                      <Image
-                        className="max-h-full w-auto object-contain"
-                        src={item.img}
-                        alt={item.name}
-                      />
-                    ) : (
-                      <item.img
-                        className="h-full w-full"
-                        fill={filters[item.name] ? "#3B82F6" : "#6B7280"}
-                      />
-                    )}
-                  </div>
-                </div>
-                <p className="text-sm text-foreground">{item.name}</p>
-              </button>
-            ))}
+          <div className="w-full max-w-sm" data-vaul-no-drag>
+            <VirtualizedCombobox
+              disabled={isLoading}
+              isMulti
+              options={eventTypeOptions}
+              popoverContentAlign="start"
+              searchPlaceholder="All types"
+              value={selectedIds.map(String)}
+              className={cn(
+                "w-full",
+                selectedIds.length > 0 &&
+                  (isDark
+                    ? "border-blue-500 bg-blue-950"
+                    : "border-blue-500 bg-blue-100"),
+              )}
+              onSelect={(item) => {
+                const ids = Array.isArray(item)
+                  ? item.map((id) => Number(id))
+                  : [Number(item)];
+                filterStore.setState({ nationalEventTypeIds: ids });
+              }}
+            />
           </div>
+          {nationalEventTypes?.length === 0 && !isLoading ? (
+            <p className="mt-2 text-sm text-muted-foreground">
+              No national event types found.
+            </p>
+          ) : null}
         </div>
         <div className="mt-4 flex flex-row items-center justify-center gap-4">
           <Button
diff --git a/apps/map/src/utils/filtered-data.ts b/apps/map/src/utils/filtered-data.ts
index 0196d301..d54e40fb 100644
--- a/apps/map/src/utils/filtered-data.ts
+++ b/apps/map/src/utils/filtered-data.ts
@@ -59,16 +59,11 @@ export const filterData = <
       const includeThisLocationMarkerOnAmPm =
         (!filters.am || startIsAM) && (!filters.pm || !startIsAM);
 
-      // Check if at least one of the selected type filters matches the station's type
+      const selectedTypeIds = filters.nationalEventTypeIds;
+      const typeFilterActive = selectedTypeIds.length > 0;
       const includeThisLocationMarkerOnType =
-        (!filters.Bootcamp ||
-          event.eventTypes.some((type) => type.name === "Bootcamp")) &&
-        (!filters.Run ||
-          event.eventTypes.some((type) => type.name === "Run")) &&
-        (!filters.Ruck ||
-          event.eventTypes.some((type) => type.name === "Ruck")) &&
-        (!filters.Swim ||
-          event.eventTypes.some((type) => type.name === "Swimming"));
+        !typeFilterActive ||
+        event.eventTypes.some((type) => selectedTypeIds.includes(type.id));
 
       // // Check if the after time filter matches the station's end time
       let includeThisLocationMarkerOnTime = true;
diff --git a/apps/map/src/utils/store/filter.ts b/apps/map/src/utils/store/filter.ts
index 311c71f3..fd9d673d 100644
--- a/apps/map/src/utils/store/filter.ts
+++ b/apps/map/src/utils/store/filter.ts
@@ -43,10 +43,8 @@ export const initialFilterState = {
   dayTh: false,
   dayF: false,
   daySa: false,
-  Bootcamp: false,
-  Ruck: false,
-  Swim: false,
-  Run: false,
+  /** National event type IDs; empty means no type filter (show all). */
+  nationalEventTypeIds: [] as number[],
   beforeAfterDirection: "before" as "before" | "after",
   beforeAfterTime: TimeSelection.none,
   position: { latitude: 0, longitude: 0 },
@@ -65,8 +63,15 @@ export const filterStore = new ZustandStore({
 });
 
 export const isAnyFilterActive = (filters: FiltersType) => {
-  const { am: _am, pm: _pm, beforeAfterTime, ...otherFilters } = filters;
+  const {
+    am: _am,
+    pm: _pm,
+    beforeAfterTime,
+    nationalEventTypeIds,
+    ...otherFilters
+  } = filters;
   return (
+    (nationalEventTypeIds?.length ?? 0) > 0 ||
     Object.values(otherFilters).some((value) => value === true) ||
     beforeAfterTime !== TimeSelection.none
   );
diff --git a/packages/api/src/router/event-type.test.ts b/packages/api/src/router/event-type.test.ts
index 9a0b2024..a12817b3 100644
--- a/packages/api/src/router/event-type.test.ts
+++ b/packages/api/src/router/event-type.test.ts
@@ -94,6 +94,91 @@ describe("Event Type Router", () => {
       }
     });
 
+    it("should return only active national event types when nationalOnly is true", async () => {
+      const session = await createAdminSession();
+      await mockAuthWithSession(session);
+
+      const nationOrg = await getOrCreateF3NationOrg();
+      const nationalName = `NAT_FILTER_${uniqueId()}`;
+      const nationalNameB = `NAT_FILTER_B_${uniqueId()}`;
+
+      const [inactiveNational] = await db
+        .insert(schema.eventTypes)
+        .values({
+          name: `NAT_INACTIVE_${uniqueId()}`,
+          eventCategory: "first_f",
+          isActive: false,
+          specificOrgId: null,
+        })
+        .returning();
+      if (inactiveNational) createdEventTypeIds.push(inactiveNational.id);
+
+      const [orgSpecific] = await db
+        .insert(schema.eventTypes)
+        .values({
+          name: `ORG_SPEC_${uniqueId()}`,
+          eventCategory: "first_f",
+          isActive: true,
+          specificOrgId: nationOrg.id,
+        })
+        .returning();
+      if (orgSpecific) createdEventTypeIds.push(orgSpecific.id);
+
+      const [nationalA] = await db
+        .insert(schema.eventTypes)
+        .values({
+          name: nationalNameB,
+          eventCategory: "first_f",
+          isActive: true,
+          specificOrgId: null,
+        })
+        .returning();
+      if (nationalA) createdEventTypeIds.push(nationalA.id);
+
+      const [nationalB] = await db
+        .insert(schema.eventTypes)
+        .values({
+          name: nationalName,
+          eventCategory: "first_f",
+          isActive: true,
+          specificOrgId: null,
+        })
+        .returning();
+      if (nationalB) createdEventTypeIds.push(nationalB.id);
+
+      const client = createTestClient();
+      const result = await client.eventType.all({
+        nationalOnly: true,
+        statuses: ["active"],
+        sorting: [{ id: "name", desc: false }],
+      });
+
+      const ids = result.eventTypes.map((r) => r.id);
+      expect(ids).toContain(nationalA?.id);
+      expect(ids).toContain(nationalB?.id);
+      expect(ids).not.toContain(inactiveNational?.id);
+      expect(ids).not.toContain(orgSpecific?.id);
+
+      const names = result.eventTypes.map((r) => r.name);
+      const sorted = [...names].sort((a, b) => a.localeCompare(b));
+      expect(names).toEqual(sorted);
+    });
+
+    it("should reject nationalOnly combined with orgIds", async () => {
+      const session = await createAdminSession();
+      await mockAuthWithSession(session);
+
+      const nationOrg = await getOrCreateF3NationOrg();
+      const client = createTestClient();
+
+      await expect(
+        client.eventType.all({
+          nationalOnly: true,
+          orgIds: [nationOrg.id],
+        }),
+      ).rejects.toThrow();
+    });
+
     it("should search by name", async () => {
       const session = await createAdminSession();
       await mockAuthWithSession(session);
diff --git a/packages/api/src/router/event-type.ts b/packages/api/src/router/event-type.ts
index 4b467809..16740da7 100644
--- a/packages/api/src/router/event-type.ts
+++ b/packages/api/src/router/event-type.ts
@@ -26,6 +26,7 @@ export const eventTypeRouter = {
   /**
    * By default this gets all the event types available for the orgIds (meaning that general, nation-wide event types are included)
    * To get only the event types for a specific org, set ignoreNationEventTypes to true
+   * Use nationalOnly to return only nation-wide types (specific_org_id is null); cannot be combined with orgIds
    */
   all: protectedProcedure
     .input(
@@ -64,6 +65,21 @@ export const eventTypeRouter = {
             .describe(
               "If true, only return event types specific to the requested orgs. If false (default), include nation-wide types.",
             ),
+          nationalOnly: z.coerce
+            .boolean()
+            .optional()
+            .describe(
+              "If true, return only nation-wide event types (specific_org_id is null). Cannot be combined with orgIds.",
+            ),
+        })
+        .superRefine((data, ctx) => {
+          if (data.nationalOnly && data.orgIds?.length) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: "nationalOnly cannot be combined with orgIds",
+              path: ["nationalOnly"],
+            });
+          }
         })
         .optional(),
     )
@@ -142,6 +158,17 @@ export const eventTypeRouter = {
         count: count(schema.eventsXEventTypes.eventTypeId),
       };
 
+      const orgScopeFilter = input?.nationalOnly
+        ? isNull(schema.eventTypes.specificOrgId)
+        : input?.orgIds?.length
+          ? or(
+              inArray(schema.eventTypes.specificOrgId, input.orgIds),
+              input?.ignoreNationEventTypes
+                ? undefined
+                : isNull(schema.eventTypes.specificOrgId),
+            )
+          : undefined;
+
       const where = and(
         input?.searchTerm
           ? or(
@@ -149,14 +176,7 @@ export const eventTypeRouter = {
               ilike(schema.eventTypes.description, `%${input?.searchTerm}%`),
             )
           : undefined,
-        input?.orgIds?.length
-          ? or(
-              inArray(schema.eventTypes.specificOrgId, input?.orgIds),
-              input?.ignoreNationEventTypes
-                ? undefined
-                : isNull(schema.eventTypes.specificOrgId),
-            )
-          : undefined,
+        orgScopeFilter,
         !input?.statuses?.length ||
           input.statuses.length === IsActiveStatus.length
           ? undefined