diff --git a/src/lib/ldb/staff-ldb.svelte b/src/lib/ldb/staff-ldb.svelte
index 0021ded..1dfeb66 100644
--- a/src/lib/ldb/staff-ldb.svelte
+++ b/src/lib/ldb/staff-ldb.svelte
@@ -59,15 +59,6 @@
       }
     }
 
-    function parseDateTime(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 getReasonCodeData(code) {
       const url = `https://owlboard.info/api/v2/ref/reasonCode/${code}`
       const res = await fetch(url);
@@ -76,32 +67,99 @@
     }
 
     async function generateServiceData(service) {
+      const timeDetails = await parseTimes(service);
       let serviceData = {
-        to: await parseLocation(),
-        from: await parseLocation(),
+        from: await parseLocation(service.origin),
+        to: await parseLocation(service.destination),
         length: await getTrainLength(service),
-        platform: await parsePlatform(),
+        platform: await parsePlatform(service?.platform),
+        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,
+        isCancelledDep: false,
+        isCancelled: Boolean(service?.isCancelled),
+        isDelayed: service?.arrivalType === "Delayed",
+        isArrDelayed: service?.arrivalType === "Delayed",
+        isDepDelayed: service?.departureType === "Delayed",
+        isEarly: false,
+        isNonPublic: false
       }
       return serviceData;
     }
 
     async function getTrainLength(service) {
-      return;
+      if (service?.length) {
+        return parseInt(service?.length);
+      } else if (service?.formation?.coaches) {
+        return service.formation.coaches.coach.length
+      }
+      return null;
     }
 
     async function parseLocation(location) {
-      return;
+      if (!Array.isArray(location.location)) {
+        //console.log(location.location?.tiploc)
+        return location.location?.tiploc
+      }
+      let locations = [];
+      for (const singleLocation of location?.location) {
+        locations.push(singleLocation?.tiploc)
+      }
+      return locations.join(' & ');
     }
 
     async function parsePlatform(platform) {
       if (platform === "TBC") {
         return '-'
       }
-      return platform;
+      return {
+        number: platform,
+        isHidden: false // Not Implemented
+      }
     }
 
-    function parseTime(service){
-      return
+    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
+      let isEarlyDep = false, isDelayedDep = false
+      if (expArr < schArr) {
+        isEarlyArr = true;
+      } else if (expArr > schArr) {
+        isDelayedArr = true; // Only if the delay is more than 60 seconds.
+      }
+      if (expDep < schDep) {
+        isEarlyDep = true; // Only if the delay is more than 60 seconds.
+      } else if (expDep > schDep) {
+        isDelayedDep = true;
+      }
+      return {
+        schArr: parseIndividualTime(schArr),
+        expArr: parseIndividualTime(expArr),
+        schDep: parseIndividualTime(schDep),
+        expDep: parseIndividualTime(expDep),
+        earArr: isEarlyArr,
+        delArr: isDelayedArr,
+        earDep: isEarlyDep,
+        delDep: isDelayedDep
+      }
+    }
+
+    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 '-'
     }
 
     function processNrcc(messages) { // Remove newlines and then <p> tags from input and append to array
@@ -131,7 +189,7 @@
       <AlertBar {alerts} />
     {/if}    
     <table>
-      <tr><td colspan="8">Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td></tr>
+      <tr><td colspan="8" id="timestamp">Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td></tr>
       <tr>
         <th class="id">ID</th>
         <th class="from">From</th>
@@ -155,18 +213,18 @@
              relevant BOOLs like isCancelled, isEarly, isLate, isNonPassenger and calculate train length
              where 'length' is not provided but 'formation' is. -->
           <tr>
-            <th class="id id-data data">{service.trainid}</th>
-            <th class="from from-data data">{service.origin.location.tiploc}</th>  <!-- From and To fields are arrays if more than one origin/destination is served -->
-            <th class="to to-data data">{service.destination.location.tiploc}</th>
-            <th class="plat plat-data data">{service.platform || '-'}</th>
-            <th class="time time-data data">{parseDateTime(service.sta)}</th>
-            <th class="time time-data data">{parseDateTime(service.ata || service.eta)}</th>
-            <th class="time time-data data">{parseDateTime(service.std)}</th>
-            <th class="time time-data data">{parseDateTime(service.atd || service.etd)}</th>
+            <td class="id id-data data">{service.trainid}</td>
+            <td class="from from-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.from}</td>
+            <td class="to to-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.to}</td>
+            <td class="plat plat-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number}</td>
+            <td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schArr}</td>
+            <td class="time time-data data {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr && 'late'}">{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td>
+            <td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schDep}</td>
+            <td class="time time-data data {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep && 'late'}">{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td>
           </tr>
           <tr class="text-row">
             <td colspan="8" class="text-data">
-              {service.operator} {#if service.length} - {service.length} carriages{/if}
+              {service.operator} {#if serviceStats.length} | {serviceStats.length} carriages{/if}
               <br>
               {#if service.isCancelled}
                 {#await getReasonCodeData(service.cancelReason)}
@@ -176,8 +234,20 @@
                   <br>
                 {/await}
               {/if}
+              {#if service?.delayReason}
+                {#await getReasonCodeData(service.delayReason)}
+                  This train has been delayed
+                {:then reasonCode}
+                  {reasonCode[0].lateReason}
+                  <br>
+                {/await}
+              {/if}
             </td>
           </tr>
+        {:catch}
+          <tr>
+            <td colspan="8">Unable to load service</td>
+          </tr>
         {/await}
       {/each}
     </table>
@@ -187,9 +257,7 @@
 
  <style>
   #timestamp {
-    text-align: centre;
-    margin: auto;
-    width: 100%;
+    color: var(--second-text-color);
   }
 
   table {
@@ -226,15 +294,24 @@
     font-size: smaller;
   }
 
+.can-dat {
+  color: grey;
+  text-decoration: line-through;
+}
+
+.hidden {
+  color: grey;
+}
+
 .can-time {
     animation: pulse-cancel 1.5s linear infinite;
 }
 
-.early-time {
+.early {
   animation: pulse-early 1.5s linear infinite;
 }
 
-.late-time {
+.late {
   animation: pulse-late 1.5s linear infinite;
 }