diff --git a/ui/src/assets/analyze_page.scss b/ui/src/assets/analyze_page.scss
index 4a700a3..92814d2 100644
--- a/ui/src/assets/analyze_page.scss
+++ b/ui/src/assets/analyze_page.scss
@@ -15,6 +15,8 @@
 .analyze-page {
   overflow-y: auto;
   overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
   .query-input {
     width: 100%;
     background-color: #111;
@@ -29,5 +31,6 @@
     padding: 0.5em;
     overflow: auto;
     resize: vertical;
+    outline: none;
   }
 }
diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
index 9e26d09..82a9569 100644
--- a/ui/src/assets/common.scss
+++ b/ui/src/assets/common.scss
@@ -12,12 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "widgets/theme";
 @import "typefaces";
 @import "fonts";
 
 :root {
-  --sidebar-width: 256px;
-  --topbar-height: 48px;
+  --sidebar-width: 230px;
+  --topbar-height: 44px;
   --monospace-font: "Roboto Mono", monospace;
   --track-shell-width: 250px;
   --track-border-color: #00000025;
@@ -51,7 +52,7 @@
   overflow-wrap: break-word;
   font-family: "Roboto Condensed", sans-serif;
   font-weight: 300;
-  letter-spacing: -0.25px;
+  letter-spacing: -0.5px;
 }
 
 * {
@@ -175,12 +176,13 @@
   grid-area: alerts;
   background-color: #f2f2f2;
   > div {
-    font-family: "Raleway", sans-serif;
+    font-family: "Roboto", sans-serif;
     font-weight: 400;
     letter-spacing: 0.25px;
     padding: 1rem;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     button {
       width: 24px;
       height: 24px;
@@ -377,7 +379,7 @@
 
   .track-shell {
     @include transition();
-    padding-left: 10px;
+    padding-left: 5px;
     display: grid;
     cursor: grab;
     grid-template-areas: "title buttons";
@@ -408,7 +410,7 @@
 
     .chip {
       background-color: #bed6ff;
-      border-radius: 3px;
+      border-radius: $pf-border-radius;
       font-size: smaller;
       padding: 0 0.1rem;
       margin-left: 1ch;
@@ -441,6 +443,7 @@
       display: flex;
       height: 100%;
       align-items: center;
+      justify-content: center;
 
       &:hover {
         background-color: #ebeef9;
@@ -469,6 +472,7 @@
 }
 
 .details-panel-container {
+  box-shadow: #0000003b 0px 0px 3px 1px;
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;
@@ -533,7 +537,7 @@
 }
 
 .overview-timeline {
-  height: 100px;
+  height: 70px;
 }
 
 .time-axis-panel {
diff --git a/ui/src/assets/details.scss b/ui/src/assets/details.scss
index 3a007c6..034a967 100644
--- a/ui/src/assets/details.scss
+++ b/ui/src/assets/details.scss
@@ -41,14 +41,14 @@
         padding: 3px 10px 0 10px;
         margin-top: 3px;
         font-size: 13px;
-        border-radius: 5px 5px 0 0;
-        background-color: hsla(0, 0%, 75%, 1);
-        border-top: solid 1px hsla(0, 0%, 75%, 1);
-        border-left: solid 1px hsla(0, 0%, 75%, 1);
+        border-radius: 3px 3px 0 0;
+        background-color: #0000000f;
         border-right: solid 1px hsla(0, 0%, 75%, 1);
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        z-index: 5;
+        box-shadow: #0000003b 0px 0px 3px 1px;
 
         &[active] {
           background-color: white;
@@ -62,6 +62,10 @@
           cursor: pointer;
           background-color: hsla(0, 0%, 85%, 1);
         }
+
+        &:nth-child(1) {
+          margin-left: 3px;
+        }
       }
     }
 
diff --git a/ui/src/assets/flags_page.scss b/ui/src/assets/flags_page.scss
index a23c60f..d65b678 100644
--- a/ui/src/assets/flags_page.scss
+++ b/ui/src/assets/flags_page.scss
@@ -12,31 +12,34 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "widgets/theme";
+
 .flags-page {
   overflow-y: scroll;
 }
 
 .flags-content {
-  max-width: 90ch;
+  max-width: 100ch;
   width: 60%;
   margin: 0 auto;
   padding: 3rem;
   display: grid;
-  grid-row-gap: 1rem;
 
   h1 {
     font-size: larger;
+    margin: 1rem 1rem;
   }
 
   button {
     background: none;
     border: 1px solid rgb(218, 220, 224);
-    border-radius: 3px;
+    border-radius: $pf-border-radius;
     color: rgb(25, 103, 210);
     font-size: 0.8125rem;
     padding: 8px 12px;
     cursor: pointer;
     font-weight: 500;
+    margin: 3px 0.5rem;
   }
 }
 
@@ -45,9 +48,9 @@
   grid-template:
     "title control" auto
     "description control" auto / 1fr auto;
-
-  row-gap: 0.5rem;
-  align-content: center;
+  row-gap: 0.3rem;
+  padding: 1rem 1rem;
+  align-items: center;
 
   select {
     grid-area: control;
@@ -70,3 +73,8 @@
     font-size: smaller;
   }
 }
+
+.flag-widget:nth-child(2n+1) {
+  background-color: #0000000a;
+}
+
diff --git a/ui/src/assets/hiring_banner.scss b/ui/src/assets/hiring_banner.scss
index a6807df..3e3b46d 100644
--- a/ui/src/assets/hiring_banner.scss
+++ b/ui/src/assets/hiring_banner.scss
@@ -1,5 +1,5 @@
 .hiring-banner {
-  font-family: "Raleway", sans-serif;
+  font-family: "Roboto", sans-serif;
   font-size: 12px;
   background: #db4634;
   box-shadow: 0 0 3px rgba(0, 0, 0, 30%);
diff --git a/ui/src/assets/home_page.scss b/ui/src/assets/home_page.scss
index 4d3f5a8..f421b83 100644
--- a/ui/src/assets/home_page.scss
+++ b/ui/src/assets/home_page.scss
@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "widgets/theme";
+
 .home-page {
   text-align: center;
   align-items: center;
@@ -31,15 +33,15 @@
       font-size: 60px;
       margin: 25px;
       text-align: center;
-      font-family: "Raleway", sans-serif;
-      font-weight: 100;
+      font-family: "Roboto", sans-serif;
+      font-weight: 400;
       color: #333;
     }
 
     .channel-select {
       font-family: "Roboto", sans-serif;
       font-size: 1.2rem;
-      font-weight: 200;
+      font-weight: 400;
       margin-top: 3em;
       --chan-width: 100px;
       --chan-num: 2;
@@ -69,7 +71,7 @@
         padding: 0;
         position: relative;
         background-color: hsl(218, 8%, 30%);
-        border-radius: 3px;
+        border-radius: $pf-border-radius;
         box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
         border: 0;
         width: calc(var(--chan-width) * var(--chan-num));
@@ -88,7 +90,7 @@
         z-index: 2;
         text-transform: uppercase;
         font-size: 16px;
-        font-family: "Raleway";
+        font-family: "Roboto";
         font-weight: 400;
         letter-spacing: 0.3px;
       }
@@ -106,7 +108,7 @@
         left: 0;
         z-index: 1;
         border-radius: inherit;
-        @include transition();
+        @include transition(0.2s);
       }
 
       .home-page-reload {
@@ -114,7 +116,7 @@
         opacity: 0;
         color: #da4534;
         font-weight: 400;
-        @include transition();
+        @include transition(0.2s);
         &.show {
           opacity: 1;
         }
@@ -126,7 +128,7 @@
     grid-area: footer;
     text-decoration: none;
     font-family: "Roboto", sans-serif;
-    font-weight: 200;
+    font-weight: 400;
     color: #333;
     font-size: 15px;
   }
diff --git a/ui/src/assets/metrics_page.scss b/ui/src/assets/metrics_page.scss
index 3ed881c..1487e34 100644
--- a/ui/src/assets/metrics_page.scss
+++ b/ui/src/assets/metrics_page.scss
@@ -12,9 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "widgets/theme";
+
 .metrics-page {
   padding: 30px;
-  font-family: "Raleway", sans-serif;
+  font-family: "Roboto", sans-serif;
   overflow-y: auto;
 
   .metric-run-button {
@@ -23,12 +25,12 @@
     border-radius: 4px;
     padding: 5px 10px;
     font-weight: bold;
-    font-family: "Raleway";
+    font-family: "Roboto";
   }
 
   select {
     margin: 10px;
-    font-family: "Raleway";
+    font-family: "Roboto";
     font-size: 1em;
     border: 1px solid black;
     background-color: #eee;
@@ -39,7 +41,7 @@
     padding: 20px;
     font-family: "Roboto Mono";
     line-height: 1.5em;
-    border-radius: 5px;
+    border-radius: $pf-border-radius;
     overflow-x: auto;
     &.metric-error {
       color: #ef6c00;
diff --git a/ui/src/assets/modal.scss b/ui/src/assets/modal.scss
index 76d3cea..ee575f0 100644
--- a/ui/src/assets/modal.scss
+++ b/ui/src/assets/modal.scss
@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "widgets/theme";
+
 // The opacity changes are only transitional. Once the `modalFadeOut` animation
 // reaches the end, the Mithril component that renders .modal-backdrop
 // (and .modal-dialog) is fully destroyed and removed from the DOM.
@@ -57,7 +59,6 @@
 .modal-dialog {
   position: absolute;
   z-index: 100;
-  border: 1px solid #333;
   background-color: #fff;
   margin: auto;
   min-width: 25vw;
@@ -65,7 +66,7 @@
   padding: 30px;
   max-width: 90vw;
   max-height: 90vh;
-  border-radius: 4px;
+  border-radius: $pf-border-radius;
   overflow-y: auto;
   top: 50%;
   left: 50%;
@@ -86,7 +87,7 @@
     h2 {
       margin-top: 0;
       margin-bottom: 0;
-      font-family: "Raleway", sans-serif;
+      font-family: "Roboto", sans-serif;
       font-weight: 600;
       font-size: 1.25rem;
       line-height: 1.25;
diff --git a/ui/src/assets/record.scss b/ui/src/assets/record.scss
index 529e57e..43cf635 100644
--- a/ui/src/assets/record.scss
+++ b/ui/src/assets/record.scss
@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "widgets/theme";
+
 :root {
   --record-text-color: #333;
 }
@@ -30,7 +32,7 @@
   max-width: 900px;
   min-height: 500px;
   margin: auto;
-  border-radius: 5px;
+  border-radius: $pf-border-radius;
   box-shadow: 0 1px 2px 0 #aaa, 0 1px 3px 1px #eee;
   background-color: #fff;
   display: grid;
@@ -53,7 +55,7 @@
     height: 100%;
     text-align: center;
     padding: 180px 30px;
-    font-family: "Raleway", sans-serif;
+    font-family: "Roboto", sans-serif;
     font-size: 25px;
   }
 }
@@ -72,8 +74,6 @@
     flex-direction: row;
 
     .logo-wrapping {
-      border-radius: 50%;
-      background-color: #f0f0f0;
       width: 150px;
       height: 150px;
       display: inline-block;
@@ -81,7 +81,7 @@
       align-self: center;
 
       i.material-icons {
-        color: #0000ff;
+        color: #16161d;
         font-size: 150px;
       }
     }
@@ -127,7 +127,7 @@
 
       input[type="text"] {
         flex-grow: 1;
-        border-radius: 4px;
+        border-radius: $pf-border-radius;
         border: 1px solid #dcdcdc;
         padding: 3px;
         margin: 0 10px;
@@ -169,7 +169,7 @@
 
   .record-modal-button,
   .record-modal-button-high {
-    border-radius: 0.25rem;
+    border-radius: $pf-border-radius;
     border-style: none;
     border-width: 0;
   }
@@ -234,7 +234,7 @@
         margin: 10px;
         text-align: center;
         background-color: #eee;
-        font-family: "Raleway", sans-serif;
+        font-family: "Roboto", sans-serif;
         font-size: 17px;
         @media (max-width: 1280px) {
           font-size: 1.6vw;
@@ -366,7 +366,7 @@
     padding: 0 1em;
     font-size: 15px;
     letter-spacing: 0.5px;
-    font-family: "Raleway", sans-serif;
+    font-family: "Roboto", sans-serif;
     font-weight: 600;
     color: #666;
     display: grid;
@@ -378,12 +378,10 @@
 
     i {
       margin: auto;
-      border-radius: 100%;
       font-size: 32px;
       width: 38px;
       height: 38px;
       padding: 3px;
-      background: #eee;
       grid-area: icon;
     }
 
@@ -476,7 +474,7 @@
     margin-right: 10px;
     text-align: center;
     justify-items: center;
-    font-family: "Raleway", sans-serif;
+    font-family: "Roboto", sans-serif;
     padding: 7px;
 
     &:hover:enabled {
@@ -542,7 +540,7 @@
       }
       &::placeholder {
         color: #b4b7ba;
-        font-family: "Raleway", sans-serif;
+        font-family: "Roboto", sans-serif;
         font-weight: 400;
       }
     }
@@ -564,7 +562,7 @@
 
   > header {
     text-align: center;
-    font-family: "Raleway", sans-serif;
+    font-family: "Roboto", sans-serif;
     font-size: 20px;
     padding: 15px 10px;
     color: #333;
@@ -801,7 +799,7 @@
       margin: 5px;
       text-align: center;
       background-color: #eee;
-      font-family: "Raleway", sans-serif;
+      font-family: "Roboto", sans-serif;
       font-size: 20px;
       @media (max-width: 1280px) {
         font-size: 1.6vw;
@@ -1175,7 +1173,7 @@
         text-align: center;
         margin: 3px;
         background-color: #eee;
-        font-family: "Raleway", sans-serif;
+        font-family: "Roboto", sans-serif;
         flex-grow: 1;
         font-size: 17px;
         @media (max-width: 1280px) {
@@ -1202,7 +1200,7 @@
       border-radius: 10px;
       text-align: center;
       justify-items: center;
-      font-family: "Raleway", sans-serif;
+      font-family: "Roboto", sans-serif;
       padding: 7px;
       background-color: hsl(88, 50%, 67%);
 
diff --git a/ui/src/assets/sidebar.scss b/ui/src/assets/sidebar.scss
index b0a7092..6fedf61 100644
--- a/ui/src/assets/sidebar.scss
+++ b/ui/src/assets/sidebar.scss
@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "widgets/theme";
+
 .sidebar {
   --sidebar-padding-bottom: 40px;
   --sidebar-timing: 0.15s;
@@ -38,11 +40,11 @@
     height: var(--topbar-height);
     line-height: var(--topbar-height);
     vertical-align: middle;
-    padding: 0 20px;
+    padding: 0 12px;
     color: #fff;
     overflow: visible;
     .brand {
-      height: 40px;
+      height: 36px;
       margin-top: 4px;
     }
     &::before {
@@ -54,7 +56,7 @@
       position: absolute;
       font-size: 10px;
       line-height: 10px;
-      font-family: "Raleway", sans-serif;
+      font-family: "Roboto", sans-serif;
       left: 155px;
       top: 7px;
     }
@@ -121,17 +123,15 @@
           cursor: pointer;
           > h1,
           > h2 {
-            font-family: "Raleway", sans-serif;
             letter-spacing: 0.25px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            margin: 0 24px;
+            margin: 0 12px;
           }
           > h1 {
             color: #fff;
             font-size: 15px;
-            font-weight: 500;
           }
           > h2 {
             @include transition();
@@ -189,10 +189,8 @@
           a {
             line-height: 24px;
             font-size: 14px;
-            font-weight: 400;
-            font-family: "Raleway", sans-serif;
             letter-spacing: 0.5px;
-            padding: 5px 24px;
+            padding: 4px 12px;
             text-decoration: none;
             display: block;
             &.pending {
@@ -225,6 +223,7 @@
           }
           .material-icons {
             margin-right: 10px;
+            font-size: 20px
           }
           &:hover {
             background-color: #373f4b;
@@ -265,13 +264,19 @@
     }
 
     > .dbg-info-square {
+      font-family: "Roboto Condensed", sans-serif;
       width: 24px;
-      height: 22px;
-      line-height: 22px;
+      height: 24px;
+      line-height: 24px;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+
       margin: 1px 0;
       background: #12161b;
       color: #4e71b3;
-      border-radius: 5px;
+      border-radius: $pf-border-radius;
       font-size: 12px;
       text-align: center;
       &.green {
diff --git a/ui/src/assets/topbar.scss b/ui/src/assets/topbar.scss
index 561c9364..7742b5a 100644
--- a/ui/src/assets/topbar.scss
+++ b/ui/src/assets/topbar.scss
@@ -11,6 +11,9 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+
+@import "widgets/theme";
+
 @mixin omnibox-width() {
   width: 90%;
   max-width: 600px;
@@ -22,7 +25,7 @@
   z-index: 3;
   overflow: visible;
   background-color: hsl(215, 1%, 95%);
-  box-shadow: 0 -3px 14px 2px #bbb;
+  box-shadow: 0px 1px 2px 1px #00000026;
   min-height: var(--topbar-height);
   display: flex;
   justify-content: center;
@@ -33,7 +36,7 @@
     display: grid;
     grid-template-areas: "icon input stepthrough";
     grid-template-columns: 34px auto max-content;
-    border-radius: 20px;
+    border-radius: $pf-border-radius;
     background-color: #fcfcfc;
     border: 0;
     line-height: 34px;
@@ -83,14 +86,14 @@
     }
     &.message-mode {
       background-color: hsl(0, 0%, 89%);
-      border-radius: 4px;
+      border-radius: $pf-border-radius;
       input::placeholder {
         font-weight: 400;
         font-family: var(--monospace-font);
         color: hsl(213, 40%, 50%);
       }
       &:before {
-        content: "bubble_chart";
+        content: "info";
       }
     }
     .stepthrough {
diff --git a/ui/src/assets/trace_info_page.scss b/ui/src/assets/trace_info_page.scss
index 69baaaf..3846b7a 100644
--- a/ui/src/assets/trace_info_page.scss
+++ b/ui/src/assets/trace_info_page.scss
@@ -36,7 +36,7 @@
     }
 
     h2 {
-      font-family: "Raleway", sans-serif;
+      font-family: "Roboto", sans-serif;
       font-weight: 400;
       letter-spacing: 0.25px;
       font-size: 2rem;
diff --git a/ui/src/assets/typefaces.scss b/ui/src/assets/typefaces.scss
index d0c4b82..02ef5e8 100644
--- a/ui/src/assets/typefaces.scss
+++ b/ui/src/assets/typefaces.scss
@@ -1,27 +1,5 @@
 /* latin */
 @font-face {
-  font-family: "Raleway";
-  font-style: normal;
-  font-weight: 100;
-  src: url(assets/Raleway-Thin.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-/* latin */
-@font-face {
-  font-family: "Raleway";
-  font-style: normal;
-  font-weight: 400;
-  src: url(assets/Raleway-Regular.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-/* latin */
-@font-face {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 100;
diff --git a/ui/src/assets/widgets/theme.scss b/ui/src/assets/widgets/theme.scss
index 3902dc4..2a49642 100644
--- a/ui/src/assets/widgets/theme.scss
+++ b/ui/src/assets/widgets/theme.scss
@@ -15,7 +15,7 @@
 // Standard theme settings for widgets
 
 $pf-font: "Roboto Condensed", sans-serif;
-$pf-border-radius: 3px;
+$pf-border-radius: 2px;
 $pf-anim-timing: 250ms cubic-bezier(0.4, 0, 0.2, 1);
 
 // Here we describe two colour schemes: primary and minimal
diff --git a/ui/src/frontend/icons.ts b/ui/src/frontend/icons.ts
index 0725a41..2fc19b0 100644
--- a/ui/src/frontend/icons.ts
+++ b/ui/src/frontend/icons.ts
@@ -20,3 +20,4 @@
 export const EXPAND_UP = 'expand_less';
 
 export const PIN = 'push_pin';
+export const STAR = 'star';
diff --git a/ui/src/frontend/metrics_page.ts b/ui/src/frontend/metrics_page.ts
index 1eabd99..606236f 100644
--- a/ui/src/frontend/metrics_page.ts
+++ b/ui/src/frontend/metrics_page.ts
@@ -17,6 +17,7 @@
 import {Actions} from '../common/actions';
 import {globals} from './globals';
 import {createPage} from './pages';
+import {Button} from './widgets/button';
 
 function getCurrSelectedMetric() {
   const {availableMetrics, selectedIndex} = globals.state.metrics;
@@ -64,9 +65,10 @@
         },
         availableMetrics.map(
             (metric) => m('option', {value: metric, key: metric}, metric))),
-      m('button.metric-run-button',
-        {onclick: () => globals.dispatch(Actions.requestSelectedMetric({}))},
-        'Run'),
+      m(Button, {
+        onclick: () => globals.dispatch(Actions.requestSelectedMetric({})),
+        label: 'Run',
+      }),
     ]);
   }
 }
diff --git a/ui/src/frontend/notes_panel.ts b/ui/src/frontend/notes_panel.ts
index 295c893..52cec48 100644
--- a/ui/src/frontend/notes_panel.ts
+++ b/ui/src/frontend/notes_panel.ts
@@ -232,7 +232,7 @@
     const prevBaseline = ctx.textBaseline;
     ctx.textBaseline = 'alphabetic';
     // Adjust height for icon font.
-    ctx.font = '24px Material Icons';
+    ctx.font = '24px Material Symbols Sharp';
     ctx.fillStyle = color;
     ctx.strokeStyle = color;
     // The ligatures have padding included that means the icon is not drawn
diff --git a/ui/src/frontend/overview_timeline_panel.ts b/ui/src/frontend/overview_timeline_panel.ts
index adc06d9..2e351f3 100644
--- a/ui/src/frontend/overview_timeline_panel.ts
+++ b/ui/src/frontend/overview_timeline_panel.ts
@@ -34,7 +34,7 @@
 import {TimeScale} from './time_scale';
 
 export class OverviewTimelinePanel extends Panel {
-  private static HANDLE_SIZE_PX = 7;
+  private static HANDLE_SIZE_PX = 5;
 
   private width = 0;
   private gesture?: DragGestureHandler;
@@ -79,7 +79,7 @@
   renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
     if (this.width === undefined) return;
     if (this.timeScale === undefined) return;
-    const headerHeight = 25;
+    const headerHeight = 20;
     const tracksHeight = size.height - headerHeight;
     const timeSpan = new TimeSpan(0, this.totTime.duration);
 
@@ -147,18 +147,18 @@
     ctx.fillRect(vizEndPx, headerHeight, 1, tracksHeight);
 
     const hbarWidth = OverviewTimelinePanel.HANDLE_SIZE_PX;
-    const hbarDivisionFactor = 3.5;
+    const hbarHeight = tracksHeight * 0.4;
     // Draw handlebar
     ctx.fillRect(
         vizStartPx - Math.floor(hbarWidth / 2) - 1,
         headerHeight,
         hbarWidth,
-        tracksHeight / hbarDivisionFactor);
+        hbarHeight);
     ctx.fillRect(
         vizEndPx - Math.floor(hbarWidth / 2),
         headerHeight,
         hbarWidth,
-        tracksHeight / hbarDivisionFactor);
+        hbarHeight);
   }
 
   private onMouseMove(e: MouseEvent) {
diff --git a/ui/src/frontend/query_history.ts b/ui/src/frontend/query_history.ts
index e2e503c..a50627a 100644
--- a/ui/src/frontend/query_history.ts
+++ b/ui/src/frontend/query_history.ts
@@ -17,6 +17,8 @@
 import {Actions} from '../common/actions';
 
 import {globals} from './globals';
+import {STAR} from './icons';
+
 import {
   arrayOf,
   bool,
@@ -60,15 +62,17 @@
     return m(
         '.history-item',
         m('.history-item-buttons',
-          m('button',
-            {
-              onclick: () => {
-                queryHistoryStorage.setStarred(
-                    vnode.attrs.index, !vnode.attrs.entry.starred);
-                globals.rafScheduler.scheduleFullRedraw();
+          m(
+              'button',
+              {
+                onclick: () => {
+                  queryHistoryStorage.setStarred(
+                      vnode.attrs.index, !vnode.attrs.entry.starred);
+                  globals.rafScheduler.scheduleFullRedraw();
+                },
               },
-            },
-            m(Icon, {icon: 'star', filled: vnode.attrs.entry.starred})),
+              m(Icon, {icon: STAR, filled: vnode.attrs.entry.starred}),
+              ),
           m('button',
             {
               onclick: () => {
diff --git a/ui/src/frontend/record_page.ts b/ui/src/frontend/record_page.ts
index d142ee6..d6d574a 100644
--- a/ui/src/frontend/record_page.ts
+++ b/ui/src/frontend/record_page.ts
@@ -711,7 +711,7 @@
             m('.sub', 'Buffer mode, size and duration'))),
         m('a[href="#!/record/instructions"]',
           m(`li${routePage === 'instructions' ? '.active' : ''}`,
-            m('i.material-icons.rec', 'fiber_manual_record'),
+            m('i.material-icons-filled.rec', 'fiber_manual_record'),
             m('.title', 'Recording command'),
             m('.sub', 'Manually record trace'))),
         PERSIST_CONFIG_FLAG.get() ?
diff --git a/ui/src/frontend/record_page_v2.ts b/ui/src/frontend/record_page_v2.ts
index 105411d..70ab452 100644
--- a/ui/src/frontend/record_page_v2.ts
+++ b/ui/src/frontend/record_page_v2.ts
@@ -466,7 +466,7 @@
             m('.sub', 'Buffer mode, size and duration'))),
         m('a[href="#!/record/instructions"]',
           m(`li${routePage === 'instructions' ? '.active' : ''}`,
-            m('i.material-icons.rec', 'fiber_manual_record'),
+            m('i.material-icons-filled.rec', 'fiber_manual_record'),
             m('.title', 'Recording command'),
             m('.sub', 'Manually record trace'))),
         PERSIST_CONFIG_FLAG.get() ?
diff --git a/ui/src/frontend/recording/reset_target_modal.ts b/ui/src/frontend/recording/reset_target_modal.ts
index a50cce8..5e34c7b 100644
--- a/ui/src/frontend/recording/reset_target_modal.ts
+++ b/ui/src/frontend/recording/reset_target_modal.ts
@@ -69,7 +69,6 @@
       m('.logo-wrapping', m('i.material-icons', 'usb')),
       m('.record-modal-description',
         m('h3', 'Android device over WebUSB'),
-        m('h4', 'JustWorks from the browser with one click'),
         m('text',
           'Android developers: this option cannot co-operate ' +
               'with the adb host on your machine. Only one entity between ' +
diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index b76eeed..0aa518a 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -245,7 +245,7 @@
         '.track',
         {
           style: {
-            height: `${Math.max(24, attrs.track.getHeight())}px`,
+            height: `${Math.max(18, attrs.track.getHeight())}px`,
           },
           id: 'track_' + attrs.trackState.id,
         },
diff --git a/ui/src/tracks/chrome_slices/index.ts b/ui/src/tracks/chrome_slices/index.ts
index 00c475a..23f9a5e 100644
--- a/ui/src/tracks/chrome_slices/index.ts
+++ b/ui/src/tracks/chrome_slices/index.ts
@@ -29,7 +29,7 @@
 
 export const SLICE_TRACK_KIND = 'ChromeSliceTrack';
 const SLICE_HEIGHT = 18;
-const TRACK_PADDING = 4;
+const TRACK_PADDING = 2;
 const CHEVRON_WIDTH_PX = 10;
 const HALF_CHEVRON_WIDTH_PX = CHEVRON_WIDTH_PX / 2;
 const INNER_CHEVRON_OFFSET = -3;
diff --git a/ui/src/tracks/thread_state/index.ts b/ui/src/tracks/thread_state/index.ts
index 475d8b1..3713999 100644
--- a/ui/src/tracks/thread_state/index.ts
+++ b/ui/src/tracks/thread_state/index.ts
@@ -167,8 +167,8 @@
   }
 }
 
-const MARGIN_TOP = 4;
-const RECT_HEIGHT = 14;
+const MARGIN_TOP = 3;
+const RECT_HEIGHT = 12;
 const EXCESS_WIDTH = 10;
 
 class ThreadStateTrack extends Track<Config, Data> {