diff --git a/angular.json b/angular.json
index d863f759..d87118ac 100644
--- a/angular.json
+++ b/angular.json
@@ -7,7 +7,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "less"
+          "style": "scss"
         }
       },
       "root": "",
@@ -19,6 +19,7 @@
           "options": {
             "outputPath": "dist/timeline-tools",
             "index": "src/index.html",
+            "inlineStyleLanguage": "scss",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
@@ -27,7 +28,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.less"
+              "src/m3-theme.scss",
+              "src/styles.scss"
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
@@ -94,6 +96,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
+            "inlineStyleLanguage": "scss",
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
@@ -103,7 +106,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.less"
+              "src/m3-theme.scss",
+              "src/styles.scss"
             ],
             "scripts": []
           }
diff --git a/package.json b/package.json
index 4b31bd48..d4192e71 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@angular-eslint/builder": "^18.3.0",
     "@angular-eslint/eslint-plugin": "^18.3.0",
     "@angular-eslint/eslint-plugin-template": "^18.3.0",
+    "@angular-eslint/schematics": "^18.3.0",
     "@angular-eslint/template-parser": "^18.3.0",
     "@angular/cli": "^18.2.3",
     "@angular/compiler-cli": "18.2.3",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8f4ccb94..7a09403a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -29,22 +29,36 @@
         </button>
         <ol class="pagination">
           <li>
-            <div class="popover over previous-collection-title" *ngIf="uniqueCollections[i - 1]"><div>{{uniqueCollections[i - 1].title}}</div></div>
-            <button (click)="toggleExpandCollection(uniqueCollections[i - 1])" class="button-previous-collection" mat-button [disabled]="!uniqueCollections[i - 1]">
+            <button
+              (click)="toggleExpandCollection(uniqueCollections[i - 1])"
+              class="button-previous-collection"
+              mat-button
+              [disabled]="!uniqueCollections[i - 1]"
+              matTooltip="{{uniqueCollections[i - 1]?.title}}"
+            >
               <mat-icon>arrow_backward</mat-icon>
             </button>
           </li><!--
           --><li>
-            <div class="popover over next-collection-title" *ngIf="uniqueCollections[i + 1]"><div>{{uniqueCollections[i + 1].title}}</div></div>
-            <button (click)="toggleExpandCollection(uniqueCollections[i + 1])" class="button-next-collection" mat-button [disabled]="!uniqueCollections[i + 1]">
+            <button
+              (click)="toggleExpandCollection(uniqueCollections[i + 1])"
+              class="button-next-collection"
+              mat-button
+              [disabled]="!uniqueCollections[i + 1]"
+              matTooltip="{{uniqueCollections[i + 1]?.title}}"
+            >
               <mat-icon>arrow_forward</mat-icon>
             </button>
           </li>
         </ol>
       </div>
       <div class="expanded-panel" *ngIf="collection.id === expandedCollectionId">
-        <button (click)="toggleExpandCollection()" class="right-aligned-button" mat-mini-fab>
-          <div class="popover"><div>Close this panel</div></div>
+        <button
+          (click)="toggleExpandCollection()"
+          class="right-aligned-button"
+          mat-mini-fab
+          matTooltip="Close this panel"
+        >
           <mat-icon>close</mat-icon>
         </button>
         <div class="title">{{collection.title}}</div>
@@ -52,8 +66,10 @@
         <div class="collection-comics">
           <ol>
             <li *ngFor="let comic of collection.allCollectionComics; trackBy: trackByItemId">
-              <div class="popover"><div>{{comic.series}} #{{comic.issue}}</div></div>
-              <button (click)="toggleExpandComic(comic, true)">
+              <button
+                (click)="toggleExpandComic(comic, true)"
+                matTooltip="{{comic.series}} #{{comic.issue}}"
+              >
                 <img [src]="'assets/covers/' + comic.image + '.jpg'">
               </button>
             </li>
@@ -88,10 +104,9 @@
 <ol class="comics-container">
   <li *ngFor="let comic of (isShowReadingOrder ? comicsInReadingOrder : comics); trackBy: trackByItemId" class="comic-container" [ngStyle]="comic.containerStyles">
     <div class="scroll-anchor" id="scroll-anchor-{{comic.idSanitized}}"></div>
-    <div class="popover"><div>#{{comic.issue}}</div></div>
     <div class="comic" [ngStyle]="comic.styles" [ngClass]="getComicClasses(comic)">
       <div class="panel-left">
-        <button (click)="toggleExpandComic(comic)" class="cover-thumbnail" id="expand-{{comic.idSanitized}}">
+        <button (click)="toggleExpandComic(comic)" class="cover-thumbnail" id="expand-{{comic.idSanitized}}" matTooltip="#{{comic.issue}}">
           <img
             *ngIf="comic.visible"
             [src]="'assets/covers/' + comic.image + '.jpg'"
@@ -163,15 +178,11 @@
         </ol>
       </div>
       <div class="expanded-panel">
-        <button *ngIf="!isMobile" (click)="toggleExpandComic()" class="right-aligned-button" mat-mini-fab>
-          <div class="popover"><div>Close this panel</div></div>
+        <button *ngIf="!isMobile" (click)="toggleExpandComic()" class="right-aligned-button" mat-mini-fab matTooltip="Close this panel">
           <mat-icon>close</mat-icon>
         </button>
-        <a *ngIf="!isMobile" [ngClass]="{disabled: !expandedComic.link}" class="marvel-unlimited-link" [href]="expandedComic.link">
-          <div class="popover"><div>Open in Marvel Unlimited</div></div>
-        </a>
-        <button *ngIf="!isMobile" (click)="scrollToComic(expandedComic.id)" class="right-aligned-button" mat-mini-fab>
-          <div class="popover"><div>Scroll to this comic</div></div>
+        <a *ngIf="!isMobile" [ngClass]="{disabled: !expandedComic.link}" class="marvel-unlimited-link" [href]="expandedComic.link" matTooltip="Open in Marvel Unlimited"></a>
+        <button *ngIf="!isMobile" (click)="scrollToComic(expandedComic.id)" class="right-aligned-button" mat-mini-fab matTooltip="Scroll to this comic">
           <mat-icon>near_me</mat-icon>
         </button>
         <div class="series">
@@ -182,8 +193,7 @@
         <div class="collection-comics" *ngIf="!isMobile">
           <div class="collection-title">{{expandedComic.collection.title}}:</div>
           <ol>
-            <li *ngFor="let collectionComic of expandedComic.collection.allCollectionComics; trackBy: trackByItemId">
-              <div class="popover"><div>{{collectionComic.series}} #{{collectionComic.issue}}</div></div>
+            <li *ngFor="let collectionComic of expandedComic.collection.allCollectionComics; trackBy: trackByItemId" matTooltip="{{collectionComic.series}} #{{collectionComic.issue}}">
               <button (click)="toggleExpandComic(collectionComic)">
                 <img
                   [ngClass]="{current: collectionComic.id === expandedComicId}"
@@ -198,8 +208,7 @@
         <div class="collection-comics">
           <div class="collection-title">{{expandedComic.collection.title}}:</div>
           <ol>
-            <li *ngFor="let collectionComic of expandedComic.collection.allCollectionComics; trackBy: trackByItemId">
-              <div class="popover"><div>{{collectionComic.series}} #{{collectionComic.issue}}</div></div>
+            <li *ngFor="let collectionComic of expandedComic.collection.allCollectionComics; trackBy: trackByItemId" matTooltip="{{collectionComic.series}} #{{collectionComic.issue}}">
               <button (click)="toggleExpandComic(collectionComic)">
                 <img
                   [ngClass]="{current: collectionComic.id === expandedComicId}"
diff --git a/src/index.html b/src/index.html
index 3b6f48c7..5adc38c3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>
-  <body>
+  <body class="mat-app-background">
     <app-root></app-root>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <!-- Matomo -->
diff --git a/src/m3-theme.scss b/src/m3-theme.scss
new file mode 100644
index 00000000..f3f450c4
--- /dev/null
+++ b/src/m3-theme.scss
@@ -0,0 +1,151 @@
+// This file was generated by running 'ng generate @angular/material:m3-theme'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #e62429
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #410003,
+    20: #690007,
+    25: #7d000a,
+    30: #93000e,
+    35: #a90012,
+    40: #c00016,
+    50: #e72529,
+    60: #ff544c,
+    70: #ff897f,
+    80: #ffb4ac,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #410003,
+    20: #680007,
+    25: #790f11,
+    30: #891c1b,
+    35: #9a2825,
+    40: #aa342f,
+    50: #cb4d45,
+    60: #ed655c,
+    70: #ff897f,
+    80: #ffb4ac,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #2c1600,
+    20: #492900,
+    25: #593200,
+    30: #683c00,
+    35: #794700,
+    40: #895100,
+    50: #ac6701,
+    60: #cb8022,
+    70: #ea9a3c,
+    80: #ffb86d,
+    90: #ffdcbd,
+    95: #ffeee0,
+    98: #fff8f4,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #291715,
+    20: #402b29,
+    25: #4c3634,
+    30: #58413f,
+    35: #644d4a,
+    40: #715856,
+    50: #8b716e,
+    60: #a78a87,
+    70: #c2a4a1,
+    80: #dfbfbc,
+    90: #fcdbd7,
+    95: #ffedea,
+    98: hsl(216, 8%, 80%), // customised for background color
+    99: #fffbff,
+    100: #ffffff,
+    4: #190a08,
+    6: hsl(216, 8%, 25%), // customised for background color
+    12: #2d1b19,
+    17: #392523,
+    22: #44302d,
+    24: #493432,
+    87: #f4d3cf,
+    92: #ffe2de,
+    94: #ffe9e6,
+    96: #fff0ef,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #2c1513,
+    20: #442927,
+    25: #503431,
+    30: #5d3f3c,
+    35: #6a4b47,
+    40: #775653,
+    50: #926f6b,
+    60: #ad8884,
+    70: #caa29e,
+    80: #e7bdb8,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+$light-theme: mat.define-theme((
+  color: (
+    theme-type: light,
+    primary: $_primary,
+    tertiary: $_tertiary,
+  ),
+));
+$dark-theme: mat.define-theme((
+  color: (
+    theme-type: dark,
+    primary: $_primary,
+    tertiary: $_tertiary,
+  ),
+));
\ No newline at end of file
diff --git a/src/styles.less b/src/styles.scss
similarity index 92%
rename from src/styles.less
rename to src/styles.scss
index c4569ff6..f010ed4a 100644
--- a/src/styles.less
+++ b/src/styles.scss
@@ -1,7 +1,21 @@
 /* You can add global styles to this file, and also import other style files */
 
-@import '~normalize.css';
-@import '@angular/material/prebuilt-themes/azure-blue.css';
+@use '@angular/material' as mat;
+@use './m3-theme';
+
+@include mat.core();
+
+html {
+  // Apply the light theme by default
+  @include mat.all-component-themes(m3-theme.$dark-theme);
+
+  // Apply the light theme only when the user prefers light themes.
+  @media (prefers-color-scheme: light) {
+    // Use the `-color` mixins to only apply color styles without reapplying the same
+    // typography and density styles.
+    @include mat.all-component-themes(m3-theme.$light-theme);
+  }
+}
 
 :root {
   --month-width: 55px;
@@ -42,7 +56,6 @@ body.search-is-open {
 
 .year {
   display: inline-block;
-  color: #ccc;
 
   &> span {
     position: sticky;
@@ -83,38 +96,6 @@ body.search-is-open {
   pointer-events: none;
 }
 
-.popover {
-  display: inline-block;
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  top: 90%;
-  left: 50%;
-  transform: translate(-50%);
-  overflow: visible;
-  transition: top 0.3s, visibility 0.2s, opacity 0.2s;
-  min-width: 130px;
-  text-align: center;
-  line-height: 1.5;
-}
-
-.popover.over {
-  bottom: 90%;
-  top: auto;
-  transition: bottom 0.3s, visibility 0.2s, opacity 0.2s;
-}
-
-*:hover > .popover {
-  visibility: visible;
-  opacity: 1;
-  top: calc(100% + 5px);
-}
-
-*:hover > .popover.over {
-  top: auto;
-  bottom: calc(100% + 15px);
-}
-
 .floating-menu {
   position: fixed !important;
   right: 20px;
@@ -128,13 +109,7 @@ li:hover,
   z-index: 1;
 }
 
-.expanded > .popover {
-  display: none;
-}
-
-.tooltip-inner,
-.series-volume-label,
-.popover > div {
+.series-volume-label {
   background-color: #222;
   color: #ccc;
   padding: 5px 8px;
@@ -142,11 +117,6 @@ li:hover,
   font-size: 12px;
 }
 
-.popover > div {
-  max-width: 130px;
-  display: inline-block;
-}
-
 .series-volume-label {
   display: inline-block;
   position: sticky;
diff --git a/yarn.lock b/yarn.lock
index f77753af..5d7c244b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -221,7 +221,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@angular-eslint/eslint-plugin-template@npm:^18.3.0":
+"@angular-eslint/eslint-plugin-template@npm:18.3.0, @angular-eslint/eslint-plugin-template@npm:^18.3.0":
   version: 18.3.0
   resolution: "@angular-eslint/eslint-plugin-template@npm:18.3.0"
   dependencies:
@@ -237,7 +237,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@angular-eslint/eslint-plugin@npm:^18.3.0":
+"@angular-eslint/eslint-plugin@npm:18.3.0, @angular-eslint/eslint-plugin@npm:^18.3.0":
   version: 18.3.0
   resolution: "@angular-eslint/eslint-plugin@npm:18.3.0"
   dependencies:
@@ -251,6 +251,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@angular-eslint/schematics@npm:^18.3.0":
+  version: 18.3.0
+  resolution: "@angular-eslint/schematics@npm:18.3.0"
+  dependencies:
+    "@angular-eslint/eslint-plugin": "npm:18.3.0"
+    "@angular-eslint/eslint-plugin-template": "npm:18.3.0"
+    ignore: "npm:5.3.2"
+    semver: "npm:7.6.3"
+    strip-json-comments: "npm:3.1.1"
+  peerDependencies:
+    "@angular-devkit/core": ">= 18.0.0 < 19.0.0"
+    "@angular-devkit/schematics": ">= 18.0.0 < 19.0.0"
+  checksum: 10/2dd32c7d250a605ed95266f084ea6a6253c3a62158c34ee375a74248273be44e8457b320d28136cfb69993a9affd02040cce964981f7fefb65846d609a1b725d
+  languageName: node
+  linkType: hard
+
 "@angular-eslint/template-parser@npm:^18.3.0":
   version: 18.3.0
   resolution: "@angular-eslint/template-parser@npm:18.3.0"
@@ -6766,6 +6782,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore@npm:5.3.2":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10/cceb6a457000f8f6a50e1196429750d782afce5680dd878aa4221bd79972d68b3a55b4b1458fc682be978f4d3c6a249046aa0880637367216444ab7b014cfc98
+  languageName: node
+  linkType: hard
+
 "ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
   version: 5.3.1
   resolution: "ignore@npm:5.3.1"
@@ -10117,7 +10140,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-json-comments@npm:^3.1.1":
+"strip-json-comments@npm:3.1.1, strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
   checksum: 10/492f73e27268f9b1c122733f28ecb0e7e8d8a531a6662efbd08e22cccb3f9475e90a1b82cab06a392f6afae6d2de636f977e231296400d0ec5304ba70f166443
@@ -10267,6 +10290,7 @@ __metadata:
     "@angular-eslint/builder": "npm:^18.3.0"
     "@angular-eslint/eslint-plugin": "npm:^18.3.0"
     "@angular-eslint/eslint-plugin-template": "npm:^18.3.0"
+    "@angular-eslint/schematics": "npm:^18.3.0"
     "@angular-eslint/template-parser": "npm:^18.3.0"
     "@angular/animations": "npm:18.2.3"
     "@angular/cdk": "npm:^18.2.3"