diff --git a/css/poduptime.css b/css/poduptime.css
index 753140fc9d32db306a080d5450d1de7a575458e4..aab0d2e1f911d5663f113c31271ede121cfb3d4e 100644
--- a/css/poduptime.css
+++ b/css/poduptime.css
@@ -1,3 +1,45 @@
+@import url("/node_modules/typeface-roboto/index.css");
+
+body {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    --blue: #4b6588;
+    --grey: #cecaa7;
+    --green: #A07614;
+}
+
+.bg-blue {
+    background-color: var(--blue) !important;
+}
+
+.blue {
+    color: var(--blue);
+}
+
+.bg-green {
+    background-color: var(--green);
+}
+
+.green {
+    color: var(--green);
+}
+
+.bg-grey {
+    background-color: var(--grey);
+}
+
+.grey {
+    color: var(--grey);
+}
+
+a {
+    color: var(--blue);
+}
+
+.tablesorter-header {
+    background-color: var(--grey) !important;
+}
+
 .main {
     padding: 5px;
 }
diff --git a/index.php b/index.php
index 5b866ea5942fbba3b77c88baa35597415ec711cf..13aac10f5ca30c14879840a8ebecc26f83993c3b 100644
--- a/index.php
+++ b/index.php
@@ -63,11 +63,11 @@ $navs = [
 ];
 ?>
 <header>
-    <div class="collapse bg-dark" id="navbarHeader">
+    <div class="collapse bg-grey" id="navbarHeader">
         <div class="container">
             <div class="row">
                 <div class="col-sm-8 col-md-7 py-4">
-                    <h4 class="text-white">About</h4>
+                    <h4 class="text-black">About</h4>
                     <p class="text-muted">Poduptime helps you find a diaspora, friendica, hubzilla or socialhome pod to use and join the federated social network.</p>
                     <ul class="navbar-nav">
                         <?php
@@ -83,7 +83,7 @@ $navs = [
                     </ul>
                 </div>
                 <div class="col-sm-4 offset-md-1 py-4">
-                    <h4 class="text-white">Views</h4>
+                    <h4 class="text-black">Views</h4>
                     <ul class="navbar-nav">
                         <?php
                         foreach ($navs['views'] as $nav_item) {
@@ -101,7 +101,7 @@ $navs = [
             </div>
         </div>
     </div>
-    <div class="navbar navbar-dark bg-dark box-shadow">
+    <div class="navbar navbar-dark bg-blue box-shadow">
         <div class="container d-flex justify-content-between">
             <a href="/" class="navbar-brand d-flex align-items-center">
                 <strong>Poduptime</strong>
diff --git a/js/podup.js b/js/podup.js
index 8bcd37386f4122da05c6c8dafeb17373cbc2bfe9..f13326a877d95351ca3bcaba147874b414c90006 100644
--- a/js/podup.js
+++ b/js/podup.js
@@ -3,7 +3,9 @@ var $table = $('.tablesorter'),
         container: $(".pager"),
         output: '{startRow} - {endRow} of {filteredRows} total',
         removeRows: false,
-        cssGoto: '.gotoPage'
+        size: 15,
+        savePages : true,
+        cssPageSize: '.pagesize'
     };
 $table
     .tablesorter({
@@ -34,6 +36,7 @@ $(document).ready(function () {
         $('.columnSelectorWrapper').hide();
         $('.columnssimple').hide();
         $('.resetfilters').hide();
+        $('.pagesize').hide();
         $('.columnsadvanced').show().css('display', 'inline-block');
         $('table').trigger('filterReset');
     });
@@ -43,12 +46,12 @@ $(document).ready(function () {
         $('.columnSelectorWrapper').show().css('display', 'inline-block');
         $('.columnssimple').show().css('display', 'inline-block');
         $('.resetfilters').show().css('display', 'inline-block');
+        $('.pagesize').show().css('display', 'inline-block');
         $('.columnsadvanced').hide();
     });
     $('.resetfilters').on('click', function () {
         $('table').trigger('filterReset');
     });
-    $('table').trigger('pageSize', 15);
     $.get('tabledata.php?ajax=page2', function (html) {
         $('table tbody').append(html);
         $('table').trigger('update', [true]);
diff --git a/package.json b/package.json
index 2b0e676a4997a6e7d49514c43d2f0bc09063d091..5c911e0ddd21310256e4ae4a14212b4070ae9e08 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
         "leaflet": "^1.3.3",
         "leaflet.markercluster": "^1.3.0",
         "popper.js": "^1.14.3",
-        "tablesorter": "^2.30.7"
+        "tablesorter": "^2.30.7",
+        "typeface-roboto": "^0.0.54"
     },
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
diff --git a/podstat-counts.php b/podstat-counts.php
index b69bb1609b6ab13e974eb5d00cee2c70620586d6..37ee2c2a4efdf08eeb634b4864c38d0fad21346a 100644
--- a/podstat-counts.php
+++ b/podstat-counts.php
@@ -52,8 +52,8 @@ try {
                 label: 'Users',
                 fill: false,
                 yAxisID: "l2",
-                borderColor: "#e67e22",
-                backgroundColor: "#e67e22",
+                borderColor: "#A07614",
+                backgroundColor: "#A07614",
                 borderWidth: 4,
                 pointHoverRadius: 6
             }, {
@@ -61,8 +61,8 @@ try {
                 label: 'Local Posts',
                 fill: false,
                 yAxisID: "l2",
-                borderColor: "#2980b9",
-                backgroundColor: "#2980b9",
+                borderColor: "#4b6588",
+                backgroundColor: "#4b6588",
                 borderWidth: 4,
                 pointHoverRadius: 6
             }, {
@@ -70,8 +70,8 @@ try {
                 label: 'Comments',
                 fill: false,
                 yAxisID: "l2",
-                borderColor: "#FFD700",
-                backgroundColor: "#FFD700",
+                borderColor: "#cecaa7",
+                backgroundColor: "#cecaa7",
                 borderWidth: 4,
                 pointHoverRadius: 6
             }]
diff --git a/podstat-uptime.php b/podstat-uptime.php
index 049651bff0e4b41294ea49ff7579757e36c451aa..6d4b5ce2f31617b256cca3546e7d2ca04b938aa0 100644
--- a/podstat-uptime.php
+++ b/podstat-uptime.php
@@ -51,8 +51,8 @@ try {
                 label: 'Uptime %',
                 fill: false,
                 yAxisID: "l1",
-                borderColor: "#2ecc71",
-                backgroundColor: "#2ecc71",
+                borderColor: "#A07614",
+                backgroundColor: "#A07614)",
                 borderWidth: 4,
                 pointHoverRadius: 6
             }, {
@@ -60,8 +60,8 @@ try {
                 label: 'Latency ms',
                 fill: false,
                 yAxisID: "r1",
-                borderColor: "#a93226",
-                backgroundColor: "#a93226",
+                borderColor: "#4b6588",
+                backgroundColor: "#4b6588",
                 borderWidth: 4,
                 pointHoverRadius: 6,
                 pointStyle: 'rect'
diff --git a/showfull.php b/showfull.php
index 9e328fb2857658517e5cce9a0534b763e1dd6fde..016f3e882e0c340ccf722117e4173d311bdbf11f 100644
--- a/showfull.php
+++ b/showfull.php
@@ -21,19 +21,19 @@ $country_code = $_SERVER['HTTP_CF_IPCOUNTRY'] ?? '';
     }
 </style>
 <div class="float-right float-md-left float-sm-right">
-    <a href="go.php" class="m-1 btn btn-sm btn-info">Auto pick a pod</a>
-    <a href="#" class="m-1 btn btn-sm btn-info"  data-featherlight-variant="table-responsive" data-featherlight="wizard.php?page=1">Use pod wizard</a>
+    <a href="go.php" class="m-1 btn btn-sm bg-green text-white">Auto pick a pod</a>
+    <a href="#" class="m-1 btn btn-sm bg-green text-white"  data-featherlight-variant="table-responsive" data-featherlight="wizard.php?page=1">Use pod wizard</a>
 </div>
 <div class="float-right">
-    <button type="button" class="columnssimple hidden m-1 btn btn-sm btn-info">Simple View</button>
+    <button type="button" class="columnssimple hidden m-1 btn btn-sm bg-grey">Simple View</button>
     <div class="columnSelectorWrapper m-1">
         <input id="colSelect1" type="checkbox" class="hidden">
-        <label class="columnSelectorButton m-1 btn btn-sm btn-info" for="colSelect1">Select Columns</label>
+        <label class="columnSelectorButton m-1 btn btn-sm bg-grey" for="colSelect1">Select Columns</label>
         <div id="columnSelector" class="dropdown columnSelector">
         </div>
     </div>
-    <button type="button" class="resetfilters m-1 btn btn-sm btn-info hidden">Reset Filters</button>
-    <button type="button" class="columnsadvanced m-1 btn btn-sm btn-info">Advanced View</button>
+    <button type="button" class="resetfilters m-1 btn btn-sm bg-grey hidden">Reset Filters</button>
+    <button type="button" class="columnsadvanced m-1 btn btn-sm bg-grey">Advanced View</button>
 </div>
 
     <div class="pager hidden float-right float-md-left">
@@ -44,6 +44,15 @@ $country_code = $_SERVER['HTTP_CF_IPCOUNTRY'] ?? '';
 
         <span class="next pagination" title="Next page">&gt;</span>
         <span class="last pagination" title="Last page">&raquo;</span>
+        <div class="d-inline-block">
+            <select class="pagesize hidden form-control form-control-sm">
+                <option value="15">15</option>
+                <option value="60">60</option>
+                <option value="120">120</option>
+                <option value="240">240</option>
+                <option value="all">All</option>
+            </select>
+        </div>
     </div>
 
 <div class="table-responsive">
@@ -51,7 +60,7 @@ $country_code = $_SERVER['HTTP_CF_IPCOUNTRY'] ?? '';
         <div class="signal"></div>
     </div>
     <table class="table table-bordered table-sm tablesorter table-hover tfont">
-        <thead class="thead-dark">
+        <thead class="thead-grey">
         <tr>
             <th data-priority="1" class="columnSelector-disable"><div data-toggle="tooltip" title="A pod is a site for you to set up your account.">Pod</div></th>
             <th class="columnSelector-false"><div>Name</div></th>
diff --git a/tabledata.php b/tabledata.php
index 544fad644f52635f327f788d774891b301712bd2..48403e4d92e403d7f62d595fb6acee874d8dfadb 100644
--- a/tabledata.php
+++ b/tabledata.php
@@ -34,9 +34,9 @@ foreach ($pods as $pod) {
     $tip            = "Over the last {$humanmonitored} uptime was {$pod['uptime_alltime']}% and response time from Los Angeles was {$pod['latency']}ms.";
 
     if (($_COOKIE['domain'] ?? null) === $pod['domain']) {
-        echo '<tr><td title="This is the last pod you visited from this site. ' . $tip . '" data-placement="right" data-toggle="tooltip" class="bg-secondary"><a class="text-warning url" target="_pod" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></td>';
+        echo '<tr><td title="This is the last pod you visited from this site. ' . $tip . '" data-placement="right" data-toggle="tooltip" class="bg-blue"><a class="text-white url" target="_pod" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></td>';
     } else {
-        echo '<tr><td data-placement="right" title="' . $tip . '" data-toggle="tooltip"><a class="text-success url" target="_pod" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></td>';
+        echo '<tr><td data-placement="right" title="' . $tip . '" data-toggle="tooltip"><a class="url" target="_pod" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></td>';
     }
 
     if ($pod['shortversion'] > $pod['masterversion']) {
@@ -50,11 +50,11 @@ foreach ($pods as $pod) {
         $pre     = 'This pod runs production code';
     }
 
-    $classver = 'black';
+    $classver = 'green';
     if (version_compare($pod['shortversion'] ?? '', $pod['masterversion'] ?? '', '=')) {
-        $classver = 'text-success';
+        $classver = 'black';
     } elseif (version_compare($pod['shortversion'] ?? '', $pod['masterversion'] ?? '', '<')) {
-        $classver = 'text-warning';
+        $classver = 'text-danger';
     }
     echo '<td>' . $pod['name'] . '</td>';
     echo '<td class="' . $classver . '"><div title="' . $pre . ' version: ' . $pod['shortversion'] . ' master version is: ' . ($pod['masterversion'] ?: 'unknown') . '" data-toggle="tooltip">' . $version . '</div></td>';
diff --git a/wizard.php b/wizard.php
index 62c88653eaddaed9b94a7a48f5f016daa6d6be5d..70d4054a5a651cc5d00eea089399b91b6119c663 100644
--- a/wizard.php
+++ b/wizard.php
@@ -101,7 +101,7 @@ if ($page === 1) {
             </label>
         </div>
     </div>
-    <button type="button" class="wizardnext2 btn btn-info">Next</button>
+    <button type="button" class="wizardnext2 btn bg-grey">Next</button>
 
 EOF;
 } elseif ($page === 2) {
@@ -120,7 +120,7 @@ EOF;
             country($country)->getEmoji()
         );
     }
-    echo '</div></div><button type="button" class="wizardnext3 btn btn-info">Next</button>';
+    echo '</div></div><button type="button" class="wizardnext3 btn bg-grey">Next</button>';
 } elseif ($page === 3) {
     $languages = data('detectedlanguage', $softwarename, $country);
     // Sort language names correctly.
@@ -136,7 +136,7 @@ EOF;
             $iso->languageByCode1($language)
         );
     }
-    echo '</div></div><button type="button" class="wizardnext4 btn btn-info">Next</button>';
+    echo '</div></div><button type="button" class="wizardnext4 btn bg-grey">Next</button>';
 } elseif ($page === 4) {
     $months = data('monthsmonitored', $softwarename, $country, $language);
     $min    = min($months);
@@ -148,7 +148,7 @@ EOF;
         echo '<div class="row m-1 p-1"><div class="col-9">Months Online Minimum:</div><div class="col-8">';
         printf('<input type="text" name="month" id="month" data-min="%d" data-max="%d" data-step="1">', $min, $max);
     }
-    echo '</div></div><button type="button" class="suggestpod btn btn-info">Suggest a Pod</button>';
+    echo '</div></div><button type="button" class="suggestpod btn bg-grey">Suggest a Pod</button>';
 }
 
 
diff --git a/yarn.lock b/yarn.lock
index d6bfb81af6ee8aa4c41898858747aacbb01b7185..66fae0bb6bd945d46b57b4af657f269b80fc707f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -73,3 +73,7 @@ tablesorter@^2.30.7:
   resolved "https://registry.yarnpkg.com/tablesorter/-/tablesorter-2.30.7.tgz#91e01fa256b270e6a8b2bca0b0e714b647af2d0c"
   dependencies:
     jquery ">=1.2.6"
+
+typeface-roboto@^0.0.54:
+  version "0.0.54"
+  resolved "https://registry.yarnpkg.com/typeface-roboto/-/typeface-roboto-0.0.54.tgz#8f02c9a18d1cfa7f49381a6ff0d21ff061f38ad2"