diff --git a/index.html b/index.html
index 6d68aa3..6edcf35 100644
--- a/index.html
+++ b/index.html
@@ -8,31 +8,24 @@
 
   <base href="/" />
 
-  <!-- This meta viewport ensures the webpage's dimensions change according to the device it's on. This is called Responsive Web Design.-->
   <meta name="viewport"
     content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
   <meta name="description" content="An interval timer" />
   <meta name="theme-color" content="#000000" />
 
-  <!-- These meta tags are Apple-specific, and set the web application to run in full-screen mode with a black status bar. Learn more at https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-title" content="Trainterval" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
-  <!-- Imports an icon to represent the document. -->
   <link rel="icon" href="/assets/icons/24x24-icon.png" type="image/x-icon" />
 
-  <!-- Imports the manifest to represent the web application. A web app must have a manifest to be a PWA. -->
   <link rel="manifest" href="/manifest.json" />
 
   <script type="module" src="/src/app-index.ts"></script>
 </head>
 
 <body>
-  <!-- Our app-index web component. This component is defined in src/pages/app-index.ts-->
-  <fluent-design-system-provider>
-    <app-index></app-index>
-  </fluent-design-system-provider>
+  <app-index></app-index>
 
   <script>
     if ('serviceWorker' in navigator) {
diff --git a/package-lock.json b/package-lock.json
index 5ea6f69..2e1bbdc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "0.0.1",
       "license": "ISC",
       "dependencies": {
-        "@fluentui/web-components": "^2.5.16",
         "@vaadin/router": "^1.7.5",
         "idb": "^8.0.0",
         "lit": "^3.1.0",
@@ -1982,18 +1981,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@fluentui/web-components": {
-      "version": "2.5.16",
-      "resolved": "https://registry.npmjs.org/@fluentui/web-components/-/web-components-2.5.16.tgz",
-      "integrity": "sha512-Ur+DziCm2FtvQoRjx62DH069uTz/HTq0gk9uKmW8K7bmxCS7fYYpV9GFEnK7QdEbdRHyUINE3uFfLEcL6IY3Xg==",
-      "dependencies": {
-        "@microsoft/fast-colors": "^5.3.0",
-        "@microsoft/fast-element": "^1.11.1",
-        "@microsoft/fast-foundation": "^2.48.1",
-        "@microsoft/fast-web-utilities": "^5.4.0",
-        "tslib": "^2.1.0"
-      }
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -2113,40 +2100,6 @@
         "@lit-labs/ssr-dom-shim": "^1.1.2-pre.0"
       }
     },
-    "node_modules/@microsoft/fast-colors": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-colors/-/fast-colors-5.3.1.tgz",
-      "integrity": "sha512-72RZXVfCbwQzvo5sXXkuLXLT7rMeYaSf5r/6ewQiv/trBtqpWRm4DEH2EilHw/iWTBKOXs1qZNQndgUMa5n4LA=="
-    },
-    "node_modules/@microsoft/fast-element": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.12.0.tgz",
-      "integrity": "sha512-gQutuDHPKNxUEcQ4pypZT4Wmrbapus+P9s3bR/SEOLsMbNqNoXigGImITygI5zhb+aA5rzflM6O8YWkmRbGkPA=="
-    },
-    "node_modules/@microsoft/fast-foundation": {
-      "version": "2.49.2",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.49.2.tgz",
-      "integrity": "sha512-xA7WP/Td33SW0zkpHRH5LUDxyLOPnPQQXieRxc080uLWxoGXhVxo6Rz7b6qwiL+e2IadNCm7X7KcrgsUhJwvBg==",
-      "dependencies": {
-        "@microsoft/fast-element": "^1.12.0",
-        "@microsoft/fast-web-utilities": "^5.4.1",
-        "tabbable": "^5.2.0",
-        "tslib": "^1.13.0"
-      }
-    },
-    "node_modules/@microsoft/fast-foundation/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
-    "node_modules/@microsoft/fast-web-utilities": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz",
-      "integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==",
-      "dependencies": {
-        "exenv-es6": "^1.1.1"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4141,11 +4094,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/exenv-es6": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz",
-      "integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ=="
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -6393,11 +6341,6 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
-    "node_modules/tabbable": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
-      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
-    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -6548,11 +6491,6 @@
         "typescript": ">=4.2.0"
       }
     },
-    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -8628,18 +8566,6 @@
       "integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
       "dev": true
     },
-    "@fluentui/web-components": {
-      "version": "2.5.16",
-      "resolved": "https://registry.npmjs.org/@fluentui/web-components/-/web-components-2.5.16.tgz",
-      "integrity": "sha512-Ur+DziCm2FtvQoRjx62DH069uTz/HTq0gk9uKmW8K7bmxCS7fYYpV9GFEnK7QdEbdRHyUINE3uFfLEcL6IY3Xg==",
-      "requires": {
-        "@microsoft/fast-colors": "^5.3.0",
-        "@microsoft/fast-element": "^1.11.1",
-        "@microsoft/fast-foundation": "^2.48.1",
-        "@microsoft/fast-web-utilities": "^5.4.0",
-        "tslib": "^2.1.0"
-      }
-    },
     "@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -8734,42 +8660,6 @@
         "@lit-labs/ssr-dom-shim": "^1.1.2-pre.0"
       }
     },
-    "@microsoft/fast-colors": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-colors/-/fast-colors-5.3.1.tgz",
-      "integrity": "sha512-72RZXVfCbwQzvo5sXXkuLXLT7rMeYaSf5r/6ewQiv/trBtqpWRm4DEH2EilHw/iWTBKOXs1qZNQndgUMa5n4LA=="
-    },
-    "@microsoft/fast-element": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.12.0.tgz",
-      "integrity": "sha512-gQutuDHPKNxUEcQ4pypZT4Wmrbapus+P9s3bR/SEOLsMbNqNoXigGImITygI5zhb+aA5rzflM6O8YWkmRbGkPA=="
-    },
-    "@microsoft/fast-foundation": {
-      "version": "2.49.2",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.49.2.tgz",
-      "integrity": "sha512-xA7WP/Td33SW0zkpHRH5LUDxyLOPnPQQXieRxc080uLWxoGXhVxo6Rz7b6qwiL+e2IadNCm7X7KcrgsUhJwvBg==",
-      "requires": {
-        "@microsoft/fast-element": "^1.12.0",
-        "@microsoft/fast-web-utilities": "^5.4.1",
-        "tabbable": "^5.2.0",
-        "tslib": "^1.13.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@microsoft/fast-web-utilities": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz",
-      "integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==",
-      "requires": {
-        "exenv-es6": "^1.1.1"
-      }
-    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -10128,11 +10018,6 @@
         }
       }
     },
-    "exenv-es6": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz",
-      "integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ=="
-    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -11764,11 +11649,6 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
-    "tabbable": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
-      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
-    },
     "temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -11880,11 +11760,6 @@
       "dev": true,
       "requires": {}
     },
-    "tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 0180274..017456e 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,7 @@
   "scripts": {
     "build": "tsc && vite build",
     "coverage": "vitest --coverage",
-    "deploy": " npx @azure/static-web-apps-cli login --no-use-keychain && npx @azure/static-web-apps-cli deploy",
-    "dev": "npx @azure/static-web-apps-cli start http://localhost:3000 --run \"npm run dev-server\"",
-    "dev-server": "vite --open",
+    "dev": "vite --open",
     "dev-task": "vite",
     "lint": "eslint src/**/*.ts",
     "start": "npm run dev",
@@ -18,7 +16,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@fluentui/web-components": "^2.5.16",
     "@vaadin/router": "^1.7.5",
     "idb": "^8.0.0",
     "lit": "^3.1.0",
diff --git a/src/script/components/active-timer.ts b/src/script/components/active-timer.ts
index 895ceb8..841c91f 100644
--- a/src/script/components/active-timer.ts
+++ b/src/script/components/active-timer.ts
@@ -128,15 +128,15 @@ export class ActiveTimer extends LitElement {
           <p class="phase">${this.timerState.phase}</p>
           <p class="time">${durationString(this.timerState.timeRemaining)}</p>
           <div class="controls">
-            <fluent-button appearance="stealth" @click=${this.goBack}>
+            <button @click=${this.goBack}>
               <back-icon></back-icon>
-            </fluent-button>
-            <fluent-button appearance="stealth" @click=${this.toggleActiveState}>
+            </button>
+            <button @click=${this.toggleActiveState}>
               ${this.toggleIcon()}
-            </fluent-button>
-            <fluent-button appearance="stealth" @click=${this.goForward}>
+            </button>
+            <button @click=${this.goForward}>
               <forward-icon></forward-icon>
-            </fluent-button>
+            </button>
           </div>
         </div>
         <footer>
diff --git a/src/script/components/header.ts b/src/script/components/header.ts
index 4f6def7..bed5800 100644
--- a/src/script/components/header.ts
+++ b/src/script/components/header.ts
@@ -32,10 +32,6 @@ export class AppHeader extends LitElement {
         font-weight: bold;
       }
 
-      nav fluent-anchor {
-        margin-left: 10px;
-      }
-
       #menu-button-block {
         display: flex;
         justify-content: space-between;
@@ -49,12 +45,6 @@ export class AppHeader extends LitElement {
       .spacer {
         width: 1em;
       }
-
-      @media(prefers-color-scheme: light) {
-        nav fluent-anchor::part(control) {
-          color: initial;
-        }
-      }
     `;
   }
 
@@ -74,9 +64,9 @@ export class AppHeader extends LitElement {
     return html`
       <header>
         <div id="menu-button-block">
-          <fluent-button appearance="stealth" @click="${this.toggleSidebar}">
+          <button @click="${this.toggleSidebar}">
             <navigation-icon></navigation-icon>
-          </fluent-button>
+          </button>
           <div class="spacer"></div>
           <h1>${this.apptitle || 'Trainterval'}</h1>
         </div>
diff --git a/src/script/components/sidebar.ts b/src/script/components/sidebar.ts
index a087227..8b67f42 100644
--- a/src/script/components/sidebar.ts
+++ b/src/script/components/sidebar.ts
@@ -19,10 +19,6 @@ export class AppSidebar extends LitElement {
         header {
           color: black;
         }
-
-        nav fluent-anchor::part(control) {
-          color: initial;
-        }
       }
 
       .sidebar-content {
@@ -44,11 +40,6 @@ export class AppSidebar extends LitElement {
         padding: 1em;
       }
 
-      fluent-listbox {
-        flex-grow: 1;
-        border: none;
-      }
-
       .visible .sidebar-content {
         transform: translate3d(0, 0, 0);
       }
@@ -67,26 +58,9 @@ export class AppSidebar extends LitElement {
       .visible .overlay  {
         display: block;
       }
-
-      fluent-option {
-        --design-unit: 6;
-      }
-
-      fluent-button {
-        --design-unit: 6;
-        padding: 5px;
-      }
-
-      fluent-button::part(control) {
-        justify-content: start;
-        width: 100%;
-      }
     `;
   }
 
-  @query('fluent-button')
-    fButton?: HTMLElement;
-
   constructor() {
     super();
   }
@@ -117,23 +91,23 @@ export class AppSidebar extends LitElement {
         <div class="overlay" @click="${this.toggleVisibility}"></div>
         <div class="sidebar-content">
           <h3>Trainterval</h3>
-          <fluent-listbox>
+          <ul>
             ${this.timers?.map(timer => {
     return html`
-                  <fluent-option
+                  <li
                     @click=${() => this.selectTimer(timer.id!)}
                     selected=${timer.id === this.selectedTimer}
                     value=${timer.name}>
                     ${timer.name}<br />${timer.description || ''}
-                  </fluent-option>
+                  </li>
                 `;
   })}
-          </fluent-listbox>
-          <fluent-divider></fluent-divider>
-          <fluent-button appearance="stealth" @click="${this.newTimer}">
-            <icon-add slot="start"></icon-add>
+          </ul>
+          <hr />
+          <button @click="${this.newTimer}">
+            <icon-add></icon-add>
             New Timer
-          </fluent-button>
+          </button>
       </div>
     `;
   }
diff --git a/src/script/components/timer-form.ts b/src/script/components/timer-form.ts
index 59a3c4a..58e8ff5 100644
--- a/src/script/components/timer-form.ts
+++ b/src/script/components/timer-form.ts
@@ -119,7 +119,6 @@ export class TimerFormDialog extends LitElement {
     await this.timerService?.save(timer);
     this.saving = false;
     // TODO: Clear form
-    this.toggleVisibility();
     document.dispatchEvent(new TimerSavedEvent(id))
   }
 
@@ -134,11 +133,10 @@ export class TimerFormDialog extends LitElement {
       return null;
     }
     return html`
-      <fluent-button
-        appearance="outline"
+      <button
         tabindex="0"
         @click=${this.delete}
-        style="margin-top: 1em;">Delete</fluent-button>
+        style="margin-top: 1em;">Delete</button>
     `;
   }
 
@@ -169,71 +167,69 @@ export class TimerFormDialog extends LitElement {
               type="hidden"
               name="id"
               .value=${this.timer?.id?.toString() || ''} />
-            <fluent-text-field
+            <label for="timer-name">Name</label>
+            <input
               id="timer-name"
-              appearance="outline"
+              type="text"
               placeholder="My Timer"
-              .value=${this.timer?.name || ''}>Name</fluent-text-field>
-            <fluent-text-area
+              .value=${this.timer?.name || ''}/ >
+            <label for="timer-description">Description</label>
+            <textarea
               id="timer-description"
-              appearance="outline"
               placeholder="More details"
-              .value=${this.timer?.description || ''}>Description</fluent-text-area>
-            <fluent-text-field
+              .value=${this.timer?.description || ''}></textarea>
+            <label for="timer-warmup">Warm-up</label>
+            <input
               id="timer-warmup"
-              appearance="outline"
               placeholder="05:00"
               pattern="${this.durationPattern}"
-              .value=${this.durationString(this.timer?.warmUp)}>Warm Up</fluent-text-field>
-              <fluent-text-field
+              .value=${this.durationString(this.timer?.warmUp)} />
+            <label for="timer-low">Low Intensity</label>
+            <input
               id="timer-low"
-              appearance="outline"
               placeholder="00:30"
               pattern="${this.durationPattern}"
-              .value=${this.durationString(this.timer?.lowIntensity)}>Low Intensity</fluent-text-field>
-              <fluent-text-field
+              .value=${this.durationString(this.timer?.lowIntensity)}>
+            <label for="timer-hi">High Intensity</label>
+            <input
               id="timer-hi"
-              appearance="outline"
               placeholder="01:00"
               pattern="${this.durationPattern}"
-              .value=${this.durationString(this.timer?.highIntensity)}>High Intensity</fluent-text-field>
-              <fluent-text-field
+              .value=${this.durationString(this.timer?.highIntensity)}>
+            <label for="timer-rest">Rest</label>
+            <input
               id="timer-rest"
-              appearance="outline"
               placeholder="01:00"
               pattern="${this.durationPattern}"
-              .value=${this.durationString(this.timer?.rest)}>Rest</fluent-text-field>
-              <fluent-text-field
+              .value=${this.durationString(this.timer?.rest)}>
+            <label for="timer-cool">Cooldown</label>
+            <input
               id="timer-cool"
-              appearance="outline"
               placeholder="05:00"
               pattern="${this.durationPattern}"
-              .value=${this.durationString(this.timer?.coolDown)}>Cooldown</fluent-text-field>
-            <fluent-text-field
+              .value=${this.durationString(this.timer?.coolDown)}>
+            <label for="timer-sets">Sets</label>
+            <input
               id="timer-sets"
-              appearance="outline"
               placeholder="4"
-              .value=${this.timer?.sets}>Sets</fluent-text-field>
-            <fluent-text-field
+              .value=${this.timer?.sets}>
+            <label for="timer-rounds">Rounds</label>
+            <input
               id="timer-rounds"
-              appearance="outline"
               placeholder="2"
-              .value=${this.timer?.rounds}>Rounds</fluent-text-field>
-            <fluent-button
-              appearance="accent"
+              .value=${this.timer?.rounds}>
+            <button
               tabindex="0"
               @click=${this.save}
-              style="margin: 1em 0;">Save</fluent-button>
-            <fluent-button appearance="outline" tabindex="0" @click=${this.toggleVisibility}>Cancel</fluent-button>
+              style="margin: 1em 0;">Save</button>
+            <button tabindex="0" @click=${this.toggleVisibility}>Cancel</button>
             ${this.deleteButton()}
           </form>
         </div>
       `;
     }
     return html`
-      <fluent-dialog ?hidden=${!this.visible} trap-focus modal class=${this.timer?.id ? 'tall' : ''}>
         ${body}
-      </fluent-dialog>
     `;
   }
 }
diff --git a/src/script/pages/app-home.ts b/src/script/pages/app-home.ts
index e70ded8..35722ec 100644
--- a/src/script/pages/app-home.ts
+++ b/src/script/pages/app-home.ts
@@ -12,6 +12,9 @@ export class AppHome extends LitElement {
   @property({ type: Number }) editTimer?: number;
   private timerService?: TimerService;
 
+  @query('dialog')
+  dialog: HTMLElement | null | undefined;
+
   static get styles() {
     return css`
       main {
@@ -64,6 +67,7 @@ export class AppHome extends LitElement {
     if (!this.selectedTimer) {
       this.selectedTimer = this.timers[0]?.id;
     }
+      dialog.close()
   }
 
   private editButton() {
@@ -71,7 +75,7 @@ export class AppHome extends LitElement {
       return null;
     }
     return html`
-      <fluent-button appearance="stealth" slot="actions" @click=${() => this.editTimer = this.selectedTimer}>Edit</fluent-button>
+      <button @click=${() => this.editTimer = this.selectedTimer}>Edit</button>
     `;
   }
 
@@ -87,11 +91,10 @@ export class AppHome extends LitElement {
       <div class="timer-wrapper">
         <p>
           Create a timer to begin<br />
-          <fluent-button
-            appearance="stealth"
+          <button
             @click=${() => this.editTimer = -1}>
             New Timer
-          </fluent-button>
+          </button>
         </p>
        </div>
       `;
@@ -107,12 +110,13 @@ export class AppHome extends LitElement {
           @selecttimer=${(e: SelectTimerEvent) => this.selectedTimer = e.timerId}>
           ${this.editButton()}
         </app-header>
-        ${body}
+        <dialog>
         <timer-form-dialog
-          ?visible=${this.editTimer !== undefined}
           .timerService=${this.timerService}
           .timer=${this.editTimer === timer?.id ? timer : null}
           @close=${this.closeEditor}></timer-form-dialog>
+        </dialog>
+        ${body}
       </main>
     `;
   }
