diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
index 11b548ecf22..9ac7d65f4a1 100644
--- a/ui/src/assets/common.scss
+++ b/ui/src/assets/common.scss
@@ -51,6 +51,17 @@
   content: $content;
 }
 
+@mixin button-base {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  user-select: none;
+}
+
 * {
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
@@ -76,9 +87,8 @@ html {
   }
 }
 
-html,
-body,
-body > main {
+.perfetto,
+main.pf-ui-main {
   height: 100%;
   width: 100%;
   padding: 0;
@@ -87,9 +97,16 @@ body > main {
   overflow: hidden;
 }
 
-pre,
-code {
-  font-family: var(--pf-font-monospace);
+.perfetto {
+  h1,
+  h2,
+  h3 {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    padding: 0;
+    margin: 0;
+  }
 }
 
 // This is to minimize Mac vs Linux Chrome Headless rendering differences
@@ -99,20 +116,6 @@ body.testing {
   font-kerning: none !important;
 }
 
-h1,
-h2,
-h3 {
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  padding: 0;
-  margin: 0;
-}
-table {
-  -webkit-user-select: text;
-  user-select: text;
-}
-
 body.filedrag::after {
   content: "Drop the trace file to open it";
   position: fixed;
@@ -128,17 +131,3 @@ body.filedrag::after {
   color: #333;
   background: rgba(255, 255, 255, 0.5);
 }
-
-button {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-}
-
-button.close {
-  font-family: var(--pf-font-monospace);
-}
diff --git a/ui/src/assets/cookie_consent.scss b/ui/src/assets/cookie_consent.scss
index f81fc54a479..44ab68ebf29 100644
--- a/ui/src/assets/cookie_consent.scss
+++ b/ui/src/assets/cookie_consent.scss
@@ -32,6 +32,8 @@
   }
 
   button {
+    @include button-base;
+
     padding: 10px;
     border-radius: 3px;
     color: #fff;
@@ -42,7 +44,8 @@
     }
   }
   button:hover {
+    @include button-base;
+
     background-color: #373f4b;
-    cursor: pointer;
   }
 }
diff --git a/ui/src/assets/perf_monitor.scss b/ui/src/assets/perf_monitor.scss
index 2f5733e15c4..af91de1af1f 100644
--- a/ui/src/assets/perf_monitor.scss
+++ b/ui/src/assets/perf_monitor.scss
@@ -25,6 +25,8 @@
   background-color: rgba(27, 28, 29, 0.9);
 
   button {
+    @include button-base;
+
     text-decoration: underline;
     color: hsl(45, 100%, 48%);
     &:hover {
diff --git a/ui/src/assets/widgets/button.scss b/ui/src/assets/widgets/button.scss
index 891cb37e017..0a6b98fd50b 100644
--- a/ui/src/assets/widgets/button.scss
+++ b/ui/src/assets/widgets/button.scss
@@ -39,9 +39,10 @@
 }
 
 .pf-button {
+  @include button-base;
+
   font-family: var(--pf-font-compact);
   line-height: 1;
-  user-select: none;
   border-radius: $border-radius;
   padding: 4px 8px;
   white-space: nowrap;
diff --git a/ui/src/assets/widgets/menu.scss b/ui/src/assets/widgets/menu.scss
index 0dfe6370f08..639dc0e2ce7 100644
--- a/ui/src/assets/widgets/menu.scss
+++ b/ui/src/assets/widgets/menu.scss
@@ -28,14 +28,14 @@
   margin: 4px 0;
 
   .pf-menu-item {
+    @include button-base;
+
     font-family: var(--pf-font-compact);
-    user-select: none;
     text-align: left;
     padding: 6px 10px;
     white-space: nowrap;
     min-width: max-content;
     line-height: 1;
-    cursor: pointer;
 
     display: grid;
     grid-template-columns: auto 1fr auto;
diff --git a/ui/src/frontend/index.ts b/ui/src/frontend/index.ts
index 6a050d305d4..124635861fb 100644
--- a/ui/src/frontend/index.ts
+++ b/ui/src/frontend/index.ts
@@ -320,6 +320,7 @@ function onCssLoaded() {
   // Clear all the contents of the initial page (e.g. the <pre> error message)
   // And replace it with the root <main> element which will be used by mithril.
   document.body.innerHTML = '';
+  document.body.classList.add('perfetto');
 
   const pages = AppImpl.instance.pages;
   pages.registerPage({route: '/', render: () => m(HomePage)});