diff --git a/package.json b/package.json
index 57d9d23..b63aa8c 100644
--- a/package.json
+++ b/package.json
@@ -15,12 +15,16 @@
   "license": "MIT",
   "dependencies": {
     "@tauri-apps/api": "^2",
-    "@tauri-apps/plugin-opener": "^2"
+    "@tauri-apps/plugin-opener": "^2",
+    "carbon-components-svelte": "^0.99.0",
+    "carbon-icons-svelte": "^13.8.0",
+    "carbon-preprocess-svelte": "^0.11.23"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.9.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tauri-apps/cli": "^2",
     "@wdio/cli": "^9.19.0",
     "@wdio/local-runner": "^9.19.0",
     "@wdio/mocha-framework": "^9.19.0",
@@ -28,7 +32,6 @@
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "typescript": "~5.6.2",
-    "vite": "^6.0.3",
-    "@tauri-apps/cli": "^2"
+    "vite": "^6.0.3"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ab8a56..0ac0a1e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,15 @@ importers:
       '@tauri-apps/plugin-opener':
         specifier: ^2
         version: 2.5.2
+      carbon-components-svelte:
+        specifier: ^0.99.0
+        version: 0.99.0
+      carbon-icons-svelte:
+        specifier: ^13.8.0
+        version: 13.8.0
+      carbon-preprocess-svelte:
+        specifier: ^0.11.23
+        version: 0.11.23
     devDependencies:
       '@sveltejs/adapter-static':
         specifier: ^3.0.6
@@ -374,6 +383,10 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@ibm/telemetry-js@1.11.0':
+    resolution: {integrity: sha512-RO/9j+URJnSfseWg9ZkEX9p+a3Ousd33DBU7rOafoZB08RqdzxFVYJ2/iM50dkBuD0o7WX7GYt1sLbNgCoE+pA==}
+    hasBin: true
+
   '@inquirer/ansi@1.0.2':
     resolution: {integrity: sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==}
     engines: {node: '>=18'}
@@ -1099,6 +1112,15 @@ packages:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
 
+  carbon-components-svelte@0.99.0:
+    resolution: {integrity: sha512-h5S4/kaKa30q3nLLky4G8MTw25j6ZHtpBifdoxvC63Q2YTdaBv91OID+L0m70XRvNHCoxgi7ewfEZqzfsaZ03A==}
+
+  carbon-icons-svelte@13.8.0:
+    resolution: {integrity: sha512-1sTbSOhiKjs7BXj2Ctk6tekSNX4DLUy9miNeYaQK/jeveM4x/+et09JH8xnrwRE1QseLdRd3sOoVwqPZEYsdkA==}
+
+  carbon-preprocess-svelte@0.11.23:
+    resolution: {integrity: sha512-ftMbHZpsYRf1Vd4AepihhbN6iUGKW96F/BKr4Z8xkRt1VNujFYE+a0U6A4wzwGJiUvLfb1CyE+QFTCLgMGaueQ==}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -1446,6 +1468,9 @@ packages:
     resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
     hasBin: true
 
+  flatpickr@4.6.9:
+    resolution: {integrity: sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==}
+
   foreground-child@3.3.1:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
@@ -2599,6 +2624,8 @@ snapshots:
   '@esbuild/win32-x64@0.27.2':
     optional: true
 
+  '@ibm/telemetry-js@1.11.0': {}
+
   '@inquirer/ansi@1.0.2': {}
 
   '@inquirer/checkbox@4.3.2(@types/node@25.0.3)':
@@ -3365,6 +3392,15 @@ snapshots:
 
   camelcase@6.3.0: {}
 
+  carbon-components-svelte@0.99.0:
+    dependencies:
+      '@ibm/telemetry-js': 1.11.0
+      flatpickr: 4.6.9
+
+  carbon-icons-svelte@13.8.0: {}
+
+  carbon-preprocess-svelte@0.11.23: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -3789,6 +3825,8 @@ snapshots:
 
   flat@5.0.2: {}
 
+  flatpickr@4.6.9: {}
+
   foreground-child@3.3.1:
     dependencies:
       cross-spawn: 7.0.6
diff --git a/src/app.css b/src/app.css
index 8d7305b..7057c02 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,67 +1,10 @@
 /* Global styles for Potasko */
+/* Note: Most styling is handled by Carbon Design System */
 
-:root {
-  /* Responsive breakpoints */
-  --mobile-breakpoint: 768px;
-  --touch-target-min: 44px;
-
-  /* Colors - Light mode */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f9fafb;
-  --bg-hover: #f3f4f6;
-  --bg-selected: #e5e7eb;
-  --text-primary: #111827;
-  --text-secondary: #6b7280;
-  --border-color: #e5e7eb;
-  --accent-color: #3b82f6;
-  --error-color: #dc2626;
-
-  /* Priority colors - Light mode */
-  --priority-high-bg: #fee2e2;
-  --priority-high-text: #dc2626;
-  --priority-medium-bg: #fef3c7;
-  --priority-medium-text: #d97706;
-  --priority-low-bg: #dbeafe;
-  --priority-low-text: #2563eb;
-
-  /* Typography */
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  color: var(--text-primary);
-  background-color: var(--bg-primary);
-
-  /* Rendering */
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-primary: #1f2937;
-    --bg-secondary: #111827;
-    --bg-hover: #374151;
-    --bg-selected: #4b5563;
-    --text-primary: #f9fafb;
-    --text-secondary: #9ca3af;
-    --border-color: #374151;
-    --accent-color: #60a5fa;
-    --error-color: #f87171;
-
-    /* Priority colors - Dark mode */
-    --priority-high-bg: #7f1d1d;
-    --priority-high-text: #fca5a5;
-    --priority-medium-bg: #78350f;
-    --priority-medium-text: #fcd34d;
-    --priority-low-bg: #1e3a5f;
-    --priority-low-text: #93c5fd;
-  }
-}
+/* ============================================
+   Base Reset & Setup
+   ============================================ */
 
-/* Reset */
 *,
 *::before,
 *::after {
@@ -78,79 +21,56 @@ body {
   overflow: hidden;
 }
 
-/* Mobile drawer backdrop */
-.backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 99;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-}
-
-.backdrop.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* Mobile header */
-.mobile-header {
-  display: none;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  padding-top: calc(0.75rem + env(safe-area-inset-top, 0));
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
-}
+/* ============================================
+   Legacy Color Variables (fallbacks)
+   Used by components that haven't fully migrated
+   ============================================ */
 
-.mobile-header h1 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  margin: 0;
-}
-
-.hamburger-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--touch-target-min);
-  height: var(--touch-target-min);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--text-primary);
-  border-radius: 8px;
-}
-
-.hamburger-btn:hover {
-  background: var(--bg-hover);
-}
-
-.hamburger-btn svg {
-  width: 24px;
-  height: 24px;
-}
-
-@media (max-width: 768px) {
-  .mobile-header {
-    display: flex;
-  }
-
-  /* Safe area padding for mobile devices */
-  .safe-area-bottom {
-    padding-bottom: env(safe-area-inset-bottom, 0);
+:root {
+  /* Fallback colors - Carbon tokens preferred */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f4f4f4;
+  --bg-hover: #e8e8e8;
+  --text-primary: #161616;
+  --text-secondary: #525252;
+  --border-color: #e0e0e0;
+  --accent-color: #0f62fe;
+  --error-color: #da1e28;
+
+  /* Priority colors for task tags */
+  --priority-high-bg: #fff1f1;
+  --priority-high-text: #da1e28;
+  --priority-medium-bg: #fff8e1;
+  --priority-medium-text: #f1c21b;
+  --priority-low-bg: #e5f6ff;
+  --priority-low-text: #0043ce;
+}
+
+/* Dark mode fallbacks */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #262626;
+    --bg-secondary: #161616;
+    --bg-hover: #393939;
+    --text-primary: #f4f4f4;
+    --text-secondary: #c6c6c6;
+    --border-color: #525252;
+    --accent-color: #78a9ff;
+    --error-color: #ff8389;
+
+    --priority-high-bg: #520408;
+    --priority-high-text: #ffb3b8;
+    --priority-medium-bg: #4a3000;
+    --priority-medium-text: #f1c21b;
+    --priority-low-bg: #002d5c;
+    --priority-low-text: #a6c8ff;
   }
 }
 
-/* Focus styles */
-:focus-visible {
-  outline: 2px solid var(--accent-color);
-  outline-offset: 2px;
-}
+/* ============================================
+   Scrollbar Styling
+   ============================================ */
 
-/* Scrollbar styling */
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -161,16 +81,19 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--border-color);
+  background: var(--cds-border-subtle, var(--border-color));
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--text-secondary);
+  background: var(--cds-text-secondary, var(--text-secondary));
 }
 
-/* Selection */
+/* ============================================
+   Selection
+   ============================================ */
+
 ::selection {
-  background: var(--accent-color);
-  color: white;
+  background: var(--cds-interactive, var(--accent-color));
+  color: var(--cds-text-on-color, white);
 }
diff --git a/src/lib/carbon-overrides.css b/src/lib/carbon-overrides.css
new file mode 100644
index 0000000..0a95980
--- /dev/null
+++ b/src/lib/carbon-overrides.css
@@ -0,0 +1,160 @@
+/* Carbon Design System overrides for Potasko */
+
+/* ============================================
+   Safe Area Insets (notched devices)
+   ============================================ */
+
+/* Header - account for notch/status bar */
+.bx--header {
+  padding-top: env(safe-area-inset-top, 0);
+}
+
+/* Content - account for bottom safe area */
+.bx--content {
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+/* SideNav - account for safe areas */
+.bx--side-nav {
+  padding-top: env(safe-area-inset-top, 0);
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+/* ============================================
+   Mobile Bottom Sheet Modal
+   ============================================ */
+
+/* On mobile, position modals at bottom like a bottom sheet */
+@media (max-width: 1056px) {
+  .bx--modal-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    max-height: 90vh;
+    max-width: 100%;
+    width: 100%;
+    margin: 0;
+    border-radius: 1rem 1rem 0 0;
+    transform: translateY(100%);
+    animation: slideUp 0.3s ease forwards;
+  }
+
+  .bx--modal.is-visible .bx--modal-container {
+    transform: translateY(0);
+  }
+
+  /* Add drag handle appearance */
+  .bx--modal-header::before {
+    content: '';
+    display: block;
+    width: 36px;
+    height: 4px;
+    background: var(--cds-border-subtle, #e0e0e0);
+    border-radius: 2px;
+    margin: 0 auto 0.5rem;
+  }
+
+  /* Account for bottom safe area in modal footer */
+  .bx--modal-footer {
+    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* ============================================
+   Touch Target Improvements
+   ============================================ */
+
+@media (max-width: 1056px) {
+  /* Larger checkboxes for touch */
+  .bx--checkbox-label::before,
+  .bx--checkbox-label::after {
+    width: 24px;
+    height: 24px;
+  }
+
+  /* Ensure buttons meet touch target guidelines */
+  .bx--btn--sm {
+    min-height: 44px;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  /* Larger form inputs on mobile */
+  .bx--text-input,
+  .bx--text-area,
+  .bx--select-input,
+  .bx--date-picker__input {
+    min-height: 44px;
+    font-size: 16px; /* Prevents iOS zoom on focus */
+  }
+}
+
+/* ============================================
+   SideNav Tweaks
+   ============================================ */
+
+/* Ensure SideNav items have adequate touch targets on mobile */
+@media (max-width: 1056px) {
+  .bx--side-nav__link,
+  .bx--side-nav__menu-item {
+    min-height: 48px;
+  }
+}
+
+/* Fix SideNav menu text overflow */
+.bx--side-nav__link-text,
+.bx--side-nav__menu-item > .bx--side-nav__link-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ============================================
+   DataTable Mobile Adjustments
+   ============================================ */
+
+@media (max-width: 1056px) {
+  /* Allow horizontal scroll on small screens */
+  .bx--data-table-container {
+    overflow-x: auto;
+  }
+
+  .bx--data-table {
+    min-width: 500px;
+  }
+}
+
+/* ============================================
+   Accordion Tweaks
+   ============================================ */
+
+/* Reduce padding in accordion content for task lists */
+.bx--accordion__content {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* ============================================
+   Form Layout Improvements
+   ============================================ */
+
+/* Better spacing for form groups */
+.bx--form-item {
+  margin-bottom: 1rem;
+}
+
+/* DatePicker calendar positioning */
+.bx--date-picker--single .bx--date-picker__calendar {
+  z-index: 9100;
+}
diff --git a/src/lib/components/AccountForm.svelte b/src/lib/components/AccountForm.svelte
index 9826234..3b44eaa 100644
--- a/src/lib/components/AccountForm.svelte
+++ b/src/lib/components/AccountForm.svelte
@@ -3,6 +3,18 @@
   import { accountStore } from '$lib/stores/accounts.svelte';
   import { listStore } from '$lib/stores/lists.svelte';
   import type { Account, CalendarInfo } from '$lib/types';
+  import {
+    Form,
+    TextInput,
+    PasswordInput,
+    Button,
+    ButtonSet,
+    InlineNotification,
+    UnorderedList,
+    ListItem,
+    InlineLoading,
+  } from 'carbon-components-svelte';
+  import { Checkmark, WarningFilled } from 'carbon-icons-svelte';
 
   interface Props {
     account?: Account | null;
@@ -122,111 +134,118 @@
     }
   });
 
+  const taskCalendars = $derived(discoveredCalendars.filter(c => c.supports_vtodo));
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-<form class="account-form" onsubmit={handleSubmit}>
+<Form on:submit={handleSubmit} class="account-form">
   <h3>{isEditing ? 'Edit Account' : 'Add CalDAV Account'}</h3>
 
-  <label class="form-field">
-    <span>Account Name</span>
-    <input
-      type="text"
-      bind:value={name}
-      placeholder="e.g., Work, Personal"
-      disabled={saving}
-    />
-  </label>
-
-  <label class="form-field">
-    <span>Server URL</span>
-    <input
-      type="url"
-      bind:value={serverUrl}
-      placeholder="https://caldav.example.com"
-      disabled={saving}
-    />
-  </label>
-
-  <label class="form-field">
-    <span>Username</span>
-    <input
-      type="text"
-      bind:value={username}
-      placeholder="Username"
-      disabled={saving}
-    />
-  </label>
-
-  <label class="form-field">
-    <span>Password</span>
-    <input
-      type="password"
-      bind:value={password}
-      placeholder="Password"
-      disabled={saving}
-    />
-  </label>
+  <TextInput
+    bind:value={name}
+    labelText="Account Name"
+    placeholder="e.g., Work, Personal"
+    disabled={saving}
+    required
+  />
+
+  <TextInput
+    bind:value={serverUrl}
+    labelText="Server URL"
+    placeholder="https://caldav.example.com"
+    disabled={saving}
+    type="url"
+    required
+  />
+
+  <TextInput
+    bind:value={username}
+    labelText="Username"
+    placeholder="Username"
+    disabled={saving}
+    required
+  />
+
+  <PasswordInput
+    bind:value={password}
+    labelText="Password"
+    placeholder="Password"
+    disabled={saving}
+    required
+  />
 
   <div class="test-section">
-    <button
-      type="button"
-      class="test-btn"
-      onclick={handleTestConnection}
+    <Button
+      kind="tertiary"
+      size="small"
+      on:click={handleTestConnection}
       disabled={!serverUrl.trim() || !username.trim() || !password.trim() || accountStore.testing || saving}
     >
-      {accountStore.testing ? 'Testing...' : 'Test Connection'}
-    </button>
+      {#if accountStore.testing}
+        <InlineLoading description="Testing..." />
+      {:else}
+        Test Connection
+      {/if}
+    </Button>
 
     {#if accountStore.testResult}
       {#if accountStore.testResult.success}
-        <div class="test-result success">
-          <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-          </svg>
-          <span>Connection successful!</span>
-        </div>
-        {#if discoveredCalendars.length > 0}
+        <InlineNotification
+          kind="success"
+          title="Success"
+          subtitle="Connection successful!"
+          hideCloseButton
+        />
+        {#if taskCalendars.length > 0}
           <div class="calendars">
             <span class="calendars-label">Discovered calendars with tasks:</span>
-            <ul>
-              {#each discoveredCalendars.filter(c => c.supports_vtodo) as cal}
-                <li>
+            <UnorderedList>
+              {#each taskCalendars as cal}
+                <ListItem>
                   {#if cal.color}
                     <span class="cal-color" style:background-color={cal.color}></span>
                   {/if}
                   {cal.display_name || cal.href}
-                </li>
+                </ListItem>
               {/each}
-              {#if discoveredCalendars.filter(c => c.supports_vtodo).length === 0}
-                <li class="no-calendars">No calendars with task support found</li>
-              {/if}
-            </ul>
+            </UnorderedList>
           </div>
+        {:else}
+          <InlineNotification
+            kind="warning"
+            title="No task calendars"
+            subtitle="No calendars with task support found"
+            hideCloseButton
+          />
         {/if}
       {:else}
-        <div class="test-result error">
-          <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-          </svg>
-          <span>{accountStore.testResult.error || 'Connection failed'}</span>
-        </div>
+        <InlineNotification
+          kind="error"
+          title="Failed"
+          subtitle={accountStore.testResult.error || 'Connection failed'}
+          hideCloseButton
+        />
       {/if}
     {/if}
   </div>
 
   {#if accountStore.error && !accountStore.testResult}
-    <p class="error">{accountStore.error}</p>
+    <InlineNotification
+      kind="error"
+      title="Error"
+      subtitle={accountStore.error}
+      hideCloseButton
+    />
   {/if}
 
-  <div class="form-actions">
-    <button type="button" onclick={onClose} disabled={saving}>Cancel</button>
-    <button
+  <ButtonSet class="form-actions">
+    <Button kind="secondary" on:click={onClose} disabled={saving}>
+      Cancel
+    </Button>
+    <Button
       type="submit"
-      class="primary"
       disabled={!name.trim() || !serverUrl.trim() || !username.trim() || !password.trim() || saving || (!isEditing && !connectionValid)}
-      title={!isEditing && !connectionValid ? 'Test connection first' : ''}
     >
       {#if saving && isEditing}
         Saving...
@@ -237,21 +256,20 @@
       {:else}
         Add Account
       {/if}
-    </button>
-  </div>
+    </Button>
+  </ButtonSet>
+
   {#if !isEditing && !connectionValid && name.trim() && serverUrl.trim() && username.trim() && password.trim()}
     <p class="hint">Please test the connection before adding the account.</p>
   {/if}
-</form>
+</Form>
 
 <style>
-  .account-form {
+  :global(.account-form) {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    padding: 1.5rem;
-    background: var(--bg-secondary);
-    border-radius: 8px;
+    padding: 1rem;
   }
 
   h3 {
@@ -260,30 +278,6 @@
     font-weight: 600;
   }
 
-  .form-field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-
-  .form-field span {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-  }
-
-  .form-field input {
-    padding: 0.625rem;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    font-size: 0.9375rem;
-    background: var(--bg-primary);
-  }
-
-  .form-field input:focus {
-    outline: none;
-    border-color: var(--accent-color);
-  }
-
   .test-section {
     display: flex;
     flex-direction: column;
@@ -291,135 +285,37 @@
     padding-top: 0.5rem;
   }
 
-  .test-btn {
-    align-self: flex-start;
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    background: var(--bg-primary);
-    cursor: pointer;
-    font-size: 0.875rem;
-  }
-
-  .test-btn:hover:not(:disabled) {
-    background: var(--bg-hover);
-  }
-
-  .test-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .test-result {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem;
-    border-radius: 6px;
-    font-size: 0.875rem;
-  }
-
-  .test-result.success {
-    background: var(--priority-low-bg);
-    color: var(--priority-low-text);
-  }
-
-  .test-result.error {
-    background: var(--priority-high-bg);
-    color: var(--priority-high-text);
-  }
-
-  .test-result .icon {
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-  }
-
   .calendars {
     padding: 0.75rem;
-    background: var(--bg-primary);
-    border-radius: 6px;
+    background: var(--cds-layer, var(--bg-primary));
+    border-radius: 0;
     font-size: 0.875rem;
   }
 
   .calendars-label {
     display: block;
     margin-bottom: 0.5rem;
-    color: var(--text-secondary);
-  }
-
-  .calendars ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-
-  .calendars li {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+    color: var(--cds-text-secondary, var(--text-secondary));
   }
 
   .cal-color {
     width: 12px;
     height: 12px;
     border-radius: 3px;
-    flex-shrink: 0;
-  }
-
-  .no-calendars {
-    color: var(--text-secondary);
-    font-style: italic;
-  }
-
-  .error {
-    color: var(--error-color);
-    font-size: 0.875rem;
-    margin: 0;
+    display: inline-block;
+    margin-right: 0.5rem;
+    vertical-align: middle;
   }
 
-  .form-actions {
-    display: flex;
+  :global(.form-actions) {
     justify-content: flex-end;
-    gap: 0.75rem;
     padding-top: 0.5rem;
   }
 
-  .form-actions button {
-    padding: 0.625rem 1.25rem;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-
-  .form-actions button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .form-actions button.primary {
-    background: var(--accent-color);
-    color: white;
-  }
-
-  .form-actions button:not(.primary) {
-    background: transparent;
-    border: 1px solid var(--border-color);
-  }
-
-  .form-actions button:not(.primary):hover:not(:disabled) {
-    background: var(--bg-hover);
-  }
-
   .hint {
     margin: 0;
     font-size: 0.8125rem;
-    color: var(--text-secondary);
+    color: var(--cds-text-secondary, var(--text-secondary));
     text-align: right;
   }
 </style>
diff --git a/src/lib/components/AccountList.svelte b/src/lib/components/AccountList.svelte
index 18ad42c..7c9c6f2 100644
--- a/src/lib/components/AccountList.svelte
+++ b/src/lib/components/AccountList.svelte
@@ -5,6 +5,14 @@
   import AccountForm from './AccountForm.svelte';
   import SyncLogModal from './SyncLogModal.svelte';
   import type { Account } from '$lib/types';
+  import {
+    Button,
+    Tile,
+    InlineLoading,
+    InlineNotification,
+    TooltipDefinition,
+  } from 'carbon-components-svelte';
+  import { Add, Renew, Edit, TrashCan, Checkmark } from 'carbon-icons-svelte';
 
   // UI state
   let showAddForm = $state(false);
@@ -88,88 +96,69 @@
 <div class="account-list">
   <div class="header">
     <h2>CalDAV Accounts</h2>
-    <button class="add-btn" onclick={handleAddClick}>
-      <svg viewBox="0 0 24 24" fill="currentColor">
-        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
-      </svg>
+    <Button kind="primary" size="small" icon={Add} on:click={handleAddClick}>
       Add Account
-    </button>
+    </Button>
   </div>
 
   {#if accountStore.loading}
-    <p class="loading">Loading accounts...</p>
+    <InlineLoading description="Loading accounts..." />
   {:else if accountStore.accounts.length === 0 && !showAddForm}
-    <div class="empty-state">
-      <svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-      </svg>
+    <Tile class="empty-state">
+      <Checkmark size={48} class="empty-icon" />
       <p>No CalDAV accounts configured</p>
       <p class="hint">Add an account to sync tasks with your CalDAV server</p>
-    </div>
+    </Tile>
   {:else}
-    <ul class="accounts">
+    <div class="accounts">
       {#each accountStore.accounts as account (account.id)}
-        <li class="account-item">
+        <Tile class="account-item">
           <div class="account-info">
             <span class="account-name">{account.name}</span>
             <span class="account-server">{account.server_url}</span>
             <span class="account-user">{account.username}</span>
           </div>
           <div class="account-actions">
-            <button
-              class="icon-btn sync-btn"
-              onclick={() => handleSyncClick(account)}
+            <Button
+              kind="ghost"
+              size="small"
+              icon={Renew}
+              iconDescription="Sync account"
+              on:click={() => handleSyncClick(account)}
               disabled={syncStore.syncing}
-              title="Sync account"
-            >
-              {#if syncStore.syncing && syncStore.syncingAccountId === account.id}
-                <svg class="spinning" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
-                </svg>
-              {:else}
-                <svg viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
-                </svg>
-              {/if}
-            </button>
-            <button
-              class="icon-btn"
-              onclick={() => handleEditClick(account)}
-              title="Edit account"
-            >
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-              </svg>
-            </button>
-            <button
-              class="icon-btn danger"
-              onclick={() => handleDeleteClick(account)}
-              title="Delete account"
-            >
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-              </svg>
-            </button>
+              class={syncStore.syncing && syncStore.syncingAccountId === account.id ? 'spinning' : ''}
+            />
+            <Button
+              kind="ghost"
+              size="small"
+              icon={Edit}
+              iconDescription="Edit account"
+              on:click={() => handleEditClick(account)}
+            />
+            <Button
+              kind="danger-ghost"
+              size="small"
+              icon={TrashCan}
+              iconDescription="Delete account"
+              on:click={() => handleDeleteClick(account)}
+            />
           </div>
-        </li>
+        </Tile>
       {/each}
-    </ul>
+    </div>
 
     {#if syncStore.lastResult}
-      <div class="sync-result" class:success={syncStore.lastResult.success} class:error={!syncStore.lastResult.success}>
-        {#if syncStore.lastResult.success}
-          <span class="sync-result-icon">✓</span>
-          <span>{formatSyncResult()}</span>
-        {:else}
-          <span class="sync-result-icon">✗</span>
-          <span>{syncStore.lastResult.error || 'Sync failed'}</span>
-        {/if}
-      </div>
+      <InlineNotification
+        kind={syncStore.lastResult.success ? 'success' : 'error'}
+        title={syncStore.lastResult.success ? 'Sync complete' : 'Sync failed'}
+        subtitle={syncStore.lastResult.success ? formatSyncResult() : (syncStore.lastResult.error || 'Unknown error')}
+        hideCloseButton
+      />
     {/if}
 
-    <button class="view-log-btn" onclick={() => showSyncLog = true}>
+    <Button kind="tertiary" size="small" on:click={() => showSyncLog = true} class="view-log-btn">
       View Sync Log
-    </button>
+    </Button>
   {/if}
 
   {#if showAddForm}
@@ -181,7 +170,12 @@
   {/if}
 
   {#if accountStore.error && !showAddForm && !editingAccount}
-    <p class="error">{accountStore.error}</p>
+    <InlineNotification
+      kind="error"
+      title="Error"
+      subtitle={accountStore.error}
+      hideCloseButton
+    />
   {/if}
 
   {#if showSyncLog}
@@ -208,44 +202,13 @@
     font-weight: 600;
   }
 
-  .add-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    background: var(--accent-color);
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-
-  .add-btn svg {
-    width: 18px;
-    height: 18px;
-  }
-
-  .add-btn:hover {
-    opacity: 0.9;
-  }
-
-  .loading {
-    color: var(--text-secondary);
-    text-align: center;
-    padding: 2rem;
-  }
-
-  .empty-state {
+  :global(.empty-state) {
     text-align: center;
-    padding: 3rem 2rem;
-    color: var(--text-secondary);
+    padding: 3rem 2rem !important;
+    color: var(--cds-text-secondary, var(--text-secondary));
   }
 
-  .empty-icon {
-    width: 48px;
-    height: 48px;
+  :global(.empty-icon) {
     opacity: 0.5;
     margin-bottom: 1rem;
   }
@@ -260,22 +223,15 @@
   }
 
   .accounts {
-    list-style: none;
-    margin: 0;
-    padding: 0;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
 
-  .account-item {
-    display: flex;
+  :global(.account-item) {
+    display: flex !important;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem;
-    background: var(--bg-secondary);
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
   }
 
   .account-info {
@@ -292,7 +248,7 @@
 
   .account-server {
     font-size: 0.875rem;
-    color: var(--text-secondary);
+    color: var(--cds-text-secondary, var(--text-secondary));
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -300,54 +256,17 @@
 
   .account-user {
     font-size: 0.8125rem;
-    color: var(--text-secondary);
+    color: var(--cds-text-secondary, var(--text-secondary));
     opacity: 0.8;
   }
 
   .account-actions {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.25rem;
     flex-shrink: 0;
   }
 
-  .icon-btn {
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-secondary);
-  }
-
-  .icon-btn svg {
-    width: 18px;
-    height: 18px;
-  }
-
-  .icon-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .icon-btn.danger:hover {
-    background: var(--priority-high-bg);
-    color: var(--priority-high-text);
-  }
-
-  .icon-btn.sync-btn {
-    color: var(--accent-color);
-  }
-
-  .icon-btn.sync-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .spinning {
+  :global(.spinning) {
     animation: spin 1s linear infinite;
   }
 
@@ -356,54 +275,8 @@
     to { transform: rotate(360deg); }
   }
 
-  .sync-result {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1rem;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    margin-top: 0.5rem;
-  }
-
-  .sync-result.success {
-    background: var(--priority-low-bg);
-    color: var(--priority-low-text);
-  }
-
-  .sync-result.error {
-    background: var(--priority-high-bg);
-    color: var(--priority-high-text);
-  }
-
-  .sync-result-icon {
-    font-weight: bold;
-  }
-
-  .error {
-    color: var(--error-color);
-    font-size: 0.875rem;
-    padding: 0.75rem;
-    background: var(--priority-high-bg);
-    border-radius: 6px;
-    margin: 0;
-  }
-
-  .view-log-btn {
-    display: block;
+  :global(.view-log-btn) {
     width: 100%;
-    padding: 0.5rem;
-    margin-top: 0.75rem;
-    background: transparent;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.8125rem;
-    color: var(--text-secondary);
-  }
-
-  .view-log-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
+    justify-content: center;
   }
 </style>
diff --git a/src/lib/components/DeleteListModal.svelte b/src/lib/components/DeleteListModal.svelte
index 946918e..8d06ba4 100644
--- a/src/lib/components/DeleteListModal.svelte
+++ b/src/lib/components/DeleteListModal.svelte
@@ -2,6 +2,16 @@
   import { getTaskCount } from '$lib/api';
   import { listStore } from '$lib/stores/lists.svelte';
   import type { TaskList } from '$lib/types';
+  import {
+    ComposedModal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    Button,
+    InlineNotification,
+    InlineLoading,
+  } from 'carbon-components-svelte';
+  import { Warning, WarningAlt } from 'carbon-icons-svelte';
 
   interface Props {
     list: TaskList;
@@ -52,263 +62,98 @@
     }
   }
 
-  function handleBackdropClick(event: MouseEvent) {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      onClose();
-    }
-  }
-
   const isSynced = $derived(!!list.caldav_url);
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-<div class="modal-backdrop" onclick={handleBackdropClick}>
-  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
-    <div class="modal-header">
-      <h2 id="modal-title">Delete List</h2>
-      <button class="close-btn" onclick={onClose} aria-label="Close">
-        <svg viewBox="0 0 24 24" fill="currentColor">
-          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-        </svg>
-      </button>
-    </div>
-
-    <div class="modal-body">
-      {#if loading}
-        <p class="loading">Loading...</p>
-      {:else if step === 'confirm'}
-        <p class="message">
-          Are you sure you want to delete <strong>{list.name}</strong>?
-        </p>
-        {#if isSynced}
-          <p class="sync-warning">
-            <svg viewBox="0 0 24 24" fill="currentColor" class="warning-icon">
-              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-            </svg>
-            This list is synced to a CalDAV server and will also be deleted from the server.
-          </p>
-        {/if}
-        {#if error}
-          <p class="error">{error}</p>
-        {/if}
-        <div class="button-group">
-          <button class="btn-secondary" onclick={onClose} disabled={deleting}>
-            Cancel
-          </button>
-          <button class="btn-danger" onclick={handleFirstConfirm} disabled={deleting}>
-            {deleting ? 'Deleting...' : 'Delete'}
-          </button>
-        </div>
-      {:else}
-        <p class="message warning-text">
-          <svg viewBox="0 0 24 24" fill="currentColor" class="warning-icon large">
-            <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-          </svg>
+<ComposedModal open={true} on:close={onClose} danger>
+  <ModalHeader title="Delete List" />
+  <ModalBody>
+    {#if loading}
+      <InlineLoading description="Loading..." />
+    {:else if step === 'confirm'}
+      <p>
+        Are you sure you want to delete <strong>{list.name}</strong>?
+      </p>
+      {#if isSynced}
+        <InlineNotification
+          kind="warning"
+          title="Synced list"
+          subtitle="This list is synced to a CalDAV server and will also be deleted from the server."
+          hideCloseButton
+        />
+      {/if}
+      {#if error}
+        <InlineNotification
+          kind="error"
+          title="Error"
+          subtitle={error}
+          hideCloseButton
+        />
+      {/if}
+    {:else}
+      <div class="warning-message">
+        <Warning size={24} class="warning-icon" />
+        <p>
           This list contains <strong>{taskCount}</strong> {taskCount === 1 ? 'task' : 'tasks'} that will also be deleted.
         </p>
-        <p class="secondary-message">This action cannot be undone.</p>
-        {#if error}
-          <p class="error">{error}</p>
-        {/if}
-        <div class="button-group">
-          <button class="btn-secondary" onclick={() => step = 'confirm'} disabled={deleting}>
-            Back
-          </button>
-          <button class="btn-danger" onclick={handleDelete} disabled={deleting}>
-            {deleting ? 'Deleting...' : 'Delete Forever'}
-          </button>
-        </div>
+      </div>
+      <p class="secondary-message">This action cannot be undone.</p>
+      {#if error}
+        <InlineNotification
+          kind="error"
+          title="Error"
+          subtitle={error}
+          hideCloseButton
+        />
       {/if}
-    </div>
-  </div>
-</div>
+    {/if}
+  </ModalBody>
+  <ModalFooter>
+    {#if step === 'confirm'}
+      <Button kind="secondary" on:click={onClose} disabled={deleting || loading}>
+        Cancel
+      </Button>
+      <Button kind="danger" on:click={handleFirstConfirm} disabled={deleting || loading}>
+        {deleting ? 'Deleting...' : 'Delete'}
+      </Button>
+    {:else}
+      <Button kind="secondary" on:click={() => step = 'confirm'} disabled={deleting}>
+        Back
+      </Button>
+      <Button kind="danger" on:click={handleDelete} disabled={deleting}>
+        {deleting ? 'Deleting...' : 'Delete Forever'}
+      </Button>
+    {/if}
+  </ModalFooter>
+</ComposedModal>
 
 <style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
-  }
-
-  .modal {
-    background: var(--bg-primary);
-    border-radius: 12px;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
-    width: 90%;
-    max-width: 400px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .modal-header h2 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-  }
-
-  .close-btn {
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-secondary);
-  }
-
-  .close-btn svg {
-    width: 20px;
-    height: 20px;
-  }
-
-  .close-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .modal-body {
-    padding: 1.5rem;
-  }
-
-  .loading {
-    text-align: center;
-    color: var(--text-secondary);
-    padding: 1rem 0;
-  }
-
-  .message {
+  p {
     margin: 0 0 1rem;
-    font-size: 1rem;
-    line-height: 1.5;
   }
 
-  .message strong {
-    color: var(--text-primary);
+  p strong {
+    font-weight: 600;
   }
 
-  .warning-text {
+  .warning-message {
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
-    color: var(--error-color, #ef4444);
+    color: var(--cds-danger, #da1e28);
+    margin-bottom: 1rem;
   }
 
-  .warning-icon {
-    width: 20px;
-    height: 20px;
+  .warning-message :global(.warning-icon) {
     flex-shrink: 0;
-    color: var(--warning-color, #f59e0b);
-  }
-
-  .warning-icon.large {
-    width: 24px;
-    height: 24px;
-    color: var(--error-color, #ef4444);
   }
 
-  .sync-warning {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    margin: 0 0 1rem;
-    padding: 0.75rem;
-    background: var(--warning-bg, #fef3c7);
-    border-radius: 8px;
-    font-size: 0.875rem;
-    color: var(--warning-text, #92400e);
+  .warning-message p {
+    margin: 0;
   }
 
   .secondary-message {
-    margin: 0 0 1rem;
     font-size: 0.875rem;
-    color: var(--text-secondary);
-  }
-
-  .error {
-    margin: 0 0 1rem;
-    padding: 0.75rem;
-    background: var(--error-bg, #fee2e2);
-    border-radius: 8px;
-    font-size: 0.875rem;
-    color: var(--error-color, #ef4444);
-  }
-
-  .button-group {
-    display: flex;
-    gap: 0.75rem;
-    justify-content: flex-end;
-  }
-
-  .button-group button {
-    padding: 0.75rem 1.25rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    border-radius: 8px;
-    cursor: pointer;
-    border: none;
-    min-height: 44px;
-  }
-
-  .btn-secondary {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-color);
-  }
-
-  .btn-secondary:hover:not(:disabled) {
-    background: var(--bg-hover);
-  }
-
-  .btn-danger {
-    background: var(--error-color, #ef4444);
-    color: white;
-  }
-
-  .btn-danger:hover:not(:disabled) {
-    background: #dc2626;
-  }
-
-  .button-group button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* Mobile responsive */
-  @media (max-width: 768px) {
-    .modal {
-      margin: 1rem;
-    }
-
-    .button-group {
-      flex-direction: column-reverse;
-    }
-
-    .button-group button {
-      width: 100%;
-    }
+    color: var(--cds-text-secondary, var(--text-secondary));
   }
 </style>
diff --git a/src/lib/components/ListFormModal.svelte b/src/lib/components/ListFormModal.svelte
new file mode 100644
index 0000000..52cc3e4
--- /dev/null
+++ b/src/lib/components/ListFormModal.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+  import { listStore } from '$lib/stores/lists.svelte';
+  import { accountStore } from '$lib/stores/accounts.svelte';
+  import type { TaskList } from '$lib/types';
+  import {
+    ComposedModal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    TextInput,
+    Select,
+    SelectItem,
+    Button,
+    RadioButtonGroup,
+    RadioButton,
+  } from 'carbon-components-svelte';
+
+  interface Props {
+    list?: TaskList | null;
+    onClose: () => void;
+  }
+
+  let { list = null, onClose }: Props = $props();
+
+  // Predefined color palette
+  const COLORS = [
+    { value: '#6b7280', label: 'Gray' },
+    { value: '#ef4444', label: 'Red' },
+    { value: '#f97316', label: 'Orange' },
+    { value: '#eab308', label: 'Yellow' },
+    { value: '#22c55e', label: 'Green' },
+    { value: '#14b8a6', label: 'Teal' },
+    { value: '#3b82f6', label: 'Blue' },
+    { value: '#8b5cf6', label: 'Purple' },
+    { value: '#ec4899', label: 'Pink' },
+  ];
+
+  // Form state
+  let name = $state(list?.name ?? '');
+  let color = $state(list?.color ?? COLORS[0].value);
+  let accountId = $state<number | null>(list?.account_id ?? null);
+  let saving = $state(false);
+
+  const isEditing = $derived(list !== null);
+
+  async function handleSubmit() {
+    if (!name.trim()) return;
+
+    saving = true;
+    try {
+      if (isEditing && list) {
+        await listStore.update(list.id, { name: name.trim(), color });
+      } else {
+        await listStore.create({
+          name: name.trim(),
+          color,
+          account_id: accountId,
+        });
+      }
+      onClose();
+    } catch {
+      // Error handled by store
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+<ComposedModal open={true} on:close={onClose}>
+  <ModalHeader title={isEditing ? 'Edit List' : 'New List'} />
+  <ModalBody>
+    <TextInput
+      bind:value={name}
+      labelText="List name"
+      placeholder="Enter list name"
+      disabled={saving}
+      required
+    />
+
+    {#if !isEditing && accountStore.accounts.length > 0}
+      <Select
+        labelText="Account"
+        bind:selected={accountId}
+        disabled={saving}
+      >
+        <SelectItem value={null} text="Local only" />
+        {#each accountStore.accounts as account (account.id)}
+          <SelectItem value={account.id} text={account.name} />
+        {/each}
+      </Select>
+    {/if}
+
+    <div class="color-section">
+      <span class="color-label">Color</span>
+      <div class="color-grid">
+        {#each COLORS as c}
+          <button
+            type="button"
+            class="color-swatch"
+            class:selected={color === c.value}
+            style:background-color={c.value}
+            onclick={() => color = c.value}
+            title={c.label}
+            disabled={saving}
+          >
+            {#if color === c.value}
+              <svg viewBox="0 0 24 24" fill="white" class="check-icon">
+                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+              </svg>
+            {/if}
+          </button>
+        {/each}
+      </div>
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button kind="secondary" on:click={onClose} disabled={saving}>
+      Cancel
+    </Button>
+    <Button on:click={handleSubmit} disabled={!name.trim() || saving}>
+      {saving ? 'Saving...' : isEditing ? 'Save' : 'Create'}
+    </Button>
+  </ModalFooter>
+</ComposedModal>
+
+<style>
+  .color-section {
+    margin-top: 1rem;
+  }
+
+  .color-label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--cds-text-secondary, #525252);
+    margin-bottom: 0.5rem;
+  }
+
+  .color-grid {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .color-swatch {
+    width: 32px;
+    height: 32px;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.1s ease, border-color 0.1s ease;
+  }
+
+  .color-swatch:hover:not(:disabled) {
+    transform: scale(1.1);
+  }
+
+  .color-swatch.selected {
+    border-color: var(--cds-text-primary, #161616);
+  }
+
+  .color-swatch:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .check-icon {
+    width: 16px;
+    height: 16px;
+  }
+</style>
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 1a4a4a8..c8bb805 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -2,18 +2,29 @@
   import type { TaskList } from '$lib/types';
   import { listStore } from '$lib/stores/lists.svelte';
   import { accountStore } from '$lib/stores/accounts.svelte';
-  import { syncStore } from '$lib/stores/sync.svelte';
   import DeleteListModal from './DeleteListModal.svelte';
+  import ListFormModal from './ListFormModal.svelte';
+  import {
+    SideNavLink,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavDivider,
+  } from 'carbon-components-svelte';
+  import { Time, Warning, Add } from 'carbon-icons-svelte';
 
   interface Props {
     showSettings?: boolean;
     onToggleSettings?: () => void;
     isMobile?: boolean;
-    isOpen?: boolean;
     onClose?: () => void;
   }
 
-  let { showSettings = false, onToggleSettings, isMobile = false, isOpen = false, onClose }: Props = $props();
+  let { showSettings = false, onToggleSettings, isMobile = false, onClose }: Props = $props();
+
+  // Modal state
+  let showListForm = $state(false);
+  let editingList = $state<TaskList | null>(null);
+  let listToDelete = $state<TaskList | null>(null);
 
   // Close sidebar when a navigation item is selected on mobile
   function handleNavigation(action: () => void) {
@@ -23,32 +34,20 @@
     }
   }
 
-  // Predefined color palette
-  const COLORS = [
-    '#6b7280', // gray
-    '#ef4444', // red
-    '#f97316', // orange
-    '#eab308', // yellow
-    '#22c55e', // green
-    '#14b8a6', // teal
-    '#3b82f6', // blue
-    '#8b5cf6', // purple
-    '#ec4899', // pink
-  ];
-
-  // Add list state
-  let newListName = $state('');
-  let newListColor = $state(COLORS[0]);
-  let newListAccountId = $state<number | null>(null);
-  let isAdding = $state(false);
+  function handleAddList() {
+    editingList = null;
+    showListForm = true;
+  }
 
-  // Edit list state
-  let editingList = $state<TaskList | null>(null);
-  let editName = $state('');
-  let editColor = $state('');
+  function handleEditList(list: TaskList) {
+    editingList = list;
+    showListForm = true;
+  }
 
-  // Delete modal state
-  let listToDelete = $state<TaskList | null>(null);
+  function handleCloseListForm() {
+    showListForm = false;
+    editingList = null;
+  }
 
   // Group lists by account
   const groupedLists = $derived(() => {
@@ -73,689 +72,85 @@
     const account = accountStore.accounts.find(a => a.id === accountId);
     return account?.name ?? `Account #${accountId}`;
   }
-
-  async function handleAddList(e: Event) {
-    e.preventDefault();
-    if (!newListName.trim()) return;
-
-    try {
-      await listStore.create({
-        name: newListName.trim(),
-        color: newListColor,
-        account_id: newListAccountId,
-      });
-      newListName = '';
-      newListColor = COLORS[0];
-      newListAccountId = null;
-      isAdding = false;
-    } catch {
-      // Error is handled by store
-    }
-  }
-
-  function startEdit(list: TaskList) {
-    editingList = list;
-    editName = list.name;
-    editColor = list.color ?? COLORS[0];
-  }
-
-  async function handleEditList(e: Event) {
-    e.preventDefault();
-    if (!editingList || !editName.trim()) return;
-
-    try {
-      await listStore.update(editingList.id, { name: editName.trim(), color: editColor });
-      editingList = null;
-    } catch {
-      // Error is handled by store
-    }
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      isAdding = false;
-      newListName = '';
-      newListColor = COLORS[0];
-      newListAccountId = null;
-      editingList = null;
-    }
-  }
-
-  function handleDeleteClick(list: TaskList, e: Event) {
-    e.stopPropagation();
-    listToDelete = list;
-  }
 </script>
 
-<aside class="sidebar" class:mobile={isMobile} class:open={isOpen}>
-  {#if isMobile}
-    <div class="sidebar-header mobile-close-header">
-      <h2>Menu</h2>
-      <button class="close-btn" onclick={onClose} aria-label="Close menu">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
-      </button>
-    </div>
-  {/if}
-
-  <div class="sidebar-header">
-    <h2>Views</h2>
-  </div>
-
-  <nav class="special-nav">
-    <button
-      class="special-item"
-      class:selected={listStore.selectedSpecialView === 'today'}
-      onclick={() => handleNavigation(() => listStore.selectSpecial('today'))}
-    >
-      <svg class="special-icon" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
-      </svg>
-      <span class="list-name">Today</span>
-    </button>
-    <button
-      class="special-item"
-      class:selected={listStore.selectedSpecialView === 'overdue'}
-      onclick={() => handleNavigation(() => listStore.selectSpecial('overdue'))}
-    >
-      <svg class="special-icon" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-      </svg>
-      <span class="list-name">Overdue</span>
-    </button>
-  </nav>
-
-  <div class="sidebar-header">
-    <h2>Lists</h2>
-    <button class="icon-btn" onclick={() => isAdding = true} title="Add list">+</button>
-  </div>
-
-  {#if isAdding}
-    <form class="list-form" onsubmit={handleAddList} onkeydown={handleKeydown}>
-      <input
-        type="text"
-        bind:value={newListName}
-        placeholder="List name..."
-        autofocus
-      />
-      {#if accountStore.accounts.length > 0}
-        <select bind:value={newListAccountId} class="account-select">
-          <option value={null}>Local only</option>
-          {#each accountStore.accounts as account (account.id)}
-            <option value={account.id}>{account.name}</option>
-          {/each}
-        </select>
-      {/if}
-      <div class="color-picker">
-        {#each COLORS as color}
-          <button
-            type="button"
-            class="color-option"
-            class:selected={newListColor === color}
-            style:background-color={color}
-            onclick={() => newListColor = color}
-            title={color}
-          ></button>
-        {/each}
-      </div>
-      <div class="form-buttons">
-        <button type="submit" class="primary" disabled={!newListName.trim()}>Add</button>
-        <button type="button" onclick={() => { isAdding = false; newListName = ''; newListColor = COLORS[0]; newListAccountId = null; }}>Cancel</button>
-      </div>
-    </form>
-  {/if}
-
-  <nav class="list-nav">
-    <!-- Local lists section -->
-    {#if groupedLists().localLists.length > 0}
-      <div class="list-section-header">Local</div>
-      {#each groupedLists().localLists as list (list.id)}
-        {#if editingList?.id === list.id}
-          <form class="list-form inline" onsubmit={handleEditList} onkeydown={handleKeydown}>
-            <input
-              type="text"
-              bind:value={editName}
-              autofocus
-            />
-            <div class="color-picker">
-              {#each COLORS as color}
-                <button
-                  type="button"
-                  class="color-option"
-                  class:selected={editColor === color}
-                  style:background-color={color}
-                  onclick={() => editColor = color}
-                  title={color}
-                ></button>
-              {/each}
-            </div>
-            <div class="form-buttons">
-              <button type="submit" class="primary" disabled={!editName.trim()}>Save</button>
-              <button type="button" onclick={() => editingList = null}>Cancel</button>
-            </div>
-          </form>
-        {:else}
-          <div
-            class="list-item"
-            class:selected={list.id === listStore.selectedListId}
-          >
-            <button
-              type="button"
-              class="list-color-btn"
-              style:background-color={list.color ?? '#6b7280'}
-              onclick={() => startEdit(list)}
-              title="Edit list"
-            ></button>
-            <button
-              type="button"
-              class="list-name-btn"
-              onclick={() => handleNavigation(() => listStore.select(list.id))}
-            >
-              {list.name}
-            </button>
-            <button
-              type="button"
-              class="delete-btn"
-              class:mobile={isMobile}
-              onclick={(e) => handleDeleteClick(list, e)}
-              title="Delete list"
-            >
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-              </svg>
-            </button>
-          </div>
-        {/if}
-      {/each}
-    {/if}
+<!-- Special Views -->
+<SideNavLink
+  icon={Time}
+  text="Today"
+  isSelected={listStore.selectedSpecialView === 'today'}
+  on:click={() => handleNavigation(() => listStore.selectSpecial('today'))}
+/>
+<SideNavLink
+  icon={Warning}
+  text="Overdue"
+  isSelected={listStore.selectedSpecialView === 'overdue'}
+  on:click={() => handleNavigation(() => listStore.selectSpecial('overdue'))}
+/>
+
+<SideNavDivider />
+
+<!-- Add List Button -->
+<SideNavLink
+  icon={Add}
+  text="Add List"
+  on:click={handleAddList}
+/>
+
+<!-- Local lists -->
+{#if groupedLists().localLists.length > 0}
+  <SideNavMenu text="Local" expanded>
+    {#each groupedLists().localLists as list (list.id)}
+      <SideNavMenuItem
+        text={list.name}
+        isSelected={list.id === listStore.selectedListId}
+        on:click={() => handleNavigation(() => listStore.select(list.id))}
+      >
+        <span slot="icon" class="list-color" style:background-color={list.color ?? '#6b7280'}></span>
+      </SideNavMenuItem>
+    {/each}
+  </SideNavMenu>
+{/if}
 
-    <!-- Account lists sections -->
-    {#each [...groupedLists().accountLists.entries()] as [accountId, lists] (accountId)}
-      <div class="list-section-header">{getAccountName(accountId)}</div>
-      {#each lists as list (list.id)}
-        {#if editingList?.id === list.id}
-          <form class="list-form inline" onsubmit={handleEditList} onkeydown={handleKeydown}>
-            <input
-              type="text"
-              bind:value={editName}
-              autofocus
-            />
-            <div class="color-picker">
-              {#each COLORS as color}
-                <button
-                  type="button"
-                  class="color-option"
-                  class:selected={editColor === color}
-                  style:background-color={color}
-                  onclick={() => editColor = color}
-                  title={color}
-                ></button>
-              {/each}
-            </div>
-            <div class="form-buttons">
-              <button type="submit" class="primary" disabled={!editName.trim()}>Save</button>
-              <button type="button" onclick={() => editingList = null}>Cancel</button>
-            </div>
-          </form>
-        {:else}
-          <div
-            class="list-item"
-            class:selected={list.id === listStore.selectedListId}
-          >
-            <button
-              type="button"
-              class="list-color-btn"
-              style:background-color={list.color ?? '#6b7280'}
-              onclick={() => startEdit(list)}
-              title="Edit list"
-            ></button>
-            <button
-              type="button"
-              class="list-name-btn"
-              onclick={() => handleNavigation(() => listStore.select(list.id))}
-            >
-              {list.name}
-            </button>
-            <button
-              type="button"
-              class="delete-btn"
-              class:mobile={isMobile}
-              onclick={(e) => handleDeleteClick(list, e)}
-              title="Delete list"
-            >
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-              </svg>
-            </button>
-          </div>
-        {/if}
-      {/each}
+<!-- Account lists -->
+{#each [...groupedLists().accountLists.entries()] as [accountId, lists] (accountId)}
+  <SideNavMenu text={getAccountName(accountId)} expanded>
+    {#each lists as list (list.id)}
+      <SideNavMenuItem
+        text={list.name}
+        isSelected={list.id === listStore.selectedListId}
+        on:click={() => handleNavigation(() => listStore.select(list.id))}
+      >
+        <span slot="icon" class="list-color" style:background-color={list.color ?? '#6b7280'}></span>
+      </SideNavMenuItem>
     {/each}
-  </nav>
+  </SideNavMenu>
+{/each}
 
-  {#if listStore.error}
-    <p class="error">{listStore.error}</p>
-  {/if}
+{#if listStore.error}
+  <p class="error">{listStore.error}</p>
+{/if}
 
-  <div class="sidebar-footer">
-    {#if syncStore.syncing}
-      <div class="sync-indicator">
-        <svg class="spinning" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
-        </svg>
-        <span>Syncing...</span>
-      </div>
-    {/if}
-    <button
-      class="settings-btn"
-      class:active={showSettings}
-      onclick={() => handleNavigation(() => onToggleSettings?.())}
-    >
-      <svg viewBox="0 0 24 24" fill="currentColor">
-        <path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
-      </svg>
-      <span>Settings</span>
-    </button>
-  </div>
-</aside>
+<!-- Modals -->
+{#if showListForm}
+  <ListFormModal list={editingList} onClose={handleCloseListForm} />
+{/if}
 
 {#if listToDelete}
   <DeleteListModal list={listToDelete} onClose={() => listToDelete = null} />
 {/if}
 
 <style>
-  .sidebar {
-    width: 240px;
-    background: var(--bg-secondary);
-    border-right: 1px solid var(--border-color);
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  /* Mobile drawer styles */
-  .sidebar.mobile {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 280px;
-    height: 100%;
-    z-index: 100;
-    transform: translateX(-100%);
-    transition: transform 0.3s ease;
-    border-right: none;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
-  }
-
-  .sidebar.mobile.open {
-    transform: translateX(0);
-  }
-
-  .sidebar.mobile .sidebar-header {
-    padding-top: calc(1rem + env(safe-area-inset-top, 0));
-  }
-
-  .mobile-close-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text-primary);
-    border-radius: 8px;
-  }
-
-  .close-btn:hover {
-    background: var(--bg-hover);
-  }
-
-  .close-btn svg {
-    width: 24px;
-    height: 24px;
-  }
-
-  .sidebar-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .sidebar-header h2 {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 600;
-  }
-
-  .icon-btn {
-    width: 28px;
-    height: 28px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    font-size: 1.25rem;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .icon-btn:hover {
-    background: var(--bg-hover);
-  }
-
-  .list-form {
-    padding: 0.5rem 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .list-form.inline {
-    padding: 0.5rem;
-    border-bottom: none;
-    background: var(--bg-hover);
-    border-radius: 6px;
-    margin-bottom: 0.25rem;
-  }
-
-  .list-form input {
-    padding: 0.5rem;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 0.875rem;
-    background: var(--bg-primary);
-  }
-
-  .account-select {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 0.875rem;
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    min-height: 44px;
-  }
-
-  .color-picker {
-    display: flex;
-    gap: 0.375rem;
-    flex-wrap: wrap;
-  }
-
-  .color-option {
-    width: 20px;
-    height: 20px;
-    border: 2px solid transparent;
-    border-radius: 4px;
-    cursor: pointer;
-    padding: 0;
-  }
-
-  .color-option:hover {
-    transform: scale(1.1);
-  }
-
-  .color-option.selected {
-    border-color: var(--text-primary);
-  }
-
-  .form-buttons {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  .form-buttons button {
-    padding: 0.375rem 0.75rem;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.875rem;
-  }
-
-  .form-buttons button.primary {
-    background: var(--accent-color);
-    color: white;
-  }
-
-  .form-buttons button.primary:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .form-buttons button:not(.primary) {
-    background: transparent;
-  }
-
-  .special-nav {
-    padding: 0.5rem;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .special-item {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.625rem 0.75rem;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    border-radius: 6px;
-    text-align: left;
-    font-size: 0.875rem;
-  }
-
-  .special-item:hover {
-    background: var(--bg-hover);
-  }
-
-  .special-item.selected {
-    background: var(--bg-selected);
-  }
-
-  .special-icon {
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-    color: var(--text-secondary);
-  }
-
-  .special-item.selected .special-icon {
-    color: var(--text-primary);
-  }
-
-  .list-nav {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.5rem;
-  }
-
-  .list-section-header {
-    font-size: 0.6875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text-secondary);
-    padding: 0.75rem 0.75rem 0.375rem;
-    margin-top: 0.25rem;
-  }
-
-  .list-section-header:first-child {
-    margin-top: 0;
-  }
-
-  .list-item {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.375rem;
-    border-radius: 6px;
-    font-size: 0.875rem;
-  }
-
-  .list-item:hover {
-    background: var(--bg-hover);
-  }
-
-  .list-item.selected {
-    background: var(--bg-selected);
-  }
-
-  .list-color-btn {
-    width: 14px;
-    height: 14px;
-    border-radius: 3px;
-    flex-shrink: 0;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-  }
-
-  .list-color-btn:hover {
-    transform: scale(1.15);
-  }
-
-  .list-name-btn {
-    flex: 1;
-    text-align: left;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    font-size: 0.875rem;
-    padding: 0.25rem 0.375rem;
-    border-radius: 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .list-name-btn:hover {
-    background: var(--bg-hover);
-  }
-
-  .delete-btn {
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-secondary);
-    opacity: 0;
-    flex-shrink: 0;
-    transition: opacity 0.15s ease;
-  }
-
-  .delete-btn svg {
-    width: 14px;
-    height: 14px;
-  }
-
-  .list-item:hover .delete-btn {
-    opacity: 1;
-  }
-
-  .delete-btn:hover {
-    background: var(--error-color, #ef4444);
-    color: white;
-  }
-
-  /* Mobile: always show delete button */
-  .delete-btn.mobile {
-    opacity: 1;
-    width: 44px;
-    height: 44px;
-  }
-
-  .delete-btn.mobile svg {
-    width: 18px;
-    height: 18px;
+  .list-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    display: inline-block;
   }
 
   .error {
     padding: 0.5rem 1rem;
-    color: var(--error-color);
+    color: var(--cds-danger, var(--error-color));
     font-size: 0.75rem;
   }
-
-  .sidebar-footer {
-    margin-top: auto;
-    padding: 0.5rem;
-    border-top: 1px solid var(--border-color);
-  }
-
-  .settings-btn {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.625rem 0.75rem;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    border-radius: 6px;
-    text-align: left;
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-  }
-
-  .settings-btn svg {
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-  }
-
-  .settings-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .settings-btn.active {
-    background: var(--bg-selected);
-    color: var(--text-primary);
-  }
-
-  .sync-indicator {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 0.75rem;
-    font-size: 0.8125rem;
-    color: var(--accent-color);
-  }
-
-  .sync-indicator svg {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-  }
-
-  .spinning {
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
 </style>
diff --git a/src/lib/components/SyncLogModal.svelte b/src/lib/components/SyncLogModal.svelte
index fe3def8..bc4e4c8 100644
--- a/src/lib/components/SyncLogModal.svelte
+++ b/src/lib/components/SyncLogModal.svelte
@@ -1,6 +1,15 @@
 <script lang="ts">
   import { getSyncLog } from '$lib/api';
   import type { SyncLogEntry } from '$lib/types';
+  import {
+    ComposedModal,
+    ModalHeader,
+    ModalBody,
+    DataTable,
+    Tag,
+    Button,
+    InlineLoading,
+  } from 'carbon-components-svelte';
 
   interface Props {
     onClose: () => void;
@@ -42,18 +51,6 @@
     loadEntries();
   });
 
-  function handleBackdropClick(event: MouseEvent) {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      onClose();
-    }
-  }
-
   function formatTimestamp(ts: string): string {
     try {
       const date = new Date(ts);
@@ -63,12 +60,12 @@
     }
   }
 
-  function getStatusClass(status: string): string {
+  function getStatusTagType(status: string): 'green' | 'red' | 'warm-gray' {
     switch (status) {
-      case 'success': return 'status-success';
-      case 'error': return 'status-error';
-      case 'conflict': return 'status-conflict';
-      default: return '';
+      case 'success': return 'green';
+      case 'error': return 'red';
+      case 'conflict': return 'warm-gray';
+      default: return 'warm-gray';
     }
   }
 
@@ -86,252 +83,89 @@
     };
     return labels[operation] || operation;
   }
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-<div class="modal-backdrop" onclick={handleBackdropClick}>
-  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
-    <div class="modal-header">
-      <h2 id="modal-title">Sync Log</h2>
-      <button class="close-btn" onclick={onClose} aria-label="Close">
-        <svg viewBox="0 0 24 24" fill="currentColor">
-          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-        </svg>
-      </button>
-    </div>
 
-    <div class="modal-body">
-      {#if loading && entries.length === 0}
-        <p class="loading">Loading sync log...</p>
-      {:else if error}
-        <p class="error">{error}</p>
-      {:else if entries.length === 0}
-        <p class="empty">No sync operations logged yet.</p>
-      {:else}
-        <div class="table-wrapper">
-          <table class="log-table">
-            <thead>
-              <tr>
-                <th>Time</th>
-                <th>Operation</th>
-                <th>Status</th>
-                <th>Details</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each entries as entry (entry.id)}
-                <tr>
-                  <td class="timestamp">{formatTimestamp(entry.timestamp)}</td>
-                  <td>{getOperationLabel(entry.operation)}</td>
-                  <td><span class="status {getStatusClass(entry.status)}">{entry.status}</span></td>
-                  <td class="details">
-                    {#if entry.message}
-                      <span class="message">{entry.message}</span>
-                    {/if}
-                    {#if entry.list_id || entry.task_id || entry.http_status}
-                      <span class="meta">
-                        {#if entry.list_id}List: {entry.list_id}{/if}
-                        {#if entry.task_id}{entry.list_id ? ' · ' : ''}Task: {entry.task_id}{/if}
-                        {#if entry.http_status}{(entry.list_id || entry.task_id) ? ' · ' : ''}HTTP: {entry.http_status}{/if}
-                      </span>
-                    {/if}
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
+  function formatDetails(entry: SyncLogEntry): string {
+    const parts = [];
+    if (entry.message) parts.push(entry.message);
+    if (entry.list_id) parts.push(`List: ${entry.list_id}`);
+    if (entry.task_id) parts.push(`Task: ${entry.task_id}`);
+    if (entry.http_status) parts.push(`HTTP: ${entry.http_status}`);
+    return parts.join(' · ');
+  }
+
+  // Transform entries for DataTable
+  const tableRows = $derived(entries.map(entry => ({
+    id: String(entry.id),
+    time: formatTimestamp(entry.timestamp),
+    operation: getOperationLabel(entry.operation),
+    status: entry.status,
+    details: formatDetails(entry),
+  })));
+
+  const headers = [
+    { key: 'time', value: 'Time' },
+    { key: 'operation', value: 'Operation' },
+    { key: 'status', value: 'Status' },
+    { key: 'details', value: 'Details' },
+  ];
+</script>
 
-        {#if hasMore}
-          <button
-            class="load-more-btn"
-            onclick={() => loadEntries(true)}
+<ComposedModal open={true} on:close={onClose} size="lg">
+  <ModalHeader title="Sync Log" />
+  <ModalBody hasScrollingContent>
+    {#if loading && entries.length === 0}
+      <InlineLoading description="Loading sync log..." />
+    {:else if error}
+      <p class="error">{error}</p>
+    {:else if entries.length === 0}
+      <p class="empty">No sync operations logged yet.</p>
+    {:else}
+      <DataTable
+        {headers}
+        rows={tableRows}
+        size="short"
+      >
+        <svelte:fragment slot="cell" let:cell let:row>
+          {#if cell.key === 'status'}
+            <Tag size="sm" type={getStatusTagType(cell.value)}>{cell.value}</Tag>
+          {:else}
+            {cell.value}
+          {/if}
+        </svelte:fragment>
+      </DataTable>
+
+      {#if hasMore}
+        <div class="load-more">
+          <Button
+            kind="tertiary"
+            size="small"
+            on:click={() => loadEntries(true)}
             disabled={loading}
           >
             {loading ? 'Loading...' : 'Load More'}
-          </button>
-        {/if}
+          </Button>
+        </div>
       {/if}
-    </div>
-  </div>
-</div>
+    {/if}
+  </ModalBody>
+</ComposedModal>
 
 <style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-  }
-
-  .modal {
-    background: var(--bg-primary);
-    border-radius: 12px;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
-    width: 90%;
-    max-width: 600px;
-    max-height: 80vh;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .modal-header h2 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-  }
-
-  .close-btn {
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-secondary);
-  }
-
-  .close-btn svg {
-    width: 20px;
-    height: 20px;
-  }
-
-  .close-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .modal-body {
-    padding: 1rem 1.5rem;
-    overflow-y: auto;
-    flex: 1;
-  }
-
-  .loading,
-  .empty,
   .error {
     text-align: center;
     padding: 2rem;
-    color: var(--text-secondary);
+    color: var(--cds-danger, #da1e28);
   }
 
-  .error {
-    color: var(--error-color, #ef4444);
-  }
-
-  .table-wrapper {
-    overflow-x: auto;
-  }
-
-  .log-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.8125rem;
-  }
-
-  .log-table th,
-  .log-table td {
-    padding: 0.5rem 0.75rem;
-    text-align: left;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .log-table th {
-    font-weight: 600;
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    color: var(--text-secondary);
-    background: var(--bg-secondary);
-    position: sticky;
-    top: 0;
-  }
-
-  .log-table tbody tr:hover {
-    background: var(--bg-hover);
-  }
-
-  .timestamp {
-    white-space: nowrap;
-    color: var(--text-secondary);
-    font-size: 0.75rem;
-  }
-
-  .status {
-    font-size: 0.6875rem;
-    padding: 0.125rem 0.5rem;
-    border-radius: 4px;
-    text-transform: uppercase;
-    font-weight: 500;
-    white-space: nowrap;
-  }
-
-  .status-success {
-    background: var(--priority-low-bg, #dcfce7);
-    color: var(--priority-low-text, #166534);
-  }
-
-  .status-error {
-    background: var(--priority-high-bg, #fee2e2);
-    color: var(--priority-high-text, #991b1b);
-  }
-
-  .status-conflict {
-    background: var(--priority-medium-bg, #fef3c7);
-    color: var(--priority-medium-text, #92400e);
+  .empty {
+    text-align: center;
+    padding: 2rem;
+    color: var(--cds-text-secondary, var(--text-secondary));
   }
 
-  .details {
+  .load-more {
     display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  .message {
-    color: var(--text-secondary);
-    word-break: break-word;
-  }
-
-  .meta {
-    font-size: 0.6875rem;
-    color: var(--text-secondary);
-    opacity: 0.8;
-  }
-
-  .load-more-btn {
-    display: block;
-    width: 100%;
-    padding: 0.75rem;
-    margin-top: 1rem;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.875rem;
-    color: var(--text-primary);
-  }
-
-  .load-more-btn:hover:not(:disabled) {
-    background: var(--bg-hover);
-  }
-
-  .load-more-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+    justify-content: center;
+    padding: 1rem 0;
   }
 </style>
diff --git a/src/lib/components/SyncStatus.svelte b/src/lib/components/SyncStatus.svelte
index fbc471d..3075221 100644
--- a/src/lib/components/SyncStatus.svelte
+++ b/src/lib/components/SyncStatus.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { SyncResult, ListSyncStatus } from '$lib/types';
   import { syncList, getSyncStatus } from '$lib/api';
+  import { Button, Tag, InlineLoading } from 'carbon-components-svelte';
+  import { Renew } from 'carbon-icons-svelte';
 
   interface Props {
     listId: number;
@@ -86,27 +88,28 @@
 
 {#if status?.has_caldav}
   <div class="sync-status">
-    <button
-      class="sync-button"
-      onclick={handleSync}
+    <Button
+      kind="tertiary"
+      size="small"
+      icon={Renew}
+      on:click={handleSync}
       disabled={syncing}
       title={status.last_sync ? `Last sync: ${formatRelativeTime(status.last_sync)}` : 'Never synced'}
     >
       {#if syncing}
-        <span class="spinner"></span>
-        Syncing...
+        <InlineLoading description="Syncing..." />
       {:else}
         Sync
         {#if status.pending_changes > 0}
-          <span class="pending-badge">{status.pending_changes}</span>
+          <Tag size="sm" type="blue">{status.pending_changes}</Tag>
         {/if}
       {/if}
-    </button>
+    </Button>
 
     {#if error}
-      <span class="sync-error" title={error}>Sync failed</span>
+      <Tag size="sm" type="red" title={error}>Failed</Tag>
     {:else if status.failed_changes > 0 && status.last_error}
-      <span class="sync-error" title={status.last_error}>{status.failed_changes} failed</span>
+      <Tag size="sm" type="red" title={status.last_error}>{status.failed_changes} failed</Tag>
     {:else if syncSummary()}
       <span class="sync-summary">{syncSummary()}</span>
     {/if}
@@ -120,64 +123,8 @@
     gap: 0.5rem;
   }
 
-  .sync-button {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.375rem 0.75rem;
-    font-size: 0.8125rem;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    cursor: pointer;
-    transition: background-color 0.15s, border-color 0.15s;
-  }
-
-  .sync-button:hover:not(:disabled) {
-    background: var(--bg-hover);
-    border-color: var(--border-hover);
-  }
-
-  .sync-button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .pending-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 1.25rem;
-    height: 1.25rem;
-    padding: 0 0.25rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    background: var(--accent-color, #3b82f6);
-    color: white;
-    border-radius: 10px;
-  }
-
-  .spinner {
-    width: 0.875rem;
-    height: 0.875rem;
-    border: 2px solid var(--border-color);
-    border-top-color: var(--accent-color, #3b82f6);
-    border-radius: 50%;
-    animation: spin 0.75s linear infinite;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-
-  .sync-error {
-    font-size: 0.75rem;
-    color: var(--error-color, #ef4444);
-  }
-
   .sync-summary {
     font-size: 0.75rem;
-    color: var(--text-secondary);
+    color: var(--cds-text-secondary, var(--text-secondary));
   }
 </style>
diff --git a/src/lib/components/TaskForm.svelte b/src/lib/components/TaskForm.svelte
index 8aea850..3d30fc9 100644
--- a/src/lib/components/TaskForm.svelte
+++ b/src/lib/components/TaskForm.svelte
@@ -3,6 +3,17 @@
   import { listStore } from "$lib/stores/lists.svelte";
   import { taskStore } from "$lib/stores/tasks.svelte";
   import type { Task } from "$lib/types";
+  import {
+    Form,
+    TextInput,
+    TextArea,
+    DatePicker,
+    DatePickerInput,
+    Select,
+    SelectItem,
+    Button,
+    ButtonSet,
+  } from 'carbon-components-svelte';
 
   interface Props {
     task?: Task | null;
@@ -79,236 +90,128 @@
       onClose?.();
     }
   }
+
+  function handleDateChange(e: CustomEvent) {
+    const dateStr = e.detail.dateStr;
+    if (dateStr) {
+      // Carbon DatePicker returns MM/DD/YYYY format, convert to YYYY-MM-DD
+      const [month, day, year] = dateStr.split('/');
+      dueDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
+    } else {
+      dueDate = "";
+    }
+  }
+
+  // Convert YYYY-MM-DD to MM/DD/YYYY for Carbon DatePicker display
+  const displayDate = $derived(() => {
+    if (!dueDate) return "";
+    const [year, month, day] = dueDate.split('-');
+    return `${month}/${day}/${year}`;
+  });
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-<form class="task-form" onsubmit={handleSubmit}>
-  <input
-    type="text"
-    class="title-input"
+<Form on:submit={handleSubmit} class="task-form">
+  <TextInput
     bind:value={title}
-    placeholder="Task title..."
+    labelText="Task title"
+    placeholder="What needs to be done?"
     disabled={saving}
-    autofocus
+    required
   />
 
-  <textarea
-    class="description-input"
+  <TextArea
     bind:value={description}
-    placeholder="Description (optional)"
-    rows="2"
+    labelText="Description"
+    placeholder="Add details (optional)"
+    rows={2}
     disabled={saving}
-  ></textarea>
+  />
 
   <div class="form-row">
-    <label class="form-field">
-      <span>Due date</span>
-      <input type="date" bind:value={dueDate} disabled={saving} />
-    </label>
-
-    <label class="form-field">
-      <span>Repeat</span>
-      <select
-        bind:value={rrule}
-        disabled={saving || !dueDate}
-        title={!dueDate ? "Set a due date first" : ""}
-      >
-        {#each RECURRENCE_OPTIONS as opt}
-          <option value={opt.value}>{opt.label}</option>
-        {/each}
-      </select>
-    </label>
-
-    <label class="form-field">
-      <span>Priority</span>
-      <div class="priority-select-wrapper">
-        <select bind:value={priority} disabled={saving} class="priority-select">
-          <option value="">None</option>
-          <option value="1">High</option>
-          <option value="5">Medium</option>
-          <option value="9">Low</option>
-        </select>
-        {#if priority}
-          <span
-            class="priority-indicator priority-{priority === '1'
-              ? 'high'
-              : priority === '5'
-                ? 'medium'
-                : 'low'}"
-          ></span>
-        {/if}
-      </div>
-    </label>
+    <DatePicker
+      datePickerType="single"
+      dateFormat="m/d/Y"
+      value={displayDate()}
+      on:change={handleDateChange}
+    >
+      <DatePickerInput
+        labelText="Due date"
+        placeholder="mm/dd/yyyy"
+        disabled={saving}
+      />
+    </DatePicker>
+
+    <Select
+      labelText="Repeat"
+      bind:selected={rrule}
+      disabled={saving || !dueDate}
+    >
+      {#each RECURRENCE_OPTIONS as opt}
+        <SelectItem value={opt.value} text={opt.label} />
+      {/each}
+    </Select>
+
+    <Select
+      labelText="Priority"
+      bind:selected={priority}
+      disabled={saving}
+    >
+      <SelectItem value="" text="None" />
+      <SelectItem value="1" text="High" />
+      <SelectItem value="5" text="Medium" />
+      <SelectItem value="9" text="Low" />
+    </Select>
   </div>
 
-  <div class="form-actions">
+  <ButtonSet class="form-actions">
     {#if isEditing}
-      <button type="button" onclick={onClose} disabled={saving}>Cancel</button>
+      <Button kind="secondary" on:click={onClose} disabled={saving}>
+        Cancel
+      </Button>
     {/if}
-    <button type="submit" class="primary" disabled={!title.trim() || saving}>
+    <Button type="submit" disabled={!title.trim() || saving}>
       {saving ? "Saving..." : isEditing ? "Save" : "Add Task"}
-    </button>
-  </div>
-</form>
+    </Button>
+  </ButtonSet>
+</Form>
 
 <style>
-  .task-form {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid var(--border-color);
-    background: var(--bg-secondary);
+  :global(.task-form) {
+    padding: 1rem;
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .title-input {
-    font-size: 1rem;
-    padding: 0.625rem;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    background: var(--bg-primary);
-  }
-
-  .title-input:focus {
-    outline: none;
-    border-color: var(--accent-color);
-  }
-
-  .description-input {
-    font-size: 0.875rem;
-    padding: 0.5rem;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    resize: vertical;
-    font-family: inherit;
-    background: var(--bg-primary);
-  }
-
-  .description-input:focus {
-    outline: none;
-    border-color: var(--accent-color);
+    gap: 1rem;
   }
 
   .form-row {
     display: flex;
     gap: 1rem;
+    flex-wrap: wrap;
   }
 
-  .form-field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    flex: 1;
-  }
-
-  .form-field span {
-    font-size: 0.75rem;
-    color: var(--text-secondary);
-  }
-
-  .form-field input,
-  .form-field select {
-    padding: 0.5rem;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 0.875rem;
-    background: var(--bg-primary);
-  }
-
-  .priority-select-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .priority-select {
+  .form-row > :global(*) {
     flex: 1;
-    padding-right: 2rem;
-  }
-
-  .priority-indicator {
-    position: absolute;
-    right: 1.75rem;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    pointer-events: none;
-  }
-
-  .priority-indicator.priority-high {
-    background: var(--priority-high-text);
-  }
-
-  .priority-indicator.priority-medium {
-    background: var(--priority-medium-text);
+    min-width: 120px;
   }
 
-  .priority-indicator.priority-low {
-    background: var(--priority-low-text);
-  }
-
-  .form-actions {
-    display: flex;
+  :global(.form-actions) {
     justify-content: flex-end;
-    gap: 0.5rem;
-  }
-
-  .form-actions button {
-    padding: 0.5rem 1rem;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-
-  .form-actions button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .form-actions button.primary {
-    background: var(--accent-color);
-    color: white;
-  }
-
-  .form-actions button:not(.primary) {
-    background: transparent;
-  }
-
-  .form-actions button:not(.primary):hover {
-    background: var(--bg-hover);
   }
 
   /* Mobile adjustments */
-  @media (max-width: 768px) {
-    .task-form {
-      padding: 1rem;
+  @media (max-width: 1056px) {
+    :global(.task-form) {
       padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
     }
 
     .form-row {
       flex-direction: column;
-      gap: 0.75rem;
-    }
-
-    .form-field input,
-    .form-field select {
-      padding: 0.75rem;
-      font-size: 1rem;
-      min-height: 44px;
-    }
-
-    .title-input {
-      padding: 0.75rem;
-      font-size: 1rem;
-      min-height: 44px;
     }
 
-    .form-actions button {
-      padding: 0.75rem 1.25rem;
-      min-height: 44px;
+    .form-row > :global(*) {
+      min-width: 100%;
     }
   }
 </style>
diff --git a/src/lib/components/TaskItem.svelte b/src/lib/components/TaskItem.svelte
index 90bd058..8fe9ed9 100644
--- a/src/lib/components/TaskItem.svelte
+++ b/src/lib/components/TaskItem.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Task } from '$lib/types';
   import { taskStore } from '$lib/stores/tasks.svelte';
+  import { Checkbox, Tag, Button } from 'carbon-components-svelte';
+  import { TrashCan, Renew } from 'carbon-icons-svelte';
 
   interface Props {
     task: Task;
@@ -43,6 +45,13 @@
     return 'Low';
   }
 
+  function getPriorityTagType(priority: number | null): 'red' | 'warm-gray' | 'blue' | 'gray' {
+    if (priority === null) return 'gray';
+    if (priority <= 3) return 'red';
+    if (priority <= 6) return 'warm-gray';
+    return 'blue';
+  }
+
   function getRecurrenceLabel(rrule: string | null): string {
     if (!rrule) return '';
     if (rrule.includes('FREQ=DAILY')) return 'Daily';
@@ -58,97 +67,56 @@
 </script>
 
 <div class="task-item" class:completed={task.completed}>
-  <button
-    class="checkbox"
-    class:checked={task.completed}
-    onclick={handleToggle}
-    aria-label={task.completed ? 'Mark incomplete' : 'Mark complete'}
-  >
-    {#if task.completed}
-      <svg viewBox="0 0 24 24" fill="currentColor">
-        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-      </svg>
-    {/if}
-  </button>
+  <Checkbox
+    checked={task.completed}
+    on:check={handleToggle}
+    labelText=""
+    hideLabel
+  />
 
   <button class="task-content" onclick={() => onEdit?.(task)}>
     <span class="task-title">{task.title}</span>
     <div class="task-meta">
       {#if task.due_date}
-        <span class="due-date" class:overdue={isOverdue}>
-          {formatDueDate(task.due_date)}
-        </span>
+        <Tag size="sm" type={isOverdue ? 'red' : 'gray'}>{formatDueDate(task.due_date)}</Tag>
       {/if}
       {#if task.priority}
-        <span class="priority priority-{getPriorityLabel(task.priority).toLowerCase()}">
-          {getPriorityLabel(task.priority)}
-        </span>
+        <Tag size="sm" type={getPriorityTagType(task.priority)}>{getPriorityLabel(task.priority)}</Tag>
       {/if}
       {#if task.rrule}
-        <span class="recurrence">
-          <svg viewBox="0 0 24 24" fill="currentColor" class="recurrence-icon">
-            <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
-          </svg>
-          {getRecurrenceLabel(task.rrule)}
-        </span>
+        <Tag size="sm" type="teal" icon={Renew}>{getRecurrenceLabel(task.rrule)}</Tag>
       {/if}
     </div>
   </button>
 
-  <button class="delete-btn" onclick={handleDelete} title="Delete task">
-    <svg viewBox="0 0 24 24" fill="currentColor">
-      <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-    </svg>
-  </button>
+  <Button
+    kind="ghost"
+    size="small"
+    iconDescription="Delete task"
+    icon={TrashCan}
+    on:click={handleDelete}
+    class="delete-btn"
+  />
 </div>
 
 <style>
   .task-item {
     display: flex;
     align-items: flex-start;
-    gap: 0.75rem;
-    padding: 0.75rem;
-    border-radius: 6px;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 0;
     transition: background-color 0.15s;
   }
 
   .task-item:hover {
-    background: var(--bg-hover);
+    background: var(--cds-layer-hover, var(--bg-hover));
   }
 
   .task-item.completed {
     opacity: 0.6;
   }
 
-  .checkbox {
-    width: 20px;
-    height: 20px;
-    border: 2px solid var(--border-color);
-    border-radius: 4px;
-    background: transparent;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    margin-top: 2px;
-  }
-
-  .checkbox:hover {
-    border-color: var(--accent-color);
-  }
-
-  .checkbox.checked {
-    background: var(--accent-color);
-    border-color: var(--accent-color);
-    color: white;
-  }
-
-  .checkbox svg {
-    width: 14px;
-    height: 14px;
-  }
-
   .task-content {
     flex: 1;
     min-width: 0;
@@ -163,7 +131,8 @@
 
   .task-title {
     display: block;
-    font-size: 0.9375rem;
+    font-size: 0.875rem;
+    line-height: 1.4;
   }
 
   .completed .task-title {
@@ -172,107 +141,25 @@
 
   .task-meta {
     display: flex;
-    gap: 0.5rem;
-    margin-top: 0.25rem;
-    font-size: 0.75rem;
-  }
-
-  .due-date {
-    color: var(--text-secondary);
-  }
-
-  .due-date.overdue {
-    color: var(--error-color);
-    font-weight: 500;
-  }
-
-  .priority {
-    padding: 0.125rem 0.375rem;
-    border-radius: 3px;
-    font-weight: 500;
-  }
-
-  .priority-high {
-    background: var(--priority-high-bg);
-    color: var(--priority-high-text);
-  }
-
-  .priority-medium {
-    background: var(--priority-medium-bg);
-    color: var(--priority-medium-text);
-  }
-
-  .priority-low {
-    background: var(--priority-low-bg);
-    color: var(--priority-low-text);
-  }
-
-  .recurrence {
-    display: flex;
-    align-items: center;
+    flex-wrap: wrap;
     gap: 0.25rem;
-    color: var(--text-secondary);
-  }
-
-  .recurrence-icon {
-    width: 12px;
-    height: 12px;
+    margin-top: 0.25rem;
   }
 
-  .delete-btn {
-    width: 28px;
-    height: 28px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* Hide delete button until hover on desktop */
+  .task-item :global(.delete-btn) {
     opacity: 0;
-    color: var(--text-secondary);
+    transition: opacity 0.15s;
   }
 
-  .task-item:hover .delete-btn {
+  .task-item:hover :global(.delete-btn) {
     opacity: 1;
   }
 
-  .delete-btn:hover {
-    background: var(--bg-hover);
-    color: var(--error-color);
-  }
-
-  .delete-btn svg {
-    width: 18px;
-    height: 18px;
-  }
-
-  /* Mobile touch target improvements */
-  @media (max-width: 768px) {
-    .task-item {
-      padding: 0.5rem;
-    }
-
-    .checkbox {
-      width: 44px;
-      height: 44px;
-      margin-top: 0;
-    }
-
-    .checkbox svg {
-      width: 24px;
-      height: 24px;
-    }
-
-    .delete-btn {
-      width: 44px;
-      height: 44px;
-      opacity: 1; /* Always visible on mobile */
-    }
-
-    .delete-btn svg {
-      width: 24px;
-      height: 24px;
+  /* Mobile: always show delete, larger touch targets */
+  @media (max-width: 1056px) {
+    .task-item :global(.delete-btn) {
+      opacity: 1;
     }
   }
 </style>
diff --git a/src/lib/components/TaskListView.svelte b/src/lib/components/TaskListView.svelte
index d9ff09c..e4c1bee 100644
--- a/src/lib/components/TaskListView.svelte
+++ b/src/lib/components/TaskListView.svelte
@@ -4,6 +4,7 @@
   import { listStore } from '$lib/stores/lists.svelte';
   import TaskItem from './TaskItem.svelte';
   import SyncStatus from './SyncStatus.svelte';
+  import { Accordion, AccordionItem, InlineLoading } from 'carbon-components-svelte';
 
   interface Props {
     onEditTask?: (task: Task) => void;
@@ -43,11 +44,13 @@
         <SyncStatus listId={syncListId} />
       {/if}
     </div>
-    <span class="task-count">{incompleteTasks.length} tasks</span>
+    <span class="task-count">{incompleteTasks.length} task{incompleteTasks.length !== 1 ? 's' : ''}</span>
   </header>
 
   {#if taskStore.loading}
-    <div class="loading">Loading tasks...</div>
+    <div class="loading">
+      <InlineLoading description="Loading tasks..." />
+    </div>
   {:else if taskStore.error}
     <div class="error">{taskStore.error}</div>
   {:else}
@@ -65,14 +68,15 @@
         </div>
 
         {#if !hideCompletedSection && completedTasks.length > 0}
-          <details class="completed-section">
-            <summary>Completed ({completedTasks.length})</summary>
-            <div class="task-section">
-              {#each completedTasks as task (task.id)}
-                <TaskItem {task} onEdit={onEditTask} />
-              {/each}
-            </div>
-          </details>
+          <Accordion>
+            <AccordionItem title="Completed ({completedTasks.length})">
+              <div class="task-section">
+                {#each completedTasks as task (task.id)}
+                  <TaskItem {task} onEdit={onEditTask} />
+                {/each}
+              </div>
+            </AccordionItem>
+          </Accordion>
         {/if}
       {/if}
     </div>
@@ -90,8 +94,8 @@
   }
 
   .list-header {
-    padding: 1.5rem 1.5rem 1rem;
-    border-bottom: 1px solid var(--border-color);
+    padding: 1rem;
+    border-bottom: 1px solid var(--cds-border-subtle, var(--border-color));
   }
 
   .header-top {
@@ -103,19 +107,19 @@
 
   .list-header h1 {
     margin: 0;
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 600;
   }
 
   .task-count {
     font-size: 0.875rem;
-    color: var(--text-secondary);
+    color: var(--cds-text-secondary, var(--text-secondary));
   }
 
   .tasks-container {
     flex: 1;
     overflow-y: auto;
-    padding: 1rem 1.5rem;
+    padding: 0.5rem 1rem;
   }
 
   .task-section {
@@ -123,24 +127,6 @@
     flex-direction: column;
   }
 
-  .completed-section {
-    margin-top: 1.5rem;
-    border-top: 1px solid var(--border-color);
-    padding-top: 1rem;
-  }
-
-  .completed-section summary {
-    cursor: pointer;
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-    padding: 0.5rem 0;
-    user-select: none;
-  }
-
-  .completed-section summary:hover {
-    color: var(--text-primary);
-  }
-
   .loading,
   .error,
   .empty-state {
@@ -149,11 +135,11 @@
   }
 
   .error {
-    color: var(--error-color);
+    color: var(--cds-danger, var(--error-color));
   }
 
   .empty-state {
-    color: var(--text-secondary);
+    color: var(--cds-text-secondary, var(--text-secondary));
   }
 
   .empty-state p {
@@ -164,15 +150,15 @@
     font-size: 0.875rem;
   }
 
-  /* Mobile adjustments */
-  @media (max-width: 768px) {
+  /* Hide header on mobile - shown in Carbon Header instead */
+  @media (max-width: 1056px) {
     .list-header {
-      display: none; /* Title shown in mobile header */
+      display: none;
     }
 
     .tasks-container {
-      padding: 0.75rem 1rem;
-      padding-bottom: env(safe-area-inset-bottom, 0.75rem);
+      padding: 0.5rem;
+      padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
     }
   }
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4039a26..89c9df7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,26 @@
 <script>
   import '../app.css';
+  import 'carbon-components-svelte/css/all.css';
+  import '$lib/carbon-overrides.css';
+  import { Theme } from 'carbon-components-svelte';
+
+  let { children } = $props();
+
+  let theme = $state('white');
+
+  $effect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    theme = mediaQuery.matches ? 'g90' : 'white';
+
+    const handler = (e) => {
+      theme = e.matches ? 'g90' : 'white';
+    };
+    mediaQuery.addEventListener('change', handler);
+
+    return () => mediaQuery.removeEventListener('change', handler);
+  });
 </script>
 
-<slot />
+<Theme bind:theme />
+
+{@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 20df139..973197c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,34 +8,30 @@
   import TaskListView from '$lib/components/TaskListView.svelte';
   import TaskForm from '$lib/components/TaskForm.svelte';
   import AccountList from '$lib/components/AccountList.svelte';
+  import {
+    Header,
+    HeaderUtilities,
+    HeaderGlobalAction,
+    SideNav,
+    SideNavItems,
+    Content,
+    Breakpoint,
+    ComposedModal,
+    ModalHeader,
+    ModalBody,
+  } from 'carbon-components-svelte';
+  import { Settings, Add, Close } from 'carbon-icons-svelte';
 
   let editingTask = $state<Task | null>(null);
   let showSettings = $state(false);
-  let showMobileForm = $state(false);
+  let showTaskForm = $state(false);
 
-  // Mobile responsiveness state
-  const MOBILE_BREAKPOINT = 768;
-  let isMobile = $state(false);
+  // Mobile responsiveness using Carbon's Breakpoint
+  let breakpointSize: 'sm' | 'md' | 'lg' | 'xlg' | 'max' = $state('lg');
+  const isMobile = $derived(breakpointSize === 'sm' || breakpointSize === 'md');
   let sidebarOpen = $state(false);
 
-  function checkMobile() {
-    const wasMobile = isMobile;
-    isMobile = window.innerWidth < MOBILE_BREAKPOINT;
-    // Close sidebar when switching to desktop mode
-    if (wasMobile && !isMobile) {
-      sidebarOpen = false;
-    }
-  }
-
-  function toggleSidebar() {
-    sidebarOpen = !sidebarOpen;
-  }
-
-  function closeSidebar() {
-    sidebarOpen = false;
-  }
-
-  // Get current view title for mobile header
+  // Get current view title for header
   const currentViewTitle = $derived(() => {
     if (showSettings) return 'Settings';
     const view = listStore.selectedView;
@@ -50,8 +46,6 @@
   // Load lists on mount
   onMount(() => {
     listStore.load();
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
 
     // Setup sync event listeners to reload tasks when sync completes
     syncStore.setupEventListeners((listId) => {
@@ -63,7 +57,6 @@
     });
 
     return () => {
-      window.removeEventListener('resize', checkMobile);
       syncStore.cleanup();
     };
   });
@@ -85,130 +78,85 @@
 
   function handleEditTask(task: Task) {
     editingTask = task;
-    if (isMobile) {
-      showMobileForm = true;
-    }
+    showTaskForm = true;
   }
 
   function handleCloseEdit() {
     editingTask = null;
-    showMobileForm = false;
+    showTaskForm = false;
   }
 
   function handleToggleSettings() {
     showSettings = !showSettings;
   }
 
-  function handleFabClick() {
+  function handleAddTask() {
     editingTask = null;
-    showMobileForm = true;
+    showTaskForm = true;
   }
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-<div class="app-layout" class:mobile={isMobile}>
-  {#if isMobile}
-    <header class="mobile-header">
-      <button class="hamburger-btn" onclick={toggleSidebar} aria-label="Toggle menu">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="3" y1="12" x2="21" y2="12"></line>
-          <line x1="3" y1="6" x2="21" y2="6"></line>
-          <line x1="3" y1="18" x2="21" y2="18"></line>
-        </svg>
-      </button>
-      <h1>{currentViewTitle()}</h1>
-    </header>
+<Breakpoint bind:size={breakpointSize} />
+
+<Header company="Potasko" platformName={isMobile ? currentViewTitle() : ''} bind:isSideNavOpen={sidebarOpen}>
+  <HeaderUtilities>
+    <HeaderGlobalAction
+      aria-label="Settings"
+      icon={Settings}
+      isActive={showSettings}
+      on:click={handleToggleSettings}
+    />
+  </HeaderUtilities>
+</Header>
+
+<SideNav bind:isOpen={sidebarOpen} rail={!isMobile}>
+  <SideNavItems>
+    <Sidebar
+      {showSettings}
+      onToggleSettings={handleToggleSettings}
+      {isMobile}
+      onClose={() => sidebarOpen = false}
+    />
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  {#if showSettings}
+    <div class="settings-panel">
+      <AccountList />
+    </div>
+  {:else if listStore.selectedView}
+    <TaskListView onEditTask={handleEditTask} />
+  {:else if listStore.loading}
+    <div class="loading-state">Loading...</div>
+  {:else}
+    <div class="empty-state">
+      <p>No lists yet</p>
+      <p>Create a list to get started</p>
+    </div>
   {/if}
-
-  <Sidebar
-    {showSettings}
-    onToggleSettings={handleToggleSettings}
-    {isMobile}
-    isOpen={sidebarOpen}
-    onClose={closeSidebar}
-  />
-
-  {#if isMobile && sidebarOpen}
-    <div class="backdrop visible" onclick={closeSidebar}></div>
-  {/if}
-
-  <main class="main-content">
-    {#if showSettings}
-      <div class="settings-panel">
-        <AccountList />
-      </div>
-    {:else if listStore.selectedView}
-      <TaskListView onEditTask={handleEditTask} />
-      {#if canAddTasks}
-        {#if !isMobile}
-          <!-- Desktop: inline form -->
-          {#key editingTask?.id}
-            <TaskForm task={editingTask} onClose={handleCloseEdit} />
-          {/key}
-        {/if}
-      {/if}
-    {:else if listStore.loading}
-      <div class="loading-state">Loading...</div>
-    {:else}
-      <div class="empty-state">
-        <p>No lists yet</p>
-        <p>Create a list to get started</p>
-      </div>
-    {/if}
-  </main>
-
-  <!-- Mobile: FAB and modal form -->
-  {#if isMobile && canAddTasks && !showSettings}
-    {#if showMobileForm}
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-      <div class="form-modal-backdrop" onclick={handleCloseEdit}>
-        <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-        <div class="form-modal" onclick={(e) => e.stopPropagation()}>
-          <div class="form-modal-handle"></div>
-          <div class="form-modal-header">
-            <span>{editingTask ? 'Edit Task' : 'New Task'}</span>
-            <button class="form-modal-close" onclick={handleCloseEdit} aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            </button>
-          </div>
-          {#key editingTask?.id}
-            <TaskForm task={editingTask} onClose={handleCloseEdit} />
-          {/key}
-        </div>
-      </div>
-    {:else}
-      <button class="fab" onclick={handleFabClick} aria-label="Add task">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="12" y1="5" x2="12" y2="19"></line>
-          <line x1="5" y1="12" x2="19" y2="12"></line>
-        </svg>
-      </button>
-    {/if}
-  {/if}
-</div>
+</Content>
+
+<!-- FAB for adding tasks -->
+{#if canAddTasks && !showSettings && !showTaskForm}
+  <button class="fab" onclick={handleAddTask} aria-label="Add task">
+    <Add size={24} />
+  </button>
+{/if}
+
+<!-- Task form modal (both desktop and mobile) -->
+{#if showTaskForm}
+  <ComposedModal open={true} on:close={handleCloseEdit} class="task-form-modal">
+    <ModalHeader title={editingTask ? 'Edit Task' : 'New Task'} />
+    <ModalBody>
+      {#key editingTask?.id}
+        <TaskForm task={editingTask} onClose={handleCloseEdit} />
+      {/key}
+    </ModalBody>
+  </ComposedModal>
+{/if}
 
 <style>
-  .app-layout {
-    display: flex;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .app-layout.mobile {
-    flex-direction: column;
-  }
-
-  .main-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    min-height: 0;
-  }
-
   .loading-state,
   .empty-state {
     flex: 1;
@@ -216,7 +164,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: var(--text-secondary);
+    color: var(--cds-text-secondary, var(--text-secondary));
+    min-height: 200px;
   }
 
   .empty-state p {
@@ -224,19 +173,10 @@
   }
 
   .settings-panel {
-    flex: 1;
-    padding: 1.5rem;
-    overflow-y: auto;
-    background: var(--bg-primary);
+    padding: 1rem;
   }
 
-  @media (max-width: 768px) {
-    .settings-panel {
-      padding: 1rem;
-    }
-  }
-
-  /* Floating Action Button */
+  /* Floating Action Button - styled with Carbon tokens */
   .fab {
     position: fixed;
     bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
@@ -244,104 +184,30 @@
     width: 56px;
     height: 56px;
     border-radius: 50%;
-    background: var(--accent-color);
-    color: white;
+    background: var(--cds-interactive, var(--accent-color, #0f62fe));
+    color: var(--cds-text-on-color, white);
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-    z-index: 100;
+    z-index: 8000;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
 
   .fab:hover {
     transform: scale(1.05);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+    background: var(--cds-interactive-hover, #0353e9);
   }
 
   .fab:active {
     transform: scale(0.95);
   }
 
-  .fab svg {
-    width: 24px;
-    height: 24px;
-  }
-
-  /* Mobile form modal */
-  .form-modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 200;
-    display: flex;
-    align-items: flex-end;
-    animation: fadeIn 0.2s ease;
-  }
-
-  .form-modal {
-    width: 100%;
-    background: var(--bg-primary);
-    border-radius: 16px 16px 0 0;
-    animation: slideUp 0.3s ease;
-    max-height: 90vh;
-    overflow-y: auto;
-  }
-
-  .form-modal-handle {
-    width: 36px;
-    height: 4px;
-    background: var(--border-color);
-    border-radius: 2px;
-    margin: 8px auto;
-  }
-
-  .form-modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 1rem 0.5rem;
-    font-weight: 600;
-  }
-
-  .form-modal-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text-secondary);
-    border-radius: 50%;
-  }
-
-  .form-modal-close:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .form-modal-close svg {
-    width: 20px;
-    height: 20px;
-  }
-
   /* Remove TaskForm border when in modal */
-  .form-modal :global(.task-form) {
-    border-top: none;
+  :global(.task-form-modal .bx--modal-content) {
     padding-top: 0;
   }
-
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  @keyframes slideUp {
-    from { transform: translateY(100%); }
-    to { transform: translateY(0); }
-  }
 </style>
diff --git a/svelte.config.js b/svelte.config.js
index a7830ea..15e42d4 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -4,10 +4,11 @@
 // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
 import adapter from "@sveltejs/adapter-static";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { optimizeImports } from "carbon-preprocess-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  preprocess: vitePreprocess(),
+  preprocess: [vitePreprocess(), optimizeImports()],
   kit: {
     adapter: adapter({
       fallback: "index.html",
diff --git a/vite.config.js b/vite.config.js
index bed9095..7890141 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,11 +1,12 @@
 import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
+import { optimizeCss } from "carbon-preprocess-svelte";
 
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vite.dev/config/
 export default defineConfig(async () => ({
-  plugins: [sveltekit()],
+  plugins: [sveltekit(), optimizeCss()],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //