diff --git a/client/src/App.vue b/client/src/App.vue
index 3bbd7a5e..a667321a 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -62,13 +62,7 @@ defineExpose({ mapItems: activityStore.mapItems });
       />
     </CollapsibleSidebar>
     <Suspense>
-      <MapView
-        ref="map"
-        v-model:center="center"
-        v-model:zoom="zoom"
-        :bounds="geolocation"
-        :mapItems="activityStore.mapItems"
-      />
+      <MapView ref="map" v-model:center="center" v-model:zoom="zoom" :bounds="geolocation" />
     </Suspense>
   </div>
 </template>
@@ -130,6 +124,7 @@ a[href] {
     --background-error: hsl(0 90% 30%);
     --bold-color: #fc4c02;
     --link-color: lightblue;
+    color-scheme: dark;
   }
 }
 
diff --git a/client/src/components/map/MapView.vue b/client/src/components/map/MapView.vue
index 76f34d39..72999d0e 100644
--- a/client/src/components/map/MapView.vue
+++ b/client/src/components/map/MapView.vue
@@ -28,8 +28,7 @@ import { useMapStyle } from '@/MapStyle';
 import { addLayersToMap, applyMapItems, MapSourceLayer, useMapSelection } from '@/utils/map';
 import Viewport from '@/Viewport';
 
-const { mapItems, bounds } = defineProps<{
-  mapItems: readonly MapItem[];
+const { bounds } = defineProps<{
   bounds?: LngLatBoundsLike;
 }>();
 
@@ -93,19 +92,17 @@ onMounted(() => {
   map.resize();
 });
 
-watch(
-  () => mapItems,
-  (mapItems) => {
-    applyMapItems(map, mapItems, MapSourceLayer.LINES);
-  },
-);
+watch([() => selectionStore.visibleItems], ([mapItems]) => {
+  applyMapItems(map, mapItems, MapSourceLayer.LINES);
+});
 
-watch(
-  () => selectionStore.selectedItems,
-  (selectedMapItems) => {
-    applyMapItems(map, selectedMapItems, MapSourceLayer.SELECTED);
-  },
-);
+watch([() => selectionStore.visibleBackgroundItems], ([backgroundMapItems]) => {
+  applyMapItems(map, backgroundMapItems, MapSourceLayer.BACKGROUND);
+});
+
+watch([() => selectionStore.selectedItems], ([selectedMapItems]) => {
+  applyMapItems(map, selectedMapItems, MapSourceLayer.SELECTED);
+});
 
 watch(mapStyleUrl, (style) => {
   map.setStyle(style + '?optimize=true');
@@ -133,30 +130,23 @@ const onTerrain = () => {
 watch(terrain, onTerrain);
 
 /**
- * Calculate best way of zooming to fit the activity while avoiding the controls in the corners.
+ * Calculate all ways of zooming to fit the activity while avoiding the controls in the corners.
  *
  * This works by considering the visual aspect ratio of the route, and for each corner control,
  * considering either placing the route strictly horizontally offset from the control or strictly
  * vertically offset from the control.
- *
- * It compares the area of the bounding box of the activity in each case.
  */
-function optimiseViewport(map: MapboxMap, bounds: LngLatBounds) {
+function getViewports() {
   const padding = 10;
 
   const { width, height } = map.getCanvas().getBoundingClientRect();
 
-  const northWest = mapboxgl.MercatorCoordinate.fromLngLat(bounds.getNorthWest());
-  const southEast = mapboxgl.MercatorCoordinate.fromLngLat(bounds.getSouthEast());
-
-  const aspectRatio = (northWest.y - southEast.y) / (northWest.x - southEast.x);
-
   const topLeft = container.value?.querySelector('.mapboxgl-ctrl-top-left');
   const topRight = container.value?.querySelector('.mapboxgl-ctrl-top-right');
   const bottomLeft = container.value?.querySelector('.mapboxgl-ctrl-bottom-left');
   const bottomRight = container.value?.querySelector('.mapboxgl-ctrl-bottom-right');
 
-  const viewports = [
+  return [
     // Padding is given here as well as at the end so that 2 × padding is maintained from the edges,
     // and 1 × padding is maintained from the controls
     new Viewport(width, height, { left: padding, top: padding, bottom: padding, right: padding }),
@@ -182,12 +172,37 @@ function optimiseViewport(map: MapboxMap, bounds: LngLatBounds) {
       viewport.withOffset({ right: bottomRight?.clientWidth ?? 0 }),
     ])
     .map((viewport) => viewport.withPadding(padding));
+}
+
+/**
+ * Given a list of viewports, find the one with the largest area.
+ */
+function getOptimalViewport(viewports: Viewport[], bounds: LngLatBounds) {
+  const northWest = mapboxgl.MercatorCoordinate.fromLngLat(bounds.getNorthWest());
+  const southEast = mapboxgl.MercatorCoordinate.fromLngLat(bounds.getSouthEast());
+
+  const aspectRatio = (northWest.y - southEast.y) / (northWest.x - southEast.x);
 
   return viewports.reduce((best, current) =>
     best.screenArea(aspectRatio) > current.screenArea(aspectRatio) ? best : current,
   );
 }
 
+function checkBoundsForViewport(viewport: Viewport, bounds: LngLatBounds) {
+  const screenNorthEast = map.unproject([
+    viewport.width - (viewport.offsets.right ?? 0),
+    viewport.offsets.top ?? 0,
+  ]);
+  const screenSouthWest = map.unproject([
+    viewport.offsets.left ?? 0,
+    viewport.height - (viewport.offsets.bottom ?? 0),
+  ]);
+  const screenBounds = new mapboxgl.LngLatBounds(screenSouthWest, screenNorthEast);
+  return (
+    screenBounds.contains(bounds.getSouthWest()) && screenBounds.contains(bounds.getNorthEast())
+  );
+}
+
 function flyTo(mapItems: readonly MapItem[], zoom = false): void {
   if (mapItems.length === 0) return;
   const coordinates = mapItems.flatMap(({ map: line }) =>
@@ -198,30 +213,20 @@ function flyTo(mapItems: readonly MapItem[], zoom = false): void {
     new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]),
   );
 
-  const viewport = optimiseViewport(map, bounds);
-
-  const screenNorthEast = map.unproject([
-    viewport.width - (viewport.offsets.right ?? 0),
-    viewport.offsets.top ?? 0,
-  ]);
-  const screenSouthWest = map.unproject([
-    viewport.offsets.left ?? 0,
-    viewport.height - (viewport.offsets.bottom ?? 0),
-  ]);
-  const screenBounds = new mapboxgl.LngLatBounds(screenSouthWest, screenNorthEast);
+  const viewports = getViewports();
 
-  if (
-    zoom ||
-    !screenBounds.contains(bounds.getSouthWest()) ||
-    !screenBounds.contains(bounds.getNorthEast())
-  ) {
-    const maxZoom = zoom ? 30 : map.getZoom();
-    map.fitBounds(bounds, {
-      padding: viewport.offsets,
-      linear: true,
-      maxZoom,
-    });
+  if (!zoom && viewports.some((viewport) => checkBoundsForViewport(viewport, bounds))) {
+    // If one of the viewports fits on the screen, there is no need to rezoom
+    return;
   }
+
+  const viewport = getOptimalViewport(viewports, bounds);
+
+  map.fitBounds(bounds, {
+    padding: viewport.offsets,
+    linear: true,
+    maxZoom: zoom ? 30 : map.getZoom(),
+  });
 }
 
 function zoomToSelection(): void {
@@ -244,7 +249,8 @@ function mapLoaded(map: MapboxMap): void {
   addLayersToMap(map, mapStyle.value);
   onTerrain();
 
-  applyMapItems(map, mapItems, MapSourceLayer.LINES);
+  applyMapItems(map, selectionStore.visibleBackgroundItems, MapSourceLayer.BACKGROUND);
+  applyMapItems(map, selectionStore.visibleItems, MapSourceLayer.LINES);
   applyMapItems(map, selectionStore.selectedItems, MapSourceLayer.SELECTED);
 }
 
diff --git a/client/src/components/segmented-control/SegmentedControl.vue b/client/src/components/segmented-control/SegmentedControl.vue
index 87a3448c..d633b783 100644
--- a/client/src/components/segmented-control/SegmentedControl.vue
+++ b/client/src/components/segmented-control/SegmentedControl.vue
@@ -3,11 +3,15 @@ export interface SegmentedControlItemContext {
   selected: boolean;
   select: () => void;
   disabled: boolean;
+  deselect?: () => void;
 }
 
-const { disabled = false } = defineProps<{ disabled?: boolean }>();
+const { disabled = false, deselectValue } = defineProps<{
+  disabled?: boolean;
+  deselectValue?: [T];
+}>();
 
-const model = defineModel<T>();
+const model = defineModel<T>({ required: true });
 
 defineSlots<{
   default(props: { option: (value: T) => SegmentedControlItemContext }): unknown;
@@ -18,6 +22,9 @@ function option(value: T): SegmentedControlItemContext {
     selected: model.value === value,
     select: () => (model.value = value),
     disabled,
+
+    // This conversion is sound because allowDeselect can only be true if T includes undefined
+    deselect: deselectValue ? () => (model.value = deselectValue[0]) : undefined,
   };
 }
 </script>
diff --git a/client/src/components/segmented-control/SegmentedControlItem.vue b/client/src/components/segmented-control/SegmentedControlItem.vue
index 08202b1c..5673666c 100644
--- a/client/src/components/segmented-control/SegmentedControlItem.vue
+++ b/client/src/components/segmented-control/SegmentedControlItem.vue
@@ -9,6 +9,14 @@ const { option, disabled: disabledProp = false } = defineProps<{
 }>();
 
 const disabled = computed(() => option.disabled || disabledProp);
+
+function select() {
+  if (!option.selected) {
+    option.select();
+  } else if (option.deselect) {
+    option.deselect();
+  }
+}
 </script>
 
 <template>
@@ -19,7 +27,7 @@ const disabled = computed(() => option.disabled || disabledProp);
       disabled && $style.disabled,
     ]"
   >
-    <button :disabled @click.prevent="option.select()">
+    <button :disabled @click.prevent="select()">
       <div :class="[$style.buttonContents, $style.normal]">
         <slot />
       </div>
diff --git a/client/src/components/sidebar/FilterHelp.vue b/client/src/components/sidebar/FilterHelp.vue
new file mode 100644
index 00000000..ce7e9cd4
--- /dev/null
+++ b/client/src/components/sidebar/FilterHelp.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { useActivityStore } from '@/stores/ActivityStore';
+import { type FilterField } from '@/types/FilterModel';
+
+import UIIcon from '../ui/UIIcon.vue';
+import UIModal from '../ui/UIModal.vue';
+import helpStyle from './help.module.scss';
+
+const showHelp = defineModel<boolean>({ default: true });
+
+const appName = import.meta.env.VITE_APP_NAME as string;
+const activityStore = useActivityStore();
+
+function toggleFilter(field: FilterField) {
+  activityStore.filterFields.delete(field) || activityStore.filterFields.add(field);
+}
+</script>
+
+<template>
+  <UIModal v-model="showHelp" heading="Filters" :class="helpStyle.helpModal">
+    <p>
+      The following filters are available in {{ appName }}. Use the checkboxes to show/hide the
+      filters in the filter panel.
+    </p>
+    <hr />
+    <dl>
+      <dt>
+        <label>
+          Sport Type
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('sportType')"
+            @change="toggleFilter('sportType')"
+          />
+        </label>
+      </dt>
+      <dd>
+        Filtering by sport type, e.g. whether the
+        {{ activityStore.useRoutes ? 'route' : 'activity' }} is a hike or a run.
+      </dd>
+      <dd>
+        The option <em>All sports</em> means all
+        {{ activityStore.useRoutes ? 'routes' : 'activities' }}, regardless of type. The options
+        such as <em>All biking</em> show multiple sport types at once.
+      </dd>
+
+      <dt>
+        <label
+          >Distance
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('distance')"
+            @change="toggleFilter('distance')"
+          />
+        </label>
+      </dt>
+      <dt>
+        <label
+          >Elevation
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('elevation')"
+            @change="toggleFilter('elevation')"
+          />
+        </label>
+      </dt>
+      <dd>
+        Show only the {{ activityStore.useRoutes ? 'routes' : 'activities' }} with a
+        distance/elevation greater than or equal to the min value, and less than or equal to the max
+        value. Leave a field blank to avoid filtering.
+      </dd>
+
+      <dt v-if="activityStore.useRoutes">
+        <label>
+          Starred
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('starred')"
+            @change="toggleFilter('starred')"
+          />
+        </label>
+      </dt>
+
+      <dd v-if="activityStore.useRoutes">
+        Select <kbd><UIIcon inline icon="star" /></kbd> to show only starred routes, or
+        <kbd><UIIcon inline icon="star_border" /></kbd> to show only non-starred routes. Click again
+        to disable this filter.
+      </dd>
+
+      <dt v-if="!activityStore.useRoutes">
+        <label>
+          Gear
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('gear')"
+            @change="toggleFilter('gear')"
+          />
+        </label>
+      </dt>
+      <dd v-if="!activityStore.useRoutes">
+        Show only the activities recorded with the chosen gear (shoes/bike).
+      </dd>
+
+      <dt v-if="!activityStore.useRoutes">
+        <label
+          >Device
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('device')"
+            @change="toggleFilter('device')"
+          />
+        </label>
+      </dt>
+      <dd>
+        Enter a device name (or part of a name) to show only activities recorded with that device.
+        To only match exact names, surround the name with quotation marks, e.g. "Garmin Forerunner
+        945".
+      </dd>
+
+      <dt v-if="!activityStore.useRoutes">
+        <label
+          >Commutes
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('isCommute')"
+            @change="toggleFilter('isCommute')"
+          />
+        </label>
+      </dt>
+      <dd v-if="!activityStore.useRoutes">
+        Select
+        <UIIcon inline icon="work" /> to show only commutes, or <UIIcon inline icon="work_off" /> to
+        exclude commutes. Click again to disable this filter.
+      </dd>
+
+      <dt>
+        <label
+          >Visibility
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('isPrivate')"
+            @change="toggleFilter('isPrivate')"
+          />
+        </label>
+      </dt>
+      <dd>
+        Select
+        <UIIcon inline icon="lock_open" /> to show only non-private
+        {{ activityStore.useRoutes ? 'routes' : 'activities' }}, or <UIIcon inline icon="lock" /> to
+        show only private {{ activityStore.useRoutes ? 'routes' : 'activities' }}. Click again to
+        disable this filter.
+      </dd>
+    </dl>
+    <hr />
+    <p>
+      Use the <kbd><UIIcon inline icon="save" /> Save</kbd> button below the filters to save the
+      current filter configuration. This will then be used whenever you load {{ appName }}.
+    </p>
+    <p>
+      Use the <kbd><UIIcon inline icon="delete" /> Clear</kbd> button to discard the filter
+      configuration, resetting all values to empty. After doing this, an
+      <kbd><UIIcon inline icon="undo" /> Undo</kbd> button is shown to undo this change.
+    </p>
+    <p>
+      If a filter configuration has been saved, use the
+      <kbd><UIIcon inline icon="settings_backup_restore" /> Reset</kbd> button to reset to the saved
+      configuration.
+    </p>
+  </UIModal>
+</template>
+
+<style lang="scss" module>
+.helpModal {
+  width: min(35em, calc(100vw - 4rem));
+  max-height: 90vh;
+
+  dl {
+    > dt {
+      font-weight: 600;
+    }
+
+    > dd {
+      margin-left: 1em;
+      margin-block: 0.5em;
+    }
+  }
+
+  kbd {
+    font-family: inherit;
+    font-weight: bold;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/client/src/components/sidebar/SelectionHelp.vue b/client/src/components/sidebar/SelectionHelp.vue
new file mode 100644
index 00000000..e118d7b8
--- /dev/null
+++ b/client/src/components/sidebar/SelectionHelp.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useActivityStore } from '@/stores/ActivityStore';
+
+import UIIcon from '../ui/UIIcon.vue';
+import UIModal from '../ui/UIModal.vue';
+import helpStyle from './help.module.scss';
+
+const showHelp = defineModel<boolean>({ default: true });
+
+const appName = import.meta.env.VITE_APP_NAME as string;
+const activityStore = useActivityStore();
+</script>
+
+<template>
+  <UIModal v-model="showHelp" heading="Selection" :class="helpStyle.helpModal">
+    <p>
+      {{ appName }} allows you to select one or more
+      {{ activityStore.useRoutes ? 'routes' : 'activities' }}. You can click on
+      {{ activityStore.useRoutes ? 'a route' : 'an activity' }} to select it. This will pan the map
+      if necessary to ensure it is visible. Double-click to zoom in on the route as much as
+      possible.
+    </p>
+    <p>
+      To select multiple {{ activityStore.useRoutes ? 'routes' : 'activities' }}, hold the
+      <kbd>Ctrl</kbd> or <kbd>⌘ Command</kbd> key when clicking on each additional
+      {{ activityStore.useRoutes ? 'route' : 'activity' }}. To select a range of
+      {{ activityStore.useRoutes ? 'routes' : 'activities' }} in the sidebar, hold the
+      <kbd>⇧ Shift</kbd> key when clicking.
+    </p>
+    <p>
+      When multiple {{ activityStore.useRoutes ? 'routes' : 'activities' }} are selected, the total
+      statistics are shown at the top of the sidebar.
+    </p>
+    <hr />
+    <p>
+      Enable multiple selection mode to mimic holding the <kbd>Ctrl</kbd>/<kbd>⌘ Command</kbd> key.
+      In this mode, clicking on {{ activityStore.useRoutes ? 'a route' : 'an activity' }} adds it to
+      the selection, or removes it if it is already in the selection. When this mode is active, a
+      checkbox is shown next to each {{ activityStore.useRoutes ? 'route' : 'activity' }} in the
+      sidebar list.
+    </p>
+    <hr />
+    <p>
+      The selection can be cleared with the <kbd><UIIcon inline icon="delete" /> Clear</kbd> button.
+      It can be focused with the <kbd><UIIcon inline icon="loupe" /> Focus</kbd> button, meaning
+      that all unselected {{ activityStore.useRoutes ? 'routes' : 'activities' }} are hidden.
+      Clicking on <kbd><UIIcon inline icon="all_out" /> Release</kbd> will undo the last focus,
+      unhiding all hidden {{ activityStore.useRoutes ? 'routes' : 'activities' }}.
+    </p>
+  </UIModal>
+</template>
diff --git a/client/src/components/sidebar/SidebarContent.vue b/client/src/components/sidebar/SidebarContent.vue
index b6ecf99c..53ab57f5 100644
--- a/client/src/components/sidebar/SidebarContent.vue
+++ b/client/src/components/sidebar/SidebarContent.vue
@@ -27,7 +27,9 @@ const selectionStore = useSelectionStore();
 const expandableGroups = provideExpandableGroups();
 const areAllExpanded = expandableGroups.areAllExpanded;
 
-const totals = computed(() => combineStats(activityStore.mapItems, selectionStore.selectedItems));
+const totals = computed(() =>
+  combineStats(selectionStore.visibleItems, selectionStore.selectedItems),
+);
 
 const sidebarItemListRef = ref<HTMLElement>();
 
@@ -43,7 +45,7 @@ useStickyHeader(
 );
 
 watch(selectionStore.selected, async (selected) => {
-  if (selectionStore.updateSource === 'map') {
+  if (selectionStore.updateSource === 'map' && !selectionStore.multiSelectionMode) {
     if (selected.size !== 0) emit('focusSidebar');
     await nextTick();
     emit('scrollToSelected');
@@ -55,7 +57,7 @@ watch(selectionStore.selected, async (selected) => {
   <div :class="$style.sidebarContent">
     <SidebarForm />
     <div
-      v-if="activityStore.mapItems?.length"
+      v-if="selectionStore.visibleItems?.length"
       :class="[$style.sidebarTotalsContainer, stickyTotals && $style.stickyTotals]"
     >
       <a
@@ -74,7 +76,7 @@ watch(selectionStore.selected, async (selected) => {
     <div ref="sidebarItemListRef">
       <template v-if="activityStore.groupLevel">
         <SidebarGroup
-          v-for="group of activityStore.groupedMapItems"
+          v-for="group of selectionStore.visibleGroupedItems"
           :key="group.date"
           :group
           @zoom-to-selected="emit('zoomToSelected')"
@@ -82,9 +84,8 @@ watch(selectionStore.selected, async (selected) => {
       </template>
       <SidebarItemList
         v-else
-        :items="activityStore.mapItems"
+        :items="selectionStore.visibleItems"
         @zoom-to-selected="emit('zoomToSelected')"
-        @scroll-to-selected="emit('scrollToSelected')"
       />
     </div>
 
diff --git a/client/src/components/sidebar/SidebarDateFilter.vue b/client/src/components/sidebar/SidebarDateFilter.vue
new file mode 100644
index 00000000..013ff0d8
--- /dev/null
+++ b/client/src/components/sidebar/SidebarDateFilter.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { formatDate, formatDateRange } from '@/utils/numberFormat';
+
+import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
+import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
+import UIDateInput from '../ui/UIDateInput.vue';
+import controlsStyle from './controls.module.scss';
+
+defineProps<{ tab: Tab<string> }>();
+
+const start = defineModel<Date>('start');
+const end = defineModel<Date>('end');
+
+function reset() {
+  start.value = undefined;
+  end.value = undefined;
+}
+
+const summary = computed(() => {
+  // The end date, or undefined if in the future
+  const effectiveEnd = end.value && (end.value > new Date() ? undefined : end.value);
+  if (start.value && effectiveEnd) {
+    return formatDateRange(start.value, effectiveEnd);
+  } else if (start.value) {
+    return `After ${formatDate(start.value)}`;
+  } else if (effectiveEnd) {
+    return `Before ${formatDate(effectiveEnd)}`;
+  } else {
+    return 'All dates';
+  }
+});
+</script>
+
+<template>
+  <UIVerticalTab
+    :tab
+    icon="date_range"
+    heading="Dates"
+    :summary="[summary]"
+    :resetDisabled="!start && !end"
+    @reset="reset"
+  >
+    <template #expanded>
+      <div :class="[controlsStyle.grid, controlsStyle.center]">
+        <label>
+          <span>Start date</span>
+          <UIDateInput v-model="start" name="start" />
+        </label>
+        <label>
+          <span>End date</span>
+          <UIDateInput v-model="end" name="end" />
+        </label>
+      </div>
+    </template>
+  </UIVerticalTab>
+</template>
+
+<style lang="scss" module>
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.noPointer {
+  pointer-events: none;
+
+  > * {
+    pointer-events: initial;
+    margin-right: auto;
+  }
+}
+</style>
diff --git a/client/src/components/sidebar/SidebarDisplayOptions.vue b/client/src/components/sidebar/SidebarDisplayOptions.vue
new file mode 100644
index 00000000..b7d20a36
--- /dev/null
+++ b/client/src/components/sidebar/SidebarDisplayOptions.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useActivityStore } from '@/stores/ActivityStore';
+
+import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
+import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
+import UICheckbox from '../ui/UICheckbox.vue';
+
+defineProps<{ tab: Tab<string> }>();
+
+const activityStore = useActivityStore();
+
+const summary = computed(() =>
+  [
+    activityStore.useRoutes &&
+      activityStore.displayOptions.showActivities &&
+      'show past activities',
+  ].filter((string): string is string => !!string),
+);
+
+function reset() {
+  activityStore.displayOptions.showActivities = false;
+}
+</script>
+
+<template>
+  <UIVerticalTab
+    v-if="activityStore.useRoutes"
+    :tab
+    icon="visibility"
+    heading="Display"
+    :summary
+    :resetDisabled="!activityStore.displayOptions.showActivities"
+    @reset="reset"
+  >
+    <template #expanded>
+      <UICheckbox
+        v-model="activityStore.displayOptions.showActivities"
+        title="Show past activities as a background layer"
+        :iconScale="0.8"
+      >
+        Show past activities
+      </UICheckbox>
+    </template>
+  </UIVerticalTab>
+</template>
diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
new file mode 100644
index 00000000..44e4176c
--- /dev/null
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -0,0 +1,392 @@
+<script setup lang="ts">
+import { type Gear } from '@strava-heatmapper/shared/interfaces';
+import { bikeSportGroup, footSportGroup } from '@strava-heatmapper/shared/interfaces/SportType';
+import { computed, ref } from 'vue';
+
+import { useActivityStore } from '@/stores/ActivityStore';
+import { useSportTypeStore } from '@/stores/SportTypeStore';
+import {
+  exactDeviceQuotes,
+  type FilterModel,
+  parseDeviceFilter,
+  quotePairs,
+  type RangeFilter,
+} from '@/types/FilterModel';
+import { formatKilometers, formatMeters } from '@/utils/numberFormat';
+import { loadFilterModel, saveFilterModel } from '@/utils/storage';
+
+import SegmentedControl from '../segmented-control/SegmentedControl.vue';
+import SegmentedControlItem from '../segmented-control/SegmentedControlItem.vue';
+import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
+import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
+import UIButton from '../ui/UIButton.vue';
+import UIButtonGroup from '../ui/UIButtonGroup.vue';
+import UIDropdown, { type DropdownOption } from '../ui/UIDropdown.vue';
+import UIIcon from '../ui/UIIcon.vue';
+import UIMultiText from '../ui/UIMultiText.vue';
+import UIRange from '../ui/UIRange.vue';
+import UITextField from '../ui/UITextField.vue';
+import controlsStyle from './controls.module.scss';
+import FilterHelp from './FilterHelp.vue';
+
+defineProps<{ tab: Tab<string> }>();
+
+const activityStore = useActivityStore();
+
+const sportTypeStore = useSportTypeStore();
+
+const chosenSportLabel = computed(() => {
+  if (sportTypeStore.filter) {
+    for (const optionGroup of sportTypeStore.dropdownOptions) {
+      for (const option of optionGroup) {
+        if (option.value === sportTypeStore.filter) return option.label;
+      }
+    }
+  }
+  return undefined;
+});
+
+const offerGearByIsBike = computed(() => {
+  const offers = new Set<boolean>([true, false]);
+
+  const filterModel = activityStore.filterModel.sportType;
+  if (!filterModel) return offers;
+  const chosenFilters = filterModel.split(',');
+  if (bikeSportGroup.split(',').every((sport) => !chosenFilters.includes(sport))) {
+    offers.delete(true);
+  }
+  if (footSportGroup.split(',').every((sport) => !chosenFilters.includes(sport))) {
+    offers.delete(false);
+  }
+  return offers;
+});
+
+const gearOptions = computed<DropdownOption[][]>(() => {
+  const pairs = Array.from(activityStore.gear.entries()).filter(
+    (entry): entry is [string, Gear] => !!entry[1],
+  );
+  const partitions = [
+    offerGearByIsBike.value.has(false) && pairs.filter(([, piece]) => !piece.isBike),
+    offerGearByIsBike.value.has(true) && pairs.filter(([, piece]) => piece.isBike),
+  ].filter((partition) => !!partition);
+  return partitions.map((partition) =>
+    partition.map(([id, piece]): DropdownOption => ({ label: piece.name, value: id })),
+  );
+});
+
+const deviceOptionsWithSharedStrings = computed(() => {
+  const prefixes = new Map<string, { name: string; occurrences: number; leaf: boolean }>();
+
+  for (const device of activityStore.devices) {
+    device.split(' ').forEach((_, index, array) => {
+      const key = array.slice(0, index + 1).join(' ');
+      let prefix = prefixes.get(key.toLowerCase());
+      if (!prefix) {
+        prefix = { name: key, occurrences: 0, leaf: false };
+        prefixes.set(key.toLowerCase(), prefix);
+      }
+      prefix.occurrences += 1;
+      prefix.leaf ||= index === array.length - 1;
+    });
+  }
+  for (const prefix of prefixes.values()) {
+    const ancestors = prefix.name
+      .split(' ')
+      .map((_, index, array) => array.slice(0, index).join(' '))
+      .reverse();
+    for (const ancestorName of ancestors) {
+      const ancestor = prefixes.get(ancestorName.toLowerCase());
+      if (ancestor && ancestor.occurrences <= prefix.occurrences) {
+        prefixes.delete(ancestorName.toLowerCase());
+      }
+    }
+  }
+  return Array.from(prefixes.values(), (prefix) => prefix.name);
+});
+
+const deviceOptions = computed<string[]>(() => {
+  const devices = activityStore.devices;
+  const openQuote =
+    !!activityStore.filterModel.device &&
+    exactDeviceQuotes.includes(activityStore.filterModel.device[0] ?? '')
+      ? activityStore.filterModel.device[0]
+      : '';
+  if (openQuote) {
+    const closeQuote = quotePairs[openQuote] ?? openQuote;
+
+    return Array.from(devices).map((device) => openQuote + device + closeQuote);
+  } else {
+    return deviceOptionsWithSharedStrings.value;
+  }
+});
+
+const blankFilter = Object.freeze<FilterModel>({
+  distance: undefined,
+  elevation: undefined,
+  sportType: undefined,
+  starred: undefined,
+  gear: undefined,
+  isPrivate: undefined,
+  isCommute: undefined,
+  device: undefined,
+});
+
+function compareRanges(rangeA: RangeFilter | undefined, rangeB: RangeFilter | undefined) {
+  return rangeA?.max === rangeB?.max && rangeA?.min === rangeB?.min;
+}
+
+function compareFilters(filterA: FilterModel, filterB: FilterModel) {
+  return (
+    (filterA.sportType ?? '') === (filterB.sportType ?? '') &&
+    filterA.starred === filterB.starred &&
+    compareRanges(filterA.distance, filterB.distance) &&
+    compareRanges(filterA.elevation, filterB.elevation) &&
+    (filterA.gear ?? '') === (filterB.gear ?? '') &&
+    (filterA.isPrivate ?? null) === (filterB.isPrivate ?? null) &&
+    (filterA.isCommute ?? null) === (filterB.isCommute ?? null) &&
+    (filterA.device ?? '') === (filterB.device ?? '')
+  );
+}
+
+const previousFilters = ref<FilterModel>();
+const savedFilter = ref<FilterModel>(loadFilterModel() ?? blankFilter);
+
+const isSaved = computed(() => compareFilters(activityStore.filterModel, savedFilter.value));
+
+const hideResetToSaved = computed(() => compareFilters(blankFilter, savedFilter.value));
+const canResetToSaved = computed(() =>
+  compareFilters(activityStore.filterModel, savedFilter.value),
+);
+
+const filterState = computed<'changed' | 'canUndo' | 'initial'>(() => {
+  if (!compareFilters(activityStore.filterModel, blankFilter)) return 'changed';
+  else if (previousFilters.value) return 'canUndo';
+  else return 'initial';
+});
+
+function revertFilter() {
+  if (!compareFilters(activityStore.filterModel, blankFilter)) {
+    previousFilters.value = { ...activityStore.filterModel };
+    Object.assign(activityStore.filterModel, blankFilter);
+  } else {
+    Object.assign(activityStore.filterModel, previousFilters.value);
+  }
+}
+
+function saveFilter() {
+  saveFilterModel(activityStore.filterModel);
+  savedFilter.value = { ...activityStore.filterModel };
+}
+function resetToSaved() {
+  previousFilters.value = { ...activityStore.filterModel };
+  Object.assign(activityStore.filterModel, savedFilter.value);
+}
+
+function formatRange(
+  range: RangeFilter | undefined,
+  label: string,
+  format: (value: number) => string,
+): string | undefined {
+  if (range?.min && range?.max) return `${format(range.min)} ≤ ${label} ≤ ${format(range.max)}`;
+  if (range?.min) return `${label} ≥ ${format(range.min)}`;
+  if (range?.max) return `${label} ≤ ${format(range.max)}`;
+  return undefined;
+}
+
+function formatGear(id: string | undefined) {
+  if (!id) return undefined;
+  const chosenGear = activityStore.gear.get(id);
+  if (!chosenGear) return undefined;
+  return `using ${chosenGear.name}`;
+}
+
+const filterSummary = computed(() =>
+  [
+    activityStore.filterFields.has('sportType') && chosenSportLabel.value,
+    activityStore.filterFields.has('distance') &&
+      formatRange(activityStore.filterModel.distance, 'distance', formatKilometers),
+    activityStore.filterFields.has('elevation') &&
+      formatRange(activityStore.filterModel.elevation, 'elevation', formatMeters),
+    activityStore.filterFields.has('starred') &&
+      activityStore.useRoutes &&
+      activityStore.filterModel.starred !== undefined &&
+      (activityStore.filterModel.starred ? 'only starred' : 'only unstarred'),
+    activityStore.filterFields.has('gear') && formatGear(activityStore.filterModel.gear),
+    activityStore.filterFields.has('isCommute') &&
+      !activityStore.useRoutes &&
+      activityStore.filterModel.isCommute !== undefined &&
+      (activityStore.filterModel.isCommute ? 'only commutes' : 'excluding commutes'),
+    activityStore.filterFields.has('isPrivate') &&
+      activityStore.filterModel.isPrivate !== undefined &&
+      (activityStore.filterModel.isPrivate ? 'only private' : 'only non-private'),
+    activityStore.filterFields.has('device') &&
+      activityStore.filterModel.device &&
+      `only with device “${parseDeviceFilter(activityStore.filterModel.device).name}”`,
+  ].filter((string): string is string => !!string),
+);
+
+const showHelp = ref(false);
+</script>
+
+<template>
+  <UIVerticalTab
+    :tab
+    icon="filter_alt"
+    :expandedContentClass="$style.content"
+    heading="Filter"
+    :summary="filterSummary"
+    summaryEmpty="none set"
+    @help="showHelp = true"
+  >
+    <template #expanded>
+      <div :class="controlsStyle.grid">
+        <label v-if="activityStore.filterFields.has('sportType')">
+          <span>Sport type</span>
+          <UIDropdown
+            v-model="sportTypeStore.filter"
+            :options="sportTypeStore.dropdownOptions"
+            blankValue=""
+            blankLabel="All sports"
+          />
+        </label>
+
+        <label v-if="activityStore.filterFields.has('distance')">
+          <span>Distance</span>
+          <UIRange
+            v-model="activityStore.filterModel.distance"
+            :step="1"
+            :scale="0.001"
+            suffix="km"
+          />
+        </label>
+
+        <label v-if="activityStore.filterFields.has('elevation')">
+          <span>Elevation</span>
+          <UIRange v-model="activityStore.filterModel.elevation" :step="0.1" suffix="m" />
+        </label>
+
+        <div
+          v-if="activityStore.useRoutes && activityStore.filterFields.has('starred')"
+          :class="[controlsStyle.label, $style.noPointer]"
+        >
+          <span>Starred</span>
+
+          <SegmentedControl
+            v-slot="{ option }"
+            v-model="activityStore.filterModel.starred"
+            :class="controlsStyle.segmentedControl"
+            :deselectValue="[undefined]"
+          >
+            <SegmentedControlItem :option="option(false)" title="Only unstarred activities">
+              <UIIcon icon="star_border" inline />
+            </SegmentedControlItem>
+            <SegmentedControlItem :option="option(true)" title="Only starred activities">
+              <UIIcon icon="star" inline />
+            </SegmentedControlItem>
+          </SegmentedControl>
+        </div>
+
+        <label v-if="!activityStore.useRoutes && activityStore.filterFields.has('gear')">
+          <span>Gear</span>
+          <UIDropdown
+            v-model="activityStore.filterModel.gear"
+            :options="gearOptions"
+            blankValue=""
+            blankLabel="All gear"
+          />
+        </label>
+
+        <label v-if="!activityStore.useRoutes && activityStore.filterFields.has('device')">
+          <span>Device</span>
+          <UITextField
+            v-model.lazy="activityStore.filterModel.device"
+            :pickList="deviceOptions"
+            placeholder="All devices"
+          />
+        </label>
+
+        <div
+          v-if="activityStore.filterFields.has('isPrivate')"
+          :class="[$style.noPointer, controlsStyle.label]"
+        >
+          <span>Visibility</span>
+          <SegmentedControl
+            v-slot="{ option }"
+            v-model="activityStore.filterModel.isPrivate"
+            :class="controlsStyle.segmentedControl"
+            :deselectValue="[undefined]"
+          >
+            <SegmentedControlItem :option="option(false)" title="Only public activities">
+              <UIIcon icon="lock_open" inline />
+            </SegmentedControlItem>
+            <SegmentedControlItem :option="option(true)" title="Only private activities">
+              <UIIcon icon="lock" inline />
+            </SegmentedControlItem>
+          </SegmentedControl>
+        </div>
+
+        <div
+          v-if="activityStore.filterFields.has('isCommute') && !activityStore.useRoutes"
+          :class="[$style.noPointer, controlsStyle.label]"
+        >
+          <span>Commute</span>
+          <SegmentedControl
+            v-slot="{ option }"
+            v-model="activityStore.filterModel.isCommute"
+            :class="controlsStyle.segmentedControl"
+            :deselectValue="[undefined]"
+          >
+            <SegmentedControlItem :option="option(true)" title="Only commutes">
+              <UIIcon icon="work" inline />
+            </SegmentedControlItem>
+            <SegmentedControlItem :option="option(false)" title="Exclude commutes">
+              <UIIcon icon="work_off" inline />
+            </SegmentedControlItem>
+          </SegmentedControl>
+        </div>
+
+        <div :class="controlsStyle.buttons">
+          <em v-if="activityStore.filterFields.size === 0">All filters are hidden</em>
+          <UIButtonGroup v-else>
+            <UIButton icon="save" :disabled="isSaved" @click="saveFilter"> Save </UIButton>
+            <UIButton
+              :disabled="filterState === 'initial'"
+              :icon="filterState === 'canUndo' ? 'undo' : 'delete'"
+              @click="revertFilter"
+            >
+              <UIMultiText
+                :texts="{ clear: 'Clear', undo: 'Undo' }"
+                :selected="filterState === 'canUndo' ? 'undo' : 'clear'"
+              />
+            </UIButton>
+            <UIButton
+              v-if="!hideResetToSaved"
+              :disabled="canResetToSaved"
+              icon="settings_backup_restore"
+              @click="resetToSaved"
+            >
+              Reset
+            </UIButton>
+          </UIButtonGroup>
+        </div>
+      </div>
+      <FilterHelp v-model="showHelp" />
+    </template>
+  </UIVerticalTab>
+</template>
+
+<style lang="scss" module>
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.noPointer {
+  pointer-events: none;
+
+  > * {
+    pointer-events: initial;
+    margin-right: auto;
+  }
+}
+</style>
diff --git a/client/src/components/sidebar/SidebarForm.vue b/client/src/components/sidebar/SidebarForm.vue
index cd178e14..f02aaea2 100644
--- a/client/src/components/sidebar/SidebarForm.vue
+++ b/client/src/components/sidebar/SidebarForm.vue
@@ -2,8 +2,7 @@
 import { computed, ref, watch } from 'vue';
 
 import { useExpandableGroups } from '@/services/useExpandableGroups';
-import { GroupLevel, useActivityStore } from '@/stores/ActivityStore';
-import { useSportTypeStore } from '@/stores/SportTypeStore';
+import { useActivityStore } from '@/stores/ActivityStore';
 import { useUserStore } from '@/stores/UserStore';
 import { combineCallbacks } from '@/utils/functions';
 import { useResettingRef } from '@/utils/resetting-ref';
@@ -11,14 +10,19 @@ import { useResettingRef } from '@/utils/resetting-ref';
 import SegmentedControl from '../segmented-control/SegmentedControl.vue';
 import SegmentedControlItem from '../segmented-control/SegmentedControlItem.vue';
 import { TooltipError } from '../tooltip/TooltipError';
+import UIVerticalTabContainer from '../ui/tabs/UIVerticalTabContainer.vue';
 import UIButton from '../ui/UIButton.vue';
 import UIButtonGroup from '../ui/UIButtonGroup.vue';
-import UIDateInput from '../ui/UIDateInput.vue';
-import UIDropdown, { type DropdownOption } from '../ui/UIDropdown.vue';
 import UILabelledIcon from '../ui/UILabelledIcon.vue';
 import UIModal from '../ui/UIModal.vue';
 import UIMultiText from '../ui/UIMultiText.vue';
+import controlsStyle from './controls.module.scss';
 import LoadingStatus from './LoadingStatus.vue';
+import SidebarDateFilter from './SidebarDateFilter.vue';
+import SidebarDisplayOptions from './SidebarDisplayOptions.vue';
+import SidebarFilter from './SidebarFilter.vue';
+import SidebarGroupControl from './SidebarGroupControl.vue';
+import SidebarSelectionControls from './SidebarSelectionControls.vue';
 import UserLogin from './UserLogin.vue';
 import UserSettings from './UserSettings.vue';
 
@@ -35,17 +39,6 @@ const continueLogin = computed(() =>
 
 const settingsOpen = ref(false);
 
-const sportTypeStore = useSportTypeStore();
-
-const groupLevels: DropdownOption[] = [
-  { value: GroupLevel.OFF, label: 'None' },
-  { value: GroupLevel.WEEKLY_MO, label: 'Week (Mon–Sun)' },
-  { value: GroupLevel.WEEKLY_SA, label: 'Week (Sat–Fri)' },
-  { value: GroupLevel.WEEKLY_SU, label: 'Week (Sun–Sat)' },
-  { value: GroupLevel.MONTHLY, label: 'Month' },
-  { value: GroupLevel.YEARLY, label: 'Year' },
-];
-
 function onLogout(): void {
   document.cookie = `token=;expires=${new Date(0).toUTCString()}`;
   activityStore.discardCache(true, true);
@@ -104,27 +97,19 @@ watch([start, end, () => activityStore.useRoutes], () => {
 
 <template>
   <aside :class="$style.sidebarForm">
-    <div :class="$style.controlsGrid">
-      <div :class="$style.buttons">
+    <div :class="[controlsStyle.grid, controlsStyle.center]">
+      <div :class="controlsStyle.buttons">
         <SegmentedControl
           v-slot="{ option }"
           v-model="activityStore.useRoutes"
-          :class="$style.segmentedControl"
+          :class="controlsStyle.segmentedControl"
           :disabled="loading"
         >
           <SegmentedControlItem :option="option(false)"> Activities </SegmentedControlItem>
           <SegmentedControlItem :option="option(true)"> Routes </SegmentedControlItem>
         </SegmentedControl>
       </div>
-      <label>
-        <span>Start date</span>
-        <UIDateInput v-model="start" name="start" />
-      </label>
-      <label>
-        <span>End date</span>
-        <UIDateInput v-model="end" name="end" />
-      </label>
-      <div :class="$style.buttons">
+      <div :class="controlsStyle.buttons">
         <UIButtonGroup>
           <UIButton @click="loadButton">
             <UIMultiText
@@ -146,41 +131,21 @@ watch([start, end, () => activityStore.useRoutes], () => {
     </div>
     <UserLogin v-if="continueLogin" @login="continueLogin($event)" />
     <LoadingStatus v-else :useRoutes="activityStore.useRoutes" :error="activityStore.error" />
-    <div :class="[$style.controls, $style.row]">
-      <label :class="$style.expand">
-        <span>Sport type</span>
-        <UIDropdown
-          v-model="sportTypeStore.filter"
-          :options="sportTypeStore.dropdownOptions"
-          blankValue=""
-          blankLabel="All sports"
-        />
-      </label>
-      <label
-        :class="!activityStore.useRoutes && $style.hidden"
-        title="Only show starred routes (double-click for unstarred routes)"
-      >
-        <span>Starred</span>
-        <UIButton
-          :invertColor="activityStore.filterModel.starred === false"
-          :icon="activityStore.filterModel.starred === undefined ? 'star_border' : 'star'"
-          @click="
-            activityStore.filterModel.starred =
-              activityStore.filterModel.starred !== undefined ? undefined : true
-          "
-          @dbl-click="activityStore.filterModel.starred = false"
-        />
-      </label>
-    </div>
-    <div :class="[$style.controls, $style.row]">
-      <label>
-        <span>Group by</span>
-        <UIDropdown v-model="activityStore.groupLevel" :options="groupLevels" />
-      </label>
-    </div>
+    <UIVerticalTabContainer v-slot="{ makeTab }">
+      <SidebarDateFilter v-model:start="start" v-model:end="end" :tab="makeTab('dates')" />
+      <SidebarFilter :tab="makeTab('filter')" />
+      <SidebarDisplayOptions :tab="makeTab('display')" />
+      <SidebarGroupControl :tab="makeTab('group')" />
+      <SidebarSelectionControls :tab="makeTab('selection')" />
+    </UIVerticalTabContainer>
   </aside>
 
-  <UIModal v-if="userStore.user" v-model="settingsOpen" :class="$style.modal">
+  <UIModal
+    v-if="userStore.user"
+    v-model="settingsOpen"
+    :class="$style.modal"
+    heading="User settings"
+  >
     <UserSettings :user="userStore.user" @logout="onLogout" />
   </UIModal>
 </template>
@@ -192,72 +157,6 @@ watch([start, end, () => activityStore.useRoutes], () => {
   flex-direction: column;
   gap: 0.5em;
 
-  .buttons {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-items: center;
-  }
-
-  .segmentedControl:only-child {
-    flex-grow: 1;
-  }
-}
-
-.hidden {
-  visibility: hidden;
-}
-
-.controls,
-.controlsGrid {
-  > label {
-    > span {
-      min-height: 1.2em;
-      font-size: 0.9em;
-      font-weight: 600;
-      padding-inline: 0.5rem;
-      display: block;
-    }
-
-    &.expand {
-      flex: 1;
-    }
-  }
-}
-
-.controlsGrid {
-  display: grid;
-  grid-template-columns: max-content max-content;
-  justify-content: center;
-
-  > label {
-    grid-template-columns: subgrid;
-    display: grid;
-    grid-column: span 2;
-    align-items: center;
-  }
-
-  > .buttons {
-    grid-column: span 2;
-    justify-content: space-between;
-  }
-}
-
-.controls {
-  min-width: 0;
-  display: flex;
-  padding-top: 1.2em;
-  row-gap: 1.2em;
-  justify-content: space-evenly;
-
-  > label {
-    display: flex;
-    min-width: 0;
-    margin-top: -1.2em;
-    flex-direction: column;
-    align-items: start;
-  }
-
   .controlIconButton {
     margin: 8px;
   }
diff --git a/client/src/components/sidebar/SidebarGroup.vue b/client/src/components/sidebar/SidebarGroup.vue
index fe9ec767..3b361a67 100644
--- a/client/src/components/sidebar/SidebarGroup.vue
+++ b/client/src/components/sidebar/SidebarGroup.vue
@@ -29,6 +29,18 @@ const someSelected = computed(() =>
   group.items.some((item) => selectionStore.selected.has(item.id)),
 );
 
+const checkboxIcon = computed(() => {
+  if (!selectionStore.multiSelectionMode) {
+    return undefined;
+  } else if (allSelected.value) {
+    return 'check_circle_outline';
+  } else if (someSelected.value) {
+    return 'remove_circle_outline';
+  } else {
+    return 'radio_button_unchecked';
+  }
+});
+
 const groupRef = ref<HTMLDivElement>();
 const headerRef = ref<HTMLDivElement>();
 
@@ -75,6 +87,7 @@ function clickGroup(e: MouseEvent) {
       @click="clickGroup($event)"
       @dblclick="forceSelect()"
     >
+      <UIIcon v-if="checkboxIcon" :class="$style.checkbox" :icon="checkboxIcon" inline />
       <a @click.stop.prevent="toggleExpanded" @dblclick.stop
         ><UIIcon icon="keyboard_arrow_right" :rotation="isExpanded ? 90 : 0"
       /></a>
@@ -128,6 +141,11 @@ function clickGroup(e: MouseEvent) {
     display: flex;
     flex-direction: column;
   }
+
+  .checkbox {
+    font-size: 21px;
+    margin-inline-start: 4px;
+  }
 }
 
 .sidebarGroup:not(:first-child) {
diff --git a/client/src/components/sidebar/SidebarGroupControl.vue b/client/src/components/sidebar/SidebarGroupControl.vue
new file mode 100644
index 00000000..57ff2521
--- /dev/null
+++ b/client/src/components/sidebar/SidebarGroupControl.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { GroupLevel, useActivityStore } from '@/stores/ActivityStore';
+
+import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
+import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
+import UIDropdown from '../ui/UIDropdown.vue';
+import controlsStyle from './controls.module.scss';
+
+defineProps<{ tab: Tab<string> }>();
+
+const activityStore = useActivityStore();
+
+const groupLevels = [
+  { value: GroupLevel.OFF, label: 'None', summary: 'disabled' },
+  { value: GroupLevel.WEEKLY_MO, label: 'Week (Mon–Sun)', summary: 'by week (Mon–Sun)' },
+  { value: GroupLevel.WEEKLY_SA, label: 'Week (Sat–Fri)', summary: 'by week (Sat–Fri)' },
+  { value: GroupLevel.WEEKLY_SU, label: 'Week (Sun–Sat)', summary: 'by week (Sun–Sat)' },
+  { value: GroupLevel.MONTHLY, label: 'Month', summary: 'by month' },
+  { value: GroupLevel.YEARLY, label: 'Year', summary: 'by year' },
+];
+
+const summary = computed(
+  () =>
+    (groupLevels.find((level) => level.value === activityStore.groupLevel) ?? groupLevels[0])
+      .summary,
+);
+</script>
+
+<template>
+  <UIVerticalTab :tab icon="segment" :summary="summary" heading="Grouping">
+    <template #expanded>
+      <div :class="controlsStyle.grid">
+        <label>
+          <span>Group by</span>
+          <UIDropdown v-model="activityStore.groupLevel" :options="groupLevels" />
+        </label>
+      </div>
+    </template>
+  </UIVerticalTab>
+</template>
diff --git a/client/src/components/sidebar/SidebarItem.vue b/client/src/components/sidebar/SidebarItem.vue
index c5a866b0..2df7fc17 100644
--- a/client/src/components/sidebar/SidebarItem.vue
+++ b/client/src/components/sidebar/SidebarItem.vue
@@ -6,15 +6,20 @@ export const SELECTED_SIDEBAR_ITEM_SELECTOR = 'sidebar-item-selected';
 import { type MapItem } from '@strava-heatmapper/shared/interfaces';
 import { computed } from 'vue';
 
+import { useActivityStore } from '@/stores/ActivityStore';
+import { type FilterModel } from '@/types/FilterModel';
 import config from '@/utils/config';
 import { formatFullDateTime, formatSplitDate } from '@/utils/numberFormat';
 
 import StravaEmoji from '../strava-symbol/StravaEmoji.vue';
 import StravaIcon from '../strava-symbol/StravaIcon.vue';
+import UIIcon from '../ui/UIIcon.vue';
 import UISpinner from '../ui/UISpinner.vue';
 import SidebarItemLink from './SidebarItemLink.vue';
 import SidebarItemStats from './SidebarItemStats.vue';
 
+const activityStore = useActivityStore();
+
 // This conditional must be in the component rather than the template, so that tree-shaking works
 const StravaActivitySymbol = config.USE_STRAVA_ICONS ? StravaIcon : StravaEmoji;
 
@@ -22,10 +27,12 @@ const {
   item,
   selected = false,
   expanded = true,
+  showCheckbox = false,
 } = defineProps<{
   item: MapItem;
   selected?: boolean;
   expanded?: boolean;
+  showCheckbox?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -42,13 +49,45 @@ const fullDate = computed(() => formatFullDateTime(startDate.value));
 
 // Only show device if not a route and device is in the required attribution list
 const device = computed(() => {
-  if (item.route) return undefined;
-  if (config.ATTRIBUTION.some((brand) => item.device?.startsWith(brand))) {
+  if (item.route) {
+    return undefined;
+  } else if (activityStore.filterFields.has('device')) {
+    return item.device;
+  } else if (config.ATTRIBUTION.some((brand) => item.device?.startsWith(brand))) {
     return item.device;
   } else {
     return undefined;
   }
 });
+
+type TypedKeyOf<T extends object, V> = Exclude<
+  {
+    [K in keyof T]: T[K] extends V ? K : never;
+  }[keyof T],
+  undefined
+>;
+
+// Show an icon for boolean filter fields if the filter is enabled but not set
+function booleanIcon<T extends MapItem>(
+  item: T,
+  key: TypedKeyOf<FilterModel, boolean | undefined> & keyof T,
+  trueIcon: string | undefined,
+  falseIcon: string | undefined,
+): string | undefined {
+  const iconNeeded =
+    activityStore.filterFields.has(key) &&
+    item[key] !== undefined &&
+    activityStore.filterModel[key] === undefined;
+  if (!iconNeeded) return undefined;
+  return item[key] ? trueIcon : falseIcon;
+}
+
+const statsIcons = computed(() =>
+  [
+    !item.route && booleanIcon(item, 'isCommute', 'work', undefined),
+    booleanIcon(item, 'isPrivate', 'lock', undefined),
+  ].filter((icon): icon is string => !!icon),
+);
 </script>
 
 <template>
@@ -63,12 +102,19 @@ const device = computed(() => {
     @touchstart="emit('touchstart')"
     @dblclick="emit('dblclick', $event)"
   >
+    <UIIcon
+      v-if="showCheckbox"
+      :class="$style.checkbox"
+      :icon="selected ? 'check_circle_outline' : 'radio_button_unchecked'"
+      inline
+      large
+    />
     <StravaActivitySymbol v-if="expanded" :class="$style.stravaIcon" :sportType="item.type" />
     <div :class="$style.sidebarItemInfo">
       <div :class="$style.sidebarItemName" v-text="item.name" />
       <div v-if="device" :class="$style.sidebarItemDevice" v-text="device" />
       <div style="display: flex">
-        <SidebarItemStats v-if="expanded" :item />
+        <SidebarItemStats v-if="expanded" :item :icons="statsIcons" />
       </div>
     </div>
     <div v-if="!item.map" :class="$style.spinner">
@@ -83,7 +129,7 @@ const device = computed(() => {
 .sidebarItem {
   cursor: pointer;
   font-size: 14px;
-  padding-left: 8px;
+  padding-inline-start: 8px;
   display: flex;
   align-items: center;
   gap: 0 4px;
@@ -98,6 +144,14 @@ const device = computed(() => {
     background: var(--background-strong);
   }
 
+  &:has(.checkbox) {
+    padding-inline-start: 0;
+  }
+
+  .checkbox {
+    margin-inline: 4px;
+  }
+
   &.selected {
     background: var(--background-weak);
   }
diff --git a/client/src/components/sidebar/SidebarItemLink.vue b/client/src/components/sidebar/SidebarItemLink.vue
index 4b2827ae..e2e2fc4b 100644
--- a/client/src/components/sidebar/SidebarItemLink.vue
+++ b/client/src/components/sidebar/SidebarItemLink.vue
@@ -28,8 +28,9 @@ const useTextLink = !config.USE_STRAVA_ICONS;
     @click.stop
   >
     <template v-if="useTextLink">
-      <div>View on</div>
-      <div>Strava</div>
+      View on
+      <br />
+      Strava
     </template>
     <img v-else src="@/assets/strava.png" />
   </a>
diff --git a/client/src/components/sidebar/SidebarItemList.vue b/client/src/components/sidebar/SidebarItemList.vue
index 09358d2a..eca6cdd8 100644
--- a/client/src/components/sidebar/SidebarItemList.vue
+++ b/client/src/components/sidebar/SidebarItemList.vue
@@ -13,7 +13,6 @@ const selectionStore = useSelectionStore();
 const emit = defineEmits<{
   zoomToSelected: [];
   focusSidebar: [];
-  scrollToSelected: [];
 }>();
 
 function forceSelect(): void {
@@ -37,6 +36,7 @@ function click(id: string, e: MouseEvent): void {
       :key="item.id"
       :item
       :selected="selectionStore.selected.has(item.id)"
+      :showCheckbox="selectionStore.multiSelectionMode"
       @click="click(item.id, $event)"
       @dblclick="forceSelect()"
     />
diff --git a/client/src/components/sidebar/SidebarItemStats.vue b/client/src/components/sidebar/SidebarItemStats.vue
index cad50b8b..08f98632 100644
--- a/client/src/components/sidebar/SidebarItemStats.vue
+++ b/client/src/components/sidebar/SidebarItemStats.vue
@@ -14,6 +14,7 @@ import StatsList from './StatsList.vue';
 const { item, additionalStats } = defineProps<{
   item: MapItemStats;
   additionalStats?: (string | false | undefined | null)[];
+  icons?: string[];
 }>();
 
 const distanceString = computed(() => formatKilometers(item.distance));
@@ -52,5 +53,5 @@ const stats = computed(() => {
 </script>
 
 <template>
-  <StatsList :stats />
+  <StatsList :stats :icons />
 </template>
diff --git a/client/src/components/sidebar/SidebarSelectionControls.vue b/client/src/components/sidebar/SidebarSelectionControls.vue
new file mode 100644
index 00000000..0386ea91
--- /dev/null
+++ b/client/src/components/sidebar/SidebarSelectionControls.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useActivityStore } from '@/stores/ActivityStore';
+import { useSelectionStore } from '@/stores/SelectionStore';
+import {
+  countFocusedActivities,
+  countFocusedRoutes,
+  countSelectedActivities,
+  countSelectedRoutes,
+} from '@/utils/strings';
+
+import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
+import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
+import UIButton from '../ui/UIButton.vue';
+import UIButtonGroup from '../ui/UIButtonGroup.vue';
+import UICheckbox from '../ui/UICheckbox.vue';
+import SelectionHelp from './SelectionHelp.vue';
+
+defineProps<{ tab: Tab<string> }>();
+
+const activityStore = useActivityStore();
+const selectionStore = useSelectionStore();
+
+const summary = computed(() =>
+  [
+    selectionStore.lockedSelection?.size &&
+      (activityStore.useRoutes
+        ? countFocusedRoutes(selectionStore.lockedSelection.size)
+        : countFocusedActivities(selectionStore.lockedSelection.size)),
+    selectionStore.selected.size &&
+      (activityStore.useRoutes
+        ? countSelectedRoutes(selectionStore.selected.size)
+        : countSelectedActivities(selectionStore.selected.size)),
+  ].filter((string): string is string => !!string),
+);
+
+function reset() {
+  selectionStore.multiSelectionMode = false;
+  selectionStore.releaseSelection();
+  selectionStore.clearSelection();
+}
+
+const showHelp = ref(false);
+</script>
+
+<template>
+  <UIVerticalTab
+    :tab
+    icon="done_all"
+    heading="Selection"
+    :summary
+    summaryEmpty="None selected"
+    showSummaryWhenExpanded
+    :resetDisabled="
+      selectionStore.multiSelectionMode === false &&
+      !selectionStore.lockedSelection &&
+      !selectionStore.selected.size
+    "
+    @reset="reset"
+    @help="showHelp = true"
+  >
+    <template #expanded>
+      <UICheckbox v-model="selectionStore.multiSelectionMode">Multiple selection mode</UICheckbox>
+      <UIButtonGroup>
+        <UIButton
+          :disabled="selectionStore.selected.size === 0"
+          icon="delete"
+          @click="selectionStore.clearSelection"
+          >Clear</UIButton
+        >
+        <UIButton
+          :disabled="selectionStore.selected.size === 0"
+          icon="loupe"
+          @click="selectionStore.lockSelection"
+          >Focus</UIButton
+        >
+        <UIButton
+          v-if="selectionStore.lockedSelection"
+          icon="all_out"
+          @click="selectionStore.releaseSelection"
+          >Release</UIButton
+        >
+      </UIButtonGroup>
+    </template>
+  </UIVerticalTab>
+  <SelectionHelp v-model="showHelp" />
+</template>
diff --git a/client/src/components/sidebar/StatsList.vue b/client/src/components/sidebar/StatsList.vue
index 2d528825..26511700 100644
--- a/client/src/components/sidebar/StatsList.vue
+++ b/client/src/components/sidebar/StatsList.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-const { stats } = defineProps<{
+import UIIcon from '../ui/UIIcon.vue';
+
+const { stats, icons } = defineProps<{
   stats: (string | undefined)[];
+  icons?: string[];
 }>();
 
 const filteredStats = computed(() => stats.filter(Boolean));
@@ -10,9 +13,8 @@ const filteredStats = computed(() => stats.filter(Boolean));
 
 <template>
   <div :class="$style.statsList">
-    <template v-for="(stat, _i) of filteredStats" :key="_i">
-      <div :class="$style.stat">{{ stat }}</div>
-    </template>
+    <div v-for="(stat, i) of filteredStats" :key="i" :class="$style.stat">{{ stat }}</div>
+    <UIIcon v-for="(icon, i) of icons" :key="`icon-${i}`" :class="$style.statIcon" :icon inline />
   </div>
 </template>
 
@@ -30,7 +32,10 @@ const filteredStats = computed(() => stats.filter(Boolean));
     display: inline-block;
     padding-left: $separator-spacing;
     text-indent: -$separator-spacing;
-    margin-right: $separator-spacing;
+
+    &:not(:last-of-type) {
+      margin-right: $separator-spacing;
+    }
 
     &::before {
       display: inline-block;
@@ -42,5 +47,9 @@ const filteredStats = computed(() => stats.filter(Boolean));
       pointer-events: none;
     }
   }
+
+  .statIcon {
+    margin-left: 0.25em;
+  }
 }
 </style>
diff --git a/client/src/components/sidebar/UserSettings.vue b/client/src/components/sidebar/UserSettings.vue
index cfecbd96..449f40c7 100644
--- a/client/src/components/sidebar/UserSettings.vue
+++ b/client/src/components/sidebar/UserSettings.vue
@@ -51,8 +51,6 @@ const logout = async (global = false) => {
 };
 </script>
 <template>
-  <h2>User settings</h2>
-
   <div :class="$style.flexLine">
     <img :class="$style.profilePic" :srcset="imgSrcSet" :src="imgSrc" />
     <a :href="profileLink" :class="$style.userName" target="_blank">{{ fullName }}</a>
diff --git a/client/src/components/sidebar/controls.module.scss b/client/src/components/sidebar/controls.module.scss
new file mode 100644
index 00000000..90668dba
--- /dev/null
+++ b/client/src/components/sidebar/controls.module.scss
@@ -0,0 +1,67 @@
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.segmentedControl:only-child {
+  flex-grow: 1;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+
+  &.center {
+    justify-content: center;
+    grid-template-columns: max-content max-content;
+  }
+
+  > :is(label, .label) {
+    grid-template-columns: subgrid;
+    display: grid;
+    grid-column: span 2;
+    align-items: center;
+  }
+
+  > .buttons {
+    grid-column: span 2;
+    justify-content: space-between;
+  }
+}
+
+.row,
+.grid {
+  > :is(label, .label) > span {
+    min-height: 1.2em;
+    font-size: 0.9em;
+    font-weight: 600;
+    padding-inline: 0.5rem;
+    display: block;
+  }
+}
+
+.row {
+  min-width: 0;
+  display: flex;
+  padding-top: 1.2em;
+  row-gap: 1.2em;
+  justify-content: space-evenly;
+
+  > label {
+    display: flex;
+    min-width: 0;
+    margin-top: -1.2em;
+    flex-direction: column;
+    align-items: start;
+
+    &.expand {
+      flex: 1;
+    }
+  }
+}
+
+.hidden {
+  visibility: hidden;
+}
diff --git a/client/src/components/sidebar/help.module.scss b/client/src/components/sidebar/help.module.scss
new file mode 100644
index 00000000..adc27474
--- /dev/null
+++ b/client/src/components/sidebar/help.module.scss
@@ -0,0 +1,21 @@
+.helpModal {
+  width: min(35em, calc(100vw - 4rem));
+  max-height: 90vh;
+
+  dl {
+    > dt {
+      font-weight: 600;
+    }
+
+    > dd {
+      margin-left: 1em;
+      margin-block: 0.5em;
+    }
+  }
+
+  kbd {
+    font-family: inherit;
+    font-weight: bold;
+    white-space: nowrap;
+  }
+}
diff --git a/client/src/components/tooltip/ErrorTooltip.vue b/client/src/components/tooltip/ErrorTooltip.vue
index a63b7016..10b17255 100644
--- a/client/src/components/tooltip/ErrorTooltip.vue
+++ b/client/src/components/tooltip/ErrorTooltip.vue
@@ -54,8 +54,8 @@ function adjustMargins() {
 }
 
 watch(
-  () => errorMessage,
-  (errorMessage) => {
+  [() => errorMessage],
+  ([errorMessage]) => {
     if (errorMessage) {
       errorPosition.value = calculateTooltipPosition(errorMessage);
 
diff --git a/client/src/components/ui/UIButton.vue b/client/src/components/ui/UIButton.vue
index f0ed5158..6909a1e8 100644
--- a/client/src/components/ui/UIButton.vue
+++ b/client/src/components/ui/UIButton.vue
@@ -18,6 +18,8 @@ const {
   loadingText,
   invertColor = false,
   disabled = false,
+  ghost = false,
+  light = false,
   onClick,
   onDblClick,
   onRejection,
@@ -27,6 +29,8 @@ const {
   invertColor?: boolean;
   loadingText?: string;
   disabled?: boolean;
+  light?: boolean;
+  ghost?: boolean;
   onClick?: () => void | Promise<void>;
   onDblClick?: () => void | Promise<void>;
   onRejection?: (value: ButtonError) => string | void;
@@ -47,7 +51,7 @@ async function clickHandler(e: MouseEvent) {
   }
 
   runningClickHandler.value = true;
-  Promise.resolve(handler?.())
+  Promise.try(() => handler?.())
     .catch((error: unknown) => {
       if (onRejection) {
         onRejection({ error, showError });
@@ -65,7 +69,12 @@ async function clickHandler(e: MouseEvent) {
 <template>
   <button
     ref="buttonRef"
-    :class="[$style.button, invertColor && $style.invertColor]"
+    :class="[
+      $style.button,
+      invertColor && $style.invertColor,
+      ghost && $style.ghost,
+      light && !invertColor && $style.light,
+    ]"
     :disabled="loading || disabled"
     :loading
     @click="clickHandler"
@@ -84,23 +93,26 @@ async function clickHandler(e: MouseEvent) {
 button.button {
   display: grid;
   grid-template-areas: 'button';
-  align-items: center;
 
   margin: 0.5rem;
-  padding: 0.15rem 0.4rem;
-  border-radius: var(--border-radius);
+  padding: 0.15rem 0.15rem;
+
+  --button-border-radius-left: var(--border-radius);
+  --button-border-radius-right: var(--border-radius);
+
+  border-top-left-radius: var(--button-border-radius-left);
+  border-bottom-left-radius: var(--button-border-radius-left);
+  border-top-right-radius: var(--button-border-radius-right);
+  border-bottom-right-radius: var(--button-border-radius-right);
+
   border: 1px solid var(--color-weak);
-  background-color: var(--background-strong);
+  background-color: var(--background-mid);
   color: var(--color-full);
   max-width: max-content;
   min-width: min-content;
   min-height: 1.75rem;
   font-size: 0.9em;
 
-  &:hover:not(:disabled) {
-    background-color: var(--background-weak);
-  }
-
   &:disabled {
     color: var(--color-weak);
     border-color: var(--background-weak);
@@ -109,6 +121,20 @@ button.button {
   .buttonContents {
     grid-area: button;
     min-height: 1.2em;
+
+    border-top-left-radius: calc(var(--button-border-radius-left) - 0.15rem);
+    border-bottom-left-radius: calc(var(--button-border-radius-left) - 0.15rem);
+    border-top-right-radius: calc(var(--button-border-radius-right) - 0.15rem);
+    border-bottom-right-radius: calc(var(--button-border-radius-right) - 0.15rem);
+
+    padding: 0 0.25rem;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+  }
+
+  &:hover:not(:disabled) .buttonContents {
+    background-color: var(--background-strong);
   }
 
   &:has(.buttonSpinner) .buttonContents {
@@ -119,12 +145,24 @@ button.button {
     grid-area: button;
   }
 
+  &.light {
+    background-color: var(--background-strong);
+
+    &:hover:not(:disabled) {
+      background-color: var(--background-weak);
+
+      .buttonContents {
+        background-color: unset;
+      }
+    }
+  }
+
   &.invertColor {
     border-color: var(--color-full);
     background-color: var(--color-full);
     color: var(--background-strong);
 
-    &:hover:not(:disabled) {
+    &:hover:not(:disabled) .buttonContents {
       background-color: var(--color-full);
       color: var(--background-weak);
     }
@@ -134,5 +172,32 @@ button.button {
       border-color: var(--background-weak);
     }
   }
+
+  &.ghost {
+    border: none;
+    background: none;
+    color: var(--color-mid);
+    padding: 0;
+    margin: 0;
+    min-height: unset;
+    font-size: unset;
+
+    .buttonContents {
+      padding: 0;
+      min-height: unset;
+    }
+
+    &:hover:not(:disabled) {
+      color: var(--color-full);
+    }
+
+    &:hover:not(:disabled) .buttonContents {
+      background: none;
+    }
+
+    &:disabled {
+      opacity: 50%;
+    }
+  }
 }
 </style>
diff --git a/client/src/components/ui/UIButtonGroup.vue b/client/src/components/ui/UIButtonGroup.vue
index e9cbbe1d..25423fa8 100644
--- a/client/src/components/ui/UIButtonGroup.vue
+++ b/client/src/components/ui/UIButtonGroup.vue
@@ -10,25 +10,26 @@
 .buttonGroup {
   display: flex;
   margin: 0.5rem;
-  display: relative;
 
   > button {
     margin: 0;
 
-    display: relative;
+    position: relative;
 
-    &:focus {
+    &:not(:disabled) {
       z-index: 1;
+
+      &:focus {
+        z-index: 2;
+      }
     }
 
     &:not(:first-child) {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
+      --button-border-radius-left: 0;
       margin-left: -1px;
     }
     &:not(:last-child) {
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
+      --button-border-radius-right: 0;
     }
   }
 }
diff --git a/client/src/components/ui/UICheckbox.vue b/client/src/components/ui/UICheckbox.vue
new file mode 100644
index 00000000..8a606670
--- /dev/null
+++ b/client/src/components/ui/UICheckbox.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useMaterialIcons } from './material-icons';
+import UISpinner from './UISpinner.vue';
+
+const {
+  uncheckedIcon: rawUncheckedIcon = 'check_box_outline_blank',
+  checkedIcon: rawCheckedIcon = 'check_box',
+  iconScale = 1,
+  loading = false,
+  loadingText,
+  disabled = false,
+} = defineProps<{
+  uncheckedIcon?: string;
+  checkedIcon?: string;
+  iconScale?: number;
+  loading?: boolean;
+  loadingText?: string;
+  disabled?: boolean;
+}>();
+
+const isChecked = defineModel<boolean>({ default: false });
+
+const uncheckedIcon = computed(() => `'${rawUncheckedIcon}'`);
+const checkedIcon = computed(() => `'${rawCheckedIcon}'`);
+
+useMaterialIcons();
+</script>
+
+<template>
+  <label :class="[$style.uiCheckbox]">
+    <!-- TODO: loading indicator -->
+    <UISpinner v-if="loading" size="tiny">
+      {{ loadingText }}
+    </UISpinner>
+    <input
+      v-else
+      v-model="isChecked"
+      :class="$style.input"
+      :disabled="loading || disabled"
+      type="checkbox"
+    />
+    <div :class="[$style.label, disabled && $style.disabled]">
+      <slot />
+    </div>
+  </label>
+</template>
+
+<style module lang="scss">
+button.button {
+  display: grid;
+  grid-template-areas: 'button';
+  align-items: center;
+
+  margin: 0.5rem;
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-weak);
+  background-color: var(--background-strong);
+  color: var(--color-full);
+  max-width: max-content;
+  min-width: min-content;
+  min-height: 1.75rem;
+  font-size: 0.9em;
+
+  &:hover:not(:disabled) {
+    background-color: var(--background-weak);
+  }
+
+  &:disabled {
+    color: var(--color-weak);
+    border-color: var(--background-weak);
+  }
+
+  &:has(.buttonSpinner) .buttonContents {
+    visibility: hidden;
+  }
+}
+
+.uiCheckbox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline: 0.5rem;
+
+  > .input {
+    appearance: none;
+    display: flex;
+    align-items: center;
+
+    &::before {
+      font-family: 'Material Icons';
+      font-weight: normal;
+      font-style: normal;
+      font-size: calc(v-bind(iconScale) * 1.25rem);
+      width: 1.25rem;
+      overflow: hidden;
+      line-height: 1;
+      letter-spacing: normal;
+      text-transform: none;
+      display: inline-block;
+      white-space: nowrap;
+      word-wrap: normal;
+      direction: ltr;
+      font-feature-settings: 'liga';
+      content: v-bind(uncheckedIcon);
+      color: var(--color-weak);
+      text-align: center;
+    }
+
+    &:hover::before {
+      color: var(--color-mid);
+    }
+
+    &:checked::before {
+      content: v-bind(checkedIcon);
+    }
+  }
+}
+
+.label {
+  min-height: 1.2em;
+  font-size: 0.9em;
+  font-weight: 600;
+
+  &.disabled {
+    color: var(--color-weak);
+  }
+}
+</style>
diff --git a/client/src/components/ui/UIDropdown.vue b/client/src/components/ui/UIDropdown.vue
index 2471ec2d..3fc6efd2 100644
--- a/client/src/components/ui/UIDropdown.vue
+++ b/client/src/components/ui/UIDropdown.vue
@@ -21,7 +21,16 @@ const {
   clearButton?: boolean;
 }>();
 
-const model = defineModel<string | undefined>({ default: undefined });
+const rawModel = defineModel<string | undefined>({ default: undefined });
+
+const model = computed<string | undefined>({
+  get() {
+    return rawModel.value ?? blankValue;
+  },
+  set(value: string | undefined) {
+    rawModel.value = value;
+  },
+});
 
 const blankLabels = computed<Partial<DropdownOption>[]>(() => {
   if (blankLabel) return [{ label: blankLabel, value: blankValue }];
diff --git a/client/src/components/ui/UIIcon.vue b/client/src/components/ui/UIIcon.vue
index 35157d47..d6182258 100644
--- a/client/src/components/ui/UIIcon.vue
+++ b/client/src/components/ui/UIIcon.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHead } from '@unhead/vue';
+import { useMaterialIcons } from './material-icons';
 
 const {
   icon,
@@ -16,14 +16,7 @@ const {
   rotation?: number;
 }>();
 
-useHead({
-  link: [
-    {
-      href: 'https://fonts.googleapis.com/icon?family=Material+Icons',
-      rel: 'stylesheet',
-    },
-  ],
-});
+useMaterialIcons();
 </script>
 
 <template>
diff --git a/client/src/components/ui/UIModal.vue b/client/src/components/ui/UIModal.vue
index dddaa3fb..3dacbcd3 100644
--- a/client/src/components/ui/UIModal.vue
+++ b/client/src/components/ui/UIModal.vue
@@ -5,6 +5,8 @@ import UIIcon from './UIIcon.vue';
 
 const open = defineModel<boolean>({ default: false });
 
+defineProps<{ heading?: string }>();
+
 const modal = ref<HTMLDialogElement>();
 
 const mountedPromise = new Promise<void>((resolve) => {
@@ -28,6 +30,9 @@ watch(
 <template>
   <dialog ref="modal" :class="$style.uiModal" @close="open = false" @click="open = false">
     <a :class="$style.closeButton" @click.stop.prevent="open = false"><UIIcon icon="close" /></a>
+    <h2 :class="$style.heading" @click.stop>
+      <slot v-if="open" name="heading">{{ heading }}</slot>
+    </h2>
     <div :class="$style.dialogContents" @click.stop>
       <slot v-if="open" />
     </div>
@@ -40,6 +45,11 @@ dialog.uiModal {
   padding: 0;
   border-radius: 1rem;
   position: relative;
+  flex-direction: column;
+
+  &:open {
+    display: flex;
+  }
 
   background-color: var(--background-full);
   color: var(--color-full);
@@ -62,9 +72,21 @@ dialog.uiModal {
     }
   }
 
+  .heading {
+    margin: 0;
+    padding-top: 1rem;
+    padding-left: 1rem;
+    padding-right: 1.5rem;
+    padding-bottom: 0;
+  }
+
   .dialogContents {
-    margin-block: 1em;
-    padding-inline: 1em;
+    padding: 1em;
+    overflow-block: auto;
+
+    :first-child {
+      margin-top: 0;
+    }
   }
 }
 </style>
diff --git a/client/src/components/ui/UIRange.vue b/client/src/components/ui/UIRange.vue
new file mode 100644
index 00000000..ad48b7a7
--- /dev/null
+++ b/client/src/components/ui/UIRange.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { type RangeFilter } from '@/types/FilterModel';
+
+const model = defineModel<RangeFilter>();
+
+const { scale = 1 } = defineProps<{
+  step?: number;
+  min?: number;
+  max?: number;
+  scale?: number;
+  suffix: string;
+}>();
+
+const input = ref<HTMLInputElement>();
+
+function normaliseInput(value: string | number | undefined): number | undefined {
+  if (typeof value === 'string' && !value.trim()) return undefined; // blank string => undefined
+
+  const number = Number(value);
+
+  return isNaN(number) ? undefined : number / scale;
+}
+
+function getWithScale(value: number | undefined) {
+  if (value === undefined) return undefined;
+  return value * scale;
+}
+
+function setModel(min: number | undefined, max: number | undefined) {
+  if (min !== undefined || max !== undefined) {
+    model.value = { min, max };
+  } else {
+    model.value = undefined;
+  }
+}
+
+const minModel = computed({
+  get: () => getWithScale(model.value?.min),
+  set: (value: string | number | undefined) => setModel(normaliseInput(value), model.value?.max),
+});
+
+const maxModel = computed({
+  get: () => getWithScale(model.value?.max),
+  set: (value: string | number | undefined) => setModel(model.value?.min, normaliseInput(value)),
+});
+</script>
+
+<!-- From https://acdcjunior.github.io/how-bind-date-object-to-input-date-vue.js-v-model.html -->
+<template>
+  <div :class="$style.inputContainer">
+    <label>
+      <span>min</span>
+      <input v-model="minModel" type="number" autocomplete="off" :min :max :step />
+      <span>{{ suffix }}</span>
+    </label>
+
+    <label>
+      <span>max</span>
+      <input v-model="maxModel" type="number" autocomplete="off" :min :max :step />
+      <span>{{ suffix }}</span>
+    </label>
+  </div>
+</template>
+
+<style module lang="scss">
+.inputContainer {
+  display: grid;
+  grid-template-columns: min-content auto min-content;
+  margin: 0.5rem;
+
+  border-radius: var(--border-radius);
+  background-color: var(--background-strong);
+
+  min-width: 3em;
+  min-height: 1.75rem;
+  box-sizing: border-box;
+
+  label {
+    display: grid;
+    grid-column: span 3;
+    grid-template-columns: subgrid;
+    border: 1px solid var(--color-weak);
+    padding-inline: 0.25rem;
+
+    &:not(:first-child) {
+      margin-top: -1px;
+    }
+
+    span {
+      align-self: center;
+      font-size: 0.9em;
+      margin-inline: 0.25rem;
+    }
+  }
+
+  label:first-child {
+    border-top-left-radius: calc(var(--border-radius));
+    border-top-right-radius: calc(var(--border-radius));
+  }
+
+  label:last-child {
+    border-bottom-left-radius: calc(var(--border-radius));
+    border-bottom-right-radius: calc(var(--border-radius));
+  }
+
+  input {
+    background-color: var(--background-full);
+    border: none;
+    min-width: 1em;
+    padding: 0.15rem 0.4rem;
+    color: var(--color-full);
+    font-size: 0.9em;
+
+    appearance: none;
+    -moz-appearance: textfield;
+
+    // Hack to prevent zooming on iOS when entering dropdown
+    @media (hover: none) {
+      font-size: 18px;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &:focus {
+      z-index: 1;
+    }
+  }
+
+  .icon {
+    margin-right: 4px;
+  }
+}
+</style>
diff --git a/client/src/components/ui/UITextField.vue b/client/src/components/ui/UITextField.vue
new file mode 100644
index 00000000..28668223
--- /dev/null
+++ b/client/src/components/ui/UITextField.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, type InputTypeHTMLAttribute } from 'vue';
+
+const {
+  name,
+  pickList,
+  pickListId: pickListIdProp,
+} = defineProps<{
+  name?: string;
+
+  pickList?: string[] | ((model: string) => string[]);
+  pickListId?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  type?: InputTypeHTMLAttribute;
+}>();
+
+const [model, modifiers] = defineModel<string, 'trim' | 'lazy'>({ default: undefined });
+
+function updateInput(value: string) {
+  if (modifiers.trim) {
+    value = value.trim();
+  }
+  model.value = value;
+}
+
+function onInput(e: Event) {
+  if (modifiers.lazy) {
+    const inputEvent = e as InputEvent;
+    if (inputEvent.inputType && inputEvent.inputType !== 'insertReplacementText') {
+      // Ignore input events except for those from pick list selection
+      return;
+    }
+  }
+  let value = (e.target as HTMLInputElement).value;
+  updateInput(value);
+}
+
+function onChange(e: Event) {
+  if (!modifiers.lazy) {
+    return;
+  }
+  let value = (e.target as HTMLInputElement).value;
+  updateInput(value);
+}
+
+function onBlur(e: Event) {
+  if (!modifiers.lazy) {
+    return;
+  }
+  let value = (e.target as HTMLInputElement).value;
+  updateInput(value);
+}
+
+const pickListValues = computed(() =>
+  typeof pickList === 'function' ? pickList(model.value) : pickList,
+);
+
+const uid = getCurrentInstance()?.uid;
+
+const pickListId = computed(() =>
+  pickList ? (pickListIdProp ?? `ui-text-field-pick-list-${uid}`) : undefined,
+);
+</script>
+
+<!-- From https://acdcjunior.github.io/how-bind-date-object-to-input-date-vue.js-v-model.html -->
+<template>
+  <div :class="$style.textField">
+    <input
+      ref="input"
+      :value="model"
+      autocomplete="off"
+      :name
+      :list="pickListId"
+      :placeholder
+      :disabled
+      :type
+      @input="onInput"
+      @change="onChange"
+      @blur="onBlur"
+    />
+    <datalist v-if="pickList" :id="pickListId">
+      <option v-for="option in pickListValues" :key="option" :value="option" />
+    </datalist>
+  </div>
+</template>
+
+<style module lang="scss">
+.textField {
+  display: flex;
+  margin: 0.5rem;
+
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-weak);
+  background-color: var(--background-full);
+
+  min-width: 3em;
+  min-height: 1.75rem;
+  box-sizing: border-box;
+
+  input {
+    flex: 1;
+    background-color: inherit;
+    border: none;
+    min-width: 8rem;
+    margin: 0.15rem 0.4rem;
+    color: var(--color-full);
+    appearance: none;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+</style>
diff --git a/client/src/components/ui/UIUnbrokenList.vue b/client/src/components/ui/UIUnbrokenList.vue
new file mode 100644
index 00000000..91c4c3b4
--- /dev/null
+++ b/client/src/components/ui/UIUnbrokenList.vue
@@ -0,0 +1,25 @@
+<!--
+  A simple component to render a list of items without breaking individual items onto new lines.
+
+  The default slot is used to provide a fallback when there are no items to show.
+-->
+<script setup lang="ts">
+const { items, empty } = defineProps<{ items: string[] | undefined; empty?: string }>();
+</script>
+
+<template>
+  <span
+    ><template v-if="items?.length">
+      <template v-for="(item, i) of items" :key="i"
+        ><span :class="$style.summarySpan">{{ item }}</span
+        ><template v-if="i + 1 < items.length">, </template></template
+      ></template
+    ><slot v-else>{{ empty }}</slot></span
+  >
+</template>
+
+<style lang="scss" module>
+.summarySpan {
+  white-space: nowrap;
+}
+</style>
diff --git a/client/src/components/ui/material-icons.ts b/client/src/components/ui/material-icons.ts
new file mode 100644
index 00000000..69ae7333
--- /dev/null
+++ b/client/src/components/ui/material-icons.ts
@@ -0,0 +1,12 @@
+import { useHead } from '@unhead/vue';
+
+export function useMaterialIcons() {
+  useHead({
+    link: [
+      {
+        href: 'https://fonts.googleapis.com/icon?family=Material+Icons&display=block',
+        rel: 'stylesheet',
+      },
+    ],
+  });
+}
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
new file mode 100644
index 00000000..10ab4428
--- /dev/null
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts" generic="T extends string">
+import { computed } from 'vue';
+
+import UIButton from '../UIButton.vue';
+import UIIcon from '../UIIcon.vue';
+import UIUnbrokenList from '../UIUnbrokenList.vue';
+import style from './tab.module.scss';
+import { type Tab } from './UIVerticalTabContainer.vue';
+
+const {
+  tab,
+  summary: rawSummary,
+  summaryEmpty,
+} = defineProps<{
+  icon?: string;
+  tab: Tab<T>;
+  expandedContentClass?: unknown;
+  heading?: string;
+  summary?: string | string[];
+  summaryEmpty?: string;
+  resetDisabled?: boolean;
+  showSummaryWhenExpanded?: boolean;
+  onHelp?: () => void;
+  onReset?: () => void;
+}>();
+
+defineSlots<{
+  icon(): unknown;
+  default(props: { isOpen: boolean; toggle(): void; select(): void }): unknown;
+  summary(props: { select?: () => void }): unknown;
+  expanded(props: { toggle(): void }): unknown;
+}>();
+
+function preventIfSelected(event: MouseEvent) {
+  if (window.getSelection()?.type === 'Range') {
+    event.preventDefault();
+  }
+}
+
+function onToggle(event: ToggleEvent) {
+  tab.setOpen(event.newState === 'open');
+}
+
+const summary = computed(() =>
+  typeof rawSummary === 'string'
+    ? { items: [], fallback: rawSummary }
+    : { items: rawSummary, fallback: summaryEmpty },
+);
+</script>
+
+<template>
+  <div :class="[style.uiVerticalTab, tab.isOpen && style.selected]">
+    <div :class="style.tab">
+      <button :class="style.button" :title="heading" @click="tab.toggle()">
+        <div :class="style.buttonContent">
+          <slot name="icon"><UIIcon :icon inline /></slot>
+        </div>
+      </button>
+    </div>
+
+    <details :class="[style.content]" :open="tab.isOpen" @toggle="onToggle">
+      <summary :class="style.summaryRow" @click="preventIfSelected">
+        <slot :isOpen="tab.isOpen" :toggle="tab.toggle" :select="tab.select">
+          <UIButton
+            v-if="onHelp && tab.isOpen"
+            :class="[style.topRightButton, style.helpButton]"
+            ghost
+            icon="help"
+            @click="onHelp()"
+          />
+          <UIButton
+            v-if="onReset && tab.isOpen"
+            :disabled="resetDisabled"
+            :class="style.topRightButton"
+            ghost
+            icon="settings_backup_restore"
+            @click="onReset()"
+          />
+          <span v-if="heading" :class="style.heading">{{ heading }}</span>
+          {{ ' ' }}
+          <span v-if="!tab.isOpen" :class="style.summary">
+            <slot name="summary" :select="tab.select">
+              <UIUnbrokenList :items="summary.items">{{ summary.fallback }}</UIUnbrokenList>
+            </slot>
+          </span>
+        </slot>
+      </summary>
+      <div :class="expandedContentClass">
+        <span v-if="showSummaryWhenExpanded" :class="style.summary">
+          <slot name="summary">
+            <UIUnbrokenList :items="summary.items">{{ summary.fallback }}</UIUnbrokenList>
+          </slot>
+        </span>
+        <slot name="expanded" :toggle="tab.toggle" />
+      </div>
+    </details>
+  </div>
+</template>
diff --git a/client/src/components/ui/tabs/UIVerticalTabContainer.vue b/client/src/components/ui/tabs/UIVerticalTabContainer.vue
new file mode 100644
index 00000000..7429be96
--- /dev/null
+++ b/client/src/components/ui/tabs/UIVerticalTabContainer.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+import style from './tab.module.scss';
+
+export interface Tab<T extends string> {
+  readonly id: T;
+  readonly isOpen: boolean;
+  setOpen(this: void, isOpen: boolean): void;
+  select(this: void): void;
+  toggle(this: void): void;
+}
+</script>
+
+<script setup lang="ts" generic="T extends string">
+const selected = defineModel<T>();
+
+class TabImpl implements Tab<T> {
+  constructor(readonly id: T) {}
+
+  get isOpen() {
+    return selected.value === this.id;
+  }
+
+  readonly setOpen = (value: boolean) => {
+    if (value) {
+      selected.value = this.id;
+    } else if (this.isOpen) {
+      selected.value = undefined;
+    }
+  };
+
+  readonly select = () => {
+    selected.value = this.id;
+  };
+
+  readonly toggle = () => {
+    this.setOpen(!this.isOpen);
+  };
+}
+
+const makeTab = (id: T) => new TabImpl(id);
+</script>
+
+<template>
+  <div :class="style.filterGrid">
+    <slot :selected="selected" :makeTab="makeTab" />
+  </div>
+</template>
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
new file mode 100644
index 00000000..9a245581
--- /dev/null
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -0,0 +1,87 @@
+.filterGrid {
+  display: grid;
+  grid-template-columns: [tab] max-content [content] 1fr;
+}
+
+.uiVerticalTab {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: span 2;
+
+  .topRightButton {
+    float: inline-end;
+    margin-inline-start: 0.25rem !important;
+    cursor: pointer;
+  }
+
+  .helpButton {
+    cursor: help;
+  }
+}
+
+.tab {
+  grid-column: tab;
+  border-right: 1px solid var(--color-weak);
+  color: var(--color-weak);
+  display: flex;
+  flex-direction: column;
+
+  .button {
+    all: unset;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+    .buttonContent {
+      padding-block: 0.125rem;
+      display: flex;
+      align-items: center;
+    }
+
+    &:focus-visible {
+      color: AccentColor;
+    }
+  }
+}
+
+.uiVerticalTab.selected .tab {
+  color: var(--color-full);
+
+  .buttonContent {
+    margin: -1px;
+    border: 1px solid var(--color-weak);
+    border-right: none;
+    padding-right: 1px;
+    background: var(--background-full);
+  }
+
+  &:not(:first-child) .content {
+    border-top: 1px solid var(--color-weak);
+  }
+
+  &:not(:last-child) .content {
+    border-bottom: 1px solid var(--color-weak);
+  }
+}
+
+.content {
+  grid-column: content;
+  padding-left: 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.heading {
+  all: unset;
+  font-weight: bold;
+  cursor: default;
+}
+
+.summary {
+  font-size: 0.9em;
+  font-style: italic;
+}
+
+.summaryRow {
+  list-style: none;
+}
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index a8190211..05f4141a 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -13,11 +13,11 @@ import {
 } from '@strava-heatmapper/shared/interfaces';
 import { type SportTypesAndGroups } from '@strava-heatmapper/shared/interfaces/SportType';
 import { defineStore } from 'pinia';
-import { computed, reactive, type Ref, ref, shallowRef, toRef } from 'vue';
+import { computed, reactive, type Ref, ref, shallowRef, toRef, watch } from 'vue';
 
 import Socket from '@/socket';
+import { type FilterField, type FilterModel, parseDeviceFilter } from '@/types/FilterModel';
 import config from '@/utils/config';
-import { groupMapItems } from '@/utils/groupMapItems';
 import {
   appendCachedActivities,
   appendCachedRoutes,
@@ -27,8 +27,11 @@ import {
   getCachedGear,
   getCachedRoutes,
   getStoreMeta,
+  loadFilterFields,
+  loadFilterModel,
   resetStore,
   saveCachedGear,
+  saveFilterFields,
 } from '@/utils/storage';
 
 import { useContinueLoginStore } from './ContinueLoginStore';
@@ -40,14 +43,10 @@ export interface LoadingStats {
   inCache: boolean;
 }
 
-export interface FilterModel {
-  sportType?: string;
-
-  /** Set to true to only show starred routes, or false to only show unfiltered routes */
-  starred?: boolean;
+export interface DisplayOptions {
+  showActivities: boolean;
 }
 
-export type MapItemTypes = Partial<Record<MapItemType, boolean>>;
 export enum GroupLevel {
   OFF = '',
   WEEKLY_MO = 'WEEKLY_MO',
@@ -57,6 +56,8 @@ export enum GroupLevel {
   YEARLY = 'YEARLY',
 }
 
+export type MapItemTypes = Partial<Record<MapItemType, boolean>>;
+
 export interface MapItemGroup {
   items: MapItem[];
   stats: CombinedMapItemStats;
@@ -87,9 +88,14 @@ export const useActivityStore = defineStore('activity', () => {
   const routeStats = ref<LoadingStats>({ inCache: false });
   const activityStats = ref<LoadingStats>({ inCache: true });
 
-  const filterModel: FilterModel = reactive({
-    sportType: '',
-    starred: undefined,
+  const filterModel: FilterModel = reactive(loadFilterModel() ?? {});
+  const filterFields: Set<FilterField> = reactive(
+    loadFilterFields() ?? new Set(['sportType', 'starred']),
+  );
+  watch(filterFields, saveFilterFields);
+
+  const displayOptions: DisplayOptions = reactive({
+    showActivities: false,
   });
 
   const error = ref<string>();
@@ -100,6 +106,16 @@ export const useActivityStore = defineStore('activity', () => {
     useRoutes.value ? allRoutes.value : allActivities.value,
   );
 
+  const devices = computed(() =>
+    Array.from(
+      new Set(
+        allActivities.value
+          .map((activity) => activity.device)
+          .filter((device): device is string => !!device),
+      ),
+    ).sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' })),
+  );
+
   const availableSports = computed<SportTypesAndGroups | undefined>(() => {
     if (allMapItems.value.length === 0) return undefined;
     const presentSportTypes = [...new Set(allMapItems.value.map((item) => item.type))];
@@ -114,24 +130,73 @@ export const useActivityStore = defineStore('activity', () => {
 
   const stats = computed(() => (useRoutes.value ? routeStats.value : activityStats.value));
 
-  const visibleMapItems = computed<readonly MapItem[]>(() => {
+  const parsedDeviceFilter = computed(() => parseDeviceFilter(filterModel.device));
+
+  const mapItemFilters = computed<((value: MapItem) => boolean)[]>(() => {
     const sportType = filterModel.sportType;
-    const filters: ((value: MapItem) => boolean)[] = [
-      sportType && ((item: MapItem) => doesSportTypeMatch(sportType, item.type)),
-
-      filterModel.starred !== undefined &&
-        ((item: MapItem) => !item.route || item.starred === filterModel.starred),
-    ]
-      // Remove falsy filters
-      .filter((f): f is (value: MapItem) => boolean => !!f);
-
-    return filters.length
-      ? allMapItems.value.filter((item) => filters.every((filter) => filter(item)))
-      : allMapItems.value;
+
+    return (
+      [
+        filterFields.has('sportType') &&
+          sportType &&
+          ((item: MapItem) => doesSportTypeMatch(sportType, item.type)),
+
+        filterFields.has('starred') &&
+          filterModel.starred !== undefined &&
+          ((item: MapItem) => !item.route || item.starred === filterModel.starred),
+
+        filterFields.has('isCommute') &&
+          filterModel.isCommute !== undefined &&
+          ((item: MapItem) => item.route || item.isCommute === filterModel.isCommute),
+
+        filterFields.has('isPrivate') &&
+          filterModel.isPrivate !== undefined &&
+          ((item: MapItem) => item.isPrivate === filterModel.isPrivate),
+
+        filterFields.has('distance') &&
+          filterModel.distance?.min !== undefined &&
+          ((item: MapItem) => item.distance >= (filterModel.distance?.min ?? -Infinity)),
+        filterFields.has('distance') &&
+          filterModel.distance?.max !== undefined &&
+          ((item: MapItem) => item.distance <= (filterModel.distance?.max ?? Infinity)),
+
+        filterFields.has('elevation') &&
+          filterModel.elevation?.min !== undefined &&
+          ((item: MapItem) =>
+            item.elevation?.gain &&
+            item.elevation.gain >= (filterModel.elevation?.min ?? -Infinity)),
+        filterFields.has('elevation') &&
+          filterModel.elevation?.max !== undefined &&
+          ((item: MapItem) =>
+            item.elevation?.gain &&
+            item.elevation.gain <= (filterModel.elevation?.max ?? Infinity)),
+
+        filterFields.has('gear') &&
+          filterModel.gear &&
+          ((item: MapItem) => item.route || item.gear === filterModel.gear),
+
+        filterFields.has('device') &&
+          parsedDeviceFilter.value.enabled &&
+          ((item: MapItem) =>
+            item.route ||
+            (parsedDeviceFilter.value.exact
+              ? item.device?.toLowerCase() === parsedDeviceFilter.value.name
+              : item.device?.toLowerCase().includes(parsedDeviceFilter.value.name))),
+      ]
+        // Remove falsy filters
+        .filter((f): f is (value: MapItem) => boolean => !!f)
+    );
   });
 
-  const groupedMapItems = computed<readonly MapItemGroup[]>(() =>
-    groupMapItems(visibleMapItems.value, groupLevel.value),
+  const filterMapItems = <T extends MapItem>(mapItems: readonly T[]): readonly T[] =>
+    mapItemFilters.value.length
+      ? mapItems.filter((item) => mapItemFilters.value.every((filter) => filter(item)))
+      : mapItems;
+
+  const visibleMapItems = computed<readonly MapItem[]>(() => filterMapItems(allMapItems.value));
+
+  const backgroundMapItems = computed(() =>
+    useRoutes.value && displayOptions.showActivities ? filterMapItems(allActivities.value) : [],
   );
 
   /** A map of all gear, where null represents gear that is not yet fetched */
@@ -154,7 +219,6 @@ export const useActivityStore = defineStore('activity', () => {
     );
   }
 
-  // TODO: keep alive. Verify that every gear request resolves
   async function requestGear(ids: (string | undefined)[], socket?: Socket) {
     const validIds = ids.filter((id?: string): id is string => !!id);
 
@@ -166,7 +230,10 @@ export const useActivityStore = defineStore('activity', () => {
           gear: gearId,
         });
       } else {
-        gear.set(gearId, (await getCachedGear(gearId)) ?? null);
+        const cachedGear = await getCachedGear(gearId);
+        if (cachedGear) {
+          gear.set(gearId, cachedGear);
+        }
       }
     }
   }
@@ -314,7 +381,8 @@ export const useActivityStore = defineStore('activity', () => {
       const finished =
         !continueLoginStore.continueLogin &&
         (!activities || activityStats.value.finding?.finished === true) &&
-        (!routes || routeStats.value.finding?.finished === true);
+        (!routes || routeStats.value.finding?.finished === true) &&
+        Iterator.from(gear.values()).every(Boolean);
       if (finished) {
         socket?.close();
       }
@@ -395,6 +463,7 @@ export const useActivityStore = defineStore('activity', () => {
     if (store.version !== serverVersion || store.user !== user) {
       allActivities.value = [];
       allRoutes.value = [];
+      gear.clear();
       await resetStore(serverVersion, user);
     }
 
@@ -428,13 +497,16 @@ export const useActivityStore = defineStore('activity', () => {
     routeStats,
     activityStats,
     filterModel,
+    filterFields,
+    displayOptions,
     useRoutes,
     groupLevel,
     error,
     gear,
+    devices,
 
     mapItems: visibleMapItems,
-    groupedMapItems,
+    backgroundMapItems,
     availableSports,
 
     cancelLoading,
diff --git a/client/src/stores/SelectionStore.ts b/client/src/stores/SelectionStore.ts
index 77dad70b..43453f7e 100644
--- a/client/src/stores/SelectionStore.ts
+++ b/client/src/stores/SelectionStore.ts
@@ -1,19 +1,54 @@
 import { defineStore } from 'pinia';
 import { computed, reactive, ref } from 'vue';
 
-import { useActivityStore } from './ActivityStore';
+import { groupMapItems } from '@/utils/groupMapItems';
 
-export type SelectionUpdateSource = 'map' | 'list';
+import { type MapItemGroup, useActivityStore } from './ActivityStore';
+
+export type SelectionUpdateSource = 'map' | 'list' | 'options';
 
 export const useSelectionStore = defineStore('selection', () => {
   const activityStore = useActivityStore();
 
+  const multiSelectionMode = ref(false);
+
   const selected = reactive<Set<string>>(new Set());
 
-  const selectedItems = computed(() =>
-    activityStore.mapItems.filter((item) => selected.has(item.id)),
+  // The locked selection is kept separate for routes and non-routes, to allow customisation of the ghost mode
+  const lockedSelections = reactive<Map<typeof activityStore.useRoutes, ReadonlySet<string>>>(
+    new Map(),
+  );
+  const lockedSelection = computed({
+    get() {
+      return lockedSelections.get(activityStore.useRoutes);
+    },
+    set(value: ReadonlySet<string> | undefined) {
+      if (value) lockedSelections.set(activityStore.useRoutes, value);
+      else lockedSelections.delete(activityStore.useRoutes);
+    },
+  });
+
+  const visibleItems = computed(() => {
+    const selection = lockedSelection.value;
+    return selection
+      ? activityStore.mapItems.filter((item) => selection.has(item.id))
+      : activityStore.mapItems;
+  });
+
+  const visibleGroupedItems = computed<readonly MapItemGroup[]>(() =>
+    groupMapItems(visibleItems.value, activityStore.groupLevel),
   );
 
+  const visibleBackgroundItems = computed(() => {
+    if (!activityStore.backgroundMapItems.length) return [];
+    const selection = lockedSelections.get(false);
+    return selection
+      ? activityStore.backgroundMapItems.filter((item) => selection.has(item.id))
+      : activityStore.backgroundMapItems;
+  });
+
+  const selectedItems = computed(() => visibleItems.value.filter((item) => selected.has(item.id)));
+
   const updateSource = ref<SelectionUpdateSource>();
 
   let base: ReadonlySet<string> = new Set();
@@ -25,10 +60,10 @@ export const useSelectionStore = defineStore('selection', () => {
 
     const limits = new Set<string>([...base, ...to]);
 
-    const start = activityStore.mapItems.findIndex(({ id }) => limits.has(id));
+    const start = visibleItems.value.findIndex(({ id }) => limits.has(id));
     if (start === -1) return limits;
-    const end = activityStore.mapItems.findLastIndex(({ id }) => limits.has(id));
-    return new Set(activityStore.mapItems.slice(start, end + 1).map(({ id }) => id));
+    const end = visibleItems.value.findLastIndex(({ id }) => limits.has(id));
+    return new Set(visibleItems.value.slice(start, end + 1).map(({ id }) => id));
   }
 
   function toggleAll(ids: string[]) {
@@ -48,6 +83,7 @@ export const useSelectionStore = defineStore('selection', () => {
    * @param source The source of the event:
    *                 `map` means a click on the map.
    *                 `list` means a click in the list in the sidebar.
+   *                 `options` means a click in the selection options panel.
    * @param ctrlKey Whether the ctrl/meta key is pressed.
    *                When true, the selection is toggled rather than replaced.
    * @param shiftKey Whether the shift key is pressed.
@@ -63,7 +99,7 @@ export const useSelectionStore = defineStore('selection', () => {
   ) {
     const flatIds = [ids].flat();
 
-    if (!ctrlKey) {
+    if (!ctrlKey && !multiSelectionMode.value) {
       selected.clear();
     }
 
@@ -87,11 +123,40 @@ export const useSelectionStore = defineStore('selection', () => {
     updateSource.value = source;
   }
 
+  function lockSelection() {
+    if (selected.size === 0) return;
+    lockedSelection.value = new Set(selected);
+    selected.clear();
+    updateSource.value = 'options';
+  }
+
+  function releaseSelection() {
+    if (!lockedSelection.value) return;
+    selected.clear();
+    lockedSelection.value.forEach((id) => selected.add(id));
+    lockedSelection.value = undefined;
+    updateSource.value = 'options';
+  }
+
+  function clearSelection() {
+    selected.clear();
+    updateSource.value = 'options';
+  }
+
   return {
+    multiSelectionMode,
     selected,
     selectedItems,
     updateSource,
+    lockedSelections,
+    lockedSelection,
+    visibleItems,
+    visibleGroupedItems,
+    visibleBackgroundItems,
 
     select,
+    lockSelection,
+    releaseSelection,
+    clearSelection,
   };
 });
diff --git a/client/src/types/FilterModel.ts b/client/src/types/FilterModel.ts
new file mode 100644
index 00000000..62eb008a
--- /dev/null
+++ b/client/src/types/FilterModel.ts
@@ -0,0 +1,56 @@
+export type FilterField = keyof FilterModel;
+
+export interface RangeFilter {
+  // These fields are both readonly to avoid problems with shallow copies of the filter model
+  readonly min?: number;
+  readonly max?: number;
+}
+
+export interface FilterModel {
+  sportType?: string;
+
+  /** Set to true to only show starred routes, or false to only show unfiltered routes */
+  starred?: boolean;
+
+  distance?: RangeFilter;
+  elevation?: RangeFilter;
+  gear?: string;
+
+  /** Set to true to only show private items, or false to only show non-private items */
+  isPrivate?: boolean;
+
+  /** Set to true to only show commutes, or false to only show non-commutes */
+  isCommute?: boolean;
+
+  device?: string;
+}
+
+// Check for surrounding quotes to indicate exact match.
+export const exactDeviceQuotes = ['"', "'", '“', '”', '‘', '’', '„', '‚', '`', '«', '»', '‹', '›'];
+export const quotePairs: Record<string, string> = {
+  '“': '”',
+  '‘': '’',
+  '„': '“',
+  '‚': '‘',
+  '«': '»',
+  '»': '«',
+  '‹': '›',
+  '›': '‹',
+};
+
+export const parseDeviceFilter = (
+  deviceFilter: string | undefined,
+): { enabled: boolean; exact: boolean; name: string } => {
+  if (!deviceFilter) return { enabled: false, exact: false, name: '' };
+
+  if (exactDeviceQuotes.includes(deviceFilter.at(0) ?? '')) {
+    if (deviceFilter.length > 1 && exactDeviceQuotes.includes(deviceFilter.at(-1) ?? '')) {
+      return { enabled: true, exact: true, name: deviceFilter.slice(1, -1).toLowerCase().trim() };
+    } else {
+      // If only the start quote is present, treat it as a normal filter, as the user is still typing
+      return { enabled: true, exact: false, name: deviceFilter.slice(1).toLowerCase().trim() };
+    }
+  } else {
+    return { enabled: true, exact: false, name: deviceFilter.toLowerCase().trim() };
+  }
+};
diff --git a/client/src/utils/map.ts b/client/src/utils/map.ts
index 9fc68075..e71729e0 100644
--- a/client/src/utils/map.ts
+++ b/client/src/utils/map.ts
@@ -24,6 +24,7 @@ export interface MapProperties {
 type RGB = [r: number, g: number, b: number];
 
 export enum MapSourceLayer {
+  BACKGROUND = 'background',
   LINES = 'lines',
   SELECTED = 'selected',
 }
@@ -67,6 +68,7 @@ interface LayerDef {
   source: string;
   color: ExpressionSpecification | string;
   width: ExpressionSpecification | number;
+  opacity?: number;
 }
 
 const lineWidth = fromZoom([5, 1], [14, 4], [22, 8]);
@@ -87,7 +89,13 @@ const colorsForStyle = (style: MapStyle): Record<'lines' | 'medium' | 'hot', RGB
 
 export const getLayersForStyle = (
   style: MapStyle,
-): Record<'lines' | 'medium' | 'hot' | 'selected', LayerDef> => ({
+): Record<'background' | 'lines' | 'medium' | 'hot' | 'selected', LayerDef> => ({
+  background: {
+    source: MapSourceLayer.BACKGROUND,
+    color: '#7f7f7f',
+    width: lineWidth,
+    opacity: 0.4,
+  },
   lines: {
     source: MapSourceLayer.LINES,
     color: colorOpacityFromZoom(colorsForStyle(style).lines, [5, 0.75], [10, 0.35]),
@@ -118,6 +126,7 @@ const buildLineLayer = (id: string, layer: LayerDef): LineLayerSpecification =>
   paint: {
     'line-color': layer.color,
     'line-width': layer.width,
+    'line-opacity': layer.opacity ?? 1,
   },
 });
 
diff --git a/client/src/utils/numberFormat.ts b/client/src/utils/numberFormat.ts
index 2662aaea..b8c62de5 100644
--- a/client/src/utils/numberFormat.ts
+++ b/client/src/utils/numberFormat.ts
@@ -88,18 +88,22 @@ const dateFormat = new Intl.DateTimeFormat(locales, {
   day: 'numeric',
 });
 
+export function formatDate(date: number | Date) {
+  return dateFormat.format(date);
+}
+
 const parts = dateFormat.formatToParts(0);
 const yearFirst =
   parts.findIndex((part) => part.type === 'year') <
   parts.findIndex((part) => part.type === 'month');
 
-export function formatSplitDate(date: number) {
+export function formatSplitDate(date: number | Date) {
   const yearString = yearFormat.format(date);
   const dayString = dayMonthFormat.format(date);
   return yearFirst ? [yearString, dayString] : [dayString, yearString];
 }
 
-export function formatFullDateTime(date: number) {
+export function formatFullDateTime(date: number | Date) {
   return fullDateTimeFormat.format(date);
 }
 
diff --git a/client/src/utils/storage.ts b/client/src/utils/storage.ts
index 4513ca73..6c8aaf89 100644
--- a/client/src/utils/storage.ts
+++ b/client/src/utils/storage.ts
@@ -6,6 +6,8 @@ import {
 } from '@strava-heatmapper/shared/interfaces';
 import localforage from 'localforage';
 
+import { type FilterField, type FilterModel } from '@/types/FilterModel';
+
 export interface StoreMeta {
   version: number;
   user: number;
@@ -45,6 +47,24 @@ export async function getCachedGear(id: string): Promise<Gear | undefined> {
   return gear ?? undefined;
 }
 
+export function loadFilterModel() {
+  const json = localStorage.getItem('filter');
+  if (json) return JSON.parse(json) as FilterModel;
+}
+
+export function saveFilterModel(filter: FilterModel) {
+  localStorage.setItem('filter', JSON.stringify(filter));
+}
+
+export function loadFilterFields() {
+  const json = localStorage.getItem('filterFields');
+  if (json) return new Set(JSON.parse(json) as FilterField[]);
+}
+
+export function saveFilterFields(filter: Set<FilterField>) {
+  localStorage.setItem('filterFields', JSON.stringify(Array.from(filter)));
+}
+
 export function getStoreMeta(): StoreMeta {
   const rawCache = localStorage.getItem('meta');
   const cache = rawCache ? (JSON.parse(rawCache) as Partial<StoreMeta>) : undefined;
diff --git a/client/src/utils/strings.ts b/client/src/utils/strings.ts
index bd46598e..60c906bb 100644
--- a/client/src/utils/strings.ts
+++ b/client/src/utils/strings.ts
@@ -32,6 +32,11 @@ export const countSelectedActivities = (n: number | null) =>
 export const countSelectedRoutes = (n: number | null) =>
   count(n, 'route selected', 'routes selected');
 
+export const countFocusedActivities = (n: number | null) =>
+  count(n, 'activity focused', 'activities focused');
+
+export const countFocusedRoutes = (n: number | null) => count(n, 'route focused', 'routes focused');
+
 export const countOtherSessions = (n: number | null) => count(n, 'other session');
 
 export const capitalise = (string: string) => string.slice(0, 1).toUpperCase() + string.slice(1);
diff --git a/client/vite.config.js b/client/vite.config.js
index d3d74f36..9c6a3b41 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -63,7 +63,7 @@ export default defineConfig(({ mode }) => {
     server: {
       port: VITE_DEV_PORT,
       proxy: {
-        '^/api/': { target: `http://localhost:${SERVER_PORT}`, ws: true },
+        '^/(api|calendar)': { target: `http://localhost:${SERVER_PORT}`, ws: true },
       },
     },
     build: {
diff --git a/server/api.ts b/server/api.ts
index 979dee2e..10f9d85a 100644
--- a/server/api.ts
+++ b/server/api.ts
@@ -11,9 +11,11 @@ import { UserHandler } from './routes/user';
  * or changes that require a full re-download of user data.
  *
  * Change log:
+ * - 7: Added isPrivate to all items, isCommute to activities.
+ * - 6: Added isBike to gear.
  * - 5: Added device field to activities to comply with Garmin Connect rules.
  */
-const MODEL_VERSION = 6;
+const MODEL_VERSION = 7;
 
 export default function apiRouter(domain: string): express.Router {
   const router = express.Router() as Router;
diff --git a/server/app.ts b/server/app.ts
index 58fa3c8b..4d02d298 100644
--- a/server/app.ts
+++ b/server/app.ts
@@ -6,6 +6,7 @@ import express, { type RequestHandler } from 'express';
 import expressWs from 'express-ws';
 
 import apiRouter from './api';
+import calendarRouter from './calendar';
 
 const app = express();
 expressWs(app);
@@ -25,6 +26,8 @@ app.use(corsConfig);
 
 app.use('/api', apiRouter(SERVER_DOMAIN));
 
+app.use('/calendar', calendarRouter(SERVER_DOMAIN));
+
 // Support history api
 app.use(
   history({
diff --git a/server/calendar.ts b/server/calendar.ts
new file mode 100644
index 00000000..c06b3d1d
--- /dev/null
+++ b/server/calendar.ts
@@ -0,0 +1,86 @@
+import 'moment-timezone';
+
+import express from 'express';
+import ical from 'ical-generator';
+import moment from 'moment-timezone';
+
+import eagerIterator from './eager-iterator';
+import { getSportIcon } from './sport-icons';
+import { Strava } from './strava';
+
+export default function calendarRouter(domain: string): express.Router {
+  const router = express.Router();
+
+  const mkRequestLogin = (res: express.Response) => async () => {
+    res.status(403).send('Not logged in');
+    return false;
+  };
+
+  router.get('/', async (req: express.Request, res: express.Response) => {
+    const token = req.cookies.token;
+    const requestLogin = mkRequestLogin(res);
+    if (token && (await new Strava(domain, token, requestLogin).hasToken())) {
+      const webcalDomain = domain.replace(/\w+(?=:\/\/)/, 'webcal');
+      const pathWithSlash = req.originalUrl.replace(/\/?$/, '/');
+      const fullPath = webcalDomain + pathWithSlash + token + '.ics';
+      res.redirect(fullPath);
+    } else {
+      await requestLogin();
+    }
+  });
+
+  router.get('/:token.ics', async (req: express.Request, res: express.Response) => {
+    const strava = new Strava(domain, req.params.token, mkRequestLogin(res));
+
+    res.type('text/calendar; charset=UTF-8');
+
+    const cal = ical({ name: 'Strava activities' });
+
+    for await (const activity of eagerIterator(strava.getStravaActivities())) {
+      const startTime = moment(activity.start_date).tz(activity.timezone.split(' ')[1]);
+      const location = activity.start_latlng.join(', ');
+
+      const twoDigits = (val: number) => String(val.toFixed(0)).padStart(2, '0');
+
+      const toHms = (totalSeconds: number) => {
+        const hours = Math.floor(totalSeconds / 60 / 60),
+          minutes = Math.floor(totalSeconds / 60) % 60,
+          seconds = totalSeconds % 60;
+        return (hours ? [hours, twoDigits(minutes), twoDigits(seconds)] : [minutes, twoDigits(seconds)]).join(':');
+      };
+
+      const descriptionFields = {
+        'Elapsed time': activity.elapsed_time && `${toHms(activity.elapsed_time)}`,
+        'Moving time': activity.moving_time && `${toHms(activity.moving_time)}`,
+        Distance: activity.distance && `${(activity.distance / 1000).toFixed(2)} km`,
+        'Elevation gain': activity.total_elevation_gain && `${activity.total_elevation_gain.toFixed(0)} m`,
+        'Average speed':
+          activity.average_speed &&
+          activity.sport_type !== 'Run' &&
+          `${(activity.average_speed * 3.6).toFixed(1)} km/h`,
+        'Average pace':
+          activity.average_speed && activity.sport_type === 'Run' && `${toHms(1000 / activity.average_speed)}/km`,
+        'Average heart rate': activity.has_heartrate && `${activity.average_heartrate?.toFixed(0)} bpm`,
+        'Max heart rate': activity.has_heartrate && `${activity.max_heartrate?.toFixed(0)} bpm`,
+      };
+      const descriptionData = Object.entries(descriptionFields)
+        .filter(([, value]) => value)
+        .map(([label, value]) => `${label}: ${value}`)
+        .join('\n');
+
+      cal.createEvent({
+        summary: `${activity.name} ${getSportIcon(activity)}`,
+        location: location,
+        timezone: startTime.tz(),
+        start: startTime,
+        end: moment(startTime).add(activity.elapsed_time, 'seconds'),
+        url: `https://strava.com/activities/${activity.id}`,
+        description: descriptionData,
+      });
+    }
+
+    cal.serve(res);
+  });
+
+  return router;
+}
diff --git a/server/package.json b/server/package.json
index 7e844bc8..c62f611d 100644
--- a/server/package.json
+++ b/server/package.json
@@ -18,6 +18,9 @@
     "cookie-parser": "^1.4.7",
     "express": "^4.21.1",
     "express-ws": "^5.0.2",
+    "ical-generator": "^3.4.2",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.40",
     "node-fetch": "^2.7.0",
     "proper-lockfile": "^4.1.2",
     "uuid": "^9.0.1"
@@ -30,6 +33,7 @@
     "@types/cookie-parser": "^1.4.7",
     "@types/express": "^4.17.21",
     "@types/express-ws": "^3.0.5",
+    "@types/luxon": "^2.3.2",
     "@types/node": "^20.17.7",
     "@types/node-fetch": "^2.6.12",
     "@types/uuid": "^9.0.8",
diff --git a/server/routes/activities.ts b/server/routes/activities.ts
index 3b726e6c..e683d956 100644
--- a/server/routes/activities.ts
+++ b/server/routes/activities.ts
@@ -42,6 +42,8 @@ function convertActivitySummary({
   total_elevation_gain,
   elev_high,
   elev_low,
+  private: isPrivate,
+  commute: isCommute,
 }: SummaryActivity): Activity {
   const date = +new Date(startDate);
   const localDate = +new Date(localStartDate);
@@ -59,6 +61,8 @@ function convertActivitySummary({
     distance,
     type: sport_type,
     gear,
+    isPrivate,
+    isCommute,
     elevation: allDefined(total_elevation_gain, elev_high, elev_low) && {
       max: elev_high,
       min: elev_low,
@@ -78,6 +82,7 @@ function convertRouteSummary({
   starred,
   distance,
   elevation_gain,
+  private: isPrivate,
 }: SummaryRoute): Route {
   return {
     route: true,
@@ -89,6 +94,7 @@ function convertRouteSummary({
     map,
     starred,
     type: routeTypeMap[type] ?? type,
+    isPrivate,
   };
 }
 
@@ -99,8 +105,9 @@ function convertGear({
   primary,
   brand_name: brand,
   model_name: model,
+  frame_type: frameType,
 }: DetailedGear): Gear {
-  return { name, description, distance, primary, brand, model };
+  return { name, description, distance, primary, brand, model, isBike: frameType !== undefined };
 }
 
 function convertActivity({ id, map }, highDetail = false): ActivityMap {
diff --git a/server/sport-icons.ts b/server/sport-icons.ts
new file mode 100644
index 00000000..a61f328e
--- /dev/null
+++ b/server/sport-icons.ts
@@ -0,0 +1,80 @@
+import { type SummaryActivity } from './strava/model';
+
+export function getSportIcon(source: SummaryActivity): string {
+  switch (source.sport_type) {
+    case 'Run':
+    case 'VirtualRun':
+    case 'TrailRun':
+      return '🏃';
+    case 'Walk':
+      return '🚶';
+    case 'Ride':
+    case 'EBikeRide':
+    case 'VirtualRide':
+    case 'Handcycle':
+    case 'Velomobile':
+      return '🚲';
+    case 'Swim':
+      return '🏊';
+    case 'AlpineSki':
+    case 'BackcountrySki':
+    case 'NordicSki':
+      return '⛷️';
+    case 'Snowboard':
+      return '🏂';
+    case 'IceSkate':
+    case 'Snowshoe':
+      return '⛸️';
+    case 'Skateboard':
+      return '🛹';
+    case 'RockClimbing':
+      return '🧗';
+    case 'Surfing':
+    case 'Windsurf':
+    case 'Kitesurf':
+    case 'StandUpPaddling':
+      return '🏄';
+    case 'Canoeing':
+    case 'Kayaking':
+    case 'Rowing':
+    case 'VirtualRow':
+      return '🛶';
+    case 'Sail':
+      return '⛵';
+    case 'Golf':
+      return '🏌';
+    case 'Soccer':
+      return '⚽';
+    case 'Crossfit':
+    case 'Elliptical':
+    case 'WeightTraining':
+    case 'HighIntensityIntervalTraining':
+    case 'Pilates':
+    case 'StairStepper':
+      return '🏋';
+    case 'Yoga':
+      return '🧘';
+    case 'Wheelchair':
+      return '🧑‍🦽';
+    case 'Hike':
+      return '🥾';
+    case 'Badminton':
+      return '🏸';
+    case 'Tennis':
+      return '🎾';
+    case 'EMountainBikeRide':
+    case 'MountainBikeRide':
+    case 'GravelRide':
+      return '🚵';
+    case 'InlineSkate':
+      return '🛼';
+    case 'TableTennis':
+    case 'Pickleball':
+    case 'Racquetball':
+    case 'Squash':
+      return '🏓';
+    case 'Workout':
+    default:
+      return '';
+  }
+}
diff --git a/server/strava/index.ts b/server/strava/index.ts
index 90673393..cbd08c58 100644
--- a/server/strava/index.ts
+++ b/server/strava/index.ts
@@ -58,7 +58,7 @@ export class Strava {
   /**
    * Fetches your data from the Strava API
    */
-  async *getStravaActivities(start?: number, end?: number): AsyncGenerator<unknown, void, undefined> {
+  async *getStravaActivities(start?: number, end?: number): AsyncGenerator<SummaryActivity, void, undefined> {
     for await (const page of this.getStravaActivitiesPages(start, end)) {
       yield* page;
     }
@@ -99,6 +99,10 @@ export class Strava {
     return await this.rawApi.get(`/activities/${id}`);
   }
 
+  hasToken(): Promise<boolean> {
+    return this.rawApi.hasToken();
+  }
+
   async logout(global?: boolean);
   async logout(global: true, athlete: number);
   async logout(global = false, athlete?: number) {
diff --git a/server/strava/model.ts b/server/strava/model.ts
index 697def67..827014da 100644
--- a/server/strava/model.ts
+++ b/server/strava/model.ts
@@ -62,15 +62,29 @@ export interface DetailedGear {
 }
 
 export interface SummaryRoute {
-  id_str: string;
-  name: string;
-  created_at: string;
-  map: { summary_polyline: string };
-  type: 1 | 2 | 3;
-  sub_type: 1 | 2 | 3 | 4 | 5;
-  distance: number;
-  elevation_gain: number;
-  starred: boolean;
+  /** An instance of SummaryAthlete. */ athlete?: SummaryAthlete;
+  /** The description of the route */ description?: string;
+  /** The route's distance, in meters */ distance: number;
+  /** The route's elevation gain. */ elevation_gain: number;
+  /** The unique identifier of this route @deprecated */ id: number;
+  /** The unique identifier of the route in string format */ id_str: string;
+  /** An instance of PolylineMap. */ map: { summary_polyline: string };
+  /** The name of this route */ name: string;
+  /** Whether this route is private */ private?: boolean;
+  /** Whether this route is starred by the logged-in athlete */ starred: boolean;
+  /** An epoch timestamp of when the route was created */ timestamp?: number;
+  /** This route's type */ type: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** This route's sub-type (1 for road, 2 for mountain bike, 3 for cross, 4 for trail, 5 for mixed) */ sub_type:
+    | 1
+    | 2
+    | 3
+    | 4
+    | 5;
+  /** The time at which the route was created */ created_at: string;
+  /** The time at which the route was last updated */ updated_at?: string;
+  /** Estimated time in seconds for the authenticated athlete to complete route */ estimated_moving_time?: number;
+  /** The segments traversed by this route */ segments?: unknown[];
+  /** The custom waypoints along this route */ waypoints?: unknown[];
 }
 
 export interface SummaryAthlete {
diff --git a/server/strava/raw-api.ts b/server/strava/raw-api.ts
index 34400ebe..2be5965a 100644
--- a/server/strava/raw-api.ts
+++ b/server/strava/raw-api.ts
@@ -167,6 +167,15 @@ export default class RawStravaApi {
     };
   }
 
+  async hasToken(): Promise<boolean> {
+    try {
+      await this.loadCache();
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
   private async rawStravaAPI(endpoint: string, query: Record<string, string | number | undefined> = {}) {
     const API_BASE = 'https://www.strava.com/api/v3';
     const queryString = (Object.entries(query).filter(([, value]) => value) as [string, string | number][])
diff --git a/shared/interfaces/Activity.ts b/shared/interfaces/Activity.ts
index f91317ff..4563493f 100644
--- a/shared/interfaces/Activity.ts
+++ b/shared/interfaces/Activity.ts
@@ -29,4 +29,6 @@ export default interface Activity extends ActivityMap, ActivityStats {
   type: SportType;
   device?: string;
   gear?: string;
+  isPrivate?: boolean;
+  isCommute?: boolean;
 }
diff --git a/shared/interfaces/Gear.ts b/shared/interfaces/Gear.ts
index 98ecbfd8..30c254e8 100644
--- a/shared/interfaces/Gear.ts
+++ b/shared/interfaces/Gear.ts
@@ -5,4 +5,5 @@ export default interface Gear {
   brand: string;
   model: string;
   description: string;
+  isBike: boolean;
 }
diff --git a/shared/interfaces/Route.ts b/shared/interfaces/Route.ts
index e2b3d843..fd81af1c 100644
--- a/shared/interfaces/Route.ts
+++ b/shared/interfaces/Route.ts
@@ -14,4 +14,5 @@ export default interface Route extends RouteStats {
   map: string;
   type: SportType;
   starred: boolean;
+  isPrivate?: boolean;
 }
diff --git a/shared/interfaces/SportType.ts b/shared/interfaces/SportType.ts
index 5744faa4..ac50f59d 100644
--- a/shared/interfaces/SportType.ts
+++ b/shared/interfaces/SportType.ts
@@ -53,12 +53,19 @@ export enum SportType {
 
 export default SportType;
 
+export const footSportGroup = 'Hike,Snowshoe,Run,TrailRun,Walk';
+export const runningSportGroup = 'Run,TrailRun';
+export const walkingSportGroup = 'Hike,Walk';
+export const bikeSportGroup =
+  'EBikeRide,GravelRide,Handcycle,MountainBikeRide,Ride,Velomobile,VirtualRide';
+export const winterSportGroup = 'AlpineSki,BackcountrySki,IceSkate,Snowboard,Snowshoe,NordicSki';
+
 export const sportGroups = Object.freeze<Record<string, string>>({
-  'Hike,Snowshoe,Run,TrailRun,Walk': 'All on foot',
-  'Run,TrailRun': 'All running',
-  'Hike,Walk': 'All walking',
-  'EBikeRide,GravelRide,Handcycle,MountainBikeRide,Ride,Velomobile,VirtualRide': 'All biking',
-  'AlpineSki,BackcountrySki,IceSkate,Snowboard,Snowshoe,NordicSki': 'All winter sports',
+  [footSportGroup]: 'All on foot',
+  [runningSportGroup]: 'All running',
+  [walkingSportGroup]: 'All walking',
+  [bikeSportGroup]: 'All biking',
+  [winterSportGroup]: 'All winter sports',
 });
 
 export const sportTypes = Object.freeze<Record<SportType, string>>({
diff --git a/yarn.lock b/yarn.lock
index 934b740d..f18acbf3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -958,6 +958,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/luxon@^2.3.2":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-2.4.0.tgz#897d3abc23b68d78b69d76a12c21e01eb5adab95"
+  integrity sha512-oCavjEjRXuR6URJEtQm0eBdfsBiEcGBZbq21of8iGkeKxU1+1xgKuFPClaBZl2KB8ZZBSWlgk61tH6Mf+nvZVw==
+
 "@types/mapbox__point-geometry@*", "@types/mapbox__point-geometry@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz#0ef017b75eedce02ff6243b4189210e2e6d5e56d"
@@ -2984,6 +2989,13 @@ http-errors@2.0.0:
     statuses "2.0.1"
     toidentifier "1.0.1"
 
+ical-generator@^3.4.2:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/ical-generator/-/ical-generator-3.6.1.tgz#097e9b4124de5554912ad30d341bdba644f6c312"
+  integrity sha512-tEH0OTNn00Mp61DcTxIFR+5fhsAivKk1LWAJUAbkMCI+M4yu+cZzT5X8rZf3b5PzFkMogh0zj3PsFh9bHvGGIQ==
+  dependencies:
+    uuid-random "^1.3.2"
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -3566,6 +3578,18 @@ mitt@^3.0.1:
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
   integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
 
+moment-timezone@^0.5.40:
+  version "0.5.40"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.40.tgz#c148f5149fd91dd3e29bf481abc8830ecba16b89"
+  integrity sha512-tWfmNkRYmBkPJz5mr9GVDn9vRlVZOTe6yqY92rFxiOdWXbjaR0+9LwQnZGGuNR63X456NqmEkbskte8tWL5ePg==
+  dependencies:
+    moment ">= 2.9.0"
+
+"moment@>= 2.9.0", moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -4820,6 +4844,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid-random@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/uuid-random/-/uuid-random-1.3.2.tgz#96715edbaef4e84b1dcf5024b00d16f30220e2d0"
+  integrity sha512-UOzej0Le/UgkbWEO8flm+0y+G+ljUon1QWTEZOq1rnMAsxo2+SckbiZdKzAHHlVh6gJqI1TjC/xwgR50MuCrBQ==
+
 uuid@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"