diff --git a/src/api/offstylesApi.ts b/src/api/offstylesApi.ts
index e1c9c9e..8789b3a 100644
--- a/src/api/offstylesApi.ts
+++ b/src/api/offstylesApi.ts
@@ -1,18 +1,10 @@
 import { Style } from '@/types/Style';
 import Api from './api';
-import type { Time } from '@/types/Time';
+import type { Time, TimesPage } from '@/types/Time';
+import type { TimesFilter } from '@/types/TimesFilter';
 import type { User } from '@/types/User';
 import type { RecentModAction, ModerationTargetFilter, ModerationAction } from '@/types/moderation';
 
-// Add new interfaces based on the API spec
-export interface RankAwareRecord extends Time {
-  rank: number;
-}
-
-export interface WRAwareRecord extends Time {
-  wr_time: number;
-}
-
 export interface ReturnStyle {
   name: string;
   s_id: number;
@@ -89,74 +81,36 @@ export interface ModerationLogResponse {
 class OffstylesApi extends Api {
   static offstylesApiUrl = "/api";
 
-  // Fixed method signature to require style parameter
-  static async getTimesByMap(
-    mapName: string,
-    style: number = Style.normal,
-    steamid?: string,
-    limit: number = 50,
-    page: number = 1,
-  ): Promise<RankAwareRecord[]> {
-    const params = new URLSearchParams({
-      map: mapName,
-      style: style.toString(),
-      limit: limit.toString(),
-      page: page.toString(),
-    });
-
-    if (steamid) {
-      params.append("steamid", steamid);
-    }
-
-    this.url = `${this.offstylesApiUrl}/map?${params.toString()}`;
-    return await this.fetchFromUrl();
-  }
-
-  static async getTimesByPlayer(
-    steamID: string,
-    map?: string,
-    style: number = Style.all,
-    limit: number = 50,
-    page: number = 1,
-    best: boolean = false,
-  ): Promise<WRAwareRecord[]> {
-    const params = new URLSearchParams({
-      steamid: steamID,
-      limit: limit.toString(),
-      page: page.toString(),
-      best: best.toString(),
-    });
+  static async getTimes(filter: TimesFilter): Promise<TimesPage> {
+    const params = new URLSearchParams();
 
-    if (map) {
-      params.append("map", map);
+    if (filter.map) params.append("map", filter.map);
+    if (filter.steamid) params.append("steamid", filter.steamid);
+    if (filter.style !== undefined && filter.style !== Style.all) {
+      params.append("style", filter.style.toString());
     }
-
-    if (style !== undefined && style !== Style.all) {
-      params.append("style", style.toString());
+    if (filter.sort) params.append("sort", filter.sort);
+    if (filter.best !== undefined) params.append("best", filter.best.toString());
+    if (filter.has_replay) params.append("has_replay", "true");
+    if (filter.invalidated !== undefined) {
+      params.append("invalidated", filter.invalidated.toString());
     }
+    if (filter.wr !== undefined) params.append("wr", filter.wr.toString());
+    if (filter.recent) params.append("recent", "true");
+    params.append("page", filter.page.toString());
+    params.append("limit", filter.limit.toString());
 
-    this.url = `${this.offstylesApiUrl}/times?${params.toString()}`;
-    return await this.fetchFromUrl();
-  }
-
-  static async getRecentTimes(
-    style: number = Style.all,
-    limit: number = 15,
-    page: number = 1,
-    wr: boolean = true,
-  ): Promise<WRAwareRecord[]> {
-    const params = new URLSearchParams({
-      limit: limit.toString(),
-      page: page.toString(),
-      wr: wr.toString(),
-    });
-
-    if (style !== undefined && style !== Style.all) {
-      params.append("style", style.toString());
+    const response = await fetch(`${this.offstylesApiUrl}/times?${params.toString()}`);
+    if (!response.ok) {
+      const errorText = await response.text();
+      try {
+        const error: JsonError = JSON.parse(errorText);
+        throw new Error(`${error.code}: ${error.reason}`);
+      } catch {
+        throw new Error(`${response.status}: ${response.statusText}`);
+      }
     }
-
-    this.url = `${this.offstylesApiUrl}/recent?${params.toString()}`;
-    return await this.fetchFromUrl();
+    return await response.json();
   }
 
   // New methods based on the API spec
@@ -178,13 +132,23 @@ class OffstylesApi extends Api {
     return await this.fetchFromUrl();
   }
 
-  static async getSingleTime(id: string): Promise<WRAwareRecord> {
-    const params = new URLSearchParams({
-      id: id,
-    });
-
-    this.url = `${this.offstylesApiUrl}/time?${params.toString()}`;
-    return await this.fetchFromUrl();
+  static async getSingleTime(id: string): Promise<Time> {
+    const params = new URLSearchParams({ ids: id, limit: '1', page: '1' });
+    const response = await fetch(`${this.offstylesApiUrl}/times?${params.toString()}`);
+    if (!response.ok) {
+      const errorText = await response.text();
+      try {
+        const error: JsonError = JSON.parse(errorText);
+        throw new Error(`${error.code}: ${error.reason}`);
+      } catch {
+        throw new Error(`${response.status}: ${response.statusText}`);
+      }
+    }
+    const page: TimesPage = await response.json();
+    if (page.data.length === 0) {
+      throw new Error('404: Record not found');
+    }
+    return page.data[0];
   }
 
   static async getStyles(): Promise<ReturnStyle[]> {
diff --git a/src/components/CheckboxInput.vue b/src/components/CheckboxInput.vue
index 42b90cf..a21e8f8 100644
--- a/src/components/CheckboxInput.vue
+++ b/src/components/CheckboxInput.vue
@@ -6,9 +6,13 @@
   const props = defineProps<{
     name: string,
     label: string,
+    default?: boolean,
   }>()
-  const currentInput : Ref<boolean> = ref(urlParams.getAsObject().wr ? urlParams.getAsObject().wr === 'true' : true);
-  
+  const initial = urlParams.getAsObject()[props.name];
+  const currentInput : Ref<boolean> = ref(
+    initial !== undefined ? initial === 'true' : (props.default ?? false)
+  );
+
   watch(currentInput, async() => {
     emit('checkbox-Changed', props.name, currentInput.value);
   });
diff --git a/src/components/CustomDropdown.vue b/src/components/CustomDropdown.vue
index 1a96aaf..b2b330d 100644
--- a/src/components/CustomDropdown.vue
+++ b/src/components/CustomDropdown.vue
@@ -4,19 +4,19 @@
   import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
   import IconCheck from './icons/IconCheck.vue';
   import IconChevronUpDown from './icons/IconChevronUpDown.vue';
-  import { Style } from '@/types/Style';
   import urlParams from '@/utils/urlParams';
   const emit = defineEmits(['dropdown-Changed']);
-  
+
   const props = defineProps<{
-    options: (number)[], 
+    options: (number)[],
     name: string,
     format: (value: number) => string,
     default: number
   }>()
 
-  const currentInput : Ref<number> = ref(urlParams.getAsObject().style ? Number(urlParams.getAsObject().style) : props.default);
-  
+  const initial = urlParams.getAsObject()[props.name];
+  const currentInput : Ref<number> = ref(initial !== undefined ? Number(initial) : props.default);
+
   watch(currentInput, async() => {
     emit('dropdown-Changed', props.name, currentInput.value);
   });
diff --git a/src/components/MapDetails.vue b/src/components/MapDetails.vue
index a0455bb..59ed1ae 100644
--- a/src/components/MapDetails.vue
+++ b/src/components/MapDetails.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
   import TimesList from './TimesList.vue';
+  import TimesFilterBar from './TimesFilterBar.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
-  import CustomDropdown from './CustomDropdown.vue';
-  import styleFormat from '@/utils/styleFormat';
+  import type { SortOrder } from '@/types/TimesFilter';
   import { Style } from "@/types/Style";
   import urlParams from '@/utils/urlParams';
-  import { useRouter } from 'vue-router';
+  import { useRoute, useRouter } from 'vue-router';
+  import { computed } from 'vue';
   import TimesListPagination from './TimesListPagination.vue';
+
+  const route = useRoute();
   const router = useRouter();
 
   const emit = defineEmits(['updateMap']);
@@ -16,27 +19,45 @@
   const props = defineProps<{
     mapName : string,
     mapTimes: Time[] | null,
-    isLoading: boolean
+    isLoading: boolean,
+    total: number,
   }>()
- 
-  const dropdownChanged = async (name : string, value : number)=>{
-    await router.replace({query:urlParams.update(name, value)});
-    emit('updateMap', props.mapName);
-  }
-  const paginationChanged = async (page: number)=>{
-    await router.replace({query:urlParams.update('page', page)});
-    emit('updateMap', props.mapName);
-  }
+
+  const mapStyleOptions = [Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented];
+
+  const currentFilter = computed(() => {
+    const q = route.query as Record<string, string>;
+    return {
+      style: q.style ? Number(q.style) : Style.normal,
+      sort: (q.sort as SortOrder) || 'Fastest',
+      best: q.best !== undefined ? q.best === 'true' : true,
+      hasReplay: q.has_replay === 'true',
+      invalidated: q.invalidated !== undefined ? q.invalidated === 'true' : undefined,
+    };
+  });
+
+  const filterChanged = async (name: 'style' | 'sort' | 'best' | 'has_replay' | 'invalidated', value: string | number | boolean | undefined) => {
+    await router.replace({ query: urlParams.updateMany({ [name]: value }) });
+  };
+
+  const paginationChanged = async (page: number) => {
+    await router.replace({ query: urlParams.update('page', page) });
+  };
 </script>
 
 
 <template>
   <div class="text-white w-full max-w-[800px] p-4 text-center flex flex-col justify-center rounded-lg mt-8">
     <h1 class="text-2xl mb-3">{{ mapName }}</h1>
-    <div class="flex py-2">
-      <CustomDropdown :options="[Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented]"
-       :name="'style'" :format="styleFormat.name" :default="Style.normal" @dropdown-Changed="dropdownChanged"></CustomDropdown>
-    </div>
+    <TimesFilterBar
+      :styleValue="currentFilter.style"
+      :sort="currentFilter.sort"
+      :best="currentFilter.best"
+      :hasReplay="currentFilter.hasReplay"
+      :invalidated="currentFilter.invalidated"
+      :styleOptions="mapStyleOptions"
+      @filter-Changed="filterChanged"
+    />
     <TimesList v-if="props.mapTimes" :times="props.mapTimes" :cols="[{
       label: 'Player',
       data: 'name',
@@ -44,7 +65,7 @@
       width:'25%',
       alignmentClasses: 'text-left',
       link: timeLinks.playerLink
-    }, 
+    },
     {
       label: 'Server',
       data: 'server',
@@ -67,7 +88,7 @@
     }]"
     @refresh-data="() => emit('updateMap', props.mapName)"
     ></TimesList>
-    <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected map & style</h1>
-    <TimesListPagination :limitPerPage="50" :times="props.mapTimes" :isLoading = "props.isLoading" @pagination-changed="paginationChanged"></TimesListPagination>
+    <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected map & filters</h1>
+    <TimesListPagination :limitPerPage="50" :isLoading="props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/PlayerDetails.vue b/src/components/PlayerDetails.vue
index f7f6c69..9b13892 100644
--- a/src/components/PlayerDetails.vue
+++ b/src/components/PlayerDetails.vue
@@ -1,20 +1,24 @@
 <script setup lang="ts">
   import TimesList from './TimesList.vue';
+  import TimesFilterBar from './TimesFilterBar.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
+  import styleFormat from '@/utils/styleFormat';
   import type { Time } from '@/types/Time';
+  import type { TimeListColumn } from '@/types/TimeListColumn';
   import type { User } from '@/types/User';
-  import CustomDropdown from './CustomDropdown.vue';
-  import styleFormat from '@/utils/styleFormat';
+  import type { SortOrder } from '@/types/TimesFilter';
   import { Style } from "@/types/Style";
   import urlParams from '@/utils/urlParams';
-  import { useRouter } from 'vue-router';
+  import { useRoute, useRouter } from 'vue-router';
   import { ref, onMounted, watch, computed } from 'vue';
   import type { Ref } from 'vue';
   import OffstylesApi from '@/api/offstylesApi';
   import ModerationModal from './Moderation/ModerationModal.vue';
   import { useModerationStore, type ModerationTarget } from '@/stores/moderation';
   import TimesListPagination from './TimesListPagination.vue';
+
+  const route = useRoute();
   const router = useRouter();
 
   const emit = defineEmits(['updatePlayer']);
@@ -23,10 +27,10 @@
     playerName: string,
     playerSteamId: string,
     playerTimes: Time[] | null,
-    isLoading: boolean
+    isLoading: boolean,
+    total: number,
   }>()
 
-  // Validate required props
   if (!props.playerSteamId) {
     console.warn('PlayerDetails: playerSteamId is required but not provided');
   }
@@ -37,8 +41,70 @@
 
   const moderationStore = useModerationStore();
 
+  const playerStyleOptions = [Style.all, Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented];
+
+  const currentFilter = computed(() => {
+    const q = route.query as Record<string, string>;
+    return {
+      style: q.style ? Number(q.style) : Style.all,
+      sort: (q.sort as SortOrder) || 'Newest',
+      best: q.best !== undefined ? q.best === 'true' : true,
+      hasReplay: q.has_replay === 'true',
+      invalidated: q.invalidated !== undefined ? q.invalidated === 'true' : undefined,
+    };
+  });
+
+  const showStyleColumn = computed(() => currentFilter.value.style === Style.all);
+
+  const tableColumns = computed((): TimeListColumn[] => {
+    const columns: TimeListColumn[] = [
+      {
+        label: 'Map',
+        data: 'map',
+        width: showStyleColumn.value ? '22%' : '25%',
+        alignmentClasses: 'text-left',
+        link: timeLinks.mapLink,
+      },
+      {
+        label: 'Server',
+        data: 'server',
+        width: showStyleColumn.value ? '25%' : '30%',
+        classes: 'text-sm text-gray-400',
+        alignmentClasses: 'text-left text-gray-300',
+      },
+    ];
+
+    if (showStyleColumn.value) {
+      columns.push({
+        label: 'Style',
+        data: 'style',
+        width: '12%',
+        classes: 'text-sm text-gray-400',
+        alignmentClasses: 'text-right justify-end md:justify-start md:text-left',
+        numFormat: styleFormat.name,
+      });
+    }
+
+    columns.push(
+      {
+        label: 'Date',
+        data: 'date',
+        width: showStyleColumn.value ? '13%' : '15%',
+        alignmentClasses: 'text-right justify-end',
+      },
+      {
+        label: 'Time',
+        data: 'time',
+        width: showStyleColumn.value ? '28%' : '30%',
+        alignmentClasses: 'text-right justify-end monospace',
+        numFormat: dateTimeFormats.time,
+      },
+    );
+
+    return columns;
+  });
+
   const moderationTarget = computed((): ModerationTarget | null => {
-    // If we have a full user profile, use that data
     if (userProfile.value) {
       return {
         id: userProfile.value.steam_id,
@@ -48,19 +114,17 @@
         ban_ref: userProfile.value.ban_ref
       };
     }
-    
-    // Fallback: Create a basic moderation target even if profile doesn't exist in DB
-    // This allows moderation of players who haven't been indexed yet
+
     if (props.playerSteamId && props.playerName) {
       return {
         id: props.playerSteamId,
         type: 'player',
         name: props.playerName,
-        is_banned: false, // Default to not banned since we don't have profile data
+        is_banned: false,
         ban_ref: undefined
       };
     }
-    
+
     return null;
   });
 
@@ -68,43 +132,39 @@
     if (isLoadingProfile.value) {
       return { message: 'Loading...', class: 'text-gray-400' };
     }
-    
+
     if (userProfile.value?.is_banned) {
       return { message: '⚠️ Banned', class: 'text-red-400' };
     }
-    
+
     if (userProfile.value === null && !isLoadingProfile.value) {
       return { message: '⚠️ Profile not found in database', class: 'text-yellow-400' };
     }
-    
+
     return null;
   });
- 
+
   const fetchUserProfile = async () => {
     isLoadingProfile.value = true;
     try {
       userProfile.value = await OffstylesApi.getUserProfile(props.playerSteamId);
     } catch (error) {
       console.warn('Player profile not found or error occurred:', error);
-      // Set to null to indicate profile doesn't exist or couldn't be loaded
-      // This will trigger the fallback moderation target
       userProfile.value = null;
     } finally {
       isLoadingProfile.value = false;
     }
   };
 
-  const dropdownChanged = async (name : string, value : number)=>{
-    await router.replace({query:urlParams.update(name, value)});
-    emit('updatePlayer', props.playerSteamId);
-  }
-  const paginationChanged = async (page: number)=>{
-    await router.replace({query:urlParams.update('page', page)});
-    emit('updatePlayer', props.playerSteamId);
-  }
+  const filterChanged = async (name: 'style' | 'sort' | 'best' | 'has_replay' | 'invalidated', value: string | number | boolean | undefined) => {
+    await router.replace({ query: urlParams.updateMany({ [name]: value }) });
+  };
+
+  const paginationChanged = async (page: number) => {
+    await router.replace({ query: urlParams.update('page', page) });
+  };
 
   const handleModerationComplete = () => {
-    // Refresh player data and profile after moderation action
     emit('updatePlayer', props.playerSteamId);
     fetchUserProfile();
     showModerationModal.value = false;
@@ -135,9 +195,9 @@
   <div class="text-white w-full max-w-[800px] p-4 text-center flex flex-col justify-center rounded-lg mt-8">
     <div class="flex justify-between items-center mb-3">
       <div class="flex items-center gap-3">
-        <img 
-          v-if="userProfile?.avatar_url" 
-          :src="userProfile.avatar_url" 
+        <img
+          v-if="userProfile?.avatar_url"
+          :src="userProfile.avatar_url"
           :alt="playerName"
           class="w-12 h-12 rounded-full"
         />
@@ -146,7 +206,7 @@
           <div v-if="playerStatus" :class="`text-sm ${playerStatus.class}`">{{ playerStatus.message }}</div>
         </div>
       </div>
-      <button 
+      <button
         v-if="moderationStore.canModerate.value && moderationTarget"
         @click="openModerationModal"
         class="flex items-center gap-2 px-4 py-2 bg-main-700 hover:bg-main-600 border border-main-500 text-gray-200 rounded transition-colors cursor-pointer"
@@ -154,44 +214,21 @@
         <span>Moderate</span>
       </button>
     </div>
-    <div class="flex py-2">
-      <CustomDropdown :options="[Style.all, Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented]"
-       :name="'style'" :format="styleFormat.name" :default="Style.all" @dropdown-Changed="dropdownChanged"></CustomDropdown>
-    </div>
-    <TimesList v-if="props.playerTimes" :times="props.playerTimes" :cols="[
-    {
-      label: 'Map',
-      data: 'map',
-      width:'25%',
-      alignmentClasses: 'text-left',
-      link: timeLinks.mapLink
-    }, 
-    {
-      label: 'Server',
-      data: 'server',
-      width: '30%',
-      classes: 'text-sm text-gray-400',
-      alignmentClasses: 'text-left text-gray-300'
-    },
-    {
-      label: 'Date',
-      data: 'date',
-      width:'15%',
-      alignmentClasses: 'text-right justify-end',
-    },
-    {
-      label: 'Time',
-      data: 'time',
-      width: '30%',
-      alignmentClasses: 'text-right justify-end monospace',
-      numFormat: dateTimeFormats.time
-    }]"
+    <TimesFilterBar
+      :styleValue="currentFilter.style"
+      :sort="currentFilter.sort"
+      :best="currentFilter.best"
+      :hasReplay="currentFilter.hasReplay"
+      :invalidated="currentFilter.invalidated"
+      :styleOptions="playerStyleOptions"
+      @filter-Changed="filterChanged"
+    />
+    <TimesList v-if="props.playerTimes" :times="props.playerTimes" :cols="tableColumns"
     @refresh-data="() => emit('updatePlayer', props.playerSteamId)"
     ></TimesList>
-    <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected player & style</h1>
-    <TimesListPagination :limitPerPage="50" :times="props.playerTimes" :isLoading = "props.isLoading" @pagination-changed="paginationChanged"></TimesListPagination>
+    <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected player & filters</h1>
+    <TimesListPagination :limitPerPage="50" :isLoading="props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
 
-    <!-- Moderation Modal -->
     <ModerationModal
       v-if="moderationTarget"
       :target="moderationTarget"
@@ -206,4 +243,4 @@
   .monospace {
     font-family: 'Courier New', Courier, monospace;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/RecentTimes.vue b/src/components/RecentTimes.vue
index 3abe8fa..8cf5e6b 100644
--- a/src/components/RecentTimes.vue
+++ b/src/components/RecentTimes.vue
@@ -20,7 +20,8 @@
 
   const props = defineProps<{
     recentTimes: Time[] | null,
-    isLoading: boolean
+    isLoading: boolean,
+    total: number,
   }>()
  
   const currentStyle: Ref<number> = ref(urlParams.getAsObject().style ? Number(urlParams.getAsObject().style) : Style.all);
@@ -90,11 +91,9 @@
       currentStyle.value = value;
     }
     await router.replace({query:urlParams.update(name, value)});
-    emit('updateRecentTimes');
   }
   const paginationChanged = async (page: number)=>{
     await router.replace({query:urlParams.update('page', page)});
-    emit('updateRecentTimes');
   }
 </script>
 
@@ -106,12 +105,12 @@
     <div class="flex py-2 justify-between flex-wrap gap-3">
       <CustomDropdown :options="[Style.all, Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented]"
        :name="'style'" :format="styleFormat.name" :default="Style.all" @dropdown-Changed="dropdownChanged"></CustomDropdown>
-      <CheckboxInput @checkbox-Changed="dropdownChanged" :name="'wr'" :label="'Only show WR times'"></CheckboxInput>
+      <CheckboxInput @checkbox-Changed="dropdownChanged" :name="'wr'" :label="'Only show WR times'" :default="true"></CheckboxInput>
     </div>
     <TimesList v-if="props.recentTimes" :times="props.recentTimes" :cols="tableColumns"
     @refresh-data="emit('updateRecentTimes')"
     ></TimesList>
     <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected parameters</h1>
-    <TimesListPagination :limitPerPage="15" :times="props.recentTimes" :isLoading = "props.isLoading" @pagination-changed="paginationChanged"></TimesListPagination>
+    <TimesListPagination :limitPerPage="15" :isLoading = "props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/TimesFilterBar.vue b/src/components/TimesFilterBar.vue
new file mode 100644
index 0000000..345b9df
--- /dev/null
+++ b/src/components/TimesFilterBar.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+  import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';
+  import { computed } from 'vue';
+  import IconCheck from './icons/IconCheck.vue';
+  import IconChevronUpDown from './icons/IconChevronUpDown.vue';
+  import CustomDropdown from './CustomDropdown.vue';
+  import styleFormat from '@/utils/styleFormat';
+  import type { SortOrder } from '@/types/TimesFilter';
+  import { useModerationStore } from '@/stores/moderation';
+
+  type InvalidatedChoice = 'hide' | 'mix' | 'only';
+  type FilterKey = 'style' | 'sort' | 'best' | 'has_replay' | 'invalidated';
+
+  const SORT_OPTIONS: SortOrder[] = ['Fastest', 'Slowest', 'Newest', 'Oldest'];
+  const INVALIDATED_OPTIONS: { value: InvalidatedChoice, label: string }[] = [
+    { value: 'hide', label: 'Valid only' },
+    { value: 'mix', label: 'Show all' },
+    { value: 'only', label: 'Only invalidated' },
+  ];
+
+  const props = defineProps<{
+    styleValue: number,
+    sort: SortOrder,
+    best: boolean,
+    hasReplay: boolean,
+    invalidated: boolean | undefined,
+    styleOptions: number[],
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'filter-Changed', name: FilterKey, value: string | number | boolean | undefined): void;
+  }>();
+
+  const moderationStore = useModerationStore();
+
+  // Tri-state round-trip: backend reads `invalidated` as omitted = valid-only (hide),
+  // `false` = mix valid + invalidated, `true` = only invalidated. UI mirrors that exact mapping.
+  const invalidatedValue = computed<InvalidatedChoice>(() => {
+    if (props.invalidated === undefined) return 'hide';
+    return props.invalidated ? 'only' : 'mix';
+  });
+
+  const invalidatedLabel = computed(() =>
+    INVALIDATED_OPTIONS.find(o => o.value === invalidatedValue.value)?.label,
+  );
+
+  const styleChanged = (_: string, value: number) => {
+    emit('filter-Changed', 'style', value);
+  };
+
+  const sortChanged = (value: SortOrder) => {
+    emit('filter-Changed', 'sort', value);
+  };
+
+  const bestChanged = (event: Event) => {
+    const checked = (event.target as HTMLInputElement).checked;
+    emit('filter-Changed', 'best', checked);
+  };
+
+  const hasReplayChanged = (event: Event) => {
+    const checked = (event.target as HTMLInputElement).checked;
+    emit('filter-Changed', 'has_replay', checked ? true : undefined);
+  };
+
+  const invalidatedChanged = (value: InvalidatedChoice) => {
+    const mapped = value === 'hide' ? undefined : value === 'only';
+    emit('filter-Changed', 'invalidated', mapped);
+  };
+</script>
+
+<template>
+  <div class="flex py-2 flex-wrap gap-3 items-center">
+    <CustomDropdown
+      :options="props.styleOptions"
+      :name="'style'"
+      :format="styleFormat.name"
+      :default="props.styleValue"
+      @dropdown-Changed="styleChanged"
+    />
+
+    <Listbox :model-value="props.sort" @update:model-value="sortChanged" class="w-auto">
+      <div class="relative min-w-40">
+        <ListboxButton class="w-full" v-slot="{open}">
+          <div :class="[
+            open ? 'border border-main-400' : 'border border-transparent',
+            'bg-main-700 p-2 px-5 rounded-md w-full text-left']">
+            {{ props.sort }}
+            <span class="pointer-events-none absolute right-0 inset-y-0 flex items-center pe-1">
+              <IconChevronUpDown />
+            </span>
+          </div>
+        </ListboxButton>
+        <ListboxOptions class="absolute mt-1 w-full overflow-auto rounded-md bg-main-800 p-1 py-0 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm z-[999] border border-main-400 drop-shadow-lg">
+          <ListboxOption v-for="option in SORT_OPTIONS" :value="option" :key="option" v-slot="{ active, selected }" as="template">
+            <li :class="[
+              active ? 'bg-main-400 text-gray-100' : selected ? 'bg-main-600 text-gray-200' : 'text-gray-300',
+              'relative cursor-default select-none py-2 my-1 pl-9 pr-4 rounded',
+            ]">
+              <span class="block truncate">{{ option }}</span>
+              <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-2 text-gray-200">
+                <IconCheck class="h-4 w-4" aria-hidden="true" />
+              </span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </div>
+    </Listbox>
+
+    <label class="flex items-center gap-2 cursor-pointer">
+      <input type="checkbox" :checked="props.best" @change="bestChanged">
+      <span>Best per map</span>
+    </label>
+
+    <label class="flex items-center gap-2 cursor-pointer">
+      <input type="checkbox" :checked="props.hasReplay" @change="hasReplayChanged">
+      <span>Has replay</span>
+    </label>
+
+    <Listbox
+      v-if="moderationStore.canInvalidateTimes.value"
+      :model-value="invalidatedValue"
+      @update:model-value="invalidatedChanged"
+      class="w-auto"
+    >
+      <div class="relative min-w-40">
+        <ListboxButton class="w-full" v-slot="{open}">
+          <div :class="[
+            open ? 'border border-main-400' : 'border border-transparent',
+            'bg-main-700 p-2 px-5 rounded-md w-full text-left']">
+            {{ invalidatedLabel }}
+            <span class="pointer-events-none absolute right-0 inset-y-0 flex items-center pe-1">
+              <IconChevronUpDown />
+            </span>
+          </div>
+        </ListboxButton>
+        <ListboxOptions class="absolute mt-1 w-full overflow-auto rounded-md bg-main-800 p-1 py-0 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm z-[999] border border-main-400 drop-shadow-lg">
+          <ListboxOption v-for="option in INVALIDATED_OPTIONS" :value="option.value" :key="option.value" v-slot="{ active, selected }" as="template">
+            <li :class="[
+              active ? 'bg-main-400 text-gray-100' : selected ? 'bg-main-600 text-gray-200' : 'text-gray-300',
+              'relative cursor-default select-none py-2 my-1 pl-9 pr-4 rounded',
+            ]">
+              <span class="block truncate">{{ option.label }}</span>
+              <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-2 text-gray-200">
+                <IconCheck class="h-4 w-4" aria-hidden="true" />
+              </span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </div>
+    </Listbox>
+  </div>
+</template>
diff --git a/src/components/TimesListPagination.vue b/src/components/TimesListPagination.vue
index e5a1f55..ffa5036 100644
--- a/src/components/TimesListPagination.vue
+++ b/src/components/TimesListPagination.vue
@@ -1,21 +1,27 @@
 <script setup lang="ts">
-import type { Time } from '@/types/Time';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
   const props = defineProps<{
     limitPerPage: number,
-    times: Time[] | null,
-    isLoading: boolean
+    isLoading: boolean,
+    total: number,
   }>()
   const emit = defineEmits(['pagination-Changed']);
   const route = useRoute();
-  
-  // Make currentPage reactive to URL changes
+
   const currentPage = computed(() => {
-    const pageParam = route.query.page;
-    return pageParam ? Number(pageParam) : 1;
+    const n = route.query.page ? Number(route.query.page) : 1;
+    return Number.isFinite(n) && n >= 1 ? n : 1;
   });
 
+  const totalPages = computed(() =>
+    Math.max(1, Math.ceil(props.total / props.limitPerPage))
+  );
+
+  const nextDisabled = computed(() =>
+    props.isLoading || currentPage.value >= totalPages.value
+  );
+
   function paginationChanged(page : number){
     emit('pagination-Changed', page);
   }
@@ -26,6 +32,7 @@ import { useRoute } from 'vue-router';
   <div class="w-full py-2 flex justify-between align-end">
     <div class="text-gray-400 text-sm my-auto">
       Page <span class="text-base text-gray-200">{{ currentPage }}</span>
+      of <span class="text-base text-gray-200">{{ totalPages }}</span>
     </div>
     <div class="flex items-center gap-1 text-gray-200">
       <button class="btn bg-main-900 rounded p-1.5 cursor-pointer disabled:opacity-50 disabled:pointer-events-none" @click="paginationChanged(currentPage-1)" :disabled="props.isLoading || currentPage <= 1">
@@ -33,11 +40,11 @@ import { useRoute } from 'vue-router';
           <path d="M15 6l-6 6l6 6"></path>
         </svg>
       </button>
-      <button class="btn bg-main-900 rounded p-1.5 cursor-pointer disabled:opacity-50 disabled:pointer-events-none" @click="paginationChanged(currentPage+1)" :disabled="props.isLoading || (props.times !== null && props.times.length < props.limitPerPage)">
+      <button class="btn bg-main-900 rounded p-1.5 cursor-pointer disabled:opacity-50 disabled:pointer-events-none" @click="paginationChanged(currentPage+1)" :disabled="nextDisabled">
         <svg xmlns="http://www.w3.org/2000/svg" x-bind:width="size" x-bind:height="size" viewBox="0 0 24 24" fill="none" stroke="currentColor" x-bind:stroke-width="stroke" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
           <path d="M9 6l6 6l-6 6"></path>
         </svg>
       </button>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/types/Time.ts b/src/types/Time.ts
index 96e34e6..2e46f3c 100644
--- a/src/types/Time.ts
+++ b/src/types/Time.ts
@@ -19,6 +19,11 @@ export interface Time {
   is_banned: boolean;
   invalid_ref?: string | null;
   server?: RecordHeaders | null;
-  rank?: number;
-  wr_time?: number;
+  rank?: number | null;
+  wr_time?: number | null;
+}
+
+export interface TimesPage {
+  data: Time[];
+  total: number;
 }
diff --git a/src/types/TimesFilter.ts b/src/types/TimesFilter.ts
new file mode 100644
index 0000000..9aa3e56
--- /dev/null
+++ b/src/types/TimesFilter.ts
@@ -0,0 +1,15 @@
+export type SortOrder = 'Fastest' | 'Slowest' | 'Newest' | 'Oldest';
+
+export interface TimesFilter {
+  style?: number;
+  page: number;
+  limit: number;
+  sort?: SortOrder;
+  best?: boolean;
+  has_replay?: boolean;
+  invalidated?: boolean;
+  map?: string;
+  steamid?: string;
+  wr?: boolean;
+  recent?: boolean;
+}
diff --git a/src/utils/timesFilterFromQuery.ts b/src/utils/timesFilterFromQuery.ts
new file mode 100644
index 0000000..e8f7120
--- /dev/null
+++ b/src/utils/timesFilterFromQuery.ts
@@ -0,0 +1,42 @@
+import type { TimesFilter, SortOrder } from '@/types/TimesFilter';
+import { Style } from '@/types/Style';
+
+export interface FilterDefaults {
+  style: number;
+  sort: SortOrder;
+  best: boolean;
+  limit: number;
+}
+
+const VALID_SORTS: readonly SortOrder[] = ['Fastest', 'Slowest', 'Newest', 'Oldest'];
+
+const parseSort = function(raw: string | undefined, fallback: SortOrder): SortOrder {
+  return VALID_SORTS.includes(raw as SortOrder) ? (raw as SortOrder) : fallback;
+};
+
+const fromQuery = function(
+  query: Record<string, string>,
+  defaults: FilterDefaults,
+  canSeeInvalidated: boolean = false,
+): TimesFilter {
+  const styleRaw = query.style ? parseInt(query.style) : defaults.style;
+  const style = styleRaw === Style.all || Number.isNaN(styleRaw) ? undefined : styleRaw;
+
+  const pageRaw = query.page ? parseInt(query.page) : 1;
+  const page = Number.isFinite(pageRaw) && pageRaw >= 1 ? pageRaw : 1;
+
+  return {
+    style,
+    page,
+    limit: defaults.limit,
+    sort: parseSort(query.sort, defaults.sort),
+    best: query.best !== undefined ? query.best === 'true' : defaults.best,
+    has_replay: query.has_replay === 'true' ? true : undefined,
+    // Non-moderators never send invalidated to the server even if it leaks into a shared URL.
+    invalidated: canSeeInvalidated && query.invalidated !== undefined
+      ? query.invalidated === 'true'
+      : undefined,
+  };
+};
+
+export default { fromQuery };
diff --git a/src/utils/urlParams.ts b/src/utils/urlParams.ts
index ea81191..5de41fa 100644
--- a/src/utils/urlParams.ts
+++ b/src/utils/urlParams.ts
@@ -28,4 +28,18 @@ const clearPage = function() {
   return Object.fromEntries(params)
 }
 
-export default {update, get, getAsObject, clearPage};
+const updateMany = function(updates: Record<string, string | number | boolean | undefined>) {
+  const params = new URLSearchParams(window.location.search);
+  for (const [key, value] of Object.entries(updates)) {
+    // Style.all is the implicit default — keep it out of the URL so shared links stay clean.
+    if (value === undefined || (key === 'style' && value === Style.all)) {
+      params.delete(key);
+    } else {
+      params.set(key, String(value));
+    }
+  }
+  params.delete('page');
+  return Object.fromEntries(params);
+};
+
+export default {update, get, getAsObject, clearPage, updateMany};
diff --git a/src/views/IndividualRecordView.vue b/src/views/IndividualRecordView.vue
index b55d048..210d478 100644
--- a/src/views/IndividualRecordView.vue
+++ b/src/views/IndividualRecordView.vue
@@ -2,7 +2,7 @@
   import { ref, onMounted, computed } from 'vue'
   import type { Ref } from 'vue'
   import OffstylesApi from '@/api/offstylesApi';
-  import type { WRAwareRecord } from '@/api/offstylesApi';
+  import type { Time } from '@/types/Time';
   import loadWheel from '@/components/icons/loadWheel.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import RelativeDate from '@/components/RelativeDate.vue';
@@ -18,7 +18,7 @@
   const router = useRouter();
   const { isLoggedIn } = useAuth();
   const isLoading: Ref<boolean> = ref(false);
-  const record: Ref<WRAwareRecord | null> = ref(null);
+  const record: Ref<Time | null> = ref(null);
   const error: Ref<string | null> = ref(null);
   const showReplayViewer: Ref<boolean> = ref(false);
 
diff --git a/src/views/MapsView.vue b/src/views/MapsView.vue
index ea37cde..63a9014 100644
--- a/src/views/MapsView.vue
+++ b/src/views/MapsView.vue
@@ -9,6 +9,8 @@
   import type { Time } from '@/types/Time';
   import SearchBoxMap from '@/components/SearchBoxMap.vue';
   import { Style } from '@/types/Style';
+  import timesFilterFromQuery from '@/utils/timesFilterFromQuery';
+  import { useModerationStore } from '@/stores/moderation';
 
   const props = defineProps({
     mapName: {
@@ -16,54 +18,68 @@
       required: false,
     },
   });
-  
+
   const route = useRoute();
+  const moderationStore = useModerationStore();
   const isLoading: Ref<boolean> = ref(false);
   const mapTimes: Ref<Time[] | null> = ref(null);
+  const mapTotal: Ref<number> = ref(0);
   const mapName: Ref<string> = ref(props.mapName ?? '');
+  const loadError: Ref<string | null> = ref(null);
 
-  //update selected_map & url
-  async function updateMap(map:string){
+  async function updateMap(map: string){
     await getMapTimes(map);
   }
 
-  onMounted(async ()=>{
-    //set initial map from url
-    if(typeof props.mapName !== 'undefined'){
+  onMounted(async () => {
+    if (typeof props.mapName !== 'undefined') {
       updateMap(props.mapName);
     }
   });
 
   watch(() => route.query, () => {
-    getMapTimes(props.mapName!);
-  })
+    if (props.mapName) getMapTimes(props.mapName);
+  });
 
   async function getMapTimes(name: string){
     mapName.value = name;
     isLoading.value = true;
     mapTimes.value = null;
-    const paramsObj = urlParams.getAsObject();
-    
-    // Convert string params to numbers with defaults
-    const style = paramsObj.style ? parseInt(paramsObj.style) : Style.normal;
-    const page = paramsObj.page ? parseInt(paramsObj.page) : 1;
-    
-    const apiMapTimes = await OffstylesApi.getTimesByMap(name, style, undefined, undefined, page);
-    if(apiMapTimes.length){
-      mapTimes.value = apiMapTimes;
+    loadError.value = null;
+
+    const filter = timesFilterFromQuery.fromQuery(
+      urlParams.getAsObject(),
+      { style: Style.normal, sort: 'Fastest', best: true, limit: 50 },
+      moderationStore.canInvalidateTimes.value,
+    );
+    filter.map = name;
+
+    try {
+      const result = await OffstylesApi.getTimes(filter);
+      mapTotal.value = result.total;
+      if (result.data.length) {
+        mapTimes.value = result.data;
+      }
+    } catch (err) {
+      loadError.value = err instanceof Error ? err.message : 'Failed to load times';
+      console.error('Failed to fetch map times:', err);
+    } finally {
+      isLoading.value = false;
     }
-    isLoading.value = false;
   }
 </script>
 
 <template>
   <main>
     <div class="flex flex-col items-center justify-center">
-      <!--<ComboBox :select_options="maps" :selected_option="selected_map" :is_loading="maps.length === 0" :type="'map'" @select-Changed="selectChanged"></ComboBox>-->
       <SearchBoxMap @updateMap="updateMap" :placeholder="'Enter a Map'"></SearchBoxMap>
-      <MapDetails v-if="mapName !== ''" :mapTimes="mapTimes" :mapName="mapName" :isLoading="isLoading" @updateMap="updateMap"></MapDetails>
+      <MapDetails v-if="mapName !== ''" :mapTimes="mapTimes" :mapName="mapName" :isLoading="isLoading" :total="mapTotal" @updateMap="updateMap"></MapDetails>
       <loadWheel v-if="isLoading" class="text-gray-200 mt-5"></loadWheel>
+      <div v-if="loadError && !isLoading" class="text-red-400 bg-red-900/20 p-4 rounded-lg mt-5 max-w-[600px]">
+        <p>Failed to load times: {{ loadError }}</p>
+        <button @click="updateMap(mapName)" class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm">Retry</button>
+      </div>
       <h1 v-if="mapName === ''" class="text-lg text-gray-100 mt-5">Select a map above to view leaderboards</h1>
     </div>
   </main>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/PlayersView.vue b/src/views/PlayersView.vue
index f5edff7..c9a6619 100644
--- a/src/views/PlayersView.vue
+++ b/src/views/PlayersView.vue
@@ -9,6 +9,8 @@
   import type { Time } from '@/types/Time';
   import SearchBoxPlayer from '@/components/SearchBoxPlayer.vue';
   import { Style } from '@/types/Style';
+  import timesFilterFromQuery from '@/utils/timesFilterFromQuery';
+  import { useModerationStore } from '@/stores/moderation';
 
   const props = defineProps({
     playerSteamId: {
@@ -16,47 +18,44 @@
       required: false,
     },
   });
-  
+
   const route = useRoute();
+  const moderationStore = useModerationStore();
   const isLoading: Ref<boolean> = ref(false);
   const playerTimes: Ref<Time[] | null> = ref(null);
+  const playerTotal: Ref<number> = ref(0);
   const playerSteamId: Ref<string> = ref(props.playerSteamId ?? '');
   const playerName: Ref<string> = ref('');
+  const loadError: Ref<string | null> = ref(null);
 
-  //update selected_map & url
-  async function updatePlayer(playerId:string){
+  async function updatePlayer(playerId: string){
     await getPlayerTimes(playerId);
   }
 
-  // Clear player data and reset to initial state
   function clearPlayerData() {
     playerSteamId.value = '';
     playerName.value = '';
     playerTimes.value = null;
+    playerTotal.value = 0;
     isLoading.value = false;
+    loadError.value = null;
   }
 
-  onMounted(async ()=>{
-    //set initial map from url
-    if(typeof props.playerSteamId !== 'undefined'){
+  onMounted(async () => {
+    if (typeof props.playerSteamId !== 'undefined') {
       updatePlayer(props.playerSteamId);
     }
   });
 
-  // Watch for changes in playerSteamId prop to handle navigation between specific player and general page
   watch(() => props.playerSteamId, (newPlayerSteamId) => {
     if (!newPlayerSteamId) {
-      // If navigating to general players page, clear the data
       clearPlayerData();
     } else {
-      // If navigating to a specific player, load their data
       updatePlayer(newPlayerSteamId);
     }
   });
 
-  // Also watch for route changes to handle navigation
   watch(() => route.path, (newPath) => {
-    // If navigating to the base players page, clear everything
     if (newPath === '/players' && !props.playerSteamId) {
       clearPlayerData();
     }
@@ -64,47 +63,62 @@
 
   watch(() => route.query, () => {
     if (props.playerSteamId) {
-      getPlayerTimes(props.playerSteamId)
+      getPlayerTimes(props.playerSteamId);
     }
-  })
+  });
 
   async function getPlayerTimes(playerId: string){
-    // Don't proceed if playerId is undefined or empty
     if (!playerId) return;
-    
+
     playerSteamId.value = playerId;
     isLoading.value = true;
     playerTimes.value = null;
-    const paramsObj = urlParams.getAsObject();
-    
-    // Convert string params to numbers with defaults
-    const style = paramsObj.style ? parseInt(paramsObj.style) : Style.all;
-    const page = paramsObj.page ? parseInt(paramsObj.page) : 1;
-    
-    const apiPlayerTimes = await OffstylesApi.getTimesByPlayer(playerId, undefined, style, undefined, page);
-    if(apiPlayerTimes.length){
-      playerTimes.value = apiPlayerTimes;
-      playerName.value = apiPlayerTimes[0].name;
+    loadError.value = null;
+
+    const filter = timesFilterFromQuery.fromQuery(
+      urlParams.getAsObject(),
+      { style: Style.all, sort: 'Newest', best: true, limit: 50 },
+      moderationStore.canInvalidateTimes.value,
+    );
+    filter.steamid = playerId;
+
+    try {
+      const result = await OffstylesApi.getTimes(filter);
+      playerTotal.value = result.total;
+      if (result.data.length) {
+        playerTimes.value = result.data;
+        playerName.value = result.data[0].name;
+      } else if (!playerName.value) {
+        playerName.value = playerId;
+      }
+    } catch (err) {
+      loadError.value = err instanceof Error ? err.message : 'Failed to load times';
+      console.error('Failed to fetch player times:', err);
+    } finally {
+      isLoading.value = false;
     }
-    isLoading.value = false;
   }
 </script>
 
 <template>
   <main>
     <div class="flex flex-col items-center justify-center">
-      <!--<SearchBox @updateMap="updatePlayer"></SearchBox>-->
       <SearchBoxPlayer @updatePlayer="updatePlayer" :placeholder="'Enter a Player'"></SearchBoxPlayer>
-      <PlayerDetails 
+      <PlayerDetails
         v-if="playerSteamId && playerName && playerSteamId !== ''"
-        :playerTimes="playerTimes" 
-        :playerSteamId="playerSteamId" 
-        :playerName="playerName" 
-        :isLoading="isLoading" 
+        :playerTimes="playerTimes"
+        :playerSteamId="playerSteamId"
+        :playerName="playerName"
+        :isLoading="isLoading"
+        :total="playerTotal"
         @updatePlayer="updatePlayer"
       />
       <loadWheel v-if="isLoading" class="text-gray-200 mt-5"></loadWheel>
+      <div v-if="loadError && !isLoading" class="text-red-400 bg-red-900/20 p-4 rounded-lg mt-5 max-w-[600px]">
+        <p>Failed to load times: {{ loadError }}</p>
+        <button @click="updatePlayer(playerSteamId)" class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm">Retry</button>
+      </div>
       <h1 v-if="playerSteamId === ''" class="text-lg text-gray-100 mt-5">Select a player above to view their times</h1>
     </div>
   </main>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/RecentRecordsView.vue b/src/views/RecentRecordsView.vue
index b388a38..2f2a38e 100644
--- a/src/views/RecentRecordsView.vue
+++ b/src/views/RecentRecordsView.vue
@@ -1,42 +1,67 @@
 <script setup lang="ts">
-  import { ref, onMounted } from 'vue'
+  import { ref, onMounted, watch } from 'vue'
+  import { useRoute } from 'vue-router';
   import type { Ref } from 'vue'
   import OffstylesApi from '@/api/offstylesApi';
   import loadWheel from '@/components/icons/loadWheel.vue';
   import RecentTimes from '@/components/RecentTimes.vue';
   import urlParams from '@/utils/urlParams';
   import type { Time } from '@/types/Time';
+  import type { TimesFilter } from '@/types/TimesFilter';
   import { Style } from '@/types/Style';
 
+  const route = useRoute();
   const isLoading: Ref<boolean> = ref(false);
   const recentTimes: Ref<Time[] | null> = ref(null);
-  onMounted(async ()=>{
-    getRecentTimes();
-  });
+  const recentTotal: Ref<number> = ref(0);
+  const loadError: Ref<string | null> = ref(null);
+
+  onMounted(getRecentTimes);
+
+  watch(() => route.query, getRecentTimes);
+
   async function getRecentTimes(){
     isLoading.value = true;
     recentTimes.value = null;
+    loadError.value = null;
     const paramsObj = urlParams.getAsObject();
-    
-    // Convert string params to numbers with defaults
-    const style = paramsObj.style ? parseInt(paramsObj.style) : Style.all;
-    const page = paramsObj.page ? parseInt(paramsObj.page) : 1;
-    const wr = paramsObj.wr ? paramsObj.wr === 'true' : true; // Convert string to boolean
-    
-    const apiRecentTimes = await OffstylesApi.getRecentTimes(style, undefined, page, wr);
-    if(apiRecentTimes.length){
-      recentTimes.value = apiRecentTimes;
+
+    const styleRaw = paramsObj.style ? parseInt(paramsObj.style) : Style.all;
+    const pageRaw = paramsObj.page ? parseInt(paramsObj.page) : 1;
+    const filter: TimesFilter = {
+      style: styleRaw === Style.all || Number.isNaN(styleRaw) ? undefined : styleRaw,
+      page: Number.isFinite(pageRaw) && pageRaw >= 1 ? pageRaw : 1,
+      limit: 15,
+      wr: paramsObj.wr !== undefined ? paramsObj.wr === 'true' : true,
+      recent: true,
+      best: false,
+    };
+
+    try {
+      const result = await OffstylesApi.getTimes(filter);
+      recentTotal.value = result.total;
+      if (result.data.length) {
+        recentTimes.value = result.data;
+      }
+    } catch (err) {
+      loadError.value = err instanceof Error ? err.message : 'Failed to load times';
+      console.error('Failed to fetch recent times:', err);
+    } finally {
+      isLoading.value = false;
     }
-    isLoading.value = false;
   }
 </script>
 
 <template>
   <main>
     <div class="flex flex-col items-center justify-center">
-      <RecentTimes :recentTimes="recentTimes" :isLoading="isLoading" @updateRecentTimes="getRecentTimes"></RecentTimes>
+      <RecentTimes :recentTimes="recentTimes" :isLoading="isLoading" :total="recentTotal" @updateRecentTimes="getRecentTimes"></RecentTimes>
       <loadWheel v-if="isLoading" class="text-gray-200 mt-5"></loadWheel>
-      <p v-if="!recentTimes && !isLoading">No recent times available.</p> <!-- Added message for no data -->
+      <div v-if="loadError && !isLoading" class="text-red-400 bg-red-900/20 p-4 rounded-lg mt-5 max-w-[600px]">
+        <p>Failed to load times: {{ loadError }}</p>
+        <button @click="getRecentTimes" class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm">Retry</button>
+      </div>
+      <p v-if="!recentTimes && !isLoading && !loadError">No recent times available.</p>
     </div>
   </main>
-</template>
\ No newline at end of file
+</template>