diff --git a/src/components/MapDetails.vue b/src/components/MapDetails.vue
index a0455bb..fac011d 100644
--- a/src/components/MapDetails.vue
+++ b/src/components/MapDetails.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import TimesList from './TimesList.vue';
+  import TimesList from './TimeLists/TimesList.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
@@ -8,7 +8,7 @@
   import { Style } from "@/types/Style";
   import urlParams from '@/utils/urlParams';
   import { useRouter } from 'vue-router';
-  import TimesListPagination from './TimesListPagination.vue';
+  import TimesListPagination from './TimeLists/TimesListPagination.vue';
   const router = useRouter();
 
   const emit = defineEmits(['updateMap']);
@@ -42,6 +42,9 @@
       data: 'name',
       placement: true,
       width:'25%',
+      col:1,
+      colMobile:1,
+      widthMobile:'40%',
       alignmentClasses: 'text-left',
       link: timeLinks.playerLink
     }, 
@@ -49,21 +52,32 @@
       label: 'Server',
       data: 'server',
       width: '30%',
+      col:2,
+      colMobile:1,
+      rowMobile:2,
       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%',
+      col:3,
+      colMobile:2,
+      colSpanMobile:2,
+      rowMobile:1,
+      widthMobile:'20%',
       alignmentClasses: 'text-right justify-end monospace',
       numFormat: dateTimeFormats.time
+    },
+    {
+      label: 'Date',
+      data: 'date',
+      width:'15%',
+      col:4,
+      colMobile:3,
+      rowMobile:2,
+      alignmentClasses: 'text-right justify-end',
     }]"
     @refresh-data="() => emit('updateMap', props.mapName)"
     ></TimesList>
diff --git a/src/components/PlayerDetails.vue b/src/components/PlayerDetails.vue
index f7f6c69..11c12e8 100644
--- a/src/components/PlayerDetails.vue
+++ b/src/components/PlayerDetails.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import TimesList from './TimesList.vue';
+  import TimesList from './TimeLists/TimesList.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
@@ -14,7 +14,7 @@
   import OffstylesApi from '@/api/offstylesApi';
   import ModerationModal from './Moderation/ModerationModal.vue';
   import { useModerationStore, type ModerationTarget } from '@/stores/moderation';
-  import TimesListPagination from './TimesListPagination.vue';
+  import TimesListPagination from './TimeLists/TimesListPagination.vue';
   const router = useRouter();
 
   const emit = defineEmits(['updatePlayer']);
@@ -163,6 +163,9 @@
       label: 'Map',
       data: 'map',
       width:'25%',
+      col:1,
+      colMobile:1,
+      widthMobile:'35%',
       alignmentClasses: 'text-left',
       link: timeLinks.mapLink
     }, 
@@ -170,21 +173,31 @@
       label: 'Server',
       data: 'server',
       width: '30%',
+      col:2,
+      colMobile:1,
+      rowMobile:2,
       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%',
+      col:3,
+      colMobile:2,
+      colSpanMobile:2,
+      widthMobile:'20%',
       alignmentClasses: 'text-right justify-end monospace',
       numFormat: dateTimeFormats.time
+    },
+    {
+      label: 'Date',
+      data: 'date',
+      width:'15%',
+      col:4,
+      colMobile:3,
+      rowMobile:2,
+      alignmentClasses: 'text-right justify-end',
     }]"
     @refresh-data="() => emit('updatePlayer', props.playerSteamId)"
     ></TimesList>
diff --git a/src/components/RecentTimes.vue b/src/components/RecentTimes.vue
index 3abe8fa..397c358 100644
--- a/src/components/RecentTimes.vue
+++ b/src/components/RecentTimes.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import TimesList from './TimesList.vue';
+  import TimesList from './TimeLists/TimesList.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
@@ -10,7 +10,7 @@
   import urlParams from '@/utils/urlParams';
   import { useRouter } from 'vue-router';
   import CheckboxInput from './CheckboxInput.vue';
-  import TimesListPagination from './TimesListPagination.vue';
+  import TimesListPagination from './TimeLists/TimesListPagination.vue';
   import { ref, computed } from 'vue';
   import type { Ref } from 'vue';
 
@@ -25,14 +25,18 @@
  
   const currentStyle: Ref<number> = ref(urlParams.getAsObject().style ? Number(urlParams.getAsObject().style) : Style.all);
 
-  const showStyleColumn = computed(() => currentStyle.value === Style.all);
-
   const tableColumns = computed((): TimeListColumn[] => {
     const columns: TimeListColumn[] = [
       {
         label: 'Player',
         data: 'name',
-        width: showStyleColumn.value ? '18%' : '20%',
+        col:1,
+        row:1,
+        rowSpan:2,
+        colMobile: 1,
+        rowMobile: 1,
+        width: '20%',
+        widthMobile:'30%',
         classes: 'font-semibold',
         alignmentClasses: 'text-left',
         link: timeLinks.playerLink
@@ -40,47 +44,66 @@
       {
         label: 'Map',
         data: 'map',
-        width: showStyleColumn.value ? '18%' : '20%',
+        col:2,
+        row:1,
+        colMobile:1,
+        colSpanMobile:2,
+        rowMobile:2,
+        width: '35%',
         classes: 'text-gray-200',
-        alignmentClasses: 'text-right justify-end md:justify-start md:text-left',
+        alignmentClasses: 'text-left justify-start',
         link: timeLinks.mapLink
-      }
-    ];
-
-    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: 'Server',
         data: 'server',
-        width: showStyleColumn.value ? '18%' : '20%',
-        classes: 'text-sm text-gray-400',
-        alignmentClasses: 'text-right justify-end md:justify-start md:text-left text-gray-300'
+        col:2,
+        row:2,
+        colMobile:1,
+        colSpanMobile:2,
+        rowMobile:3,
+        classes: 'text-xs text-gray-400',
+        alignmentClasses: 'justify-start text-left'
+      },
+      {
+        label: 'Time',
+        data: 'time',
+        col:3,
+        row:1,
+        rowSpan:2,
+        colMobile:2,
+        colSpanMobile:2,
+        rowMobile:1,
+        width: '30%',
+        widthMobile: '20%',
+        classes: 'monospace',
+        alignmentClasses: 'text-right justify-end lg:text-left lg:justify-start lg:ml-16',
+        numFormat: dateTimeFormats.time
+      },
+      {
+        label: 'Style',
+        data: 'style',
+        col:4,
+        row:1,
+        colMobile:3,
+        rowMobile:2,
+        width: '15%',
+        classes: '',
+        alignmentClasses: 'text-right justify-end',
+        numFormat: styleFormat.name
       },
       {
         label: 'Date',
         data: 'date',
-        width: showStyleColumn.value ? '12%' : '15%',
+        col:4,
+        row:2,
+        colMobile:3,
+        rowMobile:3,
+        classes: 'text-xs text-gray-400',
         alignmentClasses: 'text-right justify-end',
         numFormat: dateTimeFormats.date
       },
-      {
-        label: 'Time',
-        data: 'time',
-        width: showStyleColumn.value ? '22%' : '25%',
-        alignmentClasses: 'text-right justify-end monospace',
-        numFormat: dateTimeFormats.time
-      }
-    );
+    ];
 
     return columns;
   });
diff --git a/src/components/TimesList.vue b/src/components/TimeLists/TimesList.vue
similarity index 96%
rename from src/components/TimesList.vue
rename to src/components/TimeLists/TimesList.vue
index 6e8da3c..3e076dd 100644
--- a/src/components/TimesList.vue
+++ b/src/components/TimeLists/TimesList.vue
@@ -5,7 +5,7 @@ import TimesListItem from './TimesListItem.vue';
 import type { Time } from '@/types/Time';
 import type { TimeListColumn } from '@/types/TimeListColumn';
 import TimesListHeading from './TimesListHeading.vue';
-import BulkModerationModal from './Moderation/BulkModerationModal.vue';
+import BulkModerationModal from '../Moderation/BulkModerationModal.vue';
 import { useModerationStore } from '@/stores/moderation';
 
   const props = defineProps<{
diff --git a/src/components/TimeLists/TimesListHeading.vue b/src/components/TimeLists/TimesListHeading.vue
new file mode 100644
index 0000000..355d35d
--- /dev/null
+++ b/src/components/TimeLists/TimesListHeading.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+  import type { TimeListColumn } from '@/types/TimeListColumn';
+  import TimesListHeadingColumn from './TimesListHeadingColumn.vue';
+  import { computed } from 'vue';
+  const props = defineProps<{
+      cols: TimeListColumn[]
+    }>();
+
+  const totalCols = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.col && v.colSpan ? v.col+v.colSpan : 1}));
+  })
+  const totalRows = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.row && v.rowSpan ? v.row+v.rowSpan : 1}));
+  })
+
+  const colWidthsStyle = computed(()=>{
+    return props.cols.filter((v)=>v.row === undefined || v.row === 1) //only first row
+    .sort((a,b)=>a.col - b.col) //sort into correct col order
+    .map((v)=>v.width ? v.width : 'auto').join(' '); //make css
+  })
+
+  const rowWidthsStyle = computed(()=>{
+    return '1fr'; 
+  })
+
+    const totalRowsMobile = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.rowMobile && v.rowSpanMobile ? v.rowMobile+v.rowSpanMobile : 1}));
+  })
+
+  const firstRowCols = computed(()=>{
+    return props.cols.filter((v)=>v.row === undefined || v.row === 1);
+  })
+  
+  const colWidthsStyleMobile = computed(()=>{
+    return props.cols.filter((v)=>(v.rowMobile === undefined || v.rowMobile === 1)) //only first row
+    .sort((a,b)=>(a.colMobile ?? 1) - (b.colMobile ?? 1)) //sort into correct col order
+    .map((v)=>v.widthMobile ? v.widthMobile : 'auto').join(' '); //make css
+  })
+
+  const rowWidthsStyleMobile = computed(()=>{
+    return totalRowsMobile.value > 1 ? '1fr 0.5fr' : '1fr'; 
+  });
+</script>
+
+
+<template>
+  <div class="grid os-grid-cols-auto px-1 bg-main-900 fw-700 text-xs pt-1.5 pb-2 text-gray-200 items-center">
+    <TimesListHeadingColumn v-for="(col,index) in firstRowCols" :col="col" :key="index"></TimesListHeadingColumn>
+  </div>
+</template>
+
+<style scoped>
+  .os-grid-cols-auto{
+    grid-template-columns: v-bind('colWidthsStyle');
+    grid-template-rows: v-bind('rowWidthsStyle');
+  }
+  @media(max-width:767px){
+    .os-grid-cols-auto{
+      grid-template-columns: v-bind('colWidthsStyleMobile');
+      grid-template-rows: v-bind('rowWidthsStyleMobile');
+    }
+    .os-grid-cols-auto>.grid-col{
+      width:100%;
+    }
+    .os-grid-cols-auto>.grid-col:nth-child(1n){
+      text-align: left;
+      justify-content: left;
+    }
+    .os-grid-cols-auto>.grid-col:nth-child(2n){
+      text-align: right;
+      justify-content: right;
+    }
+    .os-grid-cols-auto>.grid-col:nth-child(2n+1):last-child{
+      grid-column:span 2;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/TimeLists/TimesListHeadingColumn.vue b/src/components/TimeLists/TimesListHeadingColumn.vue
new file mode 100644
index 0000000..352f549
--- /dev/null
+++ b/src/components/TimeLists/TimesListHeadingColumn.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import type { TimeListColumn } from '@/types/TimeListColumn';
+  import { computed } from 'vue';
+  const props = defineProps<{
+      col: TimeListColumn
+    }>();
+
+
+</script>
+
+
+<template>
+    <div class="px-1.5 time-grid-heading-col">
+      <div :class="`${col.alignmentClasses} ${col.row && col.row > 1 ? 'text-gray-500 leading-[1.17em]' : ''}`">{{ col.label }}</div>
+    </div>
+</template>
+
+<style scoped>
+.time-grid-heading-col{
+  grid-column: v-bind('`${col.col} / span ${col.colSpan ?? 1}`');
+  grid-row: v-bind('`${col.row ?? 1} / span ${col.rowSpan ?? 1}`')
+}
+@media (max-width:767px) {
+  .time-grid-heading-col{
+    grid-column: v-bind('`${col.colMobile ?? 1} / span ${col.colSpanMobile ?? 1}`');
+    grid-row: v-bind('`${col.rowMobile ?? 1} / span ${col.rowSpanMobile ?? 1}`')
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/TimesListItem.vue b/src/components/TimeLists/TimesListItem.vue
similarity index 71%
rename from src/components/TimesListItem.vue
rename to src/components/TimeLists/TimesListItem.vue
index 5c0975a..389ff1a 100644
--- a/src/components/TimesListItem.vue
+++ b/src/components/TimeLists/TimesListItem.vue
@@ -3,9 +3,9 @@
   import type { TimeListColumn } from '@/types/TimeListColumn';
   import type { Ref } from 'vue';
   import { computed, ref } from 'vue';
-  import TimesListItemContent from './TimesListItemContent.vue';
+  import TimesListItemColumn from './TimesListItemColumn.vue';
   import TimesListItemMoreDetails from './TimesListItemMoreDetails.vue';
-  import ModerationModal from './Moderation/ModerationModal.vue';
+  import ModerationModal from '../Moderation/ModerationModal.vue';
   import { useModerationStore, type ModerationTarget } from '@/stores/moderation';
   
   const props = defineProps<{
@@ -25,21 +25,53 @@
   const contextMenuX: Ref<number> = ref(0);
   const contextMenuY: Ref<number> = ref(0);
 
+
+  const totalCols = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.col && v.colSpan ? v.col+v.colSpan : 1}));
+  })
+  const totalRows = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.row && v.rowSpan ? v.row+v.rowSpan : 1}));
+  })
+
   const colWidthsStyle = computed(()=>{
-    return props.cols.map((v)=>v.width ? v.width : 'auto').join(' ');
+    return props.cols.filter((v)=>v.row === undefined || v.row === 1) //only first row
+    .sort((a,b)=>a.col - b.col) //sort into correct col order
+    .map((v)=>v.width ? v.width : 'auto').join(' '); //make css
   })
+
+  const rowWidthsStyle = computed(()=>{
+    return totalRows.value > 1 ? '1fr 0.5fr' : '1fr'; 
+  })
+
+  const totalRowsMobile = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.rowMobile && v.rowSpanMobile ? v.rowMobile+v.rowSpanMobile : 1}));
+  })
+
+  const colWidthsStyleMobile = computed(()=>{
+    return props.cols.filter((v)=>(v.rowMobile === undefined || v.rowMobile === 1)) //only first row
+    .sort((a,b)=>(a.colMobile ?? 1) - (b.colMobile ?? 1)) //sort into correct col order
+    .map((v)=>v.widthMobile ? v.widthMobile : 'auto').join(' '); //make css
+  })
+
+  const rowWidthsStyleMobile = computed(()=>{
+    return totalRowsMobile.value > 1 ? '1fr 0.5fr' : '1fr'; 
+  })
+
   const moreDetailsCols: TimeListColumn[] = [
     {
       label:'Jumps',
-      data:'jumps'
+      data:'jumps',
+      col:1,
     },
     {
       label: 'Strafes',
-      data:'strafes'
+      data:'strafes',
+      col:2,
     },
     {
       label: 'Sync',
-      data:'sync'
+      data:'sync',
+      col:3,
     },
   ];
 
@@ -122,15 +154,7 @@
       'pb-2' : ''" 
     @click="toggleDetails()"
     @contextmenu="handleRightClick">
-      
-      <div v-for="(col,index) in props.cols" :key="index" class="grid-col flex" :class="col.alignmentClasses">
-        <a v-if="col.link" :href="col.link(props.time)" class="group/timeLink flex w-full px-1.5" @click.stop :class="`${col.classes} ${col.alignmentClasses}`">
-          <TimesListItemContent :col="col" :time="props.time" :wrTime="props.wrTime"></TimesListItemContent>
-        </a>
-        <div v-else class="flex w-full px-1.5" :class="col.classes">
-          <TimesListItemContent :col="col" :time="props.time" :wrTime="props.wrTime"></TimesListItemContent>
-        </div>
-      </div>
+      <TimesListItemColumn v-for="(col,index) in props.cols" :key="index" :time="time" :wrTime="wrTime" :col="col"></TimesListItemColumn>
     </div>
     <TimesListItemMoreDetails v-if="showDetails" :time="props.time" :cols="moreDetailsCols"></TimesListItemMoreDetails>
 
@@ -161,41 +185,16 @@
 </template>
 
 <style scoped>
-  .os-grid-cols-auto{
-    grid-template-columns: v-bind('colWidthsStyle');
-  }
-  @media(max-width:767px){
+  @media(min-width:768px){
     .os-grid-cols-auto{
-      grid-template-columns: 40% 60%;
-      grid-template-rows: repeat(2, 1fr);
-    }
-    .os-grid-cols-auto>.grid-col{
-      width:100%;
-    }
-    .os-grid-cols-auto>.grid-col:nth-child(1n){
-      text-align: left;
-      justify-content: left;
-    }
-    .os-grid-cols-auto>.grid-col:nth-child(2n){
-      text-align: right;
-      justify-content: right;
+      grid-template-columns: v-bind('colWidthsStyle');
+      grid-template-rows: v-bind('rowWidthsStyle');
     }
-    .os-grid-cols-auto>.grid-col:nth-child(2n+1):last-child{
-      grid-column:span 2;
-    }
-  }
-</style>
-
-
-
-<style scoped>
-  .os-grid-cols-auto{
-    grid-template-columns: v-bind('colWidthsStyle');
   }
   @media(max-width:767px){
     .os-grid-cols-auto{
-      grid-template-columns: 40% 60%;
-      grid-template-rows: repeat(2, 1fr);
+      grid-template-columns: v-bind('colWidthsStyleMobile');
+      grid-template-rows: v-bind('rowWidthsStyleMobile');
     }
     .os-grid-cols-auto>.grid-col{
       width:100%;
diff --git a/src/components/TimeLists/TimesListItemColumn.vue b/src/components/TimeLists/TimesListItemColumn.vue
new file mode 100644
index 0000000..e6f49b3
--- /dev/null
+++ b/src/components/TimeLists/TimesListItemColumn.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+  import type { Time } from '@/types/Time';
+  import dateTimeFormats from '@/utils/dateTimeFormats';
+  import RelativeDate from '../RelativeDate.vue';
+  import type { TimeListColumn } from '@/types/TimeListColumn';
+  import ValidityIndicator from '../ValidityIndicator.vue';
+  import { computed } from 'vue';
+  import { useRoute } from 'vue-router';
+  
+  const route = useRoute();
+  
+  const props = defineProps<{
+      time: Time,
+      wrTime: Time | undefined,
+      col: TimeListColumn,
+    }>();
+    
+    const data = computed(()=>{
+      if(props.col.data === "server"){
+        return props.time.server?.server || '';
+      }
+      if(props.col.data === 'date') {
+        return props.time[props.col.data];
+      }
+      return props.col.numFormat && typeof props.time[props.col.data] === 'number' ?
+       props.col.numFormat(props.time[props.col.data] as number) : 
+       props.time[props.col.data];
+    })
+    
+  const wrTime = props.time.wr_time ?? (props.wrTime ? props.wrTime.time : null) ?? false;
+  
+  // Only show validity indicator when viewing times from player lookup tab
+  const isPlayerLookupContext = computed(() => {
+    return route.path.startsWith('/players');
+  });
+
+</script>
+
+
+<template>
+  <div class="flex time-grid-col px-1.5" :class="`${col.alignmentClasses}`">
+    <span v-if="props.col.placement" class="inline-flex items-center justify-end text-end mr-1.5 min-w-5 text-sm text-gray-400">{{ props.time.rank }}.</span>
+    <div class="flex items-center gap-1.5 max-w-full min-w-0">
+      <template v-if="props.col.data === 'date'">
+        <RelativeDate :date="(data ?? '') as string | number | Date" class="truncate group-hover/timeLink:underline flex-1" :class="`${col.classes}`" />
+      </template>
+      <template v-else>
+        <a v-if="col.link" :href="col.link(props.time)" class="group/timeLink flex max-w-full" @click.stop :class="`${col.classes}`">
+          <span class="truncate group-hover/timeLink:underline flex-1">{{ data }}</span>
+        </a>
+        <div v-else class="max-w-full" :class="`${col.classes}`">
+          <span class="truncate group-hover/timeLink:underline flex-1 max-w-full block">{{ data }}</span>
+        </div>
+      </template>
+      <!-- Show validity indicator for time column only in player lookup context -->
+      <ValidityIndicator 
+        v-if="props.col.data === 'time' && isPlayerLookupContext"
+        :is-invalid="props.time.is_invalid"
+        :is-banned="props.time.is_banned"
+        size="sm"
+      />
+    </div>
+    <span v-if="props.col.data === 'time' && wrTime" 
+    :class="
+      props.time.time - wrTime > 0 ? 'nonWrTimeColor opacity-70' :
+      props.time.time - wrTime < 0 ? 'text-green-600 opacity-80' : 
+    'text-gray-500'
+    "
+    class="ml-1 flex items-center monospace text-xs"> 
+      ({{ props.time.time - wrTime > 0 ? '+' : '-' }}{{ dateTimeFormats.time(Math.abs(props.time.time - wrTime)) }})
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.nonWrTimeColor{
+  color:hsl(357, v-bind('wrTime ? `${($props.time.time - wrTime)*200+40}%` : "90%"'), 58%)
+}
+.time-grid-col{
+  grid-column: v-bind('`${col.col} / span ${col.colSpan ?? 1}`');
+  grid-row: v-bind('`${col.row ?? 1} / span ${col.rowSpan ?? 1}`')
+}
+@media (max-width:767px) {
+  .time-grid-col{
+    grid-column: v-bind('`${col.colMobile ?? 1} / span ${col.colSpanMobile ?? 1}`');
+    grid-row: v-bind('`${col.rowMobile ?? 1} / span ${col.rowSpanMobile ?? 1}`')
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/TimesListItemMoreDetails.vue b/src/components/TimeLists/TimesListItemMoreDetails.vue
similarity index 61%
rename from src/components/TimesListItemMoreDetails.vue
rename to src/components/TimeLists/TimesListItemMoreDetails.vue
index 34b5bc8..5e78cc8 100644
--- a/src/components/TimesListItemMoreDetails.vue
+++ b/src/components/TimeLists/TimesListItemMoreDetails.vue
@@ -3,31 +3,31 @@
   import type { TimeListColumn } from '@/types/TimeListColumn';
   import timeLinks from '@/utils/timeLinks';
   import { computed } from 'vue';
-  import RelativeDate from './RelativeDate.vue';
+  import RelativeDate from '../RelativeDate.vue';
   const props = defineProps<{
       time: Time,
       cols: TimeListColumn[]
     }>();
   const colWidthsStyle = computed(()=>{
-    return props.cols.map((v)=>v.width ? v.width : 'auto').join(' ');
+    return props.cols.map((v)=>v.width ? v.width : '1fr').join(' ');
   })
 </script>
 
 
 <template>
-  <div class="grid os-subgrid-cols-auto p-2 px-2 bg-main-800" :style="{ gridTemplateColumns: colWidthsStyle }">
+  <div class="grid os-subgrid-cols-auto py-3 px-2 bg-main-800" :style="{ gridTemplateColumns: colWidthsStyle }">
     <div v-for="(col, index) in props.cols" :key="index" :class="col.alignmentClasses" class="flex flex-col">
       <span class="text-gray-400 text-xs">{{ col.label }}:</span>
-      <span v-if="col.data === 'date'">
+      <span v-if="col.data === 'date'" class="monospace text-lg">
         <RelativeDate :date="props.time[col.data]" />
       </span>
-      <span v-else>{{ col.data === 'sync' ? props.time[col.data].toFixed(2) + '%' : props.time[col.data] }}</span>
+      <span class="monospace text-lg" v-else>{{ col.data === 'sync' ? props.time[col.data].toFixed(2) + '%' : props.time[col.data] }}</span>
     </div>
     <!-- Add link to individual record -->
-    <div v-if="props.time._id" class="flex flex-col justify-center">
+    <div v-if="props.time._id" class="flex flex-col justify-center items-center pt-2 pb-1 col-span-3">
       <a 
         :href="timeLinks.recordLink(props.time)" 
-        class="text-blue-400 hover:text-blue-300 text-xs px-2 py-1 bg-main-700 rounded hover:bg-main-600 transition-colors text-center"
+        class="px-8 py-2 bg-blue-700 hover:bg-blue-600 rounded transition-colors text-center text-sm"
       >
         View Record
       </a>
diff --git a/src/components/TimesListPagination.vue b/src/components/TimeLists/TimesListPagination.vue
similarity index 100%
rename from src/components/TimesListPagination.vue
rename to src/components/TimeLists/TimesListPagination.vue
diff --git a/src/components/TimesListHeading.vue b/src/components/TimesListHeading.vue
deleted file mode 100644
index fbd4d98..0000000
--- a/src/components/TimesListHeading.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-  import type { TimeListColumn } from '@/types/TimeListColumn';
-  import { computed } from 'vue';
-  const props = defineProps<{
-      cols: TimeListColumn[]
-    }>();
-
-  const colWidthsStyle = computed(()=>{
-    return props.cols.map((v)=>v.width ? v.width : 'auto').join(' ');
-  })
-</script>
-
-
-<template>
-  <div class="grid os-grid-cols-auto px-1 bg-main-900 fw-700 text-xs pt-1.5 pb-2 text-gray-200">
-    <div v-for="(col,index) in props.cols" :key="index" class="grid-col px-1.5" :class="col.alignmentClasses">
-      <div :class="col.alignmentClasses">{{ col.label }}</div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-  .os-grid-cols-auto{
-    grid-template-columns: v-bind('colWidthsStyle');
-  }
-  @media(max-width:768px){
-    .os-grid-cols-auto{
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(2, 1fr);
-    }
-    .os-grid-cols-auto>.grid-col:nth-child(1n),
-    .os-grid-cols-auto>.grid-col:nth-child(1n)>div{
-      text-align: left;
-      justify-content: left;
-    }
-    .os-grid-cols-auto>.grid-col:nth-child(2n),
-    .os-grid-cols-auto>.grid-col:nth-child(2n)>div{
-      text-align: right;
-      justify-content: right;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/components/TimesListItemContent.vue b/src/components/TimesListItemContent.vue
deleted file mode 100644
index 8e8d80c..0000000
--- a/src/components/TimesListItemContent.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup lang="ts">
-  import type { Time } from '@/types/Time';
-  import dateTimeFormats from '@/utils/dateTimeFormats';
-  import RelativeDate from './RelativeDate.vue';
-  import type { TimeListColumn } from '@/types/TimeListColumn';
-  import ValidityIndicator from './ValidityIndicator.vue';
-  import { computed } from 'vue';
-  import { useRoute } from 'vue-router';
-  
-  const route = useRoute();
-  
-  const props = defineProps<{
-      time: Time,
-      wrTime: Time | undefined,
-      col: TimeListColumn,
-    }>();
-    
-    const data = computed(()=>{
-      if(props.col.data === "server"){
-        return props.time.server?.server || '';
-      }
-      if(props.col.data === 'date') {
-        return props.time[props.col.data];
-      }
-      return props.col.numFormat && typeof props.time[props.col.data] === 'number' ?
-       props.col.numFormat(props.time[props.col.data] as number) : 
-       props.time[props.col.data];
-    })
-    
-  const wrTime = props.time.wr_time ?? (props.wrTime ? props.wrTime.time : null) ?? false;
-  
-  // Only show validity indicator when viewing times from player lookup tab
-  const isPlayerLookupContext = computed(() => {
-    return route.path.startsWith('/players');
-  });
-
-</script>
-
-
-<template>
-  <span v-if="props.col.placement" class="inline-flex items-center justify-end text-end mr-1.5 min-w-5 text-sm text-gray-400">{{ props.time.rank }}.</span>
-  <div class="flex items-center gap-1.5 w-full min-w-0">
-    <template v-if="props.col.data === 'date'">
-      <RelativeDate :date="(data ?? '') as string | number | Date" class="truncate group-hover/timeLink:underline flex-1" />
-    </template>
-    <template v-else>
-      <span class="truncate group-hover/timeLink:underline flex-1">{{ data }}</span>
-    </template>
-    <!-- Show validity indicator for time column only in player lookup context -->
-    <ValidityIndicator 
-      v-if="props.col.data === 'time' && isPlayerLookupContext"
-      :is-invalid="props.time.is_invalid"
-      :is-banned="props.time.is_banned"
-      size="sm"
-    />
-  </div>
-  <span v-if="props.col.data === 'time' && wrTime" 
-  :class="
-    props.time.time - wrTime > 0 ? 'nonWrTimeColor opacity-70' :
-    props.time.time - wrTime < 0 ? 'text-green-600 opacity-80' : 
-   'text-gray-500'
-  "
-  class="ml-1"> 
-    ({{ props.time.time - wrTime > 0 ? '+' : '-' }}{{ dateTimeFormats.time(Math.abs(props.time.time - wrTime)) }})
-  </span>
-</template>
-
-<style>
-.nonWrTimeColor{
-  color:hsl(357, v-bind('wrTime ? `${($props.time.time - wrTime)*200+40}%` : "90%"'), 58%)
-}
-</style>
\ No newline at end of file
diff --git a/src/types/TimeListColumn.ts b/src/types/TimeListColumn.ts
index c9b065d..944aad6 100644
--- a/src/types/TimeListColumn.ts
+++ b/src/types/TimeListColumn.ts
@@ -4,7 +4,16 @@ export interface TimeListColumn {
     label: string,
     data: keyof Time,
     placement?: boolean,
+    col:number,
+    colSpan?:number,
+    row?:number,
+    rowSpan?:number,
+    colMobile?:number,
+    colSpanMobile?:number,
+    rowMobile?:number,
+    rowSpanMobile?:number,
     width?: string,
+    widthMobile?: string,
     classes?: string,
     alignmentClasses?: string,
     link?: ((value: Time) => string),