diff --git a/src/browser/pages/error.css b/src/browser/pages/error.css
index aa8932e17..42ccf8c7b 100644
--- a/src/browser/pages/error.css
+++ b/src/browser/pages/error.css
@@ -1,20 +1,28 @@
 .error-display {
   box-sizing: border-box;
-  color: #fcfcfc;
   padding: 20px;
   text-align: center;
 }
 
+.error-display > .header {
+  font-size: 6rem;
+  margin: 0;
+}
+
+.error-display > .body {
+  color: #444;
+  font-size: 1.2rem;
+}
+
 .error-display > .links {
-  margin-top: 1rem;
+  margin-top: 16px;
 }
 
 .error-display > .links > .link {
-  color: #b6b6b6;
+  color: rgb(87, 114, 245);
   text-decoration: none;
 }
 
 .error-display > .links > .link:hover {
-  color: #fcfcfc;
   text-decoration: underline;
 }
diff --git a/src/browser/pages/error.html b/src/browser/pages/error.html
index 6231b5791..4c8419adc 100644
--- a/src/browser/pages/error.html
+++ b/src/browser/pages/error.html
@@ -7,7 +7,7 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
     />
     <meta http-equiv="Content-Security-Policy" content="style-src 'self'; manifest-src 'self'; img-src 'self' data:;" />
-    <title>code-server {{ERROR_TITLE}}</title>
+    <title>{{ERROR_TITLE}} - code-server</title>
     <link rel="icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/favicon.ico" type="image/x-icon" />
     <link
       rel="manifest"
diff --git a/src/browser/pages/global.css b/src/browser/pages/global.css
index f2a5f84ea..1bd95497a 100644
--- a/src/browser/pages/global.css
+++ b/src/browser/pages/global.css
@@ -8,22 +8,68 @@ body,
 
 body {
   background: rgb(244, 247, 252);
-  color: #f4f4f4;
+  color: #111;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol";
   overflow: hidden;
 }
 
+input,
 button {
   font-family: inherit;
-  font-size: inherit;
+  font-size: 1rem;
+  line-height: 1rem;
+}
+
+.-button {
+  background-color: rgb(87, 114, 245);
+  border-radius: 5px;
+  border: none;
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  padding: 18px 20px;
+  text-decoration: none;
 }
 
 .center-container {
   align-items: center;
   box-sizing: border-box;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   padding: 20px;
 }
+
+.card-box {
+  background-color: rgb(250, 253, 258);
+  border-radius: 5px;
+  box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
+  max-width: 650px;
+  width: 100%;
+}
+
+.card-box > .header {
+  border-bottom: 1px solid #ddd;
+  color: #444;
+  padding: 30px;
+}
+
+.card-box > .header > .main {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.card-box > .header > .sub {
+  color: #555;
+  margin-top: 10px;
+}
+
+.card-box > .content {
+  padding: 40px;
+}
+
+.card-box + .card-box {
+  margin-top: 26px;
+}
diff --git a/src/browser/pages/home.css b/src/browser/pages/home.css
index b20dbce56..795eeb7d5 100644
--- a/src/browser/pages/home.css
+++ b/src/browser/pages/home.css
@@ -1,28 +1,8 @@
-.info-blocks {
-  max-width: 500px;
-  width: 100%;
-}
-
-.info-block > .header {
-  font-size: 1.3rem;
-  margin: 1.5rem 0;
-}
-
-.info-block > .none {
-  color: #b6b6b6;
-}
-
-.info-block + .info-block {
-  border-top: 1px solid #666;
-  margin-top: 1rem;
-}
-
 .block-row {
   display: flex;
 }
 
 .block-row > .item {
-  color: #c4c4c4;
   flex: 1;
 }
 
@@ -31,16 +11,17 @@
 }
 
 .block-row > .item > .sub {
-  color: #888;
+  font-size: 0.95em;
 }
 
 .block-row .-link {
-  cursor: pointer;
+  color: rgb(87, 114, 245);
+  display: block;
   text-decoration: none;
 }
 
 .block-row .-link:hover {
-  color: #fafafa;
+  text-decoration: underline;
 }
 
 .block-row > .item > .icon {
@@ -51,8 +32,8 @@
 }
 
 .block-row > .item > .icon.-missing {
-  background-color: #eee;
-  color: #b6b6b6;
+  background-color: rgb(87, 114, 245);
+  color: #fff;
   text-align: center;
 }
 
@@ -67,16 +48,12 @@
 }
 
 .kill-form > .kill {
-  background-color: transparent;
+  background-color: rgb(87, 114, 245);
   border: none;
-  color: #b6b6b6;
+  color: #fff;
   cursor: pointer;
   font-size: 1rem;
   line-height: 1rem;
   margin: 0;
   padding: 0;
 }
-
-.kill-form > .kill:hover {
-  color: #fafafa;
-}
diff --git a/src/browser/pages/home.html b/src/browser/pages/home.html
index a6aa8db98..ce2343644 100644
--- a/src/browser/pages/home.html
+++ b/src/browser/pages/home.html
@@ -20,15 +20,18 @@
   </head>
   <body>
     <div class="center-container">
-      <div class="info-blocks">
-        <!-- TEMP: Only VS Code for now. -->
-        <!-- <div class="info-block"> -->
-        <!--   <h2 class="header">Running Applications</h2> -->
-        <!--   {{APP_LIST:RUNNING}} -->
-        <!-- </div> -->
+      <!-- TEMP: Only VS Code for now. -->
+      <!-- <div class="info-block"> -->
+      <!--   <h2 class="header">Running Applications</h2> -->
+      <!--   {{APP_LIST:RUNNING}} -->
+      <!-- </div> -->
 
-        <div class="info-block">
-          <h2 class="header">Launch</h2>
+      <div class="card-box">
+        <div class="header">
+          <h2 class="main">Launch</h2>
+          <div class="sub">Choose an application to launch below.</div>
+        </div>
+        <div class="content">
           <div class="block-row">
             <a class="item -link" href="./vscode">
               <img class="icon" src="./static-{{COMMIT}}/lib/vscode/resources/linux/code.png" />
@@ -36,22 +39,27 @@
             </a>
           </div>
         </div>
+      </div>
 
-        <div class="info-block">
-          <h2 class="header">Version</h2>
+      <div class="card-box">
+        <div class="header">
+          <h2 class="main">Version</h2>
+          <div class="sub">Version information and updates.</div>
+        </div>
+        <div class="content">
           {{UPDATE:NAME}}
         </div>
-
-        <!-- <div class="info-block"> -->
-        <!--   <h2 class="header">Editors</h2> -->
-        <!--   {{APP_LIST:EDITORS}} -->
-        <!-- </div> -->
-
-        <!-- <div class="info-block"> -->
-        <!--   <h2 class="header">Other</h2> -->
-        <!--   {{APP_LIST:OTHER}} -->
-        <!-- </div> -->
       </div>
+
+      <!-- <div class="info-block"> -->
+      <!--   <h2 class="header">Editors</h2> -->
+      <!--   {{APP_LIST:EDITORS}} -->
+      <!-- </div> -->
+
+      <!-- <div class="info-block"> -->
+      <!--   <h2 class="header">Other</h2> -->
+      <!--   {{APP_LIST:OTHER}} -->
+      <!-- </div> -->
     </div>
   </body>
 </html>
diff --git a/src/browser/pages/login.css b/src/browser/pages/login.css
index 81ff08cb5..43d03e7ee 100644
--- a/src/browser/pages/login.css
+++ b/src/browser/pages/login.css
@@ -1,65 +1,33 @@
 body {
   overflow: auto;
 }
-.center-container {
-  width: 100vw;
-  height: 100vh;
-  padding: 20px 40px;
-  min-height: 400px;
-}
 
 .login-form {
-  border-radius: 5px;
-  box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
-  color: rgba(0, 0, 0, 0.37);
   display: flex;
   flex-direction: column;
   flex: 1;
   justify-content: center;
-  padding: 20px 40px;
-  position: relative;
-
-  height: 300px;
-  min-width: 320px;
-  max-width: 500px;
-}
-
-.main {
-  font-size: 40px;
-}
-
-.login-form > .header {
-  align-items: center;
-  color: black;
-}
-
-.login-form > .header > .sub {
-  margin-top: 10px;
 }
 
 .login-form > .field {
-  margin-top: 40px;
   display: flex;
   flex-direction: row;
   width: 100%;
-  height: 50px;
 }
 
 .login-form > .error {
   color: red;
-  margin-top: 1rem;
+  margin-top: 16px;
 }
 
 .login-form > .field > .password {
-  border: 1px solid #ddd;
-  background: rgb(244, 247, 252);
-  box-sizing: border-box;
-  padding: 1rem;
-  flex: 1;
-  font-size: 20px;
+  background-color: rgb(244, 247, 252);
   border-radius: 5px;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
   color: black;
-  min-width: 100px;
+  flex: 1;
+  padding: 16px;
 }
 
 .login-form > .user {
@@ -67,14 +35,5 @@ body {
 }
 
 .login-form > .field > .submit {
-  font-size: 20px;
-  border: none;
-  box-sizing: border-box;
   margin-left: 20px;
-
-  background-color: rgb(87, 114, 245);
-  color: white;
-  font-family: monospace;
-  padding: 10px 20px;
-  border-radius: 5px;
 }
diff --git a/src/browser/pages/login.html b/src/browser/pages/login.html
index 164396d02..40ed2f445 100644
--- a/src/browser/pages/login.html
+++ b/src/browser/pages/login.html
@@ -22,31 +22,34 @@
   </head>
   <body>
     <div class="center-container">
-      <form class="login-form" method="post">
+      <div class="card-box">
         <div class="header">
-          <div class="main">Welcome to code-server</div>
+          <h1 class="main">Welcome to code-server</h1>
           <div class="sub">Please log in below. Check code-server's logs for the generated password.</div>
         </div>
-        <input class="user" type="text" autocomplete="username" />
-        <input id="base" type="hidden" name="base" value="/" />
-        <div class="field">
-          <!-- The onfocus code places the cursor at the end of the value. -->
-          <input
-            required
-            autofocus
-            value="{{VALUE}}"
-            onfocus="const value=this.value;this.value='';this.value=value;"
-            class="password"
-            type="password"
-            placeholder="PASSWORD"
-            name="password"
-            autocomplete="current-password"
-          />
-
-          <input class="submit" value="SUBMIT" type="submit" />
+        <div class="content">
+          <form class="login-form" method="post">
+            <input class="user" type="text" autocomplete="username" />
+            <input id="base" type="hidden" name="base" value="/" />
+            <div class="field">
+              <!-- The onfocus code places the cursor at the end of the value. -->
+              <input
+                required
+                autofocus
+                value="{{VALUE}}"
+                onfocus="const value=this.value;this.value='';this.value=value;"
+                class="password"
+                type="password"
+                placeholder="PASSWORD"
+                name="password"
+                autocomplete="current-password"
+              />
+              <input class="submit -button" value="SUBMIT" type="submit" />
+            </div>
+            {{ERROR}}
+          </form>
         </div>
-        {{ERROR}}
-      </form>
+      </div>
     </div>
   </body>
   <script>
diff --git a/src/browser/pages/update.css b/src/browser/pages/update.css
index 21b5e610a..9a7c8632e 100644
--- a/src/browser/pages/update.css
+++ b/src/browser/pages/update.css
@@ -2,39 +2,11 @@
   text-align: center;
 }
 
-.update-form > .apply {
-  background-color: transparent;
-  color: #b6b6b6;
-  cursor: pointer;
-  border: 1px solid #b6b6b6;
-  box-sizing: border-box;
-  padding: 1rem 2rem;
-}
-
-.update-form > .apply:hover {
-  color: #fafafa;
-  border-color: #fafafa;
-}
-
-.update-form > .current {
-  margin-top: 1rem;
-}
-
-.update-form > .links {
-  margin-top: 1rem;
-}
-
-.update-form > .links > .link {
-  color: #b6b6b6;
-  text-decoration: none;
-}
-
-.update-form > .links > .link:hover {
-  color: #fcfcfc;
-  text-decoration: underline;
+.update-form > .cancel {
+  background-color: red;
 }
 
 .update-form > .error {
   color: red;
-  margin-top: 1rem;
+  margin-top: 16px;
 }
diff --git a/src/browser/pages/update.html b/src/browser/pages/update.html
index 55db9d084..80813e68a 100644
--- a/src/browser/pages/update.html
+++ b/src/browser/pages/update.html
@@ -19,13 +19,18 @@
   </head>
   <body>
     <div class="center-container">
-      <form class="update-form" method="post">
-        <h2 class="header">Update</h2>
-        {{UPDATE_STATUS}} {{ERROR}}
-        <div class="links">
-          <a class="link" href="{{BASE}}">go home</a>
+      <div class="card-box">
+        <div class="header">
+          <h1 class="main">Update</h1>
+          <div class="sub">Update code-server.</div>
         </div>
-      </form>
+        <div class="content">
+          <form class="update-form" method="post">
+            {{UPDATE_STATUS}} {{ERROR}}
+            <a class="cancel -button" href="{{BASE}}">Cancel</a>
+          </form>
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/src/node/app/app.ts b/src/node/app/app.ts
index 2b48d840d..e132d1a05 100644
--- a/src/node/app/app.ts
+++ b/src/node/app/app.ts
@@ -166,7 +166,7 @@ export class MainHttpProvider extends HttpProvider {
     if (this.update.isLatestVersion(update)) {
       return `<div class="block-row">
         <div class="item">
-          ${update.version}
+          Latest: ${update.version}
           <div class="sub">Up to date</div>
         </div>
         <div class="item">
@@ -178,13 +178,13 @@ export class MainHttpProvider extends HttpProvider {
     }
 
     return `<div class="block-row">
-      <a class="item -link" href="./update">
-        ${update.version}
+      <div class="item">
+        Latest: ${update.version}
         <div class="sub">Out of date</div>
-      </a>
+      </div>
       <div class="item">
         ${humanize(update.checked)}
-        <a class="sub -link" href="./update/check">Check now</a>
+        <a class="sub -link" href="./update">Update now</a>
       </div>
       <div class="item" >Current: ${this.update.currentVersion}</div>
     </div>`
diff --git a/src/node/app/update.ts b/src/node/app/update.ts
index f86f93249..f8f8ab38c 100644
--- a/src/node/app/update.ts
+++ b/src/node/app/update.ts
@@ -162,10 +162,7 @@ export class UpdateHttpProvider extends HttpProvider {
       throw new Error("No update available")
     }
 
-    return `<button type="submit" class="apply">
-      Update to ${update.version}
-    </button>
-    <div class="current">Current: ${this.currentVersion}</div>`
+    return `<button type="submit" class="apply -button">Update to ${update.version}</button>`
   }
 
   public async tryUpdate(route: Route): Promise<HttpResponse> {