diff --git a/package-lock.json b/package-lock.json
index 82db829..77eb6b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
+        "@material/tooltip": "^12.0.0",
         "google-protobuf": "^3.18.0-rc.2",
         "grpc-web": "^1.2.1",
         "idb": "^6.1.2",
@@ -18,8 +19,12 @@
       },
       "devDependencies": {
         "copy-webpack-plugin": "^9.0.1",
+        "css-loader": "^6.2.0",
         "json5": "^2.2.0",
         "path": "^0.12.7",
+        "sass": "^1.38.1",
+        "sass-loader": "^12.1.0",
+        "style-loader": "^3.2.1",
         "webpack": "^5.44.0",
         "webpack-cli": "^4.7.2",
         "webpack-shell-plugin-next": "^2.2.2"
@@ -34,6 +39,107 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@material/animation": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/animation/-/animation-12.0.0.tgz",
+      "integrity": "sha512-PfRHehbW6xrNaAb5RELmyxn9+pGTYwzxUnT43TdmOOTN+J45MRH8c90ZSdczich6gp7tgyTQsd3HtB5yRgBsIA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/base": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/base/-/base-12.0.0.tgz",
+      "integrity": "sha512-LcAQGFhuGM5B9BJQPoDYXhka+gkKvjKN6HdmCpKq55EkUoHeEnbu6IT2MOQjhcULTlQdcdGP77YNNGYdv3fGsA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/dom": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/dom/-/dom-12.0.0.tgz",
+      "integrity": "sha512-vaQi+bNMv3UMSG2wwMEYen36Or32XY/djGmes5KRi8TxDBzAH9HNuE9CxYBrZqYzYFrAIfvXyEIZhlhY+3WLlg==",
+      "dependencies": {
+        "@material/feature-targeting": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/elevation": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-12.0.0.tgz",
+      "integrity": "sha512-PWTACGNus2cdNL6V6+AhT3tC+YKyP2ujQn+izXNGXLXFc/FHk+lHLvwwr71D7bApy2hPMndHJ4DtF36qfAM1tw==",
+      "dependencies": {
+        "@material/animation": "^12.0.0",
+        "@material/base": "^12.0.0",
+        "@material/feature-targeting": "^12.0.0",
+        "@material/theme": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/feature-targeting": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-12.0.0.tgz",
+      "integrity": "sha512-BbdYzZmGg886X3gvKPxfM5etNwhmKR4PT33NRc7PTKivCHitre8zjgb7kKW1vRLV4YnB54sp9L7tr/QcbbbXGg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/rtl": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-12.0.0.tgz",
+      "integrity": "sha512-JmFyyWr2GFa1ODSsq0jaImj6NprDpts3L3riyvsTQVnJDDKyJwYkyjFbssuIqB9wO3IfVPj5JyTKNoTLraW7dA==",
+      "dependencies": {
+        "@material/theme": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/shape": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/shape/-/shape-12.0.0.tgz",
+      "integrity": "sha512-0mvRUPq2esbyivJl3NMdYtHTFOV7EOU+Tob2Y6F2sQ+PJJYpONfEHRo8nakN7fDM3aNSuQUdhG3nbwJghAN1IA==",
+      "dependencies": {
+        "@material/feature-targeting": "^12.0.0",
+        "@material/rtl": "^12.0.0",
+        "@material/theme": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/theme": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/theme/-/theme-12.0.0.tgz",
+      "integrity": "sha512-E9gFLpOcwtJ2GiPg8S4w+9eaqFNgLO67Yyftcu1XgswAHBFiI7qAHTDYH21H4W88RKlf3sTNyHtzigbTenPUNg==",
+      "dependencies": {
+        "@material/feature-targeting": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/tooltip": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/tooltip/-/tooltip-12.0.0.tgz",
+      "integrity": "sha512-YpXlidnWbymm5WdbteU4dSb+hdRMCrgsn1gO6xZ2HXfyiKX+2oqWvMZoSHMnCEc7oUvQteKybKrtD94T7CUeoA==",
+      "dependencies": {
+        "@material/animation": "^12.0.0",
+        "@material/base": "^12.0.0",
+        "@material/dom": "^12.0.0",
+        "@material/elevation": "^12.0.0",
+        "@material/feature-targeting": "^12.0.0",
+        "@material/rtl": "^12.0.0",
+        "@material/shape": "^12.0.0",
+        "@material/theme": "^12.0.0",
+        "@material/typography": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/typography": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/typography/-/typography-12.0.0.tgz",
+      "integrity": "sha512-NIAczsiUueV445+686qdVQC0QohIJDIOyVWbdNKnhkUmo23FcINLEcDMAtpvS0CJyqSHm8uWq1R585Wbx2kvdQ==",
+      "dependencies": {
+        "@material/feature-targeting": "^12.0.0",
+        "@material/theme": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -338,6 +444,19 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -347,6 +466,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/braces": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -398,6 +526,39 @@
         "url": "https://opencollective.com/browserslist"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -472,6 +633,44 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.2.0.tgz",
+      "integrity": "sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.2.15",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -685,6 +884,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -787,6 +1000,18 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/idb": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/idb/-/idb-6.1.2.tgz",
@@ -832,6 +1057,18 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
@@ -960,6 +1197,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@@ -1056,6 +1302,18 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
+    "node_modules/nanoid": {
+      "version": "3.1.25",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
+      "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
+      "dev": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
@@ -1227,6 +1485,102 @@
       "resolved": "https://registry.npmjs.org/poll-until-promise/-/poll-until-promise-3.6.1.tgz",
       "integrity": "sha512-m9awH+xxzFJ+SI3McCO+eQl2qoTYqE9Ql50Mf0oxHzdkrhzd4XdleRsLgPRqbZMqTkAip7XGia026wbZ00y59w=="
     },
+    "node_modules/postcss": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
+      "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
+      "dev": true,
+      "dependencies": {
+        "colorette": "^1.2.2",
+        "nanoid": "^3.1.23",
+        "source-map-js": "^0.6.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
+      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -1274,6 +1628,18 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/rechoir": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
@@ -1373,6 +1739,55 @@
         }
       ]
     },
+    "node_modules/sass": {
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.38.1.tgz",
+      "integrity": "sha512-Lj8nPaSYOuRhgqdyShV50fY5jKnvaRmikUNalMPmbH+tKMGgEKVkltI/lP30PEfO2T1t6R9yc2QIBLgOc3uaFw==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.1.0.tgz",
+      "integrity": "sha512-FVJZ9kxVRYNZTIe2xhw93n3xJNYZADr+q69/s98l9nTCrWASo+DR2Ot0s5xTKQDDEosUkatsGeHxcH4QBp5bSg==",
+      "dev": true,
+      "dependencies": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0",
+        "sass": "^1.3.0",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/schema-utils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
@@ -1477,6 +1892,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.19",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
@@ -1496,6 +1920,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/style-loader": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.2.1.tgz",
+      "integrity": "sha512-1k9ZosJCRFaRbY6hH49JFlRB0fVSbmnyq1iTPjNxUmGVjBNEmwrrHPenhlp+Lgo51BojHSf6pl2FcqYaN3PfVg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
     "node_modules/supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -1587,6 +2027,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -1605,6 +2050,12 @@
         "inherits": "2.0.3"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -1804,6 +2255,107 @@
       "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
       "dev": true
     },
+    "@material/animation": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/animation/-/animation-12.0.0.tgz",
+      "integrity": "sha512-PfRHehbW6xrNaAb5RELmyxn9+pGTYwzxUnT43TdmOOTN+J45MRH8c90ZSdczich6gp7tgyTQsd3HtB5yRgBsIA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@material/base": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/base/-/base-12.0.0.tgz",
+      "integrity": "sha512-LcAQGFhuGM5B9BJQPoDYXhka+gkKvjKN6HdmCpKq55EkUoHeEnbu6IT2MOQjhcULTlQdcdGP77YNNGYdv3fGsA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@material/dom": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/dom/-/dom-12.0.0.tgz",
+      "integrity": "sha512-vaQi+bNMv3UMSG2wwMEYen36Or32XY/djGmes5KRi8TxDBzAH9HNuE9CxYBrZqYzYFrAIfvXyEIZhlhY+3WLlg==",
+      "requires": {
+        "@material/feature-targeting": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@material/elevation": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-12.0.0.tgz",
+      "integrity": "sha512-PWTACGNus2cdNL6V6+AhT3tC+YKyP2ujQn+izXNGXLXFc/FHk+lHLvwwr71D7bApy2hPMndHJ4DtF36qfAM1tw==",
+      "requires": {
+        "@material/animation": "^12.0.0",
+        "@material/base": "^12.0.0",
+        "@material/feature-targeting": "^12.0.0",
+        "@material/theme": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@material/feature-targeting": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-12.0.0.tgz",
+      "integrity": "sha512-BbdYzZmGg886X3gvKPxfM5etNwhmKR4PT33NRc7PTKivCHitre8zjgb7kKW1vRLV4YnB54sp9L7tr/QcbbbXGg==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@material/rtl": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-12.0.0.tgz",
+      "integrity": "sha512-JmFyyWr2GFa1ODSsq0jaImj6NprDpts3L3riyvsTQVnJDDKyJwYkyjFbssuIqB9wO3IfVPj5JyTKNoTLraW7dA==",
+      "requires": {
+        "@material/theme": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@material/shape": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/shape/-/shape-12.0.0.tgz",
+      "integrity": "sha512-0mvRUPq2esbyivJl3NMdYtHTFOV7EOU+Tob2Y6F2sQ+PJJYpONfEHRo8nakN7fDM3aNSuQUdhG3nbwJghAN1IA==",
+      "requires": {
+        "@material/feature-targeting": "^12.0.0",
+        "@material/rtl": "^12.0.0",
+        "@material/theme": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@material/theme": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/theme/-/theme-12.0.0.tgz",
+      "integrity": "sha512-E9gFLpOcwtJ2GiPg8S4w+9eaqFNgLO67Yyftcu1XgswAHBFiI7qAHTDYH21H4W88RKlf3sTNyHtzigbTenPUNg==",
+      "requires": {
+        "@material/feature-targeting": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@material/tooltip": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/tooltip/-/tooltip-12.0.0.tgz",
+      "integrity": "sha512-YpXlidnWbymm5WdbteU4dSb+hdRMCrgsn1gO6xZ2HXfyiKX+2oqWvMZoSHMnCEc7oUvQteKybKrtD94T7CUeoA==",
+      "requires": {
+        "@material/animation": "^12.0.0",
+        "@material/base": "^12.0.0",
+        "@material/dom": "^12.0.0",
+        "@material/elevation": "^12.0.0",
+        "@material/feature-targeting": "^12.0.0",
+        "@material/rtl": "^12.0.0",
+        "@material/shape": "^12.0.0",
+        "@material/theme": "^12.0.0",
+        "@material/typography": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@material/typography": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@material/typography/-/typography-12.0.0.tgz",
+      "integrity": "sha512-NIAczsiUueV445+686qdVQC0QohIJDIOyVWbdNKnhkUmo23FcINLEcDMAtpvS0CJyqSHm8uWq1R585Wbx2kvdQ==",
+      "requires": {
+        "@material/feature-targeting": "^12.0.0",
+        "@material/theme": "^12.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2074,12 +2626,28 @@
       "dev": true,
       "requires": {}
     },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
     "array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true
     },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
     "braces": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -2114,6 +2682,33 @@
       "integrity": "sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA==",
       "dev": true
     },
+    "chokidar": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -2169,6 +2764,28 @@
         "which": "^2.0.1"
       }
     },
+    "css-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.2.0.tgz",
+      "integrity": "sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.2.15",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "semver": "^7.3.5"
+      }
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2338,6 +2955,13 @@
         "path-exists": "^4.0.0"
       }
     },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -2416,6 +3040,13 @@
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true
     },
+    "icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "requires": {}
+    },
     "idb": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/idb/-/idb-6.1.2.tgz",
@@ -2449,6 +3080,15 @@
       "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
       "dev": true
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-core-module": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
@@ -2544,6 +3184,12 @@
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "dev": true
+    },
     "loader-runner": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@@ -2616,6 +3262,12 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
+    "nanoid": {
+      "version": "3.1.25",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
+      "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
+      "dev": true
+    },
     "neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
@@ -2741,6 +3393,69 @@
       "resolved": "https://registry.npmjs.org/poll-until-promise/-/poll-until-promise-3.6.1.tgz",
       "integrity": "sha512-m9awH+xxzFJ+SI3McCO+eQl2qoTYqE9Ql50Mf0oxHzdkrhzd4XdleRsLgPRqbZMqTkAip7XGia026wbZ00y59w=="
     },
+    "postcss": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
+      "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
+      "dev": true,
+      "requires": {
+        "colorette": "^1.2.2",
+        "nanoid": "^3.1.23",
+        "source-map-js": "^0.6.2"
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
+      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -2768,6 +3483,15 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "rechoir": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
@@ -2823,6 +3547,25 @@
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
       "dev": true
     },
+    "sass": {
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.38.1.tgz",
+      "integrity": "sha512-Lj8nPaSYOuRhgqdyShV50fY5jKnvaRmikUNalMPmbH+tKMGgEKVkltI/lP30PEfO2T1t6R9yc2QIBLgOc3uaFw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.1.0.tgz",
+      "integrity": "sha512-FVJZ9kxVRYNZTIe2xhw93n3xJNYZADr+q69/s98l9nTCrWASo+DR2Ot0s5xTKQDDEosUkatsGeHxcH4QBp5bSg==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      }
+    },
     "schema-utils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
@@ -2899,6 +3642,12 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true
     },
+    "source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true
+    },
     "source-map-support": {
       "version": "0.5.19",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
@@ -2915,6 +3664,13 @@
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true
     },
+    "style-loader": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.2.1.tgz",
+      "integrity": "sha512-1k9ZosJCRFaRbY6hH49JFlRB0fVSbmnyq1iTPjNxUmGVjBNEmwrrHPenhlp+Lgo51BojHSf6pl2FcqYaN3PfVg==",
+      "dev": true,
+      "requires": {}
+    },
     "supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -2977,6 +3733,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -2995,6 +3756,12 @@
         "inherits": "2.0.3"
       }
     },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
diff --git a/package.json b/package.json
index bd3086e..aab39ac 100644
--- a/package.json
+++ b/package.json
@@ -26,14 +26,19 @@
   ],
   "devDependencies": {
     "copy-webpack-plugin": "^9.0.1",
+    "css-loader": "^6.2.0",
     "json5": "^2.2.0",
     "path": "^0.12.7",
+    "sass": "^1.38.1",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.2.1",
     "webpack": "^5.44.0",
     "webpack-cli": "^4.7.2",
     "webpack-shell-plugin-next": "^2.2.2"
   },
   "private": true,
   "dependencies": {
+    "@material/tooltip": "^12.0.0",
     "google-protobuf": "^3.18.0-rc.2",
     "grpc-web": "^1.2.1",
     "idb": "^6.1.2",
diff --git a/src/common/tooltip.js b/src/common/tooltip.js
new file mode 100644
index 0000000..6657c58
--- /dev/null
+++ b/src/common/tooltip.js
@@ -0,0 +1,62 @@
+import {MDCTooltip} from '@material/tooltip';
+
+const probCleanOrphanTooltips = 0.07;
+
+const currentTooltips = new Set();
+
+// For each tooltip, if the element which is being described by it no longer
+// exists, delete it.
+function cleanOrphanTooltips() {
+  return new Promise((res, rej) => {
+    for (const tooltip of currentTooltips) {
+      if (document.querySelector('[aria-describedby="' + tooltip.id + '"]') ===
+          null) {
+        currentTooltips.delete(tooltip);
+        tooltip.remove();
+      }
+    }
+    res();
+  });
+}
+
+export function createPlainTooltip(srcElement, label, initTooltip = true) {
+  if (srcElement.hasAttribute('aria-describedby')) {
+    let tooltip =
+        document.getElementById(srcElement.getAttribute('aria-describedby'));
+    if (tooltip !== null) tooltip.remove();
+  }
+
+  let tooltip = document.createElement('div');
+  let tooltipId;
+  do {
+    // Idea from: https://stackoverflow.com/a/44078785
+    let randomId =
+        Date.now().toString(36) + Math.random().toString(36).substring(2);
+    tooltipId = 'TWPT_tooltip_' + randomId;
+  } while (document.getElementById(tooltipId) !== null);
+  tooltip.id = tooltipId;
+  tooltip.classList.add('mdc-tooltip');
+  tooltip.setAttribute('role', 'tooltip');
+  tooltip.setAttribute('aria-hidden', 'true');
+
+  let surface = document.createElement('div');
+  surface.classList.add(
+      'mdc-tooltip__surface', 'mdc-tooltip__surface-animation');
+  surface.textContent = label;
+
+  tooltip.append(surface);
+
+  // In the Community Console we inject the tooltip into
+  // #default-acx-overlay-container, and in TW directly into the body.
+  var tooltipParent =
+      document.getElementById('default-acx-overlay-container') ?? document.body;
+  tooltipParent.append(tooltip);
+  currentTooltips.add(tooltip);
+
+  srcElement.setAttribute('aria-describedby', tooltipId);
+
+  if (Math.random() < probCleanOrphanTooltips) cleanOrphanTooltips();
+
+  if (initTooltip) return new MDCTooltip(tooltip);
+  return tooltip;
+}
diff --git a/src/contentScripts/communityConsole/autoRefresh.js b/src/contentScripts/communityConsole/autoRefresh.js
index a35a6f0..e5dc8c8 100644
--- a/src/contentScripts/communityConsole/autoRefresh.js
+++ b/src/contentScripts/communityConsole/autoRefresh.js
@@ -1,6 +1,9 @@
+import {MDCTooltip} from '@material/tooltip';
+
 import {CCApi} from '../../common/api.js';
 import {getAuthUser} from '../../common/communityConsoleUtils.js';
 import {isOptionEnabled} from '../../common/optionsUtils.js';
+import {createPlainTooltip} from '../../common/tooltip.js';
 
 import {createExtBadge} from './utils/common.js';
 
@@ -117,7 +120,8 @@
     var content = document.createElement('div');
     content.classList.add('TWPT-focus-content-wrapper');
 
-    var badge = createExtBadge();
+    let badge, badgeTooltip;
+    [badge, badgeTooltip] = createExtBadge();
 
     var message = document.createElement('div');
     message.classList.add('TWPT-message');
@@ -141,6 +145,7 @@
     snackbar.append(ac);
     pane.append(snackbar);
     document.getElementById('default-acx-overlay-container').append(pane);
+    new MDCTooltip(badgeTooltip);
     this.snackbar = snackbar;
   }
 
@@ -148,10 +153,6 @@
   createStatusIndicator(isSetUp) {
     var container = document.createElement('div');
     container.classList.add('TWPT-autorefresh-status-indicator-container');
-    var title = chrome.i18n.getMessage(
-        isSetUp ? 'inject_autorefresh_list_status_indicator_label_active' :
-                  'inject_autorefresh_list_status_indicator_label_disabled');
-    container.setAttribute('title', title);
 
     var indicator = document.createElement('div');
     indicator.classList.add(
@@ -160,19 +161,27 @@
                   'TWPT-autorefresh-status-indicator--disabled');
     indicator.textContent =
         isSetUp ? 'notifications_active' : 'notifications_off';
+    let label = chrome.i18n.getMessage(
+        isSetUp ? 'inject_autorefresh_list_status_indicator_label_active' :
+                  'inject_autorefresh_list_status_indicator_label_disabled');
+    let statusTooltip = createPlainTooltip(indicator, label, false);
 
-    var badge = createExtBadge();
+    let badge, badgeTooltip;
+    [badge, badgeTooltip] = createExtBadge();
 
     container.append(indicator, badge);
-    return container;
+    return [container, badgeTooltip, statusTooltip];
   }
 
   injectStatusIndicator(isSetUp) {
-    this.statusIndicator = this.createStatusIndicator(isSetUp);
+    let badgeTooltip, statusTooltip;
+    [this.statusIndicator, badgeTooltip, statusTooltip] = this.createStatusIndicator(isSetUp);
 
     var sortOptionsDiv = document.querySelector('ec-thread-list .sort-options');
     if (sortOptionsDiv) {
       sortOptionsDiv.prepend(this.statusIndicator);
+      new MDCTooltip(badgeTooltip);
+      new MDCTooltip(statusTooltip);
       return;
     }
 
diff --git a/src/contentScripts/communityConsole/avatars.js b/src/contentScripts/communityConsole/avatars.js
index b125a17..03d6bcb 100644
--- a/src/contentScripts/communityConsole/avatars.js
+++ b/src/contentScripts/communityConsole/avatars.js
@@ -3,6 +3,7 @@
 import {CCApi} from '../../common/api.js';
 import {parseUrl} from '../../common/commonUtils.js';
 import {isOptionEnabled} from '../../common/optionsUtils.js';
+import {createPlainTooltip} from '../../common/tooltip.js';
 
 import AvatarsDB from './utils/AvatarsDB.js'
 
@@ -322,14 +323,12 @@
 
           var avatarUrls = res.avatars;
 
+          let singleAvatar;
           if (res.state == 'private') {
-            var avatar = document.createElement('div');
-            avatar.classList.add('TWPT-avatar-private-placeholder');
-            avatar.textContent = 'person_off';
-            var label = chrome.i18n.getMessage(
-                'inject_threadlistavatars_private_thread_indicator_label');
-            avatar.setAttribute('title', label);
-            avatarsContainer.appendChild(avatar);
+            singleAvatar = document.createElement('div');
+            singleAvatar.classList.add('TWPT-avatar-private-placeholder');
+            singleAvatar.textContent = 'person_off';
+            avatarsContainer.appendChild(singleAvatar);
           } else {
             for (var i = 0; i < avatarUrls.length; ++i) {
               var avatar = document.createElement('div');
@@ -340,6 +339,12 @@
           }
 
           header.appendChild(avatarsContainer);
+
+          if (res.state == 'private') {
+            var label = chrome.i18n.getMessage(
+                'inject_threadlistavatars_private_thread_indicator_label');
+            createPlainTooltip(singleAvatar, label);
+          }
         })
         .catch(err => {
           console.error(
diff --git a/src/contentScripts/communityConsole/batchLock.js b/src/contentScripts/communityConsole/batchLock.js
index 20af6df..11b133a 100644
--- a/src/contentScripts/communityConsole/batchLock.js
+++ b/src/contentScripts/communityConsole/batchLock.js
@@ -1,4 +1,7 @@
+import {MDCTooltip} from '@material/tooltip';
+
 import {isOptionEnabled} from '../../common/optionsUtils.js';
+import {createPlainTooltip} from '../../common/tooltip.js';
 
 import {createExtBadge, removeChildNodes} from './utils/common.js';
 
@@ -118,11 +121,11 @@
     var clone = readToggle.cloneNode(true);
     clone.setAttribute('debugid', 'batchlock');
     clone.classList.add('TWPT-btn--with-badge');
-    clone.setAttribute('title', chrome.i18n.getMessage('inject_lockbtn'));
     clone.querySelector('material-icon').setAttribute('icon', 'lock');
     clone.querySelector('i.material-icon-i').textContent = 'lock';
 
-    var badge = createExtBadge();
+    let badge, badgeTooltip;
+    [badge, badgeTooltip] = createExtBadge();
     clone.append(badge);
 
     clone.addEventListener('click', () => {
@@ -137,6 +140,9 @@
     else
       readToggle.parentNode.insertBefore(
           clone, (readToggle.nextSibling || readToggle));
+
+    createPlainTooltip(clone, chrome.i18n.getMessage('inject_lockbtn'));
+    new MDCTooltip(badgeTooltip);
   },
   addButtonIfEnabled(readToggle) {
     isOptionEnabled('batchlock').then(isEnabled => {
diff --git a/src/contentScripts/communityConsole/darkMode.js b/src/contentScripts/communityConsole/darkMode.js
index d357bad..1b6c751 100644
--- a/src/contentScripts/communityConsole/darkMode.js
+++ b/src/contentScripts/communityConsole/darkMode.js
@@ -1,11 +1,13 @@
+import {MDCTooltip} from '@material/tooltip';
+
+import {createPlainTooltip} from '../../common/tooltip.js';
+
 import {createExtBadge} from './utils/common.js';
 
 export function injectDarkModeButton(rightControl, previousDarkModeOption) {
   var darkThemeSwitch = document.createElement('material-button');
   darkThemeSwitch.classList.add('TWPT-dark-theme', 'TWPT-btn--with-badge');
   darkThemeSwitch.setAttribute('button', '');
-  darkThemeSwitch.setAttribute(
-      'title', chrome.i18n.getMessage('inject_ccdarktheme_helper'));
 
   darkThemeSwitch.addEventListener('click', e => {
     chrome.storage.sync.get(null, currentOptions => {
@@ -29,13 +31,18 @@
   switchContent.appendChild(icon);
   darkThemeSwitch.appendChild(switchContent);
 
-  var badgeContent = createExtBadge();
+  let badgeContent, badgeTooltip;
+  [badgeContent, badgeTooltip] = createExtBadge();
 
   darkThemeSwitch.appendChild(badgeContent);
 
   rightControl.style.width =
       (parseInt(window.getComputedStyle(rightControl).width) + 58) + 'px';
   rightControl.insertAdjacentElement('afterbegin', darkThemeSwitch);
+
+  createPlainTooltip(
+      switchContent, chrome.i18n.getMessage('inject_ccdarktheme_helper'));
+  new MDCTooltip(badgeTooltip);
 }
 
 export function isDarkThemeOn(options) {
diff --git a/src/contentScripts/communityConsole/profileHistoryLink.js b/src/contentScripts/communityConsole/profileHistoryLink.js
index 7f2dbd7..7f06b3e 100644
--- a/src/contentScripts/communityConsole/profileHistoryLink.js
+++ b/src/contentScripts/communityConsole/profileHistoryLink.js
@@ -46,7 +46,8 @@
   var container = document.createElement('div');
   container.classList.add('TWPT-previous-posts');
 
-  var badge = createExtBadge();
+  let badge, badgeTooltip;
+  [badge, badgeTooltip] = createExtBadge();
   container.appendChild(badge);
 
   var linkContainer = document.createElement('div');
@@ -58,6 +59,7 @@
   container.appendChild(linkContainer);
 
   mainCardContent.appendChild(container);
+  new MDCTooltip(badgeTooltip);
 }
 
 export function injectPreviousPostsLinksIfEnabled(nameElement) {
diff --git a/src/contentScripts/communityConsole/utils/common.js b/src/contentScripts/communityConsole/utils/common.js
index ca452b3..67a8768 100644
--- a/src/contentScripts/communityConsole/utils/common.js
+++ b/src/contentScripts/communityConsole/utils/common.js
@@ -1,3 +1,5 @@
+import {createPlainTooltip} from '../../../common/tooltip.js';
+
 export function removeChildNodes(node) {
   while (node.firstChild) {
     node.removeChild(node.firstChild);
@@ -11,17 +13,18 @@
 }
 
 export function createExtBadge() {
-  var badge = document.createElement('div');
+  let badge = document.createElement('div');
   badge.classList.add('TWPT-badge');
-  badge.setAttribute(
-      'title', chrome.i18n.getMessage('inject_extension_badge_helper', [
-        chrome.i18n.getMessage('appName')
-      ]));
+  let badgeTooltip = createPlainTooltip(
+      badge,
+      chrome.i18n.getMessage(
+          'inject_extension_badge_helper', [chrome.i18n.getMessage('appName')]),
+      false);
 
-  var badgeI = document.createElement('i');
+  let badgeI = document.createElement('i');
   badgeI.classList.add('material-icon-i', 'material-icons-extended');
   badgeI.textContent = 'repeat';
 
   badge.append(badgeI);
-  return badge;
+  return [badge, badgeTooltip];
 }
diff --git a/src/contentScripts/profile.js b/src/contentScripts/profile.js
index 7bd6916..0bb1a7d 100644
--- a/src/contentScripts/profile.js
+++ b/src/contentScripts/profile.js
@@ -1,5 +1,6 @@
 import {escapeUsername} from '../common/communityConsoleUtils.js';
 import {getOptions} from '../common/optionsUtils.js';
+import {createPlainTooltip} from '../common/tooltip.js';
 
 import {getSearchUrl, injectPreviousPostsLinksUnifiedProfile} from './utilsCommon/unifiedProfiles.js';
 
@@ -51,10 +52,6 @@
 
       var badge = document.createElement('span');
       badge.classList.add('TWPT-badge');
-      badge.setAttribute(
-          'title', chrome.i18n.getMessage('inject_extension_badge_helper', [
-            chrome.i18n.getMessage('appName')
-          ]));
 
       var badgeImg = document.createElement('img');
       badgeImg.src =
@@ -73,6 +70,11 @@
 
       document.querySelector('.user-profile__user-details-container')
           .appendChild(links);
+
+      createPlainTooltip(
+          badge, chrome.i18n.getMessage('inject_extension_badge_helper', [
+            chrome.i18n.getMessage('appName')
+          ]));
     } else {
       console.error('[previousposts] Can\'t find username.');
     }
diff --git a/src/contentScripts/utilsCommon/unifiedProfiles.js b/src/contentScripts/utilsCommon/unifiedProfiles.js
index d3995ea..82bc9c3 100644
--- a/src/contentScripts/utilsCommon/unifiedProfiles.js
+++ b/src/contentScripts/utilsCommon/unifiedProfiles.js
@@ -1,5 +1,8 @@
+import {MDCTooltip} from '@material/tooltip';
+
 import {escapeUsername} from '../../common/communityConsoleUtils.js';
 import {isOptionEnabled} from '../../common/optionsUtils.js';
+import {createPlainTooltip} from '../../common/tooltip.js';
 import {createExtBadge} from '../communityConsole/utils/common.js';
 
 var authuser = (new URL(location.href)).searchParams.get('authuser') || '0';
@@ -34,16 +37,12 @@
   a.setAttribute(
       'data-stats-id', 'user-posts-link--tw-power-tools-by-avm99963');
 
-  let badge;
+  let badge, badgeTooltip;
   if (isCommunityConsole) {
-    badge = createExtBadge();
+    [badge, badgeTooltip] = createExtBadge();
   } else {
     badge = document.createElement('span');
     badge.classList.add('TWPT-badge');
-    badge.setAttribute(
-        'title', chrome.i18n.getMessage('inject_extension_badge_helper', [
-          chrome.i18n.getMessage('appName')
-        ]));
 
     var badgeImg = document.createElement('img');
     badgeImg.src =
@@ -68,9 +67,18 @@
   }
 
   userDetailsNode.parentNode.insertBefore(links, userDetailsNode.nextSibling);
+
+  if (isCommunityConsole)
+    new MDCTooltip(badgeTooltip);
+  else
+    createPlainTooltip(
+        badge, chrome.i18n.getMessage('inject_extension_badge_helper', [
+          chrome.i18n.getMessage('appName')
+        ]));
 }
 
-export function injectPreviousPostsLinksUnifiedProfileIfEnabled(isCommunityConsole) {
+export function injectPreviousPostsLinksUnifiedProfileIfEnabled(
+    isCommunityConsole) {
   isOptionEnabled('history').then(isEnabled => {
     if (isEnabled) injectPreviousPostsLinksUnifiedProfile(isCommunityConsole);
   });
diff --git a/src/injections/profileIndicator.js b/src/injections/profileIndicator.js
index 3b07089..94ce943 100644
--- a/src/injections/profileIndicator.js
+++ b/src/injections/profileIndicator.js
@@ -1,5 +1,6 @@
 import {CCApi} from '../common/api.js';
 import {escapeUsername} from '../common/communityConsoleUtils.js';
+import {createPlainTooltip} from '../common/tooltip.js';
 
 var CCProfileRegex =
     /^(?:https:\/\/support\.google\.com)?\/s\/community(?:\/forum\/[0-9]*)?\/user\/(?:[0-9]+)$/;
@@ -108,12 +109,6 @@
   if (options.numPosts) return document.querySelector('.num-posts-indicator');
   var dotContainer = document.createElement('div');
   dotContainer.classList.add('profile-indicator', 'profile-indicator--loading');
-  contentScriptRequest
-      .sendRequest({
-        'action': 'geti18nMessage',
-        'msg': 'inject_profileindicator_loading'
-      })
-      .then(string => dotContainer.setAttribute('title', string));
 
   var dotLink = document.createElement('a');
   dotLink.href = searchURL;
@@ -122,6 +117,13 @@
   dotContainer.appendChild(dotLink);
   sourceNode.parentNode.appendChild(dotContainer);
 
+  contentScriptRequest
+      .sendRequest({
+        'action': 'geti18nMessage',
+        'msg': 'inject_profileindicator_loading'
+      })
+      .then(string => createPlainTooltip(dotContainer, string));
+
   return dotContainer;
 }
 
@@ -133,12 +135,6 @@
   var numPostsContainer = document.createElement('div');
   numPostsContainer.classList.add(
       'num-posts-indicator', 'num-posts-indicator--loading');
-  contentScriptRequest
-      .sendRequest({
-        'action': 'geti18nMessage',
-        'msg': 'inject_profileindicator_loading'
-      })
-      .then(string => numPostsContainer.setAttribute('title', string));
 
   var numPostsSpan = document.createElement('span');
   numPostsSpan.classList.add('num-posts-indicator--num');
@@ -146,6 +142,14 @@
   numPostsContainer.appendChild(numPostsSpan);
   link.appendChild(numPostsContainer);
   sourceNode.parentNode.appendChild(link);
+
+  contentScriptRequest
+      .sendRequest({
+        'action': 'geti18nMessage',
+        'msg': 'inject_profileindicator_loading'
+      })
+      .then(string => createPlainTooltip(numPostsContainer, string));
+
   return numPostsContainer;
 }
 
@@ -235,7 +239,7 @@
                       })
                       .then(
                           string =>
-                              numPostsContainer.setAttribute('title', string));
+                              createPlainTooltip(numPostsContainer, string));
 
                 var numPosts = 0;
 
@@ -319,7 +323,7 @@
                 'action': 'geti18nMessage',
                 'msg': 'inject_profileindicator_' + OPi18n[OPStatus]
               })
-              .then(string => dotContainer.setAttribute('title', string));
+              .then(string => createPlainTooltip(dotContainer, string));
         })
         .catch(
             err => console.error(
diff --git a/src/mdc/index.js b/src/mdc/index.js
new file mode 100644
index 0000000..e39aaa1
--- /dev/null
+++ b/src/mdc/index.js
@@ -0,0 +1 @@
+import './styles.scss';
diff --git a/src/mdc/styles.scss b/src/mdc/styles.scss
new file mode 100644
index 0000000..22ecb8d
--- /dev/null
+++ b/src/mdc/styles.scss
@@ -0,0 +1 @@
+@use "@material/tooltip/styles";
diff --git a/src/static/css/autorefresh_list.css b/src/static/css/autorefresh_list.css
index a12540b..3dcf0c6 100644
--- a/src/static/css/autorefresh_list.css
+++ b/src/static/css/autorefresh_list.css
@@ -87,7 +87,6 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  cursor: help;
 }
 
 .TWPT-autorefresh-status-indicator {
@@ -101,6 +100,7 @@
   font-size: 17px;
   line-height: 24px;
   user-select: none;
+  cursor: help;
 }
 
 .TWPT-autorefresh-status-indicator--active {
diff --git a/templates/manifest.gjson b/templates/manifest.gjson
index 7645800..836cecf 100644
--- a/templates/manifest.gjson
+++ b/templates/manifest.gjson
@@ -18,7 +18,7 @@
   "content_scripts": [
     {
       "matches": ["https://support.google.com/s/community*"],
-      "js": ["communityConsoleMain.bundle.js"]
+      "js": ["communityConsoleMain.bundle.js", "mdcStyles.bundle.js"]
     },
     {
       "matches": ["https://support.google.com/s/community*"],
@@ -28,12 +28,12 @@
     },
     {
       "matches": ["https://support.google.com/*/threads*"],
-      "js": ["publicForum.bundle.js"]
+      "js": ["publicForum.bundle.js", "mdcStyles.bundle.js"]
     },
     {
       "matches": ["https://support.google.com/*/thread/*"],
       "exclude_matches": ["https://support.google.com/s/community*", "https://support.google.com/*/thread/new*"],
-      "js": ["publicThread.bundle.js"],
+      "js": ["publicThread.bundle.js", "mdcStyles.bundle.js"],
       "run_at": "document_end"
     },
     {
@@ -44,7 +44,7 @@
     {
       "matches": ["https://support.google.com/*/profile/*", "https://support.google.com/profile/*"],
       "all_frames": true,
-      "js": ["profile.bundle.js"],
+      "js": ["profile.bundle.js", "mdcStyles.bundle.js"],
       "css": ["css/common/forum.css", "css/unifiedprofile.css"]
     }
   ],
diff --git a/webpack.config.js b/webpack.config.js
index d407ba1..5b897dc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -46,6 +46,9 @@
 
     // Options page
     optionsCommon: './src/options/optionsCommon.js',
+
+    // Common CSS
+    mdcStyles: './src/mdc/index.js',
   };
 
   // Background script (or service worker for MV3)
@@ -98,12 +101,26 @@
     module: {
       rules: [
         {
-          test: /\.json5$/,
+          test: /\.json5$/i,
           type: 'json',
           parser: {
             parse: json5.parse,
           },
         },
+        {
+          test: /\.s[ac]ss$/i,
+          use: [
+            'style-loader',
+            'css-loader',
+            {
+              loader: 'sass-loader',
+              options: {
+                // Prefer `dart-sass`
+                implementation: require('sass'),
+              },
+            },
+          ],
+        },
       ]
     },
   };