diff --git a/client/src/lib/progress/progressChart.ts b/client/src/lib/progress/progressChart.ts
new file mode 100644
index 0000000..6b56eee
--- /dev/null
+++ b/client/src/lib/progress/progressChart.ts
@@ -0,0 +1,152 @@
+import { DateTime } from 'luxon';
+import _ from 'lodash'
+
+import { Track } from '@/lib/Track'
+import type { TracksByYearDict, ExtendedPChartDataPoint, DSet, PChartSortType } from '@/lib/progress/progressChartTypes'
+
+
+/**
+ * Converts yearly track data into Chart.js line datasets, calculating
+ * cumulative distance for each year with dates normalized to 2024 for comparison.
+ * @param tracksByYear Dictionary mapping years to arrays of Track objects
+ * @param maxSortType Determines whether to prioritize newest years or highest progress when limiting datasets
+ * @param maxLines Maximum number of datasets (years) to include in the output. Set to 0 for no limit.
+ * @returns Array of Chart.js datasets with cumulative distance data, larger point radius for the most recent year
+ */
+function generateChartDataSets(tracksByYear: TracksByYearDict, maxSortType: PChartSortType = 'newest_year', maxLines = 0): DSet[] {
+
+  const yearList = _.keys(tracksByYear).map((ys) => Number.parseInt(ys))
+  yearList.sort().reverse()
+
+  const maxYear = Math.max(...yearList)
+
+  const yearListToUse: number[] = []
+
+  // Cut down list of years to use based on sorting preference and max lines
+  if (maxSortType === 'newest_year') {
+    yearListToUse.push(...yearList.slice(0, maxLines === 0 ? yearList.length : maxLines))
+
+  } else if (maxSortType === 'highest_progress') {
+    yearListToUse.push(...yearList) // filtering is later
+  }
+
+  const progressYearPairs: { year: number, progress: number }[] = [] // for ranking by progress if needed
+  const dataSetByYear: Record<number, DSet> = {} // for easy lookup when sorting by progress
+
+  for (const year of yearListToUse) {
+
+    if ((tracksByYear[year] === undefined) || tracksByYear[year].length === 0) continue
+
+    // Clean and sort tracks for the year
+    const sortedValidTracks: Track[] = []
+    for (const track of tracksByYear[year]) {
+
+      const tTime = track.getTime()
+
+      if (tTime?.isValid) {
+        sortedValidTracks.push(track)
+      }
+      sortedValidTracks.sort((a, b) => (a.getTime()!.toSeconds() - b.getTime()!.toSeconds()))
+    }
+
+    // map tracks to dataset structure with cumulative distance, normalizing dates to 2024 for comparison across years
+    let sum = 0
+    const chartData: ExtendedPChartDataPoint[] = sortedValidTracks.map(
+      (t: Track) => {
+        const step = t.distance() / 1000
+        sum += step
+
+        const trackDate = t.getTime() as DateTime<true>
+        const normDate = trackDate.set({ year: 2024 })
+        return {
+          x: normDate, y: sum, step, name: t.getNameOrSrc(), originalDate: trackDate
+        }
+      }
+    )
+
+    const totalProgress = chartData.at(-1)?.y ?? 0 // can not happen 
+    progressYearPairs.push({ year, progress: totalProgress })
+
+    // Label below is for whole dataset, not individual points
+    const dataset: DSet = {
+      label: year.toString(),
+      data: chartData,
+      pointRadius: (year === maxYear) ? 5 : 3
+    }
+
+    dataSetByYear[year] = dataset
+    //returnDataSetList.push(dataset)
+
+  }
+
+  const returnDataSetList: DSet[] = []
+  if (maxSortType === 'newest_year') {
+    // Return datasets for the newest years
+    for (const year of yearListToUse) {
+      returnDataSetList.push(dataSetByYear[year]!)
+    }
+  } else if (maxSortType === 'highest_progress') {
+    // Sort years by progress and return datasets for the top years
+    progressYearPairs.sort((a, b) => b.progress - a.progress)
+    const topYears = progressYearPairs.slice(0, maxLines).map(p => p.year)
+
+    // check if min 1 year, then check if current year is in top years, if not add it to the list (for visual comparison)
+    if (topYears.length > 0 && !topYears.includes(maxYear)) {
+      topYears.push(maxYear)
+    }
+
+    // sort them again by year for better visual comparison
+    topYears.sort().reverse()
+    for (const year of topYears) {
+      returnDataSetList.push(dataSetByYear[year]!)
+    }
+  }
+
+  return returnDataSetList
+}
+
+/**
+ * State of both buttons, for now only one can be active at a time, but maybe in the future we want to allow both to be active at the same time. 
+ * Will also print classes for active/inactive state of buttons, so that they can be styled accordingly.
+ *  */
+class FilterButtonState {
+  newestActive: boolean
+  bestActive: boolean
+
+  constructor() {
+    this.newestActive = false
+    this.bestActive = false
+  }
+
+  toggleNewest() {
+    this.newestActive = !this.newestActive
+    if (this.newestActive) {
+      this.bestActive = false
+    }
+  }
+
+  toggleBest() {
+    this.bestActive = !this.bestActive
+    if (this.bestActive) {
+      this.newestActive = false
+    }
+  }
+
+  filterActive(): boolean {
+    return this.newestActive || this.bestActive
+  }
+
+  newestButtonClass() {
+    return FilterButtonState.activeClass(this.newestActive)
+  }
+
+  bestButtonClass() {
+    return FilterButtonState.activeClass(this.bestActive)
+  }
+
+  static activeClass(active: boolean) {
+    return active ? "btn-secondary" : "btn-outline-secondary"
+  }
+}
+
+export { generateChartDataSets, FilterButtonState }
\ No newline at end of file
diff --git a/client/src/lib/progress/progressChartConfig.ts b/client/src/lib/progress/progressChartConfig.ts
new file mode 100644
index 0000000..637c0a5
--- /dev/null
+++ b/client/src/lib/progress/progressChartConfig.ts
@@ -0,0 +1,74 @@
+import type { ChartConfiguration } from "chart.js"
+import { DateTime } from "luxon";
+import type { ExtendedPChartDataPoint, PChartTLabel, PChartTType } from '@/lib/progress/progressChartTypes'
+
+
+const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PChartTLabel> = {
+  type: 'line',
+  data: {
+    datasets: [],
+  },
+  options: {
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        type: "time",
+        time: {
+          displayFormats: {
+            month: 'MMM',
+            year: ''
+          },
+          unit: 'month'
+        },
+        min: '2024-01-01',
+        max: '2025-01-02',
+        title: {
+          display: true,
+          text: "Day in year"
+        }
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Mileage'
+        },
+        ticks: {
+          callback: (value) => `${Math.round(value as number)} km`
+        }
+      }
+    },
+    plugins: {
+      tooltip: {
+        boxPadding: 10,
+        callbacks: {
+          title: function (dataset) {
+            return (dataset[0]?.raw as ExtendedPChartDataPoint).originalDate.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY)
+          },
+          label: function (item) {
+            return Math.round((item.raw as ExtendedPChartDataPoint).step) + " km"
+          },
+          afterLabel: function (item) {
+            return (item.raw as ExtendedPChartDataPoint).name
+          }
+        }
+      },
+      zoom: {
+        zoom: {
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true
+          },
+          mode: 'xy',
+        },
+        pan: {
+          enabled: true,
+
+        }
+      }
+    }
+  }
+}
+
+export { chartConfig }
\ No newline at end of file
diff --git a/client/src/lib/progress/progressChartTypes.ts b/client/src/lib/progress/progressChartTypes.ts
new file mode 100644
index 0000000..a8bbc6f
--- /dev/null
+++ b/client/src/lib/progress/progressChartTypes.ts
@@ -0,0 +1,25 @@
+import { DateTime } from "luxon";
+import { Track } from "@/lib/Track";
+
+type TracksByYearDict = Record<number, Track[]>;
+
+type PChartTType = 'line'
+interface PChartDataPoint { x: DateTime<true>; y: number; }
+type PChartTLabel = DateTime
+
+
+interface ExtendedPChartDataPoint extends PChartDataPoint {
+  name: string,
+  step: number,
+  originalDate: DateTime<true>
+}
+
+interface DSet {
+  label: string,
+  data: ExtendedPChartDataPoint[],
+  pointRadius: number
+}
+
+type PChartSortType = 'newest_year' | 'highest_progress'
+
+export type { TracksByYearDict, ExtendedPChartDataPoint, DSet, PChartTType, PChartDataPoint, PChartTLabel, PChartSortType }
\ No newline at end of file
diff --git a/client/src/views/ProgressChart.vue b/client/src/views/ProgressChart.vue
index 4bf7e79..90e8874 100644
--- a/client/src/views/ProgressChart.vue
+++ b/client/src/views/ProgressChart.vue
@@ -1,19 +1,25 @@
 <template>
   <track-manager-nav-bar :sid="sid">
-    <div class="d-flex flex-column flex-grow-1 px-2">
-      <div class="d-flex flex-column">
-        <span v-if="loading">Loading <b-spinner small />
-        </span>
-      </div>
-      <div class="d-flex flex-column flex-grow-1">
-        <canvas id="acquisitions" ref="canvasref"></canvas>
+    <div class="d-flex flex-row border-top border-bottom border-0">
+      <button type="button" class="filterbuttons btn m-2" :class="newestClass" @click="toggleNewest()">
+        Newest</button>
+      <button type="button" class="filterbuttons btn m-2" :class="bestClass" @click="toggleBest()">
+        Best</button>
+    </div>
+    <div class="d-flex flex-column flex-grow-1">
+      <canvas id="acquisitions" ref="canvasref"></canvas>
+      <div v-if="loading" class="myspinner" role="status" aria-label="Loading chart">
+        <b-spinner />
       </div>
     </div>
   </track-manager-nav-bar>
 </template>
 
 <script setup lang="ts">
-import { reportError } from '@/stores/errorstore';
+import { reportError } from '@/stores/errorstore'
+import { chartConfig } from '@/lib/progress/progressChartConfig'
+import { generateChartDataSets, FilterButtonState } from '@/lib/progress/progressChart'
+import type { TracksByYearDict, ExtendedPChartDataPoint, PChartTLabel, PChartTType, PChartSortType } from '@/lib/progress/progressChartTypes'
 import _ from 'lodash'
 
 // chartjs
@@ -28,6 +34,8 @@ import {
   Legend,
   Tooltip
 } from 'chart.js'
+import 'chartjs-adapter-luxon'
+import zoomPlugin from 'chartjs-plugin-zoom'
 
 Chart.register(
   LineController,
@@ -38,33 +46,17 @@ Chart.register(
   LinearScale,
   Legend,
   Tooltip
-);
-import 'chartjs-adapter-luxon';
-
-import zoomPlugin from 'chartjs-plugin-zoom';
-Chart.register(zoomPlugin);
+)
+Chart.register(zoomPlugin)
 
 // internals
 import TrackManagerNavBar from '@/components/TrackManagerNavBar.vue'
 import { Track } from '@/lib/Track'
 import { getAllTracks } from '@/lib/trackServices'
 import { BSpinner } from 'bootstrap-vue-next'
-import { ref, onMounted, nextTick } from 'vue'
-import { DateTime } from 'luxon';
-
-interface ChartDataPoint {
-  x: DateTime<true>,
-  y: number,
-  name: string,
-  step: number,
-  originalDate: DateTime<true>
-}
+import { ref, onMounted, nextTick, computed } from 'vue'
 
-interface DSet {
-  label: string,
-  data: ChartDataPoint[],
-  pointRadius: number
-}
+type ProgressChartType = Chart<PChartTType, ExtendedPChartDataPoint[], PChartTLabel>
 
 const props = defineProps({
   sid: {
@@ -73,174 +65,115 @@ const props = defineProps({
   }
 })
 
-// reactives and dom refs
+// constants
+const MAX_YEARLINES_WITH_FILTER = 5
+
+// reactive state and DOM references
 const loading = ref(true)
-const canvasref = ref<(null | HTMLCanvasElement)>(null)
+const canvasref = ref<HTMLCanvasElement | null>(null)
+const filterState = ref(new FilterButtonState())
+
+const newestClass = computed(() => filterState.value.newestButtonClass())
+const bestClass = computed(() => filterState.value.bestButtonClass())
 
-// helper functions
-type TracksByYearDict = Record<number, Track[]>;
+// Persist track loading so the chart uses the same data from one request
+const allTracksPromise = getAllTracks(props.sid)
+let chart: ProgressChartType | null = null
+let allTracks: Track[] = []
+
+// Helpers for filter state and chart generation
+function numYearLines(): number {
+  return filterState.value.filterActive() ? MAX_YEARLINES_WITH_FILTER : 0
+}
+
+function filterType(): PChartSortType {
+  // if best is inactive, it does not matter if newest is active or not, it will just show the newest years according to limit. 
+  return filterState.value.bestActive ? 'highest_progress' : 'newest_year'
+}
 
 function tracksByYear(loadedTracks: Track[]): TracksByYearDict {
   const trackFlatList = _.values(loadedTracks)
   return _.groupBy(trackFlatList, (x: Track) => x.year())
 }
 
-/**
- * Converts yearly track data into Chart.js line datasets, calculating
- * cumulative distance for each year with dates normalized to 2024 for comparison.
- * @param tracksByYear Dictionary mapping years to arrays of Track objects
- * @returns Array of Chart.js datasets with cumulative distance data, larger point radius for the most recent year
- */
-function generateChartDataSets(tracksByYear: TracksByYearDict) {
-
-  const yearList = _.keys(tracksByYear).map((ys) => Number.parseInt(ys))
-  yearList.sort().reverse()
-
-  const maxYear = Math.max(...yearList)
-
-  // Add one dataset per year, with cumulative distance and normalized dates for comparison
-  const returnDataSetList: DSet[] = []
-  for (const year of yearList) {
-
-    if (tracksByYear[year] !== undefined) {
-
-      // Clean and sort tracks for the year
-      const sortedValidTracks: Track[] = []
-      for (const track of tracksByYear[year]) {
-
-        const tTime = track.getTime()
-
-        if (tTime?.isValid) {
-          sortedValidTracks.push(track)
-        }
-        sortedValidTracks.sort((a, b) => (a.getTime()!.toSeconds() - b.getTime()!.toSeconds()))
-      }
-
-      // map tracks to dataset structure with cumulative distance, normalizing dates to 2024 for comparison across years
-      let sum = 0
-      const chartData: ChartDataPoint[] = sortedValidTracks.map(
-        (t: Track) => {
-          const step = t.distance() / 1000
-          sum += step
-
-          const trackDate = t.getTime() as DateTime<true>
-          const normDate = trackDate.set({ year: 2024 })
-          return {
-            x: normDate, y: sum, step, name: t.getNameOrSrc(), originalDate: trackDate
-          }
-        })
-
-      // Label below is for whole dataset, not individual points
-      const dataset: DSet = {
-        label: year.toString(),
-        data: chartData,
-        pointRadius: (year === maxYear) ? 5 : 3
-      }
-
-      returnDataSetList.push(dataset)
-    }
+function updateChart(ch: ProgressChartType | null, tracks: Track[]) {
+  if (ch === null) {
+    return
   }
-  return returnDataSetList
+
+  const trByYear = tracksByYear(tracks)
+  const chartDataSets = generateChartDataSets(trByYear, filterType(), numYearLines())
+  ch.data.datasets = chartDataSets
+  ch.update()
 }
 
-// load tracks async
-const allTracksPromise = getAllTracks(props.sid)
+// button handlers
+function toggleNewest() {
+  filterState.value.toggleNewest()
+  updateChart(chart, allTracks)
+}
+
+function toggleBest() {
+  filterState.value.toggleBest()
+  updateChart(chart, allTracks)
+}
 
-// generate empty chart
+// Lifecycle: initialize chart after mount and update when data loads
 onMounted(() => {
   nextTick(async () => {
+    if (canvasref.value === null) {
+      reportError('Canvas null')
+      return
+    }
 
-    // should be defined after mount
-    if (canvasref.value !== null) {
-
-      const mychart = new Chart<"line", { x: DateTime; y: number; }[], DateTime>(
-        canvasref.value,
-        {
-          type: 'line',
-          data: {
-            datasets: [],
-          },
-          options: {
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                type: "time",
-                time: {
-                  //  tooltipFormat: 'ccc MMM d',
-                  displayFormats: {
-                    month: 'MMM',
-                    year: ''
-                  },
-                  unit: 'month'
-                },
-                min: '2024-01-01',
-                max: '2025-01-02',
-                title: {
-                  display: true,
-                  text: "Day in year"
-                }
-              },
-              y: {
-                title: {
-                  display: true,
-                  text: 'Mileage'
-                },
-                ticks: {
-                  callback: (value) => `${Math.round(value as number)} km`
-                }
-              }
-            },
-            plugins: {
-              tooltip: {
-                boxPadding: 10,
-                callbacks: {
-                  title: function (dataset) {
-                    return (dataset[0]?.raw as ChartDataPoint).originalDate.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY)
-                  },
-                  label: function (item) {
-                    return Math.round((item.raw as ChartDataPoint).step) + " km"
-                  },
-                  afterLabel: function (item) {
-                    return (item.raw as ChartDataPoint).name
-                  }
-                }
-              },
-              zoom: {
-                zoom: {
-                  wheel: {
-                    enabled: true,
-                  },
-                  pinch: {
-                    enabled: true
-                  },
-                  mode: 'xy',
-                },
-                pan: {
-                  enabled: true,
-
-                }
-              }
-            }
-          }
-        }
-      )
-
-      // wait for loading of tracks to complete
-      const allTracks = await allTracksPromise
-      const tby = tracksByYear(allTracks)
-      const pgDs = generateChartDataSets(tby)
-
-      // update chart data
-      mychart.data.datasets = pgDs
-      mychart.update()
-      loading.value = false
+    chart = new Chart<PChartTType, ExtendedPChartDataPoint[], PChartTLabel>(canvasref.value, chartConfig)
 
-    } else {
-      reportError("Canvas null")
+    try {
+      allTracks = await allTracksPromise
+      loading.value = false
+      updateChart(chart, allTracks)
+    } catch (err) {
+      reportError('Failed to load tracks', err)
     }
   }).catch((err) => {
-    reportError("Error in nextTick", err)
+    reportError('Error in nextTick', err)
   })
 })
-
 </script>
+
+<style scoped>
+.myspinner {
+  position: absolute;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+}
+
+.filterbuttons {
+  /* disable hover effect */
+
+  &:hover {
+    background-color: var(--bs-btn-bg);
+    color: var(--bs-btn-color);
+  }
+
+  &:focus {
+    background-color: var(--bs-btn-bg);
+    color: var(--bs-btn-color);
+  }
+
+  &.active {
+    &:hover {
+      background-color: var(--bs-btn-active-bg);
+      color: var(--bs-btn-active-color);
+    }
+
+    &:focus {
+      background-color: var(--bs-btn-active-bg);
+      color: var(--bs-btn-active-color);
+    }
+  }
+}
+</style>
diff --git a/client/src/views/TrackOverviewPage.vue b/client/src/views/TrackOverviewPage.vue
index c28e6ce..fed0880 100644
--- a/client/src/views/TrackOverviewPage.vue
+++ b/client/src/views/TrackOverviewPage.vue
@@ -1,14 +1,12 @@
 <template>
   <track-manager-nav-bar :sid="sid">
-    <div class="border-top border-bottom border-0">
-      <div class="d-flex flex-row">
-        <button type="button" class="btn btn-outline-secondary m-2 expandbutton" @click="toggleFullExpand">
-          {{ trackOverviewStore.expandPressed ? "Collapse" : "Expand" }}</button>
-        <form @submit.prevent>
-          <input v-model="searchStore.searchText" v-focus class="form-control m-2" placeholder="Search tracks..."
-            @keyup.enter="toggleFullExpand" />
-        </form>
-      </div>
+    <div class="d-flex flex-row border-top border-bottom border-0">
+      <button type="button" class="btn btn-outline-secondary m-2 expandbutton" @click="toggleFullExpand">
+        {{ trackOverviewStore.expandPressed ? "Collapse" : "Expand" }}</button>
+      <form @submit.prevent>
+        <input v-model="searchStore.searchText" v-focus class="form-control m-2" placeholder="Search tracks..."
+          @keyup.enter="toggleFullExpand" />
+      </form>
     </div>
     <div ref="scrollableContainer" class="px-2 flex-grow-1 overflow-auto" style="min-height: 0" @scroll="handleScroll">
       <div>
diff --git a/client/tests/unit/views/ProgressChart.spec.ts b/client/tests/unit/views/ProgressChart.spec.ts
index 29f4e24..596ed14 100644
--- a/client/tests/unit/views/ProgressChart.spec.ts
+++ b/client/tests/unit/views/ProgressChart.spec.ts
@@ -94,8 +94,8 @@ describe('ProgressChart', () => {
   test('shows loading spinner while tracks are loading', () => {
     // Delay resolution so spinner is visible during render
     vi.mocked(getAllTracks).mockReturnValue(new Promise(() => undefined))
-    const { getByText } = renderProgressChart()
-    expect(getByText('Loading')).toBeInTheDocument()
+    const { getByRole } = renderProgressChart()
+    expect(getByRole('status')).toBeInTheDocument()
   })
 
   test('hides loading spinner after tracks are loaded', async () => {