diff --git a/.dockerignore b/.dockerignore
index 9a715f5..f06a337 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,2 +1,6 @@
 .dockerignore
-Dockerfile
\ No newline at end of file
+Dockerfile
+package.json
+package-lock.json
+.eslintrc.js
+node_modules
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..073ba35
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,31 @@
+module.exports = {
+  'env': {
+    'browser': true,
+    'es2021': true
+  },
+  'extends': 'eslint:recommended',
+  'overrides': [
+  ],
+  'parserOptions': {
+    'ecmaVersion': 'latest'
+  },
+  'rules': {
+    'indent': [
+      'error',
+      2
+    ],
+    'linebreak-style': [
+      'error',
+      'unix'
+    ],
+    'quotes': [
+      'error',
+      'single'
+    ],
+    'semi': [
+      'error',
+      'never'
+    ],
+    'no-undef': 'off',
+  }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/404.html b/404.html
index 0ba9f97..dd6f42c 100644
--- a/404.html
+++ b/404.html
@@ -2,6 +2,7 @@
     <head>
         <meta charset="UTF-8"/>
         <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
+        <meta name="robots" content="noindex"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="application-name" content="OwlBoard">
         <meta name="author" content="Frederick Boniface">
diff --git a/auth.html b/auth.html
new file mode 100644
index 0000000..13990db
--- /dev/null
+++ b/auth.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="description" content="OwlBoard - Live train departures for traincrew.">
+    <meta name="robots" content="noindex">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="application-name" content="OwlBoard">
+    <meta name="author" content="Frederick Boniface">
+    <meta name="theme-color" content="#00b7b7">
+    <link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
+    <link rel="stylesheet" type="text/css" href="./styles/main.css">
+    <link rel="icon" type="image/svg+xml" href="./images/icon.svg">
+    <link rel="manifest" type="application/json" href="./manifest.json">
+    <script src="./js/lib.main.js" defer></script>
+    <script src="./js/auth.js" defer></script>
+    <title>OwlBoard</title>
+  </head>
+  <body>
+    <!-- Loading Box -->
+    <div id="loading">
+      <div class="spinner">
+      </div>
+      <p id="loading_desc">Registering</p>
+    </div>
+
+    <!-- Main Content Begins -->
+    <div id="top_button" class="hide_micro">
+      <a href="./">
+        <picture id="home_icon">
+          <source srcset="./images/nav/home_icon.svg" type="image/svg+xml">
+          <img src="./images/nav/home_icon-40.png" alt="Home">
+        </picture>
+      </a>
+    </div>
+    <picture>
+      <source srcset="./images/logo/wide_logo.svg" type="image/svg+xml">
+      <source media="(max-height: 739px)" srcset="./images/logo/logo-full-200.png" type="image/png">
+      <source srcset="./images/logo/logo-full-250.png" type="image/png">
+      <img class="titleimg" src="./images/logo/logo-full-250.png" alt="OwlBoard Logo">
+    </picture>
+    <div id="cmd">
+    </div>
+    <!-- Footer -->
+    <footer>
+      <p>Created by <a href="https://fredboniface.co.uk" target="_blank" rel="noreferrer noopener">Fred Boniface</a> - <span id="ver_str"></span></p>
+    </footer>
+  </body>
+</html>
diff --git a/board-staff.html b/board-staff.html
new file mode 100644
index 0000000..fe8f827
--- /dev/null
+++ b/board-staff.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="description" content="OwlBoard - Live train departures for traincrew.">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="noindex">
+    <meta name="application-name" content="OwlBoard">
+    <meta name="author" content="Frederick Boniface">
+    <meta name="theme-color" content="#00b7b7">
+    <title>OwlBoard - Loading</title>
+    <link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
+    <link rel="stylesheet" type="text/css" href="./styles/main.css">
+    <link rel="stylesheet" type="text/css" href="./styles/board.css">
+    <link rel="icon" type="image/svg+xml" href="./images/icon.svg">
+    <link rel="manifest" type="application/json" href="./manifest.json">
+    <script src="./js/lib.main.js" defer></script>
+    <script src="./js/lib.board.js" defer></script>
+    <script src="./js/staff-board.js" defer></script>
+  </head>
+  <body>
+    <div id="loading">
+      <div class="spinner">
+      </div>
+      <p id="loading_desc">\nLoading</p>
+    </div>
+
+    <div id="content">
+      <div id="header">
+        <div id="station_name">
+          <h1 id="stn_name" class="header-large">Arrivals &amp; Departures</h1>
+        </div>
+        <div id="header-right">
+          <picture id="refresh" onclick="location.reload()">
+            <source srcset="./images/nav/refresh.svg" type="image/svg+xml">
+            <img src="./images/nav/refresh-50.png" alt="OwlBoard Logo">
+          </picture>
+          <a href="/">
+            <picture id="home_icon">
+              <source srcset="./images/nav/home_icon.svg" type="image/svg+xml">
+              <img src="./images/nav/home_icon-40.png" alt="Home">
+            </picture>
+          </a>
+        </div>
+      </div>
+
+      <div id="alerts" onclick="">
+        <div id="alerts_bar" onclick="inflateAlerts()">
+          <picture>
+            <source srcset="./images/nav/alert_icon.svg" type="image/svg+xml">
+            <img id="alert_icon" src="./images/nav/alert_icon.svg" alt="">
+          </picture>
+          <p id="alert_bar_note"></p>
+          <button id="alert_expand_arrow">&#8897;</button>
+          <div id="alerts_msg" onclick="NULL">
+          </div>
+        </div>
+      </div>
+
+      <div id="output">
+        <table>
+          <caption>Train Services</caption>
+          <tr>
+            <th class="name">Headcode</th>
+            <th class="name">Origin</th>
+            <th class="name">Dest.</th>
+            <th class="plat">Plat.</th>
+            <th class="time">Sch Arr.</th>
+            <th class="time">Exp Arr.</th>
+            <th class="time">Sch Dep.</th>
+            <th class="time">Exp Dep.</th>
+          </tr>
+        </table>
+      </div>
+
+      <div id="no_services" class="main-notice hidden-while-loading">
+        <p>There are no scheduled train services from this station</p>
+      </div>
+
+      <div id="ferry" class="hide-when-loading secondary-table">
+        <table>
+          <caption>Ferry Services</caption>
+          <tr>
+            <th class="name">Origin</th>
+            <th class="name">Dest.</th>
+            <th class="plat"></th>
+            <th class="time">Sch Arr.</th>
+            <th class="time">Exp Arr.</th>
+            <th class="time">Sch Dep.</th>
+            <th class="time">Exp Dep.</th>
+          </tr>
+        </table>
+      </div>
+
+      <div id="bus" class="hide-when-loading secondary-table">
+        <table>
+          <caption>Bus Services</caption>
+          <tr>
+            <th class="name">Headcode</th>
+            <th class="name">Origin</th>
+            <th class="name">Dest.</th>
+            <th class="plat"></th>
+            <th class="time">Sch Arr.</th>
+            <th class="time">Exp Arr.</th>
+            <th class="time">Sch Dep.</th>
+            <th class="time">Exp Dep.</th>
+          </tr>
+        </table>
+      </div>
+
+      <div id="error_notice" class="main-notice hide-when-loading">
+        <h1 class="error">Oops</h1>
+          <p class="error">There was an error with your request</p>
+          <p id="err_not_auth" class="notices-hidden">You are not authorised to view staff versions, you can sign up in <a href="./settings.html">settings</a></p>
+          <p id="err_not_found" class="notices-hidden">The station you are searching for cannot be found</p>
+          <p id="err_no_data" class="notices-hidden">The station has no data.  It may not be in operation yet/anymore.</p>
+          <p id="err_conn" class="notices-hidden">Connection Error, check your data connection.  Retrying.</p>
+      </div>
+
+      <div id="footer">
+        <a href="https://nationalrail.co.uk" target="_blank" rel="nofollow external noreferrer noopener">
+          <picture id="nre_logo">
+            <source srcset="./images/nre/nre-powered_400w.jxl" type="image/jxl">
+            <source srcset="./images/nre/nre-powered_400w.webp" type="image/webp">
+            <img src="./images/nre/nre-powered_400w.png" alt="Powered by National Rail Enquiries">
+          </picture>
+        </a>
+        <div id="timeblock">
+          <p class="header-small">Data from:</p>
+          <p id="fetch_time" class="header-small">Loading...</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/board.html b/board.html
index 29f3d76..e788d3e 100644
--- a/board.html
+++ b/board.html
@@ -1,18 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8"/>
-    <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
+    <meta charset="UTF-8">
+    <meta name="description" content="OwlBoard - Live train departures for traincrew.">
+    <meta name="robots" content="noindex">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="noindex">
     <meta name="application-name" content="OwlBoard">
     <meta name="author" content="Frederick Boniface">
     <meta name="theme-color" content="#00b7b7">
     <title>OwlBoard - Loading</title>
     <link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
-    <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
-    <link rel="stylesheet" type="text/css" href="./styles/board.css"/>
-    <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
-    <link rel="manifest" type="application/json" href="./manifest.json"/>
+    <link rel="stylesheet" type="text/css" href="./styles/main.css">
+    <link rel="stylesheet" type="text/css" href="./styles/board.css">
+    <link rel="icon" type="image/svg+xml" href="./images/icon.svg">
+    <link rel="manifest" type="application/json" href="./manifest.json">
     <script src="./js/lib.main.js" defer></script>
     <script src="./js/lib.board.js" defer></script>
     <script src="./js/simple-board.js" defer></script>
@@ -27,7 +29,7 @@
     <div id="content">
       <div id="header">
         <div id="station_name">
-          <h1 id="stn_name" class="header-large"></h1>
+          <h1 id="stn_name" class="header-large">Arrivals &amp; Departures</h1>
         </div>
         <div id="header-right">
           <picture id="refresh" onclick="location.reload()">
diff --git a/conf/nginx.conf b/conf/nginx.conf
index d64739c..f251c43 100644
--- a/conf/nginx.conf
+++ b/conf/nginx.conf
@@ -39,8 +39,7 @@ http {
             gzip_static on;
             brotli_static on;
             error_page 404 /404.html;
-            expires 2d;
-            add_header Cache-Control "public, no-transform";
+            add_header Cache-Control "public, no-transform, max-age=1209600";
         }
 
         location /api/ {
@@ -48,8 +47,7 @@ http {
             proxy_cache_key $scheme://$host$uri$is_args$query_string;
             proxy_ignore_headers Cache-Control;
             proxy_cache_valid 200 2m;  # Evaluate whether 2m or 1m is more appropriate
-            expires 2m;
-            add_header Cache-Control "private, no-transform";
+            add_header Cache-Control "private, no-transform, max-age=120";
         }
 
         location /api/v1/list/ {
@@ -57,8 +55,7 @@ http {
             proxy_cache_key $scheme://$host$uri$is_args$query_string;
             proxy_ignore_headers Cache-Control;
             proxy_cache_valid 200 10080m;
-            expires 7d;
-            add_header Cache-Control "public, no-transform";
+            add_header Cache-Control "public, no-transform, max-age=604800";
         }
     }
 }
diff --git a/conn-err.html b/conn-err.html
index ab9797d..65f3629 100644
--- a/conn-err.html
+++ b/conn-err.html
@@ -2,6 +2,7 @@
     <head>
         <meta charset="UTF-8"/>
         <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
+        <meta name="robots" content="noindex"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="application-name" content="OwlBoard">
         <meta name="author" content="Frederick Boniface">
diff --git a/find-code.html b/find-code.html
index c1167f2..12ee02b 100644
--- a/find-code.html
+++ b/find-code.html
@@ -1,24 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8"/>
-    <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
+    <meta charset="UTF-8">
+    <meta name="description" content="OwlBoard - Find CRS, TIPLOC & STANOX Codes with ease.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="application-name" content="OwlBoard">
     <meta name="author" content="Frederick Boniface">
     <meta name="theme-color" content="#00b7b7">
     <link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
-    <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
-    <link rel="stylesheet" type="text/css" href="./styles/find-code.css"/>
-    <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
-    <link rel="manifest" type="application/json" href="./manifest.json"/>
+    <link rel="stylesheet" type="text/css" href="./styles/main.css">
+    <link rel="stylesheet" type="text/css" href="./styles/find-code.css">
+    <link rel="icon" type="image/svg+xml" href="./images/icon.svg">
+    <link rel="manifest" type="application/json" href="./manifest.json">
     <title>OwlBoard - Code Lookup</title>
     <script src="./js/lib.main.js" defer></script>
     <script src="./js/find-code.js" defer></script>
   </head>
 
   <body>
-
     <div id="top_button" class="hide_micro">
       <a href="/">
         <picture aria-label="Home" class="sidebar_control">
@@ -27,7 +26,6 @@
         </picture>
       </a>
     </div>
-
     <picture>
       <source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
       <source media="(max-height: 739px)" srcset="/images/logo/logo-full-200.png" type="image/png">
@@ -35,8 +33,8 @@
       <img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
     </picture>
       <h2>Code Lookup</h2>
-        <p>Enter one known code in the relevant box below and hit submit.  
-          Where they exist, the other code types will be filled in.</p>
+        <p>Enter one known code in the relevant box below and hit submit.
+           Where they exist, the other code types will be filled in.</p>
         <p>You cannot yet lookup by location name as the values are not unique.</p>
         <p>Location name search will be added in the future.</p>
 
@@ -47,7 +45,7 @@
       </div>
 
       <label for="name">Location name:</label><br>
-      <input type="text" class="small-lookup-box" id="name" name="name" readonly=""><br>
+      <input type="text" class="small-lookup-box" id="name" name="name" readonly><br>
       <label for="3alpha">CRS/3ALPHA:</label><br>
       <input type="text" class="small-lookup-box" id="3alpha" name="3alpha" maxlength="3"><br>
       <label for="nlc">NLC:</label><br>
@@ -57,7 +55,7 @@
       <label for="stanox">STANOX:</label><br>
       <input type="number" class="small-lookup-box" id="stanox" name="stanox"><br>
       <label for="stanme" hidden>STANME:</label><br>
-      <input type="test" class="small-lookup-box" id="stanme" name="stanme" readonly="" hidden><br>
+      <input type="text" class="small-lookup-box" id="stanme" name="stanme" readonly hidden><br>
       <input type="submit" value="Find" class="lookup-button" onclick="fetchEntry()">
       <input type="submit" value="Clear" class="lookup-button" onclick="clearForm()">
   </body>
diff --git a/help.html b/help.html
index d52d5d2..479604f 100644
--- a/help.html
+++ b/help.html
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8"/>
-    <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
+    <meta name="description" content="OwlBoard - How to use OwlBoard."/>
+    <meta name="robots" content="noindex"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="application-name" content="OwlBoard">
     <meta name="author" content="Frederick Boniface">
diff --git a/index.html b/index.html
index ba7a9eb..e2a6e4b 100644
--- a/index.html
+++ b/index.html
@@ -2,13 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8"/>
-    <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
+    <meta name="description" content="OwlBoard - Live train departures, PIS codes & reference data for traincrew."/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="application-name" content="OwlBoard">
     <meta name="author" content="Frederick Boniface">
     <meta name="theme-color" content="#00b7b7">
-    <link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
-    <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
+    <link rel="apple-touch-icon" href="./images/app-icons/any/apple-192.png">
+    <link rel="stylesheet" href="./styles/main.css"/>
     <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
     <link rel="manifest" type="application/json" href="./manifest.json"/>
     <script src="./js/lib.main.js" defer></script>
@@ -26,28 +26,29 @@
     <!-- Popup Menu -->
     <div id="top_button" class="hide_micro">
       <picture aria-label="Menu" class="sidebar_control" id="sidebar_open_short" onclick="sidebarOpen()">
-        <source srcset="/images/nav/hamburger.svg" type="image/svg+xml">
-        <img src="hamburger_40.png" alt="Open menu">
+        <source srcset="./images/nav/hamburger.svg" type="image/svg+xml">
+        <img src="./images/nav/hamburger_40.png" alt="Open menu">
       </picture>
       <picture aria-label="Close Menu" class="sidebar_control" id="sidebar_close_short" onclick="sidebarClose()">
-        <source srcset="/images/nav/close.svg" type="image/svg+xml">
-        <img src="close-40.png" alt="Close menu">
+        <source srcset="./images/nav/close.svg" type="image/svg+xml">
+        <img src="./images/nav/close-40.png" alt="Close menu">
       </picture>
     </div>
     <div id="sidebar">
-      <a href="/">Home</a>
-      <a href="/find-code.html">Code Search</a>
-      <a href="/settings.html">Settings</a>
-      <a href="/help.html">Help</a>
-      <a href="/issue.html">Report Issue</a>
+      <a href="./">Home</a>
+      <a href="./find-code.html">Code Search</a>
+      <a href="./pis.html">PIS Codes</a>
+      <a href="./settings.html">Settings</a>
+      <a href="./help.html">Help</a>
+      <a href="./issue.html">Report Issue</a>
     </div>
 
     <!-- Main Content Begins -->
     <picture>
-      <source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
-      <source media="(max-height: 739px)" srcset="/images/logo/logo-full-200.png" type="image/png">
-      <source srcset="/images/logo/logo-full-250.png" type="image/png">
-      <img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
+      <source srcset="./images/logo/wide_logo.svg" type="image/svg+xml">
+      <source media="(max-height: 739px)" srcset="./images/logo/logo-full-200.png" type="image/png">
+      <source srcset="./images/logo/logo-full-250.png" type="image/png">
+      <img class="titleimg" src="./images/logo/logo-full-250.png" alt="OwlBoard Logo">
     </picture>
     <br>
     <form action="board.html">
@@ -60,15 +61,12 @@
       <div id="quick_links">
       </div>
       <div class="text-description">
-        <p>A cache error means that some users are seeing a faulty layout on departure board pages,
-           an update to fix this has been made available but it may take a few days for this fix to 
-           be downloaded to your device.
-        </p>
-        <p>Customise your quick links on the <a href="/settings.html">Settings</a> page.</p>
+        <p>New feature in testing: <a href="./pis.html">PIS Code lookup</a></p>
+        <p>Customise your quick links on the <a href="./settings.html">Settings</a> page.</p>
       </div>
     <!-- Footer -->
     <footer>
-      <p>Created by <a href="https://fredboniface.co.uk" target="_blank" rel="noreferrer noopener">Fred Boniface</a> - <span id="ver_str">1.2.4</span></p>
+      <p>Created by <a href="https://fredboniface.co.uk" target="_blank" rel="noreferrer noopener">Fred Boniface</a> - <span id="ver_str"></span></p>
     </footer>
   </body>
 </html>
diff --git a/issue.html b/issue.html
index c59c79c..bb9301f 100644
--- a/issue.html
+++ b/issue.html
@@ -1,58 +1,59 @@
-<html>
-    <head>
-        <meta charset="UTF-8"/>
-        <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="application-name" content="OwlBoard">
-        <meta name="author" content="Frederick Boniface">
-        <meta name="theme-color" content="#00b7b7">
-        <link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
-        <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
-        <link rel="stylesheet" type="text/css" href="./styles/issue.css"/>
-        <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
-        <link rel="manifest" type="application/json" href="./manifest.json"/>
-        <script src="./js/lib.main.js" defer></script>
-        <script src="./js/issue.js" defer></script>
-        <title>OwlBoard - Report</title>
-    </head>
-    <body>
-      <!-- Loading Box -->
-      <div id="loading">
-        <div class="spinner">
-        </div>
-        <p id="loading_desc">Loading</p>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="description" content="OwlBoard - Report an issue with OwlBoard.">
+    <meta name="robots" content="noindex">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="application-name" content="OwlBoard">
+    <meta name="author" content="Frederick Boniface">
+    <meta name="theme-color" content="#00b7b7">
+    <link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
+    <link rel="stylesheet" type="text/css" href="./styles/main.css">
+    <link rel="stylesheet" type="text/css" href="./styles/issue.css">
+    <link rel="icon" type="image/svg+xml" href="./images/icon.svg">
+    <link rel="manifest" type="application/json" href="./manifest.json">
+    <script src="./js/lib.main.js" defer></script>
+    <script src="./js/issue.js" defer></script>
+    <title>OwlBoard - Report</title>
+  </head>
+  <body>
+    <!-- Loading Box -->
+    <div id="loading">
+      <div class="spinner">
       </div>
-      <div id="top_button" class="hide_micro">
-        <a href="/">
-          <picture aria-label="Home" class="sidebar_control">
-            <source srcset="/images/nav/back.svg" type="image/svg+xml">
-            <img src="back-40.png" alt="Home">
-          </picture>
-        </a>
-      </div>
-      <picture>
-        <source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
-        <source media="(max-height: 739px)" srcset="/images/logo/logo-full-200.png" type="image/png">
-        <source srcset="/images/logo/logo-full-250.png" type="image/png">
-        <img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
-      </picture>
-      <h2>Report an Issue</h2>
-        <p>To help diagnosing an issue, data about your browser and device will be
-           collected alongside the data that you enter below.</p>
-        <p>The data will be available publically in the <a href="https://git.fjla.uk/fred.boniface/owlboard/issues">
-           OwlBoard Issue Tracker</a>.  A preview will be shown before the data is sent.</p>
-          <label for="subject">Subject:</label><br>
-          <input type="text" name="subject" id="subject" class="text-entry"/><br>
-          <label for="content">Message:</label><br>
-          <textarea name="message" id="message" class="text-entry-long"></textarea><br>
-          <input type="submit" name="submit" id="submit" label="Preview" class="lookup-button" onclick="submit()">
+      <p id="loading_desc">Loading</p>
+    </div>
+    <div id="top_button" class="hide_micro">
+      <a href="/">
+        <picture aria-label="Home" class="sidebar_control">
+          <source srcset="/images/nav/back.svg" type="image/svg+xml">
+          <img src="back-40.png" alt="Home">
+        </picture>
+      </a>
+    </div>
+    <picture>
+      <source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
+      <source media="(max-height: 739px)" srcset="/images/logo/logo-full-200.png" type="image/png">
+      <source srcset="/images/logo/logo-full-250.png" type="image/png">
+      <img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
+    </picture>
+    <h2>Report an Issue</h2>
+      <p>To help diagnosing an issue, data about your browser and device will be
+         collected alongside the data that you enter below.</p>
+      <p>The data will be available publically in the <a href="https://git.fjla.uk/fred.boniface/owlboard/issues">
+         OwlBoard Issue Tracker</a>.  A preview will be shown before the data is sent.</p>
+      <label for="subject">Subject:</label><br>
+      <input type="text" name="subject" id="subject" class="text-entry"><br>
+      <label for="content">Message:</label><br>
+      <textarea name="message" id="message" class="text-entry-long"></textarea><br>
+      <input type="submit" name="submit" id="submit" label="Preview" class="lookup-button" onclick="submit()">
       <div id="preflight">
-        <h3>Check & Send</h3>
+        <h3>Check &amp; Send</h3>
         <h3>---</h3>
-        <h4 id="pre_subject"></h4>
-        <p id="pre_message"></p>
-        <button id="send" class="lookup-button" onclick="send()">Send</button>
-        <button id="cancel" class="lookup-button" onclick="cancel()">Cancel</button>
+          <h4 id="pre_subject">Subject</h4>
+            <p id="pre_message"></p>
+            <button id="send" class="lookup-button" onclick="send()">Send</button>
+            <button id="cancel" class="lookup-button" onclick="cancel()">Cancel</button>
       </div>
-    </body>
+  </body>
 </html>
\ No newline at end of file
diff --git a/js/auth.js b/js/auth.js
new file mode 100644
index 0000000..b2ac26a
--- /dev/null
+++ b/js/auth.js
@@ -0,0 +1,79 @@
+/*
+Auth process: User Requests Key => Server emails key to user =>
+              user opens link to auth.html =>
+              website POSTs key to server => Server checks validity =>
+              Server responds with the users auth key =>
+              auth.js adds this to localStorage
+*/
+const cmd = document.getElementById('cmd') // Assign element to const
+versionDisplay() // Show web version in footer
+init() // Run init function
+
+async function sendHome(){
+  await delay(2000)
+  location.replace('./')
+}
+
+async function cmdOut(message) {
+  html = '<p>' + message + '</p>'
+  cmd.insertAdjacentHTML('beforeend', html)
+}
+
+async function registerKey(key) { // Posts key to server and listens for response.
+  const url = `${window.location.origin}/api/v1/register/register`
+  const res = await fetch(url, { // The response will contain the UUID which will be registered
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    redirect: 'follow',
+    body: JSON.stringify({uuid: key})
+  })
+  const data = await res.json()
+  return res.status === 201
+    ? (localStorage.setItem('uuid', data.api_key), true)
+    : false
+}
+
+async function checkAuth(key) {
+  const url = `${window.location.origin}/api/v1/auth/test`
+  const res = await fetch(url, {
+    method: 'GET',
+    redirect: 'follow',
+    headers: {
+      'uuid': key
+    }
+  })
+  return res.status === 200 ? true : false
+}
+
+async function init(){ // Reads registration key from query, and calls registerKey(key)
+  cmdOut('Reading authorisation code')
+  const key = await getQuery('key')
+  if (key === 'false') {
+    cmdOut('No valid key found')
+    cmdOut('Try clicking the link again or request a new activation link')
+    hideLoading()
+    return
+  }
+  cmdOut('Requesting API Key from server')
+  if (!await registerKey(key)) {
+    cmdOut('Failed to register or invalid key')
+    cmdOut('Try again later or request a new link')
+    hideLoading()
+    return
+  }
+  showLoading()
+  if (! await checkAuth(localStorage.getItem('uuid'))) {
+    cmdOut('Authentication Check failed')
+    cmdOut('Please logout and request a new link')
+    hideLoading()
+    await delay(2000)
+    location.replace('./')
+  }
+  hideLoading()
+  cmdOut('Authentication succesful')
+  cmdOut('Redirecting to home')
+  await delay(3000)
+  location.replace('./')
+}
\ No newline at end of file
diff --git a/js/find-code.js b/js/find-code.js
index 915701e..6c12395 100644
--- a/js/find-code.js
+++ b/js/find-code.js
@@ -1,97 +1,98 @@
-hideLoading();
+hideLoading()
 
 async function fetchEntry(){  // This can be condensed
-    showLoading();
-    var name = document.getElementById("name")
-    var crs = document.getElementById("3alpha")
-    var nlc = document.getElementById("nlc")
-    var tiploc = document.getElementById("tiploc")
-    var stanox = document.getElementById("stanox")
+  showLoading()
+  var name = document.getElementById('name')
+  var crs = document.getElementById('3alpha')
+  var nlc = document.getElementById('nlc')
+  var tiploc = document.getElementById('tiploc')
+  var stanox = document.getElementById('stanox')
 
-    var values = {
-        name: name.value,
-        crs: crs.value,
-        nlc: nlc.value,
-        tiploc: tiploc.value,
-        stanox: stanox.value
-    }
-      parseData(values)
+  var values = {
+    name: name.value,
+    crs: crs.value,
+    nlc: nlc.value,
+    tiploc: tiploc.value,
+    stanox: stanox.value
+  }
+  parseData(values)
 }
 
 async function parseData(values){
-    vibe()
-    if (values.crs != ""){
-        setLoadingDesc(`Searching\n${values.crs.toUpperCase()}`)
-        var data = await getData("crs", values.crs)
-    } else if (values.nlc != ""){
-        setLoadingDesc(`Searching\n${values.nlc.toUpperCase()}`)
-        var data = await getData("nlc", values.nlc)
-    } else if (values.tiploc != ""){
-        setLoadingDesc(`Searching\n${values.tiploc.toUpperCase()}`)
-        var data = await getData("tiploc", values.tiploc)
-    } else if (values.stanox != ""){
-        setLoadingDesc(`Searching\n${values.stanox.toUpperCase()}`)
-        var data = await getData("stanox", values.stanox)
-    } else if (values.name != ""){
-        setLoadingDesc(`Searching\n${values.name}`)
-        var data = await getData("name", values.name)
-    } else {
-        log("find-code.parseData: No data entered", "WARN")
-        await clearForm();
-        document.getElementById("name").value = "No data entered"
-        vibe("err");
-        hideLoading();
-        return;
-    }
-    displayData(data);
+  vibe()
+  let data
+  if (values.crs != ''){
+    setLoadingDesc(`Searching\n${values.crs.toUpperCase()}`)
+    data = await getData('crs', values.crs)
+  } else if (values.nlc != ''){
+    setLoadingDesc(`Searching\n${values.nlc.toUpperCase()}`)
+    data = await getData('nlc', values.nlc)
+  } else if (values.tiploc != ''){
+    setLoadingDesc(`Searching\n${values.tiploc.toUpperCase()}`)
+    data = await getData('tiploc', values.tiploc)
+  } else if (values.stanox != ''){
+    setLoadingDesc(`Searching\n${values.stanox.toUpperCase()}`)
+    data = await getData('stanox', values.stanox)
+  } else if (values.name != ''){
+    setLoadingDesc(`Searching\n${values.name}`)
+    data = await getData('name', values.name)
+  } else {
+    log('find-code.parseData: No data entered', 'WARN')
+    await clearForm()
+    document.getElementById('name').value = 'No data entered'
+    vibe('err')
+    hideLoading()
+    return
+  }
+  displayData(data)
 }
 
 async function getData(type, value){
-    log(`find-code.getData: Looking for: ${type} '${value}'`, "INFO")
-    try {
-        var url = `${window.location.origin}/api/v1/find/${type}/${value}`;
-        var resp = await fetch(url);
-        return await resp.json()
-    } catch (err) {
-        log(`find-code.getData: Error getting data: ${err}`, "WARN")
-        vibe("err")
-        return "";
-    }
+  log(`find-code.getData: Looking for: ${type} '${value}'`, 'INFO')
+  try {
+    var url = `${window.location.origin}/api/v1/find/${type}/${value}`
+    var resp = await fetch(url)
+    return await resp.json()
+  } catch (err) {
+    log(`find-code.getData: Error getting data: ${err}`, 'WARN')
+    vibe('err')
+    return ''
+  }
 }
 
 async function displayData(data){
-    hideLoading();
-    if (data.status === "failed" || data == ""){
-        log(`find-code.displayData: Unable to find data`, "WARN")
-        clearForm();
-        document.getElementById("name").value = "Not Found";
-    } else {
-        log(`find-code.displayData: Inserting data`, "INFO")
-        vibe("ok")
-        try {
-            document.getElementById("name").value = data['0']['NLCDESC']
-        } catch (err) {}
-        try {
-            document.getElementById("3alpha").value = data['0']['3ALPHA']
-        } catch (err) {}
-        try {
-            document.getElementById("nlc").value = data['0']['NLC']
-        } catch (err) {}
-        try {
-            document.getElementById("tiploc").value = data['0']['TIPLOC']
-        } catch (err) {}
-        try {
-            document.getElementById("stanox").value = data['0']['STANOX']
-        } catch (err) {}
-    }
+  hideLoading()
+  if (data.status === 'failed' || data == ''){
+    log('find-code.displayData: Unable to find data', 'WARN')
+    clearForm()
+    document.getElementById('name').value = 'Not Found'
+  } else {
+    log('find-code.displayData: Inserting data', 'INFO')
+    vibe('ok')
+    try {
+      document.getElementById('name').value = data['0']['NLCDESC']
+    } catch (err) {}
+    try {
+      document.getElementById('3alpha').value = data['0']['3ALPHA']
+    } catch (err) {}
+    try {
+      document.getElementById('nlc').value = data['0']['NLC']
+    } catch (err) {}
+    try {
+      document.getElementById('tiploc').value = data['0']['TIPLOC']
+    } catch (err) {}
+    try {
+      document.getElementById('stanox').value = data['0']['STANOX']
+    } catch (err) {}
+  }
 }
 
 async function clearForm(){
-    document.getElementById("name").value = ""
-    document.getElementById("3alpha").value = ""
-    document.getElementById("nlc").value = ""
-    document.getElementById("tiploc").value = ""
-    document.getElementById("stanox").value = ""
-    vibe("ok");
-    hideLoading();
+  document.getElementById('name').value = ''
+  document.getElementById('3alpha').value = ''
+  document.getElementById('nlc').value = ''
+  document.getElementById('tiploc').value = ''
+  document.getElementById('stanox').value = ''
+  vibe('ok')
+  hideLoading()
 }
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 6a29703..cea6830 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,27 +1,27 @@
 // Init:
-pageInit();
+pageInit()
+versionDisplay()
 
-if ("serviceWorker" in navigator) {
-  navigator.serviceWorker.register("/sw.js");
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
 }
 
 async function pageInit() {
-  await loadQuickLinks();
-  hideLoading(); // From lib.main
-  localStorage.setItem("ver-web", document.getElementById('ver_str').textContent)
+  await loadQuickLinks()
+  hideLoading() // From lib.main
 }
 
 async function gotoBoard(station){
-  vibe("ok")
-  window.location.assign(`${window.location.origin}/board.html?stn=${station}`);
+  vibe('ok')
+  window.location.assign(`${window.location.origin}/board.html?stn=${station}`)
 }
 
 async function loadQuickLinks(){
-  var data = await getQuickLinks(); // From lib.main
-  var buttons = "";
-    for(var i = 0; i < data.length; i++) {
-        buttons += `
+  var data = await getQuickLinks() // From lib.main
+  var buttons = ''
+  for(var i = 0; i < data.length; i++) {
+    buttons += `
         <button class="actionbutton" onclick="gotoBoard('${data[i]}')">${data[i].toUpperCase()}</button>`
-    }
-  document.getElementById("quick_links").insertAdjacentHTML("beforeend", buttons)
+  }
+  document.getElementById('quick_links').insertAdjacentHTML('beforeend', buttons)
 }
\ No newline at end of file
diff --git a/js/issue.js b/js/issue.js
index 01d3940..e8330c5 100644
--- a/js/issue.js
+++ b/js/issue.js
@@ -1,88 +1,88 @@
-init();
+init()
 
 async function init() {
-    hideLoading()
+  hideLoading()
 }
 
 async function submit() {
-    setLoadingDesc("Collecting\nData")
-    showLoading()
-    var browserData = await getBrowserData();
-    setLoadingDesc("Reading\nForm")
-    var formData = await getFormData();
-    preflight({browserData: browserData, formData: formData})
+  setLoadingDesc('Collecting\nData')
+  showLoading()
+  var browserData = await getBrowserData()
+  setLoadingDesc('Reading\nForm')
+  var formData = await getFormData()
+  preflight({browserData: browserData, formData: formData})
 }
 
 async function getFormData() {
-    let data = {}
-    data.subject = document.getElementById("subject").value
-    data.message = document.getElementById("message").value
-    return data
+  let data = {}
+  data.subject = document.getElementById('subject').value
+  data.message = document.getElementById('message').value
+  return data
 }
 
 async function getBrowserData() {
-    let data = {}
-    data.userAgent = navigator.userAgent
-    data.userAgentData = JSON.stringify(navigator.userAgentData)
-    data.localStorage = JSON.stringify(await storageAvailable('localStorage'))
-    data.sessionStorage = JSON.stringify(await storageAvailable('sessionStorage'))
-    data.viewport = `${window.innerWidth} x ${window.innerHeight}`
-    return data
+  let data = {}
+  data.userAgent = navigator.userAgent
+  data.userAgentData = JSON.stringify(navigator.userAgentData)
+  data.localStorage = JSON.stringify(await storageAvailable('localStorage'))
+  data.sessionStorage = JSON.stringify(await storageAvailable('sessionStorage'))
+  data.viewport = `${window.innerWidth} x ${window.innerHeight}`
+  return data
 }
 
 async function preflight(data) {
-    document.getElementById("pre_subject").textContent = data.formData.subject
-    pre_msg = `UserAgent: ${data.browserData.userAgent}
+  document.getElementById('pre_subject').textContent = data.formData.subject
+  pre_msg = `UserAgent: ${data.browserData.userAgent}
      \nUserAgentData: ${data.browserData.userAgentData}
      \nlocalStorage Avail: ${data.browserData.localStorage}
      \nsessionStorage Avail: ${data.browserData.sessionStorage}
      \nViewport size: ${data.browserData.viewport}
      \nUser message:\n\n${data.formData.message}`
-    document.getElementById("pre_message").innerText = pre_msg
-    hideLoading()
-    document.getElementById("preflight").style = "display: block"
-    sessionStorage.setItem("preflight_subject", data.formData.subject)
-    sessionStorage.setItem("preflight_msg", pre_msg)
+  document.getElementById('pre_message').innerText = pre_msg
+  hideLoading()
+  document.getElementById('preflight').style = 'display: block'
+  sessionStorage.setItem('preflight_subject', data.formData.subject)
+  sessionStorage.setItem('preflight_msg', pre_msg)
 }
 
 async function cancel() {
-    document.getElementById("preflight").style = "display: none"
+  document.getElementById('preflight').style = 'display: none'
 }
 
 async function send() {
-    setLoadingDesc("Sending\nData")
-    document.getElementById("preflight").style = "display: none"
-    showLoading()
-    var subject = sessionStorage.getItem("preflight_subject");
-    var msg = sessionStorage.getItem("preflight_msg")
-    if (typeof subject != "string") {
-        subject = document.getElementById("preflight_subject").innerText
-    }
-    if (typeof msg != "string") {
-        msg = document.getElementById("preflight_msg")
-    }
-    var payload = JSON.stringify({subject: subject, msg: msg})
-    console.log(payload);
-    let opt = {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Accept': 'application/json'
-        },
-        redirect: 'follow',
-        body: payload
-    }
-    var res = await fetch(`${window.location.origin}/api/v1/issue`, opt)
-    if (res.status == 200) {
-        setLoadingDesc("Success")
-        vibe("ok")
-        await delay(2500)
-        window.location.replace("/")
-    } else {
-        setLoadingDesc("Error")
-        vibe("err")
-        await delay(2500)
-        hideLoading()
-        document.getElementById("preflight").style = "display: none;"
-    }
+  setLoadingDesc('Sending\nData')
+  document.getElementById('preflight').style = 'display: none'
+  showLoading()
+  var subject = sessionStorage.getItem('preflight_subject')
+  var msg = sessionStorage.getItem('preflight_msg')
+  if (typeof subject != 'string') {
+    subject = document.getElementById('preflight_subject').innerText
+  }
+  if (typeof msg != 'string') {
+    msg = document.getElementById('preflight_msg')
+  }
+  var payload = JSON.stringify({subject: subject, msg: msg})
+  console.log(payload)
+  let opt = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    },
+    redirect: 'follow',
+    body: payload
+  }
+  var res = await fetch(`${window.location.origin}/api/v1/issue`, opt)
+  if (res.status == 200) {
+    setLoadingDesc('Success')
+    vibe('ok')
+    await delay(2500)
+    window.location.replace('/')
+  } else {
+    setLoadingDesc('Error')
+    vibe('err')
+    await delay(2500)
+    hideLoading()
+    document.getElementById('preflight').style = 'display: none;'
+  }
 }
\ No newline at end of file
diff --git a/js/lib.board.js b/js/lib.board.js
index ed93dfb..75494c1 100644
--- a/js/lib.board.js
+++ b/js/lib.board.js
@@ -1,196 +1,196 @@
 /* Fetch Functions */
 async function publicLdb(stn) {
-    var url = `${window.location.origin}/api/v1/ldb/${stn}`;
-    console.time("Time: Fetch LDB Data")
-    var resp = await fetch(url);
-    console.timeEnd("Time: Fetch LDB Data")
-    return await resp.json();
+  var url = `${window.location.origin}/api/v1/ldb/${stn}`
+  console.time('Time: Fetch LDB Data')
+  var resp = await fetch(url)
+  console.timeEnd('Time: Fetch LDB Data')
+  return await resp.json()
 }
 
 /* Set page heading */
 async function setHeaders(title,time) {
-    var prefix = `OwlBoard - `
-    document.title = `${prefix}${title}`
-    document.getElementById("stn_name").textContent = title
-    document.getElementById("fetch_time").textContent = time.toLocaleTimeString()
-    sessionStorage.setItem("board_location", title);
+  var prefix = 'OwlBoard - '
+  document.title = `${prefix}${title}`
+  document.getElementById('stn_name').textContent = title
+  document.getElementById('fetch_time').textContent = time.toLocaleTimeString()
+  sessionStorage.setItem('board_location', title)
 }
 
 /* Display No Trains Message */
 async function displayNoTrains() {
-    log("No Trains", "WARN")
-    document.getElementById('no_services').style = "display: block;";
-    hideLoading();
+  log('No Trains', 'WARN')
+  document.getElementById('no_services').style = 'display: block;'
+  hideLoading()
 }
 
 /* Parse the value of `platform` to account for unknown platforms */
 async function parsePlatform(svc){
-    if (svc.platform != undefined) {
-        var platform = svc.platform;
-    } else {
-        var platform = "-";
-    }
-    if (svc.platformChanged) { // Not present in public API, ready for staff version.
-        var changed = "changed";
-    } else {
-        var changed = "";
-    }
-    return {num: platform, change: changed}
+  if (svc.platform != undefined) {
+    var platform = svc.platform
+  } else {
+    var platform = '-'
+  }
+  if (svc.platformChanged) { // Not present in public API, ready for staff version.
+    var changed = 'changed'
+  } else {
+    var changed = ''
+  }
+  return {num: platform, change: changed}
 }
 
 
 /* Change value of time strings to fit well on small screens */
 async function parseTime(string){
-    switch (string) {
-        case "Delayed":
-            var output = "LATE";
-            var change = "changed";
-            break;
-        case "Cancelled":
-            var output = "CANC";
-            var change = "cancelled";
-            break;
-        case "On time":
-            var output = "RT";
-            var change = "";
-            break;
-        case "":
-            var output = "-";
-            var change = "";
-            break;
-        case undefined:
-            var output = "-";
-            var change = "";
-            break;
-        case "No report":
-            var output = "-";
-            var change = "";
-            break;
-        case "undefined":
-            var output = false;
-            var change = "";
-            break;
-        default:
-            var output = string;
-            var change = "changed";
-    }
-    return {data: output, changed: change};
+  switch (string) {
+  case 'Delayed':
+    var output = 'LATE'
+    var change = 'changed'
+    break
+  case 'Cancelled':
+    var output = 'CANC'
+    var change = 'cancelled'
+    break
+  case 'On time':
+    var output = 'RT'
+    var change = ''
+    break
+  case '':
+    var output = '-'
+    var change = ''
+    break
+  case undefined:
+    var output = '-'
+    var change = ''
+    break
+  case 'No report':
+    var output = '-'
+    var change = ''
+    break
+  case 'undefined':
+    var output = false
+    var change = ''
+    break
+  default:
+    var output = string
+    var change = 'changed'
+  }
+  return {data: output, changed: change}
 }
 
 /* Convert multiple Origin/Destinations to single string */
 async function parseName(location) {
-    if (Array.isArray(location)) {
-        var name = `${location[0]['locationName']} & ${location[1]['locationName']}`
-        return name;
-    }
-    else {
-        return location.locationName;
-    }
+  if (Array.isArray(location)) {
+    var name = `${location[0]['locationName']} & ${location[1]['locationName']}`
+    return name
+  }
+  else {
+    return location.locationName
+  }
 }
 
 // Display Alert Messages
 async function displayAlerts(array) {
-    var counter = 0
-    var messages = ""
-    for(var i = 0; i < array.length; i++) {
-        // Increment counter
-        counter += 1;
-        // Reset Vars
-        messages += `<p>${array[i]}</p>`;
+  var counter = 0
+  var messages = ''
+  for(var i = 0; i < array.length; i++) {
+    // Increment counter
+    counter += 1
+    // Reset Vars
+    messages += `<p>${array[i]}</p>`
+  }
+  if (counter > 0) {
+    document.getElementById('alerts_msg').insertAdjacentHTML('beforeend', messages)
+    document.getElementById('alerts').style = 'display:block'
+    document.getElementById('alerts_bar').style = 'display:block'
+    if (counter == 1) {
+      document.getElementById('alert_bar_note').textContent = `There is ${counter} active alert`
+    } else if (counter > 1) {
+      document.getElementById('alert_bar_note').textContent = `There are ${counter} active alerts`
     }
-    if (counter > 0) {
-        document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", messages)
-        document.getElementById("alerts").style = "display:block"
-        document.getElementById("alerts_bar").style = "display:block"
-        if (counter == 1) {
-            document.getElementById("alert_bar_note").textContent = `There is ${counter} active alert`
-        } else if (counter > 1) {
-            document.getElementById("alert_bar_note").textContent = `There are ${counter} active alerts`
-        }
-        return true;
-    }
-    return false;
+    return true
+  }
+  return false
 }
 
 
 /* Show/Hide alerts box */
 async function inflateAlerts() {
-    document.getElementById("alerts_msg").style = "display:block;";
-    document.getElementById("alert_expand_arrow").style = "transform: rotate(180deg);";
-    document.getElementById("alerts_bar").setAttribute("onclick", "deflateAlerts()")
+  document.getElementById('alerts_msg').style = 'display:block;'
+  document.getElementById('alert_expand_arrow').style = 'transform: rotate(180deg);'
+  document.getElementById('alerts_bar').setAttribute('onclick', 'deflateAlerts()')
 }
 
 async function deflateAlerts() {
-    document.getElementById("alerts_msg").style = "display.none;";
-    document.getElementById("alert_expand_arrow").style = "transform: rotate(0deg);";
-    document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
+  document.getElementById('alerts_msg').style = 'display.none;'
+  document.getElementById('alert_expand_arrow').style = 'transform: rotate(0deg);'
+  document.getElementById('alerts_bar').setAttribute('onclick', 'inflateAlerts()')
 }
 
 /*//// SERVICE DETAIL LISTS ////*/
 // Build calling list:  -- This outputs calling point data to sessionStorage in the format: key{pre: [{PREVIOUS_Stops}], post: [{POST_STOPS}]}
 async function buildCallLists(svc) {
-    var sSvcId = svc.serviceID;
-    var oSvcData = {
-        plat: svc.platform,
-        sta: svc.sta,
-        eta: svc.eta,
-        std: svc.std,
-        etd: svc.etd
-    };
-    try {
-        if (typeof svc.previousCallingPoints.callingPointList.callingPoint != 'undefined') {
-            let array = await makeArray(svc.previousCallingPoints.callingPointList.callingPoint);
-            oSvcData.pre = array;
-        }
-    } catch (err) { /* Do nothing if ERR */ }
-    try {
-        if (typeof svc.subsequentCallingPoints.callingPointList.callingPoint != 'undefined') {
-            let array = await makeArray(svc.subsequentCallingPoints.callingPointList.callingPoint);
-            oSvcData.post = array;
-        }
-    } catch (err) { /* Do nothing if ERR */ }
-    sessionStorage.setItem(sSvcId, JSON.stringify(oSvcData))
+  var sSvcId = svc.serviceID
+  var oSvcData = {
+    plat: svc.platform,
+    sta: svc.sta,
+    eta: svc.eta,
+    std: svc.std,
+    etd: svc.etd
+  }
+  try {
+    if (typeof svc.previousCallingPoints.callingPointList.callingPoint != 'undefined') {
+      let array = await makeArray(svc.previousCallingPoints.callingPointList.callingPoint)
+      oSvcData.pre = array
+    }
+  } catch (err) { /* Do nothing if ERR */ }
+  try {
+    if (typeof svc.subsequentCallingPoints.callingPointList.callingPoint != 'undefined') {
+      let array = await makeArray(svc.subsequentCallingPoints.callingPointList.callingPoint)
+      oSvcData.post = array
+    }
+  } catch (err) { /* Do nothing if ERR */ }
+  sessionStorage.setItem(sSvcId, JSON.stringify(oSvcData))
 }
 
 /* Display calling list: - Read data from sessionStorage and write to DOM. */
 async function showCalls(id) {
-    log(`Showing details for service ${id}`, "INFO")
-    var svcDetail = await JSON.parse(sessionStorage.getItem(id));
-    var pre = "";
-    var post = "";
-    if (typeof svcDetail.pre != 'undefined') {
-        for(var preCall = 0; preCall < svcDetail.pre.length; preCall++) {
-            pre += await singleCall(svcDetail.pre[preCall]);
-        }
+  log(`Showing details for service ${id}`, 'INFO')
+  var svcDetail = await JSON.parse(sessionStorage.getItem(id))
+  var pre = ''
+  var post = ''
+  if (typeof svcDetail.pre != 'undefined') {
+    for(var preCall = 0; preCall < svcDetail.pre.length; preCall++) {
+      pre += await singleCall(svcDetail.pre[preCall])
     }
-    if (typeof svcDetail.post != 'undefined') {
-        for(var postCall = 0; postCall < svcDetail.post.length; postCall++) {
-            post += await singleCall(svcDetail.post[postCall]);
-        }
+  }
+  if (typeof svcDetail.post != 'undefined') {
+    for(var postCall = 0; postCall < svcDetail.post.length; postCall++) {
+      post += await singleCall(svcDetail.post[postCall])
     }
-    /* Run retreived data through parsers */
-    var thisStd = await parseTime(svcDetail.std);
-    var thisEtd = await parseTime(svcDetail.etd);
-    var thisSta = await parseTime(svcDetail.sta);
-    var thisEta = await parseTime(svcDetail.eta);
-    /* Prepare data for this station */
-    if (thisStd.data != "-") {
-        var sTime = `${thisStd.data}`
-        var eTime = `${thisEtd.data}`
-        var change = thisEtd.changed
-    } else {
-        var sTime = `${thisSta.data}`
-        var eTime = `${thisEta.data}`
-        var change = thisEta.changed
-    };
+  }
+  /* Run retreived data through parsers */
+  var thisStd = await parseTime(svcDetail.std)
+  var thisEtd = await parseTime(svcDetail.etd)
+  var thisSta = await parseTime(svcDetail.sta)
+  var thisEta = await parseTime(svcDetail.eta)
+  /* Prepare data for this station */
+  if (thisStd.data != '-') {
+    var sTime = `${thisStd.data}`
+    var eTime = `${thisEtd.data}`
+    var change = thisEtd.changed
+  } else {
+    var sTime = `${thisSta.data}`
+    var eTime = `${thisEta.data}`
+    var change = thisEta.changed
+  };
 
-    let here = `<tr>
-                  <td class="detail-name detail-name-here detail-table-content">${sessionStorage.getItem("board_location")}</td>
+  let here = `<tr>
+                  <td class="detail-name detail-name-here detail-table-content">${sessionStorage.getItem('board_location')}</td>
                   <td class="detail-table-content">${sTime}</td>
                   <td class="detail-table-content ${change}">${eTime}</td>
                 </tr> `
-    /* Prepare then insert DOM Data */
-    let dom = ` <div id="${id}" class="call-data">
+  /* Prepare then insert DOM Data */
+  let dom = ` <div id="${id}" class="call-data">
                   <p class="close-data" onclick="hideCalls('${id}')">X</p>
                   <table class="call-table">
                     <tr>
@@ -204,26 +204,26 @@ async function showCalls(id) {
                   </table>
                 </div>`
 
-    document.body.insertAdjacentHTML("beforeend", dom);
-    document.getElementById(id).style = "display: block;";
-    return;
+  document.body.insertAdjacentHTML('beforeend', dom)
+  document.getElementById(id).style = 'display: block;'
+  return
 }
 
 async function hideCalls(id) {
-    let element = document.getElementById(id)
-    element.style = "display: none;";
-    element.remove();
-    return;
+  let element = document.getElementById(id)
+  element.style = 'display: none;'
+  element.remove()
+  return
 }
 
 /* Builds the train data information in to a table row */
 async function singleCall(data) {
-    if (typeof data.et != "undefined") {
-        var time = await parseTime(data.et)
-    } else if (typeof data.at != "undefined") {
-        var time = await parseTime(data.at)
-    }
-    return `<tr>
+  if (typeof data.et != 'undefined') {
+    var time = await parseTime(data.et)
+  } else if (typeof data.at != 'undefined') {
+    var time = await parseTime(data.at)
+  }
+  return `<tr>
               <td class="detail-name detail-table-content">${data.locationName}</td>
               <td class="detail-table-content">${data.st}</td>
               <td class="detail-table-content ${time.changed}">${time.data}</td>
@@ -232,19 +232,19 @@ async function singleCall(data) {
 
 /* Error Handler */
 async function errorHandler() {
-    if (sessionStorage.getItem("failcount")) {
-        var errCount = parseInt(sessionStorage.getItem("failcount"))
-    } else {
-        var errCount = 0;
-    }
-    errCount += 1;
-    sessionStorage.setItem("failcount", errCount.toString())
-    if (errCount < 10){
-        await delay(3000);
-        vibe("err")
-        location.reload()
-    } else {
-        sessionStorage.removeItem("failcount");
-        window.location.assign("conn-err.html")
-    }
+  if (sessionStorage.getItem('failcount')) {
+    var errCount = parseInt(sessionStorage.getItem('failcount'))
+  } else {
+    var errCount = 0
+  }
+  errCount += 1
+  sessionStorage.setItem('failcount', errCount.toString())
+  if (errCount < 10){
+    await delay(3000)
+    vibe('err')
+    location.reload()
+  } else {
+    sessionStorage.removeItem('failcount')
+    window.location.assign('conn-err.html')
+  }
 }
\ No newline at end of file
diff --git a/js/lib.main.js b/js/lib.main.js
index c1d9e0d..6c15c6b 100644
--- a/js/lib.main.js
+++ b/js/lib.main.js
@@ -1,141 +1,196 @@
+/* All Page Init */
+const version = '2.0.0'
+
 /* Feature Detectors */
 
 /* Valid values for ${type}: localstorage, sessionstorage */
 async function storageAvailable(type) {  // Currently not used
-    try {
-        let storage = window[type];
-        let x = '__storage_test__';
-        storage.setItem(x, "test");
-        storage.getItem(x);
-        storage.removeItem(x);
-        log(`lib.main.storageAvailable: ${type} is available`, "INFO")
-        return true;
-    } catch (err) {
-        log(`lib.main.storageAvailable: ${type} is not available`, "ERR")
-        return false;
-    }
+  try {
+    let storage = window[type]
+    let x = '__storage_test__'
+    storage.setItem(x, 'test')
+    storage.getItem(x)
+    storage.removeItem(x)
+    log(`lib.main.storageAvailable: ${type} is available`, 'INFO')
+    return true
+  } catch (err) {
+    log(`lib.main.storageAvailable: ${type} is not available`, 'ERR')
+    return false
+  }
+}
+
+async function versionDisplay() { // Outputs version string on to any page with a tag with id="ver_str"
+  localStorage.setItem('version', version)
+  document.getElementById('ver_str').textContent = version
+  return
 }
 
 /* Array Converter
    Converts a string to a single item array */
 async function makeArray(data) {
-    if (!Array.isArray(data)) {
-        var array = [];
-        array.push(data);
-        return array;
-    }
-    return data;
+  if (!Array.isArray(data)) {
+    var array = []
+    array.push(data)
+    return array
+  }
+  return data
 }
 
 /* Timeouts */
 /* Usage: '' */
-const delay = ms => new Promise(res => setTimeout(res, ms));
+const delay = ms => new Promise(res => setTimeout(res, ms))
 
 
 /* Log Helper */
 /* Maintains backwards compatibility for previous
    implementation of log helper */
 async function log(msg, type) {
-    const mode = "prod"
-    if (mode === "prod" && type != "ERR") {
-        return;
-    }
-    var time = new Date().toISOString();
-    switch (type) {
-        case "ERR":
-            console.error(`${time} - ${msg}`);
-            break;
-        case "WARN":
-            console.warn(`${time} - ${msg}`);
-            break;
-        case "INFO":
-            console.info(`${time} - ${msg}`);
-            break;
-        default:
-            console.log(`${time} - ${msg}`);
-            break;
-    };
-};
+  const mode = 'tst'
+  if (mode === 'prod' && type != 'ERR') {
+    return
+  }
+  var time = new Date().toISOString()
+  switch (type) {
+  case 'ERR':
+    console.error(`${time} - ${msg}`)
+    break
+  case 'WARN':
+    console.warn(`${time} - ${msg}`)
+    break
+  case 'INFO':
+    console.info(`${time} - ${msg}`)
+    break
+  default:
+    console.log(`${time} - ${msg}`)
+    break
+  }
+}
 
 /* Show/Hide - Menu Control */
 async function sidebarOpen() {
-    document.getElementById("sidebar").style.width = "50%";
-    document.getElementById("sidebar_open_short").style.display = "none";
-    document.getElementById("sidebar_close_short").style.display = "block";
-  }
+  document.getElementById('sidebar').style.width = '50%'
+  document.getElementById('sidebar_open_short').style.display = 'none'
+  document.getElementById('sidebar_close_short').style.display = 'block'
+}
   
-  async function sidebarClose() {
-    document.getElementById("sidebar").style.width = "0%"
-    document.getElementById("sidebar_open_short").style.display = "block";
-    document.getElementById("sidebar_close_short").style.display = "none";
-  }
+async function sidebarClose() {
+  document.getElementById('sidebar').style.width = '0%'
+  document.getElementById('sidebar_open_short').style.display = 'block'
+  document.getElementById('sidebar_close_short').style.display = 'none'
+}
 
 /* Loading Box Control */
 async function hideLoading() {
-    document.getElementById("loading").style = "display: none;";
+  document.getElementById('loading').style = 'display: none;'
 }
 
-    /* DEPRECIATED: Alias for hideLoading() - Marked for removal*/
-    async function clearLoading() {
-        log("Depreciated function called - clearLoading() - Alias to hideLoading()", "WARN")
-        await hideLoading();
-    }
+/* DEPRECIATED: Alias for hideLoading() - Marked for removal*/
+async function clearLoading() {
+  log('Depreciated function called - clearLoading() - Alias to hideLoading()', 'WARN')
+  hideLoading()
+}
 
 async function showLoading() {
-    document.getElementById("loading").style = "display: block;";
+  document.getElementById('loading').style = 'display: block;'
 }
 
 async function setLoadingDesc(desc) {
-    document.getElementById("loading_desc").textContent = `${desc}`;
+  document.getElementById('loading_desc').textContent = `${desc}`
 }
 
 /* Fetch User Settings */
 async function getQuickLinks() {
-    var defaults =
-                ["bri","lwh","srd","mtp","rda","cfn",
-                "sml","shh","pri","avn","sar","svb"];
-    try {
-        if (localStorage.getItem("qlOpt")) {
-            var data = JSON.parse(localStorage.getItem("qlOpt"));
-        } else {
-            data = defaults;
-        }
-    } catch (err) {
-        data = defaults;
+  var defaults =
+                ['bri','lwh','srd','mtp','rda','cfn',
+                  'sml','shh','pri','avn','sar','svb']
+  try {
+    if (localStorage.getItem('qlOpt')) {
+      var data = JSON.parse(localStorage.getItem('qlOpt'))
+    } else {
+      data = defaults
     }
-    return data.sort();
+  } catch (err) {
+    data = defaults
+  }
+  return data.sort()
 }
 
 /* Fetch a known query parameter from the pages URL */
 async function getQuery(param) {
-    var params = new URLSearchParams(window.location.search)
-    var query = params.get(param)
-    if (query) {
-        return query
-    } else {
-        return 'false'
+  var params = new URLSearchParams(window.location.search)
+  var query = params.get(param)
+  if (query) {
+    return query
+  } else {
+    return 'false'
+  }
+}
+
+async function getApi(path,auth = false) {
+  let apiVer = 'v1'
+  let url = `${window.location.origin}/api/${apiVer}/${path}`
+  log(`getApi: Fetching from endpoint: ${url}, Auth=${auth}`)
+  if (auth) {
+    let key = localStorage.getItem('uuid')
+    var options = {
+      method: 'GET',
+      redirect: 'follow',
+      headers: {
+        'uuid': key
+      }
     }
+  } else {
+    var options = {
+      method: 'GET',
+      redirect: 'follow'
+    }
+  }
+  try {
+    var resp = await fetch(url, options)
+    var json = await resp.json()
+    log(`resp.status: ${resp.status}`)
+    log(`resp.json: ${json}`)
+    if (resp.status != 200) {
+      log(`lib.main: getApi: Response status: ${resp.status}`)
+      return resp.status
+    }
+    if (!resp.ok) {
+      log('lib.main: getApi: Fetch error')
+      return false
+    }
+    return json
+  } catch(err) {
+    log(`lib.main: getApi: Caught fetch error.  Status: ${resp.status}`)
+    return resp.status
+  }
+}
+
+async function showHideAuthNotice() {
+  let uuid = localStorage.getItem('uuid')
+  if (uuid) {
+    document.getElementById('auth-required').style = 'display:none'
+  }
 }
 
 async function vibe(type) {
-    let canVibrate = "vibrate" in navigator || "mozVibrate" in navigator
-    if (canVibrate && !("vibrate" in navigator)){
-        navigator.vibrate = navigator.mozVibrate
-    }
-    switch (type) {
-        case "err":
-            navigator.vibrate([300])
-            break;
-        case "ok":
-            navigator.vibrate([50,50,50])
-            break;
-        default:
-            navigator.vibrate(30)
-    }
+  let canVibrate = 'vibrate' in navigator || 'mozVibrate' in navigator
+  if (canVibrate && !('vibrate' in navigator)){
+    navigator.vibrate = navigator.mozVibrate
+  }
+  switch (type) {
+  case 'err':
+    navigator.vibrate([300])
+    break
+  case 'ok':
+    navigator.vibrate([50,50,50])
+    break
+  default:
+    navigator.vibrate(30)
+  }
 }
 
-async function convertUnixLocal(unix) {
-    var jsTime = unix*1000
-    var dt = new Date(jsTime)
-    return dt.toLocaleString()
+async function convertUnixLocal(unix) { // Convert unix time string to local
+  var jsTime = unix*1000
+  var dt = new Date(jsTime)
+  return dt.toLocaleString()
 }
\ No newline at end of file
diff --git a/js/pis.js b/js/pis.js
new file mode 100644
index 0000000..f0c3ba5
--- /dev/null
+++ b/js/pis.js
@@ -0,0 +1,75 @@
+hideLoading()
+versionDisplay()
+showHideAuthNotice()
+
+async function findByOrigDest() {
+  showLoading()
+  const formData = await fetchOrigDest()
+  log(`findByOrigDest: Searching for PIS Code for ${JSON.stringify(formData)}`)
+  const endpoint = `pis/origdest/${formData.origin}/${formData.destination}`
+  console.time('findByOrigDest-GET')
+  const json = await getApi(endpoint, auth = true)
+  console.timeEnd('findByOrigDest-GET')
+  if (json == false) {
+    await displayNoData()
+  } else if (json == 401) {
+    await displayUnauthorised()
+  } else {
+    await insertData(json)
+  }
+  document.getElementById('crs-box').style = 'display:none'
+  document.getElementById('result-box').style = 'display:block'
+  hideLoading()
+}
+
+async function fetchOrigDest() {
+  var orig = document.getElementById('origin').value
+  var dest = document.getElementById('destination').value
+  return {origin: orig, destination: dest}
+}
+
+async function insertData(json) {
+  // Receives the JSON Respose ([{},{}]) containing one or more possible
+  // PIS codes.  Display the code and the stops with a method of scrolling between them.
+  // Maybe as a table or a carousel?
+  console.time('insertData')
+  const div = document.getElementById('result-box')
+  let tableData = `<table id="result-table">
+        <tr>
+        <th>Code</th>
+        <th>Stations</th>
+        </tr>`
+  let results = 0
+  for(var i = 0; i < json.length; i++) {  // Hopefully can style output with CSS
+    tableData += `<tr><td class="pis-code">${json[i]['code']}</td>
+            <td class="station">${json[i]['stops'].join(', ')}</td></tr>`
+    results++
+  }
+  tableData += '</table>'
+  div.insertAdjacentHTML('beforeend', tableData)
+  document.getElementById('result-count').textContent = results.toString()
+  console.timeEnd('insertData')
+}
+
+async function displayNoData() {
+  const msg = '<p id="result-table">No results found</p>'
+  document.getElementById('result-box').insertAdjacentHTML('beforeend', msg)
+}
+
+async function displayUnauthorised() {
+  const msg = '<p id="result-table">Unauthorised - please ensure you are logged into the <a href="./settings.html">rail staff version</a></p>'
+  document.getElementById('result-box').insertAdjacentHTML('beforeend', msg)
+}
+
+async function reset() {
+  try {
+    document.getElementById('origin').value = ''
+    document.getElementById('destination').value = ''
+    document.getElementById('result-box').style = 'display:none'
+    document.getElementById('result-table').remove()
+    document.getElementById('crs-box').style = 'display:block'
+    document.getElementById('result-count').textContent = 0
+  } catch(e) {
+    log('Nothing to reset')
+  }
+}
\ No newline at end of file
diff --git a/js/settings.js b/js/settings.js
index e053653..ae158c8 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -1,57 +1,115 @@
+//
 // Init:
-const ql = ["ql0","ql1","ql2","ql3","ql4","ql5","ql6","ql7","ql8","ql9","ql10","ql11"]
-storageAvailable("localStorage");
-getQl();
-hideLoading();
+//
+// Setup quick links
+const ql = ['ql0','ql1','ql2','ql3','ql4','ql5','ql6','ql7','ql8','ql9','ql10','ql11']
+storageAvailable('localStorage')
+getQl()
+// Check if already registered
+ifAlreadyRegistered()
+// Hide loading
+hideLoading()
 
-async function getQl(){
-    var qlOpt = await getQuickLinks()
-    if (qlOpt){
-        var i = 0
-        while (i < 12) {
-            if (qlOpt[i] != 'undefined') {
-                document.getElementById(`ql${i}`).value = qlOpt[i]
-                i +=1
-            }
-        }
+async function ifAlreadyRegistered() { // If already registered, show this on the page
+  if (! await isRegistered()) {
+    return null
+  } else {
+    document.getElementsByName('eml')[0].placeholder = 'Registered'
+    document.getElementById('reg_text').textContent = 'You are already registered'
+    document.getElementById('reg_button').textContent = 'Log Out'
+  }
+}
+
+async function getQl(){ // Fetch Quick Links from localstorage
+  var qlOpt = await getQuickLinks()
+  if (qlOpt){
+    var i = 0
+    while (i < 12) {
+      if (qlOpt[i] != 'undefined') {
+        document.getElementById(`ql${i}`).value = qlOpt[i]
+        i +=1
+      }
     }
+  }
 }
 
-async function setQl(){
-    await showLoading();
-    var qlSet = []
-    for (i in ql) {
-        var opt = document.getElementById(`ql${i}`).value
-        if (opt != ""){
-            qlSet.push(opt)
-        }
-        qlSet.sort()
+async function setQl(){ // Fetch Quick Links from text input and save to localstorage
+  await showLoading()// called as an onclick function
+  var qlSet = []
+  for (i in ql) {
+    var opt = document.getElementById(`ql${i}`).value
+    if (opt != ''){
+      qlSet.push(opt)
     }
-    localStorage.setItem("qlOpt", JSON.stringify(qlSet))
-    log(`settings.setQl: User settings saved`, "INFO")
-    await hideLoading();
-    await showDone();
-    vibe("ok")
-    await delay(800);
-    hideDone();
+    qlSet.sort()
+  }
+  localStorage.setItem('qlOpt', JSON.stringify(qlSet))
+  log('settings.setQl: User settings saved', 'INFO')
+  await hideLoading()
+  await showDone()
+  vibe('ok')
+  await delay(800)
+  hideDone()
 }
 
-async function clearQl(){
-    showLoading();
-    localStorage.removeItem("qlOpt")
-    log(`settings.setQl: User settings reset to default`, "INFO")
-    getQl()
-    await hideLoading();
-    await showDone();
-    vibe("ok");
-    await delay(800);
-    hideDone();
+async function clearQl(){ // Clear Quick Links from localstorage
+  showLoading()
+  localStorage.removeItem('qlOpt')
+  log('settings.setQl: User settings reset to default', 'INFO')
+  getQl()
+  await hideLoading()
+  await showDone()
+  vibe('ok')
+  await delay(800)
+  hideDone()
 }
 
-async function showDone() {
-    document.getElementById("done").style = "opacity: 1";
+async function isRegistered() { // Check if a device is registered, returns BOOL
+  if (localStorage.getItem('uuid')) {
+    return true
+    // Also need an API Call here to check if auth is working.
+    // A Suitable function exists in auth.js - move it to lib.main.js
+  }
+  localStorage.removeItem('uuid')
+  return false
 }
 
-async function hideDone() {
-    document.getElementById("done").style = "opacity: 0";
+async function register() { // Registers a device by sending POST request to API Server
+  if (! await isRegistered()) {
+    showLoading()
+    let url = `${window.location.origin}/api/v1/register/request`
+    let email = document.getElementById('eml').value
+    let res = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      redirect: 'follow',
+      body: JSON.stringify({email: email})
+    })
+    if (res.status == 201) {
+      showDone()
+      hideLoading()
+      return
+    } else if (res.status == 403) {
+      log(`settings.register: Error: Fetch returned: ${res.body['errorCode']}`, 'err')
+      document.getElementsByName('eml')[0].placeholder = 'Not Authorised'
+    }
+  } else {
+    logout()
+  }
+}
+
+async function logout() { // Simply removed the UUID from localstorage
+  localStorage.removeItem('uuid')
+  location.reload()
+  return
+}
+
+async function showDone() { // Diaplays the 'Done' dialogue.
+  document.getElementById('done').style = 'opacity: 1; display: block'
+}
+
+async function hideDone() { // Hides the 'Done' dialogue.
+  document.getElementById('done').style = 'opacity: 0; display: none'
 }
\ No newline at end of file
diff --git a/js/simple-board.js b/js/simple-board.js
index fe62945..0fcc622 100644
--- a/js/simple-board.js
+++ b/js/simple-board.js
@@ -1,130 +1,131 @@
 /* Page Init: */
+// Run the init function at page load.
 init()
 
 /* Init function */
-async function init() {
-    console.time("Time: Init to Complete")
-    setLoadingDesc(`Loading\nservices`)
-    var stn = await getQuery("stn");
-    setLoadingDesc(`Loading\n${stn.toUpperCase()}`)
-    log(`init: Looking up: ${stn}`);
-    var sv = await getQuery("sv");
-    log(`init: Staff Version: ${sv}`);
-    if (sv === 'true') {
-        log("init: Staff Version not supported yet.")
-        log("init: Unable to proceed.")
-    } else {
-        try {
-            var data = await publicLdb(stn)
-            setLoadingDesc(`${stn.toUpperCase()}\nParsing Data`)
-            log("simple-board.init: Fetched LDB Data", "INFO")
-        } catch (err) {
-            var data = "err"
-            setLoadingDesc(`Waiting\nConnection`)
-            log(`simple-board.init: Error fetching data: ${err}`, "ERR")
-        }
-        parseLdb(data)
+async function init() { // Gets query string and then fetch API response and pass to parsing function
+  console.time('Time: Init to Complete')
+  setLoadingDesc('Loading\nservices')
+  var stn = await getQuery('stn')
+  setLoadingDesc(`Loading\n${stn.toUpperCase()}`)
+  log(`init: Looking up: ${stn}`)
+  var sv = await getQuery('sv')
+  log(`init: Staff Version: ${sv}`)
+  if (sv === 'true') {
+    log('init: Staff Version not supported yet.')
+    log('init: Unable to proceed.')
+  } else {
+    try {
+      var data = await publicLdb(stn)
+      setLoadingDesc(`${stn.toUpperCase()}\nParsing Data`)
+      log('simple-board.init: Fetched LDB Data', 'INFO')
+    } catch (err) {
+      var data = 'err'
+      setLoadingDesc('Waiting\nConnection')
+      log(`simple-board.init: Error fetching data: ${err}`, 'ERR')
     }
+    parseLdb(data)
+  }
 }
 
 /* Check for any errors in data returned from the Fetch call
    If no errors, if there are none, call buildPage(). */
 async function parseLdb(data) {
-    if (data.ERROR == "NOT_FOUND") { // Station not found
-        hideLoading();
-        document.getElementById("error_notice").style = "display: block;";
-        document.getElementById("err_not_found").style = "display: block;";
-        setHeaders("Not Found",new Date())
-    } else if (data == false) {  // No data for station
-        hideLoading();
-        document.getElementById("error_notice").style = "display: block;";
-        document.getElementById("err_no_data").style = "display:block;";
-        setHeaders("No Data",new Date())
-    } else if (data == "err") {  // Connection Error
-        await delay(2000);
-        hideLoading();
-        document.getElementById("error_notice").style = "display: block;";
-        document.getElementById("err_conn").style = "display: block;";
-        setHeaders("Connection Error",new Date())
-        showLoading();
-        await delay(5000);
-        log(`parseLdb: Passing to error handler`, "ERR")
-        errorHandler();
-    } else {
-        buildPage(data);
-    }
+  if (data.ERROR == 'NOT_FOUND') { // Station not found
+    hideLoading()
+    document.getElementById('error_notice').style = 'display: block;'
+    document.getElementById('err_not_found').style = 'display: block;'
+    setHeaders('Not Found',new Date())
+  } else if (data == false) {  // No data for station
+    hideLoading()
+    document.getElementById('error_notice').style = 'display: block;'
+    document.getElementById('err_no_data').style = 'display:block;'
+    setHeaders('No Data',new Date())
+  } else if (data == 'err') {  // Connection Error
+    await delay(2000)
+    hideLoading()
+    document.getElementById('error_notice').style = 'display: block;'
+    document.getElementById('err_conn').style = 'display: block;'
+    setHeaders('Connection Error',new Date())
+    showLoading()
+    await delay(5000)
+    log('parseLdb: Passing to error handler', 'ERR')
+    errorHandler()
+  } else {
+    buildPage(data)
+  }
 }
 
 // Build and Display Functions
 async function buildPage(data) {
-    setLoadingDesc('Loading\nData')
-    var stationName = data.GetStationBoardResult.locationName;
-    log(`buildPage: Data ready for ${stationName}`);
-    var generateTime = new Date(await data.GetStationBoardResult.generatedAt);
-    log(`buildPage: Data prepared at ${generateTime.toLocaleString()}`)
-    setHeaders(stationName, generateTime);
-    // Check for notices and if true pass to function
-    if (data.GetStationBoardResult.nrccMessages) {
-        setLoadingDesc('Loading\nAlerts')
-        await displayAlerts(await makeArray(data.GetStationBoardResult.nrccMessages.message));
-    }
-    if (data.GetStationBoardResult.trainServices) {
-        setLoadingDesc('Loading\nTrains')
-        displayTrains(await makeArray(data.GetStationBoardResult.trainServices.service))
-    } else {
-        displayNoTrains()
-    }
-    if (data.GetStationBoardResult.ferryServices) {
-        setLoadingDesc('Loading\nFerries')
-        displayFerry(await makeArray(data.GetStationBoardResult.ferryServices.service))
-    }
-    if (data.GetStationBoardResult.busServices) {
-        setLoadingDesc('Loading\nBusses')
-        displayBus(await makeArray(data.GetStationBoardResult.busServices.service))
-    }
-    hideLoading();
-    console.timeEnd("Time: Init to Complete")
+  setLoadingDesc('Loading\nData')
+  var stationName = data.GetStationBoardResult.locationName
+  log(`buildPage: Data ready for ${stationName}`)
+  var generateTime = new Date(await data.GetStationBoardResult.generatedAt)
+  log(`buildPage: Data prepared at ${generateTime.toLocaleString()}`)
+  setHeaders(stationName, generateTime)
+  // Check for notices and if true pass to function
+  if (data.GetStationBoardResult.nrccMessages) {
+    setLoadingDesc('Loading\nAlerts')
+    await displayAlerts(await makeArray(data.GetStationBoardResult.nrccMessages.message))
+  }
+  if (data.GetStationBoardResult.trainServices) {
+    setLoadingDesc('Loading\nTrains')
+    displayTrains(await makeArray(data.GetStationBoardResult.trainServices.service))
+  } else {
+    displayNoTrains()
+  }
+  if (data.GetStationBoardResult.ferryServices) {
+    setLoadingDesc('Loading\nFerries')
+    displayFerry(await makeArray(data.GetStationBoardResult.ferryServices.service))
+  }
+  if (data.GetStationBoardResult.busServices) {
+    setLoadingDesc('Loading\nBusses')
+    displayBus(await makeArray(data.GetStationBoardResult.busServices.service))
+  }
+  hideLoading()
+  console.timeEnd('Time: Init to Complete')
 }
 
 
-async function displayTrains(data) {
-    log(`simple-board.displayTrains: Inserting data in DOM`)
-    for(var i = 0; i < data.length; i++) {
-        // Reset Vars
-        var svc = data[i];
-        displayService(svc);
-        buildCallLists(svc);
-    }
-    document.getElementById("output").style = "display:block;";
-    log(`simple-board.displayTrains: Insertion complete`)
+async function displayTrains(data) { // Iterated through train services and passes API sections to other functions
+  log('simple-board.displayTrains: Inserting data in DOM')
+  for(var i = 0; i < data.length; i++) {
+    // Reset Vars
+    var svc = data[i]
+    displayService(svc)
+    buildCallLists(svc)
+  }
+  document.getElementById('output').style = 'display:block;'
+  log('simple-board.displayTrains: Insertion complete')
 }
 
-async function displayFerry(ferrySvc) {
-    for(var i = 0; i < ferrySvc.length; i++) {
-        displayFerryService(ferrySvc[i])
-    }
+async function displayFerry(ferrySvc) { // Iterates through each ferry service and passes to another function
+  for(var i = 0; i < ferrySvc.length; i++) {
+    displayFerryService(ferrySvc[i])
+  }
 }
 
-async function displayBus(busSvc) {
-    for(var i = 0; i < busSvc.length; i++) {
-        displayBusService(busSvc[i])
-        buildCallLists(busSvc[i])
-    }
+async function displayBus(busSvc) { // Iterates through each bus service and passes to other functions.
+  for(var i = 0; i < busSvc.length; i++) {
+    displayBusService(busSvc[i])
+    buildCallLists(busSvc[i])
+  }
 }
 
-async function displayService(svc) {
-    var table = document.getElementById("output");
+async function displayService(svc) { // Creates a table row from each train service.
+  var table = document.getElementById('output')
  
-    // Determine Time Message
-    var sta = await parseTime(svc.sta);
-    var eta = await parseTime(svc.eta);
-    var std = await parseTime(svc.std);
-    var etd = await parseTime(svc.etd);
-    // Determine Platform Message
-    //if (svc.platform != undefined){var plt = svc.platform} else {var plt = "-"};
-    var plt = await parsePlatform(svc);
-    // Define Table Row
-    var row = `
+  // Determine Time Message
+  var sta = await parseTime(svc.sta)
+  var eta = await parseTime(svc.eta)
+  var std = await parseTime(svc.std)
+  var etd = await parseTime(svc.etd)
+  // Determine Platform Message
+  //if (svc.platform != undefined){var plt = svc.platform} else {var plt = "-"};
+  var plt = await parsePlatform(svc)
+  // Define Table Row
+  var row = `
     <table>
       <tr>
         <td class="name name-item" onclick="showCalls('${svc.serviceID}')">${await parseName(svc.origin.location)}</td>
@@ -136,36 +137,41 @@ async function displayService(svc) {
         <td class="time ${etd.changed}">${etd.data}</td>
       </tr>
     </table>`
-    // Put Table Row
-    table.insertAdjacentHTML("beforeend", row)
-    // Display Operator
-    if (svc.operator) {
-        var opRow = `<p class="msg op">A ${svc.operator} service</p>`
-        table.insertAdjacentHTML("beforeend", opRow);
+  // Put Table Row
+  table.insertAdjacentHTML('beforeend', row)
+  // Display Operator where provided (it always will be, I think)
+  if (svc.operator) {
+    var opRow = `<p class="msg op">A ${svc.operator} service`
+    if (svc.length) { // Displays number of carriages where provided
+      opRow += ` with ${svc.length} carriages</p>`
+    } else {
+      opRow += '</p>'
     }
-    // Parse cancelReason & delayReason
-    if (svc.cancelReason) {
-        var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
-        table.insertAdjacentHTML("beforeend", cancelRow);
-    }
-    if (svc.delayReason) {
-        var delayRow = `<p class="msg">${svc.delayReason}</p>`
-        table.insertAdjacentHTML("beforeend", delayRow);
-    }    
+    table.insertAdjacentHTML('beforeend', opRow)
+  }
+  // Parse cancelReason and then delayReason
+  if (svc.cancelReason) {
+    var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
+    table.insertAdjacentHTML('beforeend', cancelRow)
+  }
+  if (svc.delayReason) {
+    var delayRow = `<p class="msg">${svc.delayReason}</p>`
+    table.insertAdjacentHTML('beforeend', delayRow)
+  }    
 }
 
-async function displayFerryService(svc) {
-    var table = document.getElementById("ferry");
-    log(JSON.stringify(svc))
-    // Determine Time Message
-    var sta = await parseTime(svc.sta);
-    var eta = await parseTime(svc.eta);
-    var std = await parseTime(svc.std);
-    var etd = await parseTime(svc.etd);
-    // Determine Platform Message
-    var plt = "";
-    // Define Table Row
-    var row = `
+async function displayFerryService(svc) { // Creates a table for for each ferry service
+  var table = document.getElementById('ferry')
+  log(JSON.stringify(svc))
+  // Determine Time Message
+  var sta = await parseTime(svc.sta)
+  var eta = await parseTime(svc.eta)
+  var std = await parseTime(svc.std)
+  var etd = await parseTime(svc.etd)
+  // Determine Platform Message
+  var plt = ''
+  // Define Table Row
+  var row = `
     <table>
       <tr>
         <td class="name name-item">${await parseName(svc.origin.location)}</td>
@@ -177,32 +183,32 @@ async function displayFerryService(svc) {
         <td class="time ${etd.changed}">${etd.data}</td>
       </tr>
     </table>`
-    // Put Table Row
-    table.insertAdjacentHTML("beforeend", row)
-    // Parse cancelReason & delayReason
-    if (svc.cancelReason) {
-        var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
-        table.insertAdjacentHTML("beforeend", cancelRow);
-    }
-    if (svc.delayReason) {
-        var delayRow = `<p class="msg">${svc.delayReason}</p>`
-        table.insertAdjacentHTML("beforeend", delayRow);
-    }
-    document.getElementById("ferry").style = "display:block"
+  // Put Table Row
+  table.insertAdjacentHTML('beforeend', row)
+  // Parse cancelReason & delayReason
+  if (svc.cancelReason) {
+    var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
+    table.insertAdjacentHTML('beforeend', cancelRow)
+  }
+  if (svc.delayReason) {
+    var delayRow = `<p class="msg">${svc.delayReason}</p>`
+    table.insertAdjacentHTML('beforeend', delayRow)
+  }
+  document.getElementById('ferry').style = 'display:block'
 }
 
-async function displayBusService(svc) {
-    var table = document.getElementById("bus");
-    log(JSON.stringify(svc))
-    // Determine Time Message
-    var sta = await parseTime(svc.sta);
-    var eta = await parseTime(svc.eta);
-    var std = await parseTime(svc.std);
-    var etd = await parseTime(svc.etd);
-    // Determine Platform Message
-    var plt = "";
-    // Define Table Row
-    var row = `
+async function displayBusService(svc) { // Creates a table row for each bus service.
+  var table = document.getElementById('bus')
+  log(JSON.stringify(svc))
+  // Determine Time Message
+  var sta = await parseTime(svc.sta)
+  var eta = await parseTime(svc.eta)
+  var std = await parseTime(svc.std)
+  var etd = await parseTime(svc.etd)
+  // Determine Platform Message
+  var plt = ''
+  // Define Table Row
+  var row = `
     <table>
       <tr>
         <td class="name name-item" onclick="showCalls('${svc.serviceID}')">${svc.origin.location.locationName}</td>
@@ -214,21 +220,21 @@ async function displayBusService(svc) {
         <td class="time ${etd.changed}">${etd.data}</td>
       </tr>
     </table>`
-    // Put Table Row
-    table.insertAdjacentHTML("beforeend", row)
-    // Display operator
-    if (svc.operator) {
-        var opRow = `<p class="msg op">A ${svc.operator} service</p>`
-        table.insertAdjacentHTML("beforeend", opRow);
-    }
-    // Parse cancelReason & delayReason
-    if (svc.cancelReason) {
-        var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
-        table.insertAdjacentHTML("beforeend", cancelRow);
-    }
-    if (svc.delayReason) {
-        var delayRow = `<p class="msg">${svc.delayReason}</p>`
-        table.insertAdjacentHTML("beforeend", delayRow);
-    }
-    document.getElementById("bus").style = "display:block"
+  // Put Table Row
+  table.insertAdjacentHTML('beforeend', row)
+  // Display operator
+  if (svc.operator) {
+    var opRow = `<p class="msg op">A ${svc.operator} service</p>`
+    table.insertAdjacentHTML('beforeend', opRow)
+  }
+  // Parse cancelReason & delayReason
+  if (svc.cancelReason) {
+    var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
+    table.insertAdjacentHTML('beforeend', cancelRow)
+  }
+  if (svc.delayReason) {
+    var delayRow = `<p class="msg">${svc.delayReason}</p>`
+    table.insertAdjacentHTML('beforeend', delayRow)
+  }
+  document.getElementById('bus').style = 'display:block'
 }
\ No newline at end of file
diff --git a/js/staff-board.js b/js/staff-board.js
new file mode 100644
index 0000000..89866a9
--- /dev/null
+++ b/js/staff-board.js
@@ -0,0 +1,241 @@
+/* Page Init: */
+// Run the init function at page load.
+init()
+
+/* Init function */
+async function init() { // Gets query string and then fetch API response and pass to parsing function
+  console.time('Time: Init to Complete')
+  setLoadingDesc('Loading\nservices')
+  var stn = await getQuery('stn')
+  setLoadingDesc(`Loading\n${stn.toUpperCase()}`)
+  log(`init: Looking up: ${stn}`)
+  var sv = await getQuery('sv')
+  log(`init: Staff Version: ${sv}`)
+  if (sv === 'true') {
+    log('init: Staff Version not supported yet.')
+    log('init: Unable to proceed.')
+  } else {
+    let data
+    try {
+      data = await publicLdb(stn)
+      setLoadingDesc(`${stn.toUpperCase()}\nParsing Data`)
+      log('simple-board.init: Fetched LDB Data', 'INFO')
+    } catch (err) {
+      data = 'err'
+      setLoadingDesc('Waiting\nConnection')
+      log(`simple-board.init: Error fetching data: ${err}`, 'ERR')
+    }
+    parseLdb(data)
+  }
+}
+
+/* Check for any errors in data returned from the Fetch call
+   If no errors, if there are none, call buildPage(). */
+async function parseLdb(data) {
+  if (data.ERROR == 'NOT_FOUND') { // Station not found
+    hideLoading()
+    document.getElementById('error_notice').style = 'display: block;'
+    document.getElementById('err_not_found').style = 'display: block;'
+    setHeaders('Not Found',new Date())
+  } else if (data == false) {  // No data for station
+    hideLoading()
+    document.getElementById('error_notice').style = 'display: block;'
+    document.getElementById('err_no_data').style = 'display:block;'
+    setHeaders('No Data',new Date())
+  } else if (data == 'err') {  // Connection Error
+    await delay(2000)
+    hideLoading()
+    document.getElementById('error_notice').style = 'display: block;'
+    document.getElementById('err_conn').style = 'display: block;'
+    setHeaders('Connection Error',new Date())
+    showLoading()
+    await delay(5000)
+    log('parseLdb: Passing to error handler', 'ERR')
+    errorHandler()
+  } else {
+    buildPage(data)
+  }
+}
+
+// Build and Display Functions
+async function buildPage(data) {
+  setLoadingDesc('Loading\nData')
+  var stationName = data.GetStationBoardResult.locationName
+  log(`buildPage: Data ready for ${stationName}`)
+  var generateTime = new Date(await data.GetStationBoardResult.generatedAt)
+  log(`buildPage: Data prepared at ${generateTime.toLocaleString()}`)
+  setHeaders(stationName, generateTime)
+  // Check for notices and if true pass to function
+  if (data.GetStationBoardResult.nrccMessages) {
+    setLoadingDesc('Loading\nAlerts')
+    await displayAlerts(await makeArray(data.GetStationBoardResult.nrccMessages.message))
+  }
+  if (data.GetStationBoardResult.trainServices) {
+    setLoadingDesc('Loading\nTrains')
+    displayTrains(await makeArray(data.GetStationBoardResult.trainServices.service))
+  } else {
+    displayNoTrains()
+  }
+  if (data.GetStationBoardResult.ferryServices) {
+    setLoadingDesc('Loading\nFerries')
+    displayFerry(await makeArray(data.GetStationBoardResult.ferryServices.service))
+  }
+  if (data.GetStationBoardResult.busServices) {
+    setLoadingDesc('Loading\nBusses')
+    displayBus(await makeArray(data.GetStationBoardResult.busServices.service))
+  }
+  hideLoading()
+  console.timeEnd('Time: Init to Complete')
+}
+
+
+async function displayTrains(data) { // Iterated through train services and passes API sections to other functions
+  log('simple-board.displayTrains: Inserting data in DOM')
+  for(var i = 0; i < data.length; i++) {
+    // Reset Vars
+    var svc = data[i]
+    displayService(svc)
+    buildCallLists(svc)
+  }
+  document.getElementById('output').style = 'display:block;'
+  log('simple-board.displayTrains: Insertion complete')
+}
+
+async function displayFerry(ferrySvc) { // Iterates through each ferry service and passes to another function
+  for(var i = 0; i < ferrySvc.length; i++) {
+    displayFerryService(ferrySvc[i])
+  }
+}
+
+async function displayBus(busSvc) { // Iterates through each bus service and passes to other functions.
+  for(var i = 0; i < busSvc.length; i++) {
+    displayBusService(busSvc[i])
+    buildCallLists(busSvc[i])
+  }
+}
+
+async function displayService(svc) { // Creates a table row from each train service.
+  var table = document.getElementById('output')
+ 
+  // Determine Time Message
+  var sta = await parseTime(svc.sta)
+  var eta = await parseTime(svc.eta)
+  var std = await parseTime(svc.std)
+  var etd = await parseTime(svc.etd)
+  // Determine Platform Message
+  //if (svc.platform != undefined){var plt = svc.platform} else {var plt = "-"};
+  var plt = await parsePlatform(svc)
+  // Define Table Row
+  var row = `
+    <table>
+      <tr>
+        <td class="name name-item" onclick="showCalls('${svc.serviceID}')">${await parseName(svc.origin.location)}</td>
+        <td class="name name-item" onclick="showCalls('${svc.serviceID}')">${await parseName(svc.destination.location)}</td>
+        <td class="plat ${plt.changed}">${plt.num}</td>
+        <td class="time">${sta.data}</td>
+        <td class="time ${eta.changed}">${eta.data}</td>
+        <td class="time">${std.data}</td>
+        <td class="time ${etd.changed}">${etd.data}</td>
+      </tr>
+    </table>`
+  // Put Table Row
+  table.insertAdjacentHTML('beforeend', row)
+  // Display Operator where provided (it always will be, I think)
+  if (svc.operator) {
+    var opRow = `<p class="msg op">A ${svc.operator} service`
+    if (svc.length) { // Displays number of carriages where provided
+      opRow += ` with ${svc.length} carriages</p>`
+    } else {
+      opRow += '</p>'
+    }
+    table.insertAdjacentHTML('beforeend', opRow)
+  }
+  // Parse cancelReason and then delayReason
+  if (svc.cancelReason) {
+    var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
+    table.insertAdjacentHTML('beforeend', cancelRow)
+  }
+  if (svc.delayReason) {
+    var delayRow = `<p class="msg">${svc.delayReason}</p>`
+    table.insertAdjacentHTML('beforeend', delayRow)
+  }    
+}
+
+async function displayFerryService(svc) { // Creates a table for for each ferry service
+  var table = document.getElementById('ferry')
+  log(JSON.stringify(svc))
+  // Determine Time Message
+  var sta = await parseTime(svc.sta)
+  var eta = await parseTime(svc.eta)
+  var std = await parseTime(svc.std)
+  var etd = await parseTime(svc.etd)
+  // Determine Platform Message
+  var plt = ''
+  // Define Table Row
+  var row = `
+    <table>
+      <tr>
+        <td class="name name-item">${await parseName(svc.origin.location)}</td>
+        <td class="name name-item">${await parseName(svc.destination.location)}</td>
+        <td class="plat}">${plt}</td>
+        <td class="time">${sta.data}</td>
+        <td class="time ${eta.changed}">${eta.data}</td>
+        <td class="time">${std.data}</td>
+        <td class="time ${etd.changed}">${etd.data}</td>
+      </tr>
+    </table>`
+  // Put Table Row
+  table.insertAdjacentHTML('beforeend', row)
+  // Parse cancelReason & delayReason
+  if (svc.cancelReason) {
+    var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
+    table.insertAdjacentHTML('beforeend', cancelRow)
+  }
+  if (svc.delayReason) {
+    var delayRow = `<p class="msg">${svc.delayReason}</p>`
+    table.insertAdjacentHTML('beforeend', delayRow)
+  }
+  document.getElementById('ferry').style = 'display:block'
+}
+
+async function displayBusService(svc) { // Creates a table row for each bus service.
+  var table = document.getElementById('bus')
+  log(JSON.stringify(svc))
+  // Determine Time Message
+  var sta = await parseTime(svc.sta)
+  var eta = await parseTime(svc.eta)
+  var std = await parseTime(svc.std)
+  var etd = await parseTime(svc.etd)
+  // Determine Platform Message
+  var plt = ''
+  // Define Table Row
+  var row = `
+    <table>
+      <tr>
+        <td class="name name-item" onclick="showCalls('${svc.serviceID}')">${svc.origin.location.locationName}</td>
+        <td class="name name-item" onclick="showCalls('${svc.serviceID}')">${svc.destination.location.locationName}</td>
+        <td class="plat}">${plt}</td>
+        <td class="time">${sta.data}</td>
+        <td class="time ${eta.changed}">${eta.data}</td>
+        <td class="time">${std.data}</td>
+        <td class="time ${etd.changed}">${etd.data}</td>
+      </tr>
+    </table>`
+  // Put Table Row
+  table.insertAdjacentHTML('beforeend', row)
+  // Display operator
+  if (svc.operator) {
+    var opRow = `<p class="msg op">A ${svc.operator} service</p>`
+    table.insertAdjacentHTML('beforeend', opRow)
+  }
+  // Parse cancelReason & delayReason
+  if (svc.cancelReason) {
+    var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
+    table.insertAdjacentHTML('beforeend', cancelRow)
+  }
+  if (svc.delayReason) {
+    var delayRow = `<p class="msg">${svc.delayReason}</p>`
+    table.insertAdjacentHTML('beforeend', delayRow)
+  }
+  document.getElementById('bus').style = 'display:block'
+}
\ No newline at end of file
diff --git a/js/stat.js b/js/stat.js
index da34811..c4ccc89 100644
--- a/js/stat.js
+++ b/js/stat.js
@@ -1,29 +1,30 @@
-init();
+init()
 
-async function init() {
-    display(await get())
+async function init() { // The page init function
+  versionDisplay()
+  display(await get())
 }
 
-async function get() {
-    var url = `${window.location.origin}/api/v1/stats`;
-    var resp = await fetch(url);
-    return await resp.json();
+async function get() { // Fetch data from API
+  var url = `${window.location.origin}/api/v1/stats`
+  var resp = await fetch(url)
+  return await resp.json()
 }
 
-async function display(data) {
-    document.getElementById('server_host').textContent = data.host;
-    document.getElementById('server_mode').textContent = data.mode || "Unknown";
-    document.getElementById('ver-bkend').textContent = data.verBkend || "Unknown";
-    let dat = data.dat[0]
-    let ver = data.ver[0]
-    document.getElementById('time').textContent = await convertUnixLocal(dat.since);
-    document.getElementById('ldbws').textContent = dat.ldbws || "0";
-    document.getElementById('ldbsvws').textContent = dat.ldbsvws || "0";
-    document.getElementById('apicorpus').textContent = dat.corpus_api || "0";
-    document.getElementById('corpus').textContent = dat.corpus || "0";
-    document.getElementById('stations').textContent = dat.stations || "0";
-    document.getElementById('users').textContent = dat.user || "0";
-    document.getElementById('meta').textContent = dat.meta || "0";
-    document.getElementById('ver-dbman').textContent = ver.dbmanager || "Unknown";
-    document.getElementById('ver-web').textContent = localStorage.getItem('ver-web') || "Unknown";
+async function display(data) { // Parses and displays data from API
+  document.getElementById('server_host').textContent = data.host
+  document.getElementById('server_mode').textContent = data.mode || 'Unknown'
+  document.getElementById('ver-bkend').textContent = data.verBkend || 'Unknown'
+  let dat = data.dat[0]
+  let ver = data.ver[0]
+  document.getElementById('time').textContent = await convertUnixLocal(dat.since)
+  document.getElementById('ldbws').textContent = dat.ldbws || '0'
+  document.getElementById('ldbsvws').textContent = dat.ldbsvws || '0'
+  document.getElementById('apicorpus').textContent = dat.corpus_api || '0'
+  document.getElementById('corpus').textContent = dat.corpus || '0'
+  document.getElementById('stations').textContent = dat.stations || '0'
+  document.getElementById('users').textContent = dat.user || '0'
+  document.getElementById('meta').textContent = dat.meta || '0'
+  document.getElementById('pis').textContent = dat.pis
+  document.getElementById('ver-dbman').textContent = ver.dbmanager || 'Unknown'
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..5e02568
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1125 @@
+{
+  "name": "web",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "web",
+      "version": "0.0.1",
+      "license": "ISC",
+      "devDependencies": {
+        "eslint": "^8.39.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
+      "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.2.tgz",
+      "integrity": "sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.5.1",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
+      "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.11.8",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
+      "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
+      "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.4.0",
+        "@eslint/eslintrc": "^2.0.2",
+        "@eslint/js": "8.39.0",
+        "@humanwhocodes/config-array": "^0.11.8",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.0",
+        "eslint-visitor-keys": "^3.4.0",
+        "espree": "^9.5.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "grapheme-splitter": "^1.0.4",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-sdsl": "^4.1.4",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
+      "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.1.tgz",
+      "integrity": "sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
+      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
+    "node_modules/fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "dev": true
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.20.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+      "dev": true
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/js-sdsl": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz",
+      "integrity": "sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/js-sdsl"
+      }
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7c590e6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "web",
+  "version": "0.0.1",
+  "description": "web",
+  "main": "index.html",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "eslint": "^8.39.0"
+  }
+}
diff --git a/pis.html b/pis.html
new file mode 100644
index 0000000..e88a6b4
--- /dev/null
+++ b/pis.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="description" content="OwlBoard - Beta: Quick access to route codes for PIS Systems.">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="application-name" content="OwlBoard">
+    <meta name="author" content="Frederick Boniface">
+    <meta name="theme-color" content="#00b7b7">
+    <link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
+    <link rel="stylesheet" type="text/css" href="./styles/main.css">
+    <link rel="stylesheet" type="text/css" href="./styles/pis.css">
+    <link rel="icon" type="image/svg+xml" href="./images/icon.svg">
+    <link rel="manifest" type="application/json" href="./manifest.json">
+    <title>OwlBoard - PIS</title>
+    <script src="./js/lib.main.js" defer></script>
+    <script src="./js/pis.js" defer></script>
+  </head>
+
+  <body>
+
+    <div id="top_button" class="hide_micro">
+      <a href="/">
+        <picture aria-label="Home" class="sidebar_control">
+          <source srcset="/images/nav/back.svg" type="image/svg+xml">
+          <img src="back-40.png" alt="Home">
+        </picture>
+      </a>
+    </div>
+
+    <picture>
+      <source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
+      <source media="(max-height: 739px)" srcset="/images/logo/logo-full-200.png" type="image/png">
+      <source srcset="/images/logo/logo-full-250.png" type="image/png">
+      <img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
+    </picture>
+    <h2>PIS Codes</h2>
+
+    <div id="loading">
+      <div class="spinner">
+      </div>
+      <p id="loading_desc">Searching</p>
+    </div>
+
+    <div id="crs-box">
+        <p>Enter a services start and end station CRS codes to see code options and stopping patterns.</p>
+        <p>Currently supported (Beta): GWR: Up/Dn SVB-EXD, Dn CDF-PNZ, Up/Dn GMV/CDF-PMH, HEx<br>Duplicate stopping patterns have been removed.</p>
+        <p id="auth-required">You need to be logged into a free <a href="./settings.html">rail staff version</a> account for this feature.</p>
+          <form action="javascript:findByOrigDest();">
+            <div id="crs-inputs">
+              <div class="crs-input">
+                <label for="origin">From:</label><br>
+                <input type="text" class="small-lookup-box pis-input" id="origin" name="origin" maxlength="3">
+              </div>
+              <div class="crs-input">
+                <label for="destination">To:</label><br>
+                <input type="text" class="small-lookup-box pis-input" id="destination" name="destination" maxlength="3"><br><br>
+              </div>
+            </div>
+            <button type="submit" value="Find" class="lookup-button">Submit</button>
+          </form>
+    </div>
+
+    <div id="result-box">
+        <h3>Results: <span id="result-count">0</span></h3>
+        <!-- display: none; by default, some kind of box which shows each code
+             and destination individually with a previous and next arrow. -->
+    </div>
+
+    <button type="reset" id="reset" class="lookup-button" onclick="reset()">Reset</button>
+    <!-- Footer -->
+    <footer>
+      <p>Created by <a href="https://fredboniface.co.uk" target="_blank" rel="noreferrer noopener">Fred Boniface</a> - <span id="ver_str">d</span></p>
+    </footer>
+  </body>
+</html>
\ No newline at end of file
diff --git a/settings.html b/settings.html
index 15cf967..cf8a6dd 100644
--- a/settings.html
+++ b/settings.html
@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8"/>
-    <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
+    <meta charset="UTF-8">
+    <meta name="description" content="OwlBoard - Personalise your OwlBoard.">
+    <meta name="robots" content="noindex">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="application-name" content="OwlBoard">
     <meta name="author" content="Frederick Boniface">
     <meta name="theme-color" content="#00b7b7">
     <link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
-    <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
-    <link rel="stylesheet" type="text/css" href="./styles/settings.css"/>
-    <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
-    <link rel="manifest" type="application/json" href="./manifest.json"/>
+    <link rel="stylesheet" type="text/css" href="./styles/main.css">
+    <link rel="stylesheet" type="text/css" href="./styles/settings.css">
+    <link rel="icon" type="image/svg+xml" href="./images/icon.svg">
+    <link rel="manifest" type="application/json" href="./manifest.json">
     <title>OwlBoard - Settings</title>
     <script src="./js/lib.main.js" defer></script>
     <script src="./js/settings.js" defer></script>
@@ -65,8 +66,16 @@
         <input type="text" maxlength="3" id="ql9" name="ql9" autocomplete="off" class="small-lookup-box"><br>
         <input type="text" maxlength="3" id="ql10" name="ql10" autocomplete="off" class="small-lookup-box">
         <input type="text" maxlength="3" id="ql11" name="ql11" autocomplete="off" class="small-lookup-box"><br>
-        <button onclick="setQl()" class="lookup-button">Apply</button>
-        <button onclick="clearQl()" class="lookup-button">Defaults</button>
-
+        <button type="submit" onclick="setQl()" class="lookup-button">Apply</button>
+        <button type="reset" onclick="clearQl()" class="lookup-button">Defaults</button>
+        <br><br><br>
+      <label>Register for Rail Staff Version:</label>
+        <p id="reg_text">Enter your work email address:</p>
+        <input type="text" maxlength="128" id="eml" name="eml" autocomplete="email" class="lookup-box" placeholder="email"><br>
+        <p>One registration confirmation email will be sent which will include more details about your account</p>
+        <p>Your address will not be stored</p>
+        <p>If your domain is not authorised and you are a using a railway company email address,
+           <a href="./issue.html">submit an issue</a> and it can be added.</p>
+        <button type="submit" onclick="register()" class="lookup-button" id="reg_button">Register</button>
   </body>
 </html>
\ No newline at end of file
diff --git a/stat.html b/stat.html
index 378f1f0..148f449 100644
--- a/stat.html
+++ b/stat.html
@@ -2,6 +2,7 @@
 <html lang="en">
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="robots" content="none">
         <title>OwlBoard - Statistics</title>
         <script src="./js/lib.main.js" defer></script>
         <script src="./js/stat.js" defer></script>
@@ -44,6 +45,10 @@
             <td>DB-meta</td>
             <td id="meta"></td>
           </tr>
+          <tr>
+            <td>DB-pis</td>
+            <td id="pis"></td>
+          </tr>
         </table>
         <br><br>
         <table style="margin:auto;text-align:center;">
@@ -73,7 +78,7 @@
                 web-frontend
               </a>
             </td>
-            <td id="ver-web"></td>
+            <td id="ver_str">Unknown</td>
           </tr>
         </table>
         <p>The statistics represent hits & queries from all instances in the stack.</p>
diff --git a/styles/board.css b/styles/board.css
index fe946bf..19dd40b 100644
--- a/styles/board.css
+++ b/styles/board.css
@@ -76,13 +76,6 @@
     height: 25px;
 }
 
-#home_icon {
-    position: absolute;
-    width: 30px;
-    right: 10px;
-    top: 10px;
-}
-
 .header-small {
     text-align: right;
     padding-right: 5px;
diff --git a/styles/main.css b/styles/main.css
index f38a7a2..e8a921f 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -106,6 +106,12 @@ body {
 }
 body a {color:var(--link-color)}
 body a:visited {color:var(--link-visited-color)}
+#home_icon {
+  position: absolute;
+  width: 30px;
+  right: 10px;
+  top: 10px;
+}
 .titleimg {
   width: 45%;
   padding-top: 20px;
@@ -295,6 +301,10 @@ label {
   transition: 0.5s;
 }
 
+#auth-required {
+  color: var(--main-warning-color);
+}
+
 /* Footer Styles */
 footer {
   background-color: var(--accent-color);
diff --git a/styles/pis.css b/styles/pis.css
new file mode 100644
index 0000000..e486351
--- /dev/null
+++ b/styles/pis.css
@@ -0,0 +1,45 @@
+#crs-inputs {
+    display: flex;
+    justify-content: center;
+}
+
+.pis-input {
+    width: 55%;
+    max-width: 200px;
+    margin: auto;
+}
+
+#result-box {
+    display: none;
+}
+
+#result-table {
+    margin: auto;
+    color: var(--second-text-color);
+    width: 85%;
+    max-width: 700px;
+    text-align: center;
+}
+
+td, th {
+    border-bottom: 1px solid;
+}
+
+#reset {
+    margin-top: 15px
+}
+
+#reset {
+    margin-top: 25px;
+}
+
+.pis-code {
+    font-weight:bold;
+}
+
+.station {
+    text-transform: uppercase;
+    overflow-wrap: anywhere;
+    font-family: firamono, monospace;
+    line-height: 1.2;
+}
\ No newline at end of file
diff --git a/styles/settings.css b/styles/settings.css
index 0ba70b7..104ad5d 100644
--- a/styles/settings.css
+++ b/styles/settings.css
@@ -5,6 +5,7 @@
 
 #done {
     opacity: 0;
+    display: none;
     position: fixed;
     top: 50%;
     left: 50%;
diff --git a/sw.js b/sw.js
index 9324685..241fe28 100644
--- a/sw.js
+++ b/sw.js
@@ -1,84 +1,96 @@
 /* Service Worker */
 
-const appVersion = "1.2.4"
-const cacheName = `owlboard-${appVersion}`;
-const cacheIDs = [cacheName];
-const cacheFiles = [
-    "/404.html",
-    "/board.html",
-    "/conn-err.html",
-    "/help.html",
-    "/",
-    "/issue.html",
-    "/find-code.html",
-    "/settings.html",
-    "/manifest.json",
-    "/styles/fonts/firamono/firamono-500.woff2",
-    "/styles/fonts/firamono/firamono-regular.woff2",
-    "/styles/fonts/urwgothic/urwgothic.woff2",
-    "/styles/fonts/urwgothic/urwgothicDemi.woff2",
-    "/styles/board.css",
-    "/styles/find-code.css",
-    "/styles/help.css",
-    "/styles/issue.css",
-    "/styles/main.css",
-    "/styles/settings.css",
-    "/js/find-code.js",
-    "/js/index.js",
-    "/js/issue.js",
-    "/js/lib.board.js",
-    "/js/lib.main.js",
-    "/js/settings.js",
-    "/js/simple-board.js",
-    "/images/icon.svg",
-    "/images/logo/wide_logo.svg",
-    "/images/logo/mono-logo.svg",
-    "/images/app-icons/any/plain-logo.svg",
-    "/images/app-icons/any/plain-logo-512.png",
-    "/images/nav/alert_icon.svg",
-    "/images/nav/save.svg",
-    "/images/nav/home_icon.svg",
-    "/images/nav/back.svg",
-    "/images/nav/hamburger.svg",
-    "/images/nav/close.svg",
-    "/images/nav/refresh.svg",
-    "/images/nre/nre-powered_400w.webp",
-    "/images/nre/nre-powered_400w.jxl"
-];
+const swVersion = '2.0.0-20230506'
+const cacheName = `owlboard-${swVersion}`
+const cacheIDs = [cacheName]
+let staticCache = [
+  '/styles/fonts/firamono/firamono-500.woff2',
+  '/styles/fonts/firamono/firamono-regular.woff2',
+  '/styles/fonts/urwgothic/urwgothic.woff2',
+  '/styles/fonts/urwgothic/urwgothicDemi.woff2',
+  '/images/icon.svg',
+  '/images/logo/wide_logo.svg',
+  '/images/logo/mono-logo.svg',
+  '/images/app-icons/any/plain-logo.svg',
+  '/images/app-icons/any/plain-logo-512.png',
+  '/images/nav/alert_icon.svg',
+  '/images/nav/save.svg',
+  '/images/nav/home_icon.svg',
+  '/images/nav/back.svg',
+  '/images/nav/hamburger.svg',
+  '/images/nav/close.svg',
+  '/images/nav/refresh.svg',
+  '/images/nre/nre-powered_400w.webp',
+  '/images/nre/nre-powered_400w.jxl'
+]
+const dynamicCache = [
+  '/404.html',
+  '/auth.html',
+  '/board.html',
+  '/conn-err.html',
+  '/help.html',
+  '/',
+  '/issue.html',
+  '/find-code.html',
+  '/settings.html',
+  '/pis.html',
+  '/manifest.json',
+  '/styles/board.css',
+  '/styles/find-code.css',
+  '/styles/help.css',
+  '/styles/issue.css',
+  '/styles/main.css',
+  '/styles/settings.css',
+  '/styles/pis.css',
+  '/js/find-code.js',
+  '/js/index.js',
+  '/js/issue.js',
+  '/js/lib.board.js',
+  '/js/lib.main.js',
+  '/js/auth.js',
+  '/js/settings.js',
+  '/js/simple-board.js',
+  '/js/pis.js'
+]
 
-self.addEventListener("install", (e) => {
-    console.log("[Service Worker] Install");
-    e.waitUntil(
-        (async () => {
-            const cache = await caches.open(cacheName);
-            console.log("[Service Worker] Caching app data");
-            await cache.addAll(cacheFiles);
-        })()
-    );
-  });
+for(let i = 0; i < dynamicCache.length; i++) {
+  let item = dynamicCache[i] + `?${swVersion}`
+  staticCache.push(item)
+}
 
-self.addEventListener("fetch", (e) => {
+self.addEventListener('install', (e) => {
+  console.log('[Service Worker] Install')
+  e.waitUntil(
+    (async () => {
+      const cache = await caches.open(cacheName)
+      console.log('[Service Worker] Caching app data')
+      await cache.addAll(staticCache)
+    })()
+  )
+})
+
+self.addEventListener('fetch', (e) => {
   e.respondWith(
     (async () => {
-      const r = await caches.match(e.request,{ignoreSearch: true});
+      const r = await caches.match(e.request,{ignoreSearch: true})
       if (r) {
-        return r;
+        return r
       }
-      const response = await fetch(e.request);
-      console.log(`[Service Worker] Not cached - fetching from server: ${e.request.url}`);
-      return response;
+      const response = await fetch(e.request)
+      console.log(`[Service Worker] Not cached - fetching from server: ${e.request.url}`)
+      return response
     })()
-  );
-});
+  )
+})
 
 self.addEventListener('activate', function (event) {
   event.waitUntil(caches.keys().then(function (keys) {
     return Promise.all(keys.filter(function (key) {
-      return !cacheIDs.includes(key);
+      return !cacheIDs.includes(key)
     }).map(function (key) {
-      return caches.delete(key);
-    }));
+      return caches.delete(key)
+    }))
   }).then(function () {
-    return self.clients.claim();
-  }));
-});
\ No newline at end of file
+    return self.clients.claim()
+  }))
+})
\ No newline at end of file

No results found