diff --git a/src/lib/ldb/staff/staff-ldb-dev.svelte b/src/lib/ldb/staff/staff-ldb-dev.svelte
index f88c046..e11eb50 100644
--- a/src/lib/ldb/staff/staff-ldb-dev.svelte
+++ b/src/lib/ldb/staff/staff-ldb-dev.svelte
@@ -9,6 +9,8 @@
   import Island from '$lib/islands/island.svelte';
   import TableGeneratorDev from './table/table-generator_dev.svelte';
 
+  const TableGenerator = TableGeneratorDev
+
   import type { StaffLdb, NrccMessage, TrainServices, ApiResponse } from '@owlboard/ts-types';
 
   let jsonData: ApiResponse<StaffLdb>;
diff --git a/src/lib/ldb/staff/table/table-generator_dev.svelte b/src/lib/ldb/staff/table/table-generator_dev.svelte
index 70dc656..d4ccb5f 100644
--- a/src/lib/ldb/staff/table/table-generator_dev.svelte
+++ b/src/lib/ldb/staff/table/table-generator_dev.svelte
@@ -4,154 +4,65 @@
 
   import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
 
-  export let services;
-  export let click;
+  export let services: TrainServices[];
+  export let click: any; // Not sure of the type here!
 
-  async function generateServiceData(service) {
-    const timeDetails = parseTimes(service);
-    let serviceData = {
-      from: await parseLocation(service.origin),
-      to: await parseLocation(service.destination),
-      length: await getTrainLength(service),
-      platform: await parsePlatform(service?.platform || 'undefined'),
-      platformHidden: service?.platformIsHidden === 'true',
-      schArr: timeDetails.schArr,
-      expArr: timeDetails.expArr,
-      schDep: timeDetails.schDep,
-      expDep: timeDetails.expDep,
-      isEarlyArr: timeDetails.earArr,
-      isLateArr: timeDetails.delArr,
-      isEarlyDep: timeDetails.earDep,
-      isLateDep: timeDetails.delDep,
-      isCancelled: Boolean(service?.isCancelled),
-      canArr: timeDetails.canArr,
-      canDep: timeDetails.canDep,
-      isDelayed: service?.arrivalType === 'Delayed',
-      isArrDelayed: service?.arrivalType === 'Delayed',
-      isDepDelayed: service?.departureType === 'Delayed',
-      isNonPublic: service?.isPassengerService === 'false' ? true : false
-    };
-    return serviceData;
-  }
-
-  async function getTrainLength(service) {
-    if (service?.length) {
-      return parseInt(service?.length);
-    } else if (service?.formation?.coaches) {
-      return service.formation.coaches.coach.length;
-    }
-    return null;
-  }
-
-  async function parseLocation(location) {
-    if (!Array.isArray(location.location)) {
-      return location.location?.tiploc;
-    }
-    let locations = [];
-    for (const singleLocation of location?.location) {
-      locations.push(singleLocation?.tiploc);
-    }
-    return locations.join(' & ');
-  }
-
-  function parseTimes(service) {
-    let schArr = new Date(service?.sta);
-    let expArr = new Date(service?.eta || service?.ata);
-    let schDep = new Date(service?.std);
-    let expDep = new Date(service?.etd || service?.atd);
-    let isEarlyArr = false,
-      isDelayedArr = false,
-      isArr = false,
-      canArr = false;
-    let isEarlyDep = false,
-      isDelayedDep = false,
-      isDep = false,
-      canDep = false;
-    const timeDifferenceThreshold = 60 * 1000; // 60 seconds in milliseconds
-    if (expArr - schArr < -timeDifferenceThreshold) {
-      isEarlyArr = true;
-      isArr = true;
-    } else if (expArr - schArr > timeDifferenceThreshold) {
-      isDelayedArr = true;
-      isArr = true;
-    }
-
-    if (expDep - schDep < -timeDifferenceThreshold) {
-      isEarlyDep = true;
-      isDep = true;
-    } else if (expDep - schDep > timeDifferenceThreshold) {
-      isDelayedDep = true;
-      isDep = true;
-    }
-    let parsedExpArr;
-    if (expArr instanceof Date && !isNaN(expArr)) {
-      if (!isEarlyArr && !isDelayedArr) {
-        parsedExpArr = 'RT';
-      } else {
-        parsedExpArr = parseIndividualTime(expArr);
-      }
-    } else if (service.isCancelled === 'true') {
-      parsedExpArr = 'CANC';
-      canArr = true;
-    } else {
-      parsedExpArr = '-';
-    }
-
-    let parsedExpDep;
-    if (expDep instanceof Date && !isNaN(expDep)) {
-      if (!isEarlyDep && !isDelayedDep) {
-        parsedExpDep = 'RT';
-      } else {
-        parsedExpDep = parseIndividualTime(expDep);
-      }
-    } else if (service.isCancelled === 'true') {
-      parsedExpDep = 'CANC';
-      canDep = true;
-    } else {
-      parsedExpDep = '-';
-    }
-    return {
-      schArr: parseIndividualTime(schArr),
-      expArr: parsedExpArr,
-      schDep: parseIndividualTime(schDep),
-      expDep: parsedExpDep,
-      earArr: isEarlyArr,
-      delArr: isDelayedArr,
-      earDep: isEarlyDep,
-      delDep: isDelayedDep,
-      canArr: canArr,
-      canDep: canDep
-    };
-  }
-
-  function parseIndividualTime(input) {
-    const dt = new Date(input);
-    const output = dt.toLocaleTimeString([], {
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-    if (output !== 'Invalid Date') {
-      return output;
-    }
-    return '-';
-  }
-
-  async function parsePlatform(platform) {
-    if (!platform) {
-      return '-';
-    }
-    if (platform === 'TBC' || platform == 'undefined') {
-      return '-';
-    }
-    return {
-      number: platform
-    };
-  }
-
-  function detail(event, rid, uid, tid) {
+  function detail(event: any, rid: string, uid: string, tid: string) {
     const target = event.target;
     click(rid, uid, tid);
   }
+
+  async function formatLocations(locations: ServiceLocation[]): Promise<string> {
+    let tiplocs: string[] = []
+    for (const location of locations) {
+      tiplocs.push(location.tiploc)
+    }
+    return tiplocs.join(' & ')
+  }
+
+  async function classGenerator(service: TrainServices) {
+    let otherArr: string[] = []
+    let arrArr: string[] = []
+    let depArr: string[] = []
+    let platArr: string[] = []
+
+    if (service.isCancelled) {otherArr.push("canc")}
+    if (service.serviceIsSupressed) {otherArr.push("nonPass")}
+    if (service.platformIsHidden) {platArr.push("nonPass")}
+    
+    if (service.sta !== undefined) {
+    if (service.eta !== undefined) {
+      if (service.sta < service.eta) { arrArr.push("late"); }
+    } else if (service.ata !== undefined) {
+      if (service.sta < service.ata) { arrArr.push("late"); }
+    }
+    if (service.eta !== undefined) {
+      if (service.sta > service.eta) { arrArr.push("early"); }
+    } else if (service.ata !== undefined) {
+      if (service.sta > service.ata) { arrArr.push("early"); }
+    }
+  }
+
+  if (service.std !== undefined) {
+    if (service.etd !== undefined) {
+      if (service.std < service.etd) { depArr.push("late"); }
+    } else if (service.atd !== undefined) {
+      if (service.std < service.atd) { depArr.push("late"); }
+    }
+    if (service.etd !== undefined) {
+      if (service.std > service.etd) { depArr.push("early"); }
+    } else if (service.atd !== undefined) {
+      if (service.std > service.atd) { depArr.push("early"); }
+    }
+  }
+
+    return {
+      other: otherArr.join(" "),
+      arr: arrArr.join(" "),
+      dep: depArr.join(" "),
+      plat: platArr.join(" "),
+    }
+  }
 </script>
 
 <p class="smallScreen">Your display is too small to view this data</p>
@@ -172,36 +83,26 @@
     <th class="timepair" colspan="2">Departure</th>
   </tr>
   {#each services as service}
-    {#await generateServiceData(service)}
-      <tr><td colspan="8">Loading Service Data...</td></tr>
-    {:then serviceData}
       <tr
         class="dataRow"
         on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
         on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
       >
-        <td class="id">{service.trainid}</td>
-        <td class="from {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.from}</td>
-        <td class="to {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.to}</td>
-        <td class="plat {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'} {serviceData.platformHidden && 'nonPass'}"
-          >{serviceData.platform.number || '-'}</td
-        >
-        <td class="time schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schArr}</td>
-        <td
-          class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateArr && 'late'} {serviceData.isArrDelayed && 'late'} {serviceData.isCancelled &&
-            'canc'} {serviceData.isEarlyArr && 'early'}">{serviceData.isArrDelayed ? 'LATE' : serviceData.expArr}</td
-        >
-        <td class="time schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schDep}</td>
-        <td
-          class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateDep && 'late'} {serviceData.isDepDelayed && 'late'}
-                 {serviceData.isCancelled && 'canc'} {serviceData.isEarlyDep && 'early'}">{serviceData.isDepDelayed ? 'LATE' : serviceData.expDep}</td
-        >
+      {#await classGenerator(service) then classes}
+        <td class="id {classes.other}">{service.trainid}</td>
+        <td class="from {classes.other}">{#await formatLocations(service.origin) then txt}{txt}{/await}</td>
+        <td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/await}</td>
+        <td class="plat">{service.platform || '-'}</td>
+        <td class="time schTime {classes.other}">{service.sta || '-'}</td>                      <!-- All time need to be displayed appropriately -->
+        <td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td> <!-- All time need to be displayed appropriately -->
+        <td class="time schTime {classes.other}">{service.std || '-'}</td>                      <!-- All time need to be displayed appropriately -->
+        <td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td> <!-- All time need to be displayed appropriately -->
+      {/await}
       </tr>
       <tr>
         <td class="tableTxt" colspan="8">
           {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
-          {#if service.isCharter}charter{/if}
-          {#if serviceData.length} | {serviceData.length} carriages{/if}
+          {#if service.length} | {service.length} carriages{/if}
           {#if service.delayReason}
             <br />
             <Reason type={'delay'} code={service.delayReason} />
@@ -212,11 +113,9 @@
           {/if}
         </td>
       </tr>
-    {:catch}
       <tr>
         <td colspan="8">Unable to display service</td>
       </tr>
-    {/await}
   {/each}
 </table>
 
@@ -385,103 +284,4 @@
       color: rgb(136, 164, 255);
     }
   }
-
-  /* CARRIED OVER FROM OLD COMPONENT:
-  
-    #timestamp {
-    color: var(--second-text-color);
-  }
-
-  .transport-mode {
-    width: 30px;
-    margin: auto;
-  }
-
-  .dataTable {
-    color: white;
-    font-weight: normal;
-    width: 100%;
-    margin: 0px, 0px;
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-
-  .id {
-    width: 12%;
-  }
-
-  .from {
-    width: 20%;
-  }
-
-  .to {
-    width: 20%;
-  }
-
-  .plat {
-    width: 8%;
-  }
-
-  .timePair {
-    width: 20%;
-  }
-
-  .time {
-    width: 10%;
-  }
-
-  .data {
-    font-weight: normal;
-  }
-
-  .id-data {
-    color: lightgray;
-    text-align: left;
-  }
-
-  .from-data,
-  .to-data {
-    color: yellow;
-    text-decoration: none;
-    text-align: left;
-  }
-
-  .text-row {
-    margin-top: 0px;
-    padding-bottom: 5px;
-    width: 100%;
-  }
-
-  .text-data {
-    text-align: left;
-    color: cyan;
-    font-size: smaller;
-  }
-
-  .can-dat {
-    color: grey;
-    text-decoration: line-through;
-  }
-
-  .hidden {
-    opacity: 0.5;
-  }
-
-  .ecs {
-    opacity: 0.75;
-  }
-
-  .can-time {
-    animation: pulse-cancel 1.5s linear infinite;
-  }
-
-  .early {
-    animation: pulse-early 1.5s linear infinite;
-  }
-
-  .late {
-    animation: pulse-late 1.5s linear infinite;
-  }
-
-  */
 </style>