diff --git a/src/components/about-app/about-app.ts b/src/components/about-app/about-app.ts
index 6d41d5e..ca39aba 100644
--- a/src/components/about-app/about-app.ts
+++ b/src/components/about-app/about-app.ts
@@ -54,8 +54,8 @@ export class AppAbout extends LitElement {
               </ul>
             </sl-details>
             <sl-details summary="PWA Scorecard" open>
-              <div style="display: flex; flex-direction: row; grid-gap: 1rem;">
-                <div class="hide-at-800">
+              <div style="display: flex; flex-direction: row; gap: 1rem;">
+                <div class="hide-at-950">
                   <img
                     src="/assets/PWAReportCard.png"
                     alt="PWA Builder Scorecard"
diff --git a/src/components/about-modal.ts b/src/components/about-modal.ts
index 5df4a14..70abfd0 100644
--- a/src/components/about-modal.ts
+++ b/src/components/about-modal.ts
@@ -26,11 +26,6 @@ export class AboutModal extends LitElement {
     this.isOpen = false;
   }
 
-  // confirm() {
-  //   this.dispatchEvent(new CustomEvent('close'));
-  //   this.close();
-  // }
-
   render() {
     if (!this.isOpen) {
       return html``;
diff --git a/src/components/confirmation-modal.ts b/src/components/confirmation-modal.ts
index cb7c4f6..149e877 100644
--- a/src/components/confirmation-modal.ts
+++ b/src/components/confirmation-modal.ts
@@ -33,12 +33,12 @@ export class ConfirmationModal extends LitElement {
         @sl-after-close=${this.close}
       >
         <p>${this.message}</p>
-        <sl-button slot="footer" variant="danger" @click=${this.confirm}>
-          Confirm
-        </sl-button>
         <sl-button slot="footer" variant="default" @click=${this.close}>
           Cancel
         </sl-button>
+        <sl-button slot="footer" variant="danger" @click=${this.confirm}>
+          Confirm
+        </sl-button>
       </sl-dialog>
     `;
   }
diff --git a/src/components/game-tracker/game-tracker-styles.ts b/src/components/game-tracker/game-tracker-styles.ts
index 2bd50b1..b2ea2e0 100644
--- a/src/components/game-tracker/game-tracker-styles.ts
+++ b/src/components/game-tracker/game-tracker-styles.ts
@@ -10,6 +10,6 @@ export const gameTrackerStyles = css`
   sl-radio-group::part(form-control-input) {
     display: flex;
     flex-direction: row;
-    grid-gap: 1rem;
+    gap: 1rem;
   }
 `;
diff --git a/src/components/game-tracker/player-input.ts b/src/components/game-tracker/player-input.ts
index 1069fcd..34ebafb 100644
--- a/src/components/game-tracker/player-input.ts
+++ b/src/components/game-tracker/player-input.ts
@@ -75,7 +75,7 @@ export class PlayerInput extends LitElement {
 
   render() {
     return html`
-      <div style="display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; grid-gap: 1rem; padding-left: 1rem; padding-right: 1rem;">
+      <div style="display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-left: 1rem; padding-right: 1rem;">
         <form
           class="input-validation-custom"
           @submit=${this.handleSubmit}
@@ -107,7 +107,7 @@ export class PlayerInput extends LitElement {
             Add Player
           </sl-button>
         </form>
-        <div style="display: flex; flex-direction: column; grid-gap: .5rem; flex: 1;">
+        <div style="display: flex; flex-direction: column; gap: .5rem; flex: 1;">
           <p style="margin-top: .25rem; margin-bottom: .25rem;">
             <strong>Player List</strong>
           </p>
@@ -121,7 +121,7 @@ export class PlayerInput extends LitElement {
               setTimeout(() => (alert.open = true), 2000);
             });
           </script>
-          <div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; grid-gap: .5rem; width: 100%;">
+          <div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; width: 100%;">
             ${this.players.map(player => html`
               <sl-tag variant="primary" removable @sl-remove=${() => this.removePlayer(player)}>
                 ${player}
diff --git a/src/components/game-tracker/standings-display.ts b/src/components/game-tracker/standings-display.ts
index 7574df2..17f4ae5 100644
--- a/src/components/game-tracker/standings-display.ts
+++ b/src/components/game-tracker/standings-display.ts
@@ -35,7 +35,7 @@ export class StandingsDisplay extends LitElement {
             <th>Losses</th>
             <th>Draws</th>
             <th>Points</th>
-            <th class="hide-at-800">Win Percentage</th>
+            <th class="hide-at-950">Win Percentage</th>
           </tr>
         </thead>
         <tbody>
@@ -46,7 +46,7 @@ export class StandingsDisplay extends LitElement {
               <td style="text-align: center;">${standing.losses}</td>
               <td style="text-align: center;">${standing.draws}</td>
               <td style="text-align: center;">${standing.points}</td>
-              <td class="hide-at-800" style="text-align: center;">${standing.winPercentage || 0}</td>
+              <td class="hide-at-950" style="text-align: center;">${standing.winPercentage || 0}</td>
             </tr>
           `)}
         </tbody>
diff --git a/src/components/game-tracker/standings-tracker.ts b/src/components/game-tracker/standings-tracker.ts
index 01b420c..fe7963c 100644
--- a/src/components/game-tracker/standings-tracker.ts
+++ b/src/components/game-tracker/standings-tracker.ts
@@ -291,7 +291,7 @@ export class StandingsTracker extends LitElement {
           </sl-button>
         </sl-button-group>
       </div>
-      <div style="display: flex; flex-direction: column; grid-gap: 1rem;">
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
         <sl-details summary="Match details" open>
           <match-input .players=${this.players.map(player => ({ name: player }))} @match-recorded=${(e: CustomEvent) => this.recordMatch(e.detail)}></match-input>
         </sl-details>
@@ -309,12 +309,12 @@ export class StandingsTracker extends LitElement {
           </sl-tab-panel>
           <sl-tab-panel name="history">
             <div slot="header">
-              <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; grid-gap: .5rem; width: 100%;">
+              <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: .5rem; width: 100%;">
                 Match results
                 <sl-tooltip content="Export Results">
                   <sl-button variant="success" size="small" pill label="export match results" @click=${this.exportMatchResults}>
                     <sl-icon slot="prefix" library="default" name="file-earmark-excel-fill" label="Export Results"></sl-icon>
-                    Export <span class="hide-at-800">Standings</span>
+                    Export <span class="hide-at-950">Standings</span>
                   </sl-button>
                 </sl-tooltip>
               </div>
diff --git a/src/components/match-tracker/match-tracker.ts b/src/components/match-tracker/match-tracker.ts
index 624e513..0a19629 100644
--- a/src/components/match-tracker/match-tracker.ts
+++ b/src/components/match-tracker/match-tracker.ts
@@ -5,6 +5,7 @@ import '../icons/mana-icon';
 import '../icons/mtg-symbols';
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 import '@shoelace-style/shoelace/dist/components/card/card.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 
 import { sharedStyles } from '../../styles/shared-styles';
 import { shoelaceStyles } from '../../styles/shoelace-styles';
@@ -84,6 +85,44 @@ export class MatchTracker extends LitElement {
     counterStyles,
     manaStyles,
     css`
+      main {
+        height: calc(100vh - 80px);
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+      }
+
+      .wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      sl-tab-group {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      sl-tab-panel[name="tracker"] {
+        height: 100%;
+        overflow: auto;
+      }
+
+      .tracker-grid {
+        height: 100%;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .player-column {
+        width: 50%;
+        display: flex;
+        flex-direction: column;
+      }
+
       sl-input::part(form-control-help-text) {
         color: var(--sl-color-neutral-700);
       }
@@ -97,17 +136,22 @@ export class MatchTracker extends LitElement {
         margin-right: 1rem;
         margin-left: 1rem;
       }
-      @media (min-width: 900px) {
+      @media (min-width: 950px) {
         .form-2-column {
           flex-direction: row;
         }
       }
-      @media (max-width: 900px) {
+      @media (max-width: 950px) {
         .form-player-input {
           margin-right: 0;
           margin-left: 0;
         }
       }
+      sl-button.life-counter::part(base) {
+        height: 4rem;
+        justify-content: center;
+        line-height: 4rem;
+      }
     `
   ]
   @state() playerLogs: LogEntry[] = [];
@@ -424,7 +468,7 @@ export class MatchTracker extends LitElement {
 
     return html`
       <main>
-        <div style="display: flex; flex-direction: column; grid-gap: 1rem;">
+        <div class="wrapper">
           <sl-tab-group active-tab=${this.activeTab}>
             <sl-tab slot="nav" panel="tracker" class="ios-tab">Life</sl-tab>
             <sl-tab slot="nav" panel="results" class="ios-tab">Results</sl-tab>
@@ -432,8 +476,8 @@ export class MatchTracker extends LitElement {
             <sl-tab slot="nav" panel="action-log" class="ios-tab">Match Log</sl-tab>
             <sl-tab slot="nav" panel="setup" class="ios-tab">Setup</sl-tab>
             <sl-tab-panel name="tracker">
-              <div style="display: flex; flex-wrap: wrap;">
-                <div style="width: 50%;">
+              <div class="tracker-grid">
+                <div class="player-column">
                   <sl-card class="player-one" id="topLeft">
                     <form style="position: relative; height: 100%; justify-content: space-between;">
                       <sl-button variant="default" size="large" class="life-counter player-one" @click=${() => this.updateLife(1, 1, 'Gain')}>
@@ -452,7 +496,7 @@ export class MatchTracker extends LitElement {
                         <sl-icon src="/assets/icons/loyalty-down.svg" slot="prefix" class="ms ms-loyalty-down ms-2x"></sl-icon>
                         Lose
                       </sl-button>
-                      <span class="hide-at-800" style="position: absolute; right: 8px; bottom: 8px;">
+                      <span class="hide-at-950" style="position: absolute; right: 8px; bottom: 8px;">
                         <sl-icon src="/assets/icons/saga.svg" slot="prefix" class="ms ms-saga-1 ms-4x"></sl-icon>
                       </span>
                     </form>
@@ -475,13 +519,13 @@ export class MatchTracker extends LitElement {
                         <sl-icon src="/assets/icons/loyalty-down.svg" slot="prefix" class="ms ms-loyalty-down ms-2x"></sl-icon>
                         Lose
                       </sl-button>
-                      <span class="hide-at-800" style="position: absolute; right: 8px; top: 8px;">
+                      <span class="hide-at-950" style="position: absolute; right: 8px; top: 8px;">
                         <sl-icon src="/assets/icons/saga.svg" slot="prefix" class="ms ms-saga-3 ms-4x"></sl-icon>
                       </span>
                     </form>
                   </sl-card>
                 </div>
-                <div style="width: 50%;">
+                <div class="player-column">
                   <sl-card class="player-two" id="bottomLeft">
                     <form style="position: relative; height: 100%; justify-content: space-between;">
                       <sl-button variant="default" size="large" class="life-counter player-two" @click=${() => this.updateLife(2, 1, 'Gain')}>
@@ -500,7 +544,7 @@ export class MatchTracker extends LitElement {
                         <sl-icon src="/assets/icons/loyalty-down.svg" slot="prefix" class="ms ms-loyalty-down ms-2x"></sl-icon>
                         Lose
                       </sl-button>
-                      <span class="hide-at-800" style="position: absolute; left: 8px; bottom: 8px;">
+                      <span class="hide-at-950" style="position: absolute; left: 8px; bottom: 8px;">
                         <sl-icon src="/assets/icons/saga.svg" slot="prefix" class="ms ms-saga-2 ms-4x"></sl-icon>
                       </span>
                     </form>
@@ -523,19 +567,12 @@ export class MatchTracker extends LitElement {
                         <sl-icon src="/assets/icons/loyalty-down.svg" slot="prefix" class="ms ms-loyalty-down ms-2x"></sl-icon>
                         Lose
                       </sl-button>
-                      <span class="hide-at-800" style="position: absolute; left: 8px; top: 8px;">
+                      <span class="hide-at-950" style="position: absolute; left: 8px; top: 8px;">
                         <sl-icon src="/assets/icons/saga.svg" slot="prefix" class="ms ms-saga-4 ms-4x"></sl-icon>
                       </span>
                     </form>
                   </sl-card>
                 </div>
-                <style>
-                sl-button.life-counter::part(base) {
-                  height: 4rem;
-                  justify-content: center;
-                  line-height: 4rem;
-                }
-                </style>
               </div>
             </sl-tab-panel>
             <sl-tab-panel name="standings">
diff --git a/src/components/navigation.ts b/src/components/navigation.ts
index dea59ea..04df25e 100644
--- a/src/components/navigation.ts
+++ b/src/components/navigation.ts
@@ -26,10 +26,71 @@ export class MyNavigation extends LitElement {
       color: var(--sl-color-primary-600);
     }
     sl-button sl-icon[slot="prefix"] {
-      background: #fff;
+      background: var(--sl-color-neutral-0);
       border-radius: 50%;
       padding: .25rem;
     }
+
+    .navbar {
+      display: flex;
+      justify-content: center;
+      padding: 0rem 0.5rem;
+      align-items: flex-start;
+      gap: 0.5rem;
+      background: var(--sl-color-neutral-100);
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .navbar-item {
+      display: flex;
+      padding: 1rem 0;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 0.25rem;
+      flex: 1 0 0;
+    }
+    .item-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border-radius: 1rem;
+      background: transparent;
+      border: 2px solid transparent;
+    }
+    .navbar-item.active .item-container {
+      background: var(--sl-color-primary-100) !important;
+      border: 2px solid var(--sl-color-primary-600);
+    }
+    .navbar-item:hover .item-container,
+    .navbar-item.active:hover .item-container {
+      background: var(--sl-color-neutral-200) !important;
+    }
+    .item-container-label {
+      align-self: stretch;
+      color: var(--sl-color-neutral-950);
+      text-align: center;
+      @media (max-width: 950px) {
+        display: none !important;
+      }
+    }
+    .state-layer {
+      display: flex;
+      width: 4rem;
+      @media (max-width: 950px) {
+        width: 2rem !important;
+      }
+      height: 2rem;
+      padding: 0.25rem 1.25rem;
+      justify-content: center;
+      align-items: center;
+    }
+    .navbar-icon {
+      flex-shrink: 0;
+    }
   `;
 
   @state() isDrawerOpen = false; //Add a state to track if the drawer is open.
@@ -118,69 +179,6 @@ export class MyNavigation extends LitElement {
           </div>
         </div>
       </div>
-
-      <style>
-        .navbar {
-          display: flex;
-          justify-content: center;
-          padding: 0rem 0.5rem;
-          align-items: flex-start;
-          gap: 0.5rem;
-          background: #F4F6F7;
-          position: fixed;
-          bottom: 0;
-          left: 0;
-          right: 0;
-        }
-        .navbar-item {
-          display: flex;
-          padding: 1rem 0;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          gap: 0.25rem;
-          flex 1 0 0;
-        }
-        .item-container {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          border-radius: 1rem;
-          background: transparent;
-          border: 2px solid transparent;
-        }
-        .navbar-item.active .item-container {
-          background: #e0f1fe !important;
-          border: 2px solid #0163A3;
-          }
-          .navbar-item:hover .item-container,
-          .navbar-item.active:hover .item-container {
-          background: #e2e8eb !important;
-        }
-        .item-container-label {
-          align-self: stretch;
-          color: #1a1b21;
-          text-align: center;
-          @media (max-width: 950px) {
-            display: none !important;
-          }
-        }
-        .state-layer {
-          display: flex;
-          width: 4rem;
-          @media (max-width: 950px) {
-            width: 2rem !important;
-          }
-          height: 2rem;
-          padding: 0.25rem 1.25rem;
-          justify-content: center;
-          align-items: center;
-        }
-        .navbar-icon {
-          flex-shrink: 0;
-        }
-      </style>
     `;
   }
 }
diff --git a/src/components/standard-tracker/standard-styles.ts b/src/components/standard-tracker/standard-styles.ts
index b3c61ed..4ab115f 100644
--- a/src/components/standard-tracker/standard-styles.ts
+++ b/src/components/standard-tracker/standard-styles.ts
@@ -6,7 +6,7 @@ export const standardStyles = css`
       display: flex;
       flex-direction: row;
       justify-content: space-evenly;
-      grid-gap: 1rem;
+      gap: 1rem;
     }
     sl-card.side-one::part(base),
     sl-card.side-two::part(base) {
@@ -44,7 +44,7 @@ export const standardStyles = css`
   .form-player-input {
     width: 100%;
   }
-  @media (min-width: 1000px) {
+  @media (min-width: 1200px) {
     .form-2-column {
       flex-direction: row;
     }
@@ -58,7 +58,7 @@ export const standardStyles = css`
       transform: rotate(180deg);
     }
   }
-  @media (orientation: landscape): {
+  @media (orientation: landscape) {
     sl-card.side-one {
       transform: rotate(180deg);
     }
diff --git a/src/components/standard-tracker/standard-tracker.ts b/src/components/standard-tracker/standard-tracker.ts
index be45a76..65fc19e 100644
--- a/src/components/standard-tracker/standard-tracker.ts
+++ b/src/components/standard-tracker/standard-tracker.ts
@@ -7,6 +7,7 @@ import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 import '@shoelace-style/shoelace/dist/components/card/card.js';
 import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import '@shoelace-style/shoelace/dist/components/tree/tree';
 import '@shoelace-style/shoelace/dist/components/tree-item/tree-item';
 
@@ -79,86 +80,156 @@ export class MatchTracker extends LitElement {
     alertStyles,
     standardStyles,
     css`
+      main {
+        height: calc(100vh - 80px);
+        padding: 0 !important;
+        margin: 0 !important;
+        position: relative;
+        overflow: hidden;
+      }
+
       sl-drawer {
         --size: 90vh !important;
       }
-      @media screen and (max-width: 595px) {
-        .standard-tracker,
+
+      .standard-tracker {
+        height: 100%;
+        width: 100%;
+      }
+
+      .side-one,
+      .side-two,
+      sl-card::part(base) {
+        height: 100%;
+        align-items: center;
+        align-content: center;
+      }
+
+      sl-card::part(body) {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        padding: 0;
+      }
+
+      .card-form {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        padding: 1rem;
+      }
+
+      .card-form > sl-button {
+        width: 100%;
+        max-width: 300px;
+      }
+
+      .card-form > p {
+        font-size: calc(16px * 4);
+        line-height: normal;
+        margin: 0;
+        color: var(--sl-color-neutral-950);
+        font-weight: bold;
+      }
+
+      /* Icon colors - override for visibility */
+      .side-one sl-icon {
+        color: var(--sl-color-neutral-950);
+        font-size: 1.75rem;
+      }
+
+      .side-two sl-icon {
+        font-size: 1.75rem;
+      }
+
+      .side-two .icon-plus {
+        color: var(--sl-color-warning-600);
+      }
+
+      .side-two .icon-minus {
+        color: var(--sl-color-neutral-50);
+      }
+
+      @media screen and (max-width: 600px) {
+        main {
+          height: calc(100vh - 80px);
+        }
+
+        .standard-tracker {
+          display: flex;
+          flex-direction: column;
+        }
+
         .side-one,
-        .side-two,
-        sl-card::part(base) {
-          height: 45vh !important;
+        .side-two {
+          flex: 1;
+          min-height: 50%;
         }
+
         .card-form > p {
           font-size: calc(16px * 3);
         }
-       .settings-fab {
-          position: absolute;
-          display: block;
-          top: 50%;
-          right: 50%;
-          width: 28px;
-        }
       }
+
       @media screen and (min-width: 600px) {
-        // main {
-        //   height: calc(100vh - 55px) !important
-        // }
-        .standard-tracker,
-        .side-one,
-        .side-two,
-        sl-card::part(base) {
-          height: 100%;
-        }
-        sl-card::part(body) {
-          height: 100%;
-          display: flex;
-          justify-content: center;
-        }
-        .card-form {
-          justify-content: space-between;
+        main {
+          height: calc(100vh - 80px);
         }
+
         .card-form > sl-button {
           width: 40vw;
-          display: flex;
-          align-items: center;
-        }
-        .card-form > p {
-          font-size: calc(16px * 4);
+          max-width: 400px;
         }
+      }
+
+      /* Drawer styles */
+      .reset-points-form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-bottom: 1rem;
+      }
+
+      .reset-points-form sl-input {
+        text-align: center;
+      }
+
+      .tree-with-lines {
+        color: var(--sl-color-neutral-50);
+      }
+
+      @media screen and (min-width: 600px) {
         .reset-points-form {
           flex-direction: row;
           justify-content: center;
-          align-items: center;
-          grid-gap: 1rem;
+          align-items: flex-end;
         }
-        sl-button.reset-points-button::part(base) {
-          margin-top: 1rem;
-        }
-      }
-      .standard-tracker,
-      .side-one,
-      .side-two,
-      sl-card::part(base) {
-        height: 100%;
-        align-items: center;
-        align-content: center;
-        color: var(--sl-color-neutral-50);
       }
-      sl-button [slot="prefix"] {
-        color: var(--sl-color-neutral-50) !important;
+
+      /* FAB positioning - centered horizontally */
+      .fab-container {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 100;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        border-radius: 50%;
+        transition: opacity 0.3s ease, visibility 0.3s ease;
       }
-      sl-card::part(body) {
-        height: 100%;
-        display: flex;
-        justify-content: center;
+
+      .fab-container.hidden {
+        opacity: 0;
+        visibility: hidden;
       }
-      .settings-fab {
-        position: absolute;
-        display: block;
-        top: 50%;
-        right: 50%;
-        width: 16px;
+
+      @media screen and (max-width: 600px) {
+        .fab-container {
+          top: 50%;
+        }
       }
     `
   ]
@@ -364,42 +435,34 @@ export class MatchTracker extends LitElement {
   const menuContent = sideMenuItems.length > 0 ? sideMenuItems : emptyState;
 
   return html`
-    <main style="height: 100%; padding: 0; margin: 0 .5rem; margin-top: .5rem;">
+    <main>
       <div class="standard-tracker">
         <sl-card class="side-one">
-          <form class="card-form" style="position: relative;">
+          <form class="card-form">
             <sl-button variant="default" size="large" class="life-counter side-one" @click=${() => this.updatePoints(1, 1, 'Plus')}>
-              <span style="font-size: 1.75rem; color: var(--sl-color-neutral-950);">
-                <sl-icon slot="prefix" name="shield-fill-plus"></sl-icon>
-              </span>
+              <sl-icon slot="prefix" name="shield-fill-plus"></sl-icon>
               Plus
             </sl-button>
-            <p class="text-center ms-4x" style="line-height: normal; margin: 0;">
+            <p class="text-center ms-4x">
               ${this.side1.points}
             </p>
             <sl-button variant="default" size="large" class="life-counter side-one" @click=${() => this.updatePoints(1, -1, 'Minus')}>
-              <span style="font-size: 1.75rem; color: var(--sl-color-neutral-950);">
-                <sl-icon slot="prefix" name="shield-fill-minus"></sl-icon>
-              </span>
+              <sl-icon slot="prefix" name="shield-fill-minus"></sl-icon>
               Minus
             </sl-button>
           </form>
         </sl-card>
         <sl-card class="side-two">
-          <form class="card-form" style="position: relative;">
+          <form class="card-form">
             <sl-button variant="default" size="large" class="life-counter side-two" @click=${() => this.updatePoints(2, 1, 'Plus')}>
-              <span style="font-size: 1.75rem; color: orange;">
-                <sl-icon slot="prefix" name="shield-fill-plus"></sl-icon>
-              </span>
+              <sl-icon slot="prefix" name="shield-fill-plus" class="icon-plus"></sl-icon>
               Plus
             </sl-button>
-            <p class="text-center ms-4x" style="line-height: normal; margin: 0;">
+            <p class="text-center ms-4x">
               ${this.side2.points}
             </p>
             <sl-button variant="default" size="large" class="life-counter side-two" @click=${() => this.updatePoints(2, -1, 'Minus')}>
-              <span style="font-size: 1.75rem; color: var(--sl-color-neutral-50);">
-                <sl-icon slot="prefix" name="shield-fill-minus"></sl-icon>
-              </span>
+              <sl-icon slot="prefix" name="shield-fill-minus" class="icon-minus"></sl-icon>
               Minus
             </sl-button>
           </form>
@@ -413,11 +476,9 @@ export class MatchTracker extends LitElement {
               size="medium"
               pill
               placeholder="Starting points must be greater than 0"
-              type="number"
               value=${this.initialPointsTracker}
               @sl-change=${this.setInitialPointsTracker}
               min="0"
-              style="text-align: center; margin-bottom: .5rem;"
             >
             </sl-input>
             <sl-button
@@ -435,32 +496,16 @@ export class MatchTracker extends LitElement {
             Starting points have been reset to ${this.initialPointsTracker}.
           </sl-alert>
           <h3>History</h3>
-          <sl-tree class="tree-with-lines" style="color: var(--sl-color-neutral-50);">
+          <sl-tree class="tree-with-lines">
             ${menuContent}
           </sl-tree>
         <sl-button slot="footer" variant="primary" pill @click=${this.closeDrawer}>Close</sl-button>
       </sl-drawer>
-      <div class="fab-container">
+      <div class="fab-container ${this.isDrawerOpen ? 'hidden' : ''}">
         <sl-button variant="neutral" size="large" circle @click=${this.toggleDrawer}>
           <sl-icon name="gear" label="settings"></sl-icon>
         </sl-button>
       </div>
-      <style>
-        @media screen and (max-width: 600px) {
-          .fab-container {
-            top: calc(50vh - 72px) !important;
-          }
-        }
-        .fab-container {
-          position: absolute;
-          // height: 56px;
-          // width: 56px;
-          top: calc(50% - 24px);
-          right: calc(50vw - 2rem);
-          box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, .5);
-          border-radius: 50%;
-        }
-      </style>
     </main>
   `}
 }
diff --git a/src/pages/app-counter/counter-styles.ts b/src/pages/app-counter/counter-styles.ts
index f6328d5..89233e3 100644
--- a/src/pages/app-counter/counter-styles.ts
+++ b/src/pages/app-counter/counter-styles.ts
@@ -12,6 +12,17 @@ export const counterStyles = css`
       height: 100%;
     }
   }
+  @media (min-width: 950px) {
+    sl-card.player-one,
+    sl-card.player-two,
+    sl-card.player-three,
+    sl-card.player-four {
+      flex: 1;
+    }
+    sl-card::part(body) {
+      height: 100%;
+    }
+  }
   sl-tab-panel::part(base) {
     width: 100%;
   }
diff --git a/src/pages/app-game-tracker.ts b/src/pages/app-game-tracker.ts
index 3cab186..433d766 100644
--- a/src/pages/app-game-tracker.ts
+++ b/src/pages/app-game-tracker.ts
@@ -1,6 +1,7 @@
 import { LitElement, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import '../components/game-tracker/standings-tracker'; // Import the component
+import '../components/navigation.js';
 import { sharedStyles } from '../styles/shared-styles';
 
 @customElement('app-standings')
@@ -8,19 +9,20 @@ export class AppDashboard extends LitElement {
   static styles = [
     sharedStyles,
     css`
+      main {
+        margin: 0 .5rem;
+      }
+      sl-button::part(prefix) sl-icon {
+        font-size: 1.125rem;
+      }
     `
   ]
   render() {
     return html`
-      <main style="margin: 0 .5rem">
+      <main>
         <standings-tracker></standings-tracker>
       </main>
       <app-navigation></app-navigation>
-      <style>
-        sl-button::part(prefix) sl-icon {
-          font-size: 1.125rem;
-        }
-      </style>
     `;
   }
 }
diff --git a/src/pages/app-roll-dice.ts b/src/pages/app-roll-dice.ts
index 85fe515..664e904 100644
--- a/src/pages/app-roll-dice.ts
+++ b/src/pages/app-roll-dice.ts
@@ -90,6 +90,10 @@ export class AppRollDice extends LitElement {
       sl-card::part(body) {
         padding-top: var(--sl-spacing-medium);
       }
+      sl-badge::part(base) {
+        height: 2rem;
+        width: 2rem;
+      }
     `,
   ];
 
@@ -152,12 +156,6 @@ export class AppRollDice extends LitElement {
         </sl-card>
       </main>
       <app-navigation></app-navigation>
-      <style>
-        sl-badge::part(base) {
-          height: 2rem;
-          width: 2rem;
-        }
-      </style>
     `;
   }
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index cf0ccfc..7bdaa35 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -4,6 +4,16 @@
   Check here https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties for more info on using CSS variables.
 */
 
+/*
+  STANDARD BREAKPOINTS (use these values consistently across all components)
+  Note: CSS custom properties cannot be used in media queries, so use these literal values
+
+  Mobile:         max-width: 600px   - Mobile devices
+  Tablet:         max-width: 768px   - Tablets
+  Desktop-small:  max-width: 950px   - Small desktop screens
+  Desktop:        min-width: 1200px  - Large desktop screens
+*/
+
 :host,
 :root,
 .sl-theme-dark {
@@ -19,39 +29,6 @@
   --sl-input-background-color-hover: var(--Recessed) !important;
   --sl-input-background-color-focus: var(--Recessed) !important;
 
-  /* Form Inputs
-  --sl-input-background-color: transparent;
-  --sl-input-background-color-hover: var(--Recessed);
-  --sl-input-background-color-focus: var(--Recessed);
-  --sl-input-background-color-disabled: var(--Recessed);
-  --sl-input-border-color: rgba(216, 216, 216, 0.702);
-  --sl-input-border-color-hover: rgba(0, 156, 229, 0.859);
-  --sl-input-border-color-focus: rgba(0, 156, 229, 0.859);
-  --sl-input-border-color-disabled: yellow;
-  --sl-input-color: #fff;
-  --sl-input-color-hover: rgba(255, 255, 255, 0.8);
-  --sl-input-color-focus: rgba(255, 255, 255, 0.8);
-  --sl-input-color-disabled: yellow;
-  --sl-input-icon-color: #fff;
-  --sl-input-icon-color-hover: rgba(255, 255, 255, 0.8);
-  --sl-input-icon-color-focus: rgba(255, 255, 255, 0.8);
-  --sl-input-icon-color-disabled: yellow;
-  --sl-input-focus-ring-color: rgba(0, 156, 229, 0.859) inset;
-  */
-  /* Filled Form Inputs
-  --sl-input-filled-background-color: var(--Recessed) !important;
-  --sl-input-filled-background-color-hover: var(--Recessed) !important;
-  --sl-input-filled-background-color-focus: var(--Recessed) !important;
-  --sl-input-filled-background-color-disabled: var(--Recessed) !important;
-  --sl-input-filled-color: transparent !important;
-  --sl-input-filled-color-hover: transparent !important;
-  --sl-input-filled-color-focus: transparent !important;
-  --sl-input-filled-color-disabled: transparent !important;
-  --sl-input-placeholder-color: var(--sl-color-neutral-500);
-  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-300);
-  --sl-input-help-text-color: var(--sl-color-neutral-300);
-  --sl-focus-ring: var(--sl-color-primary-600);
-*/
   --ms-mana-b-bg: #D7D0CD;
   --ms-mana-c-bg: #D7D0CD;
   --ms-mana-g-bg: #ABDDBD;
@@ -123,13 +100,12 @@ html, body {
   margin: 0;
   color: var(--sl-color-gray-950) !important;
 }
-@media (max-width: 800px) {
+@media (max-width: 768px) {
   html, body, .main {
     padding: 0 !important;
   }
 }
 .background-image {
-  /* background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(1, 1, 1, 0.9)), url("/assets/background-d20.jpg"); */
   background-repeat: no-repeat;
   background-position: bottom;
   background-clip: border-box;
diff --git a/src/styles/shared-styles.ts b/src/styles/shared-styles.ts
index 1f0febd..eadd099 100644
--- a/src/styles/shared-styles.ts
+++ b/src/styles/shared-styles.ts
@@ -27,7 +27,7 @@ export const sharedStyles = css`
     color: var(--sl-color-violet-800);
   }
   @media (max-width: 950px) {
-    .hide-at-800 {
+    .hide-at-950 {
       flex-direction: column !important;
       display: none !important;
     }
@@ -111,7 +111,7 @@ export const sharedStyles = css`
     border-color: rgba(255, 255, 255, .2);
   }
   .toolbar sl-button-group::part(base) {
-    grid-gap: .75rem;
+    gap: .75rem;
   }
   .toolbar sl-button::part(base) {
     border-color: transparent;
diff --git a/src/styles/shoelace-styles.ts b/src/styles/shoelace-styles.ts
index 2df9163..852d8b4 100644
--- a/src/styles/shoelace-styles.ts
+++ b/src/styles/shoelace-styles.ts
@@ -26,7 +26,7 @@ export const shoelaceStyles = css`
     padding-bottom: .5rem;
   }
   sl-tab::part(base) {
-    background: #E0F1FE;
+    background: var(--sl-color-primary-100);
   }
   sl-tab[active] sl-icon {
     fill: var(--sl-color-primary-50) !important;
@@ -36,7 +36,7 @@ export const shoelaceStyles = css`
   sl-tab:hover sl-icon {
     color: var(--sl-color-primary-50) !important;
     fill: var(--sl-color-primary-50) !important;
-    background: #0163a3 !important;
+    background: var(--sl-color-primary-600) !important;
   }
   sl-tab::part(base):focus-visible,
   sl-tab.ios-tab::part(base):focus-visible {
@@ -48,20 +48,10 @@ export const shoelaceStyles = css`
     padding: .75rem 1rem;
   }
   sl-tab[active]::part(base) {
-    background: #0163a3 !important;
+    background: var(--sl-color-primary-600) !important;
     color: var(--sl-color-primary-50) !important;
   }
 
-  // sl-tag::part(base) {
-  //   border-radius: 0.625rem;
-  //   background: var(--Windows-Glass);
-  //   background-blend-mode: color-dodge, lighten;
-  //   color: rgba(255, 255, 255, 0.96) !important;
-  //   text-align: center;
-  // }
-  // sl-tag::part(remove-button) {
-  //   color: rgba(255, 255, 255, 0.96) !important;
-  // }
   sl-tree-item::part(base) {
     color: var(--sl-color-neutral-950);
   }