diff --git a/controllers/pwa.js b/controllers/pwa.js
index 3fd28b43..1c2db402 100644
--- a/controllers/pwa.js
+++ b/controllers/pwa.js
@@ -25,7 +25,7 @@ const libMetadata = require('../lib/metadata');
 
 const CLIENT_ID = config.get('CLIENT_ID');
 const CLIENT_SECRET = config.get('CLIENT_SECRET');
-const LIST_PAGE_SIZE = 24;
+const LIST_PAGE_SIZE = 32;
 const DEFAULT_PAGE_NUMBER = 1;
 const DEFAULT_SORT_ORDER = 'newest';
 
diff --git a/public/css/style.css b/public/css/style.css
index 3c8a8f8f..9fd6443d 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -20,6 +20,7 @@ html {
 *:after {
   box-sizing: inherit;
 }
+
 body {
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 14px;
@@ -43,8 +44,8 @@ a:hover {
   text-decoration: underline; 
 }
 .container {
-  padding-right: 5px;
-  padding-left: 5px;
+  padding-right: 8px;
+  padding-left: 8px;
   padding-bottom: 44px;
   min-height:100%;
   position:relative;
@@ -52,7 +53,7 @@ a:hover {
 .navbar {
   position: relative;
   height: 82px;
-  background: #0A84F5;
+  background: #1976D2;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -132,58 +133,57 @@ a:hover {
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  color: #0D47A1;
+  color: white;
   font-size: 16px;
-  font-weight: 600;
-  background: #7cc0ff;
-  padding-left: 15px;
-  margin-bottom: 15px;
-  line-height: 45px;
-  height: 45px;
-  border: 1px lightgray;
-  border-bottom-style: solid;
+  font-weight: 400;
+  background: #2196F3;
+  padding-left: 16px;
+  margin-bottom: 16px;
+  line-height: 48px;
+  height: 48px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 }
 .section-title .back {
-  font-size: 22px;
-  padding-right: 20px;
-  height: 45px;
-  line-height: 45px;
-  width: 45px;
+  font-size: 24px;
+  padding-right: 16px;
+  height: 48px;
+  line-height: 54px;
+  width: 48px;
 }
 .section-title .tab {
-  border-top-right-radius: 10px;
-  border-top-left-radius: 10px;
-  height: 35px;
-  line-height: 35px;
-  margin: 10px 0px 0 0px;
-  padding: 0 30px 0 30px;
+  height: 48px;
+  line-height: 54px;
+  margin: 0;
+  padding: 0 40px 0 40px;
+  color: white;
+  opacity: 0.7;
 }
-@media (max-width: 480px) {
-  .section-title .tab {
-    padding: 0 15px 0 15px;
-  }
+.tab:hover {
+  border-bottom-style: solid;
+  background: #42A5F5;
+  border-color: #FF8A65;
+  border-width: 2dp;
+  opacity: 1;
 }
-@media (max-width: 380px) {
+@media (max-width: 410px) {
   .section-title .tab {
-    font-size: 14px;
-    padding: 0 7px 0 7px;
+    padding: 0 16px 0 16px;
   }
 }
 .section-title .activetab {
-  background:#F5F5F5;
-  border: 1px lightgray;
-  border-top-style: solid;
-  border-right-style: solid;
-  border-left-style: solid;
+  color: white;
+  border-bottom-style: solid;
+  border-color: #FF5722;
+  opacity: 1;
 }
 .section-title a, .section-title a:visited {
-  color: #0D47A1;
+  color: white;
   text-decoration: none;
 }
 #auth-button {
   position: absolute;
-  bottom: -42px;
-  right: 5px;
+  bottom: -44px;
+  right: 8px;
 }
 button {
   padding: 0 5px 5px 5px;
@@ -208,7 +208,8 @@ button {
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
-  border-radius: 4px
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 }
 button[disabled=disabled], button:disabled {
   opacity: 0.5;
@@ -217,15 +218,12 @@ button[disabled=disabled], button:disabled {
 .button:not([disabled]):hover {
   opacity: 0.5;
 }
-.green {
-  background: #33691E;
+.accent-color {
+  background: #FF5722;
 }
 .blue {
   background: #0D47A1;
 }
-.red {
-  background: #B71C1C;
-}
 .button  a {
   color: white;
   text-decoration: none;
@@ -234,13 +232,15 @@ button[disabled=disabled], button:disabled {
   height: 100%;
 }
 .add {
-  margin-left: 5px;
+  margin-left: 8px;
 }
 
 /* PWA List Box */
 .pwabox {
-  border: 1px solid lightgray;
   text-overflow: hidden;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+  height: 100px;
+  border-radius: 2px;
 }
 .pwabox-body {
   display: -webkit-box;
@@ -254,7 +254,7 @@ button[disabled=disabled], button:disabled {
 .pwabox-left {
   display:block;
   width: 85px;
-  padding: 5px 5px 5px 10px;
+  padding: 20px 5px 5px 15px;
 }
 .pwabox-right {
   display: -webkit-box;
@@ -264,7 +264,7 @@ button[disabled=disabled], button:disabled {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  padding: 15px 10px 5px 5px;
+  padding: 20px 16px 16px 8px;
   width: 100%;
 }
 .pwabox-right .name {
@@ -300,7 +300,6 @@ button[disabled=disabled], button:disabled {
   display: flex;
   -ms-flex-flow: column;
       flex-flow: column;
-  border: 1px solid lightgray;
   text-overflow: hidden;
   display: flex;
   padding: 16px;
@@ -310,7 +309,10 @@ button[disabled=disabled], button:disabled {
   font-size: 14px;
   font-weight: 400;
   max-width: 600px;
-  margin: 0 auto;  
+  margin: 0 auto 16px auto;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+  background: white;
+  border-radius: 2px;
 }
 .detail-header {
   display: -webkit-box;
@@ -323,7 +325,7 @@ button[disabled=disabled], button:disabled {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  margin-bottom: 16px;  
+  margin-bottom: 8px;  
 }
 .detail-header > * {
   font-size: 24px;
@@ -350,12 +352,12 @@ button[disabled=disabled], button:disabled {
 }
 /* Manifest detail box */
 .manifest-detail {
-  margin-top: 5px;
+  margin-top: 1px;
   overflow-x: scroll;
 }
 /* Lighthouse report box */
 .lighthouse-detail {
-  margin-top: 5px;
+  margin-top: 1px;
 }
 .lighthouse-report-table {
   width: 100%;
@@ -402,12 +404,14 @@ button[disabled=disabled], button:disabled {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  margin-bottom: 15px
+  margin-bottom: 8px;
+  margin-left: 8px;
+  height: 96px;
+  justify-content: space-between;
 }
 .form-input {
   height: 20px;
   width: 80%;
-  padding: 10px 16px;
   font-size: 16px;
 }
 .form-textbox {
@@ -419,6 +423,7 @@ button[disabled=disabled], button:disabled {
   border: 1px solid lightgray;
 }
 .error {
+  margin-left: 8px;
   color: #f07;
 }
 .offline-status {
@@ -447,7 +452,7 @@ button[disabled=disabled], button:disabled {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  background: #0A84F5;
+  background: #1976D2;
   color: white;
 }
 .footer ul {
@@ -531,33 +536,44 @@ button[disabled=disabled], button:disabled {
   box-sizing: border-box;
   background: #e0ddd5;
   color: #171e42;
-  margin:  5px;
+  margin:  8px;
 }
 
-/* Fixes last flex row */
-@media (min-width: 590px) {
+/* Fixes last flex row 
+   min-widt: 280*colums+16*(colums+1) */
+@media (min-width: 608px) {
+  .items .item {
+    max-width: calc(50% - 16px);
+  }
+}
+@media (min-width: 904px) {
+  .items .item {
+    max-width: calc(33.33333% - 16px);
+  }
+}
+@media (min-width: 1200px) {
   .items .item {
-    max-width: calc(50% - 10px);
+    max-width: calc(25% - 16px);
   }
 }
-@media (min-width: 880px) {
+@media (min-width: 1496px) {
   .items .item {
-    max-width: calc(33.33333% - 10px);
+    max-width: calc(20% - 16px);
   }
 }
-@media (min-width: 1170px) {
+@media (min-width: 1792px) {
   .items .item {
-    max-width: calc(25% - 10px);
+    max-width: calc(16.66667% - 16px);
   }
 }
-@media (min-width: 1460px) {
+@media (min-width: 2088px) {
   .items .item {
-    max-width: calc(20% - 10px);
+    max-width: calc(14.2857142857% - 16px);
   }
 }
-@media (min-width: 1750px) {
+@media (min-width: 2384px) {
   .items .item {
-    max-width: calc(16.66667% - 10px);
+    max-width: calc(14.2857142857% - 16px);
   }
 }
 
diff --git a/public/img/lighthouse-128.png b/public/img/lighthouse-128.png
new file mode 100644
index 00000000..cc17d64d
Binary files /dev/null and b/public/img/lighthouse-128.png differ
diff --git a/public/img/lighthouse-18.png b/public/img/lighthouse-18.png
index 26ce48e2..aa33d906 100644
Binary files a/public/img/lighthouse-18.png and b/public/img/lighthouse-18.png differ
diff --git a/public/img/lighthouse-36.png b/public/img/lighthouse-36.png
new file mode 100644
index 00000000..54f481dc
Binary files /dev/null and b/public/img/lighthouse-36.png differ
diff --git a/views/includes/lighthouse.hbs b/views/includes/lighthouse.hbs
index 8e65b02f..094913b7 100644
--- a/views/includes/lighthouse.hbs
+++ b/views/includes/lighthouse.hbs
@@ -2,7 +2,7 @@
   <div class="detail-header">
     <h3>LIGHTHOUSE</h3>    
     <div class="lighthouse-score"> 
-        <img src="/img/lighthouse-18.png" width="18" height="18" title="Lighthouse Score" alt="Lighthouse logo"/>
+        <img src="/img/lighthouse-18.png"  srcset="/img/lighthouse-18.png 1x, /img/lighthouse-36.png 2x" title="Lighthouse Score" alt="Lighthouse logo"/>
         {{#if pwa.lighthouseScore}}
           {{pwa.lighthouseScore}}
         {{else}}
diff --git a/views/pwas/form.hbs b/views/pwas/form.hbs
index 00c9f8d3..afcc08fd 100644
--- a/views/pwas/form.hbs
+++ b/views/pwas/form.hbs
@@ -29,13 +29,13 @@
       <form id="pwaForm" method="POST">
         <div class="form-group">
           <label for="manifestUrl">Manifest URL</label>
-          {{#if error}}
-          <p class="error">Error: {{error}}.</p>
-          {{/if}}
-          <input type="text" name="manifestUrl" id="manifestUrl" class="form-input" value="{{pwa.manifestUrl}}">
+          <input type="text" name="manifestUrl" id="manifestUrl" class="form-input" value="{{pwa.manifestUrl}}" autofocus>
+          <button id="pwaSubmit" type="submit" class="button accent-color gulliver-signedin-aware gulliver-online-aware"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button>
         </div>
+        {{#if error}}
+        <p class="error">Error: {{error}}.</p>
+        {{/if}}
         <input id="idToken" type="hidden" name="idToken" />
-        <button id="pwaSubmit" type="submit" class="button green gulliver-signedin-aware gulliver-online-aware"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button>
       </form>
       </div>            
     </div>
diff --git a/views/pwas/list.hbs b/views/pwas/list.hbs
index 8a7391f2..535b56a3 100644
--- a/views/pwas/list.hbs
+++ b/views/pwas/list.hbs
@@ -21,21 +21,19 @@
 
     <div class="section-title">
       {{#if showNewest}}
-      <a href="/?sort=newest"><div class="tab">Newest</div></a>
+      <a href="/?sort=newest"><div class="tab">New</div></a>
       <div class="tab activetab">Score</div>
       {{/if}}
       {{#if showScore}}
-      <div class="tab activetab">Newest</div>
+      <div class="tab activetab">New</div>
       <a href="/?sort=score"><div class="tab">Score</div></a>
       {{/if}}
     </div>
     <div class="container">
       <div class="toolbar">
-        <div>
-          <div class="button add green gulliver-online-aware">
-            <a href="/pwas/add"><i class="fa fa-plus-square" aria-hidden="true"></i> Add PWA</a>
-          </div>
-        </div>   
+        <button id="pwaAdd" type="submit" class="button add accent-color gulliver-signedin-aware gulliver-online-aware" onlick="#">
+          <a href="/pwas/add"><i class="fa fa-plus-square" aria-hidden="true"></i> Add PWA</a>
+        </button>
       </div>
 
       <div class="items">
@@ -45,7 +43,7 @@
             <div class="pwabox-body">
               <div class="pwabox-left">
                 {{#if iconUrl64}}
-                  <img src="{{iconUrl64}}" width="64" height="64" alt="logo for {{name}}"/>
+                  <img src="{{iconUrl64}}" srcset="{{iconUrl64}} 1x, {{iconUrl128}} 2x" width="64" height="64" alt="logo for {{name}}"/>
                 {{else}}
                 <svg width="64" height="64">
                   <rect width="64" height="64" stroke-width="4" fill="{{backgroundColor}}" />
@@ -57,7 +55,7 @@
                 <div class="name">{{name}}</div>
                 <div class="lighthouseScore">
                   <div class="lighthouseLogo">
-                    <img src="/img/lighthouse-18.png" width="18" height="18" title="Lighthouse Score" alt="Lighthouse logo"/>
+                    <img src="/img/lighthouse-18.png" srcset="/img/lighthouse-18.png 1x, /img/lighthouse-36.png 2x" title="Lighthouse Score" alt="Lighthouse logo"/>
                   </div>
                   <div>
                     {{#if lighthouseScore}}