diff --git a/flightscore/src/components/icon-card.ts b/flightscore/src/components/icon-card.ts
new file mode 100644
index 0000000..61142c5
--- /dev/null
+++ b/flightscore/src/components/icon-card.ts
@@ -0,0 +1,79 @@
+// components/icon-card.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('icon-card')
+export class IconCard extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .card {
+      background: var(--color-bg-nav);
+      border: 1px solid var(--color-border);
+      border-radius: 0.75rem;
+      padding: 1.75rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      transition: border-color 0.25s ease;
+    }
+
+    .card:hover {
+      border-color: color-mix(
+        in srgb,
+        var(--color-accent) 40%,
+        transparent
+      );
+    }
+
+    .icon {
+      width: 2.25rem;
+      height: 2.25rem;
+      display: grid;
+      place-items: center;
+      border-radius: 0.5rem;
+      background: color-mix(
+        in srgb,
+        var(--color-accent) 10%,
+        transparent
+      );
+      color: var(--color-accent);
+    }
+
+    ::slotted(svg) {
+      width: 1.15rem;
+      height: 1.15rem;
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 650;
+      color: var(--color-text);
+    }
+
+    p {
+      margin: 0;
+      font-size: 0.875rem;
+      line-height: 1.6;
+      color: color-mix(in srgb, var(--color-text) 55%, transparent);
+    }
+  `;
+
+  @property() heading = '';
+  @property() description = '';
+
+  render() {
+    return html`
+      <div class="card">
+        <div class="icon">
+          <slot name="icon"></slot>
+        </div>
+        <h3>${this.heading}</h3>
+        <p>${this.description}</p>
+      </div>
+    `;
+  }
+}
\ No newline at end of file
diff --git a/flightscore/src/components/stat-card.ts b/flightscore/src/components/stat-card.ts
new file mode 100644
index 0000000..84dbd7f
--- /dev/null
+++ b/flightscore/src/components/stat-card.ts
@@ -0,0 +1,56 @@
+// components/stat-card.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('stat-card')
+export class StatCard extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .card {
+      background: var(--color-bg-nav);
+      border: 1px solid var(--color-border);
+      border-radius: 0.75rem;
+      padding: 1.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      transition: border-color 0.25s ease;
+    }
+
+    .card:hover {
+      border-color: color-mix(
+        in srgb,
+        var(--color-accent) 40%,
+        transparent
+      );
+    }
+
+    .value {
+      font-size: 2rem;
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      color: var(--color-accent);
+    }
+
+    .label {
+      font-size: 0.85rem;
+      color: color-mix(in srgb, var(--color-text) 55%, transparent);
+      font-weight: 500;
+    }
+  `;
+
+  @property() value = '';
+  @property() label = '';
+
+  render() {
+    return html`
+      <div class="card">
+        <span class="value">${this.value}</span>
+        <span class="label">${this.label}</span>
+      </div>
+    `;
+  }
+}
\ No newline at end of file
diff --git a/flightscore/src/components/ui-badge.ts b/flightscore/src/components/ui-badge.ts
new file mode 100644
index 0000000..4bcbdd6
--- /dev/null
+++ b/flightscore/src/components/ui-badge.ts
@@ -0,0 +1,79 @@
+// components/ui-badge.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type BadgeVariant = 'accent' | 'success' | 'warning' | 'muted' | 'error';
+
+@customElement('ui-badge')
+export class UiBadge extends LitElement {
+    static styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.3rem 0.75rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      border-radius: 2rem;
+      border: 1px solid transparent;
+      white-space: nowrap;
+    }
+
+    .badge.accent {
+      color: var(--color-accent);
+      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+      border-color: color-mix(
+        in srgb,
+        var(--color-accent) 25%,
+        transparent
+      );
+    }
+
+    .badge.success {
+      color: #30a46c;
+      background: color-mix(in srgb, #30a46c 10%, transparent);
+      border-color: color-mix(in srgb, #30a46c 25%, transparent);
+    }
+
+    .badge.warning {
+      color: #e79d13;
+      background: color-mix(in srgb, #e79d13 10%, transparent);
+      border-color: color-mix(in srgb, #e79d13 25%, transparent);
+    }
+
+    .badge.muted {
+      color: color-mix(in srgb, var(--color-text) 45%, transparent);
+      background: color-mix(in srgb, var(--color-text) 6%, transparent);
+      border-color: var(--color-border);
+    }
+
+    .badge.error {
+        color: #e5484d;
+        background: color-mix(in srgb, #e5484d 10%, transparent);
+        border-color: color-mix(in srgb, #e5484d 25%, transparent);
+    }
+
+
+    ::slotted(svg) {
+      width: 0.85rem;
+      height: 0.85rem;
+      flex-shrink: 0;
+    }
+  `;
+
+    @property() variant: BadgeVariant = 'accent';
+
+    render() {
+        return html`
+    <span class="badge ${this.variant}">
+        <slot></slot>
+    </span>
+    `;
+    }
+}
\ No newline at end of file
diff --git a/flightscore/src/components/ui-button-secondary.ts b/flightscore/src/components/ui-button-secondary.ts
new file mode 100644
index 0000000..c398b41
--- /dev/null
+++ b/flightscore/src/components/ui-button-secondary.ts
@@ -0,0 +1,72 @@
+// components/ui-button-secondary.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('ui-button-secondary')
+export class UiButtonSecondary extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    :host([full]) {
+      display: flex;
+    }
+
+    :host([full]) button {
+      width: 100%;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.45rem;
+      padding: 0.65rem 1.25rem;
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: var(--color-text);
+      background: transparent;
+      border: 1px solid var(--color-border);
+      border-radius: 0.5rem;
+      cursor: pointer;
+      transition:
+        border-color 0.25s ease,
+        color 0.25s ease,
+        background 0.25s ease,
+        transform 0.15s ease;
+    }
+
+    button:hover:not(:disabled) {
+      border-color: var(--color-accent);
+      color: var(--color-accent);
+      background: color-mix(in srgb, var(--color-accent) 6%, transparent);
+    }
+
+    button:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+
+    button:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    ::slotted(svg) {
+      width: 1rem;
+      height: 1rem;
+      flex-shrink: 0;
+    }
+  `;
+
+  @property({ type: Boolean }) disabled = false;
+  @property({ type: Boolean, reflect: true }) full = false;
+
+  render() {
+    return html`
+      <button ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `;
+  }
+}
\ No newline at end of file
diff --git a/flightscore/src/pages/home-page.ts b/flightscore/src/pages/home-page.ts
index afc691d..592f851 100644
--- a/flightscore/src/pages/home-page.ts
+++ b/flightscore/src/pages/home-page.ts
@@ -1,7 +1,11 @@
+// pages/home/home-page.ts (updated)
 import { LitElement, html, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import '../components/ui-card';
 import '../components/ui-button';
+import '../components/ui-button-secondary';
+import '../components/ui-badge';
+import '../components/stat-card';
+import '../components/icon-card';
 import '../components/ui-link';
 
 @customElement('home-page')
@@ -45,29 +49,8 @@ export class HomePage extends LitElement {
       background: var(--color-border);
     }
 
-    .hero-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.4rem;
-      padding: 0.35rem 0.85rem;
-      font-size: 0.78rem;
-      font-weight: 600;
-      letter-spacing: 0.03em;
-      text-transform: uppercase;
-      color: var(--color-accent);
-      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
-      border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
-      border-radius: 2rem;
-      margin-bottom: 1.5rem;
-    }
-
-    .hero-badge svg {
-      width: 0.85rem;
-      height: 0.85rem;
-    }
-
     .hero h1 {
-      margin: 0;
+      margin: 1.5rem 0 0;
       font-size: clamp(2.2rem, 5vw, 3.5rem);
       font-weight: 800;
       letter-spacing: -0.03em;
@@ -102,30 +85,6 @@ export class HomePage extends LitElement {
       justify-content: center;
     }
 
-    .btn-secondary {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.4rem;
-      padding: 0.65rem 1.25rem;
-      font-size: 0.95rem;
-      font-weight: 600;
-      color: var(--color-text);
-      background: transparent;
-      border: 1px solid var(--color-border);
-      border-radius: 0.5rem;
-      cursor: pointer;
-      transition:
-        border-color 0.25s ease,
-        color 0.25s ease,
-        background 0.25s ease;
-    }
-
-    .btn-secondary:hover {
-      border-color: var(--color-accent);
-      color: var(--color-accent);
-      background: color-mix(in srgb, var(--color-accent) 6%, transparent);
-    }
-
     section {
       padding: 4rem 1.5rem;
       max-width: 1100px;
@@ -168,84 +127,12 @@ export class HomePage extends LitElement {
       gap: 1rem;
     }
 
-    .stat-card {
-      background: var(--color-bg-nav);
-      border: 1px solid var(--color-border);
-      border-radius: 0.75rem;
-      padding: 1.5rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-      transition: border-color 0.25s ease;
-    }
-
-    .stat-card:hover {
-      border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
-    }
-
-    .stat-value {
-      font-size: 2rem;
-      font-weight: 800;
-      letter-spacing: -0.03em;
-      color: var(--color-accent);
-    }
-
-    .stat-label {
-      font-size: 0.85rem;
-      color: color-mix(in srgb, var(--color-text) 55%, transparent);
-      font-weight: 500;
-    }
-
     .features-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 1.25rem;
     }
 
-    .feature-card {
-      background: var(--color-bg-nav);
-      border: 1px solid var(--color-border);
-      border-radius: 0.75rem;
-      padding: 1.75rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-      transition: border-color 0.25s ease;
-    }
-
-    .feature-card:hover {
-      border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
-    }
-
-    .feature-icon {
-      width: 2.25rem;
-      height: 2.25rem;
-      display: grid;
-      place-items: center;
-      border-radius: 0.5rem;
-      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
-      color: var(--color-accent);
-    }
-
-    .feature-icon svg {
-      width: 1.15rem;
-      height: 1.15rem;
-    }
-
-    .feature-card h3 {
-      margin: 0;
-      font-size: 1rem;
-      font-weight: 650;
-      color: var(--color-text);
-    }
-
-    .feature-card p {
-      margin: 0;
-      font-size: 0.875rem;
-      line-height: 1.6;
-      color: color-mix(in srgb, var(--color-text) 55%, transparent);
-    }
-
     .competitions-list {
       display: flex;
       flex-direction: column;
@@ -265,7 +152,11 @@ export class HomePage extends LitElement {
     }
 
     .comp-row:hover {
-      border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
+      border-color: color-mix(
+        in srgb,
+        var(--color-accent) 40%,
+        transparent
+      );
     }
 
     .comp-date {
@@ -274,7 +165,11 @@ export class HomePage extends LitElement {
       align-items: center;
       min-width: 3.5rem;
       padding: 0.5rem 0.65rem;
-      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+      background: color-mix(
+        in srgb,
+        var(--color-accent) 10%,
+        transparent
+      );
       border-radius: 0.5rem;
       flex-shrink: 0;
     }
@@ -322,35 +217,6 @@ export class HomePage extends LitElement {
       flex-shrink: 0;
     }
 
-    .comp-badge {
-      font-size: 0.72rem;
-      font-weight: 600;
-      letter-spacing: 0.03em;
-      text-transform: uppercase;
-      padding: 0.3rem 0.7rem;
-      border-radius: 2rem;
-      flex-shrink: 0;
-    }
-
-    .comp-badge.upcoming {
-      color: var(--color-accent);
-      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
-      border: 1px solid
-        color-mix(in srgb, var(--color-accent) 25%, transparent);
-    }
-
-    .comp-badge.live {
-      color: #30a46c;
-      background: color-mix(in srgb, #30a46c 10%, transparent);
-      border: 1px solid color-mix(in srgb, #30a46c 25%, transparent);
-    }
-
-    .comp-badge.ended {
-      color: color-mix(in srgb, var(--color-text) 45%, transparent);
-      background: color-mix(in srgb, var(--color-text) 6%, transparent);
-      border: 1px solid var(--color-border);
-    }
-
     @media (max-width: 600px) {
       .hero {
         padding: 3.5rem 1.25rem 3rem;
@@ -364,10 +230,6 @@ export class HomePage extends LitElement {
         flex-wrap: wrap;
         gap: 0.75rem;
       }
-
-      .comp-badge {
-        margin-left: auto;
-      }
     }
   `;
 
@@ -384,29 +246,28 @@ export class HomePage extends LitElement {
   render() {
     return html`
       <div class="hero">
-        <div class="hero-badge">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <ui-badge variant="accent">
+          <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M12 2L2 7l10 5 10-5-10-5z" />
             <path d="M2 17l10 5 10-5" />
             <path d="M2 12l10 5 10-5" />
           </svg>
           Live Scoring Platform
-        </div>
+        </ui-badge>
         <h1>Precision scoring for <span>balloon competitions</span></h1>
         <p class="hero-sub">
-          Track tasks, manage participants, and deliver real-time results
-          for hot air balloon competitions worldwide.
+          Track tasks, manage participants, and deliver real-time
+          results for hot air balloon competitions worldwide.
         </p>
         <div class="hero-actions">
           <ui-button @click=${() => this.navigate('/competitions')}>
             Browse competitions
           </ui-button>
-          <button
-            class="btn-secondary"
+          <ui-button-secondary
             @click=${() => this.navigate('/register')}
           >
             Create account
-          </button>
+          </ui-button-secondary>
         </div>
       </div>
 
@@ -417,22 +278,13 @@ export class HomePage extends LitElement {
           FlightScore powers balloon competitions across the globe.
         </p>
         <div class="stats-grid">
-          <div class="stat-card">
-            <span class="stat-value">42</span>
-            <span class="stat-label">Competitions scored</span>
-          </div>
-          <div class="stat-card">
-            <span class="stat-value">318</span>
-            <span class="stat-label">Registered pilots</span>
-          </div>
-          <div class="stat-card">
-            <span class="stat-value">1,240</span>
-            <span class="stat-label">Tasks completed</span>
-          </div>
-          <div class="stat-card">
-            <span class="stat-value">12</span>
-            <span class="stat-label">Countries</span>
-          </div>
+          <stat-card value="42" label="Competitions scored"></stat-card>
+          <stat-card value="318" label="Registered pilots"></stat-card>
+          <stat-card
+            value="1,240"
+            label="Tasks completed"
+          ></stat-card>
+          <stat-card value="12" label="Countries"></stat-card>
         </div>
       </section>
 
@@ -443,92 +295,68 @@ export class HomePage extends LitElement {
           Everything organizers, judges, and pilots need in one place.
         </p>
         <div class="features-grid">
-          <div class="feature-card">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="10" />
-                <polyline points="12 6 12 12 16 14" />
-              </svg>
-            </div>
-            <h3>Real-Time Scoring</h3>
-            <p>
-              Scores update live as judges submit results. Pilots and
-              spectators always see the latest standings.
-            </p>
-          </div>
-          <div class="feature-card">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
-                <polyline points="14 2 14 8 20 8" />
-                <line x1="16" y1="13" x2="8" y2="13" />
-                <line x1="16" y1="17" x2="8" y2="17" />
-                <polyline points="10 9 9 9 8 9" />
-              </svg>
-            </div>
-            <h3>Task Management</h3>
-            <p>
-              Define and manage competition tasks with support for all
-              standard ballooning task types.
-            </p>
-          </div>
-          <div class="feature-card">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
-                <circle cx="9" cy="7" r="4" />
-                <path d="M23 21v-2a4 4 0 00-3-3.87" />
-                <path d="M16 3.13a4 4 0 010 7.75" />
-              </svg>
-            </div>
-            <h3>Pilot Profiles</h3>
-            <p>
-              Every pilot gets a profile with competition history,
-              rankings, and performance statistics.
-            </p>
-          </div>
-          <div class="feature-card">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="1" y="3" width="15" height="13" rx="2" ry="2" />
-                <path d="M16 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2" />
-                <line x1="8" y1="21" x2="8" y2="16" />
-                <line x1="4" y1="21" x2="12" y2="21" />
-              </svg>
-            </div>
-            <h3>Live Leaderboard</h3>
-            <p>
-              Public leaderboards let spectators follow the action
-              from anywhere in the world.
-            </p>
-          </div>
-          <div class="feature-card">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
-                <circle cx="12" cy="10" r="3" />
-              </svg>
-            </div>
-            <h3>GPS Integration</h3>
-            <p>
-              Import GPS tracks and calculate distances to targets
-              automatically for precise scoring.
-            </p>
-          </div>
-          <div class="feature-card">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                <line x1="3" y1="9" x2="21" y2="9" />
-                <line x1="9" y1="21" x2="9" y2="9" />
-              </svg>
-            </div>
-            <h3>Result Export</h3>
-            <p>
-              Export final standings and detailed score sheets as PDF
-              or CSV for official records.
-            </p>
-          </div>
+          <icon-card
+            heading="Real-Time Scoring"
+            description="Scores update live as judges submit results. Pilots and spectators always see the latest standings."
+          >
+            <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10" />
+              <polyline points="12 6 12 12 16 14" />
+            </svg>
+          </icon-card>
+          <icon-card
+            heading="Task Management"
+            description="Define and manage competition tasks with support for all standard ballooning task types."
+          >
+            <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+              <line x1="16" y1="13" x2="8" y2="13" />
+              <line x1="16" y1="17" x2="8" y2="17" />
+              <polyline points="10 9 9 9 8 9" />
+            </svg>
+          </icon-card>
+          <icon-card
+            heading="Pilot Profiles"
+            description="Every pilot gets a profile with competition history, rankings, and performance statistics."
+          >
+            <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M23 21v-2a4 4 0 00-3-3.87" />
+              <path d="M16 3.13a4 4 0 010 7.75" />
+            </svg>
+          </icon-card>
+          <icon-card
+            heading="Live Leaderboard"
+            description="Public leaderboards let spectators follow the action from anywhere in the world."
+          >
+            <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="1" y="3" width="15" height="13" rx="2" ry="2" />
+              <path d="M16 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2" />
+              <line x1="8" y1="21" x2="8" y2="16" />
+              <line x1="4" y1="21" x2="12" y2="21" />
+            </svg>
+          </icon-card>
+          <icon-card
+            heading="GPS Integration"
+            description="Import GPS tracks and calculate distances to targets automatically for precise scoring."
+          >
+            <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+              <circle cx="12" cy="10" r="3" />
+            </svg>
+          </icon-card>
+          <icon-card
+            heading="Result Export"
+            description="Export final standings and detailed score sheets as PDF or CSV for official records."
+          >
+            <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+              <line x1="3" y1="9" x2="21" y2="9" />
+              <line x1="9" y1="21" x2="9" y2="9" />
+            </svg>
+          </icon-card>
         </div>
       </section>
 
@@ -548,9 +376,9 @@ export class HomePage extends LitElement {
               <span class="comp-date-month">Mar</span>
             </div>
             <div class="comp-info">
-              <span class="comp-name"
-                >European Balloon Challenge 2026</span
-              >
+              <span class="comp-name">
+                European Balloon Challenge 2026
+              </span>
               <span class="comp-location">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
@@ -559,7 +387,7 @@ export class HomePage extends LitElement {
                 Salzburg, Austria
               </span>
             </div>
-            <span class="comp-badge upcoming">Upcoming</span>
+            <ui-badge variant="accent">Upcoming</ui-badge>
           </div>
 
           <div
@@ -580,7 +408,7 @@ export class HomePage extends LitElement {
                 Goreme, Turkey
               </span>
             </div>
-            <span class="comp-badge live">Live</span>
+            <ui-badge variant="success">Live</ui-badge>
           </div>
 
           <div
@@ -592,9 +420,9 @@ export class HomePage extends LitElement {
               <span class="comp-date-month">Feb</span>
             </div>
             <div class="comp-info">
-              <span class="comp-name"
-                >Albuquerque Winter Fiesta</span
-              >
+              <span class="comp-name">
+                Albuquerque Winter Fiesta
+              </span>
               <span class="comp-location">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
@@ -603,7 +431,7 @@ export class HomePage extends LitElement {
                 New Mexico, USA
               </span>
             </div>
-            <span class="comp-badge ended">Ended</span>
+            <ui-badge variant="muted">Ended</ui-badge>
           </div>
 
           <div
@@ -615,9 +443,9 @@ export class HomePage extends LitElement {
               <span class="comp-date-month">Jan</span>
             </div>
             <div class="comp-info">
-              <span class="comp-name"
-                >Swiss Alpine Balloon Trophy</span
-              >
+              <span class="comp-name">
+                Swiss Alpine Balloon Trophy
+              </span>
               <span class="comp-location">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
@@ -626,7 +454,7 @@ export class HomePage extends LitElement {
                 Chateau-d'Oex, Switzerland
               </span>
             </div>
-            <span class="comp-badge ended">Ended</span>
+            <ui-badge variant="error">Canceled</ui-badge>
           </div>
         </div>
       </section>