Deps + Bun

2.5.0
Improved logo
2026-03-03 13:30:43 -07:00 · 2026-02-14 01:51:57 -07:00 · 2026-02-14 01:51:43 -07:00 · 2026-02-14 01:47:14 -07:00 · 2026-02-14 01:11:01 -07:00 · 2026-02-13 11:35:06 -07:00
75 changed files with 2567 additions and 8633 deletions
--- a/.env.example
+++ b/.env.example
@@ -2,3 +2,5 @@ DATA_DIR=./data
 ROOT_DIR=./data
 APP_PORT=4321
 IMAGE=git.atri.dad/atash/chronus:latest
+JWT_SECRET=some-secret
+ORIGIN=https://chronus.example.com
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -12,20 +12,20 @@ jobs:
      packages: write
    steps:
      - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3

      - name: Login to Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
        with:
          registry: ${{ secrets.REPO_HOST }}
          username: ${{ github.repository_owner }}
          password: ${{ secrets.DEPLOY_TOKEN }}

      - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v6
        with:
          context: .
          platforms: linux/amd64
@@ -33,3 +33,6 @@ jobs:
          tags: |
            ${{ secrets.REPO_HOST }}/${{ github.repository_owner }}/${{ github.event.repository.name }}:${{ github.sha }}
            ${{ secrets.REPO_HOST }}/${{ github.repository_owner }}/${{ github.event.repository.name }}:latest
+          provenance: false
+          cache-from: type=registry,ref=${{ secrets.REPO_HOST }}/${{ github.repository_owner }}/${{ github.event.repository.name }}:buildcache
+          cache-to: type=registry,ref=${{ secrets.REPO_HOST }}/${{ github.repository_owner }}/${{ github.event.repository.name }}:buildcache,mode=max
--- a/29
+++ b/29
@@ -1,35 +1,28 @@
-FROM node:lts-alpine AS base
+FROM oven/bun:1.3.9-alpine AS base
 WORKDIR /app
-RUN npm i -g pnpm

 FROM base AS prod-deps
-WORKDIR /app
-RUN apk add --no-cache python3 make g++
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm install --prod --frozen-lockfile
+COPY package.json bun.lock ./
+RUN --mount=type=cache,id=bun,target=/root/.bun/install/cache \
+    bun install --production --frozen-lockfile || bun install --production

-FROM base AS build-deps
-WORKDIR /app
-RUN apk add --no-cache python3 make g++
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm install --frozen-lockfile
+FROM base AS builder
+COPY package.json bun.lock ./
+RUN --mount=type=cache,id=bun,target=/root/.bun/install/cache \
+    bun install --frozen-lockfile || bun install

-FROM build-deps AS builder
-WORKDIR /app
 COPY . .
-RUN pnpm run build
+RUN bun run build

 FROM base AS runtime
 WORKDIR /app

-COPY --from=prod-deps /app/node_modules ./node_modules
 COPY --from=builder /app/dist ./dist
-COPY --from=builder /app/drizzle ./drizzle
-COPY --from=builder /app/scripts ./scripts
+COPY --from=prod-deps /app/node_modules ./node_modules
 COPY package.json ./

 ENV HOST=0.0.0.0
 ENV PORT=4321
 EXPOSE 4321

-CMD ["sh", "-c", "npm run migrate && node ./dist/server/entry.mjs"]
+CMD ["bun", "run", "./dist/server/entry.mjs"]
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -2,15 +2,14 @@
 import { defineConfig } from "astro/config";
 import vue from "@astrojs/vue";
 import tailwindcss from "@tailwindcss/vite";
-import icon from "astro-icon";
-
 import node from "@astrojs/node";

 // https://astro.build/config
 export default defineConfig({
  output: "server",
-  integrations: [vue(), icon()],
+  integrations: [vue()],
  security: {
+    checkOrigin: false,
    csp: process.env.NODE_ENV === "production",
  },
  vite: {
--- a/bun.lock
+++ b/bun.lock
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,6 +8,8 @@ services:
      - HOST=0.0.0.0
      - PORT=4321
      - DATA_DIR=/app/data
+      - JWT_SECRET=${JWT_SECRET}
+      - ORIGIN=${ORIGIN}
    volumes:
      - ${ROOT_DIR}:/app/data
    restart: unless-stopped
--- a/flake.nix
+++ b/flake.nix
@@ -5,7 +5,8 @@
    nixpkgs.url = "github:nixos/nixpkgs/nixos-25.11";
  };

-  outputs = { self, nixpkgs }:
+  outputs =
+    { nixpkgs }:
    let
      allSystems = [
        "x86_64-linux"
@@ -14,25 +15,33 @@
        "aarch64-darwin"
      ];

-      forAllSystems = f: nixpkgs.lib.genAttrs allSystems (system: f {
-        pkgs = import nixpkgs { inherit system; };
-      });
+      forAllSystems =
+        f:
+        nixpkgs.lib.genAttrs allSystems (
+          system:
+          f {
+            pkgs = import nixpkgs { inherit system; };
+          }
+        );
    in
    {
-      devShells = forAllSystems ({ pkgs }: {
-        default = pkgs.mkShell {
-          packages = with pkgs; [
-            nodejs_24
-            nodePackages.pnpm
-            sqlite
-          ];
+      devShells = forAllSystems (
+        { pkgs }:
+        {
+          default = pkgs.mkShell {
+            packages = with pkgs; [
+              nodejs_24
+              nodePackages.pnpm
+              sqlite
+            ];

-          shellHook = ''
-            echo "Chronus dev shell"
-            echo "Node version: $(node --version)"
-            echo "pnpm version: $(pnpm --version)"
-          '';
-        };
-      });
+            shellHook = ''
+              echo "Chronus dev shell"
+              echo "Node version: $(node --version)"
+              echo "pnpm version: $(pnpm --version)"
+            '';
+          };
+        }
+      );
    };
 }
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "chronus",
  "type": "module",
-  "version": "2.4.0",
+  "version": "2.5.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
@@ -13,31 +13,29 @@
  },
  "dependencies": {
    "@astrojs/check": "0.9.6",
-    "@astrojs/node": "10.0.0-beta.2",
-    "@astrojs/vue": "6.0.0-beta.0",
+    "@astrojs/node": "9.5.4",
+    "@astrojs/vue": "5.1.4",
    "@ceereals/vue-pdf": "^0.2.1",
-    "@iconify/vue": "^5.0.0",
    "@libsql/client": "^0.17.0",
    "@simplewebauthn/browser": "^13.2.2",
-    "@simplewebauthn/server": "^13.2.2",
-    "@tailwindcss/vite": "^4.1.18",
-    "astro": "6.0.0-beta.9",
-    "astro-icon": "^1.1.5",
+    "@simplewebauthn/server": "^13.2.3",
+    "@tailwindcss/vite": "^4.2.1",
+    "astro": "5.18.0",
    "bcryptjs": "^3.0.3",
    "chart.js": "^4.5.1",
-    "daisyui": "^5.5.18",
-    "dotenv": "^17.2.4",
+    "daisyui": "^5.5.19",
+    "dotenv": "^17.3.1",
    "drizzle-orm": "0.45.1",
+    "jsonwebtoken": "^9.0.3",
    "nanoid": "^5.1.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
    "typescript": "^5.9.3",
-    "vue": "^3.5.28",
+    "vue": "^3.5.29",
    "vue-chartjs": "^5.3.3"
  },
  "devDependencies": {
-    "@catppuccin/daisyui": "^2.1.1",
-    "@iconify-json/heroicons": "^1.2.3",
    "@react-pdf/types": "^2.9.2",
+    "@types/jsonwebtoken": "^9.0.10",
    "drizzle-kit": "0.31.9"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-512x512.png
+++ b/public/android-chrome-512x512.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/logo.webp
+++ b/public/logo.webp
--- a/src/components/AutoSubmit.vue
+++ b/src/components/AutoSubmit.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+function onChange(e: Event) {
+  const el = e.target as HTMLElement;
+  el.closest('form')?.submit();
+}
+</script>
+
+<template>
+  <span @change="onChange">
+    <slot />
+  </span>
+</template>
--- a/src/components/Avatar.astro
+++ b/src/components/Avatar.astro
@@ -9,7 +9,7 @@ const initial = name ? name.charAt(0).toUpperCase() : '?';
 ---

 <div class:list={["avatar placeholder", className]}>
-  <div class="bg-primary/15 text-primary w-9 h-9 rounded-full flex items-center justify-center">
+  <div class="bg-base-300 text-primary w-9 h-9 rounded-full flex items-center justify-center">
    <span class="text-sm font-semibold">{initial}</span>
  </div>
 </div>
--- a/src/components/ColorDot.vue
+++ b/src/components/ColorDot.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  color: string;
+  as?: string;
+  class?: string;
+  borderColor?: boolean;
+}>();
+</script>
+
+<template>
+  <component
+    :is="as || 'span'"
+    :class="$props.class"
+    :style="borderColor ? { borderColor: color } : { backgroundColor: color }"
+  ><slot /></component>
+</template>
--- a/src/components/ConfirmForm.vue
+++ b/src/components/ConfirmForm.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  message: string;
+  action: string;
+  method?: string;
+  class?: string;
+}>();
+
+function onSubmit(e: Event) {
+  if (!confirm((e.currentTarget as HTMLFormElement).dataset.message!)) {
+    e.preventDefault();
+  }
+}
+</script>
+
+<template>
+  <form
+    :method="method || 'POST'"
+    :action="action"
+    :class="$props.class"
+    :data-message="message"
+    @submit="onSubmit"
+  >
+    <slot />
+  </form>
+</template>
--- a/src/components/Icon.astro
+++ b/src/components/Icon.astro
@@ -0,0 +1,27 @@
+---
+import { icons, type IconName } from "../config/icons";
+
+interface Props {
+  name: IconName;
+  class?: string;
+  "class:list"?: any;
+}
+
+const { name, class: className, "class:list": classList } = Astro.props;
+const svg = icons[name];
+
+if (!svg) {
+  throw new Error(`Icon "${name}" not found in icon registry`);
+}
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="1em"
+  height="1em"
+  fill="none"
+  class:list={[className, classList]}
+  aria-hidden="true"
+  set:html={svg}
+/>
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { icons, type IconName } from "../config/icons";
+
+const props = defineProps<{
+  name: IconName;
+  class?: string;
+}>();
+
+const svg = computed(() => {
+  const icon = icons[props.name];
+  if (!icon) {
+    throw new Error(`Icon "${props.name}" not found in icon registry`);
+  }
+  return icon;
+});
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    fill="none"
+    :class="props.class"
+    aria-hidden="true"
+    v-html="svg"
+  />
+</template>
--- a/src/components/ManualEntry.vue
+++ b/src/components/ManualEntry.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import Icon from "./Icon.vue";

 const props = defineProps<{
  clients: { id: string; name: string }[];
@@ -147,7 +148,7 @@ function clearForm() {

 <template>
  <div
-    class="card bg-base-200/50 backdrop-blur-sm shadow-lg border border-base-300/50 hover:border-base-300 transition-all duration-200"
+    class="card bg-base-200 backdrop-blur-sm shadow-lg border border-base-content/20 hover:border-base-content/20 transition-all duration-200"
  >
    <div class="card-body gap-6">
      <div class="flex justify-between items-center">
@@ -164,37 +165,13 @@ function clearForm() {

      <!-- Success Message -->
      <div v-if="success" class="alert alert-success">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
+        <Icon name="check-circle" class="stroke-current shrink-0 h-6 w-6" />
        <span>Manual time entry created successfully!</span>
      </div>

      <!-- Error Message -->
      <div v-if="error" class="alert alert-error">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
+        <Icon name="x-circle" class="stroke-current shrink-0 h-6 w-6" />
        <span>{{ error }}</span>
      </div>

@@ -206,7 +183,7 @@ function clearForm() {
        <select
          id="manual-client"
          v-model="selectedClientId"
-          class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+          class="select select-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
          :disabled="isSubmitting"
        >
          <option value="">Select a client...</option>
@@ -226,7 +203,7 @@ function clearForm() {
            id="manual-start-date"
            v-model="startDate"
            type="date"
-            class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
            :disabled="isSubmitting"
          />
        </div>
@@ -239,7 +216,7 @@ function clearForm() {
            id="manual-start-time"
            v-model="startTime"
            type="time"
-            class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
            :disabled="isSubmitting"
          />
        </div>
@@ -255,7 +232,7 @@ function clearForm() {
            id="manual-end-date"
            v-model="endDate"
            type="date"
-            class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
            :disabled="isSubmitting"
          />
        </div>
@@ -268,7 +245,7 @@ function clearForm() {
            id="manual-end-time"
            v-model="endTime"
            type="time"
-            class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
            :disabled="isSubmitting"
          />
        </div>
@@ -284,7 +261,7 @@ function clearForm() {
          v-model="description"
          type="text"
          placeholder="What did you work on?"
-          class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+          class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
          :disabled="isSubmitting"
        />
      </div>
@@ -301,7 +278,7 @@ function clearForm() {
              'badge badge-lg cursor-pointer transition-all hover:scale-105',
              selectedTagId === tag.id
                ? 'badge-primary shadow-lg shadow-primary/20'
-                : 'badge-outline hover:bg-base-300/50',
+                : 'badge-outline hover:bg-base-300',
            ]"
            :disabled="isSubmitting"
            type="button"
--- a/src/components/ModalButton.vue
+++ b/src/components/ModalButton.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  modalId: string;
+  action?: 'open' | 'close';
+  class?: string;
+  title?: string;
+  type?: string;
+}>();
+
+function onClick(e: MouseEvent) {
+  const btn = e.currentTarget as HTMLElement;
+  const id = btn.dataset.modalId!;
+  const act = btn.dataset.action || 'open';
+  const modal = document.getElementById(id) as HTMLDialogElement | null;
+  if (act === 'close') {
+    modal?.close();
+  } else {
+    modal?.showModal();
+  }
+}
+</script>
+
+<template>
+  <button
+    :type="(type as any) || 'button'"
+    :class="$props.class"
+    :title="$props.title"
+    :data-modal-id="modalId"
+    :data-action="action || 'open'"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
--- a/src/components/StatCard.astro
+++ b/src/components/StatCard.astro
@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon/components';
+import Icon from './Icon.astro';

 interface Props {
  title: string;
@@ -18,12 +18,12 @@ const { title, value, description, icon, color = 'text-primary', valueClass } =
    <div class="flex items-center justify-between">
      <span class="text-xs font-medium uppercase tracking-wider text-base-content/60">{title}</span>
      {icon && (
-        <div class:list={[color, "opacity-40"]}>
+        <div class:list={[color, "opacity-70"]}>
          <Icon name={icon} class="w-5 h-5" />
        </div>
      )}
    </div>
    <div class:list={["text-2xl font-bold", color, valueClass]}>{value}</div>
-    {description && <div class="text-xs text-base-content/50">{description}</div>}
+    {description && <div class="text-xs text-base-content/60">{description}</div>}
  </div>
 </div>
--- a/src/components/TagChart.vue
+++ b/src/components/TagChart.vue
@@ -33,7 +33,7 @@ const chartData = computed(() => ({
    {
      data: props.tags.map((t) => t.totalTime / (1000 * 60)), // Convert to minutes
      backgroundColor: props.tags.map((t) => t.color),
-      borderColor: "#1e293b", // Matches typical dark mode bg
+      borderColor: "#1e293b",
      borderWidth: 2,
    },
  ],
--- a/src/components/ThemeToggle.vue
+++ b/src/components/ThemeToggle.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { Icon } from '@iconify/vue';
+import { ref, onMounted } from "vue";
+import Icon from "./Icon.vue";

-const theme = ref('macchiato');
+const theme = ref("sunset");

 onMounted(() => {
-  const stored = localStorage.getItem('theme');
+  const stored = localStorage.getItem("theme");
  if (stored) {
    theme.value = stored;
-    document.documentElement.setAttribute('data-theme', stored);
+    document.documentElement.setAttribute("data-theme", stored);
  }
 });

 function toggleTheme() {
-  const newTheme = theme.value === 'macchiato' ? 'latte' : 'macchiato';
+  const newTheme = theme.value === "sunset" ? "winter" : "sunset";
  theme.value = newTheme;
-  document.documentElement.setAttribute('data-theme', newTheme);
-  localStorage.setItem('theme', newTheme);
+  document.documentElement.setAttribute("data-theme", newTheme);
+  localStorage.setItem("theme", newTheme);
 }
 </script>

@@ -26,9 +26,6 @@ function toggleTheme() {
    class="btn btn-ghost btn-circle"
    aria-label="Toggle Theme"
  >
-    <Icon 
-      :icon="theme === 'macchiato' ? 'heroicons:moon' : 'heroicons:sun'" 
-      class="w-5 h-5" 
-    />
+    <Icon :name="theme === 'sunset' ? 'moon' : 'sun'" class="w-5 h-5" />
  </button>
 </template>
--- a/src/components/Timer.vue
+++ b/src/components/Timer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
-import { Icon } from "@iconify/vue";
+import Icon from "./Icon.vue";

 const props = defineProps<{
  initialRunningEntry: {
@@ -118,7 +118,7 @@ async function stopTimer() {

 <template>
  <div
-    class="card bg-base-200/50 backdrop-blur-sm shadow-lg border border-base-300/50 mb-6 hover:border-base-300 transition-all duration-200"
+    class="card bg-base-200 backdrop-blur-sm shadow-lg border border-base-content/20 mb-6 hover:border-base-content/20 transition-all duration-200"
  >
    <div class="card-body gap-6">
      <!-- Client Row -->
@@ -129,7 +129,7 @@ async function stopTimer() {
        <select
          id="timer-client"
          v-model="selectedClientId"
-          class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+          class="select select-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
          :disabled="isRunning"
        >
          <option value="">Select a client...</option>
@@ -149,7 +149,7 @@ async function stopTimer() {
          v-model="description"
          type="text"
          placeholder="What are you working on?"
-          class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+          class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
          :disabled="isRunning"
        />
      </div>
@@ -166,7 +166,7 @@ async function stopTimer() {
              'badge badge-lg cursor-pointer transition-all hover:scale-105',
              selectedTagId === tag.id
                ? 'badge-primary shadow-lg shadow-primary/20'
-                : 'badge-outline hover:bg-base-300/50',
+                : 'badge-outline hover:bg-base-300',
            ]"
            :disabled="isRunning"
            type="button"
@@ -188,7 +188,7 @@ async function stopTimer() {
          @click="startTimer"
          class="btn btn-primary btn-lg min-w-40 shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all"
        >
-          <Icon icon="heroicons:play" class="w-5 h-5" />
+          <Icon name="play" class="w-5 h-5" />
          Start Timer
        </button>
        <button
@@ -196,7 +196,7 @@ async function stopTimer() {
          @click="stopTimer"
          class="btn btn-error btn-lg min-w-40 shadow-lg shadow-error/20 hover:shadow-xl hover:shadow-error/30 transition-all"
        >
-          <Icon icon="heroicons:stop" class="w-5 h-5" />
+          <Icon name="stop" class="w-5 h-5" />
          Stop Timer
        </button>
      </div>
--- a/src/components/auth/PasskeyLogin.vue
+++ b/src/components/auth/PasskeyLogin.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { Icon } from "@iconify/vue";
+import Icon from "../Icon.vue";
 import { startAuthentication } from "@simplewebauthn/browser";

 const loading = ref(false);
@@ -60,12 +60,12 @@ async function handlePasskeyLogin() {
      :disabled="loading"
    >
      <span v-if="loading" class="loading loading-spinner loading-sm"></span>
-      <Icon v-else icon="heroicons:finger-print" class="w-5 h-5 mr-2" />
+      <Icon v-else name="finger-print" class="w-5 h-5 mr-2" />
      Sign in with Passkey
    </button>

    <div v-if="error" role="alert" class="alert alert-error mt-4">
-      <Icon icon="heroicons:exclamation-circle" class="w-6 h-6" />
+      <Icon name="exclamation-circle" class="w-6 h-6" />
      <span>{{ error }}</span>
    </div>
  </div>
--- a/src/components/settings/ApiTokenManager.vue
+++ b/src/components/settings/ApiTokenManager.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { Icon } from "@iconify/vue";
+import Icon from "../Icon.vue";

 interface ApiToken {
  id: string;
@@ -107,12 +107,12 @@ function closeShowTokenModal() {

 <template>
  <div>
-    <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
+    <div class="card bg-base-100 shadow-xl border border-base-content/20 mb-6">
      <div class="card-body p-4 sm:p-6">
        <div class="flex justify-between items-center mb-6">
          <h2 class="card-title text-lg sm:text-xl">
            <Icon
-              icon="heroicons:code-bracket-square"
+              name="code-bracket-square"
              class="w-5 h-5 sm:w-6 sm:h-6"
            />
            API Tokens
@@ -121,7 +121,7 @@ function closeShowTokenModal() {
            class="btn btn-primary btn-sm"
            @click="createModalOpen = true"
          >
-            <Icon icon="heroicons:plus" class="w-4 h-4" />
+            <Icon name="plus" class="w-4 h-4" />
            Create Token
          </button>
        </div>
@@ -161,7 +161,7 @@ function closeShowTokenModal() {
                    class="btn btn-ghost btn-xs text-error"
                    @click="deleteToken(token.id)"
                  >
-                    <Icon icon="heroicons:trash" class="w-4 h-4" />
+                    <Icon name="trash" class="w-4 h-4" />
                  </button>
                </td>
              </tr>
@@ -222,7 +222,7 @@ function closeShowTokenModal() {
    <dialog class="modal" :class="{ 'modal-open': showTokenModalOpen }">
      <div class="modal-box">
        <h3 class="font-bold text-lg text-success flex items-center gap-2">
-          <Icon icon="heroicons:check-circle" class="w-6 h-6" />
+          <Icon name="check-circle" class="w-6 h-6" />
          Token Created
        </h3>
        <p class="py-4">
@@ -239,7 +239,7 @@ function closeShowTokenModal() {
            @click="copyToken"
            title="Copy to clipboard"
          >
-            <Icon icon="heroicons:clipboard" class="w-4 h-4" />
+            <Icon name="clipboard" class="w-4 h-4" />
          </button>
        </div>

--- a/src/components/settings/PasskeyManager.vue
+++ b/src/components/settings/PasskeyManager.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { Icon } from "@iconify/vue";
+import Icon from "../Icon.vue";
 import { startRegistration } from "@simplewebauthn/browser";

 interface Passkey {
@@ -94,11 +94,11 @@ async function deletePasskey(id: string) {
 </script>

 <template>
-  <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
+  <div class="card bg-base-100 shadow-xl border border-base-content/20 mb-6">
    <div class="card-body p-4 sm:p-6">
      <div class="flex justify-between items-center mb-6">
        <h2 class="card-title text-lg sm:text-xl">
-          <Icon icon="heroicons:finger-print" class="w-5 h-5 sm:w-6 sm:h-6" />
+          <Icon name="finger-print" class="w-5 h-5 sm:w-6 sm:h-6" />
          Passkeys
        </h2>
        <button
@@ -110,7 +110,7 @@ async function deletePasskey(id: string) {
            v-if="loading"
            class="loading loading-spinner loading-xs"
          ></span>
-          <Icon v-else icon="heroicons:plus" class="w-4 h-4" />
+          <Icon v-else name="plus" class="w-4 h-4" />
          Add Passkey
        </button>
      </div>
@@ -157,7 +157,7 @@ async function deletePasskey(id: string) {
                  class="btn btn-ghost btn-xs text-error"
                  @click="deletePasskey(pk.id)"
                >
-                  <Icon icon="heroicons:trash" class="w-4 h-4" />
+                  <Icon name="trash" class="w-4 h-4" />
                </button>
              </td>
            </tr>
--- a/src/components/settings/PasswordForm.vue
+++ b/src/components/settings/PasswordForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { Icon } from "@iconify/vue";
+import Icon from "../Icon.vue";

 const currentPassword = ref("");
 const newPassword = ref("");
@@ -76,20 +76,20 @@ async function changePassword() {
      ]"
    >
      <Icon
-        :icon="
+        :name="
          message.type === 'success'
-            ? 'heroicons:check-circle'
-            : 'heroicons:exclamation-circle'
+            ? 'check-circle'
+            : 'exclamation-circle'
        "
        class="w-6 h-6 shrink-0"
      />
      <span>{{ message.text }}</span>
    </div>

-    <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
+    <div class="card bg-base-100 shadow-xl border border-base-content/20 mb-6">
      <div class="card-body p-4 sm:p-6">
        <h2 class="card-title mb-6 text-lg sm:text-xl">
-          <Icon icon="heroicons:key" class="w-5 h-5 sm:w-6 sm:h-6" />
+          <Icon name="key" class="w-5 h-5 sm:w-6 sm:h-6" />
          Change Password
        </h2>

@@ -163,7 +163,7 @@ async function changePassword() {
                v-if="loading"
                class="loading loading-spinner loading-sm"
              ></span>
-              <Icon v-else icon="heroicons:lock-closed" class="w-5 h-5" />
+              <Icon v-else name="lock-closed" class="w-5 h-5" />
              Update Password
            </button>
          </div>
--- a/src/components/settings/ProfileForm.vue
+++ b/src/components/settings/ProfileForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { Icon } from "@iconify/vue";
+import Icon from "../Icon.vue";

 const props = defineProps<{
  user: {
@@ -61,20 +61,20 @@ async function updateProfile() {
      ]"
    >
      <Icon
-        :icon="
+        :name="
          message.type === 'success'
-            ? 'heroicons:check-circle'
-            : 'heroicons:exclamation-circle'
+            ? 'check-circle'
+            : 'exclamation-circle'
        "
        class="w-6 h-6 shrink-0"
      />
      <span>{{ message.text }}</span>
    </div>

-    <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
+    <div class="card bg-base-100 shadow-xl border border-base-content/20 mb-6">
      <div class="card-body p-4 sm:p-6">
        <h2 class="card-title mb-6 text-lg sm:text-xl">
-          <Icon icon="heroicons:user-circle" class="w-5 h-5 sm:w-6 sm:h-6" />
+          <Icon name="user-circle" class="w-5 h-5 sm:w-6 sm:h-6" />
          Profile Information
        </h2>

@@ -128,7 +128,7 @@ async function updateProfile() {
                v-if="loading"
                class="loading loading-spinner loading-sm"
              ></span>
-              <Icon v-else icon="heroicons:check" class="w-5 h-5" />
+              <Icon v-else name="check" class="w-5 h-5" />
              Save Changes
            </button>
          </div>
--- a/src/config/icons.ts
+++ b/src/config/icons.ts
@@ -0,0 +1,62 @@
+export const icons = {
+  "arrow-down-tray": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>`,
+  "arrow-left": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>`,
+  "arrow-right": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>`,
+  "arrow-right-on-rectangle": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"/>`,
+  "banknotes": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 18.75a60 60 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0m3 0h.008v.008H18zm-12 0h.008v.008H6z"/>`,
+  "bars-3": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>`,
+  "bolt": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75L12 13.5z"/>`,
+  "building-office": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/>`,
+  "building-office-2": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008zm0 3h.008v.008h-.008zm0 3h.008v.008h-.008z"/>`,
+  "calendar": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/>`,
+  "chart-bar": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125z"/>`,
+  "chart-pie": `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5z"/><path d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3z"/></g>`,
+  "check": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m4.5 12.75l6 6l9-13.5"/>`,
+  "check-circle": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>`,
+  "chevron-left": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 19.5L8.25 12l7.5-7.5"/>`,
+  "chevron-right": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8.25 4.5l7.5 7.5l-7.5 7.5"/>`,
+  "clipboard": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0q.083.292.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0q.002-.32.084-.612m7.332 0q.969.073 1.927.184c1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48 48 0 0 1 1.927-.184"/>`,
+  "clipboard-document-list": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48 48 0 0 0-1.123-.08m-5.801 0q-.099.316-.1.664c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75a2.3 2.3 0 0 0-.1-.664m-5.8 0A2.25 2.25 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0q-.563.035-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125zM6.75 12h.008v.008H6.75zm0 3h.008v.008H6.75zm0 3h.008v.008H6.75z"/>`,
+  "clock": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>`,
+  "code-bracket-square": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25"/>`,
+  "cog-6-tooth": `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87q.11.06.22.127c.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a8 8 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a7 7 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a7 7 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a7 7 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124q.108-.066.22-.128c.332-.183.582-.495.644-.869z"/><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/></g>`,
+  "currency-dollar": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0s1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659c-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>`,
+  "document-currency-dollar": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v7.5m2.25-6.466a9 9 0 0 0-3.461-.203c-.536.072-.974.478-1.021 1.017a5 5 0 0 0-.018.402c0 .464.336.844.775.994l2.95 1.012c.44.15.775.53.775.994q0 .204-.018.402c-.047.539-.485.945-1.021 1.017a9.1 9.1 0 0 1-3.461-.203M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9"/>`,
+  "document-duplicate": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9 9 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9 9 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"/>`,
+  "document-text": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9"/>`,
+  "ellipsis-horizontal": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 12a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m6 0a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m6 0a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0"/>`,
+  "ellipsis-vertical": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.75a.75.75 0 1 1 0-1.5a.75.75 0 0 1 0 1.5m0 6a.75.75 0 1 1 0-1.5a.75.75 0 0 1 0 1.5m0 6a.75.75 0 1 1 0-1.5a.75.75 0 0 1 0 1.5"/>`,
+  "envelope": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/>`,
+  "exclamation-circle": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/>`,
+  "exclamation-triangle": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/>`,
+  "eye": `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178"/><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/></g>`,
+  "finger-print": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.864 4.243A7.5 7.5 0 0 1 19.5 10.5c0 2.92-.556 5.709-1.568 8.269M5.742 6.364A7.47 7.47 0 0 0 4.5 10.5a7.46 7.46 0 0 1-1.15 3.993m1.989 3.559A11.2 11.2 0 0 0 8.25 10.5a3.75 3.75 0 1 1 7.5 0q0 .79-.064 1.565M12 10.5a14.94 14.94 0 0 1-3.6 9.75m6.633-4.596a18.7 18.7 0 0 1-2.485 5.33"/>`,
+  "home": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 12l8.955-8.955a1.124 1.124 0 0 1 1.59 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>`,
+  "inbox": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162q0-.338-.1-.661l-2.41-7.839a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.3 2.3 0 0 0-.1.661"/>`,
+  "information-circle": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>`,
+  "key": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25"/>`,
+  "list-bullet": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0M3.75 12h.007v.008H3.75zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0m-.375 5.25h.007v.008H3.75zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"/>`,
+  "lock-closed": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25"/>`,
+  "magnifying-glass": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607"/>`,
+  "map-pin": `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M15 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/><path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0"/></g>`,
+  "moon": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.752 15.002A9.7 9.7 0 0 1 18 15.75A9.75 9.75 0 0 1 8.25 6c0-1.33.266-2.597.748-3.752A9.75 9.75 0 0 0 3 11.25A9.75 9.75 0 0 0 12.75 21a9.75 9.75 0 0 0 9.002-5.998"/>`,
+  "paper-airplane": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 12L3.269 3.125A59.8 59.8 0 0 1 21.486 12a59.8 59.8 0 0 1-18.217 8.875zm0 0h7.5"/>`,
+  "pencil": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/>`,
+  "pencil-square": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>`,
+  "phone": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.04 12.04 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5z"/>`,
+  "photo": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"/>`,
+  "play": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986z"/>`,
+  "play-circle": `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/><path d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327z"/></g>`,
+  "plus": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.5v15m7.5-7.5h-15"/>`,
+  "stop": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.25 7.5A2.25 2.25 0 0 1 7.5 5.25h9a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25z"/>`,
+  "sun": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0a3.75 3.75 0 0 1 7.5 0"/>`,
+  "tag": `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3"/><path d="M6 6h.008v.008H6z"/></g>`,
+  "trash": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21q.512.078 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48 48 0 0 0-3.478-.397m-12 .562q.51-.088 1.022-.165m0 0a48 48 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a52 52 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a49 49 0 0 0-7.5 0"/>`,
+  "user-circle": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.982 18.725A7.49 7.49 0 0 0 12 15.75a7.49 7.49 0 0 0-5.982 2.975m11.964 0a9 9 0 1 0-11.963 0m11.962 0A8.97 8.97 0 0 1 12 21a8.97 8.97 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/>`,
+  "user-group": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18 18.72a9.1 9.1 0 0 0 3.741-.479q.01-.12.01-.241a3 3 0 0 0-4.692-2.478m.94 3.197l.001.031q0 .337-.037.666A11.94 11.94 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6 6 0 0 1 6 18.719m12 0a5.97 5.97 0 0 0-.941-3.197m0 0A6 6 0 0 0 12 12.75a6 6 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72a9 9 0 0 0 3.74.477m.94-3.197a5.97 5.97 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0a3 3 0 0 1 6 0m6 3a2.25 2.25 0 1 1-4.5 0a2.25 2.25 0 0 1 4.5 0m-13.5 0a2.25 2.25 0 1 1-4.5 0a2.25 2.25 0 0 1 4.5 0"/>`,
+  "users": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19.128a9.4 9.4 0 0 0 2.625.372a9.3 9.3 0 0 0 4.121-.952q.004-.086.004-.173a4.125 4.125 0 0 0-7.536-2.32M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.3 12.3 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0a3.375 3.375 0 0 1 6.75 0m8.25 2.25a2.625 2.625 0 1 1-5.25 0a2.625 2.625 0 0 1 5.25 0"/>`,
+  "x-circle": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>`,
+  "x-mark": `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/>`,
+} as const;
+
+export type IconName = keyof typeof icons;
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -14,7 +14,6 @@ interface ImportMeta {
 declare namespace App {
  interface Locals {
    user: import("./db/schema").User | null;
-    session: import("./db/schema").Session | null;
    scopes: string[] | null;
  }
 }
--- a/src/layouts/DashboardLayout.astro
+++ b/src/layouts/DashboardLayout.astro
@@ -1,12 +1,11 @@
 ---
 import '../styles/global.css';
-import { Icon } from 'astro-icon/components';
+import Icon from '../components/Icon.astro';
 import { db } from '../db';
 import { members, organizations } from '../db/schema';
 import { eq } from 'drizzle-orm';
 import Avatar from '../components/Avatar.astro';
 import ThemeToggle from '../components/ThemeToggle.vue';
-import { ClientRouter } from "astro:transitions";

 interface Props {
 	title: string;
@@ -29,15 +28,14 @@ const userMemberships = await db.select({
  .all();

 const currentTeamId = Astro.cookies.get('currentTeamId')?.value || userMemberships[0]?.organization.id;
-const currentTeam = userMemberships.find(m => m.organization.id === currentTeamId);

 const navItems = [
-  { href: '/dashboard', label: 'Dashboard', icon: 'heroicons:home', exact: true },
-  { href: '/dashboard/tracker', label: 'Time Tracker', icon: 'heroicons:clock' },
-  { href: '/dashboard/invoices', label: 'Invoices & Quotes', icon: 'heroicons:document-currency-dollar' },
-  { href: '/dashboard/reports', label: 'Reports', icon: 'heroicons:chart-bar' },
-  { href: '/dashboard/clients', label: 'Clients', icon: 'heroicons:building-office' },
-  { href: '/dashboard/team', label: 'Team', icon: 'heroicons:user-group' },
+  { href: '/dashboard', label: 'Dashboard', icon: 'home', exact: true },
+  { href: '/dashboard/tracker', label: 'Time Tracker', icon: 'clock' },
+  { href: '/dashboard/invoices', label: 'Invoices & Quotes', icon: 'document-currency-dollar' },
+  { href: '/dashboard/reports', label: 'Reports', icon: 'chart-bar' },
+  { href: '/dashboard/clients', label: 'Clients', icon: 'building-office' },
+  { href: '/dashboard/team', label: 'Team', icon: 'user-group' },
 ];

 function isActive(item: { href: string; exact?: boolean }) {
@@ -55,9 +53,8 @@ function isActive(item: { href: string; exact?: boolean }) {
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
-		<ClientRouter />
    <script is:inline>
-      const theme = localStorage.getItem('theme') || 'macchiato';
+      const theme = localStorage.getItem('theme') || 'sunset';
      document.documentElement.setAttribute('data-theme', theme);
    </script>
 	</head>
@@ -66,10 +63,10 @@ function isActive(item: { href: string; exact?: boolean }) {
      <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
      <div class="drawer-content flex flex-col h-full overflow-auto">
        <!-- Mobile Navbar -->
-        <div class="navbar bg-base-100 sticky top-0 z-50 lg:hidden border-b border-base-200">
+        <div class="navbar bg-base-100 sticky top-0 z-50 lg:hidden border-b border-base-content/20">
          <div class="flex-none">
            <label for="my-drawer-2" aria-label="open sidebar" class="btn btn-square btn-ghost btn-sm">
-              <Icon name="heroicons:bars-3" class="w-5 h-5" />
+              <Icon name="bars-3" class="w-5 h-5" />
            </label>
          </div>
          <div class="flex-1 px-2 flex items-center gap-2">
@@ -89,7 +86,7 @@ function isActive(item: { href: string; exact?: boolean }) {

      <div class="drawer-side z-50">
        <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
-        <aside class="bg-base-200 min-h-full w-72 flex flex-col border-r border-base-300/40">
+        <aside class="bg-base-200 min-h-full w-72 flex flex-col border-r border-base-content/20">
          <!-- Logo -->
          <div class="px-5 pt-5 pb-3">
            <a href="/dashboard" class="flex items-center gap-2.5 group">
@@ -102,10 +99,9 @@ function isActive(item: { href: string; exact?: boolean }) {
          {userMemberships.length > 0 && (
            <div class="px-4 pb-2">
              <select
-                class="select select-sm w-full bg-base-300/40 border-base-300/60 focus:border-primary/50 focus:outline-none text-sm font-medium"
+                class="select select-sm w-full bg-base-300 border-base-content/20 focus:border-primary focus:outline-none text-sm font-medium"
                id="team-switcher"
                aria-label="Switch team"
-                onchange="document.cookie = 'currentTeamId=' + this.value + '; path=/'; window.location.reload();"
              >
                {userMemberships.map(({ membership, organization }) => (
                  <option
@@ -122,7 +118,7 @@ function isActive(item: { href: string; exact?: boolean }) {
          {userMemberships.length === 0 && (
            <div class="px-4 pb-2">
              <a href="/dashboard/organizations/new" class="btn btn-primary btn-sm btn-block">
-                <Icon name="heroicons:plus" class="w-4 h-4" />
+                <Icon name="plus" class="w-4 h-4" />
                Create Team
              </a>
            </div>
@@ -138,8 +134,8 @@ function isActive(item: { href: string; exact?: boolean }) {
                  <a href={item.href} class:list={[
                    "rounded-lg gap-3 px-3 py-2.5 font-medium text-sm",
                    isActive(item)
-                      ? "bg-primary/10 text-primary"
-                      : "text-base-content/70 hover:text-base-content hover:bg-base-300/50"
+                      ? "bg-primary text-primary-content"
+                      : "text-base-content/70 hover:text-base-content hover:bg-base-300"
                  ]}>
                    <Icon name={item.icon} class="w-[18px] h-[18px]" />
                    {item.label}
@@ -156,10 +152,10 @@ function isActive(item: { href: string; exact?: boolean }) {
                    <a href="/admin" class:list={[
                      "rounded-lg gap-3 px-3 py-2.5 font-medium text-sm",
                      Astro.url.pathname.startsWith("/admin")
-                        ? "bg-primary/10 text-primary"
-                        : "text-base-content/70 hover:text-base-content hover:bg-base-300/50"
+                        ? "bg-primary text-primary-content"
+                        : "text-base-content/70 hover:text-base-content hover:bg-base-300"
                    ]}>
-                      <Icon name="heroicons:cog-6-tooth" class="w-[18px] h-[18px]" />
+                      <Icon name="cog-6-tooth" class="w-[18px] h-[18px]" />
                      Site Admin
                    </a>
                  </li>
@@ -169,34 +165,45 @@ function isActive(item: { href: string; exact?: boolean }) {
          </nav>

          <!-- Bottom Section -->
-          <div class="mt-auto border-t border-base-300/40">
+          <div class="mt-auto border-t border-base-content/20">
            <div class="p-3">
-              <a href="/dashboard/settings" class="flex items-center gap-3 rounded-lg p-2.5 hover:bg-base-300/40 group">
+              <a href="/dashboard/settings" class="flex items-center gap-3 rounded-lg p-2.5 hover:bg-base-300 group">
                <Avatar name={user.name} />
                <div class="flex-1 min-w-0">
                  <div class="font-medium text-sm truncate">{user.name}</div>
-                  <div class="text-xs text-base-content/50 truncate">{user.email}</div>
+                  <div class="text-xs text-base-content/60 truncate">{user.email}</div>
                </div>
-                <Icon name="heroicons:chevron-right" class="w-4 h-4 text-base-content/30 group-hover:text-base-content/50" />
+                <Icon name="chevron-right" class="w-4 h-4 text-base-content/50 group-hover:text-base-content/70" />
              </a>
            </div>

            <div class="flex items-center justify-between px-5 pb-2">
-              <span class="text-xs text-base-content/40 font-medium">Theme</span>
+              <span class="text-xs text-base-content/60 font-medium">Theme</span>
              <ThemeToggle client:load />
            </div>

            <div class="px-3 pb-3">
-              <form action="/api/auth/logout" method="POST">
-                <button type="submit" class="btn btn-ghost btn-sm btn-block justify-start gap-2 text-base-content/60 hover:text-error hover:bg-error/10 font-medium">
-                  <Icon name="heroicons:arrow-right-on-rectangle" class="w-[18px] h-[18px]" />
-                  Logout
-                </button>
-              </form>
+              <button id="logout-btn" type="button" class="btn btn-ghost btn-sm btn-block justify-start gap-2 text-base-content/60 hover:text-error hover:bg-base-300 font-medium">
+                <Icon name="arrow-right-on-rectangle" class="w-[18px] h-[18px]" />
+                Logout
+              </button>
            </div>
          </div>
        </aside>
      </div>
    </div>
+    <script>
+      const teamSwitcher = document.getElementById('team-switcher') as HTMLSelectElement | null;
+      teamSwitcher?.addEventListener('change', () => {
+        document.cookie = 'currentTeamId=' + teamSwitcher.value + '; path=/';
+        window.location.reload();
+      });
+
+      const logoutBtn = document.getElementById('logout-btn');
+      logoutBtn?.addEventListener('click', async () => {
+        await fetch('/api/auth/logout', { method: 'POST' });
+        window.location.reload();
+      });
+    </script>
 	</body>
 </html>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,5 @@
 ---
 import '../styles/global.css';
-import { ClientRouter } from "astro:transitions";

 interface Props {
 	title: string;
@@ -18,9 +17,8 @@ const { title } = Astro.props;
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
-		<ClientRouter />
    <script is:inline>
-      const theme = localStorage.getItem('theme') || 'macchiato';
+      const theme = localStorage.getItem('theme') || 'sunset';
      document.documentElement.setAttribute('data-theme', theme);
    </script>
 	</head>
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,50 +1,74 @@
-import { db } from '../db';
-import { users, sessions } from '../db/schema';
-import { eq } from 'drizzle-orm';
-import bcrypt from 'bcryptjs';
-import { nanoid } from 'nanoid';
+import { db } from "../db";
+import { users } from "../db/schema";
+import { eq } from "drizzle-orm";
+import bcrypt from "bcryptjs";
+import jwt from "jsonwebtoken";
+import type { AstroCookies } from "astro";

-const SESSION_DURATION = 1000 * 60 * 60 * 24 * 30; // 30 days
+const JWT_SECRET =
+  process.env.JWT_SECRET || "chronus-dev-secret-change-in-production";
+const JWT_EXPIRES_IN = "30d";

-export async function createSession(userId: string) {
-  const sessionId = nanoid();
-  const expiresAt = new Date(Date.now() + SESSION_DURATION);
+interface JwtPayload {
+  userId: string;
+}

-  await db.insert(sessions).values({
-    id: sessionId,
-    userId,
-    expiresAt,
+export function createToken(userId: string): string {
+  return jwt.sign({ userId } satisfies JwtPayload, JWT_SECRET, {
+    expiresIn: JWT_EXPIRES_IN,
  });
-
-  return { sessionId, expiresAt };
 }

-export async function validateSession(sessionId: string) {
-  const result = await db.select({
-    user: users,
-    session: sessions
-  })
-  .from(sessions)
-  .innerJoin(users, eq(sessions.userId, users.id))
-  .where(eq(sessions.id, sessionId))
-  .get();
-
-  if (!result) {
+export function verifyToken(token: string): JwtPayload | null {
+  try {
+    return jwt.verify(token, JWT_SECRET) as JwtPayload;
+  } catch {
    return null;
  }
-
-  const { session, user } = result;
-
-  if (Date.now() >= session.expiresAt.getTime()) {
-    await db.delete(sessions).where(eq(sessions.id, sessionId));
-    return null;
-  }
-
-  return { session, user };
 }

-export async function invalidateSession(sessionId: string) {
-  await db.delete(sessions).where(eq(sessions.id, sessionId));
+export function setAuthCookie(cookies: AstroCookies, userId: string) {
+  const token = createToken(userId);
+  cookies.set("auth_token", token, {
+    path: "/",
+    httpOnly: true,
+    secure: import.meta.env.PROD,
+    sameSite: "lax",
+    maxAge: 60 * 60 * 24 * 30,
+  });
+}
+
+export function clearAuthCookie(cookies: AstroCookies) {
+  cookies.delete("auth_token", { path: "/" });
+}
+
+export async function getUserFromToken(token: string) {
+  const payload = verifyToken(token);
+  if (!payload) return null;
+
+  const user = await db
+    .select()
+    .from(users)
+    .where(eq(users.id, payload.userId))
+    .get();
+
+  return user ?? null;
+}
+
+/**
+ * Get the public origin and hostname from the ORIGIN environment variable.
+ * This is required for WebAuthn/passkey rpID to match the browser's origin.
+ */
+export function getOrigin(): { hostname: string; origin: string } {
+  const origin = process.env.ORIGIN;
+  if (!origin) {
+    throw new Error("ORIGIN environment variable is not set");
+  }
+  const url = new URL(origin);
+  return {
+    hostname: url.hostname,
+    origin: url.origin,
+  };
 }

 export async function hashPassword(password: string) {
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,8 +1,12 @@
 import { defineMiddleware } from "astro/middleware";
-import { validateSession } from "./lib/auth";
+import { getUserFromToken } from "./lib/auth";
 import { validateApiToken } from "./lib/api-auth";

+const PUBLIC_ROUTES = ["/", "/login", "/signup"];
+
 export const onRequest = defineMiddleware(async (context, next) => {
+  const { pathname } = context.url;
+
  const authHeader = context.request.headers.get("Authorization");
  if (authHeader?.startsWith("Bearer ")) {
    const token = authHeader.substring(7);
@@ -10,32 +14,26 @@ export const onRequest = defineMiddleware(async (context, next) => {

    if (result) {
      context.locals.user = result.user;
-      context.locals.session = null;
      context.locals.scopes = result.scopes;
      return next();
    }
  }

-  const sessionId = context.cookies.get("session_id")?.value;
+  const token = context.cookies.get("auth_token")?.value;

-  if (!sessionId) {
-    context.locals.user = null;
-    context.locals.session = null;
-    context.locals.scopes = null;
-    return next();
-  }
-
-  const result = await validateSession(sessionId);
-
-  if (result) {
-    context.locals.user = result.user;
-    context.locals.session = result.session;
-    context.locals.scopes = null;
+  if (token) {
+    const user = await getUserFromToken(token);
+    context.locals.user = user;
  } else {
    context.locals.user = null;
-    context.locals.session = null;
-    context.locals.scopes = null;
-    context.cookies.delete("session_id");
+  }
+  context.locals.scopes = null;
+
+  const isPublic =
+    PUBLIC_ROUTES.includes(pathname) || pathname.startsWith("/api/");
+
+  if (!isPublic && !context.locals.user) {
+    return context.redirect("/login");
  }

  return next();
--- a/src/pages/admin/index.astro
+++ b/src/pages/admin/index.astro
@@ -32,7 +32,7 @@ const allUsers = await db.select().from(users).all();
      title="Total Users"
      value={String(allUsers.length)}
      description="Registered accounts"
-      icon="heroicons:users"
+      icon="users"
      color="text-primary"
    />
  </div>
@@ -63,7 +63,7 @@ const allUsers = await db.select().from(users).all();
  <!-- Users List -->
  <div class="card card-border bg-base-100">
    <div class="card-body p-0">
-      <div class="px-4 py-3 border-b border-base-200">
+      <div class="px-4 py-3 border-b border-base-content/20">
        <h2 class="text-sm font-semibold">All Users</h2>
      </div>
      <div class="overflow-x-auto">
@@ -93,7 +93,7 @@ const allUsers = await db.select().from(users).all();
                    <span class="badge badge-xs badge-ghost">No</span>
                  )}
                </td>
-                <td class="text-base-content/40">{u.createdAt?.toLocaleDateString() ?? 'N/A'}</td>
+                <td class="text-base-content/60">{u.createdAt?.toLocaleDateString() ?? 'N/A'}</td>
              </tr>
            ))}
          </tbody>
--- a/src/pages/api/auth/login.ts
+++ b/src/pages/api/auth/login.ts
@@ -1,7 +1,7 @@
 import type { APIRoute } from "astro";
 import { db } from "../../../db";
 import { users } from "../../../db/schema";
-import { verifyPassword, createSession } from "../../../lib/auth";
+import { verifyPassword, setAuthCookie } from "../../../lib/auth";
 import { eq } from "drizzle-orm";

 export const POST: APIRoute = async ({ request, cookies, redirect }) => {
@@ -23,15 +23,7 @@ export const POST: APIRoute = async ({ request, cookies, redirect }) => {
    return redirect("/login?error=invalid_credentials");
  }

-  const { sessionId, expiresAt } = await createSession(user.id);
-
-  cookies.set("session_id", sessionId, {
-    path: "/",
-    httpOnly: true,
-    secure: import.meta.env.PROD,
-    sameSite: "lax",
-    expires: expiresAt,
-  });
+  setAuthCookie(cookies, user.id);

  return redirect("/dashboard");
 };
--- a/src/pages/api/auth/logout.ts
+++ b/src/pages/api/auth/logout.ts
@@ -1,11 +1,7 @@
 import type { APIRoute } from 'astro';
-import { invalidateSession } from '../../../lib/auth';
+import { clearAuthCookie } from '../../../lib/auth';

-export const POST: APIRoute = async ({ cookies, redirect }) => {
-  const sessionId = cookies.get('session_id')?.value;
-  if (sessionId) {
-    await invalidateSession(sessionId);
-    cookies.delete('session_id', { path: '/' });
-  }
-  return redirect('/login');
+export const POST: APIRoute = async ({ cookies }) => {
+  clearAuthCookie(cookies);
+  return new Response(null, { status: 200 });
 };
--- a/src/pages/api/auth/passkey/login/finish.ts
+++ b/src/pages/api/auth/passkey/login/finish.ts
@@ -3,7 +3,7 @@ import { verifyAuthenticationResponse } from "@simplewebauthn/server";
 import { db } from "../../../../../db";
 import { users, passkeys, passkeyChallenges } from "../../../../../db/schema";
 import { eq, and, gt } from "drizzle-orm";
-import { createSession } from "../../../../../lib/auth";
+import { setAuthCookie, getOrigin } from "../../../../../lib/auth";

 export const POST: APIRoute = async ({ request, cookies }) => {
  const body = await request.json();
@@ -50,11 +50,12 @@ export const POST: APIRoute = async ({ request, cookies }) => {

  let verification;
  try {
+    const { origin, hostname } = getOrigin();
    verification = await verifyAuthenticationResponse({
      response: body,
      expectedChallenge: challenge as string,
-      expectedOrigin: new URL(request.url).origin,
-      expectedRPID: new URL(request.url).hostname,
+      expectedOrigin: origin,
+      expectedRPID: hostname,
      credential: {
        id: passkey.id,
        publicKey: new Uint8Array(Buffer.from(passkey.publicKey, "base64")),
@@ -82,15 +83,7 @@ export const POST: APIRoute = async ({ request, cookies }) => {
      })
      .where(eq(passkeys.id, passkey.id));

-    const { sessionId, expiresAt } = await createSession(user.id);
-
-    cookies.set("session_id", sessionId, {
-      path: "/",
-      httpOnly: true,
-      secure: import.meta.env.PROD,
-      sameSite: "lax",
-      expires: expiresAt,
-    });
+    setAuthCookie(cookies, user.id);

    await db
      .delete(passkeyChallenges)
--- a/src/pages/api/auth/passkey/login/start.ts
+++ b/src/pages/api/auth/passkey/login/start.ts
@@ -3,14 +3,17 @@ import { generateAuthenticationOptions } from "@simplewebauthn/server";
 import { db } from "../../../../../db";
 import { passkeyChallenges } from "../../../../../db/schema";
 import { lte } from "drizzle-orm";
+import { getOrigin } from "../../../../../lib/auth";

 export const GET: APIRoute = async ({ request }) => {
  await db
    .delete(passkeyChallenges)
    .where(lte(passkeyChallenges.expiresAt, new Date()));

+  const { hostname } = getOrigin();
+
  const options = await generateAuthenticationOptions({
-    rpID: new URL(request.url).hostname,
+    rpID: hostname,
    userVerification: "preferred",
  });

--- a/src/pages/api/auth/passkey/register/finish.ts
+++ b/src/pages/api/auth/passkey/register/finish.ts
@@ -3,6 +3,7 @@ import { verifyRegistrationResponse } from "@simplewebauthn/server";
 import { db } from "../../../../../db";
 import { passkeys, passkeyChallenges } from "../../../../../db/schema";
 import { eq, and, gt } from "drizzle-orm";
+import { getOrigin } from "../../../../../lib/auth";

 export const POST: APIRoute = async ({ request, locals }) => {
  const user = locals.user;
@@ -41,11 +42,12 @@ export const POST: APIRoute = async ({ request, locals }) => {

  let verification;
  try {
+    const { origin, hostname } = getOrigin();
    verification = await verifyRegistrationResponse({
      response: body,
      expectedChallenge: challenge,
-      expectedOrigin: new URL(request.url).origin,
-      expectedRPID: new URL(request.url).hostname,
+      expectedOrigin: origin,
+      expectedRPID: hostname,
    });
  } catch (error) {
    console.error("Passkey registration verification failed:", error);
--- a/src/pages/api/auth/passkey/register/start.ts
+++ b/src/pages/api/auth/passkey/register/start.ts
@@ -3,6 +3,7 @@ import { generateRegistrationOptions } from "@simplewebauthn/server";
 import { db } from "../../../../../db";
 import { passkeys, passkeyChallenges } from "../../../../../db/schema";
 import { eq, lte } from "drizzle-orm";
+import { getOrigin } from "../../../../../lib/auth";

 export const GET: APIRoute = async ({ request, locals }) => {
  const user = locals.user;
@@ -21,9 +22,11 @@ export const GET: APIRoute = async ({ request, locals }) => {
    where: eq(passkeys.userId, user.id),
  });

+  const { hostname } = getOrigin();
+
  const options = await generateRegistrationOptions({
    rpName: "Chronus",
-    rpID: new URL(request.url).hostname,
+    rpID: hostname,
    userName: user.email,
    attestationType: "none",
    excludeCredentials: userPasskeys.map((passkey) => ({
--- a/src/pages/api/auth/signup.ts
+++ b/src/pages/api/auth/signup.ts
@@ -6,7 +6,7 @@ import {
  members,
  siteSettings,
 } from "../../../db/schema";
-import { hashPassword, createSession } from "../../../lib/auth";
+import { hashPassword, setAuthCookie } from "../../../lib/auth";
 import { isValidEmail, MAX_LENGTHS } from "../../../lib/validation";
 import { eq, count, sql } from "drizzle-orm";
 import { nanoid } from "nanoid";
@@ -86,15 +86,7 @@ export const POST: APIRoute = async ({ request, cookies, redirect }) => {
    role: "owner",
  });

-  const { sessionId, expiresAt } = await createSession(userId);
-
-  cookies.set("session_id", sessionId, {
-    path: "/",
-    httpOnly: true,
-    secure: import.meta.env.PROD,
-    sameSite: "lax",
-    expires: expiresAt,
-  });
+  setAuthCookie(cookies, userId);

  return redirect("/dashboard");
 };
--- a/src/pages/api/invoices/[id]/generate.ts
+++ b/src/pages/api/invoices/[id]/generate.ts
@@ -69,7 +69,6 @@ export const GET: APIRoute = async ({ params, locals }) => {
      invoice: {
        ...invoice,
        notes: invoice.notes || null,
-        // Ensure null safety for optional fields that might be undefined in some runtimes depending on driver
        discountValue: invoice.discountValue ?? null,
        discountType: invoice.discountType ?? null,
        discountAmount: invoice.discountAmount ?? null,
--- a/src/pages/api/invoices/[id]/import-time.ts
+++ b/src/pages/api/invoices/[id]/import-time.ts
@@ -44,7 +44,6 @@ export const POST: APIRoute = async ({ request, params, locals, redirect }) => {

  const startDate = new Date(startDateStr);
  const endDate = new Date(endDateStr);
-  // Set end date to end of day
  endDate.setHours(23, 59, 59, 999);

  const invoice = await db
@@ -174,7 +173,6 @@ export const POST: APIRoute = async ({ request, params, locals, redirect }) => {

    for (const day of days.values()) {
      const hours = day.totalDuration / (1000 * 60 * 60);
-      // Avoid division by zero
      const unitPrice = hours > 0 ? Math.round(day.totalAmount / hours) : 0;

      newItems.push({
@@ -193,7 +191,6 @@ export const POST: APIRoute = async ({ request, params, locals, redirect }) => {
      const duration = entry.endTime.getTime() - entry.startTime.getTime();
      const hours = duration / (1000 * 60 * 60);

-      // Determine rate: max of tags, or 0
      const rate = rates.length > 0 ? Math.max(...rates) : 0;
      const amount = Math.round(hours * rate);

--- a/src/pages/api/user/change-password.ts
+++ b/src/pages/api/user/change-password.ts
@@ -1,9 +1,10 @@
 import type { APIRoute } from "astro";
 import { db } from "../../../db";
-import { users, sessions } from "../../../db/schema";
+import { users } from "../../../db/schema";
 import { eq } from "drizzle-orm";
 import bcrypt from "bcryptjs";
 import { MAX_LENGTHS } from "../../../lib/validation";
+import { setAuthCookie } from "../../../lib/auth";

 export const POST: APIRoute = async ({ request, locals, redirect, cookies }) => {
  const user = locals.user;
@@ -98,31 +99,7 @@ export const POST: APIRoute = async ({ request, locals, redirect, cookies }) =>
      .where(eq(users.id, user.id))
      .run();

-    // Invalidate all sessions, then re-create one for the current user
-    const currentSessionId = cookies.get("session_id")?.value;
-    if (currentSessionId) {
-      await db
-        .delete(sessions)
-        .where(
-          eq(sessions.userId, user.id),
-        )
-        .run();
-
-      const { createSession } = await import("../../../lib/auth");
-      const { sessionId, expiresAt } = await createSession(user.id);
-      cookies.set("session_id", sessionId, {
-        path: "/",
-        httpOnly: true,
-        secure: import.meta.env.PROD,
-        sameSite: "lax",
-        expires: expiresAt,
-      });
-    } else {
-      await db
-        .delete(sessions)
-        .where(eq(sessions.userId, user.id))
-        .run();
-    }
+    setAuthCookie(cookies, user.id);

    if (isJson) {
      return new Response(JSON.stringify({ success: true }), { status: 200 });
--- a/src/pages/dashboard/clients.astro
+++ b/src/pages/dashboard/clients.astro
@@ -31,7 +31,7 @@ const allClients = await db.select()
        <div class="card-body p-4 gap-1">
          <h2 class="font-semibold">{client.name}</h2>
          {client.email && <p class="text-sm text-base-content/60">{client.email}</p>}
-          <p class="text-xs text-base-content/40">Created {client.createdAt?.toLocaleDateString() ?? 'N/A'}</p>
+          <p class="text-xs text-base-content/60">Created {client.createdAt?.toLocaleDateString() ?? 'N/A'}</p>
          <div class="card-actions justify-end mt-3">
            <a href={`/dashboard/clients/${client.id}`} class="btn btn-xs btn-ghost">View</a>
            <a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-xs btn-primary">Edit</a>
@@ -43,7 +43,7 @@ const allClients = await db.select()

  {allClients.length === 0 && (
    <div class="flex flex-col items-center justify-center py-12 text-center">
-      <p class="text-base-content/50 text-sm mb-4">No clients yet</p>
+      <p class="text-base-content/60 text-sm mb-4">No clients yet</p>
      <a href="/dashboard/clients/new" class="btn btn-primary btn-sm">Add Your First Client</a>
    </div>
  )}
--- a/src/pages/dashboard/clients/[id]/edit.astro
+++ b/src/pages/dashboard/clients/[id]/edit.astro
@@ -1,6 +1,7 @@
 ---
 import DashboardLayout from '../../../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../../../components/Icon.astro';
+import ModalButton from '../../../../components/ModalButton.vue';
 import { db } from '../../../../db';
 import { clients } from '../../../../db/schema';
 import { eq, and } from 'drizzle-orm';
@@ -30,7 +31,7 @@ if (!client) return Astro.redirect('/dashboard/clients');
  <div class="max-w-2xl mx-auto">
    <div class="flex items-center gap-3 mb-6">
      <a href={`/dashboard/clients/${client.id}`} class="btn btn-ghost btn-xs">
-        <Icon name="heroicons:arrow-left" class="w-4 h-4" />
+        <Icon name="arrow-left" class="w-4 h-4" />
      </a>
      <h1 class="text-2xl font-extrabold tracking-tight">Edit Client</h1>
    </div>
@@ -74,7 +75,7 @@ if (!client) return Astro.redirect('/dashboard/clients');
          />
        </fieldset>

-        <div class="divider text-xs text-base-content/40">Address Details</div>
+        <div class="divider text-xs text-base-content/60">Address Details</div>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Street Address (optional)</legend>
@@ -141,13 +142,13 @@ if (!client) return Astro.redirect('/dashboard/clients');
        </div>

        <div class="flex justify-between items-center mt-4">
-          <button
-            type="button"
+          <ModalButton
+            client:load
+            modalId="delete_modal"
            class="btn btn-error btn-outline btn-sm"
-            onclick={`document.getElementById('delete_modal').showModal()`}
          >
            Delete Client
-          </button>
+          </ModalButton>

          <div class="flex gap-2">
            <a href={`/dashboard/clients/${client.id}`} class="btn btn-ghost btn-sm">Cancel</a>
--- a/src/pages/dashboard/clients/[id]/index.astro
+++ b/src/pages/dashboard/clients/[id]/index.astro
@@ -1,6 +1,8 @@
 ---
 import DashboardLayout from '../../../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../../../components/Icon.astro';
+import ConfirmForm from '../../../../components/ConfirmForm.vue';
+import ColorDot from '../../../../components/ColorDot.vue';
 import { db } from '../../../../db';
 import { clients, timeEntries, tags, users } from '../../../../db/schema';
 import { eq, and, desc, sql } from 'drizzle-orm';
@@ -64,7 +66,7 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
 <DashboardLayout title={`${client.name} - Clients - Chronus`}>
  <div class="flex items-center gap-3 mb-6">
    <a href="/dashboard/clients" class="btn btn-ghost btn-xs">
-      <Icon name="heroicons:arrow-left" class="w-4 h-4" />
+      <Icon name="arrow-left" class="w-4 h-4" />
    </a>
    <h1 class="text-2xl font-extrabold tracking-tight">{client.name}</h1>
  </div>
@@ -79,19 +81,19 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
            <div class="space-y-2 mb-4">
              {client.email && (
                <div class="flex items-center gap-2 text-base-content/60 text-sm">
-                  <Icon name="heroicons:envelope" class="w-4 h-4" />
+                  <Icon name="envelope" class="w-4 h-4" />
                  <a href={`mailto:${client.email}`} class="link link-hover">{client.email}</a>
                </div>
              )}
              {client.phone && (
                <div class="flex items-center gap-2 text-base-content/60 text-sm">
-                  <Icon name="heroicons:phone" class="w-4 h-4" />
+                  <Icon name="phone" class="w-4 h-4" />
                  <a href={`tel:${client.phone}`} class="link link-hover">{client.phone}</a>
                </div>
              )}
              {(client.street || client.city || client.state || client.zip || client.country) && (
                <div class="flex items-start gap-2 text-base-content/60">
-                  <Icon name="heroicons:map-pin" class="w-4 h-4 mt-0.5" />
+                  <Icon name="map-pin" class="w-4 h-4 mt-0.5" />
                  <div class="text-sm space-y-0.5">
                    {client.street && <div>{client.street}</div>}
                    {(client.city || client.state || client.zip) && (
@@ -107,15 +109,15 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
          </div>
          <div class="flex gap-2">
            <a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-primary btn-xs">
-              <Icon name="heroicons:pencil" class="w-3 h-3" />
+              <Icon name="pencil" class="w-3 h-3" />
              Edit
            </a>
-            <form method="POST" action={`/api/clients/${client.id}/delete`} onsubmit="return confirm('Are you sure you want to delete this client? This will also delete all associated time entries.');">
+            <ConfirmForm client:load message="Are you sure you want to delete this client? This will also delete all associated time entries." action={`/api/clients/${client.id}/delete`}>
              <button type="submit" class="btn btn-error btn-outline btn-xs">
-                <Icon name="heroicons:trash" class="w-3 h-3" />
+                <Icon name="trash" class="w-3 h-3" />
                Delete
              </button>
-            </form>
+            </ConfirmForm>
          </div>
        </div>

@@ -126,14 +128,14 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
            title="Total Time Tracked"
            value={`${totalHours}h ${totalMinutes}m`}
            description="Across all projects"
-            icon="heroicons:clock"
+            icon="clock"
            color="text-primary"
          />
          <StatCard
            title="Total Entries"
            value={String(totalEntriesCount)}
            description="Recorded entries"
-            icon="heroicons:list-bullet"
+            icon="list-bullet"
            color="text-secondary"
          />
        </div>
@@ -147,7 +149,7 @@ const totalEntriesCount = totalEntriesResult?.count || 0;

        <div class="space-y-3">
          <div>
-            <div class="text-xs text-base-content/40">Created</div>
+            <div class="text-xs text-base-content/60">Created</div>
            <div class="text-sm">{client.createdAt?.toLocaleDateString() ?? 'N/A'}</div>
          </div>
        </div>
@@ -158,7 +160,7 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
  <!-- Recent Activity -->
  <div class="card card-border bg-base-100">
    <div class="card-body p-0">
-      <div class="px-4 py-3 border-b border-base-200">
+      <div class="px-4 py-3 border-b border-base-content/20">
        <h2 class="text-sm font-semibold">Recent Activity</h2>
      </div>

@@ -182,14 +184,14 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
                    {tag ? (
                      <div class="badge badge-xs badge-outline flex items-center gap-1">
                        {tag.color && (
-                          <span class="w-2 h-2 rounded-full" style={`background-color: ${tag.color}`}></span>
+                          <ColorDot client:load color={tag.color} class="w-2 h-2 rounded-full" />
                        )}
                        <span>{tag.name}</span>
                      </div>
                    ) : '-'}
                  </td>
                  <td class="text-base-content/60">{entryUser?.name || 'Unknown'}</td>
-                  <td class="text-base-content/40">{entry.startTime.toLocaleDateString()}</td>
+                  <td class="text-base-content/60">{entry.startTime.toLocaleDateString()}</td>
                  <td class="font-mono">{formatTimeRange(entry.startTime, entry.endTime)}</td>
                </tr>
              ))}
@@ -197,13 +199,13 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
          </table>
        </div>
      ) : (
-        <div class="text-center py-8 text-base-content/40 text-sm">
+        <div class="text-center py-8 text-base-content/60 text-sm">
          No time entries recorded for this client yet.
        </div>
      )}

      {recentEntries.length > 0 && (
-        <div class="flex justify-center py-3 border-t border-base-200">
+        <div class="flex justify-center py-3 border-t border-base-content/20">
          <a href={`/dashboard/tracker?client=${client.id}`} class="btn btn-ghost btn-xs">
            View All Entries
          </a>
--- a/src/pages/dashboard/clients/new.astro
+++ b/src/pages/dashboard/clients/new.astro
@@ -45,7 +45,7 @@ if (!user) return Astro.redirect('/login');
          />
        </fieldset>

-        <div class="divider text-xs text-base-content/40">Address Details</div>
+        <div class="divider text-xs text-base-content/60">Address Details</div>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Street Address (optional)</legend>
--- a/src/pages/dashboard/index.astro
+++ b/src/pages/dashboard/index.astro
@@ -1,7 +1,8 @@
 ---
 import DashboardLayout from '../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../components/Icon.astro';
 import StatCard from '../../components/StatCard.astro';
+import ColorDot from '../../components/ColorDot.vue';
 import { db } from '../../db';
 import { organizations, members, timeEntries, clients, tags } from '../../db/schema';
 import { eq, desc, and, isNull, gte, sql } from 'drizzle-orm';
@@ -112,20 +113,20 @@ const hasMembership = userOrgs.length > 0;
      <p class="text-base-content/60 text-sm mt-1">Welcome back, {user.name}!</p>
    </div>
    <a href="/dashboard/organizations/new" class="btn btn-ghost btn-sm">
-      <Icon name="heroicons:plus" class="w-4 h-4" />
+      <Icon name="plus" class="w-4 h-4" />
      New Team
    </a>
  </div>

  {!hasMembership && (
    <div class="alert alert-info mb-6 text-sm">
-      <Icon name="heroicons:information-circle" class="w-5 h-5" />
+      <Icon name="information-circle" class="w-5 h-5" />
      <div>
        <h3 class="font-bold">Welcome to Chronus!</h3>
        <div class="text-xs">You're not part of any team yet. Create one or wait for an invitation.</div>
      </div>
      <a href="/dashboard/organizations/new" class="btn btn-primary btn-sm">
-        <Icon name="heroicons:plus" class="w-4 h-4" />
+        <Icon name="plus" class="w-4 h-4" />
        New Team
      </a>
    </div>
@@ -139,28 +140,28 @@ const hasMembership = userOrgs.length > 0;
          title="This Week"
          value={formatDuration(stats.totalTimeThisWeek)}
          description="Total tracked time"
-          icon="heroicons:clock"
+          icon="clock"
          color="text-primary"
        />
        <StatCard
          title="This Month"
          value={formatDuration(stats.totalTimeThisMonth)}
          description="Total tracked time"
-          icon="heroicons:calendar"
+          icon="calendar"
          color="text-secondary"
        />
        <StatCard
          title="Active Timers"
          value={String(stats.activeTimers)}
          description="Currently running"
-          icon="heroicons:play-circle"
+          icon="play-circle"
          color="text-accent"
        />
        <StatCard
          title="Clients"
          value={String(stats.totalClients)}
          description="Total active"
-          icon="heroicons:building-office"
+          icon="building-office"
          color="text-info"
        />
      </div>
@@ -170,20 +171,20 @@ const hasMembership = userOrgs.length > 0;
        <div class="card card-border bg-base-100">
          <div class="card-body p-4">
            <h2 class="text-sm font-semibold flex items-center gap-2">
-              <Icon name="heroicons:bolt" class="w-4 h-4 text-warning" />
+              <Icon name="bolt" class="w-4 h-4 text-warning" />
              Quick Actions
            </h2>
            <div class="flex flex-col gap-2 mt-3">
              <a href="/dashboard/tracker" class="btn btn-primary btn-sm">
-                <Icon name="heroicons:play" class="w-4 h-4" />
+                <Icon name="play" class="w-4 h-4" />
                Start Timer
              </a>
              <a href="/dashboard/clients/new" class="btn btn-ghost btn-sm">
-                <Icon name="heroicons:plus" class="w-4 h-4" />
+                <Icon name="plus" class="w-4 h-4" />
                Add Client
              </a>
              <a href="/dashboard/reports" class="btn btn-ghost btn-sm">
-                <Icon name="heroicons:chart-bar" class="w-4 h-4" />
+                <Icon name="chart-bar" class="w-4 h-4" />
                View Reports
              </a>
            </div>
@@ -194,15 +195,15 @@ const hasMembership = userOrgs.length > 0;
        <div class="card card-border bg-base-100">
          <div class="card-body p-4">
            <h2 class="text-sm font-semibold flex items-center gap-2">
-              <Icon name="heroicons:clock" class="w-4 h-4 text-success" />
+              <Icon name="clock" class="w-4 h-4 text-success" />
              Recent Activity
            </h2>
            {stats.recentEntries.length > 0 ? (
              <ul class="space-y-2 mt-3">
                {stats.recentEntries.map(({ entry, client, tag }) => (
-                  <li class="p-2.5 rounded-lg bg-base-200/50 border-l-3 hover:bg-base-200 transition-colors" style={`border-color: ${tag?.color || 'oklch(var(--p))'}`}>
+                  <ColorDot client:load as="li" color={tag?.color || 'oklch(var(--p))'} borderColor class="p-2.5 rounded-lg bg-base-200 border-l-3 hover:bg-base-300 transition-colors">
                    <div class="font-medium text-sm">{client.name}</div>
-                    <div class="text-xs text-base-content/50 mt-0.5 flex flex-wrap gap-2 items-center">
+                    <div class="text-xs text-base-content/60 mt-0.5 flex flex-wrap gap-2 items-center">
                       <span class="flex gap-1 flex-wrap">
                        {tag ? (
                            <span class="badge badge-xs badge-outline">{tag.name}</span>
@@ -210,13 +211,13 @@ const hasMembership = userOrgs.length > 0;
                       </span>
                       <span>· {entry.endTime ? formatDuration(entry.endTime.getTime() - entry.startTime.getTime()) : 'Running...'}</span>
                    </div>
-                  </li>
+                  </ColorDot>
                ))}
              </ul>
            ) : (
              <div class="flex flex-col items-center justify-center py-6 text-center mt-3">
-                <Icon name="heroicons:clock" class="w-10 h-10 text-base-content/15 mb-2" />
-                <p class="text-base-content/40 text-sm">No recent time entries</p>
+                <Icon name="clock" class="w-10 h-10 text-base-content/30 mb-2" />
+                <p class="text-base-content/60 text-sm">No recent time entries</p>
              </div>
            )}
          </div>
--- a/src/pages/dashboard/invoices/[id].astro
+++ b/src/pages/dashboard/invoices/[id].astro
@@ -1,6 +1,8 @@
 ---
 import DashboardLayout from '../../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../../components/Icon.astro';
+import ConfirmForm from '../../../components/ConfirmForm.vue';
+import ModalButton from '../../../components/ModalButton.vue';
 import { db } from '../../../db';
 import { invoices, invoiceItems, clients, members, organizations } from '../../../db/schema';
 import { eq, and } from 'drizzle-orm';
@@ -60,7 +62,7 @@ const isDraft = invoice.status === 'draft';
      <div>
        <div class="flex items-center gap-2 mb-1">
          <a href="/dashboard/invoices" class="btn btn-ghost btn-xs btn-square">
-            <Icon name="heroicons:arrow-left" class="w-4 h-4" />
+            <Icon name="arrow-left" class="w-4 h-4" />
          </a>
          <div class={`badge badge-xs ${
            invoice.status === 'paid' || invoice.status === 'accepted' ? 'badge-success' :
@@ -79,7 +81,7 @@ const isDraft = invoice.status === 'draft';
           <form method="POST" action={`/api/invoices/${invoice.id}/status`}>
            <input type="hidden" name="status" value="sent" />
            <button type="submit" class="btn btn-primary btn-sm">
-              <Icon name="heroicons:paper-airplane" class="w-4 h-4" />
+              <Icon name="paper-airplane" class="w-4 h-4" />
              Mark Sent
            </button>
          </form>
@@ -88,7 +90,7 @@ const isDraft = invoice.status === 'draft';
           <form method="POST" action={`/api/invoices/${invoice.id}/status`}>
            <input type="hidden" name="status" value="paid" />
            <button type="submit" class="btn btn-success btn-sm">
-              <Icon name="heroicons:check" class="w-4 h-4" />
+              <Icon name="check" class="w-4 h-4" />
              Mark Paid
            </button>
          </form>
@@ -97,7 +99,7 @@ const isDraft = invoice.status === 'draft';
           <form method="POST" action={`/api/invoices/${invoice.id}/status`}>
            <input type="hidden" name="status" value="accepted" />
            <button type="submit" class="btn btn-success btn-sm">
-              <Icon name="heroicons:check" class="w-4 h-4" />
+              <Icon name="check" class="w-4 h-4" />
              Mark Accepted
            </button>
          </form>
@@ -105,25 +107,25 @@ const isDraft = invoice.status === 'draft';
        {(invoice.type === 'quote' && invoice.status === 'accepted') && (
           <form method="POST" action={`/api/invoices/${invoice.id}/convert`}>
            <button type="submit" class="btn btn-primary btn-sm">
-              <Icon name="heroicons:document-duplicate" class="w-4 h-4" />
+              <Icon name="document-duplicate" class="w-4 h-4" />
              Convert to Invoice
            </button>
          </form>
        )}
        <div class="dropdown dropdown-end">
-          <div role="button" tabindex="0" class="btn btn-square btn-ghost btn-sm border border-base-200">
-            <Icon name="heroicons:ellipsis-horizontal" class="w-4 h-4" />
+          <div role="button" tabindex="0" class="btn btn-square btn-ghost btn-sm border border-base-content/20">
+            <Icon name="ellipsis-horizontal" class="w-4 h-4" />
          </div>
-          <ul tabindex="0" class="dropdown-content z-1 menu p-2 bg-base-100 rounded-box w-52 border border-base-200">
+          <ul tabindex="0" class="dropdown-content z-1 menu p-2 bg-base-100 rounded-box w-52 border border-base-content/20">
            <li>
              <a href={`/dashboard/invoices/${invoice.id}/edit`}>
-                <Icon name="heroicons:pencil-square" class="w-4 h-4" />
+                <Icon name="pencil-square" class="w-4 h-4" />
                Edit Settings
              </a>
            </li>
            <li>
              <a href={`/api/invoices/${invoice.id}/generate`} download>
-                <Icon name="heroicons:arrow-down-tray" class="w-4 h-4" />
+                <Icon name="arrow-down-tray" class="w-4 h-4" />
                Download PDF
              </a>
            </li>
@@ -132,20 +134,20 @@ const isDraft = invoice.status === 'draft';
                <form method="POST" action={`/api/invoices/${invoice.id}/status`}>
                  <input type="hidden" name="status" value="void" />
                  <button type="submit" class="text-error">
-                    <Icon name="heroicons:x-circle" class="w-4 h-4" />
+                    <Icon name="x-circle" class="w-4 h-4" />
                    Void
                  </button>
                </form>
              </li>
            )}
             <li>
-                <form method="POST" action="/api/invoices/delete" onsubmit="return confirm('Are you sure?');">
+                <ConfirmForm client:load message="Are you sure?" action="/api/invoices/delete">
                  <input type="hidden" name="id" value={invoice.id} />
                  <button type="submit" class="text-error">
-                    <Icon name="heroicons:trash" class="w-4 h-4" />
+                    <Icon name="trash" class="w-4 h-4" />
                    Delete
                  </button>
-                </form>
+                </ConfirmForm>
              </li>
          </ul>
        </div>
@@ -172,7 +174,7 @@ const isDraft = invoice.status === 'draft';
            )}
          </div>
          <div class="text-right">
-            <div class="text-4xl font-light text-base-content/30 uppercase tracking-widest mb-4">
+            <div class="text-4xl font-light text-base-content/50 uppercase tracking-widest mb-4">
              {invoice.type}
            </div>
            <div class="grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
@@ -188,7 +190,7 @@ const isDraft = invoice.status === 'draft';

        <!-- Bill To -->
        <div class="mb-12">
-          <div class="text-xs font-bold uppercase tracking-wider text-base-content/40 mb-2">Bill To</div>
+          <div class="text-xs font-bold uppercase tracking-wider text-base-content/60 mb-2">Bill To</div>
          {client ? (
            <div>
              <div class="font-bold text-lg">{client.name}</div>
@@ -207,7 +209,7 @@ const isDraft = invoice.status === 'draft';
              )}
            </div>
          ) : (
-             <div class="italic text-base-content/40">Client deleted</div>
+             <div class="italic text-base-content/60">Client deleted</div>
          )}
        </div>

@@ -216,7 +218,7 @@ const isDraft = invoice.status === 'draft';
          <div class="overflow-x-auto">
            <table class="w-full min-w-150">
            <thead>
-              <tr class="border-b-2 border-base-200 text-left text-xs font-bold uppercase tracking-wider text-base-content/40">
+              <tr class="border-b-2 border-base-content/20 text-left text-xs font-bold uppercase tracking-wider text-base-content/60">
                <th class="py-3">Description</th>
                <th class="py-3 text-right w-24">Qty</th>
                <th class="py-3 text-right w-32">Price</th>
@@ -224,7 +226,7 @@ const isDraft = invoice.status === 'draft';
                {isDraft && <th class="py-3 w-10"></th>}
              </tr>
            </thead>
-            <tbody class="divide-y divide-base-200">
+            <tbody class="divide-y divide-base-content/20">
              {items.map(item => (
                <tr>
                  <td class="py-4">{item.description}</td>
@@ -235,8 +237,8 @@ const isDraft = invoice.status === 'draft';
                    <td class="py-4 text-right">
                      <form method="POST" action={`/api/invoices/${invoice.id}/items/delete`}>
                        <input type="hidden" name="itemId" value={item.id} />
-                         <button type="submit" class="btn btn-ghost btn-xs btn-square text-error opacity-50 hover:opacity-100">
-                          <Icon name="heroicons:trash" class="w-4 h-4" />
+                         <button type="submit" class="btn btn-ghost btn-xs btn-square text-error opacity-70 hover:opacity-100">
+                          <Icon name="trash" class="w-4 h-4" />
                        </button>
                      </form>
                    </td>
@@ -245,7 +247,7 @@ const isDraft = invoice.status === 'draft';
              ))}
              {items.length === 0 && (
                <tr>
-                  <td colspan={isDraft ? 5 : 4} class="py-8 text-center text-base-content/40 italic">
+                  <td colspan={isDraft ? 5 : 4} class="py-8 text-center text-base-content/60 italic">
                    No items added yet.
                  </td>
                </tr>
@@ -258,13 +260,13 @@ const isDraft = invoice.status === 'draft';
        <!-- Add Item Form (Only if Draft) -->
        {isDraft && (
          <div class="flex justify-end mb-4">
-            <button onclick="document.getElementById('import_time_modal').showModal()" class="btn btn-sm btn-outline gap-2">
-              <Icon name="heroicons:clock" class="w-4 h-4" />
+            <ModalButton client:load modalId="import_time_modal" class="btn btn-sm btn-outline gap-2">
+              <Icon name="clock" class="w-4 h-4" />
              Import Time
-            </button>
+            </ModalButton>
          </div>

-          <form method="POST" action={`/api/invoices/${invoice.id}/items/add`} class="bg-base-200/50 p-4 rounded-lg mb-8 border border-base-200">
+          <form method="POST" action={`/api/invoices/${invoice.id}/items/add`} class="bg-base-200 p-4 rounded-lg mb-8 border border-base-content/20">
            <h4 class="text-xs font-semibold mb-3">Add Item</h4>
            <div class="grid grid-cols-1 sm:grid-cols-12 gap-3 items-end">
              <div class="sm:col-span-6">
@@ -281,7 +283,7 @@ const isDraft = invoice.status === 'draft';
              </div>
              <div class="sm:col-span-1">
                <button type="submit" class="btn btn-sm btn-primary w-full">
-                  <Icon name="heroicons:plus" class="w-4 h-4" />
+                  <Icon name="plus" class="w-4 h-4" />
                </button>
              </div>
            </div>
@@ -309,9 +311,9 @@ const isDraft = invoice.status === 'draft';
                <span class="text-base-content/60 flex items-center gap-2">
                  Tax ({invoice.taxRate ?? 0}%)
                  {isDraft && (
-                    <button type="button" onclick="document.getElementById('tax_modal').showModal()" class="btn btn-ghost btn-xs btn-square opacity-0 group-hover:opacity-100 transition-opacity" title="Edit Tax Rate">
-                      <Icon name="heroicons:pencil" class="w-3 h-3" />
-                    </button>
+                    <ModalButton client:load modalId="tax_modal" class="btn btn-ghost btn-xs btn-square opacity-0 group-hover:opacity-100 transition-opacity" title="Edit Tax Rate">
+                      <Icon name="pencil" class="w-3 h-3" />
+                    </ModalButton>
                  )}
                </span>
                <span class="font-medium">{formatCurrency(invoice.taxAmount, invoice.currency)}</span>
@@ -327,8 +329,8 @@ const isDraft = invoice.status === 'draft';

        <!-- Notes -->
        {invoice.notes && (
-          <div class="mt-12 pt-8 border-t border-base-200">
-            <div class="text-xs font-bold uppercase tracking-wider text-base-content/40 mb-2">Notes</div>
+          <div class="mt-12 pt-8 border-t border-base-content/20">
+            <div class="text-xs font-bold uppercase tracking-wider text-base-content/60 mb-2">Notes</div>
            <div class="text-sm whitespace-pre-wrap opacity-80">{invoice.notes}</div>
          </div>
        )}
@@ -364,7 +366,7 @@ const isDraft = invoice.status === 'draft';
          />
        </fieldset>
        <div class="modal-action">
-          <button type="button" class="btn btn-sm" onclick="document.getElementById('tax_modal').close()">Cancel</button>
+          <ModalButton client:load modalId="tax_modal" action="close" class="btn btn-sm">Cancel</ModalButton>
          <button type="submit" class="btn btn-primary btn-sm">Update</button>
        </div>
      </form>
@@ -397,7 +399,7 @@ const isDraft = invoice.status === 'draft';
        </label>

        <div class="modal-action">
-          <button type="button" class="btn btn-sm" onclick="document.getElementById('import_time_modal').close()">Cancel</button>
+          <ModalButton client:load modalId="import_time_modal" action="close" class="btn btn-sm">Cancel</ModalButton>
          <button type="submit" class="btn btn-primary btn-sm">Import</button>
        </div>
      </form>
--- a/src/pages/dashboard/invoices/[id]/edit.astro
+++ b/src/pages/dashboard/invoices/[id]/edit.astro
@@ -1,6 +1,6 @@
 ---
 import DashboardLayout from '../../../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../../../components/Icon.astro';
 import { db } from '../../../../db';
 import { invoices, members } from '../../../../db/schema';
 import { eq, and } from 'drizzle-orm';
@@ -48,7 +48,7 @@ const discountValueDisplay = invoice.discountType === 'fixed'
  <div class="max-w-3xl mx-auto">
    <div class="mb-6">
      <a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost btn-xs gap-2 pl-0 hover:bg-transparent text-base-content/60">
-        <Icon name="heroicons:arrow-left" class="w-4 h-4" />
+        <Icon name="arrow-left" class="w-4 h-4" />
        Back to Invoice
      </a>
      <h1 class="text-2xl font-extrabold tracking-tight mt-2">Edit Details</h1>
--- a/src/pages/dashboard/invoices/index.astro
+++ b/src/pages/dashboard/invoices/index.astro
@@ -1,7 +1,9 @@
 ---
 import DashboardLayout from '../../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../../components/Icon.astro';
 import StatCard from '../../../components/StatCard.astro';
+import AutoSubmit from '../../../components/AutoSubmit.vue';
+import ConfirmForm from '../../../components/ConfirmForm.vue';
 import { db } from '../../../db';
 import { invoices, clients } from '../../../db/schema';
 import { eq, desc, and, gte, lte, sql } from 'drizzle-orm';
@@ -108,7 +110,7 @@ const getStatusColor = (status: string) => {
      <p class="text-base-content/60 text-sm mt-1">Manage your billing and estimates</p>
    </div>
    <a href="/dashboard/invoices/new" class="btn btn-primary btn-sm">
-      <Icon name="heroicons:plus" class="w-4 h-4" />
+      <Icon name="plus" class="w-4 h-4" />
      Create New
    </a>
  </div>
@@ -118,14 +120,14 @@ const getStatusColor = (status: string) => {
      title="Total Invoices"
      value={String(yearInvoices.filter(i => i.invoice.type === 'invoice').length)}
      description={selectedYear === 'current' ? `${currentYear} (YTD)` : String(selectedYear)}
-      icon="heroicons:document-text"
+      icon="document-text"
      color="text-primary"
    />
    <StatCard
      title="Open Quotes"
      value={String(yearInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'sent').length)}
      description="Waiting for approval"
-      icon="heroicons:clipboard-document-list"
+      icon="clipboard-document-list"
      color="text-secondary"
    />
    <StatCard
@@ -134,7 +136,7 @@ const getStatusColor = (status: string) => {
        .filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'paid')
        .reduce((acc, curr) => acc + curr.invoice.total, 0), 'USD')}
      description={`Paid invoices (${selectedYear === 'current' ? `${currentYear} YTD` : selectedYear})`}
-      icon="heroicons:currency-dollar"
+      icon="currency-dollar"
      color="text-success"
    />
  </div>
@@ -145,53 +147,61 @@ const getStatusColor = (status: string) => {
      <form method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Year</legend>
-          <select name="year" class="select w-full" onchange="this.form.submit()">
-            <option value="current" selected={selectedYear === 'current'}>Current Year to Date ({currentYear})</option>
-            {availableYears.map(year => (
-              <option value={year} selected={year === selectedYear}>{year}</option>
-            ))}
-          </select>
+          <AutoSubmit client:load>
+            <select name="year" class="select w-full">
+              <option value="current" selected={selectedYear === 'current'}>Current Year to Date ({currentYear})</option>
+              {availableYears.map(year => (
+                <option value={year} selected={year === selectedYear}>{year}</option>
+              ))}
+            </select>
+          </AutoSubmit>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Type</legend>
-          <select name="type" class="select w-full" onchange="this.form.submit()">
-            <option value="all" selected={selectedType === 'all'}>All Types</option>
-            <option value="invoice" selected={selectedType === 'invoice'}>Invoices</option>
-            <option value="quote" selected={selectedType === 'quote'}>Quotes</option>
-          </select>
+          <AutoSubmit client:load>
+            <select name="type" class="select w-full">
+              <option value="all" selected={selectedType === 'all'}>All Types</option>
+              <option value="invoice" selected={selectedType === 'invoice'}>Invoices</option>
+              <option value="quote" selected={selectedType === 'quote'}>Quotes</option>
+            </select>
+          </AutoSubmit>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Status</legend>
-          <select name="status" class="select w-full" onchange="this.form.submit()">
-            <option value="all" selected={selectedStatus === 'all'}>All Statuses</option>
-            <option value="draft" selected={selectedStatus === 'draft'}>Draft</option>
-            <option value="sent" selected={selectedStatus === 'sent'}>Sent</option>
-            <option value="paid" selected={selectedStatus === 'paid'}>Paid</option>
-            <option value="accepted" selected={selectedStatus === 'accepted'}>Accepted</option>
-            <option value="declined" selected={selectedStatus === 'declined'}>Declined</option>
-            <option value="void" selected={selectedStatus === 'void'}>Void</option>
-          </select>
+          <AutoSubmit client:load>
+            <select name="status" class="select w-full">
+              <option value="all" selected={selectedStatus === 'all'}>All Statuses</option>
+              <option value="draft" selected={selectedStatus === 'draft'}>Draft</option>
+              <option value="sent" selected={selectedStatus === 'sent'}>Sent</option>
+              <option value="paid" selected={selectedStatus === 'paid'}>Paid</option>
+              <option value="accepted" selected={selectedStatus === 'accepted'}>Accepted</option>
+              <option value="declined" selected={selectedStatus === 'declined'}>Declined</option>
+              <option value="void" selected={selectedStatus === 'void'}>Void</option>
+            </select>
+          </AutoSubmit>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Sort By</legend>
-          <select name="sort" class="select w-full" onchange="this.form.submit()">
-            <option value="date-desc" selected={sortBy === 'date-desc'}>Date (Newest First)</option>
-            <option value="date-asc" selected={sortBy === 'date-asc'}>Date (Oldest First)</option>
-            <option value="amount-desc" selected={sortBy === 'amount-desc'}>Amount (High to Low)</option>
-            <option value="amount-asc" selected={sortBy === 'amount-asc'}>Amount (Low to High)</option>
-            <option value="number-desc" selected={sortBy === 'number-desc'}>Number (Z-A)</option>
-            <option value="number-asc" selected={sortBy === 'number-asc'}>Number (A-Z)</option>
-          </select>
+          <AutoSubmit client:load>
+            <select name="sort" class="select w-full">
+              <option value="date-desc" selected={sortBy === 'date-desc'}>Date (Newest First)</option>
+              <option value="date-asc" selected={sortBy === 'date-asc'}>Date (Oldest First)</option>
+              <option value="amount-desc" selected={sortBy === 'amount-desc'}>Amount (High to Low)</option>
+              <option value="amount-asc" selected={sortBy === 'amount-asc'}>Amount (Low to High)</option>
+              <option value="number-desc" selected={sortBy === 'number-desc'}>Number (Z-A)</option>
+              <option value="number-asc" selected={sortBy === 'number-asc'}>Number (A-Z)</option>
+            </select>
+          </AutoSubmit>
        </fieldset>
      </form>

      {(selectedYear !== 'current' || selectedType !== 'all' || selectedStatus !== 'all' || sortBy !== 'date-desc') && (
        <div class="mt-3">
          <a href="/dashboard/invoices" class="btn btn-ghost btn-xs">
-            <Icon name="heroicons:x-mark" class="w-3 h-3" />
+            <Icon name="x-mark" class="w-3 h-3" />
            Clear Filters
          </a>
        </div>
@@ -201,8 +211,8 @@ const getStatusColor = (status: string) => {

  <div class="card card-border bg-base-100">
    <div class="card-body p-0">
-      <div class="px-4 py-3 border-b border-base-200">
-        <p class="text-xs text-base-content/50">
+      <div class="px-4 py-3 border-b border-base-content/20">
+        <p class="text-xs text-base-content/60">
          Showing <span class="font-semibold text-base-content">{allInvoices.length}</span>
          {allInvoices.length === 1 ? 'result' : 'results'}
          {selectedYear === 'current' ? ` for ${currentYear} (year to date)` : ` for ${selectedYear}`}
@@ -225,7 +235,7 @@ const getStatusColor = (status: string) => {
          <tbody>
            {allInvoices.length === 0 ? (
              <tr>
-                <td colspan="8" class="text-center py-8 text-base-content/50 text-sm">
+                <td colspan="8" class="text-center py-8 text-base-content/60 text-sm">
                  No invoices or quotes found. Create one to get started.
                </td>
              </tr>
@@ -241,7 +251,7 @@ const getStatusColor = (status: string) => {
                    {client ? (
                      <div class="font-medium">{client.name}</div>
                    ) : (
-                      <span class="text-base-content/40 italic">Deleted Client</span>
+                      <span class="text-base-content/60 italic">Deleted Client</span>
                    )}
                  </td>
                  <td>{invoice.issueDate.toLocaleDateString()}</td>
@@ -260,24 +270,24 @@ const getStatusColor = (status: string) => {
                  <td class="text-right">
                    <div class="dropdown dropdown-end">
                      <div role="button" tabindex="0" class="btn btn-ghost btn-xs btn-square">
-                        <Icon name="heroicons:ellipsis-vertical" class="w-4 h-4" />
+                        <Icon name="ellipsis-vertical" class="w-4 h-4" />
                      </div>
-                      <ul tabindex="0" class="dropdown-content menu p-2 bg-base-100 rounded-box w-52 border border-base-200 z-100">
+                      <ul tabindex="0" class="dropdown-content menu p-2 bg-base-100 rounded-box w-52 border border-base-content/20 z-100">
                        <li>
                          <a href={`/dashboard/invoices/${invoice.id}`}>
-                            <Icon name="heroicons:eye" class="w-4 h-4" />
+                            <Icon name="eye" class="w-4 h-4" />
                            View Details
                          </a>
                        </li>
                        <li>
                          <a href={`/dashboard/invoices/${invoice.id}/edit`}>
-                            <Icon name="heroicons:pencil-square" class="w-4 h-4" />
+                            <Icon name="pencil-square" class="w-4 h-4" />
                            Edit
                          </a>
                        </li>
                        <li>
                          <a href={`/api/invoices/${invoice.id}/generate`} download>
-                            <Icon name="heroicons:arrow-down-tray" class="w-4 h-4" />
+                            <Icon name="arrow-down-tray" class="w-4 h-4" />
                            Download PDF
                          </a>
                        </li>
@@ -286,7 +296,7 @@ const getStatusColor = (status: string) => {
                            <form method="POST" action={`/api/invoices/${invoice.id}/status`} class="w-full">
                              <input type="hidden" name="status" value="sent" />
                              <button type="submit" class="w-full justify-start">
-                                <Icon name="heroicons:paper-airplane" class="w-4 h-4" />
+                                <Icon name="paper-airplane" class="w-4 h-4" />
                                Mark as Sent
                              </button>
                            </form>
@@ -294,13 +304,13 @@ const getStatusColor = (status: string) => {
                        )}
                        <div class="divider my-1"></div>
                        <li>
-                          <form method="POST" action={`/api/invoices/delete`} onsubmit="return confirm('Are you sure? This action cannot be undone.');" class="w-full">
+                          <ConfirmForm client:load message="Are you sure? This action cannot be undone." action="/api/invoices/delete" class="w-full">
                            <input type="hidden" name="id" value={invoice.id} />
-                            <button type="submit" class="w-full justify-start text-error hover:bg-error/10">
-                              <Icon name="heroicons:trash" class="w-4 h-4" />
+                            <button type="submit" class="w-full justify-start text-error hover:bg-base-300">
+                              <Icon name="trash" class="w-4 h-4" />
                              Delete
                            </button>
-                          </form>
+                          </ConfirmForm>
                        </li>
                      </ul>
                    </div>
--- a/src/pages/dashboard/invoices/new.astro
+++ b/src/pages/dashboard/invoices/new.astro
@@ -1,6 +1,6 @@
 ---
 import DashboardLayout from '../../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../../components/Icon.astro';
 import { db } from '../../../db';
 import { clients, invoices, organizations } from '../../../db/schema';
 import { eq, desc, and } from 'drizzle-orm';
@@ -81,7 +81,7 @@ const defaultDueDate = nextMonth.toISOString().split('T')[0];
  <div class="max-w-3xl mx-auto">
    <div class="mb-6">
      <a href="/dashboard/invoices" class="btn btn-ghost btn-xs gap-2 pl-0 hover:bg-transparent text-base-content/60">
-        <Icon name="heroicons:arrow-left" class="w-4 h-4" />
+        <Icon name="arrow-left" class="w-4 h-4" />
        Back to Invoices
      </a>
      <h1 class="text-2xl font-extrabold tracking-tight mt-2">Create New Document</h1>
@@ -89,7 +89,7 @@ const defaultDueDate = nextMonth.toISOString().split('T')[0];

    {teamClients.length === 0 ? (
      <div role="alert" class="alert alert-warning">
-        <Icon name="heroicons:exclamation-triangle" class="w-5 h-5" />
+        <Icon name="exclamation-triangle" class="w-5 h-5" />
        <div>
          <h3 class="font-semibold text-sm">No Clients Found</h3>
          <div class="text-xs">You need to add a client before you can create an invoice or quote.</div>
@@ -104,11 +104,11 @@ const defaultDueDate = nextMonth.toISOString().split('T')[0];
          <fieldset class="fieldset">
            <legend class="fieldset-legend text-xs">Document Type</legend>
            <div class="flex gap-3">
-              <label class="label cursor-pointer justify-start gap-2 border border-base-200 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium text-sm" for="document-type-invoice">
+              <label class="label cursor-pointer justify-start gap-2 border border-base-content/20 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-base-200 transition-all font-medium text-sm" for="document-type-invoice">
                <input type="radio" id="document-type-invoice" name="type" value="invoice" class="radio radio-primary radio-sm" checked />
                Invoice
              </label>
-              <label class="label cursor-pointer justify-start gap-2 border border-base-200 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium text-sm" for="document-type-quote">
+              <label class="label cursor-pointer justify-start gap-2 border border-base-content/20 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-base-200 transition-all font-medium text-sm" for="document-type-quote">
                <input type="radio" id="document-type-quote" name="type" value="quote" class="radio radio-primary radio-sm" />
                Quote / Estimate
              </label>
@@ -187,7 +187,7 @@ const defaultDueDate = nextMonth.toISOString().split('T')[0];
            <a href="/dashboard/invoices" class="btn btn-ghost btn-sm">Cancel</a>
            <button type="submit" class="btn btn-primary btn-sm">
              Create Draft
-              <Icon name="heroicons:arrow-right" class="w-4 h-4" />
+              <Icon name="arrow-right" class="w-4 h-4" />
            </button>
          </div>
        </div>
--- a/src/pages/dashboard/organizations/new.astro
+++ b/src/pages/dashboard/organizations/new.astro
@@ -1,6 +1,6 @@
 ---
 import DashboardLayout from '../../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../../components/Icon.astro';
 import { db } from '../../../db';
 import { organizations, members } from '../../../db/schema';
 import { eq } from 'drizzle-orm';
@@ -13,7 +13,7 @@ if (!user) return Astro.redirect('/login');
  <div class="max-w-2xl mx-auto">
    <div class="flex items-center gap-3 mb-6">
      <a href="/dashboard" class="btn btn-ghost btn-xs">
-        <Icon name="heroicons:arrow-left" class="w-4 h-4" />
+        <Icon name="arrow-left" class="w-4 h-4" />
      </a>
      <h1 class="text-2xl font-extrabold tracking-tight">Create New Team</h1>
    </div>
@@ -21,7 +21,7 @@ if (!user) return Astro.redirect('/login');
    <form method="POST" action="/api/organizations/create" class="card card-border bg-base-100">
      <div class="card-body p-4">
        <div class="alert alert-info mb-4">
-          <Icon name="heroicons:information-circle" class="w-4 h-4" />
+          <Icon name="information-circle" class="w-4 h-4" />
          <span class="text-sm">Create a new team to manage separate projects and collaborators. You'll be the owner.</span>
        </div>

--- a/src/pages/dashboard/reports.astro
+++ b/src/pages/dashboard/reports.astro
@@ -1,10 +1,12 @@
 ---
 import DashboardLayout from '../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../components/Icon.astro';
 import StatCard from '../../components/StatCard.astro';
 import TagChart from '../../components/TagChart.vue';
 import ClientChart from '../../components/ClientChart.vue';
 import MemberChart from '../../components/MemberChart.vue';
+import AutoSubmit from '../../components/AutoSubmit.vue';
+import ColorDot from '../../components/ColorDot.vue';
 import { db } from '../../db';
 import { timeEntries, members, users, clients, tags, invoices } from '../../db/schema';
 import { eq, and, gte, lte, sql, desc } from 'drizzle-orm';
@@ -260,78 +262,88 @@ function getTimeRangeLabel(range: string) {
      <form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Time Range</legend>
-          <select id="reports-range" name="range" class="select w-full" onchange="this.form.submit()">
-            <option value="today" selected={timeRange === 'today'}>Today</option>
-            <option value="week" selected={timeRange === 'week'}>Last 7 Days</option>
-            <option value="month" selected={timeRange === 'month'}>Last 30 Days</option>
-            <option value="mtd" selected={timeRange === 'mtd'}>Month to Date</option>
-            <option value="ytd" selected={timeRange === 'ytd'}>Year to Date</option>
-            <option value="last-month" selected={timeRange === 'last-month'}>Last Month</option>
-            <option value="custom" selected={timeRange === 'custom'}>Custom Range</option>
-          </select>
+          <AutoSubmit client:load>
+            <select id="reports-range" name="range" class="select w-full">
+              <option value="today" selected={timeRange === 'today'}>Today</option>
+              <option value="week" selected={timeRange === 'week'}>Last 7 Days</option>
+              <option value="month" selected={timeRange === 'month'}>Last 30 Days</option>
+              <option value="mtd" selected={timeRange === 'mtd'}>Month to Date</option>
+              <option value="ytd" selected={timeRange === 'ytd'}>Year to Date</option>
+              <option value="last-month" selected={timeRange === 'last-month'}>Last Month</option>
+              <option value="custom" selected={timeRange === 'custom'}>Custom Range</option>
+            </select>
+          </AutoSubmit>
        </fieldset>

        {timeRange === 'custom' && (
          <>
            <fieldset class="fieldset">
              <legend class="fieldset-legend text-xs">From Date</legend>
-              <input
-                type="date"
-                id="reports-from"
-                name="from"
-                class="input w-full"
-                value={customFrom || (startDate.getFullYear() + '-' + String(startDate.getMonth() + 1).padStart(2, '0') + '-' + String(startDate.getDate()).padStart(2, '0'))}
-                onchange="this.form.submit()"
-              />
+              <AutoSubmit client:load>
+                <input
+                  type="date"
+                  id="reports-from"
+                  name="from"
+                  class="input w-full"
+                  value={customFrom || (startDate.getFullYear() + '-' + String(startDate.getMonth() + 1).padStart(2, '0') + '-' + String(startDate.getDate()).padStart(2, '0'))}
+                />
+              </AutoSubmit>
            </fieldset>
            <fieldset class="fieldset">
              <legend class="fieldset-legend text-xs">To Date</legend>
-              <input
-                type="date"
-                id="reports-to"
-                name="to"
-                class="input w-full"
-                value={customTo || (endDate.getFullYear() + '-' + String(endDate.getMonth() + 1).padStart(2, '0') + '-' + String(endDate.getDate()).padStart(2, '0'))}
-                onchange="this.form.submit()"
-              />
+              <AutoSubmit client:load>
+                <input
+                  type="date"
+                  id="reports-to"
+                  name="to"
+                  class="input w-full"
+                  value={customTo || (endDate.getFullYear() + '-' + String(endDate.getMonth() + 1).padStart(2, '0') + '-' + String(endDate.getDate()).padStart(2, '0'))}
+                />
+              </AutoSubmit>
            </fieldset>
          </>
        )}

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Team Member</legend>
-          <select id="reports-member" name="member" class="select w-full" onchange="this.form.submit()">
-            <option value="">All Members</option>
-            {teamMembers.map(member => (
-              <option value={member.id} selected={selectedMemberId === member.id}>
-                {member.name}
-              </option>
-            ))}
-          </select>
+          <AutoSubmit client:load>
+            <select id="reports-member" name="member" class="select w-full">
+              <option value="">All Members</option>
+              {teamMembers.map(member => (
+                <option value={member.id} selected={selectedMemberId === member.id}>
+                  {member.name}
+                </option>
+              ))}
+            </select>
+          </AutoSubmit>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Tag</legend>
-          <select id="reports-tag" name="tag" class="select w-full" onchange="this.form.submit()">
-            <option value="">All Tags</option>
-            {allTags.map(tag => (
-              <option value={tag.id} selected={selectedTagId === tag.id}>
-                {tag.name}
-              </option>
-            ))}
-          </select>
+          <AutoSubmit client:load>
+            <select id="reports-tag" name="tag" class="select w-full">
+              <option value="">All Tags</option>
+              {allTags.map(tag => (
+                <option value={tag.id} selected={selectedTagId === tag.id}>
+                  {tag.name}
+                </option>
+              ))}
+            </select>
+          </AutoSubmit>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Client</legend>
-          <select id="reports-client" name="client" class="select w-full" onchange="this.form.submit()">
-            <option value="">All Clients</option>
-            {allClients.map(client => (
-              <option value={client.id} selected={selectedClientId === client.id}>
-                {client.name}
-              </option>
-            ))}
-          </select>
+          <AutoSubmit client:load>
+            <select id="reports-client" name="client" class="select w-full">
+              <option value="">All Clients</option>
+              {allClients.map(client => (
+                <option value={client.id} selected={selectedClientId === client.id}>
+                  {client.name}
+                </option>
+              ))}
+            </select>
+          </AutoSubmit>
        </fieldset>
      </form>
    </div>
@@ -343,28 +355,28 @@ function getTimeRangeLabel(range: string) {
      title="Total Time"
      value={formatDuration(totalTime)}
      description={getTimeRangeLabel(timeRange)}
-      icon="heroicons:clock"
+      icon="clock"
      color="text-primary"
    />
    <StatCard
      title="Total Entries"
      value={String(entries.length)}
      description={getTimeRangeLabel(timeRange)}
-      icon="heroicons:list-bullet"
+      icon="list-bullet"
      color="text-secondary"
    />
    <StatCard
      title="Revenue"
      value={formatCurrency(revenueStats.total)}
      description={`${invoiceStats.paid} paid invoices`}
-      icon="heroicons:currency-dollar"
+      icon="currency-dollar"
      color="text-success"
    />
    <StatCard
      title="Active Members"
      value={String(statsByMember.filter(s => s.entryCount > 0).length)}
      description={`of ${teamMembers.length} total`}
-      icon="heroicons:user-group"
+      icon="user-group"
      color="text-accent"
    />
  </div>
@@ -374,7 +386,7 @@ function getTimeRangeLabel(range: string) {
    <div class="card card-border bg-base-100">
      <div class="card-body p-4">
        <h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
-          <Icon name="heroicons:document-text" class="w-4 h-4" />
+          <Icon name="document-text" class="w-4 h-4" />
          Invoices Overview
        </h2>
        <div class="grid grid-cols-2 gap-4">
@@ -382,11 +394,11 @@ function getTimeRangeLabel(range: string) {
            <div class="stat-title text-xs">Total Invoices</div>
            <div class="stat-value text-2xl">{invoiceStats.total}</div>
          </div>
-          <div class="stat bg-success/10 rounded-lg">
+          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title text-xs">Paid</div>
            <div class="stat-value text-2xl text-success">{invoiceStats.paid}</div>
          </div>
-          <div class="stat bg-info/10 rounded-lg">
+          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title text-xs">Sent</div>
            <div class="stat-value text-2xl text-info">{invoiceStats.sent}</div>
          </div>
@@ -410,7 +422,7 @@ function getTimeRangeLabel(range: string) {
    <div class="card card-border bg-base-100">
      <div class="card-body p-4">
        <h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
-          <Icon name="heroicons:clipboard-document-list" class="w-4 h-4" />
+          <Icon name="clipboard-document-list" class="w-4 h-4" />
          Quotes Overview
        </h2>
        <div class="grid grid-cols-2 gap-4">
@@ -418,15 +430,15 @@ function getTimeRangeLabel(range: string) {
            <div class="stat-title text-xs">Total Quotes</div>
            <div class="stat-value text-2xl">{quoteStats.total}</div>
          </div>
-          <div class="stat bg-success/10 rounded-lg">
+          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title text-xs">Accepted</div>
            <div class="stat-value text-2xl text-success">{quoteStats.accepted}</div>
          </div>
-          <div class="stat bg-info/10 rounded-lg">
+          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title text-xs">Pending</div>
            <div class="stat-value text-2xl text-info">{quoteStats.sent}</div>
          </div>
-          <div class="stat bg-error/10 rounded-lg">
+          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title text-xs">Declined</div>
            <div class="stat-value text-2xl text-error">{quoteStats.declined}</div>
          </div>
@@ -451,7 +463,7 @@ function getTimeRangeLabel(range: string) {
    <div class="card card-border bg-base-100 mb-6">
      <div class="card-body p-4">
        <h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
-          <Icon name="heroicons:banknotes" class="w-4 h-4" />
+          <Icon name="banknotes" class="w-4 h-4" />
          Revenue by Client
        </h2>
        <div class="overflow-x-auto">
@@ -493,7 +505,7 @@ function getTimeRangeLabel(range: string) {
          <div class="card card-border bg-base-100">
            <div class="card-body p-4">
              <h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
-                <Icon name="heroicons:chart-pie" class="w-4 h-4" />
+                <Icon name="chart-pie" class="w-4 h-4" />
                Tag Distribution
              </h2>
              <div class="h-64 w-full">
@@ -515,7 +527,7 @@ function getTimeRangeLabel(range: string) {
          <div class="card card-border bg-base-100">
            <div class="card-body p-4">
              <h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
-                <Icon name="heroicons:chart-bar" class="w-4 h-4" />
+                <Icon name="chart-bar" class="w-4 h-4" />
                Time by Client
              </h2>
              <div class="h-64 w-full">
@@ -537,7 +549,7 @@ function getTimeRangeLabel(range: string) {
        <div class="card card-border bg-base-100 mb-6">
          <div class="card-body p-4">
            <h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
-              <Icon name="heroicons:users" class="w-4 h-4" />
+              <Icon name="users" class="w-4 h-4" />
              Time by Team Member
            </h2>
            <div class="h-64 w-full">
@@ -560,7 +572,7 @@ function getTimeRangeLabel(range: string) {
    <div class="card card-border bg-base-100 mb-6">
      <div class="card-body p-4">
        <h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
-          <Icon name="heroicons:users" class="w-4 h-4" />
+          <Icon name="users" class="w-4 h-4" />
          By Team Member
        </h2>
        <div class="overflow-x-auto">
@@ -579,7 +591,7 @@ function getTimeRangeLabel(range: string) {
                  <td>
                    <div>
                      <div class="font-medium">{stat.member.name}</div>
-                      <div class="text-xs text-base-content/40">{stat.member.email}</div>
+                      <div class="text-xs text-base-content/60">{stat.member.email}</div>
                    </div>
                  </td>
                  <td class="font-mono text-sm">{formatDuration(stat.totalTime)}</td>
@@ -601,7 +613,7 @@ function getTimeRangeLabel(range: string) {
    <div class="card card-border bg-base-100 mb-6">
      <div class="card-body p-4">
        <h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
-          <Icon name="heroicons:tag" class="w-4 h-4" />
+          <Icon name="tag" class="w-4 h-4" />
          By Tag
        </h2>
        <div class="overflow-x-auto">
@@ -620,7 +632,7 @@ function getTimeRangeLabel(range: string) {
                  <td>
                    <div class="flex items-center gap-2">
                      {stat.tag.color && (
-                        <span class="w-3 h-3 rounded-full" style={`background-color: ${stat.tag.color}`}></span>
+                        <ColorDot client:load color={stat.tag.color} class="w-3 h-3 rounded-full" />
                      )}
                      <span>{stat.tag.name}</span>
                    </div>
@@ -653,7 +665,7 @@ function getTimeRangeLabel(range: string) {
    <div class="card card-border bg-base-100 mb-6">
      <div class="card-body p-4">
        <h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
-          <Icon name="heroicons:building-office" class="w-4 h-4" />
+          <Icon name="building-office" class="w-4 h-4" />
          By Client
        </h2>
        <div class="overflow-x-auto">
@@ -698,12 +710,12 @@ function getTimeRangeLabel(range: string) {
    <div class="card-body p-4">
      <div class="flex justify-between items-center mb-3">
        <h2 class="text-sm font-semibold flex items-center gap-2">
-          <Icon name="heroicons:document-text" class="w-4 h-4" />
+          <Icon name="document-text" class="w-4 h-4" />
          Detailed Entries ({entries.length})
        </h2>
        {entries.length > 0 && (
          <a href={`/api/reports/export${url.search}`} class="btn btn-xs btn-ghost" target="_blank">
-            <Icon name="heroicons:arrow-down-tray" class="w-3.5 h-3.5" />
+            <Icon name="arrow-down-tray" class="w-3.5 h-3.5" />
            Export CSV
          </a>
        )}
@@ -726,7 +738,7 @@ function getTimeRangeLabel(range: string) {
                <tr>
                  <td class="whitespace-nowrap">
                    {e.entry.startTime.toLocaleDateString()}<br/>
-                    <span class="text-xs text-base-content/40">
+                    <span class="text-xs text-base-content/60">
                      {e.entry.startTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                    </span>
                  </td>
@@ -736,12 +748,12 @@ function getTimeRangeLabel(range: string) {
                    {e.tag ? (
                      <div class="badge badge-xs badge-outline flex items-center gap-1">
                        {e.tag.color && (
-                          <span class="w-2 h-2 rounded-full" style={`background-color: ${e.tag.color}`}></span>
+                          <ColorDot client:load color={e.tag.color} class="w-2 h-2 rounded-full" />
                        )}
                        <span>{e.tag.name}</span>
                      </div>
                    ) : (
-                      <span class="text-base-content/30">-</span>
+                      <span class="text-base-content/60">-</span>
                    )}
                  </td>
                  <td class="text-base-content/60">{e.entry.description || '-'}</td>
@@ -758,11 +770,11 @@ function getTimeRangeLabel(range: string) {
        </div>
      ) : (
        <div class="flex flex-col items-center justify-center py-10 text-center">
-          <Icon name="heroicons:inbox" class="w-12 h-12 text-base-content/15 mb-3" />
+          <Icon name="inbox" class="w-12 h-12 text-base-content/30 mb-3" />
          <h3 class="text-base font-semibold mb-1">No time entries found</h3>
-          <p class="text-base-content/50 text-sm mb-4">Try adjusting your filters or select a different time range.</p>
+          <p class="text-base-content/60 text-sm mb-4">Try adjusting your filters or select a different time range.</p>
          <a href="/dashboard/tracker" class="btn btn-primary btn-sm">
-            <Icon name="heroicons:play" class="w-4 h-4" />
+            <Icon name="play" class="w-4 h-4" />
            Start Tracking Time
          </a>
        </div>
--- a/src/pages/dashboard/settings.astro
+++ b/src/pages/dashboard/settings.astro
@@ -1,6 +1,6 @@
 ---
 import DashboardLayout from '../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../components/Icon.astro';
 import { db } from '../../db';
 import { apiTokens, passkeys } from '../../db/schema';
 import { eq, desc } from 'drizzle-orm';
@@ -37,14 +37,14 @@ const userPasskeys = await db.select()
    {/* Success Messages */}
    {successType === 'profile' && (
      <div class="alert alert-success mb-6">
-        <Icon name="heroicons:check-circle" class="w-5 h-5 sm:w-6 sm:h-6 shrink-0" />
+        <Icon name="check-circle" class="w-5 h-5 sm:w-6 sm:h-6 shrink-0" />
        <span class="text-sm sm:text-base">Profile updated successfully!</span>
      </div>
    )}

    {successType === 'password' && (
      <div class="alert alert-success mb-6">
-        <Icon name="heroicons:check-circle" class="w-5 h-5 sm:w-6 sm:h-6 shrink-0" />
+        <Icon name="check-circle" class="w-5 h-5 sm:w-6 sm:h-6 shrink-0" />
        <span class="text-sm sm:text-base">Password changed successfully!</span>
      </div>
    )}
@@ -72,16 +72,16 @@ const userPasskeys = await db.select()
    <div class="card card-border bg-base-100">
      <div class="card-body p-4">
        <h2 class="text-sm font-semibold flex items-center gap-2 mb-4">
-          <Icon name="heroicons:information-circle" class="w-4 h-4" />
+          <Icon name="information-circle" class="w-4 h-4" />
          Account Information
        </h2>

        <div class="space-y-3">
-          <div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-200 gap-2 sm:gap-0">
+          <div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-content/20 gap-2 sm:gap-0">
            <span class="text-base-content/60 text-sm">Account ID</span>
            <span class="font-mono text-xs break-all">{user.id}</span>
          </div>
-          <div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-200 gap-2 sm:gap-0">
+          <div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-content/20 gap-2 sm:gap-0">
            <span class="text-base-content/60 text-sm">Email</span>
            <span class="text-sm break-all">{user.email}</span>
          </div>
--- a/src/pages/dashboard/team.astro
+++ b/src/pages/dashboard/team.astro
@@ -1,7 +1,7 @@
 ---
 import DashboardLayout from '../../layouts/DashboardLayout.astro';
 import Avatar from '../../components/Avatar.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../components/Icon.astro';
 import { db } from '../../db';
 import { members, users } from '../../db/schema';
 import { eq } from 'drizzle-orm';
@@ -36,7 +36,7 @@ const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?
      {isAdmin && (
        <>
          <a href="/dashboard/team/settings" class="btn btn-ghost btn-sm">
-            <Icon name="heroicons:cog-6-tooth" class="w-4 h-4" />
+            <Icon name="cog-6-tooth" class="w-4 h-4" />
            Settings
          </a>
          <a href="/dashboard/team/invite" class="btn btn-primary btn-sm">Invite Member</a>
@@ -82,15 +82,15 @@ const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?
                    {member.role}
                  </span>
                </td>
-                <td class="text-base-content/40">{member.joinedAt?.toLocaleDateString() ?? 'N/A'}</td>
+                <td class="text-base-content/60">{member.joinedAt?.toLocaleDateString() ?? 'N/A'}</td>
                {isAdmin && (
                  <td>
                    {teamUser.id !== user.id && member.role !== 'owner' && (
                      <div class="dropdown dropdown-end">
                        <div role="button" tabindex="0" class="btn btn-ghost btn-xs btn-square">
-                          <Icon name="heroicons:ellipsis-vertical" class="w-4 h-4" />
+                          <Icon name="ellipsis-vertical" class="w-4 h-4" />
                        </div>
-                        <ul tabindex="0" class="dropdown-content z-1 menu p-2 bg-base-100 rounded-box w-52 border border-base-200">
+                        <ul tabindex="0" class="dropdown-content z-1 menu p-2 bg-base-100 rounded-box w-52 border border-base-content/20">
                          <li>
                            <form method="POST" action={`/api/team/change-role`}>
                              <input type="hidden" name="userId" value={teamUser.id} />
--- a/src/pages/dashboard/team/invite.astro
+++ b/src/pages/dashboard/team/invite.astro
@@ -1,6 +1,6 @@
 ---
 import DashboardLayout from '../../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../../components/Icon.astro';
 import { db } from '../../../db';
 import { members } from '../../../db/schema';
 import { eq } from 'drizzle-orm';
@@ -34,7 +34,7 @@ if (!isAdmin) return Astro.redirect('/dashboard/team');
    <form method="POST" action="/api/team/invite" class="card card-border bg-base-100">
      <div class="card-body p-4">
        <div class="alert alert-info mb-4">
-          <Icon name="heroicons:information-circle" class="w-4 h-4 shrink-0" />
+          <Icon name="information-circle" class="w-4 h-4 shrink-0" />
          <span class="text-sm">The user must already have an account. They'll be added to your organization.</span>
        </div>

@@ -56,7 +56,7 @@ if (!isAdmin) return Astro.redirect('/dashboard/team');
            <option value="member">Member</option>
            <option value="admin">Admin</option>
          </select>
-          <p class="text-xs text-base-content/40 mt-1">Members can track time. Admins can manage team and clients.</p>
+          <p class="text-xs text-base-content/60 mt-1">Members can track time. Admins can manage team and clients.</p>
        </fieldset>

        <div class="flex justify-end gap-2 mt-4">
--- a/src/pages/dashboard/team/settings.astro
+++ b/src/pages/dashboard/team/settings.astro
@@ -1,6 +1,9 @@
 ---
 import DashboardLayout from '../../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../../components/Icon.astro';
+import ModalButton from '../../../components/ModalButton.vue';
+import ConfirmForm from '../../../components/ConfirmForm.vue';
+import ColorDot from '../../../components/ColorDot.vue';
 import { db } from '../../../db';
 import { organizations, tags } from '../../../db/schema';
 import { eq } from 'drizzle-orm';
@@ -38,7 +41,7 @@ const successType = url.searchParams.get('success');
 <DashboardLayout title="Team Settings - Chronus">
  <div class="flex items-center gap-3 mb-6">
    <a href="/dashboard/team" class="btn btn-ghost btn-xs">
-      <Icon name="heroicons:arrow-left" class="w-4 h-4" />
+      <Icon name="arrow-left" class="w-4 h-4" />
    </a>
    <h1 class="text-2xl font-extrabold tracking-tight">Team Settings</h1>
  </div>
@@ -47,13 +50,13 @@ const successType = url.searchParams.get('success');
  <div class="card card-border bg-base-100 mb-6">
    <div class="card-body p-4">
      <h2 class="text-sm font-semibold flex items-center gap-2 mb-4">
-        <Icon name="heroicons:building-office-2" class="w-4 h-4" />
+        <Icon name="building-office-2" class="w-4 h-4" />
        Team Settings
      </h2>

      {successType === 'org-name' && (
        <div class="alert alert-success mb-4">
-          <Icon name="heroicons:check-circle" class="w-4 h-4" />
+          <Icon name="check-circle" class="w-4 h-4" />
          <span class="text-sm">Team information updated successfully!</span>
        </div>
      )}
@@ -70,7 +73,7 @@ const successType = url.searchParams.get('success');
          <legend class="fieldset-legend text-xs">Team Logo</legend>
          <div class="flex items-center gap-4">
            <div class="avatar placeholder">
-              <div class="bg-base-200 text-neutral-content rounded-xl w-20 border border-base-200 flex items-center justify-center overflow-hidden">
+              <div class="bg-base-200 text-neutral-content rounded-xl w-20 border border-base-content/20 flex items-center justify-center overflow-hidden">
                {organization.logoUrl ? (
                  <img
                    src={organization.logoUrl}
@@ -79,8 +82,8 @@ const successType = url.searchParams.get('success');
                  />
                ) : (
                  <Icon
-                    name="heroicons:photo"
-                    class="w-6 h-6 opacity-40 text-base-content"
+                    name="photo"
+                    class="w-6 h-6 opacity-70 text-base-content"
                  />
                )}
              </div>
@@ -92,7 +95,7 @@ const successType = url.searchParams.get('success');
                accept="image/png, image/jpeg"
                class="file-input file-input-bordered file-input-sm w-full max-w-xs"
              />
-              <div class="text-xs text-base-content/40 mt-1">
+              <div class="text-xs text-base-content/60 mt-1">
                Upload a company logo (PNG, JPG). Will be displayed on invoices and quotes.
              </div>
            </div>
@@ -110,10 +113,10 @@ const successType = url.searchParams.get('success');
            class="input w-full"
            required
          />
-          <p class="text-xs text-base-content/40 mt-1">This name is visible to all team members</p>
+          <p class="text-xs text-base-content/60 mt-1">This name is visible to all team members</p>
        </fieldset>

-        <div class="divider text-xs text-base-content/40 my-2">Address Information</div>
+        <div class="divider text-xs text-base-content/60 my-2">Address Information</div>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Street Address</legend>
@@ -179,7 +182,7 @@ const successType = url.searchParams.get('success');
          </fieldset>
        </div>

-        <div class="divider text-xs text-base-content/40 my-2">Defaults</div>
+        <div class="divider text-xs text-base-content/60 my-2">Defaults</div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
          <fieldset class="fieldset">
@@ -213,12 +216,12 @@ const successType = url.searchParams.get('success');
        </div>

        <div class="flex flex-col sm:flex-row justify-between items-center gap-3 mt-4">
-          <span class="text-xs text-base-content/40 text-center sm:text-left">
+          <span class="text-xs text-base-content/60 text-center sm:text-left">
            Address information appears on invoices and quotes
          </span>

          <button type="submit" class="btn btn-primary btn-sm w-full sm:w-auto">
-            <Icon name="heroicons:check" class="w-4 h-4" />
+            <Icon name="check" class="w-4 h-4" />
            Save Changes
          </button>
        </div>
@@ -231,13 +234,13 @@ const successType = url.searchParams.get('success');
    <div class="card-body p-4">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-sm font-semibold flex items-center gap-2">
-          <Icon name="heroicons:tag" class="w-4 h-4" />
+          <Icon name="tag" class="w-4 h-4" />
          Tags & Rates
        </h2>
-        <button onclick="document.getElementById('new_tag_modal').showModal()" class="btn btn-primary btn-xs">
-          <Icon name="heroicons:plus" class="w-3 h-3" />
+        <ModalButton client:load modalId="new_tag_modal" class="btn btn-primary btn-xs">
+          <Icon name="plus" class="w-3 h-3" />
          Add Tag
-        </button>
+        </ModalButton>
      </div>

      <p class="text-base-content/60 text-xs mb-4">
@@ -246,7 +249,7 @@ const successType = url.searchParams.get('success');

      {allTags.length === 0 ? (
        <div class="alert alert-info">
-          <Icon name="heroicons:information-circle" class="w-4 h-4" />
+          <Icon name="information-circle" class="w-4 h-4" />
          <div>
            <div class="font-semibold text-sm">No tags yet</div>
            <div class="text-xs">Create tags to add context and rates to your time entries.</div>
@@ -268,7 +271,7 @@ const successType = url.searchParams.get('success');
                  <td>
                    <div class="flex items-center gap-2">
                       {tag.color && (
-                        <div class="w-3 h-3 rounded-full" style={`background-color: ${tag.color}`}></div>
+                        <ColorDot client:load color={tag.color} class="w-3 h-3 rounded-full" />
                      )}
                      <span class="font-medium">{tag.name}</span>
                    </div>
@@ -277,22 +280,23 @@ const successType = url.searchParams.get('success');
                    {tag.rate ? (
                      <span class="font-mono text-sm">{new Intl.NumberFormat('en-US', { style: 'currency', currency: organization.defaultCurrency || 'USD' }).format(tag.rate / 100)}</span>
                    ) : (
-                      <span class="text-base-content/40 text-xs italic">No rate</span>
+                      <span class="text-base-content/60 text-xs italic">No rate</span>
                    )}
                  </td>
                  <td>
                    <div class="flex gap-1">
-                      <button
-                        onclick={`document.getElementById('edit_tag_modal_${tag.id}').showModal()`}
+                      <ModalButton
+                        client:load
+                        modalId={`edit_tag_modal_${tag.id}`}
                        class="btn btn-ghost btn-xs btn-square"
                      >
-                        <Icon name="heroicons:pencil" class="w-3 h-3" />
-                      </button>
-                       <form method="POST" action={`/api/tags/${tag.id}/delete`} onsubmit="return confirm('Are you sure you want to delete this tag?');">
+                        <Icon name="pencil" class="w-3 h-3" />
+                      </ModalButton>
+                       <ConfirmForm client:load message="Are you sure you want to delete this tag?" action={`/api/tags/${tag.id}/delete`}>
                        <button class="btn btn-ghost btn-xs btn-square text-error">
-                          <Icon name="heroicons:trash" class="w-3 h-3" />
+                          <Icon name="trash" class="w-3 h-3" />
                        </button>
-                      </form>
+                      </ConfirmForm>
                    </div>

                    {/* Edit Modal */}
@@ -311,10 +315,10 @@ const successType = url.searchParams.get('success');
                          <fieldset class="fieldset mb-4">
                            <legend class="fieldset-legend text-xs">Hourly Rate (cents)</legend>
                            <input type="number" name="rate" value={tag.rate || 0} min="0" class="input w-full" />
-                            <p class="text-xs text-base-content/40 mt-1">Enter rate in cents (e.g. 5000 = $50.00)</p>
+                            <p class="text-xs text-base-content/60 mt-1">Enter rate in cents (e.g. 5000 = $50.00)</p>
                          </fieldset>
                          <div class="modal-action">
-                             <button type="button" class="btn btn-sm" onclick={`document.getElementById('edit_tag_modal_${tag.id}').close()`}>Cancel</button>
+                             <ModalButton client:load modalId={`edit_tag_modal_${tag.id}`} action="close" class="btn btn-sm">Cancel</ModalButton>
                            <button type="submit" class="btn btn-primary btn-sm">Save</button>
                          </div>
                        </form>
@@ -349,10 +353,10 @@ const successType = url.searchParams.get('success');
        <fieldset class="fieldset mb-4">
          <legend class="fieldset-legend text-xs">Hourly Rate (cents)</legend>
          <input type="number" name="rate" value="0" min="0" class="input w-full" />
-          <p class="text-xs text-base-content/40 mt-1">Enter rate in cents (e.g. 5000 = $50.00)</p>
+          <p class="text-xs text-base-content/60 mt-1">Enter rate in cents (e.g. 5000 = $50.00)</p>
        </fieldset>
        <div class="modal-action">
-           <button type="button" class="btn btn-sm" onclick="document.getElementById('new_tag_modal').close()">Cancel</button>
+           <ModalButton client:load modalId="new_tag_modal" action="close" class="btn btn-sm">Cancel</ModalButton>
          <button type="submit" class="btn btn-primary btn-sm">Create Tag</button>
        </div>
      </form>
@@ -363,5 +367,4 @@ const successType = url.searchParams.get('success');
  </dialog>


-
 </DashboardLayout>
--- a/src/pages/dashboard/tracker.astro
+++ b/src/pages/dashboard/tracker.astro
@@ -1,8 +1,10 @@
 ---
 import DashboardLayout from '../../layouts/DashboardLayout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../../components/Icon.astro';
 import Timer from '../../components/Timer.vue';
 import ManualEntry from '../../components/ManualEntry.vue';
+import AutoSubmit from '../../components/AutoSubmit.vue';
+import ConfirmForm from '../../components/ConfirmForm.vue';
 import { db } from '../../db';
 import { timeEntries, clients, tags, users } from '../../db/schema';
 import { eq, desc, asc, and, sql, or, like } from 'drizzle-orm';
@@ -142,12 +144,12 @@ const paginationPages = getPaginationPages(page, totalPages);
  <h1 class="text-2xl font-extrabold tracking-tight mb-6">Time Tracker</h1>

  <!-- Tabs for Timer and Manual Entry -->
-  <div class="tabs tabs-lift mb-6">
+  <div class="tabs tabs-border mb-6">
    <input type="radio" name="tracker_tabs" class="tab" aria-label="Timer" checked="checked" />
-    <div class="tab-content bg-base-100 border-base-300 p-6">
+    <div class="tab-content border-base-content/20 p-6">
      {allClients.length === 0 ? (
        <div class="alert alert-warning flex flex-col sm:flex-row items-center gap-4">
-          <Icon name="heroicons:exclamation-triangle" class="stroke-current shrink-0 h-6 w-6" />
+          <Icon name="exclamation-triangle" class="stroke-current shrink-0 h-6 w-6" />
          <span class="flex-1 text-center sm:text-left">You need to create a client before tracking time.</span>
          <a href="/dashboard/clients/new" class="btn btn-sm btn-primary whitespace-nowrap">Add Client</a>
        </div>
@@ -167,10 +169,10 @@ const paginationPages = getPaginationPages(page, totalPages);
    </div>

    <input type="radio" name="tracker_tabs" class="tab" aria-label="Manual Entry" />
-    <div class="tab-content bg-base-100 border-base-300 p-6">
+    <div class="tab-content border-base-content/20 p-6">
      {allClients.length === 0 ? (
        <div class="alert alert-warning flex flex-col sm:flex-row items-center gap-4">
-          <Icon name="heroicons:exclamation-triangle" class="stroke-current shrink-0 h-6 w-6" />
+          <Icon name="exclamation-triangle" class="stroke-current shrink-0 h-6 w-6" />
          <span class="flex-1 text-center sm:text-left">You need to create a client before adding time entries.</span>
          <a href="/dashboard/clients/new" class="btn btn-sm btn-primary whitespace-nowrap">Add Client</a>
        </div>
@@ -206,48 +208,56 @@ const paginationPages = getPaginationPages(page, totalPages);

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Client</legend>
-          <select id="tracker-client" name="client" class="select w-full" onchange="this.form.submit()">
-            <option value="">All Clients</option>
-            {allClients.map(client => (
-              <option value={client.id} selected={filterClient === client.id}>
-                {client.name}
-              </option>
-            ))}
-          </select>
+          <AutoSubmit client:load>
+            <select id="tracker-client" name="client" class="select w-full">
+              <option value="">All Clients</option>
+              {allClients.map(client => (
+                <option value={client.id} selected={filterClient === client.id}>
+                  {client.name}
+                </option>
+              ))}
+            </select>
+          </AutoSubmit>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Status</legend>
-          <select id="tracker-status" name="status" class="select w-full" onchange="this.form.submit()">
-            <option value="" selected={filterStatus === ''}>All Entries</option>
-            <option value="completed" selected={filterStatus === 'completed'}>Completed</option>
-            <option value="running" selected={filterStatus === 'running'}>Running</option>
-          </select>
+          <AutoSubmit client:load>
+            <select id="tracker-status" name="status" class="select w-full">
+              <option value="" selected={filterStatus === ''}>All Entries</option>
+              <option value="completed" selected={filterStatus === 'completed'}>Completed</option>
+              <option value="running" selected={filterStatus === 'running'}>Running</option>
+            </select>
+          </AutoSubmit>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Entry Type</legend>
-          <select id="tracker-type" name="type" class="select w-full" onchange="this.form.submit()">
-            <option value="" selected={filterType === ''}>All Types</option>
-            <option value="timed" selected={filterType === 'timed'}>Timed</option>
-            <option value="manual" selected={filterType === 'manual'}>Manual</option>
-          </select>
+          <AutoSubmit client:load>
+            <select id="tracker-type" name="type" class="select w-full">
+              <option value="" selected={filterType === ''}>All Types</option>
+              <option value="timed" selected={filterType === 'timed'}>Timed</option>
+              <option value="manual" selected={filterType === 'manual'}>Manual</option>
+            </select>
+          </AutoSubmit>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Sort By</legend>
-          <select id="tracker-sort" name="sort" class="select w-full" onchange="this.form.submit()">
-            <option value="start-desc" selected={sortBy === 'start-desc'}>Newest First</option>
-            <option value="start-asc" selected={sortBy === 'start-asc'}>Oldest First</option>
-            <option value="duration-desc" selected={sortBy === 'duration-desc'}>Longest Duration</option>
-            <option value="duration-asc" selected={sortBy === 'duration-asc'}>Shortest Duration</option>
-          </select>
+          <AutoSubmit client:load>
+            <select id="tracker-sort" name="sort" class="select w-full">
+              <option value="start-desc" selected={sortBy === 'start-desc'}>Newest First</option>
+              <option value="start-asc" selected={sortBy === 'start-asc'}>Oldest First</option>
+              <option value="duration-desc" selected={sortBy === 'duration-desc'}>Longest Duration</option>
+              <option value="duration-asc" selected={sortBy === 'duration-asc'}>Shortest Duration</option>
+            </select>
+          </AutoSubmit>
        </fieldset>

        <input type="hidden" name="page" value="1" />
        <div class="flex items-end md:col-span-2 lg:col-span-1">
          <button type="submit" class="btn btn-primary btn-sm w-full">
-            <Icon name="heroicons:magnifying-glass" class="w-4 h-4" />
+            <Icon name="magnifying-glass" class="w-4 h-4" />
            Search
          </button>
        </div>
@@ -259,12 +269,12 @@ const paginationPages = getPaginationPages(page, totalPages);
    <div class="card-body p-4">
      <div class="flex justify-between items-center mb-3">
        <h2 class="text-sm font-semibold flex items-center gap-2">
-          <Icon name="heroicons:list-bullet" class="w-4 h-4" />
+          <Icon name="list-bullet" class="w-4 h-4" />
          Time Entries ({totalCount?.count || 0} total)
        </h2>
        {(filterClient || filterStatus || filterType || searchTerm) && (
          <a href="/dashboard/tracker" class="btn btn-xs btn-ghost">
-            <Icon name="heroicons:x-mark" class="w-3 h-3" />
+            <Icon name="x-mark" class="w-3 h-3" />
            Clear Filters
          </a>
        )}
@@ -289,12 +299,12 @@ const paginationPages = getPaginationPages(page, totalPages);
                <td>
                  {entry.isManual ? (
                    <span class="badge badge-info badge-xs gap-1" title="Manual Entry">
-                      <Icon name="heroicons:pencil" class="w-3 h-3" />
+                      <Icon name="pencil" class="w-3 h-3" />
                      Manual
                    </span>
                  ) : (
                    <span class="badge badge-success badge-xs gap-1" title="Timed Entry">
-                      <Icon name="heroicons:clock" class="w-3 h-3" />
+                      <Icon name="clock" class="w-3 h-3" />
                      Timed
                    </span>
                  )}
@@ -304,7 +314,7 @@ const paginationPages = getPaginationPages(page, totalPages);
                <td>{entryUser?.name || 'Unknown'}</td>
                <td class="whitespace-nowrap">
                  {entry.startTime.toLocaleDateString()}<br/>
-                  <span class="text-xs text-base-content/40">
+                    <span class="text-xs text-base-content/60">
                    {entry.startTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                  </span>
                </td>
@@ -312,7 +322,7 @@ const paginationPages = getPaginationPages(page, totalPages);
                  {entry.endTime ? (
                    <>
                      {entry.endTime.toLocaleDateString()}<br/>
-                      <span class="text-xs text-base-content/40">
+                      <span class="text-xs text-base-content/60">
                        {entry.endTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                      </span>
                    </>
@@ -322,15 +332,14 @@ const paginationPages = getPaginationPages(page, totalPages);
                </td>
                <td class="font-mono font-semibold text-primary text-sm">{formatTimeRange(entry.startTime, entry.endTime)}</td>
                <td>
-                  <form method="POST" action={`/api/time-entries/${entry.id}/delete`} class="inline">
+                  <ConfirmForm client:load message="Are you sure you want to delete this entry?" action={`/api/time-entries/${entry.id}/delete`} class="inline">
                    <button
                      type="submit"
                      class="btn btn-ghost btn-xs text-error"
-                      onclick="return confirm('Are you sure you want to delete this entry?')"
                    >
-                      <Icon name="heroicons:trash" class="w-3.5 h-3.5" />
+                      <Icon name="trash" class="w-3.5 h-3.5" />
                    </button>
-                  </form>
+                  </ConfirmForm>
                </td>
              </tr>
            ))}
@@ -345,7 +354,7 @@ const paginationPages = getPaginationPages(page, totalPages);
            href={`?page=${Math.max(1, page - 1)}${filterClient ? `&client=${filterClient}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${filterType ? `&type=${filterType}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
            class={`btn btn-xs ${page === 1 ? 'btn-disabled' : ''}`}
          >
-            <Icon name="heroicons:chevron-left" class="w-3 h-3" />
+            <Icon name="chevron-left" class="w-3 h-3" />
            Prev
          </a>

@@ -365,7 +374,7 @@ const paginationPages = getPaginationPages(page, totalPages);
            class={`btn btn-xs ${page === totalPages ? 'btn-disabled' : ''}`}
          >
            Next
-            <Icon name="heroicons:chevron-right" class="w-3 h-3" />
+            <Icon name="chevron-right" class="w-3 h-3" />
          </a>
        </div>
      )}
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Icon from '../components/Icon.astro';

 if (Astro.locals.user) {
  return Astro.redirect('/dashboard');
@@ -22,9 +23,7 @@ if (Astro.locals.user) {
        <div class="flex gap-3 justify-center flex-wrap">
          <a href="/signup" class="btn btn-primary btn-lg px-8">
            Get Started
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-              <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
-            </svg>
+            <Icon name="arrow-right" class="h-5 w-5" />
          </a>
          <a href="/login" class="btn btn-ghost btn-lg px-8">Login</a>
        </div>
@@ -32,14 +31,12 @@ if (Astro.locals.user) {
    </div>

    <!-- Features -->
-    <div class="bg-base-200/50 border-t border-base-200 px-4 py-16 sm:py-20">
+    <div class="bg-base-200 border-t border-base-content/20 px-4 py-16 sm:py-20">
      <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="card bg-base-100 card-border">
          <div class="card-body">
-            <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
-              </svg>
+            <div class="w-10 h-10 rounded-lg bg-base-200 flex items-center justify-center mb-2">
+              <Icon name="bolt" class="h-5 w-5 text-primary" />
            </div>
            <h3 class="card-title text-base">Lightning Fast</h3>
            <p class="text-sm text-base-content/60">Track tasks with a single click. Start, stop, and organize in seconds.</p>
@@ -47,10 +44,8 @@ if (Astro.locals.user) {
        </div>
        <div class="card bg-base-100 card-border">
          <div class="card-body">
-            <div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center mb-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
-              </svg>
+            <div class="w-10 h-10 rounded-lg bg-base-200 flex items-center justify-center mb-2">
+              <Icon name="chart-bar" class="h-5 w-5 text-info" />
            </div>
            <h3 class="card-title text-base">Detailed Reports</h3>
            <p class="text-sm text-base-content/60">Get actionable insights with charts, filters, and CSV exports.</p>
@@ -58,10 +53,8 @@ if (Astro.locals.user) {
        </div>
        <div class="card bg-base-100 card-border">
          <div class="card-body">
-            <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-accent" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
-              </svg>
+            <div class="w-10 h-10 rounded-lg bg-base-200 flex items-center justify-center mb-2">
+              <Icon name="users" class="h-5 w-5 text-accent" />
            </div>
            <h3 class="card-title text-base">Team Collaboration</h3>
            <p class="text-sm text-base-content/60">Built for teams with roles, permissions, and shared workspaces.</p>
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../components/Icon.astro';
 import PasskeyLogin from '../components/auth/PasskeyLogin.vue';

 if (Astro.locals.user) {
@@ -18,7 +18,7 @@ const errorMessage =

 <Layout title="Login - Chronus">
  <div class="flex justify-center items-center flex-1 bg-base-100">
-    <div class="card card-border bg-base-100 w-full max-w-sm mx-4">
+    <div class="card card-border bg-base-200 w-full max-w-sm mx-4">
      <div class="card-body gap-0">
        <img src="/logo.webp" alt="Chronus" class="h-14 w-14 mx-auto mb-3" />
        <h2 class="text-2xl font-extrabold tracking-tight text-center">Welcome Back</h2>
@@ -26,7 +26,7 @@ const errorMessage =

        {errorMessage && (
          <div role="alert" class="alert alert-error mb-4 text-sm">
-            <Icon name="heroicons:exclamation-circle" class="w-5 h-5" />
+            <Icon name="exclamation-circle" class="w-5 h-5" />
            <span>{errorMessage}</span>
          </div>
        )}
--- a/src/pages/signup.astro
+++ b/src/pages/signup.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import { Icon } from 'astro-icon/components';
+import Icon from '../components/Icon.astro';
 import { db } from '../db';
 import { siteSettings, users } from '../db/schema';
 import { eq, count } from 'drizzle-orm';
@@ -34,7 +34,7 @@ const errorMessage =

 <Layout title="Sign Up - Chronus">
  <div class="flex justify-center items-center flex-1 bg-base-100">
-    <div class="card card-border bg-base-100 w-full max-w-sm mx-4">
+    <div class="card card-border bg-base-200 w-full max-w-sm mx-4">
      <div class="card-body gap-0">
        <img src="/logo.webp" alt="Chronus" class="h-14 w-14 mx-auto mb-3" />
        <h2 class="text-2xl font-extrabold tracking-tight text-center">Create Account</h2>
@@ -42,7 +42,7 @@ const errorMessage =

        {errorMessage && (
          <div role="alert" class="alert alert-error mb-4 text-sm">
-            <Icon name="heroicons:exclamation-circle" class="w-5 h-5" />
+            <Icon name="exclamation-circle" class="w-5 h-5" />
            <span>{errorMessage}</span>
          </div>
        )}
@@ -50,7 +50,7 @@ const errorMessage =
        {registrationDisabled ? (
          <>
            <div class="alert alert-warning text-sm">
-              <Icon name="heroicons:exclamation-triangle" class="w-5 h-5" />
+              <Icon name="exclamation-triangle" class="w-5 h-5" />
              <span>Registration is currently disabled by the site administrator.</span>
            </div>
            <div class="divider text-xs"></div>
--- a/src/pages/uploads/[...path].ts
+++ b/src/pages/uploads/[...path].ts
@@ -52,8 +52,6 @@ export const GET: APIRoute = async ({ params }) => {
      case ".gif":
        contentType = "image/gif";
        break;
-      // SVG excluded to prevent stored XSS
-      // WebP omitted — not supported in PDF generation
    }

    return new Response(fileContent, {
--- a/src/pdf/generateInvoicePDF.ts
+++ b/src/pdf/generateInvoicePDF.ts
@@ -305,7 +305,6 @@ export function createInvoiceDocument(props: InvoiceDocumentProps) {
              if (organization.logoUrl) {
                try {
                  let logoPath;
-                  // Handle uploads directory which might be external to public/
                  if (organization.logoUrl.startsWith("/uploads/")) {
                    const dataDir = process.env.DATA_DIR
                      ? process.env.DATA_DIR
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,9 +1,7 @@
@import "tailwindcss";
@plugin "daisyui" {
-  themes: false;
+  themes: sunset --default, winter;
 }
-@plugin "./theme-dark.ts";
-@plugin "./theme-light.ts";

 /* Smoother transitions globally */
@layer base {
@@ -15,3 +13,8 @@
    transition: none;
  }
 }
+
+/* Override DaisyUI card-border to use a visible border in both themes */
+.card-border {
+  border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+}
--- a/src/styles/theme-dark.ts
+++ b/src/styles/theme-dark.ts
@@ -1,9 +0,0 @@
-import { createCatppuccinPlugin } from "@catppuccin/daisyui";
-
-export default createCatppuccinPlugin(
-  "macchiato",
-  {},
-  {
-    default: true,
-  },
-);
--- a/src/styles/theme-light.ts
+++ b/src/styles/theme-light.ts
@@ -1,9 +0,0 @@
-import { createCatppuccinPlugin } from "@catppuccin/daisyui";
-
-export default createCatppuccinPlugin(
-  "latte",
-  {},
-  {
-    default: false,
-  },
-);
--- a/src/utils/invoice.ts
+++ b/src/utils/invoice.ts
@@ -34,7 +34,6 @@ export async function recalculateInvoiceTotals(invoiceId: string) {
  if (discountType === "percentage") {
    discountAmount = Math.round(subtotal * (discountValue / 100));
  } else {
-    // Fixed amount is assumed to be in cents
    discountAmount = Math.round(discountValue);
  }
Author	SHA1	Message	Date
Atridad Lahiji	76d3e0cd41	Deps + Bun All checks were successful Docker Deploy / build-and-push (push) Successful in 6m9s Details	2026-03-03 13:30:43 -07:00
Atridad Lahiji	42492be284	2.5.0 All checks were successful Docker Deploy / build-and-push (push) Successful in 4m7s Details	2026-02-14 01:51:57 -07:00
Atridad Lahiji	cd6ececa27	Improved logo	2026-02-14 01:51:43 -07:00
Atridad Lahiji	be5dafe539	Updated the logo All checks were successful Docker Deploy / build-and-push (push) Successful in 3m50s Details	2026-02-14 01:47:14 -07:00
Atridad Lahiji	6233380682	Cleaned up the theme a bit	2026-02-14 01:11:01 -07:00
Atridad Lahiji	e99e042eea	Fixed Origin mismatch for passkeys All checks were successful Docker Deploy / build-and-push (push) Successful in 4m9s Details	2026-02-13 11:35:06 -07:00
Atridad Lahiji	705358d44c	Please... All checks were successful Docker Deploy / build-and-push (push) Successful in 3m55s Details	2026-02-13 11:18:20 -07:00
Atridad Lahiji	44de064d68	Attempted fix for auth All checks were successful Docker Deploy / build-and-push (push) Successful in 4m56s Details	2026-02-13 10:55:35 -07:00
Atridad Lahiji	5f7b36582c	Fixed All checks were successful Docker Deploy / build-and-push (push) Successful in 4m30s Details	2026-02-12 23:04:27 -07:00
Atridad Lahiji	25c9d77599	Oops CRF was too strong. All checks were successful Docker Deploy / build-and-push (push) Successful in 4m19s Details	2026-02-12 16:31:36 -07:00
Atridad Lahiji	3e17e58c9a	Strengthened CRF, added more vue, and removed viewtransitions All checks were successful Docker Deploy / build-and-push (push) Successful in 4m42s Details	2026-02-12 16:19:59 -07:00
Atridad Lahiji	e5c5d68739	Fix logout bug with viewtransitions All checks were successful Docker Deploy / build-and-push (push) Successful in 4m24s Details	2026-02-12 15:31:28 -07:00
Atridad Lahiji	c7d880e09d	Docker optimizations All checks were successful Docker Deploy / build-and-push (push) Successful in 4m0s Details	2026-02-12 15:11:54 -07:00
Atridad Lahiji	4666bc42cf	Deps All checks were successful Docker Deploy / build-and-push (push) Successful in 4m29s Details	2026-02-12 14:31:09 -07:00
Atridad Lahiji	1c70626f5a	Icon refactor	2026-02-12 14:29:12 -07:00