chore(ci): Bump version to 2025.9.11

fix(frontend): Add ignore rules for eslint on shadcn components.
feat(frontend): Complete shadcn/ui migration with dark mode support and analytics updates.
2025-12-29 02:49:13 +00:00 · 2025-09-15 01:49:51 +01:00 · 2025-09-15 01:47:50 +01:00 · 2025-09-15 01:30:34 +01:00 · 2025-09-15 00:21:59 +01:00 · 2025-09-14 23:57:23 +01:00
59 changed files with 4705 additions and 1832 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,76 @@

+## 2025.9.11 (2025/09/15)
+
+### Bug Fixes
+
+- **config:** Add Pydantic validation and fix telegram config field mappings. ([2c6e0995](https://github.com/elisiariocouto/leggen/commit/2c6e0995968c9c9917992fd15ec10a89933c0c21))
+- **config:** Fix example config file. ([d09cf6d0](https://github.com/elisiariocouto/leggen/commit/d09cf6d04ccb6233981f273cd88e0b8ffe074d71))
+- **docs:** Remove test files and update gitignore ([692bee57](https://github.com/elisiariocouto/leggen/commit/692bee574ee8de16496a3c733bad53be3b256990))
+- **frontend:** Align balance calculation between sidebar and Analytics page ([35b6d98e](https://github.com/elisiariocouto/leggen/commit/35b6d98e6a37b1e9caf8a232ffe66380e7203cad))
+- **frontend:** Add ignore rules for eslint on shadcn components. ([74a700ff](https://github.com/elisiariocouto/leggen/commit/74a700ff87b2504c3d394cddd9935c56c3c7a00d))
+-  Resolve all CI failures - linting, typing, and test issues ([c8f0a103](https://github.com/elisiariocouto/leggen/commit/c8f0a103c6ccdb722bbab1ac6973827b41fddc19))
+
+
+### Features
+
+- **analytics:** Fix transaction limits and improve chart legends ([e136fc4b](https://github.com/elisiariocouto/leggen/commit/e136fc4b75243b35a77bc0bf0260808006987d7a))
+- **docs:** Add comprehensive copilot agent setup instructions ([c6ac4455](https://github.com/elisiariocouto/leggen/commit/c6ac4455f848dd429100dd3fc6d43de8c4e5aa6b))
+- **docs:** Add configuration file setup to agent instructions ([482f16c7](https://github.com/elisiariocouto/leggen/commit/482f16c77eef1f477ba49475fe30f809de9a05d7))
+- **frontend:** Enhance transactions page with advanced filtering and UI improvements. ([969776fb](https://github.com/elisiariocouto/leggen/commit/969776fb53261acca2f77b0c761584e201fde118))
+- **frontend:** Replace heavy filter UI with modern shadcn/ui inline filter bar. ([eb27f191](https://github.com/elisiariocouto/leggen/commit/eb27f19196d92a6ae5220b81709fded499a12f4f))
+- **frontend:** Complete shadcn/ui migration with dark mode support and analytics updates. ([66db34c7](https://github.com/elisiariocouto/leggen/commit/66db34c712300ff4b5dbe7e06246f16d6f6a8469))
+
+
+### Miscellaneous Tasks
+
+-  Sort imports, fix deprecated pydantic option. ([2467cb2f](https://github.com/elisiariocouto/leggen/commit/2467cb2f5af07a7262b3221bf61b58ad4017659a))
+-  Check import order using ruff. ([da98b7b2](https://github.com/elisiariocouto/leggen/commit/da98b7b2b77c5b37792dedff11f8256da3b086f7))
+
+
+### Refactor
+
+- **analytics:** Simplify analytics endpoints and eliminate client-side processing. ([077e2bb1](https://github.com/elisiariocouto/leggen/commit/077e2bb1adbdb73ffde17635bd918cd40fe7fb5a))
+-  Unify leggen and leggend packages into single leggen package ([318ca517](https://github.com/elisiariocouto/leggen/commit/318ca517f7ea599b37a8deb47ad80218fbae008f))
+-  Consolidate database layer and eliminate wrapper complexity. ([5ae3a51d](https://github.com/elisiariocouto/leggen/commit/5ae3a51d8138b9aa28dbceabf575ab2577402e70))
+
+
+
+## 2025.9.11 (2025/09/15)
+
+### Bug Fixes
+
+- **config:** Add Pydantic validation and fix telegram config field mappings. ([2c6e0995](https://github.com/elisiariocouto/leggen/commit/2c6e0995968c9c9917992fd15ec10a89933c0c21))
+- **config:** Fix example config file. ([d09cf6d0](https://github.com/elisiariocouto/leggen/commit/d09cf6d04ccb6233981f273cd88e0b8ffe074d71))
+- **docs:** Remove test files and update gitignore ([692bee57](https://github.com/elisiariocouto/leggen/commit/692bee574ee8de16496a3c733bad53be3b256990))
+- **frontend:** Align balance calculation between sidebar and Analytics page ([35b6d98e](https://github.com/elisiariocouto/leggen/commit/35b6d98e6a37b1e9caf8a232ffe66380e7203cad))
+- **frontend:** Add ignore rules for eslint on shadcn components. ([74a700ff](https://github.com/elisiariocouto/leggen/commit/74a700ff87b2504c3d394cddd9935c56c3c7a00d))
+-  Resolve all CI failures - linting, typing, and test issues ([c8f0a103](https://github.com/elisiariocouto/leggen/commit/c8f0a103c6ccdb722bbab1ac6973827b41fddc19))
+
+
+### Features
+
+- **analytics:** Fix transaction limits and improve chart legends ([e136fc4b](https://github.com/elisiariocouto/leggen/commit/e136fc4b75243b35a77bc0bf0260808006987d7a))
+- **docs:** Add comprehensive copilot agent setup instructions ([c6ac4455](https://github.com/elisiariocouto/leggen/commit/c6ac4455f848dd429100dd3fc6d43de8c4e5aa6b))
+- **docs:** Add configuration file setup to agent instructions ([482f16c7](https://github.com/elisiariocouto/leggen/commit/482f16c77eef1f477ba49475fe30f809de9a05d7))
+- **frontend:** Enhance transactions page with advanced filtering and UI improvements. ([969776fb](https://github.com/elisiariocouto/leggen/commit/969776fb53261acca2f77b0c761584e201fde118))
+- **frontend:** Replace heavy filter UI with modern shadcn/ui inline filter bar. ([eb27f191](https://github.com/elisiariocouto/leggen/commit/eb27f19196d92a6ae5220b81709fded499a12f4f))
+- **frontend:** Complete shadcn/ui migration with dark mode support and analytics updates. ([66db34c7](https://github.com/elisiariocouto/leggen/commit/66db34c712300ff4b5dbe7e06246f16d6f6a8469))
+
+
+### Miscellaneous Tasks
+
+-  Sort imports, fix deprecated pydantic option. ([2467cb2f](https://github.com/elisiariocouto/leggen/commit/2467cb2f5af07a7262b3221bf61b58ad4017659a))
+-  Check import order using ruff. ([da98b7b2](https://github.com/elisiariocouto/leggen/commit/da98b7b2b77c5b37792dedff11f8256da3b086f7))
+
+
+### Refactor
+
+- **analytics:** Simplify analytics endpoints and eliminate client-side processing. ([077e2bb1](https://github.com/elisiariocouto/leggen/commit/077e2bb1adbdb73ffde17635bd918cd40fe7fb5a))
+-  Unify leggen and leggend packages into single leggen package ([318ca517](https://github.com/elisiariocouto/leggen/commit/318ca517f7ea599b37a8deb47ad80218fbae008f))
+-  Consolidate database layer and eliminate wrapper complexity. ([5ae3a51d](https://github.com/elisiariocouto/leggen/commit/5ae3a51d8138b9aa28dbceabf575ab2577402e70))
+
+
+
 ## 2025.9.10 (2025/09/13)

 ### Miscellaneous Tasks
--- a/frontend/.claude/settings.local.json
+++ b/frontend/.claude/settings.local.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": ["Bash(find:*)"],
+    "deny": [],
+    "ask": []
+  }
+}
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -19,5 +19,17 @@ export default tseslint.config([
      ecmaVersion: 2020,
      globals: globals.browser,
    },
+    rules: {
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+  {
+    files: ["src/components/**/*.{ts,tsx}", "src/contexts/**/*.{ts,tsx}"],
+    rules: {
+      "react-refresh/only-export-components": "off",
+    },
  },
 ]);
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,10 @@
      "name": "frontend",
      "version": "0.0.0",
      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-slot": "^1.2.3",
        "@tailwindcss/forms": "^0.5.10",
        "@tanstack/react-query": "^5.87.1",
        "@tanstack/react-router": "^1.131.36",
@@ -15,13 +19,19 @@
        "@tanstack/router-cli": "^1.131.36",
        "autoprefixer": "^10.4.21",
        "axios": "^1.11.0",
+        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "date-fns": "^4.1.0",
        "lucide-react": "^0.542.0",
        "postcss": "^8.5.6",
        "react": "^19.1.1",
+        "react-day-picker": "^9.10.0",
        "react-dom": "^19.1.1",
        "recharts": "^3.2.0",
-        "tailwindcss": "^3.4.17"
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss": "^3.4.17",
+        "tailwindcss-animate": "^1.0.7"
      },
      "devDependencies": {
        "@eslint/js": "^9.33.0",
@@ -487,6 +497,12 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@date-fns/tz": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+      "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+      "license": "MIT"
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.25.9",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
@@ -1057,6 +1073,44 @@
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
    "node_modules/@humanfs/core": {
      "version": "0.19.1",
      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1216,6 +1270,599 @@
        "node": ">=14"
      }
    },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
+      "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
    "node_modules/@reduxjs/toolkit": {
      "version": "2.9.0",
      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.9.0.tgz",
@@ -1999,7 +2646,7 @@
      "version": "19.1.9",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "peerDependencies": {
        "@types/react": "^19.0.0"
@@ -2411,6 +3058,18 @@
      "dev": true,
      "license": "Python-2.0"
    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/ast-types": {
      "version": "0.16.1",
      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
@@ -2666,6 +3325,18 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
    "node_modules/cliui": {
      "version": "8.0.1",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -2747,6 +3418,22 @@
        "node": ">=6"
      }
    },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2959,6 +3646,22 @@
        "node": ">=12"
      }
    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
    "node_modules/debug": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -2998,6 +3701,12 @@
        "node": ">=0.4.0"
      }
    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
    "node_modules/didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3618,6 +4327,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/get-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -4620,6 +5338,27 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-day-picker": {
+      "version": "9.10.0",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.10.0.tgz",
+      "integrity": "sha512-tedecLSd+fpSN+J08601MaMsf122nxtqZXxB6lwX37qFoLtuPNuRJN8ylxFjLhyJS1kaLfAqL1GUkSLd2BMrpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "^4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/react-dom": {
      "version": "19.1.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
@@ -4672,6 +5411,75 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
+      "integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5131,6 +5939,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/tailwind-merge": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
    "node_modules/tailwindcss": {
      "version": "3.4.17",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
@@ -5168,6 +5986,15 @@
        "node": ">=14.0.0"
      }
    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
    "node_modules/tailwindcss/node_modules/glob-parent": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -5437,6 +6264,49 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/use-sync-external-store": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,10 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
    "@tailwindcss/forms": "^0.5.10",
    "@tanstack/react-query": "^5.87.1",
    "@tanstack/react-router": "^1.131.36",
@@ -17,13 +21,19 @@
    "@tanstack/router-cli": "^1.131.36",
    "autoprefixer": "^10.4.21",
    "axios": "^1.11.0",
+    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
    "lucide-react": "^0.542.0",
    "postcss": "^8.5.6",
    "react": "^19.1.1",
+    "react-day-picker": "^9.10.0",
    "react-dom": "^19.1.1",
    "recharts": "^3.2.0",
-    "tailwindcss": "^3.4.17"
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@eslint/js": "^9.33.0",
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,23 +0,0 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import Dashboard from "./components/Dashboard";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: 1,
-    },
-  },
-});
-
-function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <div className="min-h-screen bg-gray-50">
-        <Dashboard />
-      </div>
-    </QueryClientProvider>
-  );
-}
-
-export default App;
--- a/frontend/src/components/AccountsOverview.tsx
+++ b/frontend/src/components/AccountsOverview.tsx
@@ -13,38 +13,47 @@ import {
 } from "lucide-react";
 import { apiClient } from "../lib/api";
 import { formatCurrency, formatDate } from "../lib/utils";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+import { Button } from "./ui/button";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import LoadingSpinner from "./LoadingSpinner";
 import type { Account, Balance } from "../types/api";

 // Helper function to get status indicator color and styles
 const getStatusIndicator = (status: string) => {
  const statusLower = status.toLowerCase();
-  
+
  switch (statusLower) {
-    case 'ready':
+    case "ready":
      return {
-        color: 'bg-green-500',
-        tooltip: 'Ready',
+        color: "bg-green-500",
+        tooltip: "Ready",
      };
-    case 'pending':
+    case "pending":
      return {
-        color: 'bg-yellow-500',
-        tooltip: 'Pending',
+        color: "bg-yellow-500",
+        tooltip: "Pending",
      };
-    case 'error':
-    case 'failed':
+    case "error":
+    case "failed":
      return {
-        color: 'bg-red-500',
-        tooltip: 'Error',
+        color: "bg-red-500",
+        tooltip: "Error",
      };
-    case 'inactive':
+    case "inactive":
      return {
-        color: 'bg-gray-500',
-        tooltip: 'Inactive',
+        color: "bg-gray-500",
+        tooltip: "Inactive",
      };
    default:
      return {
-        color: 'bg-blue-500',
+        color: "bg-blue-500",
        tooltip: status,
      };
  }
@@ -105,35 +114,28 @@ export default function AccountsOverview() {

  if (accountsLoading) {
    return (
-      <div className="bg-white rounded-lg shadow">
+      <Card>
        <LoadingSpinner message="Loading accounts..." />
-      </div>
+      </Card>
    );
  }

  if (accountsError) {
    return (
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center justify-center text-center">
-          <div>
-            <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              Failed to load accounts
-            </h3>
-            <p className="text-gray-600 mb-4">
-              Unable to connect to the Leggen API. Please check your
-              configuration and ensure the API server is running.
-            </p>
-            <button
-              onClick={() => refetchAccounts()}
-              className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-            >
-              <RefreshCw className="h-4 w-4 mr-2" />
-              Retry
-            </button>
-          </div>
-        </div>
-      </div>
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Failed to load accounts</AlertTitle>
+        <AlertDescription className="space-y-3">
+          <p>
+            Unable to connect to the Leggen API. Please check your configuration
+            and ensure the API server is running.
+          </p>
+          <Button onClick={() => refetchAccounts()} variant="outline" size="sm">
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Retry
+          </Button>
+        </AlertDescription>
+      </Alert>
    );
  }

@@ -151,213 +153,229 @@ export default function AccountsOverview() {
    <div className="space-y-6">
      {/* Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-600">Total Balance</p>
-              <p className="text-2xl font-bold text-gray-900">
-                {formatCurrency(totalBalance)}
-              </p>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  Total Balance
+                </p>
+                <p className="text-2xl font-bold text-foreground">
+                  {formatCurrency(totalBalance)}
+                </p>
+              </div>
+              <div className="p-3 bg-green-100 dark:bg-green-900/20 rounded-full">
+                <TrendingUp className="h-6 w-6 text-green-600" />
+              </div>
            </div>
-            <div className="p-3 bg-green-100 rounded-full">
-              <TrendingUp className="h-6 w-6 text-green-600" />
-            </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>

-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-600">
-                Total Accounts
-              </p>
-              <p className="text-2xl font-bold text-gray-900">
-                {totalAccounts}
-              </p>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  Total Accounts
+                </p>
+                <p className="text-2xl font-bold text-foreground">
+                  {totalAccounts}
+                </p>
+              </div>
+              <div className="p-3 bg-blue-100 dark:bg-blue-900/20 rounded-full">
+                <CreditCard className="h-6 w-6 text-blue-600" />
+              </div>
            </div>
-            <div className="p-3 bg-blue-100 rounded-full">
-              <CreditCard className="h-6 w-6 text-blue-600" />
-            </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>

-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-600">
-                Connected Banks
-              </p>
-              <p className="text-2xl font-bold text-gray-900">{uniqueBanks}</p>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  Connected Banks
+                </p>
+                <p className="text-2xl font-bold text-foreground">
+                  {uniqueBanks}
+                </p>
+              </div>
+              <div className="p-3 bg-purple-100 dark:bg-purple-900/20 rounded-full">
+                <Building2 className="h-6 w-6 text-purple-600" />
+              </div>
            </div>
-            <div className="p-3 bg-purple-100 rounded-full">
-              <Building2 className="h-6 w-6 text-purple-600" />
-            </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>
      </div>

      {/* Accounts List */}
-      <div className="bg-white rounded-lg shadow">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <h3 className="text-lg font-medium text-gray-900">Bank Accounts</h3>
-          <p className="text-sm text-gray-600">
-            Manage your connected bank accounts
-          </p>
-        </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bank Accounts</CardTitle>
+          <CardDescription>Manage your connected bank accounts</CardDescription>
+        </CardHeader>

        {!accounts || accounts.length === 0 ? (
-          <div className="p-6 text-center">
-            <CreditCard className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
+          <CardContent className="p-6 text-center">
+            <CreditCard className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-foreground mb-2">
              No accounts found
            </h3>
-            <p className="text-gray-600">
+            <p className="text-muted-foreground">
              Connect your first bank account to get started with Leggen.
            </p>
-          </div>
+          </CardContent>
        ) : (
-          <div className="divide-y divide-gray-200">
-            {accounts.map((account) => {
-              // Get balance from account's balances array or fallback to balances query
-              const accountBalance = account.balances?.[0];
-              const fallbackBalance = balances?.find(
-                (b) => b.account_id === account.id,
-              );
-              const balance =
-                accountBalance?.amount || fallbackBalance?.balance_amount || 0;
-              const currency =
-                accountBalance?.currency ||
-                fallbackBalance?.currency ||
-                account.currency ||
-                "EUR";
-              const isPositive = balance >= 0;
+          <CardContent className="p-0">
+            <div className="divide-y divide-border">
+              {accounts.map((account) => {
+                // Get balance from account's balances array or fallback to balances query
+                const accountBalance = account.balances?.[0];
+                const fallbackBalance = balances?.find(
+                  (b) => b.account_id === account.id,
+                );
+                const balance =
+                  accountBalance?.amount ||
+                  fallbackBalance?.balance_amount ||
+                  0;
+                const currency =
+                  accountBalance?.currency ||
+                  fallbackBalance?.currency ||
+                  account.currency ||
+                  "EUR";
+                const isPositive = balance >= 0;

-              return (
-                <div
-                  key={account.id}
-                  className="p-4 sm:p-6 hover:bg-gray-50 transition-colors"
-                >
-                  {/* Mobile layout - stack vertically */}
-                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
-                    <div className="flex items-start sm:items-center space-x-3 sm:space-x-4 min-w-0 flex-1">
-                      <div className="flex-shrink-0 p-2 sm:p-3 bg-gray-100 rounded-full">
-                        <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-gray-600" />
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        {editingAccountId === account.id ? (
-                          <div className="space-y-2">
-                            <div className="flex items-center space-x-2">
-                              <input
-                                type="text"
-                                value={editingName}
-                                onChange={(e) => setEditingName(e.target.value)}
-                                className="flex-1 px-3 py-1 text-base sm:text-lg font-medium border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                                placeholder="Account name"
-                                name="search"
-                                autoComplete="off"
-                                onKeyDown={(e) => {
-                                  if (e.key === "Enter") handleEditSave();
-                                  if (e.key === "Escape") handleEditCancel();
-                                }}
-                                autoFocus
-                              />
-                              <button
-                                onClick={handleEditSave}
-                                disabled={
-                                  !editingName.trim() ||
-                                  updateAccountMutation.isPending
-                                }
-                                className="p-1 text-green-600 hover:text-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
-                                title="Save changes"
-                              >
-                                <Check className="h-4 w-4" />
-                              </button>
-                              <button
-                                onClick={handleEditCancel}
-                                className="p-1 text-gray-600 hover:text-gray-700"
-                                title="Cancel editing"
-                              >
-                                <X className="h-4 w-4" />
-                              </button>
-                            </div>
-                            <p className="text-sm text-gray-600 truncate">
-                              {account.institution_id}
-                            </p>
-                          </div>
-                        ) : (
-                          <div>
-                            <div className="flex items-center space-x-2 min-w-0">
-                              <h4 className="text-base sm:text-lg font-medium text-gray-900 truncate">
-                                {account.name || "Unnamed Account"}
-                              </h4>
-                              <button
-                                onClick={() => handleEditStart(account)}
-                                className="flex-shrink-0 p-1 text-gray-400 hover:text-gray-600 transition-colors"
-                                title="Edit account name"
-                              >
-                                <Edit2 className="h-4 w-4" />
-                              </button>
-                            </div>
-                            <p className="text-sm text-gray-600 truncate">
-                              {account.institution_id}
-                            </p>
-                            {account.iban && (
-                              <p className="text-xs text-gray-500 mt-1 font-mono break-all sm:break-normal">
-                                IBAN: {account.iban}
-                              </p>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Balance and date section */}
-                    <div className="flex items-center justify-between sm:flex-col sm:items-end sm:text-right flex-shrink-0">
-                      {/* Mobile: date/status on left, balance on right */}
-                      {/* Desktop: balance on top, date/status on bottom */}
-                      
-                      {/* Date and status indicator - left on mobile, bottom on desktop */}
-                      <div className="flex items-center space-x-2 order-1 sm:order-2">
-                        <div 
-                          className={`w-3 h-3 rounded-full ${getStatusIndicator(account.status).color} relative group cursor-help`}
-                          role="img"
-                          aria-label={`Account status: ${getStatusIndicator(account.status).tooltip}`}
-                        >
-                          {/* Tooltip */}
-                          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-900 text-white text-xs rounded py-1 px-2 whitespace-nowrap z-10">
-                            {getStatusIndicator(account.status).tooltip}
-                            <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-2 border-transparent border-t-gray-900"></div>
-                          </div>
+                return (
+                  <div
+                    key={account.id}
+                    className="p-4 sm:p-6 hover:bg-accent transition-colors"
+                  >
+                    {/* Mobile layout - stack vertically */}
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
+                      <div className="flex items-start sm:items-center space-x-3 sm:space-x-4 min-w-0 flex-1">
+                        <div className="flex-shrink-0 p-2 sm:p-3 bg-muted rounded-full">
+                          <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-muted-foreground" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          {editingAccountId === account.id ? (
+                            <div className="space-y-2">
+                              <div className="flex items-center space-x-2">
+                                <input
+                                  type="text"
+                                  value={editingName}
+                                  onChange={(e) =>
+                                    setEditingName(e.target.value)
+                                  }
+                                  className="flex-1 px-3 py-1 text-base sm:text-lg font-medium border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
+                                  placeholder="Account name"
+                                  name="search"
+                                  autoComplete="off"
+                                  onKeyDown={(e) => {
+                                    if (e.key === "Enter") handleEditSave();
+                                    if (e.key === "Escape") handleEditCancel();
+                                  }}
+                                  autoFocus
+                                />
+                                <button
+                                  onClick={handleEditSave}
+                                  disabled={
+                                    !editingName.trim() ||
+                                    updateAccountMutation.isPending
+                                  }
+                                  className="p-1 text-green-600 hover:text-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                                  title="Save changes"
+                                >
+                                  <Check className="h-4 w-4" />
+                                </button>
+                                <button
+                                  onClick={handleEditCancel}
+                                  className="p-1 text-gray-600 hover:text-gray-700"
+                                  title="Cancel editing"
+                                >
+                                  <X className="h-4 w-4" />
+                                </button>
+                              </div>
+                              <p className="text-sm text-muted-foreground truncate">
+                                {account.institution_id}
+                              </p>
+                            </div>
+                          ) : (
+                            <div>
+                              <div className="flex items-center space-x-2 min-w-0">
+                                <h4 className="text-base sm:text-lg font-medium text-foreground truncate">
+                                  {account.name || "Unnamed Account"}
+                                </h4>
+                                <button
+                                  onClick={() => handleEditStart(account)}
+                                  className="flex-shrink-0 p-1 text-muted-foreground hover:text-foreground transition-colors"
+                                  title="Edit account name"
+                                >
+                                  <Edit2 className="h-4 w-4" />
+                                </button>
+                              </div>
+                              <p className="text-sm text-muted-foreground truncate">
+                                {account.institution_id}
+                              </p>
+                              {account.iban && (
+                                <p className="text-xs text-muted-foreground mt-1 font-mono break-all sm:break-normal">
+                                  IBAN: {account.iban}
+                                </p>
+                              )}
+                            </div>
+                          )}
                        </div>
-                        <p className="text-xs sm:text-sm text-gray-500 whitespace-nowrap">
-                          Updated{" "}
-                          {formatDate(account.last_accessed || account.created)}
-                        </p>
                      </div>
-                      
-                      {/* Balance - right on mobile, top on desktop */}
-                      <div className="flex items-center space-x-2 order-2 sm:order-1">
-                        {isPositive ? (
-                          <TrendingUp className="h-4 w-4 text-green-500" />
-                        ) : (
-                          <TrendingDown className="h-4 w-4 text-red-500" />
-                        )}
-                        <p
-                          className={`text-base sm:text-lg font-semibold ${
-                            isPositive ? "text-green-600" : "text-red-600"
-                          }`}
-                        >
-                          {formatCurrency(balance, currency)}
-                        </p>
+
+                      {/* Balance and date section */}
+                      <div className="flex items-center justify-between sm:flex-col sm:items-end sm:text-right flex-shrink-0">
+                        {/* Mobile: date/status on left, balance on right */}
+                        {/* Desktop: balance on top, date/status on bottom */}
+
+                        {/* Date and status indicator - left on mobile, bottom on desktop */}
+                        <div className="flex items-center space-x-2 order-1 sm:order-2">
+                          <div
+                            className={`w-3 h-3 rounded-full ${getStatusIndicator(account.status).color} relative group cursor-help`}
+                            role="img"
+                            aria-label={`Account status: ${getStatusIndicator(account.status).tooltip}`}
+                          >
+                            {/* Tooltip */}
+                            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-900 text-white text-xs rounded py-1 px-2 whitespace-nowrap z-10">
+                              {getStatusIndicator(account.status).tooltip}
+                              <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-2 border-transparent border-t-gray-900"></div>
+                            </div>
+                          </div>
+                          <p className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
+                            Updated{" "}
+                            {formatDate(
+                              account.last_accessed || account.created,
+                            )}
+                          </p>
+                        </div>
+
+                        {/* Balance - right on mobile, top on desktop */}
+                        <div className="flex items-center space-x-2 order-2 sm:order-1">
+                          {isPositive ? (
+                            <TrendingUp className="h-4 w-4 text-green-500" />
+                          ) : (
+                            <TrendingDown className="h-4 w-4 text-red-500" />
+                          )}
+                          <p
+                            className={`text-base sm:text-lg font-semibold ${
+                              isPositive ? "text-green-600" : "text-red-600"
+                            }`}
+                          >
+                            {formatCurrency(balance, currency)}
+                          </p>
+                        </div>
                      </div>
                    </div>
                  </div>
-                </div>
-              );
-            })}
-          </div>
+                );
+              })}
+            </div>
+          </CardContent>
        )}
-      </div>
+      </Card>
    </div>
  );
 }
--- a/frontend/src/components/Dashboard.tsx
+++ b/frontend/src/components/Dashboard.tsx
@@ -1,197 +0,0 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import {
-  CreditCard,
-  TrendingUp,
-  Activity,
-  Menu,
-  X,
-  Home,
-  List,
-  BarChart3,
-  Wifi,
-  WifiOff,
-  Bell,
-} from "lucide-react";
-import { apiClient } from "../lib/api";
-import AccountsOverview from "./AccountsOverview";
-import TransactionsList from "./TransactionsList";
-import Notifications from "./Notifications";
-import ErrorBoundary from "./ErrorBoundary";
-import { cn } from "../lib/utils";
-import type { Account } from "../types/api";
-
-type TabType = "overview" | "transactions" | "analytics" | "notifications";
-
-export default function Dashboard() {
-  const [activeTab, setActiveTab] = useState<TabType>("overview");
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  const { data: accounts } = useQuery<Account[]>({
-    queryKey: ["accounts"],
-    queryFn: apiClient.getAccounts,
-  });
-
-  const {
-    data: healthStatus,
-    isLoading: healthLoading,
-    isError: healthError,
-  } = useQuery({
-    queryKey: ["health"],
-    queryFn: async () => {
-      return await apiClient.getHealth();
-    },
-    refetchInterval: 30000, // Check every 30 seconds
-    retry: 3,
-  });
-
-  const navigation = [
-    { name: "Overview", icon: Home, id: "overview" as TabType },
-    { name: "Transactions", icon: List, id: "transactions" as TabType },
-    { name: "Analytics", icon: BarChart3, id: "analytics" as TabType },
-    { name: "Notifications", icon: Bell, id: "notifications" as TabType },
-  ];
-
-  const totalBalance =
-    accounts?.reduce((sum, account) => {
-      // Get the first available balance from the balances array
-      const primaryBalance = account.balances?.[0]?.amount || 0;
-      return sum + primaryBalance;
-    }, 0) || 0;
-
-  return (
-    <div className="flex h-screen bg-gray-100">
-      {/* Sidebar */}
-      <div
-        className={cn(
-          "fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0",
-          sidebarOpen ? "translate-x-0" : "-translate-x-full",
-        )}
-      >
-        <div className="flex items-center justify-between h-16 px-6 border-b border-gray-200">
-          <div className="flex items-center space-x-2">
-            <CreditCard className="h-8 w-8 text-blue-600" />
-            <h1 className="text-xl font-bold text-gray-900">Leggen</h1>
-          </div>
-          <button
-            onClick={() => setSidebarOpen(false)}
-            className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-500"
-          >
-            <X className="h-6 w-6" />
-          </button>
-        </div>
-
-        <nav className="px-6 py-4">
-          <div className="space-y-1">
-            {navigation.map((item) => (
-              <button
-                key={item.id}
-                onClick={() => {
-                  setActiveTab(item.id);
-                  setSidebarOpen(false);
-                }}
-                className={cn(
-                  "flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-colors",
-                  activeTab === item.id
-                    ? "bg-blue-100 text-blue-700"
-                    : "text-gray-700 hover:text-gray-900 hover:bg-gray-100",
-                )}
-              >
-                <item.icon className="mr-3 h-5 w-5" />
-                {item.name}
-              </button>
-            ))}
-          </div>
-        </nav>
-
-        {/* Account Summary in Sidebar */}
-        <div className="px-6 py-4 border-t border-gray-200 mt-auto">
-          <div className="bg-gray-50 rounded-lg p-4">
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium text-gray-600">
-                Total Balance
-              </span>
-              <TrendingUp className="h-4 w-4 text-green-500" />
-            </div>
-            <p className="text-2xl font-bold text-gray-900 mt-1">
-              {new Intl.NumberFormat("en-US", {
-                style: "currency",
-                currency: "EUR",
-              }).format(totalBalance)}
-            </p>
-            <p className="text-sm text-gray-500 mt-1">
-              {accounts?.length || 0} accounts
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Overlay for mobile */}
-      {sidebarOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
-
-      {/* Main content */}
-      <div className="flex flex-col flex-1 overflow-hidden">
-        {/* Header */}
-        <header className="bg-white shadow-sm border-b border-gray-200">
-          <div className="flex items-center justify-between h-16 px-6">
-            <div className="flex items-center">
-              <button
-                onClick={() => setSidebarOpen(true)}
-                className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-500"
-              >
-                <Menu className="h-6 w-6" />
-              </button>
-              <h2 className="text-lg font-semibold text-gray-900 lg:ml-0 ml-4">
-                {navigation.find((item) => item.id === activeTab)?.name}
-              </h2>
-            </div>
-            <div className="flex items-center space-x-2">
-              <div className="flex items-center space-x-1">
-                {healthLoading ? (
-                  <>
-                    <Activity className="h-4 w-4 text-yellow-500 animate-pulse" />
-                    <span className="text-sm text-gray-600">Checking...</span>
-                  </>
-                ) : healthError || healthStatus?.status !== "healthy" ? (
-                  <>
-                    <WifiOff className="h-4 w-4 text-red-500" />
-                    <span className="text-sm text-red-500">Disconnected</span>
-                  </>
-                ) : (
-                  <>
-                    <Wifi className="h-4 w-4 text-green-500" />
-                    <span className="text-sm text-gray-600">Connected</span>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </header>
-
-        {/* Main content area */}
-        <main className="flex-1 overflow-y-auto p-6">
-          <ErrorBoundary>
-            {activeTab === "overview" && <AccountsOverview />}
-            {activeTab === "transactions" && <TransactionsList />}
-            {activeTab === "analytics" && (
-              <div className="bg-white rounded-lg shadow p-6">
-                <h3 className="text-lg font-medium text-gray-900 mb-4">
-                  Analytics
-                </h3>
-                <p className="text-gray-600">
-                  Analytics dashboard coming soon...
-                </p>
-              </div>
-            )}
-            {activeTab === "notifications" && <Notifications />}
-          </ErrorBoundary>
-        </main>
-      </div>
-    </div>
-  );
-}
--- a/frontend/src/components/FiltersSkeleton.tsx
+++ b/frontend/src/components/FiltersSkeleton.tsx
@@ -0,0 +1,70 @@
+export default function FiltersSkeleton() {
+  return (
+    <div className="bg-white rounded-lg shadow animate-pulse">
+      <div className="px-6 py-4 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <div className="h-6 bg-gray-200 rounded w-32"></div>
+          <div className="flex items-center space-x-2">
+            <div className="h-8 bg-gray-200 rounded w-24"></div>
+            <div className="h-8 bg-gray-200 rounded w-20"></div>
+          </div>
+        </div>
+      </div>
+
+      <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
+        {/* Quick Date Filters Skeleton */}
+        <div className="mb-6">
+          <div className="h-4 bg-gray-200 rounded w-32 mb-3"></div>
+          <div className="space-y-2">
+            <div className="flex flex-wrap gap-2">
+              <div className="h-10 bg-gray-200 rounded-lg w-24"></div>
+              <div className="h-10 bg-gray-200 rounded-lg w-20"></div>
+              <div className="h-10 bg-gray-200 rounded-lg w-28"></div>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <div className="h-10 bg-gray-200 rounded-lg w-24"></div>
+              <div className="h-10 bg-gray-200 rounded-lg w-20"></div>
+            </div>
+          </div>
+        </div>
+
+        {/* Filter Fields Skeleton */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div className="sm:col-span-2 lg:col-span-1">
+            <div className="h-4 bg-gray-200 rounded w-16 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
+          </div>
+          <div>
+            <div className="h-4 bg-gray-200 rounded w-16 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
+          </div>
+          <div>
+            <div className="h-4 bg-gray-200 rounded w-20 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
+          </div>
+          <div>
+            <div className="h-4 bg-gray-200 rounded w-16 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
+          </div>
+        </div>
+
+        {/* Amount Range Filters Skeleton */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+          <div>
+            <div className="h-4 bg-gray-200 rounded w-20 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
+          </div>
+          <div>
+            <div className="h-4 bg-gray-200 rounded w-20 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
+          </div>
+        </div>
+      </div>
+
+      {/* Results Summary Skeleton */}
+      <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
+        <div className="h-4 bg-gray-200 rounded w-48"></div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -2,6 +2,7 @@ import { useLocation } from "@tanstack/react-router";
 import { Menu, Activity, Wifi, WifiOff } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../lib/api";
+import { ThemeToggle } from "./ui/theme-toggle";

 const navigation = [
  { name: "Overview", to: "/" },
@@ -31,25 +32,27 @@ export default function Header({ setSidebarOpen }: HeaderProps) {
  });

  return (
-    <header className="bg-white shadow-sm border-b border-gray-200">
+    <header className="bg-card shadow-sm border-b border-border">
      <div className="flex items-center justify-between h-16 px-6">
        <div className="flex items-center">
          <button
            onClick={() => setSidebarOpen(true)}
-            className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-500"
+            className="lg:hidden p-1 rounded-md text-muted-foreground hover:text-foreground"
          >
            <Menu className="h-6 w-6" />
          </button>
-          <h2 className="text-lg font-semibold text-gray-900 lg:ml-0 ml-4">
+          <h2 className="text-lg font-semibold text-card-foreground lg:ml-0 ml-4">
            {currentPage}
          </h2>
        </div>
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center space-x-3">
          <div className="flex items-center space-x-1">
            {healthLoading ? (
              <>
                <Activity className="h-4 w-4 text-yellow-500 animate-pulse" />
-                <span className="text-sm text-gray-600">Checking...</span>
+                <span className="text-sm text-muted-foreground">
+                  Checking...
+                </span>
              </>
            ) : healthError || healthStatus?.status !== "healthy" ? (
              <>
@@ -59,10 +62,11 @@ export default function Header({ setSidebarOpen }: HeaderProps) {
            ) : (
              <>
                <Wifi className="h-4 w-4 text-green-500" />
-                <span className="text-sm text-gray-600">Connected</span>
+                <span className="text-sm text-muted-foreground">Connected</span>
              </>
            )}
          </div>
+          <ThemeToggle />
        </div>
      </div>
    </header>
--- a/frontend/src/components/Notifications.tsx
+++ b/frontend/src/components/Notifications.tsx
@@ -13,6 +13,24 @@ import {
 } from "lucide-react";
 import { apiClient } from "../lib/api";
 import LoadingSpinner from "./LoadingSpinner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
 import type { NotificationSettings, NotificationService } from "../types/api";

 export default function Notifications() {
@@ -63,38 +81,35 @@ export default function Notifications() {

  if (settingsLoading || servicesLoading) {
    return (
-      <div className="bg-white rounded-lg shadow">
+      <Card>
        <LoadingSpinner message="Loading notifications..." />
-      </div>
+      </Card>
    );
  }

  if (settingsError || servicesError) {
    return (
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center justify-center text-center">
-          <div>
-            <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              Failed to load notifications
-            </h3>
-            <p className="text-gray-600 mb-4">
-              Unable to connect to the Leggen API. Please check your
-              configuration and ensure the API server is running.
-            </p>
-            <button
-              onClick={() => {
-                refetchSettings();
-                refetchServices();
-              }}
-              className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-            >
-              <RefreshCw className="h-4 w-4 mr-2" />
-              Retry
-            </button>
-          </div>
-        </div>
-      </div>
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Failed to load notifications</AlertTitle>
+        <AlertDescription className="space-y-3">
+          <p>
+            Unable to connect to the Leggen API. Please check your configuration
+            and ensure the API server is running.
+          </p>
+          <Button
+            onClick={() => {
+              refetchSettings();
+              refetchServices();
+            }}
+            variant="outline"
+            size="sm"
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Retry
+          </Button>
+        </AlertDescription>
+      </Alert>
    );
  }

@@ -120,201 +135,202 @@ export default function Notifications() {
  return (
    <div className="space-y-6">
      {/* Test Notification Section */}
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center space-x-2 mb-4">
-          <TestTube className="h-5 w-5 text-blue-600" />
-          <h3 className="text-lg font-medium text-gray-900">
-            Test Notifications
-          </h3>
-        </div>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center space-x-2">
+            <TestTube className="h-5 w-5 text-primary" />
+            <span>Test Notifications</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="service" className="text-foreground">
+                Service
+              </Label>
+              <Select value={testService} onValueChange={setTestService}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a service..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {services?.map((service) => (
+                    <SelectItem key={service.name} value={service.name}>
+                      {service.name}{" "}
+                      {service.enabled ? "(Enabled)" : "(Disabled)"}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>

-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Service
-            </label>
-            <select
-              value={testService}
-              onChange={(e) => setTestService(e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            <div>
+              <Label htmlFor="message" className="text-foreground">
+                Message
+              </Label>
+              <Input
+                id="message"
+                type="text"
+                value={testMessage}
+                onChange={(e) => setTestMessage(e.target.value)}
+                placeholder="Test message..."
+              />
+            </div>
+          </div>
+
+          <div className="mt-4">
+            <Button
+              onClick={handleTestNotification}
+              disabled={!testService || testMutation.isPending}
            >
-              <option value="">Select a service...</option>
-              {services?.map((service) => (
-                <option key={service.name} value={service.name}>
-                  {service.name} {service.enabled ? "(Enabled)" : "(Disabled)"}
-                </option>
-              ))}
-            </select>
+              <Send className="h-4 w-4 mr-2" />
+              {testMutation.isPending ? "Sending..." : "Send Test Notification"}
+            </Button>
          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Message
-            </label>
-            <input
-              type="text"
-              value={testMessage}
-              onChange={(e) => setTestMessage(e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="Test message..."
-            />
-          </div>
-        </div>
-
-        <div className="mt-4">
-          <button
-            onClick={handleTestNotification}
-            disabled={!testService || testMutation.isPending}
-            className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            <Send className="h-4 w-4 mr-2" />
-            {testMutation.isPending ? "Sending..." : "Send Test Notification"}
-          </button>
-        </div>
-      </div>
+        </CardContent>
+      </Card>

      {/* Notification Services */}
-      <div className="bg-white rounded-lg shadow">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <div className="flex items-center space-x-2">
-            <Bell className="h-5 w-5 text-blue-600" />
-            <h3 className="text-lg font-medium text-gray-900">
-              Notification Services
-            </h3>
-          </div>
-          <p className="text-sm text-gray-600 mt-1">
-            Manage your notification services
-          </p>
-        </div>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center space-x-2">
+            <Bell className="h-5 w-5 text-primary" />
+            <span>Notification Services</span>
+          </CardTitle>
+          <CardDescription>Manage your notification services</CardDescription>
+        </CardHeader>

        {!services || services.length === 0 ? (
-          <div className="p-6 text-center">
-            <Bell className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
+          <CardContent className="text-center">
+            <Bell className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-foreground mb-2">
              No notification services configured
            </h3>
-            <p className="text-gray-600">
+            <p className="text-muted-foreground">
              Configure notification services in your backend to receive alerts.
            </p>
-          </div>
+          </CardContent>
        ) : (
-          <div className="divide-y divide-gray-200">
-            {services.map((service) => (
-              <div
-                key={service.name}
-                className="p-6 hover:bg-gray-50 transition-colors"
-              >
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center space-x-4">
-                    <div className="p-3 bg-gray-100 rounded-full">
-                      {service.name.toLowerCase().includes("discord") ? (
-                        <MessageSquare className="h-6 w-6 text-gray-600" />
-                      ) : service.name.toLowerCase().includes("telegram") ? (
-                        <Send className="h-6 w-6 text-gray-600" />
-                      ) : (
-                        <Bell className="h-6 w-6 text-gray-600" />
-                      )}
-                    </div>
-                    <div>
-                      <h4 className="text-lg font-medium text-gray-900 capitalize">
-                        {service.name}
-                      </h4>
-                      <div className="flex items-center space-x-2 mt-1">
-                        <span
-                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                            service.enabled
-                              ? "bg-green-100 text-green-800"
-                              : "bg-red-100 text-red-800"
-                          }`}
-                        >
-                          {service.enabled ? (
-                            <CheckCircle className="h-3 w-3 mr-1" />
-                          ) : (
-                            <AlertCircle className="h-3 w-3 mr-1" />
-                          )}
-                          {service.enabled ? "Enabled" : "Disabled"}
-                        </span>
-                        <span
-                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                            service.configured
-                              ? "bg-blue-100 text-blue-800"
-                              : "bg-yellow-100 text-yellow-800"
-                          }`}
-                        >
-                          {service.configured ? "Configured" : "Not Configured"}
-                        </span>
+          <CardContent className="p-0">
+            <div className="divide-y divide-border">
+              {services.map((service) => (
+                <div
+                  key={service.name}
+                  className="p-6 hover:bg-accent transition-colors"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-4">
+                      <div className="p-3 bg-muted rounded-full">
+                        {service.name.toLowerCase().includes("discord") ? (
+                          <MessageSquare className="h-6 w-6 text-muted-foreground" />
+                        ) : service.name.toLowerCase().includes("telegram") ? (
+                          <Send className="h-6 w-6 text-muted-foreground" />
+                        ) : (
+                          <Bell className="h-6 w-6 text-muted-foreground" />
+                        )}
+                      </div>
+                      <div>
+                        <h4 className="text-lg font-medium text-foreground capitalize">
+                          {service.name}
+                        </h4>
+                        <div className="flex items-center space-x-2 mt-1">
+                          <span
+                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                              service.enabled
+                                ? "bg-green-100 text-green-800"
+                                : "bg-red-100 text-red-800"
+                            }`}
+                          >
+                            {service.enabled ? (
+                              <CheckCircle className="h-3 w-3 mr-1" />
+                            ) : (
+                              <AlertCircle className="h-3 w-3 mr-1" />
+                            )}
+                            {service.enabled ? "Enabled" : "Disabled"}
+                          </span>
+                          <span
+                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                              service.configured
+                                ? "bg-blue-100 text-blue-800"
+                                : "bg-yellow-100 text-yellow-800"
+                            }`}
+                          >
+                            {service.configured
+                              ? "Configured"
+                              : "Not Configured"}
+                          </span>
+                        </div>
                      </div>
                    </div>
-                  </div>

-                  <div className="flex items-center space-x-2">
-                    <button
+                    <Button
                      onClick={() => handleDeleteService(service.name)}
                      disabled={deleteServiceMutation.isPending}
-                      className="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors"
-                      title={`Delete ${service.name} service`}
+                      variant="ghost"
+                      size="sm"
+                      className="text-destructive hover:text-destructive hover:bg-destructive/10"
                    >
                      <Trash2 className="h-4 w-4" />
-                    </button>
+                    </Button>
                  </div>
                </div>
-              </div>
-            ))}
-          </div>
+              ))}
+            </div>
+          </CardContent>
        )}
-      </div>
+      </Card>

      {/* Notification Settings */}
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center space-x-2 mb-4">
-          <Settings className="h-5 w-5 text-blue-600" />
-          <h3 className="text-lg font-medium text-gray-900">
-            Notification Settings
-          </h3>
-        </div>
-
-        {settings && (
-          <div className="space-y-4">
-            <div>
-              <h4 className="text-sm font-medium text-gray-700 mb-2">
-                Filters
-              </h4>
-              <div className="bg-gray-50 rounded-md p-4">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-xs font-medium text-gray-600 mb-1">
-                      Case Insensitive Filters
-                    </label>
-                    <p className="text-sm text-gray-900">
-                      {settings.filters.case_insensitive.length > 0
-                        ? settings.filters.case_insensitive.join(", ")
-                        : "None"}
-                    </p>
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-gray-600 mb-1">
-                      Case Sensitive Filters
-                    </label>
-                    <p className="text-sm text-gray-900">
-                      {settings.filters.case_sensitive &&
-                      settings.filters.case_sensitive.length > 0
-                        ? settings.filters.case_sensitive.join(", ")
-                        : "None"}
-                    </p>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center space-x-2">
+            <Settings className="h-5 w-5 text-primary" />
+            <span>Notification Settings</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {settings && (
+            <div className="space-y-4">
+              <div>
+                <h4 className="text-sm font-medium text-foreground mb-2">
+                  Filters
+                </h4>
+                <div className="bg-muted rounded-md p-4">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div>
+                      <Label className="text-xs font-medium text-muted-foreground mb-1 block">
+                        Case Insensitive Filters
+                      </Label>
+                      <p className="text-sm text-foreground">
+                        {settings.filters.case_insensitive.length > 0
+                          ? settings.filters.case_insensitive.join(", ")
+                          : "None"}
+                      </p>
+                    </div>
+                    <div>
+                      <Label className="text-xs font-medium text-muted-foreground mb-1 block">
+                        Case Sensitive Filters
+                      </Label>
+                      <p className="text-sm text-foreground">
+                        {settings.filters.case_sensitive &&
+                        settings.filters.case_sensitive.length > 0
+                          ? settings.filters.case_sensitive.join(", ")
+                          : "None"}
+                      </p>
+                    </div>
                  </div>
                </div>
              </div>
-            </div>

-            <div className="text-sm text-gray-600">
-              <p>
-                Configure notification settings through your backend API to
-                customize filters and service configurations.
-              </p>
+              <div className="text-sm text-muted-foreground">
+                <p>
+                  Configure notification settings through your backend API to
+                  customize filters and service configurations.
+                </p>
+              </div>
            </div>
-          </div>
-        )}
-      </div>
+          )}
+        </CardContent>
+      </Card>
    </div>
  );
 }
--- a/frontend/src/components/RawTransactionModal.tsx
+++ b/frontend/src/components/RawTransactionModal.tsx
@@ -1,5 +1,6 @@
 import { X, Copy, Check } from "lucide-react";
 import { useState } from "react";
+import { Button } from "./ui/button";
 import type { RawTransactionData } from "../types/api";

 interface RawTransactionModalProps {
@@ -38,26 +39,27 @@ export default function RawTransactionModal({
      <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        {/* Background overlay */}
        <div
-          className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          className="fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity"
          onClick={onClose}
        />

        {/* Modal panel */}
-        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
-          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div className="inline-block align-bottom bg-card rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full border">
+          <div className="bg-card px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-medium text-gray-900">
+              <h3 className="text-lg font-medium text-foreground">
                Raw Transaction Data
              </h3>
              <div className="flex items-center space-x-2">
-                <button
+                <Button
                  onClick={handleCopy}
                  disabled={!rawTransaction}
-                  className="inline-flex items-center px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  variant="outline"
+                  size="sm"
                >
                  {copied ? (
                    <>
-                      <Check className="h-4 w-4 mr-1 text-green-600" />
+                      <Check className="h-4 w-4 mr-1 text-green-600 dark:text-green-400" />
                      Copied!
                    </>
                  ) : (
@@ -66,37 +68,34 @@ export default function RawTransactionModal({
                      Copy JSON
                    </>
                  )}
-                </button>
-                <button
-                  onClick={onClose}
-                  className="inline-flex items-center p-1 text-gray-400 hover:text-gray-600 transition-colors"
-                >
+                </Button>
+                <Button onClick={onClose} variant="ghost" size="sm">
                  <X className="h-5 w-5" />
-                </button>
+                </Button>
              </div>
            </div>

            <div className="mb-4">
-              <p className="text-sm text-gray-600">
+              <p className="text-sm text-muted-foreground">
                Transaction ID:{" "}
-                <code className="bg-gray-100 px-2 py-1 rounded text-xs">
+                <code className="bg-muted px-2 py-1 rounded text-xs text-foreground">
                  {transactionId}
                </code>
              </p>
            </div>

            {rawTransaction ? (
-              <div className="bg-gray-50 rounded-lg p-4 overflow-auto max-h-96">
-                <pre className="text-sm text-gray-800 whitespace-pre-wrap">
+              <div className="bg-muted rounded-lg p-4 overflow-auto max-h-96">
+                <pre className="text-sm text-foreground whitespace-pre-wrap">
                  {JSON.stringify(rawTransaction, null, 2)}
                </pre>
              </div>
            ) : (
-              <div className="bg-gray-50 rounded-lg p-8 text-center">
-                <p className="text-gray-600">
+              <div className="bg-muted rounded-lg p-8 text-center">
+                <p className="text-foreground">
                  Raw transaction data is not available for this transaction.
                </p>
-                <p className="text-sm text-gray-500 mt-2">
+                <p className="text-sm text-muted-foreground mt-2">
                  Try refreshing the page or check if the transaction was
                  fetched with summary_only=false.
                </p>
@@ -104,14 +103,14 @@ export default function RawTransactionModal({
            )}
          </div>

-          <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-            <button
+          <div className="bg-muted/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+            <Button
              type="button"
              onClick={onClose}
-              className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+              className="w-full sm:ml-3 sm:w-auto"
            >
              Close
-            </button>
+            </Button>
          </div>
        </div>
      </div>
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -43,22 +43,22 @@ export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
  return (
    <div
      className={cn(
-        "fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0",
+        "fixed inset-y-0 left-0 z-50 w-64 bg-card shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0",
        sidebarOpen ? "translate-x-0" : "-translate-x-full",
      )}
    >
-      <div className="flex items-center justify-between h-16 px-6 border-b border-gray-200">
+      <div className="flex items-center justify-between h-16 px-6 border-b border-border">
        <Link
          to="/"
          onClick={() => setSidebarOpen(false)}
          className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
        >
-          <CreditCard className="h-8 w-8 text-blue-600" />
-          <h1 className="text-xl font-bold text-gray-900">Leggen</h1>
+          <CreditCard className="h-8 w-8 text-primary" />
+          <h1 className="text-xl font-bold text-card-foreground">Leggen</h1>
        </Link>
        <button
          onClick={() => setSidebarOpen(false)}
-          className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-500"
+          className="lg:hidden p-1 rounded-md text-muted-foreground hover:text-foreground"
        >
          <X className="h-6 w-6" />
        </button>
@@ -71,11 +71,12 @@ export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
              key={item.to}
              to={item.to}
              onClick={() => setSidebarOpen(false)}
-              className={`flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-colors ${
+              className={cn(
+                "flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-colors",
                location.pathname === item.to
-                  ? "bg-blue-100 text-blue-700"
-                  : "text-gray-700 hover:text-gray-900 hover:bg-gray-100"
-              }`}
+                  ? "bg-primary text-primary-foreground"
+                  : "text-card-foreground hover:text-card-foreground hover:bg-accent",
+              )}
            >
              <item.icon className="mr-3 h-5 w-5" />
              {item.name}
@@ -85,18 +86,18 @@ export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
      </nav>

      {/* Account Summary in Sidebar */}
-      <div className="px-6 py-4 border-t border-gray-200 mt-auto">
-        <div className="bg-gray-50 rounded-lg p-4">
+      <div className="px-6 py-4 border-t border-border mt-auto">
+        <div className="bg-muted rounded-lg p-4">
          <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-gray-600">
+            <span className="text-sm font-medium text-muted-foreground">
              Total Balance
            </span>
            <TrendingUp className="h-4 w-4 text-green-500" />
          </div>
-          <p className="text-2xl font-bold text-gray-900 mt-1">
+          <p className="text-2xl font-bold text-foreground mt-1">
            {formatCurrency(totalBalance)}
          </p>
-          <p className="text-sm text-gray-500 mt-1">
+          <p className="text-sm text-muted-foreground mt-1">
            {accounts?.length || 0} accounts
          </p>
        </div>
--- a/frontend/src/components/TransactionSkeleton.tsx
+++ b/frontend/src/components/TransactionSkeleton.tsx
@@ -0,0 +1,103 @@
+interface TransactionSkeletonProps {
+  rows?: number;
+  view?: "table" | "mobile";
+}
+
+export default function TransactionSkeleton({
+  rows = 5,
+  view = "table",
+}: TransactionSkeletonProps) {
+  const skeletonRows = Array.from({ length: rows }, (_, index) => index);
+
+  if (view === "mobile") {
+    return (
+      <div className="bg-white rounded-lg shadow divide-y divide-gray-200">
+        {skeletonRows.map((_, index) => (
+          <div key={index} className="p-4 animate-pulse">
+            <div className="flex items-start justify-between">
+              <div className="flex-1">
+                <div className="flex items-start space-x-3">
+                  <div className="p-2 rounded-full bg-gray-200 flex-shrink-0">
+                    <div className="h-4 w-4 bg-gray-300 rounded"></div>
+                  </div>
+                  <div className="flex-1 min-w-0 space-y-2">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-1">
+                      <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+                      <div className="h-3 bg-gray-200 rounded w-2/3"></div>
+                      <div className="h-3 bg-gray-200 rounded w-1/3"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="text-right ml-3 flex-shrink-0 space-y-2">
+                <div className="h-6 bg-gray-200 rounded w-20"></div>
+                <div className="h-4 bg-gray-200 rounded w-16 ml-auto"></div>
+                <div className="h-6 bg-gray-200 rounded w-12 ml-auto"></div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left">
+                <div className="h-4 bg-gray-200 rounded w-20 animate-pulse"></div>
+              </th>
+              <th className="px-6 py-3 text-left">
+                <div className="h-4 bg-gray-200 rounded w-16 animate-pulse"></div>
+              </th>
+              <th className="px-6 py-3 text-left">
+                <div className="h-4 bg-gray-200 rounded w-12 animate-pulse"></div>
+              </th>
+              <th className="px-6 py-3 text-left">
+                <div className="h-4 bg-gray-200 rounded w-8 animate-pulse"></div>
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {skeletonRows.map((_, index) => (
+              <tr key={index} className="animate-pulse">
+                <td className="px-6 py-4">
+                  <div className="flex items-start space-x-3">
+                    <div className="p-2 rounded-full bg-gray-200 flex-shrink-0">
+                      <div className="h-4 w-4 bg-gray-300 rounded"></div>
+                    </div>
+                    <div className="flex-1 space-y-2">
+                      <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                      <div className="space-y-1">
+                        <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+                        <div className="h-3 bg-gray-200 rounded w-2/3"></div>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="text-right">
+                    <div className="h-6 bg-gray-200 rounded w-24 ml-auto mb-1"></div>
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="space-y-1">
+                    <div className="h-4 bg-gray-200 rounded w-20"></div>
+                    <div className="h-3 bg-gray-200 rounded w-16"></div>
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="h-6 bg-gray-200 rounded w-12"></div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/TransactionsList.tsx
+++ b/frontend/src/components/TransactionsList.tsx
@@ -1,378 +0,0 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import {
-  Filter,
-  Search,
-  TrendingUp,
-  TrendingDown,
-  Calendar,
-  RefreshCw,
-  AlertCircle,
-  X,
-  Eye,
-} from "lucide-react";
-import { apiClient } from "../lib/api";
-import { formatCurrency, formatDate } from "../lib/utils";
-import LoadingSpinner from "./LoadingSpinner";
-import RawTransactionModal from "./RawTransactionModal";
-import type { Account, Transaction, ApiResponse } from "../types/api";
-
-export default function TransactionsList() {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedAccount, setSelectedAccount] = useState<string>("");
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
-  const [showFilters, setShowFilters] = useState(false);
-  const [showRawModal, setShowRawModal] = useState(false);
-  const [selectedTransaction, setSelectedTransaction] =
-    useState<Transaction | null>(null);
-
-  const { data: accounts } = useQuery<Account[]>({
-    queryKey: ["accounts"],
-    queryFn: apiClient.getAccounts,
-  });
-
-  const {
-    data: transactionsResponse,
-    isLoading: transactionsLoading,
-    error: transactionsError,
-    refetch: refetchTransactions,
-  } = useQuery<ApiResponse<Transaction[]>>({
-    queryKey: ["transactions", selectedAccount, startDate, endDate],
-    queryFn: () =>
-      apiClient.getTransactions({
-        accountId: selectedAccount || undefined,
-        startDate: startDate || undefined,
-        endDate: endDate || undefined,
-        summaryOnly: false, // Always fetch raw transaction data
-      }),
-  });
-
-  const transactions = transactionsResponse?.data || [];
-
-  const filteredTransactions = (transactions || []).filter(
-    (transaction: Transaction) => {
-      // Additional validation (API client should have already filtered out invalid ones)
-      if (!transaction || !transaction.account_id) {
-        console.warn(
-          "Invalid transaction found after API filtering:",
-          transaction,
-        );
-        return false;
-      }
-
-      const description = transaction.description || "";
-      const creditorName = transaction.creditor_name || "";
-      const debtorName = transaction.debtor_name || "";
-      const reference = transaction.reference || "";
-
-      const matchesSearch =
-        searchTerm === "" ||
-        description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        creditorName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        debtorName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        reference.toLowerCase().includes(searchTerm.toLowerCase());
-
-      return matchesSearch;
-    },
-  );
-
-  const clearFilters = () => {
-    setSearchTerm("");
-    setSelectedAccount("");
-    setStartDate("");
-    setEndDate("");
-  };
-
-  const handleViewRaw = (transaction: Transaction) => {
-    setSelectedTransaction(transaction);
-    setShowRawModal(true);
-  };
-
-  const handleCloseModal = () => {
-    setShowRawModal(false);
-    setSelectedTransaction(null);
-  };
-
-  const hasActiveFilters =
-    searchTerm || selectedAccount || startDate || endDate;
-
-  if (transactionsLoading) {
-    return (
-      <div className="bg-white rounded-lg shadow">
-        <LoadingSpinner message="Loading transactions..." />
-      </div>
-    );
-  }
-
-  if (transactionsError) {
-    return (
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center justify-center text-center">
-          <div>
-            <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              Failed to load transactions
-            </h3>
-            <p className="text-gray-600 mb-4">
-              Unable to fetch transactions from the Leggen API.
-            </p>
-            <button
-              onClick={() => refetchTransactions()}
-              className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-            >
-              <RefreshCw className="h-4 w-4 mr-2" />
-              Retry
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Filters */}
-      <div className="bg-white rounded-lg shadow">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <div className="flex items-center justify-between">
-            <h3 className="text-lg font-medium text-gray-900">Transactions</h3>
-            <div className="flex items-center space-x-2">
-              {hasActiveFilters && (
-                <button
-                  onClick={clearFilters}
-                  className="inline-flex items-center px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors"
-                >
-                  <X className="h-3 w-3 mr-1" />
-                  Clear filters
-                </button>
-              )}
-              <button
-                onClick={() => setShowFilters(!showFilters)}
-                className="inline-flex items-center px-3 py-2 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 transition-colors"
-              >
-                <Filter className="h-4 w-4 mr-2" />
-                Filters
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {showFilters && (
-          <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              {/* Search */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Search
-                </label>
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-                  <input
-                    type="text"
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    placeholder="Description, name, reference..."
-                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
-              </div>
-
-              {/* Account Filter */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Account
-                </label>
-                <select
-                  value={selectedAccount}
-                  onChange={(e) => setSelectedAccount(e.target.value)}
-                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                >
-                  <option value="">All accounts</option>
-                  {accounts?.map((account) => (
-                    <option key={account.id} value={account.id}>
-                      {account.name || "Unnamed Account"} (
-                      {account.institution_id})
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Start Date */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Start Date
-                </label>
-                <div className="relative">
-                  <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-                  <input
-                    type="date"
-                    value={startDate}
-                    onChange={(e) => setStartDate(e.target.value)}
-                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
-              </div>
-
-              {/* End Date */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  End Date
-                </label>
-                <div className="relative">
-                  <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-                  <input
-                    type="date"
-                    value={endDate}
-                    onChange={(e) => setEndDate(e.target.value)}
-                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Results Summary */}
-        <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
-          <p className="text-sm text-gray-600">
-            Showing {filteredTransactions.length} transaction
-            {filteredTransactions.length !== 1 ? "s" : ""}
-            {selectedAccount && accounts && (
-              <span className="ml-1">
-                for {accounts.find((acc) => acc.id === selectedAccount)?.name}
-              </span>
-            )}
-          </p>
-        </div>
-      </div>
-
-      {/* Transactions List */}
-      {filteredTransactions.length === 0 ? (
-        <div className="bg-white rounded-lg shadow p-6 text-center">
-          <div className="text-gray-400 mb-4">
-            <TrendingUp className="h-12 w-12 mx-auto" />
-          </div>
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            No transactions found
-          </h3>
-          <p className="text-gray-600">
-            {hasActiveFilters
-              ? "Try adjusting your filters to see more results."
-              : "No transactions are available for the selected criteria."}
-          </p>
-        </div>
-      ) : (
-        <div className="bg-white rounded-lg shadow divide-y divide-gray-200">
-          {filteredTransactions.map((transaction: Transaction) => {
-            const account = accounts?.find(
-              (acc) => acc.id === transaction.account_id,
-            );
-            const isPositive = transaction.transaction_value > 0;
-
-            return (
-              <div
-                key={`${transaction.account_id}-${transaction.transaction_id}`}
-                className="p-6 hover:bg-gray-50 transition-colors"
-              >
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-start space-x-3">
-                      <div
-                        className={`p-2 rounded-full ${
-                          isPositive ? "bg-green-100" : "bg-red-100"
-                        }`}
-                      >
-                        {isPositive ? (
-                          <TrendingUp className="h-4 w-4 text-green-600" />
-                        ) : (
-                          <TrendingDown className="h-4 w-4 text-red-600" />
-                        )}
-                      </div>
-
-                      <div className="flex-1">
-                        <h4 className="text-sm font-medium text-gray-900 mb-1">
-                          {transaction.description}
-                        </h4>
-
-                        <div className="text-xs text-gray-500 space-y-1">
-                          {account && (
-                            <p>
-                              {account.name || "Unnamed Account"} •{" "}
-                              {account.institution_id}
-                            </p>
-                          )}
-
-                          {(transaction.creditor_name ||
-                            transaction.debtor_name) && (
-                            <p>
-                              {isPositive ? "From: " : "To: "}
-                              {transaction.creditor_name ||
-                                transaction.debtor_name}
-                            </p>
-                          )}
-
-                          {transaction.reference && (
-                            <p>Ref: {transaction.reference}</p>
-                          )}
-
-                          {transaction.internal_transaction_id && (
-                            <p>ID: {transaction.internal_transaction_id}</p>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="text-right ml-4">
-                    <div className="flex items-center justify-end space-x-2 mb-2">
-                      <button
-                        onClick={() => handleViewRaw(transaction)}
-                        className="inline-flex items-center px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
-                        title="View raw transaction data"
-                      >
-                        <Eye className="h-3 w-3 mr-1" />
-                        Raw
-                      </button>
-                    </div>
-                    <p
-                      className={`text-lg font-semibold ${
-                        isPositive ? "text-green-600" : "text-red-600"
-                      }`}
-                    >
-                      {isPositive ? "+" : ""}
-                      {formatCurrency(
-                        transaction.transaction_value,
-                        transaction.transaction_currency,
-                      )}
-                    </p>
-                    <p className="text-sm text-gray-500">
-                      {transaction.transaction_date
-                        ? formatDate(transaction.transaction_date)
-                        : "No date"}
-                    </p>
-                    {transaction.booking_date &&
-                      transaction.booking_date !==
-                        transaction.transaction_date && (
-                        <p className="text-xs text-gray-400">
-                          Booked: {formatDate(transaction.booking_date)}
-                        </p>
-                      )}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {/* Raw Transaction Modal */}
-      <RawTransactionModal
-        isOpen={showRawModal}
-        onClose={handleCloseModal}
-        rawTransaction={selectedTransaction?.raw_transaction}
-        transactionId={selectedTransaction?.transaction_id || "unknown"}
-      />
-    </div>
-  );
-}
--- a/frontend/src/components/TransactionsTable.tsx
+++ b/frontend/src/components/TransactionsTable.tsx
@@ -13,68 +13,101 @@ import type {
  ColumnFiltersState,
 } from "@tanstack/react-table";
 import {
-  Filter,
-  Search,
  TrendingUp,
  TrendingDown,
-  Calendar,
  RefreshCw,
  AlertCircle,
-  X,
  Eye,
  ChevronUp,
  ChevronDown,
 } from "lucide-react";
 import { apiClient } from "../lib/api";
 import { formatCurrency, formatDate } from "../lib/utils";
-import LoadingSpinner from "./LoadingSpinner";
+import TransactionSkeleton from "./TransactionSkeleton";
+import FiltersSkeleton from "./FiltersSkeleton";
 import RawTransactionModal from "./RawTransactionModal";
-import type { Account, Transaction, ApiResponse } from "../types/api";
+import { FilterBar, type FilterState } from "./filters";
+import { DataTablePagination } from "./ui/data-table-pagination";
+import { Card, CardContent } from "./ui/card";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { Button } from "./ui/button";
+import type { Account, Transaction, ApiResponse, Balance } from "../types/api";

 export default function TransactionsTable() {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedAccount, setSelectedAccount] = useState<string>("");
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
-  const [minAmount, setMinAmount] = useState("");
-  const [maxAmount, setMaxAmount] = useState("");
-  const [showFilters, setShowFilters] = useState(false);
+  // Filter state consolidated into a single object
+  const [filterState, setFilterState] = useState<FilterState>({
+    searchTerm: "",
+    selectedAccount: "",
+    startDate: "",
+    endDate: "",
+    minAmount: "",
+    maxAmount: "",
+  });
+
  const [showRawModal, setShowRawModal] = useState(false);
  const [selectedTransaction, setSelectedTransaction] =
    useState<Transaction | null>(null);
+  const [showRunningBalance, setShowRunningBalance] = useState(true);

  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  const [perPage, setPerPage] = useState(50);

  // Debounced search state
-  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(
+    filterState.searchTerm,
+  );

  // Table state (remove pagination from table)
  const [sorting, setSorting] = useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

+  // Helper function to update filter state
+  const handleFilterChange = (key: keyof FilterState, value: string) => {
+    setFilterState((prev) => ({ ...prev, [key]: value }));
+  };
+
+  // Helper function to clear all filters
+  const handleClearFilters = () => {
+    setFilterState({
+      searchTerm: "",
+      selectedAccount: "",
+      startDate: "",
+      endDate: "",
+      minAmount: "",
+      maxAmount: "",
+    });
+    setColumnFilters([]);
+    setCurrentPage(1);
+  };
+
  // Debounce search term to prevent excessive API calls
  useEffect(() => {
    const timer = setTimeout(() => {
-      setDebouncedSearchTerm(searchTerm);
+      setDebouncedSearchTerm(filterState.searchTerm);
    }, 300); // 300ms delay

    return () => clearTimeout(timer);
-  }, [searchTerm]);
+  }, [filterState.searchTerm]);

  // Reset pagination when search term changes
  useEffect(() => {
-    if (debouncedSearchTerm !== searchTerm) {
+    if (debouncedSearchTerm !== filterState.searchTerm) {
      setCurrentPage(1);
    }
-  }, [debouncedSearchTerm, searchTerm]);
+  }, [debouncedSearchTerm, filterState.searchTerm]);

  const { data: accounts } = useQuery<Account[]>({
    queryKey: ["accounts"],
    queryFn: apiClient.getAccounts,
  });

+  const { data: balances } = useQuery<Balance[]>({
+    queryKey: ["balances"],
+    queryFn: apiClient.getBalances,
+    enabled: showRunningBalance,
+  });
+
  const {
    data: transactionsResponse,
    isLoading: transactionsLoading,
@@ -83,22 +116,30 @@ export default function TransactionsTable() {
  } = useQuery<ApiResponse<Transaction[]>>({
    queryKey: [
      "transactions",
-      selectedAccount,
-      startDate,
-      endDate,
+      filterState.selectedAccount,
+      filterState.startDate,
+      filterState.endDate,
      currentPage,
      perPage,
      debouncedSearchTerm,
+      filterState.minAmount,
+      filterState.maxAmount,
    ],
    queryFn: () =>
      apiClient.getTransactions({
-        accountId: selectedAccount || undefined,
-        startDate: startDate || undefined,
-        endDate: endDate || undefined,
+        accountId: filterState.selectedAccount || undefined,
+        startDate: filterState.startDate || undefined,
+        endDate: filterState.endDate || undefined,
        page: currentPage,
        perPage: perPage,
        search: debouncedSearchTerm || undefined,
        summaryOnly: false,
+        minAmount: filterState.minAmount
+          ? parseFloat(filterState.minAmount)
+          : undefined,
+        maxAmount: filterState.maxAmount
+          ? parseFloat(filterState.maxAmount)
+          : undefined,
      }),
  });

@@ -106,7 +147,7 @@ export default function TransactionsTable() {
  const pagination = transactionsResponse?.pagination;

  // Check if search is currently debouncing
-  const isSearchLoading = searchTerm !== debouncedSearchTerm;
+  const isSearchLoading = filterState.searchTerm !== debouncedSearchTerm;

  // Reset pagination when total becomes 0 (no results)
  useEffect(() => {
@@ -115,46 +156,16 @@ export default function TransactionsTable() {
    }
  }, [pagination, currentPage]);

-  const clearFilters = () => {
-    setSearchTerm("");
-    setSelectedAccount("");
-    setStartDate("");
-    setEndDate("");
-    setMinAmount("");
-    setMaxAmount("");
-    setColumnFilters([]);
-    setCurrentPage(1); // Reset to first page when clearing filters
-  };
-
-  const setQuickDateFilter = (days: number) => {
-    const endDate = new Date();
-    const startDate = new Date();
-    startDate.setDate(endDate.getDate() - days);
-
-    setStartDate(startDate.toISOString().split("T")[0]);
-    setEndDate(endDate.toISOString().split("T")[0]);
-    setCurrentPage(1); // Reset to first page when changing date filters
-  };
-
-  const setThisMonthFilter = () => {
-    const now = new Date();
-    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-    const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
-
-    setStartDate(startOfMonth.toISOString().split("T")[0]);
-    setEndDate(endOfMonth.toISOString().split("T")[0]);
-    setCurrentPage(1); // Reset to first page when changing date filters
-  };
-
-  // Reset pagination when account filter changes
+  // Reset pagination when filters change
  useEffect(() => {
    setCurrentPage(1);
-  }, [selectedAccount]);
-
-  // Reset pagination when date filters change
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [startDate, endDate]);
+  }, [
+    filterState.selectedAccount,
+    filterState.startDate,
+    filterState.endDate,
+    filterState.minAmount,
+    filterState.maxAmount,
+  ]);

  const handleViewRaw = (transaction: Transaction) => {
    setSelectedTransaction(transaction);
@@ -167,12 +178,60 @@ export default function TransactionsTable() {
  };

  const hasActiveFilters =
-    searchTerm ||
-    selectedAccount ||
-    startDate ||
-    endDate ||
-    minAmount ||
-    maxAmount;
+    filterState.searchTerm ||
+    filterState.selectedAccount ||
+    filterState.startDate ||
+    filterState.endDate ||
+    filterState.minAmount ||
+    filterState.maxAmount;
+
+  // Calculate running balances
+  const calculateRunningBalances = (transactions: Transaction[]) => {
+    if (!balances || !showRunningBalance) return {};
+
+    const runningBalances: { [key: string]: number } = {};
+    const accountBalanceMap = new Map<string, number>();
+
+    // Create a map of account current balances
+    balances.forEach((balance) => {
+      if (balance.balance_type === "expected") {
+        accountBalanceMap.set(balance.account_id, balance.balance_amount);
+      }
+    });
+
+    // Group transactions by account
+    const transactionsByAccount = new Map<string, Transaction[]>();
+    transactions.forEach((txn) => {
+      if (!transactionsByAccount.has(txn.account_id)) {
+        transactionsByAccount.set(txn.account_id, []);
+      }
+      transactionsByAccount.get(txn.account_id)!.push(txn);
+    });
+
+    // Calculate running balance for each account
+    transactionsByAccount.forEach((accountTransactions, accountId) => {
+      const currentBalance = accountBalanceMap.get(accountId) || 0;
+      let runningBalance = currentBalance;
+
+      // Sort transactions by date (newest first) to work backwards
+      const sortedTransactions = [...accountTransactions].sort(
+        (a, b) =>
+          new Date(b.transaction_date).getTime() -
+          new Date(a.transaction_date).getTime(),
+      );
+
+      // Calculate running balance by working backwards from current balance
+      sortedTransactions.forEach((txn) => {
+        runningBalances[`${txn.account_id}-${txn.transaction_id}`] =
+          runningBalance;
+        runningBalance -= txn.transaction_value;
+      });
+    });
+
+    return runningBalances;
+  };
+
+  const runningBalances = calculateRunningBalances(transactions);

  // Define columns
  const columns: ColumnDef<Transaction>[] = [
@@ -200,10 +259,10 @@ export default function TransactionsTable() {
              )}
            </div>
            <div className="flex-1 min-w-0">
-              <h4 className="text-sm font-medium text-gray-900 truncate">
+              <h4 className="text-sm font-medium text-foreground truncate">
                {transaction.description}
              </h4>
-              <div className="text-xs text-gray-500 space-y-1">
+              <div className="text-xs text-muted-foreground space-y-1">
                {account && (
                  <p className="truncate">
                    {account.name || "Unnamed Account"} •{" "}
@@ -249,19 +308,42 @@ export default function TransactionsTable() {
      },
      sortingFn: "basic",
    },
+    ...(showRunningBalance
+      ? [
+          {
+            id: "running_balance",
+            header: "Running Balance",
+            cell: ({ row }: { row: { original: Transaction } }) => {
+              const transaction = row.original;
+              const balanceKey = `${transaction.account_id}-${transaction.transaction_id}`;
+              const balance = runningBalances[balanceKey];
+
+              if (balance === undefined) return null;
+
+              return (
+                <div className="text-right">
+                  <p className="text-sm font-medium text-foreground">
+                    {formatCurrency(balance, transaction.transaction_currency)}
+                  </p>
+                </div>
+              );
+            },
+          },
+        ]
+      : []),
    {
      accessorKey: "transaction_date",
      header: "Date",
      cell: ({ row }) => {
        const transaction = row.original;
        return (
-          <div className="text-sm text-gray-900">
+          <div className="text-sm text-foreground">
            {transaction.transaction_date
              ? formatDate(transaction.transaction_date)
              : "No date"}
            {transaction.booking_date &&
              transaction.booking_date !== transaction.transaction_date && (
-                <p className="text-xs text-gray-400">
+                <p className="text-xs text-muted-foreground">
                  Booked: {formatDate(transaction.booking_date)}
                </p>
              )}
@@ -278,7 +360,7 @@ export default function TransactionsTable() {
        return (
          <button
            onClick={() => handleViewRaw(transaction)}
-            className="inline-flex items-center px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+            className="inline-flex items-center px-2 py-1 text-xs bg-muted text-muted-foreground rounded hover:bg-accent transition-colors"
            title="View raw transaction data"
          >
            <Eye className="h-3 w-3 mr-1" />
@@ -300,9 +382,10 @@ export default function TransactionsTable() {
    state: {
      sorting,
      columnFilters,
-      globalFilter: searchTerm,
+      globalFilter: filterState.searchTerm,
    },
-    onGlobalFilterChange: setSearchTerm,
+    onGlobalFilterChange: (value: string) =>
+      handleFilterChange("searchTerm", value),
    globalFilterFn: (row, _columnId, filterValue) => {
      // Custom global filter that searches multiple fields
      const transaction = row.original;
@@ -324,204 +407,55 @@ export default function TransactionsTable() {

  if (transactionsLoading) {
    return (
-      <div className="bg-white rounded-lg shadow">
-        <LoadingSpinner message="Loading transactions..." />
+      <div className="space-y-6">
+        <FiltersSkeleton />
+        <TransactionSkeleton rows={10} view="table" />
+        <div className="md:hidden">
+          <TransactionSkeleton rows={10} view="mobile" />
+        </div>
      </div>
    );
  }

  if (transactionsError) {
    return (
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center justify-center text-center">
-          <div>
-            <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              Failed to load transactions
-            </h3>
-            <p className="text-gray-600 mb-4">
-              Unable to fetch transactions from the Leggen API.
-            </p>
-            <button
-              onClick={() => refetchTransactions()}
-              className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-            >
-              <RefreshCw className="h-4 w-4 mr-2" />
-              Retry
-            </button>
-          </div>
-        </div>
-      </div>
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Failed to load transactions</AlertTitle>
+        <AlertDescription className="space-y-3">
+          <p>Unable to fetch transactions from the Leggen API.</p>
+          <Button
+            onClick={() => refetchTransactions()}
+            variant="outline"
+            size="sm"
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Retry
+          </Button>
+        </AlertDescription>
+      </Alert>
    );
  }

  return (
    <div className="space-y-6">
-      {/* Filters */}
-      <div className="bg-white rounded-lg shadow">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <div className="flex items-center justify-between">
-            <h3 className="text-lg font-medium text-gray-900">Transactions</h3>
-            <div className="flex items-center space-x-2">
-              {hasActiveFilters && (
-                <button
-                  onClick={clearFilters}
-                  className="inline-flex items-center px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors"
-                >
-                  <X className="h-3 w-3 mr-1" />
-                  Clear filters
-                </button>
-              )}
-              <button
-                onClick={() => setShowFilters(!showFilters)}
-                className="inline-flex items-center px-3 py-2 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 transition-colors"
-              >
-                <Filter className="h-4 w-4 mr-2" />
-                Filters
-              </button>
-            </div>
-          </div>
-        </div>
+      {/* New FilterBar */}
+      <FilterBar
+        filterState={filterState}
+        onFilterChange={handleFilterChange}
+        onClearFilters={handleClearFilters}
+        accounts={accounts}
+        isSearchLoading={isSearchLoading}
+        showRunningBalance={showRunningBalance}
+        onToggleRunningBalance={() =>
+          setShowRunningBalance(!showRunningBalance)
+        }
+      />

-        {showFilters && (
-          <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            {/* Quick Date Filters */}
-            <div className="mb-4">
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Quick Filters
-              </label>
-              <div className="flex flex-wrap gap-2">
-                <button
-                  onClick={() => setQuickDateFilter(7)}
-                  className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition-colors"
-                >
-                  Last 7 days
-                </button>
-                <button
-                  onClick={() => setQuickDateFilter(30)}
-                  className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition-colors"
-                >
-                  Last 30 days
-                </button>
-                <button
-                  onClick={setThisMonthFilter}
-                  className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition-colors"
-                >
-                  This month
-                </button>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-              {/* Search */}
-              <div className="sm:col-span-2 lg:col-span-1">
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Search
-                </label>
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-                  <input
-                    type="text"
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    placeholder="Description, name, reference..."
-                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                  {isSearchLoading && (
-                    <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-                      <div className="animate-spin h-4 w-4 border-2 border-gray-300 border-t-blue-500 rounded-full"></div>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Account Filter */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Account
-                </label>
-                <select
-                  value={selectedAccount}
-                  onChange={(e) => setSelectedAccount(e.target.value)}
-                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                >
-                  <option value="">All accounts</option>
-                  {accounts?.map((account) => (
-                    <option key={account.id} value={account.id}>
-                      {account.name || "Unnamed Account"} ({account.institution_id})
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Start Date */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Start Date
-                </label>
-                <div className="relative">
-                  <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-                  <input
-                    type="date"
-                    value={startDate}
-                    onChange={(e) => setStartDate(e.target.value)}
-                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
-              </div>
-
-              {/* End Date */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  End Date
-                </label>
-                <div className="relative">
-                  <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-                  <input
-                    type="date"
-                    value={endDate}
-                    onChange={(e) => setEndDate(e.target.value)}
-                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Amount Range Filters */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Min Amount
-                </label>
-                <input
-                  type="number"
-                  value={minAmount}
-                  onChange={(e) => setMinAmount(e.target.value)}
-                  placeholder="0.00"
-                  step="0.01"
-                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Max Amount
-                </label>
-                <input
-                  type="number"
-                  value={maxAmount}
-                  onChange={(e) => setMaxAmount(e.target.value)}
-                  placeholder="1000.00"
-                  step="0.01"
-                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                />
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Results Summary */}
-        <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
-          <p className="text-sm text-gray-600">
+      {/* Results Summary */}
+      <Card>
+        <CardContent className="px-6 py-3 bg-muted/30 border-b border-border">
+          <p className="text-sm text-muted-foreground">
            Showing {transactions.length} transaction
            {transactions.length !== 1 ? "s" : ""} (
            {pagination ? (
@@ -537,28 +471,32 @@ export default function TransactionsTable() {
              "loading..."
            )}
            )
-            {selectedAccount && accounts && (
+            {filterState.selectedAccount && accounts && (
              <span className="ml-1">
-                for {accounts.find((acc) => acc.id === selectedAccount)?.name}
+                for{" "}
+                {
+                  accounts.find((acc) => acc.id === filterState.selectedAccount)
+                    ?.name
+                }
              </span>
            )}
          </p>
-        </div>
-      </div>
+        </CardContent>
+      </Card>

      {/* Responsive Table/Cards */}
-      <div className="bg-white rounded-lg shadow overflow-hidden">
+      <Card className="overflow-hidden">
        {/* Desktop Table View (hidden on mobile) */}
        <div className="hidden md:block">
          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
+            <table className="min-w-full divide-y divide-border">
+              <thead className="bg-muted/50">
                {table.getHeaderGroups().map((headerGroup) => (
                  <tr key={headerGroup.id}>
                    {headerGroup.headers.map((header) => (
                      <th
                        key={header.id}
-                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
+                        className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:bg-muted"
                        onClick={header.column.getToggleSortingHandler()}
                      >
                        <div className="flex items-center space-x-1">
@@ -575,15 +513,15 @@ export default function TransactionsTable() {
                              <ChevronUp
                                className={`h-3 w-3 ${
                                  header.column.getIsSorted() === "asc"
-                                    ? "text-blue-600"
-                                    : "text-gray-400"
+                                    ? "text-primary"
+                                    : "text-muted-foreground"
                                }`}
                              />
                              <ChevronDown
                                className={`h-3 w-3 -mt-1 ${
                                  header.column.getIsSorted() === "desc"
-                                    ? "text-blue-600"
-                                    : "text-gray-400"
+                                    ? "text-primary"
+                                    : "text-muted-foreground"
                                }`}
                              />
                            </div>
@@ -594,20 +532,20 @@ export default function TransactionsTable() {
                  </tr>
                ))}
              </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
+              <tbody className="bg-card divide-y divide-border">
                {table.getRowModel().rows.length === 0 ? (
                  <tr>
                    <td
                      colSpan={columns.length}
                      className="px-6 py-12 text-center"
                    >
-                      <div className="text-gray-400 mb-4">
+                      <div className="text-muted-foreground mb-4">
                        <TrendingUp className="h-12 w-12 mx-auto" />
                      </div>
-                      <h3 className="text-lg font-medium text-gray-900 mb-2">
+                      <h3 className="text-lg font-medium text-foreground mb-2">
                        No transactions found
                      </h3>
-                      <p className="text-gray-600">
+                      <p className="text-muted-foreground">
                        {hasActiveFilters
                          ? "Try adjusting your filters to see more results."
                          : "No transactions are available for the selected criteria."}
@@ -616,9 +554,12 @@ export default function TransactionsTable() {
                  </tr>
                ) : (
                  table.getRowModel().rows.map((row) => (
-                    <tr key={row.id} className="hover:bg-gray-50">
+                    <tr key={row.id} className="hover:bg-muted/50">
                      {row.getVisibleCells().map((cell) => (
-                        <td key={cell.id} className="px-6 py-4 whitespace-nowrap">
+                        <td
+                          key={cell.id}
+                          className="px-6 py-4 whitespace-nowrap"
+                        >
                          {flexRender(
                            cell.column.columnDef.cell,
                            cell.getContext(),
@@ -637,20 +578,20 @@ export default function TransactionsTable() {
        <div className="md:hidden">
          {table.getRowModel().rows.length === 0 ? (
            <div className="px-6 py-12 text-center">
-              <div className="text-gray-400 mb-4">
+              <div className="text-muted-foreground mb-4">
                <TrendingUp className="h-12 w-12 mx-auto" />
              </div>
-              <h3 className="text-lg font-medium text-gray-900 mb-2">
+              <h3 className="text-lg font-medium text-foreground mb-2">
                No transactions found
              </h3>
-              <p className="text-gray-600">
+              <p className="text-muted-foreground">
                {hasActiveFilters
                  ? "Try adjusting your filters to see more results."
                  : "No transactions are available for the selected criteria."}
              </p>
            </div>
          ) : (
-            <div className="divide-y divide-gray-200">
+            <div className="divide-y divide-border">
              {table.getRowModel().rows.map((row) => {
                const transaction = row.original;
                const account = accounts?.find(
@@ -661,7 +602,7 @@ export default function TransactionsTable() {
                return (
                  <div
                    key={row.id}
-                    className="p-4 hover:bg-gray-50 transition-colors"
+                    className="p-4 hover:bg-muted/50 transition-colors"
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1 min-w-0">
@@ -678,33 +619,39 @@ export default function TransactionsTable() {
                            )}
                          </div>
                          <div className="flex-1 min-w-0">
-                            <h4 className="text-sm font-medium text-gray-900 break-words">
+                            <h4 className="text-sm font-medium text-foreground break-words">
                              {transaction.description}
                            </h4>
-                            <div className="text-xs text-gray-500 space-y-1 mt-1">
+                            <div className="text-xs text-muted-foreground space-y-1 mt-1">
                              {account && (
                                <p className="break-words">
                                  {account.name || "Unnamed Account"} •{" "}
                                  {account.institution_id}
                                </p>
                              )}
-                              {(transaction.creditor_name || transaction.debtor_name) && (
+                              {(transaction.creditor_name ||
+                                transaction.debtor_name) && (
                                <p className="break-words">
                                  {isPositive ? "From: " : "To: "}
-                                  {transaction.creditor_name || transaction.debtor_name}
+                                  {transaction.creditor_name ||
+                                    transaction.debtor_name}
                                </p>
                              )}
                              {transaction.reference && (
-                                <p className="break-words">Ref: {transaction.reference}</p>
+                                <p className="break-words">
+                                  Ref: {transaction.reference}
+                                </p>
                              )}
-                              <p className="text-gray-400">
+                              <p className="text-muted-foreground">
                                {transaction.transaction_date
                                  ? formatDate(transaction.transaction_date)
                                  : "No date"}
                                {transaction.booking_date &&
-                                  transaction.booking_date !== transaction.transaction_date && (
+                                  transaction.booking_date !==
+                                    transaction.transaction_date && (
                                    <span className="ml-2">
-                                      (Booked: {formatDate(transaction.booking_date)})
+                                      (Booked:{" "}
+                                      {formatDate(transaction.booking_date)})
                                    </span>
                                  )}
                              </p>
@@ -724,9 +671,20 @@ export default function TransactionsTable() {
                            transaction.transaction_currency,
                          )}
                        </p>
+                        {showRunningBalance && (
+                          <p className="text-xs text-muted-foreground mb-1">
+                            Balance:{" "}
+                            {formatCurrency(
+                              runningBalances[
+                                `${transaction.account_id}-${transaction.transaction_id}`
+                              ] || 0,
+                              transaction.transaction_currency,
+                            )}
+                          </p>
+                        )}
                        <button
                          onClick={() => handleViewRaw(transaction)}
-                          className="inline-flex items-center px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+                          className="inline-flex items-center px-2 py-1 text-xs bg-muted text-muted-foreground rounded hover:bg-accent transition-colors"
                          title="View raw transaction data"
                        >
                          <Eye className="h-3 w-3 mr-1" />
@@ -743,141 +701,18 @@ export default function TransactionsTable() {

        {/* Pagination */}
        {pagination && (
-          <div className="bg-white px-4 py-3 flex flex-col sm:flex-row items-center justify-between border-t border-gray-200 space-y-3 sm:space-y-0">
-            {/* Mobile pagination controls */}
-            <div className="flex justify-between w-full sm:hidden">
-              <div className="flex space-x-2">
-                <button
-                  onClick={() => setCurrentPage(1)}
-                  disabled={pagination.page === 1}
-                  className="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  First
-                </button>
-                <button
-                  onClick={() =>
-                    setCurrentPage((prev) => Math.max(1, prev - 1))
-                  }
-                  disabled={!pagination.has_prev}
-                  className="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Previous
-                </button>
-              </div>
-              <div className="flex space-x-2">
-                <button
-                  onClick={() => setCurrentPage((prev) => prev + 1)}
-                  disabled={!pagination.has_next}
-                  className="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Next
-                </button>
-                <button
-                  onClick={() => setCurrentPage(pagination.total_pages)}
-                  disabled={pagination.page === pagination.total_pages}
-                  className="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Last
-                </button>
-              </div>
-            </div>
-            
-            {/* Mobile pagination info */}
-            <div className="text-center w-full sm:hidden">
-              <p className="text-sm text-gray-700">
-                Page <span className="font-medium">{pagination.page}</span> of{" "}
-                <span className="font-medium">{pagination.total_pages}</span>
-                <br />
-                <span className="text-xs text-gray-500">
-                  Showing {(pagination.page - 1) * pagination.per_page + 1}-
-                  {Math.min(pagination.page * pagination.per_page, pagination.total)} of {pagination.total}
-                </span>
-              </p>
-            </div>
-
-            {/* Desktop pagination */}
-            <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-              <div className="flex items-center space-x-2">
-                <p className="text-sm text-gray-700">
-                  Showing{" "}
-                  <span className="font-medium">
-                    {(pagination.page - 1) * pagination.per_page + 1}
-                  </span>{" "}
-                  to{" "}
-                  <span className="font-medium">
-                    {Math.min(
-                      pagination.page * pagination.per_page,
-                      pagination.total,
-                    )}
-                  </span>{" "}
-                  of <span className="font-medium">{pagination.total}</span>{" "}
-                  results
-                </p>
-              </div>
-              <div className="flex items-center space-x-4">
-                <div className="flex items-center space-x-2">
-                  <label className="text-sm text-gray-700">
-                    Rows per page:
-                  </label>
-                  <select
-                    value={perPage}
-                    onChange={(e) => {
-                      setPerPage(Number(e.target.value));
-                      setCurrentPage(1); // Reset to first page when changing page size
-                    }}
-                    className="border border-gray-300 rounded px-2 py-1 text-sm"
-                  >
-                    {[10, 25, 50, 100].map((pageSize) => (
-                      <option key={pageSize} value={pageSize}>
-                        {pageSize}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <button
-                    onClick={() => setCurrentPage(1)}
-                    disabled={pagination.page === 1}
-                    className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    First
-                  </button>
-                  <button
-                    onClick={() =>
-                      setCurrentPage((prev) => Math.max(1, prev - 1))
-                    }
-                    disabled={!pagination.has_prev}
-                    className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Previous
-                  </button>
-                  <span className="text-sm text-gray-700">
-                    Page <span className="font-medium">{pagination.page}</span>{" "}
-                    of{" "}
-                    <span className="font-medium">
-                      {pagination.total_pages}
-                    </span>
-                  </span>
-                  <button
-                    onClick={() => setCurrentPage((prev) => prev + 1)}
-                    disabled={!pagination.has_next}
-                    className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Next
-                  </button>
-                  <button
-                    onClick={() => setCurrentPage(pagination.total_pages)}
-                    disabled={pagination.page === pagination.total_pages}
-                    className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Last
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
+          <DataTablePagination
+            currentPage={pagination.page}
+            totalPages={pagination.total_pages}
+            pageSize={pagination.per_page}
+            total={pagination.total}
+            hasNext={pagination.has_next}
+            hasPrev={pagination.has_prev}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={setPerPage}
+          />
        )}
-      </div>
+      </Card>

      {/* Raw Transaction Modal */}
      <RawTransactionModal
--- a/frontend/src/components/analytics/BalanceChart.tsx
+++ b/frontend/src/components/analytics/BalanceChart.tsx
@@ -27,22 +27,39 @@ interface AggregatedDataPoint {
  [key: string]: string | number;
 }

-export default function BalanceChart({ data, accounts, className }: BalanceChartProps) {
+interface TooltipProps {
+  active?: boolean;
+  payload?: Array<{
+    name: string;
+    value: number;
+    color: string;
+  }>;
+  label?: string;
+}
+
+export default function BalanceChart({
+  data,
+  accounts,
+  className,
+}: BalanceChartProps) {
  // Create a lookup map for account info
-  const accountMap = accounts.reduce((map, account) => {
-    map[account.id] = account;
-    return map;
-  }, {} as Record<string, Account>);
+  const accountMap = accounts.reduce(
+    (map, account) => {
+      map[account.id] = account;
+      return map;
+    },
+    {} as Record<string, Account>,
+  );

  // Helper function to get bank name from institution_id
  const getBankName = (institutionId: string): string => {
    const bankMapping: Record<string, string> = {
-      'REVOLUT_REVOLT21': 'Revolut',
-      'NUBANK_NUPBBR25': 'Nu Pagamentos',
-      'BANCOBPI_BBPIPTPL': 'Banco BPI',
+      REVOLUT_REVOLT21: "Revolut",
+      NUBANK_NUPBBR25: "Nu Pagamentos",
+      BANCOBPI_BBPIPTPL: "Banco BPI",
      // Add more mappings as needed
    };
-    return bankMapping[institutionId] || institutionId.split('_')[0];
+    return bankMapping[institutionId] || institutionId.split("_")[0];
  };

  // Helper function to create display name for account
@@ -50,20 +67,24 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
    const account = accountMap[accountId];
    if (account) {
      const bankName = getBankName(account.institution_id);
-      const accountName = account.name || `Account ${accountId.split('-')[1]}`;
+      const accountName = account.name || `Account ${accountId.split("-")[1]}`;
      return `${bankName} - ${accountName}`;
    }
-    return `Account ${accountId.split('-')[1]}`;
+    return `Account ${accountId.split("-")[1]}`;
  };
  // Process balance data for the chart
  const chartData = data
    .filter((balance) => balance.balance_type === "closingBooked")
    .map((balance) => ({
-      date: new Date(balance.reference_date).toLocaleDateString('en-GB'), // DD/MM/YYYY format
+      date: new Date(balance.reference_date).toLocaleDateString("en-GB"), // DD/MM/YYYY format
      balance: balance.balance_amount,
      account_id: balance.account_id,
    }))
-    .sort((a, b) => new Date(a.date.split('/').reverse().join('/')).getTime() - new Date(b.date.split('/').reverse().join('/')).getTime());
+    .sort(
+      (a, b) =>
+        new Date(a.date.split("/").reverse().join("/")).getTime() -
+        new Date(b.date.split("/").reverse().join("/")).getTime(),
+    );

  // Group by account and aggregate
  const accountBalances: { [key: string]: ChartDataPoint[] } = {};
@@ -86,18 +107,37 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
  });

  const finalData = Object.values(aggregatedData).sort(
-    (a, b) => new Date(a.date.split('/').reverse().join('/')).getTime() - new Date(b.date.split('/').reverse().join('/')).getTime()
+    (a, b) =>
+      new Date(a.date.split("/").reverse().join("/")).getTime() -
+      new Date(b.date.split("/").reverse().join("/")).getTime(),
  );

  const colors = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6"];

+  const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-card p-3 border rounded shadow-lg">
+          <p className="font-medium text-foreground">Date: {label}</p>
+          {payload.map((entry, index) => (
+            <p key={index} style={{ color: entry.color }}>
+              {getAccountDisplayName(entry.name)}: €
+              {entry.value.toLocaleString()}
+            </p>
+          ))}
+        </div>
+      );
+    }
+    return null;
+  };
+
  if (finalData.length === 0) {
    return (
      <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
          Balance Progress
        </h3>
-        <div className="h-80 flex items-center justify-center text-gray-500">
+        <div className="h-80 flex items-center justify-center text-muted-foreground">
          No balance data available
        </div>
      </div>
@@ -106,7 +146,7 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart

  return (
    <div className={className}>
-      <h3 className="text-lg font-medium text-gray-900 mb-4">
+      <h3 className="text-lg font-medium text-foreground mb-4">
        Balance Progress Over Time
      </h3>
      <div className="h-80">
@@ -118,9 +158,9 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
              tick={{ fontSize: 12 }}
              tickFormatter={(value) => {
                // Convert DD/MM/YYYY back to a proper date for formatting
-                const [day, month, year] = value.split('/');
+                const [day, month, year] = value.split("/");
                const date = new Date(year, month - 1, day);
-                return date.toLocaleDateString('en-GB', {
+                return date.toLocaleDateString("en-GB", {
                  month: "short",
                  day: "numeric",
                });
@@ -130,13 +170,7 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
              tick={{ fontSize: 12 }}
              tickFormatter={(value) => `€${value.toLocaleString()}`}
            />
-            <Tooltip
-              formatter={(value: number, name: string) => [
-                `€${value.toLocaleString()}`,
-                getAccountDisplayName(name),
-              ]}
-              labelFormatter={(label) => `Date: ${label}`}
-            />
+            <Tooltip content={<CustomTooltip />} />
            <Legend />
            {Object.keys(accountBalances).map((accountId, index) => (
              <Area
@@ -154,4 +188,4 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
      </div>
    </div>
  );
-}
+}
--- a/frontend/src/components/analytics/MonthlyTrends.tsx
+++ b/frontend/src/components/analytics/MonthlyTrends.tsx
@@ -15,13 +15,6 @@ interface MonthlyTrendsProps {
  days?: number;
 }

-interface MonthlyData {
-  month: string;
-  income: number;
-  expenses: number;
-  net: number;
-}
-
 interface TooltipProps {
  active?: boolean;
  payload?: Array<{
@@ -32,54 +25,18 @@ interface TooltipProps {
  label?: string;
 }

-export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsProps) {
-  // Get transactions for the specified period using analytics endpoint
-  const { data: transactions, isLoading } = useQuery({
-    queryKey: ["transactions", "monthly-trends", days],
+export default function MonthlyTrends({
+  className,
+  days = 365,
+}: MonthlyTrendsProps) {
+  // Get pre-calculated monthly stats from the new endpoint
+  const { data: monthlyData, isLoading } = useQuery({
+    queryKey: ["monthly-stats", days],
    queryFn: async () => {
-      return await apiClient.getTransactionsForAnalytics(days);
+      return await apiClient.getMonthlyTransactionStats(days);
    },
  });

-  // Process transactions into monthly data
-  const monthlyData: MonthlyData[] = [];
-  
-  if (transactions) {
-    const monthlyMap: { [key: string]: MonthlyData } = {};
-    
-    transactions.forEach((transaction) => {
-      const date = new Date(transaction.date);
-      const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
-      
-      if (!monthlyMap[monthKey]) {
-        monthlyMap[monthKey] = {
-          month: date.toLocaleDateString('en-GB', { 
-            year: 'numeric', 
-            month: 'short' 
-          }),
-          income: 0,
-          expenses: 0,
-          net: 0,
-        };
-      }
-      
-      if (transaction.amount > 0) {
-        monthlyMap[monthKey].income += transaction.amount;
-      } else {
-        monthlyMap[monthKey].expenses += Math.abs(transaction.amount);
-      }
-      
-      monthlyMap[monthKey].net = monthlyMap[monthKey].income - monthlyMap[monthKey].expenses;
-    });
-    
-    // Convert to array and sort by date
-    monthlyData.push(
-      ...Object.entries(monthlyMap)
-        .sort(([a], [b]) => a.localeCompare(b))
-        .map(([, data]) => data)
-    );
-  }
-
  // Calculate number of months to display based on days filter
  const getMonthsToDisplay = (days: number): number => {
    if (days <= 30) return 1;
@@ -89,16 +46,16 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
  };

  const monthsToDisplay = getMonthsToDisplay(days);
-  const displayData = monthlyData.slice(-monthsToDisplay);
+  const displayData = monthlyData ? monthlyData.slice(-monthsToDisplay) : [];

  if (isLoading) {
    return (
      <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
          Monthly Spending Trends
        </h3>
        <div className="h-80 flex items-center justify-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
        </div>
      </div>
    );
@@ -107,10 +64,10 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
  if (displayData.length === 0) {
    return (
      <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
          Monthly Spending Trends
        </h3>
-        <div className="h-80 flex items-center justify-center text-gray-500">
+        <div className="h-80 flex items-center justify-center text-muted-foreground">
          No transaction data available
        </div>
      </div>
@@ -120,8 +77,8 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
  const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
    if (active && payload && payload.length) {
      return (
-        <div className="bg-white p-3 border rounded shadow-lg">
-          <p className="font-medium">{label}</p>
+        <div className="bg-card p-3 border rounded shadow-lg">
+          <p className="font-medium text-foreground">{label}</p>
          {payload.map((entry, index) => (
            <p key={index} style={{ color: entry.color }}>
              {entry.name}: €{Math.abs(entry.value).toLocaleString()}
@@ -143,21 +100,24 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr

  return (
    <div className={className}>
-      <h3 className="text-lg font-medium text-gray-900 mb-4">
+      <h3 className="text-lg font-medium text-foreground mb-4">
        {getTitle(days)}
      </h3>
      <div className="h-80">
        <ResponsiveContainer width="100%" height="100%">
-          <BarChart data={displayData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+          <BarChart
+            data={displayData}
+            margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+          >
            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis 
-              dataKey="month" 
+            <XAxis
+              dataKey="month"
              tick={{ fontSize: 12 }}
              angle={-45}
              textAnchor="end"
              height={60}
            />
-            <YAxis 
+            <YAxis
              tick={{ fontSize: 12 }}
              tickFormatter={(value) => `€${value.toLocaleString()}`}
            />
@@ -167,7 +127,7 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
          </BarChart>
        </ResponsiveContainer>
      </div>
-      <div className="mt-4 flex justify-center space-x-6 text-sm">
+      <div className="mt-4 flex justify-center space-x-6 text-sm text-foreground">
        <div className="flex items-center">
          <div className="w-3 h-3 bg-green-500 rounded mr-2" />
          <span>Income</span>
@@ -179,4 +139,4 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
      </div>
    </div>
  );
-}
+}
--- a/frontend/src/components/analytics/StatCard.tsx
+++ b/frontend/src/components/analytics/StatCard.tsx
@@ -1,5 +1,6 @@
 import type { LucideIcon } from "lucide-react";
-import clsx from "clsx";
+import { Card, CardContent } from "../ui/card";
+import { cn } from "../../lib/utils";

 interface StatCardProps {
  title: string;
@@ -22,43 +23,44 @@ export default function StatCard({
  className,
 }: StatCardProps) {
  return (
-    <div
-      className={clsx(
-        "bg-white rounded-lg shadow p-6 border border-gray-200",
-        className
-      )}
-    >
-      <div className="flex items-center">
-        <div className="flex-shrink-0">
-          <Icon className="h-8 w-8 text-blue-600" />
-        </div>
-        <div className="ml-5 w-0 flex-1">
-          <dl>
-            <dt className="text-sm font-medium text-gray-500 truncate">
-              {title}
-            </dt>
-            <dd className="flex items-baseline">
-              <div className="text-2xl font-semibold text-gray-900">
-                {value}
-              </div>
-              {trend && (
-                <div
-                  className={clsx(
-                    "ml-2 flex items-baseline text-sm font-semibold",
-                    trend.isPositive ? "text-green-600" : "text-red-600"
-                  )}
-                >
-                  {trend.isPositive ? "+" : ""}
-                  {trend.value}%
+    <Card className={cn(className)}>
+      <CardContent className="p-6">
+        <div className="flex items-center">
+          <div className="flex-shrink-0">
+            <Icon className="h-8 w-8 text-primary" />
+          </div>
+          <div className="ml-5 w-0 flex-1">
+            <dl>
+              <dt className="text-sm font-medium text-muted-foreground truncate">
+                {title}
+              </dt>
+              <dd className="flex items-baseline">
+                <div className="text-2xl font-semibold text-foreground">
+                  {value}
                </div>
+                {trend && (
+                  <div
+                    className={cn(
+                      "ml-2 flex items-baseline text-sm font-semibold",
+                      trend.isPositive
+                        ? "text-green-600 dark:text-green-400"
+                        : "text-red-600 dark:text-red-400",
+                    )}
+                  >
+                    {trend.isPositive ? "+" : ""}
+                    {trend.value}%
+                  </div>
+                )}
+              </dd>
+              {subtitle && (
+                <dd className="text-sm text-muted-foreground mt-1">
+                  {subtitle}
+                </dd>
              )}
-            </dd>
-            {subtitle && (
-              <dd className="text-sm text-gray-600 mt-1">{subtitle}</dd>
-            )}
-          </dl>
+            </dl>
+          </div>
        </div>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
  );
-}
+}
--- a/frontend/src/components/analytics/TimePeriodFilter.tsx
+++ b/frontend/src/components/analytics/TimePeriodFilter.tsx
@@ -1,4 +1,5 @@
 import { Calendar } from "lucide-react";
+import { Button } from "../ui/button";
 import type { TimePeriod } from "../../lib/timePeriods";
 import { TIME_PERIODS } from "../../lib/timePeriods";

@@ -15,25 +16,24 @@ export default function TimePeriodFilter({
 }: TimePeriodFilterProps) {
  return (
    <div className={`flex items-center gap-4 ${className}`}>
-      <div className="flex items-center gap-2 text-gray-700">
+      <div className="flex items-center gap-2 text-foreground">
        <Calendar size={20} />
        <span className="font-medium">Time Period:</span>
      </div>
      <div className="flex gap-2">
        {TIME_PERIODS.map((period) => (
-          <button
+          <Button
            key={period.value}
            onClick={() => onPeriodChange(period)}
-            className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-              selectedPeriod.value === period.value
-                ? "bg-blue-600 text-white"
-                : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-            }`}
+            variant={
+              selectedPeriod.value === period.value ? "default" : "outline"
+            }
+            size="sm"
          >
            {period.label}
-          </button>
+          </Button>
        ))}
      </div>
    </div>
  );
-}
+}
--- a/frontend/src/components/analytics/TransactionDistribution.tsx
+++ b/frontend/src/components/analytics/TransactionDistribution.tsx
@@ -33,27 +33,27 @@ export default function TransactionDistribution({
  // Helper function to get bank name from institution_id
  const getBankName = (institutionId: string): string => {
    const bankMapping: Record<string, string> = {
-      'REVOLUT_REVOLT21': 'Revolut',
-      'NUBANK_NUPBBR25': 'Nu Pagamentos',
-      'BANCOBPI_BBPIPTPL': 'Banco BPI',
+      REVOLUT_REVOLT21: "Revolut",
+      NUBANK_NUPBBR25: "Nu Pagamentos",
+      BANCOBPI_BBPIPTPL: "Banco BPI",
      // TODO: Add more bank mappings as needed
    };
-    return bankMapping[institutionId] || institutionId.split('_')[0];
+    return bankMapping[institutionId] || institutionId.split("_")[0];
  };

  // Helper function to create display name for account
  const getAccountDisplayName = (account: Account): string => {
    const bankName = getBankName(account.institution_id);
-    const accountName = account.name || `Account ${account.id.split('-')[1]}`;
+    const accountName = account.name || `Account ${account.id.split("-")[1]}`;
    return `${bankName} - ${accountName}`;
  };

  // Create pie chart data from account balances
  const pieData: PieDataPoint[] = accounts.map((account, index) => {
    const primaryBalance = account.balances?.[0]?.amount || 0;
-    
+
    const colors = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6"];
-    
+
    return {
      name: getAccountDisplayName(account),
      value: primaryBalance,
@@ -66,10 +66,10 @@ export default function TransactionDistribution({
  if (pieData.length === 0 || totalBalance === 0) {
    return (
      <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
          Account Distribution
        </h3>
-        <div className="h-80 flex items-center justify-center text-gray-500">
+        <div className="h-80 flex items-center justify-center text-muted-foreground">
          No account data available
        </div>
      </div>
@@ -81,12 +81,12 @@ export default function TransactionDistribution({
      const data = payload[0].payload;
      const percentage = ((data.value / totalBalance) * 100).toFixed(1);
      return (
-        <div className="bg-white p-3 border rounded shadow-lg">
-          <p className="font-medium">{data.name}</p>
-          <p className="text-blue-600">
+        <div className="bg-card p-3 border rounded shadow-lg">
+          <p className="font-medium text-foreground">{data.name}</p>
+          <p className="text-primary">
            Balance: €{data.value.toLocaleString()}
          </p>
-          <p className="text-gray-600">{percentage}% of total</p>
+          <p className="text-muted-foreground">{percentage}% of total</p>
        </div>
      );
    }
@@ -95,7 +95,7 @@ export default function TransactionDistribution({

  return (
    <div className={className}>
-      <h3 className="text-lg font-medium text-gray-900 mb-4">
+      <h3 className="text-lg font-medium text-foreground mb-4">
        Account Balance Distribution
      </h3>
      <div className="h-80">
@@ -125,18 +125,23 @@ export default function TransactionDistribution({
      </div>
      <div className="mt-4 grid grid-cols-1 gap-2">
        {pieData.map((item, index) => (
-          <div key={index} className="flex items-center justify-between text-sm">
+          <div
+            key={index}
+            className="flex items-center justify-between text-sm"
+          >
            <div className="flex items-center">
              <div
                className="w-3 h-3 rounded-full mr-2"
                style={{ backgroundColor: item.color }}
              />
-              <span className="text-gray-700">{item.name}</span>
+              <span className="text-foreground">{item.name}</span>
            </div>
-            <span className="font-medium">€{item.value.toLocaleString()}</span>
+            <span className="font-medium text-foreground">
+              €{item.value.toLocaleString()}
+            </span>
          </div>
        ))}
      </div>
    </div>
  );
-}
+}
--- a/frontend/src/components/filters/AccountCombobox.tsx
+++ b/frontend/src/components/filters/AccountCombobox.tsx
@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { Check, ChevronDown, Building2 } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import type { Account } from "../../types/api";
+
+export interface AccountComboboxProps {
+  accounts?: Account[];
+  selectedAccount: string;
+  onAccountChange: (accountId: string) => void;
+  className?: string;
+}
+
+export function AccountCombobox({
+  accounts = [],
+  selectedAccount,
+  onAccountChange,
+  className,
+}: AccountComboboxProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedAccountData = accounts.find(
+    (account) => account.id === selectedAccount,
+  );
+
+  const formatAccountName = (account: Account) => {
+    const displayName = account.name || "Unnamed Account";
+    return `${displayName} (${account.institution_id})`;
+  };
+
+  return (
+    <div className={className}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="justify-between"
+          >
+            <div className="flex items-center">
+              <Building2 className="mr-2 h-4 w-4" />
+              {selectedAccountData
+                ? formatAccountName(selectedAccountData)
+                : "All accounts"}
+            </div>
+            <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[300px] p-0">
+          <Command>
+            <CommandInput placeholder="Search accounts..." className="h-9" />
+            <CommandList>
+              <CommandEmpty>No accounts found.</CommandEmpty>
+              <CommandGroup>
+                {/* All accounts option */}
+                <CommandItem
+                  value="all-accounts"
+                  onSelect={() => {
+                    onAccountChange("");
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      selectedAccount === "" ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  <Building2 className="mr-2 h-4 w-4 text-gray-400" />
+                  All accounts
+                </CommandItem>
+
+                {/* Individual accounts */}
+                {accounts.map((account) => (
+                  <CommandItem
+                    key={account.id}
+                    value={`${account.name} ${account.institution_id}`}
+                    onSelect={() => {
+                      onAccountChange(account.id);
+                      setOpen(false);
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        selectedAccount === account.id
+                          ? "opacity-100"
+                          : "opacity-0",
+                      )}
+                    />
+                    <div className="flex flex-col">
+                      <span className="font-medium">
+                        {account.name || "Unnamed Account"}
+                      </span>
+                      <span className="text-xs text-gray-500">
+                        {account.institution_id}
+                        {account.iban && ` • ${account.iban.slice(-4)}`}
+                      </span>
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
--- a/frontend/src/components/filters/ActiveFilterChips.tsx
+++ b/frontend/src/components/filters/ActiveFilterChips.tsx
@@ -0,0 +1,140 @@
+import { X } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { formatDate } from "@/lib/utils";
+import type { FilterState } from "./FilterBar";
+import type { Account } from "../../types/api";
+
+export interface ActiveFilterChipsProps {
+  filterState: FilterState;
+  onFilterChange: (key: keyof FilterState, value: string) => void;
+  accounts?: Account[];
+}
+
+export function ActiveFilterChips({
+  filterState,
+  onFilterChange,
+  accounts = [],
+}: ActiveFilterChipsProps) {
+  const chips: Array<{
+    key: keyof FilterState;
+    label: string;
+    value: string;
+  }> = [];
+
+  // Search term chip
+  if (filterState.searchTerm) {
+    chips.push({
+      key: "searchTerm",
+      label: `Search: "${filterState.searchTerm}"`,
+      value: filterState.searchTerm,
+    });
+  }
+
+  // Account chip
+  if (filterState.selectedAccount) {
+    const account = accounts.find(
+      (acc) => acc.id === filterState.selectedAccount,
+    );
+    const accountName = account
+      ? `${account.name || "Unnamed Account"} (${account.institution_id})`
+      : "Unknown Account";
+    chips.push({
+      key: "selectedAccount",
+      label: accountName,
+      value: filterState.selectedAccount,
+    });
+  }
+
+  // Date range chip
+  if (filterState.startDate || filterState.endDate) {
+    let dateLabel = "Date: ";
+    if (filterState.startDate && filterState.endDate) {
+      if (filterState.startDate === filterState.endDate) {
+        dateLabel += formatDate(filterState.startDate);
+      } else {
+        dateLabel += `${formatDate(filterState.startDate)} - ${formatDate(filterState.endDate)}`;
+      }
+    } else if (filterState.startDate) {
+      dateLabel += `From ${formatDate(filterState.startDate)}`;
+    } else if (filterState.endDate) {
+      dateLabel += `Until ${formatDate(filterState.endDate)}`;
+    }
+
+    chips.push({
+      key: "startDate", // We'll clear both start and end date when removing this chip
+      label: dateLabel,
+      value: `${filterState.startDate}-${filterState.endDate}`,
+    });
+  }
+
+  // Amount range chips
+  if (filterState.minAmount || filterState.maxAmount) {
+    let amountLabel = "Amount: ";
+    const minAmount = filterState.minAmount
+      ? parseFloat(filterState.minAmount)
+      : null;
+    const maxAmount = filterState.maxAmount
+      ? parseFloat(filterState.maxAmount)
+      : null;
+
+    if (minAmount && maxAmount) {
+      amountLabel += `€${minAmount} - €${maxAmount}`;
+    } else if (minAmount) {
+      amountLabel += `≥ €${minAmount}`;
+    } else if (maxAmount) {
+      amountLabel += `≤ €${maxAmount}`;
+    }
+
+    chips.push({
+      key: "minAmount", // We'll clear both min and max when removing this chip
+      label: amountLabel,
+      value: `${filterState.minAmount}-${filterState.maxAmount}`,
+    });
+  }
+
+  const handleRemoveChip = (key: keyof FilterState) => {
+    switch (key) {
+      case "startDate":
+        // Clear both start and end date
+        onFilterChange("startDate", "");
+        onFilterChange("endDate", "");
+        break;
+      case "minAmount":
+        // Clear both min and max amount
+        onFilterChange("minAmount", "");
+        onFilterChange("maxAmount", "");
+        break;
+      default:
+        onFilterChange(key, "");
+    }
+  };
+
+  if (chips.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="text-sm text-gray-600 font-medium">Active filters:</span>
+      {chips.map((chip) => (
+        <Badge
+          key={`${chip.key}-${chip.value}`}
+          variant="secondary"
+          className="pl-3 pr-1 py-1 bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100"
+        >
+          <span className="mr-1 text-xs">{chip.label}</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-4 w-4 p-0 hover:bg-blue-200/50"
+            onClick={() => handleRemoveChip(chip.key)}
+          >
+            <X className="h-3 w-3" />
+            <span className="sr-only">Remove {chip.label} filter</span>
+          </Button>
+        </Badge>
+      ))}
+    </div>
+  );
+}
--- a/frontend/src/components/filters/AdvancedFiltersPopover.tsx
+++ b/frontend/src/components/filters/AdvancedFiltersPopover.tsx
@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { MoreHorizontal, Euro } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface AdvancedFiltersPopoverProps {
+  minAmount: string;
+  maxAmount: string;
+  onMinAmountChange: (value: string) => void;
+  onMaxAmountChange: (value: string) => void;
+}
+
+export function AdvancedFiltersPopover({
+  minAmount,
+  maxAmount,
+  onMinAmountChange,
+  onMaxAmountChange,
+}: AdvancedFiltersPopoverProps) {
+  const [open, setOpen] = useState(false);
+
+  const hasAdvancedFilters = minAmount || maxAmount;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant={hasAdvancedFilters ? "default" : "outline"}
+          size="default"
+          className="relative"
+        >
+          <MoreHorizontal className="h-4 w-4 mr-2" />
+          More
+          {hasAdvancedFilters && (
+            <div className="absolute -top-1 -right-1 h-2 w-2 bg-blue-600 rounded-full" />
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80" align="end">
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Advanced Filters</h4>
+            <p className="text-sm text-muted-foreground">
+              Additional filters for more precise results
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                Amount Range
+              </label>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <label className="text-xs text-muted-foreground">
+                    Minimum
+                  </label>
+                  <div className="relative">
+                    <Euro className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                    <Input
+                      type="number"
+                      placeholder="0.00"
+                      value={minAmount}
+                      onChange={(e) => onMinAmountChange(e.target.value)}
+                      className="pl-8"
+                      step="0.01"
+                      min="0"
+                    />
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <label className="text-xs text-muted-foreground">
+                    Maximum
+                  </label>
+                  <div className="relative">
+                    <Euro className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                    <Input
+                      type="number"
+                      placeholder="1000.00"
+                      value={maxAmount}
+                      onChange={(e) => onMaxAmountChange(e.target.value)}
+                      className="pl-8"
+                      step="0.01"
+                      min="0"
+                    />
+                  </div>
+                </div>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Leave empty for no limit
+              </p>
+            </div>
+
+            {/* Future: Add transaction status filter */}
+            <div className="pt-2 border-t">
+              <div className="text-xs text-muted-foreground">
+                More filters coming soon: transaction status, categories, and
+                more.
+              </div>
+            </div>
+
+            {/* Clear advanced filters */}
+            {hasAdvancedFilters && (
+              <div className="pt-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    onMinAmountChange("");
+                    onMaxAmountChange("");
+                  }}
+                  className="w-full"
+                >
+                  Clear Advanced Filters
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/frontend/src/components/filters/DateRangePicker.tsx
+++ b/frontend/src/components/filters/DateRangePicker.tsx
@@ -0,0 +1,213 @@
+import { useState } from "react";
+import { format } from "date-fns";
+import { Calendar as CalendarIcon, ChevronDown } from "lucide-react";
+import type { DateRange } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface DateRangePickerProps {
+  startDate: string;
+  endDate: string;
+  onDateRangeChange: (startDate: string, endDate: string) => void;
+  className?: string;
+}
+
+interface DatePreset {
+  label: string;
+  getValue: () => { startDate: string; endDate: string };
+}
+
+const datePresets: DatePreset[] = [
+  {
+    label: "Last 7 days",
+    getValue: () => {
+      const endDate = new Date();
+      const startDate = new Date();
+      startDate.setDate(endDate.getDate() - 7);
+      return {
+        startDate: startDate.toISOString().split("T")[0],
+        endDate: endDate.toISOString().split("T")[0],
+      };
+    },
+  },
+  {
+    label: "This week",
+    getValue: () => {
+      const now = new Date();
+      const dayOfWeek = now.getDay();
+      const startOfWeek = new Date(now);
+      startOfWeek.setDate(
+        now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1),
+      ); // Monday as start
+
+      const endOfWeek = new Date(startOfWeek);
+      endOfWeek.setDate(startOfWeek.getDate() + 6);
+
+      return {
+        startDate: startOfWeek.toISOString().split("T")[0],
+        endDate: endOfWeek.toISOString().split("T")[0],
+      };
+    },
+  },
+  {
+    label: "Last 30 days",
+    getValue: () => {
+      const endDate = new Date();
+      const startDate = new Date();
+      startDate.setDate(endDate.getDate() - 30);
+      return {
+        startDate: startDate.toISOString().split("T")[0],
+        endDate: endDate.toISOString().split("T")[0],
+      };
+    },
+  },
+  {
+    label: "This month",
+    getValue: () => {
+      const now = new Date();
+      const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+      const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+      return {
+        startDate: startOfMonth.toISOString().split("T")[0],
+        endDate: endOfMonth.toISOString().split("T")[0],
+      };
+    },
+  },
+  {
+    label: "This year",
+    getValue: () => {
+      const now = new Date();
+      const startOfYear = new Date(now.getFullYear(), 0, 1);
+      const endOfYear = new Date(now.getFullYear(), 11, 31);
+
+      return {
+        startDate: startOfYear.toISOString().split("T")[0],
+        endDate: endOfYear.toISOString().split("T")[0],
+      };
+    },
+  },
+];
+
+export function DateRangePicker({
+  startDate,
+  endDate,
+  onDateRangeChange,
+  className,
+}: DateRangePickerProps) {
+  const [open, setOpen] = useState(false);
+
+  // Convert string dates to Date objects for the calendar
+  const dateRange: DateRange | undefined =
+    startDate && endDate
+      ? {
+          from: new Date(startDate),
+          to: new Date(endDate),
+        }
+      : undefined;
+
+  const handleDateRangeSelect = (range: DateRange | undefined) => {
+    if (range?.from && range?.to) {
+      onDateRangeChange(
+        range.from.toISOString().split("T")[0],
+        range.to.toISOString().split("T")[0],
+      );
+    } else if (range?.from && !range?.to) {
+      onDateRangeChange(
+        range.from.toISOString().split("T")[0],
+        range.from.toISOString().split("T")[0],
+      );
+    }
+  };
+
+  const handlePresetClick = (preset: DatePreset) => {
+    const { startDate: presetStart, endDate: presetEnd } = preset.getValue();
+    onDateRangeChange(presetStart, presetEnd);
+    setOpen(false);
+  };
+
+  const formatDateRange = () => {
+    if (!startDate || !endDate) {
+      return "Select date range";
+    }
+
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+
+    // Check if it matches a preset
+    const matchingPreset = datePresets.find((preset) => {
+      const { startDate: presetStart, endDate: presetEnd } = preset.getValue();
+      return presetStart === startDate && presetEnd === endDate;
+    });
+
+    if (matchingPreset) {
+      return matchingPreset.label;
+    }
+
+    // Format custom range
+    if (startDate === endDate) {
+      return format(start, "MMM d, yyyy");
+    }
+
+    return `${format(start, "MMM d")} - ${format(end, "MMM d, yyyy")}`;
+  };
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn(
+              "justify-between text-left font-normal",
+              !dateRange && "text-muted-foreground",
+            )}
+          >
+            <div className="flex items-center">
+              <CalendarIcon className="mr-2 h-4 w-4" />
+              {formatDateRange()}
+            </div>
+            <ChevronDown className="h-4 w-4 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <div className="flex">
+            {/* Presets */}
+            <div className="border-r p-3 space-y-1">
+              <div className="text-sm font-medium text-gray-700 mb-2">
+                Quick select
+              </div>
+              {datePresets.map((preset) => (
+                <Button
+                  key={preset.label}
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start text-sm"
+                  onClick={() => handlePresetClick(preset)}
+                >
+                  {preset.label}
+                </Button>
+              ))}
+            </div>
+            {/* Calendar */}
+            <Calendar
+              initialFocus
+              mode="range"
+              defaultMonth={dateRange?.from}
+              selected={dateRange}
+              onSelect={handleDateRangeSelect}
+              numberOfMonths={2}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
--- a/frontend/src/components/filters/FilterBar.tsx
+++ b/frontend/src/components/filters/FilterBar.tsx
@@ -0,0 +1,140 @@
+import { Search, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { DateRangePicker } from "./DateRangePicker";
+import { AccountCombobox } from "./AccountCombobox";
+import { ActiveFilterChips } from "./ActiveFilterChips";
+import { AdvancedFiltersPopover } from "./AdvancedFiltersPopover";
+import type { Account } from "../../types/api";
+
+export interface FilterState {
+  searchTerm: string;
+  selectedAccount: string;
+  startDate: string;
+  endDate: string;
+  minAmount: string;
+  maxAmount: string;
+}
+
+export interface FilterBarProps {
+  filterState: FilterState;
+  onFilterChange: (key: keyof FilterState, value: string) => void;
+  onClearFilters: () => void;
+  accounts?: Account[];
+  isSearchLoading?: boolean;
+  showRunningBalance: boolean;
+  onToggleRunningBalance: () => void;
+  className?: string;
+}
+
+export function FilterBar({
+  filterState,
+  onFilterChange,
+  onClearFilters,
+  accounts,
+  isSearchLoading = false,
+  showRunningBalance,
+  onToggleRunningBalance,
+  className,
+}: FilterBarProps) {
+  const hasActiveFilters =
+    filterState.searchTerm ||
+    filterState.selectedAccount ||
+    filterState.startDate ||
+    filterState.endDate ||
+    filterState.minAmount ||
+    filterState.maxAmount;
+
+  const handleDateRangeChange = (startDate: string, endDate: string) => {
+    onFilterChange("startDate", startDate);
+    onFilterChange("endDate", endDate);
+  };
+
+  return (
+    <div className={cn("bg-card rounded-lg shadow border", className)}>
+      {/* Main Filter Bar */}
+      <div className="px-6 py-4">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-card-foreground">
+            Transactions
+          </h3>
+          <Button
+            onClick={onToggleRunningBalance}
+            variant={showRunningBalance ? "default" : "outline"}
+            size="sm"
+          >
+            Balance
+          </Button>
+        </div>
+
+        {/* Primary Filters Row */}
+        <div className="flex flex-wrap items-center gap-3 mb-4">
+          {/* Search Input */}
+          <div className="relative flex-1 min-w-[240px]">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search transactions..."
+              value={filterState.searchTerm}
+              onChange={(e) => onFilterChange("searchTerm", e.target.value)}
+              className="pl-9 pr-8 bg-background"
+            />
+            {isSearchLoading && (
+              <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+                <div className="animate-spin h-4 w-4 border-2 border-border border-t-primary rounded-full"></div>
+              </div>
+            )}
+          </div>
+
+          {/* Account Selection */}
+          <AccountCombobox
+            accounts={accounts}
+            selectedAccount={filterState.selectedAccount}
+            onAccountChange={(accountId) =>
+              onFilterChange("selectedAccount", accountId)
+            }
+            className="w-[200px]"
+          />
+
+          {/* Date Range Picker */}
+          <DateRangePicker
+            startDate={filterState.startDate}
+            endDate={filterState.endDate}
+            onDateRangeChange={handleDateRangeChange}
+            className="w-[240px]"
+          />
+
+          {/* Advanced Filters Button */}
+          <AdvancedFiltersPopover
+            minAmount={filterState.minAmount}
+            maxAmount={filterState.maxAmount}
+            onMinAmountChange={(value) => onFilterChange("minAmount", value)}
+            onMaxAmountChange={(value) => onFilterChange("maxAmount", value)}
+          />
+
+          {/* Clear Filters Button */}
+          {hasActiveFilters && (
+            <Button
+              onClick={onClearFilters}
+              variant="outline"
+              size="sm"
+              className="text-muted-foreground"
+            >
+              <X className="h-4 w-4 mr-1" />
+              Clear All
+            </Button>
+          )}
+        </div>
+
+        {/* Active Filter Chips */}
+        {hasActiveFilters && (
+          <ActiveFilterChips
+            filterState={filterState}
+            onFilterChange={onFilterChange}
+            accounts={accounts}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/filters/index.ts
+++ b/frontend/src/components/filters/index.ts
@@ -0,0 +1,6 @@
+export { FilterBar } from "./FilterBar";
+export { DateRangePicker } from "./DateRangePicker";
+export { AccountCombobox } from "./AccountCombobox";
+export { ActiveFilterChips } from "./ActiveFilterChips";
+export { AdvancedFiltersPopover } from "./AdvancedFiltersPopover";
+export type { FilterState, FilterBarProps } from "./FilterBar";
--- a/frontend/src/components/ui/alert.tsx
+++ b/frontend/src/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/frontend/src/components/ui/calendar.tsx
+++ b/frontend/src/components/ui/calendar.tsx
@@ -0,0 +1,211 @@
+import * as React from "react";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months,
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label,
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday,
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled,
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          );
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            );
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            );
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
--- a/frontend/src/components/ui/command.tsx
+++ b/frontend/src/components/ui/command.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
--- a/frontend/src/components/ui/data-table-pagination.tsx
+++ b/frontend/src/components/ui/data-table-pagination.tsx
@@ -0,0 +1,137 @@
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface DataTablePaginationProps {
+  currentPage: number;
+  totalPages: number;
+  pageSize: number;
+  total: number;
+  hasNext: boolean;
+  hasPrev: boolean;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+}
+
+export function DataTablePagination({
+  currentPage,
+  totalPages,
+  pageSize,
+  total,
+  hasNext,
+  hasPrev,
+  onPageChange,
+  onPageSizeChange,
+}: DataTablePaginationProps) {
+  return (
+    <div className="flex items-center justify-between px-2 py-4">
+      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+        <div className="flex items-center space-x-6 lg:space-x-8">
+          <div className="flex items-center space-x-2">
+            <p className="text-sm font-medium text-foreground">Rows per page</p>
+            <Select
+              value={`${pageSize}`}
+              onValueChange={(value) => {
+                onPageSizeChange(Number(value));
+                onPageChange(1); // Reset to first page when changing page size
+              }}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue placeholder={pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {[10, 25, 50, 100].map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex w-[100px] items-center justify-center text-sm font-medium text-foreground">
+            Page {currentPage} of {totalPages}
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => onPageChange(1)}
+              disabled={currentPage === 1}
+            >
+              <span className="sr-only">Go to first page</span>
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => onPageChange(currentPage - 1)}
+              disabled={!hasPrev}
+            >
+              <span className="sr-only">Go to previous page</span>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => onPageChange(currentPage + 1)}
+              disabled={!hasNext}
+            >
+              <span className="sr-only">Go to next page</span>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => onPageChange(totalPages)}
+              disabled={currentPage === totalPages}
+            >
+              <span className="sr-only">Go to last page</span>
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div className="text-sm text-muted-foreground">
+          Showing {(currentPage - 1) * pageSize + 1} to{" "}
+          {Math.min(currentPage * pageSize, total)} of {total} entries
+        </div>
+      </div>
+
+      {/* Mobile view */}
+      <div className="flex w-full items-center justify-between space-x-4 sm:hidden">
+        <div className="text-sm text-muted-foreground">
+          Page {currentPage} of {totalPages}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(currentPage - 1)}
+            disabled={!hasPrev}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(currentPage + 1)}
+            disabled={!hasNext}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement>
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = "Label";
+
+export { Label };
--- a/frontend/src/components/ui/pagination.tsx
+++ b/frontend/src/components/ui/pagination.tsx
@@ -0,0 +1,118 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import type { ButtonProps } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -0,0 +1,157 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
--- a/frontend/src/components/ui/theme-toggle.tsx
+++ b/frontend/src/components/ui/theme-toggle.tsx
@@ -0,0 +1,52 @@
+import { Monitor, Moon, Sun } from "lucide-react";
+import { Button } from "./button";
+import { useTheme } from "../../contexts/ThemeContext";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  const cycleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else if (theme === "dark") {
+      setTheme("system");
+    } else {
+      setTheme("light");
+    }
+  };
+
+  const getIcon = () => {
+    switch (theme) {
+      case "light":
+        return <Sun className="h-4 w-4" />;
+      case "dark":
+        return <Moon className="h-4 w-4" />;
+      case "system":
+        return <Monitor className="h-4 w-4" />;
+    }
+  };
+
+  const getLabel = () => {
+    switch (theme) {
+      case "light":
+        return "Switch to dark mode";
+      case "dark":
+        return "Switch to system mode";
+      case "system":
+        return "Switch to light mode";
+    }
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={cycleTheme}
+      className="h-8 w-8"
+      title={getLabel()}
+    >
+      {getIcon()}
+      <span className="sr-only">{getLabel()}</span>
+    </Button>
+  );
+}
--- a/frontend/src/contexts/ThemeContext.tsx
+++ b/frontend/src/contexts/ThemeContext.tsx
@@ -0,0 +1,76 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  actualTheme: "light" | "dark";
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const stored = localStorage.getItem("theme") as Theme;
+    return stored || "system";
+  });
+
+  const [actualTheme, setActualTheme] = useState<"light" | "dark">("light");
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    const updateActualTheme = () => {
+      let resolvedTheme: "light" | "dark";
+
+      if (theme === "system") {
+        resolvedTheme = window.matchMedia("(prefers-color-scheme: dark)")
+          .matches
+          ? "dark"
+          : "light";
+      } else {
+        resolvedTheme = theme;
+      }
+
+      setActualTheme(resolvedTheme);
+
+      // Remove previous theme classes
+      root.classList.remove("light", "dark");
+
+      // Add resolved theme class
+      root.classList.add(resolvedTheme);
+    };
+
+    updateActualTheme();
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (theme === "system") {
+        updateActualTheme();
+      }
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+
+    // Store theme preference
+    localStorage.setItem("theme", theme);
+
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, actualTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,68 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -56,13 +56,16 @@ export const apiClient = {
  },

  // Get historical balances for balance progression chart
-  getHistoricalBalances: async (days?: number, accountId?: string): Promise<Balance[]> => {
+  getHistoricalBalances: async (
+    days?: number,
+    accountId?: string,
+  ): Promise<Balance[]> => {
    const queryParams = new URLSearchParams();
    if (days) queryParams.append("days", days.toString());
    if (accountId) queryParams.append("account_id", accountId);
-    
+
    const response = await api.get<ApiResponse<Balance[]>>(
-      `/balances/history?${queryParams.toString()}`
+      `/balances/history?${queryParams.toString()}`,
    );
    return response.data.data;
  },
@@ -84,6 +87,8 @@ export const apiClient = {
    perPage?: number;
    search?: string;
    summaryOnly?: boolean;
+    minAmount?: number;
+    maxAmount?: number;
  }): Promise<ApiResponse<Transaction[]>> => {
    const queryParams = new URLSearchParams();

@@ -97,6 +102,12 @@ export const apiClient = {
    if (params?.summaryOnly !== undefined) {
      queryParams.append("summary_only", params.summaryOnly.toString());
    }
+    if (params?.minAmount !== undefined) {
+      queryParams.append("min_amount", params.minAmount.toString());
+    }
+    if (params?.maxAmount !== undefined) {
+      queryParams.append("max_amount", params.maxAmount.toString());
+    }

    const response = await api.get<ApiResponse<Transaction[]>>(
      `/transactions?${queryParams.toString()}`,
@@ -161,23 +172,52 @@ export const apiClient = {
  getTransactionStats: async (days?: number): Promise<TransactionStats> => {
    const queryParams = new URLSearchParams();
    if (days) queryParams.append("days", days.toString());
-    
+
    const response = await api.get<ApiResponse<TransactionStats>>(
-      `/transactions/stats?${queryParams.toString()}`
+      `/transactions/stats?${queryParams.toString()}`,
    );
    return response.data.data;
  },

  // Get all transactions for analytics (no pagination)
-  getTransactionsForAnalytics: async (days?: number): Promise<AnalyticsTransaction[]> => {
+  getTransactionsForAnalytics: async (
+    days?: number,
+  ): Promise<AnalyticsTransaction[]> => {
    const queryParams = new URLSearchParams();
    if (days) queryParams.append("days", days.toString());
-    
+
    const response = await api.get<ApiResponse<AnalyticsTransaction[]>>(
-      `/transactions/analytics?${queryParams.toString()}`
+      `/transactions/analytics?${queryParams.toString()}`,
    );
    return response.data.data;
  },
+
+  // Get monthly transaction statistics (pre-calculated)
+  getMonthlyTransactionStats: async (
+    days?: number,
+  ): Promise<
+    Array<{
+      month: string;
+      income: number;
+      expenses: number;
+      net: number;
+    }>
+  > => {
+    const queryParams = new URLSearchParams();
+    if (days) queryParams.append("days", days.toString());
+
+    const response = await api.get<
+      ApiResponse<
+        Array<{
+          month: string;
+          income: number;
+          expenses: number;
+          net: number;
+        }>
+      >
+    >(`/transactions/monthly-stats?${queryParams.toString()}`);
+    return response.data.data;
+  },
 };

 export default apiClient;
--- a/frontend/src/lib/timePeriods.ts
+++ b/frontend/src/lib/timePeriods.ts
@@ -16,4 +16,4 @@ export const TIME_PERIODS: TimePeriod[] = [
  { label: "Last 6 months", days: 180, value: "6m" },
  { label: "Year to Date", days: getDaysFromYearStart(), value: "ytd" },
  { label: "Last 365 days", days: 365, value: "365d" },
-];
+];
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,62 +1,25 @@
 import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";

 export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs);
+  return twMerge(clsx(inputs));
 }

 export function formatCurrency(
  amount: number,
  currency: string = "EUR",
 ): string {
-  // Validate currency code - must be 3 letters and a valid ISO 4217 code
-  const validCurrency =
-    currency && /^[A-Z]{3}$/.test(currency) ? currency : "EUR";
-
-  try {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: validCurrency,
-    }).format(amount);
-  } catch {
-    // Fallback if currency is still invalid
-    console.warn(`Invalid currency code: ${currency}, falling back to EUR`);
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "EUR",
-    }).format(amount);
-  }
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+  }).format(amount);
 }

-export function formatDate(date: string): string {
-  if (!date) return "No date";
-
-  const parsedDate = new Date(date);
-  if (isNaN(parsedDate.getTime())) {
-    console.warn("Invalid date string:", date);
-    return "Invalid date";
-  }
-
-  return new Intl.DateTimeFormat("en-US", {
+export function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
-  }).format(parsedDate);
-}
-
-export function formatDateTime(date: string): string {
-  if (!date) return "No date";
-
-  const parsedDate = new Date(date);
-  if (isNaN(parsedDate.getTime())) {
-    console.warn("Invalid date string:", date);
-    return "Invalid date";
-  }
-
-  return new Intl.DateTimeFormat("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  }).format(parsedDate);
+  });
 }
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ThemeProvider } from "./contexts/ThemeContext";
 import "./index.css";
 import { routeTree } from "./routeTree.gen";

@@ -19,7 +20,9 @@ const queryClient = new QueryClient({
 createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <ThemeProvider>
+        <RouterProvider router={router} />
+      </ThemeProvider>
    </QueryClientProvider>
  </StrictMode>,
 );
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -7,13 +7,13 @@ function RootLayout() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
-    <div className="flex h-screen bg-gray-100">
+    <div className="flex h-screen bg-background">
      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />

      {/* Mobile overlay */}
      {sidebarOpen && (
        <div
-          className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}
--- a/frontend/src/routes/analytics.tsx
+++ b/frontend/src/routes/analytics.tsx
@@ -14,13 +14,14 @@ import BalanceChart from "../components/analytics/BalanceChart";
 import TransactionDistribution from "../components/analytics/TransactionDistribution";
 import MonthlyTrends from "../components/analytics/MonthlyTrends";
 import TimePeriodFilter from "../components/analytics/TimePeriodFilter";
+import { Card, CardContent } from "../components/ui/card";
 import type { TimePeriod } from "../lib/timePeriods";
 import { TIME_PERIODS } from "../lib/timePeriods";

 function AnalyticsDashboard() {
  // Default to Last 365 days
  const [selectedPeriod, setSelectedPeriod] = useState<TimePeriod>(
-    TIME_PERIODS.find((p) => p.value === "365d") || TIME_PERIODS[3]
+    TIME_PERIODS.find((p) => p.value === "365d") || TIME_PERIODS[3],
  );

  // Fetch analytics data
@@ -45,15 +46,15 @@ function AnalyticsDashboard() {
    return (
      <div className="p-6">
        <div className="animate-pulse">
-          <div className="h-8 bg-gray-200 rounded w-48 mb-6"></div>
+          <div className="h-8 bg-muted rounded w-48 mb-6"></div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            {[...Array(3)].map((_, i) => (
-              <div key={i} className="h-32 bg-gray-200 rounded"></div>
+              <div key={i} className="h-32 bg-muted rounded"></div>
            ))}
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-            <div className="h-96 bg-gray-200 rounded"></div>
-            <div className="h-96 bg-gray-200 rounded"></div>
+            <div className="h-96 bg-muted rounded"></div>
+            <div className="h-96 bg-muted rounded"></div>
          </div>
        </div>
      </div>
@@ -63,11 +64,14 @@ function AnalyticsDashboard() {
  return (
    <div className="p-6 space-y-8">
      {/* Time Period Filter */}
-      <TimePeriodFilter
-        selectedPeriod={selectedPeriod}
-        onPeriodChange={setSelectedPeriod}
-        className="bg-white rounded-lg shadow p-4 border border-gray-200"
-      />
+      <Card>
+        <CardContent className="p-4">
+          <TimePeriodFilter
+            selectedPeriod={selectedPeriod}
+            onPeriodChange={setSelectedPeriod}
+          />
+        </CardContent>
+      </Card>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -101,7 +105,9 @@ function AnalyticsDashboard() {
          subtitle="Income minus expenses"
          icon={CreditCard}
          className={
-            (stats?.net_change || 0) >= 0 ? "border-green-200" : "border-red-200"
+            (stats?.net_change || 0) >= 0
+              ? "border-green-200"
+              : "border-red-200"
          }
        />
        <StatCard
@@ -120,18 +126,24 @@ function AnalyticsDashboard() {

      {/* Charts */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <div className="bg-white rounded-lg shadow p-6 border border-gray-200">
-          <BalanceChart data={balances || []} accounts={accounts || []} />
-        </div>
-        <div className="bg-white rounded-lg shadow p-6 border border-gray-200">
-          <TransactionDistribution accounts={accounts || []} />
-        </div>
+        <Card>
+          <CardContent className="p-6">
+            <BalanceChart data={balances || []} accounts={accounts || []} />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-6">
+            <TransactionDistribution accounts={accounts || []} />
+          </CardContent>
+        </Card>
      </div>

      {/* Monthly Trends */}
-      <div className="bg-white rounded-lg shadow p-6 border border-gray-200">
-        <MonthlyTrends days={selectedPeriod.days} />
-      </div>
+      <Card>
+        <CardContent className="p-6">
+          <MonthlyTrends days={selectedPeriod.days} />
+        </CardContent>
+      </Card>
    </div>
  );
 }
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,8 +1,57 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: ["class"],
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
-    extend: {},
+    extend: {
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
+      },
+    },
  },
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [require("@tailwindcss/forms"), require("tailwindcss-animate")],
 };
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -15,6 +15,12 @@
    "noEmit": true,
    "jsx": "react-jsx",

+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -3,5 +3,11 @@
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -5,4 +5,9 @@ import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [TanStackRouterVite(), react()],
+  resolve: {
+    alias: {
+      "@": "/src",
+    },
+  },
 });
--- a/leggen/api/routes/transactions.py
+++ b/leggen/api/routes/transactions.py
@@ -253,3 +253,38 @@ async def get_transactions_for_analytics(
        raise HTTPException(
            status_code=500, detail=f"Failed to get analytics transactions: {str(e)}"
        ) from e
+
+
+@router.get("/transactions/monthly-stats", response_model=APIResponse)
+async def get_monthly_transaction_stats(
+    days: int = Query(default=365, description="Number of days to include"),
+    account_id: Optional[str] = Query(default=None, description="Filter by account ID"),
+) -> APIResponse:
+    """Get monthly transaction statistics aggregated by the database"""
+    try:
+        # Date range for monthly stats
+        end_date = datetime.now()
+        start_date = end_date - timedelta(days=days)
+
+        # Format dates for database query
+        date_from = start_date.isoformat()
+        date_to = end_date.isoformat()
+
+        # Get monthly aggregated stats from database
+        monthly_stats = await database_service.get_monthly_transaction_stats_from_db(
+            account_id=account_id,
+            date_from=date_from,
+            date_to=date_to,
+        )
+
+        return APIResponse(
+            success=True,
+            data=monthly_stats,
+            message=f"Retrieved monthly stats for last {days} days",
+        )
+
+    except Exception as e:
+        logger.error(f"Failed to get monthly transaction stats: {e}")
+        raise HTTPException(
+            status_code=500, detail=f"Failed to get monthly stats: {str(e)}"
+        ) from e
--- a/leggen/services/database_service.py
+++ b/leggen/services/database_service.py
@@ -1,6 +1,5 @@
 import json
 import sqlite3
-from collections import defaultdict
 from datetime import datetime, timedelta
 from typing import Any, Dict, List, Optional

@@ -1159,8 +1158,21 @@ class DatabaseService:
        cursor = conn.cursor()

        try:
-            # Get current balance for each account/type to use as the final balance
-            current_balances_query = """
+            cutoff_date = (datetime.now() - timedelta(days=days)).date().isoformat()
+            today_date = datetime.now().date().isoformat()
+
+            # Single SQL query to generate historical balances using window functions
+            query = """
+            WITH RECURSIVE date_series AS (
+                -- Generate weekly dates from cutoff_date to today
+                SELECT date(?) as ref_date
+                UNION ALL
+                SELECT date(ref_date, '+7 days')
+                FROM date_series
+                WHERE ref_date < date(?)
+            ),
+            current_balances AS (
+                -- Get current balance for each account/type
                SELECT account_id, type, amount, currency
                FROM balances b1
                WHERE b1.timestamp = (
@@ -1168,116 +1180,150 @@ class DatabaseService:
                    FROM balances b2
                    WHERE b2.account_id = b1.account_id AND b2.type = b1.type
                )
+                {account_filter}
+                AND b1.type = 'closingBooked'  -- Focus on closingBooked for charts
+            ),
+            historical_points AS (
+                -- Calculate balance at each weekly point by subtracting future transactions
+                SELECT
+                    cb.account_id,
+                    cb.type as balance_type,
+                    cb.currency,
+                    ds.ref_date,
+                    cb.amount - COALESCE(
+                        (SELECT SUM(t.transactionValue)
+                         FROM transactions t
+                         WHERE t.accountId = cb.account_id
+                         AND date(t.transactionDate) > ds.ref_date), 0
+                    ) as balance_amount
+                FROM current_balances cb
+                CROSS JOIN date_series ds
+            )
+            SELECT
+                account_id || '_' || balance_type || '_' || ref_date as id,
+                account_id,
+                balance_amount,
+                balance_type,
+                currency,
+                ref_date as reference_date
+            FROM historical_points
+            ORDER BY account_id, ref_date
            """
-            params = []

+            # Build parameters and account filter
+            params = [cutoff_date, today_date]
            if account_id:
-                current_balances_query += " AND b1.account_id = ?"
+                account_filter = "AND b1.account_id = ?"
                params.append(account_id)
-
-            cursor.execute(current_balances_query, params)
-            current_balances = {
-                (row["account_id"], row["type"]): {
-                    "amount": row["amount"],
-                    "currency": row["currency"],
-                }
-                for row in cursor.fetchall()
-            }
-
-            # Get transactions for the specified period, ordered by date descending
-            cutoff_date = (datetime.now() - timedelta(days=days)).isoformat()
-
-            transactions_query = """
-                SELECT accountId, transactionDate, transactionValue
-                FROM transactions
-                WHERE transactionDate >= ?
-            """
-
-            if account_id:
-                transactions_query += " AND accountId = ?"
-                params = [cutoff_date, account_id]
            else:
-                params = [cutoff_date]
+                account_filter = ""

-            transactions_query += " ORDER BY transactionDate DESC"
+            # Format the query with conditional filter
+            formatted_query = query.format(account_filter=account_filter)

-            cursor.execute(transactions_query, params)
-            transactions = cursor.fetchall()
-
-            # Calculate historical balances by working backwards from current balance
-            historical_balances = []
-            account_running_balances: dict[str, dict[str, float]] = {}
-
-            # Initialize running balances with current balances
-            for (acc_id, balance_type), balance_info in current_balances.items():
-                if acc_id not in account_running_balances:
-                    account_running_balances[acc_id] = {}
-                account_running_balances[acc_id][balance_type] = balance_info["amount"]
-
-            # Group transactions by date
-            transactions_by_date = defaultdict(list)
-
-            for txn in transactions:
-                date_str = txn["transactionDate"][:10]  # Extract just the date part
-                transactions_by_date[date_str].append(txn)
-
-            # Generate historical balance points
-            # Start from today and work backwards
-            current_date = datetime.now().date()
-
-            for day_offset in range(0, days, 7):  # Sample every 7 days for performance
-                target_date = current_date - timedelta(days=day_offset)
-                target_date_str = target_date.isoformat()
-
-                # For each account, create balance entries
-                for acc_id in account_running_balances:
-                    for balance_type in [
-                        "closingBooked"
-                    ]:  # Focus on closingBooked for the chart
-                        if balance_type in account_running_balances[acc_id]:
-                            balance_amount = account_running_balances[acc_id][
-                                balance_type
-                            ]
-                            currency = current_balances.get(
-                                (acc_id, balance_type), {}
-                            ).get("currency", "EUR")
-
-                            historical_balances.append(
-                                {
-                                    "id": f"{acc_id}_{balance_type}_{target_date_str}",
-                                    "account_id": acc_id,
-                                    "balance_amount": balance_amount,
-                                    "balance_type": balance_type,
-                                    "currency": currency,
-                                    "reference_date": target_date_str,
-                                    "created_at": None,
-                                    "updated_at": None,
-                                }
-                            )
-
-                # Subtract transactions that occurred on this date and later dates
-                # to simulate going back in time
-                for date_str in list(transactions_by_date.keys()):
-                    if date_str >= target_date_str:
-                        for txn in transactions_by_date[date_str]:
-                            acc_id = txn["accountId"]
-                            amount = txn["transactionValue"]
-
-                            if acc_id in account_running_balances:
-                                for balance_type in account_running_balances[acc_id]:
-                                    account_running_balances[acc_id][balance_type] -= (
-                                        amount
-                                    )
-
-                        # Remove processed transactions to avoid double-processing
-                        del transactions_by_date[date_str]
+            cursor.execute(formatted_query, params)
+            rows = cursor.fetchall()

            conn.close()
-
-            # Sort by date for proper chronological order
-            historical_balances.sort(key=lambda x: x["reference_date"])
-
-            return historical_balances
+            return [dict(row) for row in rows]
+
+        except Exception as e:
+            conn.close()
+            raise e
+
+    async def get_monthly_transaction_stats_from_db(
+        self,
+        account_id: Optional[str] = None,
+        date_from: Optional[str] = None,
+        date_to: Optional[str] = None,
+    ) -> List[Dict[str, Any]]:
+        """Get monthly transaction statistics aggregated by the database"""
+        if not self.sqlite_enabled:
+            logger.warning("SQLite database disabled, cannot read monthly stats")
+            return []
+
+        try:
+            monthly_stats = self._get_monthly_transaction_stats(
+                account_id=account_id,
+                date_from=date_from,
+                date_to=date_to,
+            )
+            logger.debug(
+                f"Retrieved {len(monthly_stats)} monthly stat points from database"
+            )
+            return monthly_stats
+        except Exception as e:
+            logger.error(f"Failed to get monthly transaction stats from database: {e}")
+            return []
+
+    def _get_monthly_transaction_stats(
+        self,
+        account_id: Optional[str] = None,
+        date_from: Optional[str] = None,
+        date_to: Optional[str] = None,
+    ) -> List[Dict[str, Any]]:
+        """Get monthly transaction statistics from SQLite database"""
+        db_path = path_manager.get_database_path()
+        if not db_path.exists():
+            return []
+
+        conn = sqlite3.connect(str(db_path))
+        conn.row_factory = sqlite3.Row
+        cursor = conn.cursor()
+
+        try:
+            # SQL query to aggregate transactions by month
+            query = """
+            SELECT
+                strftime('%Y-%m', transactionDate) as month,
+                COALESCE(SUM(CASE WHEN transactionValue > 0 THEN transactionValue ELSE 0 END), 0) as income,
+                COALESCE(SUM(CASE WHEN transactionValue < 0 THEN ABS(transactionValue) ELSE 0 END), 0) as expenses,
+                COALESCE(SUM(transactionValue), 0) as net
+            FROM transactions
+            WHERE 1=1
+            """
+
+            params = []
+
+            if account_id:
+                query += " AND accountId = ?"
+                params.append(account_id)
+
+            if date_from:
+                query += " AND transactionDate >= ?"
+                params.append(date_from)
+
+            if date_to:
+                query += " AND transactionDate <= ?"
+                params.append(date_to)
+
+            query += """
+            GROUP BY strftime('%Y-%m', transactionDate)
+            ORDER BY month ASC
+            """
+
+            cursor.execute(query, params)
+            rows = cursor.fetchall()
+
+            # Convert to desired format with proper month display
+            monthly_stats = []
+            for row in rows:
+                # Convert YYYY-MM to display format like "Mar 2024"
+                year, month_num = row["month"].split("-")
+                month_date = datetime.strptime(f"{year}-{month_num}-01", "%Y-%m-%d")
+                display_month = month_date.strftime("%b %Y")
+
+                monthly_stats.append(
+                    {
+                        "month": display_month,
+                        "income": round(row["income"], 2),
+                        "expenses": round(row["expenses"], 2),
+                        "net": round(row["net"], 2),
+                    }
+                )
+
+            conn.close()
+            return monthly_stats

        except Exception as e:
            conn.close()
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "leggen"
-version = "2025.9.10"
+version = "2025.9.11"
 description = "An Open Banking CLI"
 authors = [{ name = "Elisiário Couto", email = "elisiario@couto.io" }]
 requires-python = "~=3.13.0"
--- a/uv.lock
+++ b/uv.lock
@@ -220,7 +220,7 @@ wheels = [

 [[package]]
 name = "leggen"
-version = "2025.9.10"
+version = "2025.9.11"
 source = { editable = "." }
 dependencies = [
    { name = "apscheduler" },
Author	SHA1	Message	Date
Elisiário Couto	3352e110b8	chore(ci): Bump version to 2025.9.11	2025-09-15 01:49:51 +01:00
Elisiário Couto	74a700ff87	fix(frontend): Add ignore rules for eslint on shadcn components.	2025-09-15 01:47:50 +01:00
Elisiário Couto	66db34c712	feat(frontend): Complete shadcn/ui migration with dark mode support and analytics updates. - Convert all analytics components to use shadcn Card and semantic colors - Update RawTransactionModal with proper shadcn styling and theme support - Fix all remaining hardcoded colors to use CSS variables (bg-card, text-foreground, etc.) - Ensure consistent theming across light/dark modes for all components - Add custom tooltips with semantic colors for chart components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-09-15 01:30:34 +01:00
Elisiário Couto	eb27f19196	feat(frontend): Replace heavy filter UI with modern shadcn/ui inline filter bar. - Replace large collapsible filter panel with streamlined horizontal filter bar - Integrate shadcn/ui component library with Button, Popover, Select, Badge, Input, Calendar, Command components - Create modular filter components: FilterBar, DateRangePicker, AccountCombobox, ActiveFilterChips, AdvancedFiltersPopover - Add enhanced date picker with smart presets (Last 7 days, This week, This month, This year) and calendar selection - Implement searchable account selection with better UX and autocomplete - Add active filter chips with one-click individual removal for clear visual feedback - Move secondary filters (amount range) to clean popover interface - Consolidate filter state management into single FilterState object with proper TypeScript coverage - Maintain all existing functionality while reducing vertical space usage by 60% - Add responsive design that adapts to desktop, tablet, and mobile screen sizes - Include built-in accessibility features (keyboard navigation, ARIA support) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-09-15 00:21:59 +01:00
Elisiário Couto	969776fb53	feat(frontend): Enhance transactions page with advanced filtering and UI improvements. - Fix amount range filters (min/max) connection to API parameters - Add enhanced quick date filters: "This week", "This year" alongside existing options - Create skeleton loading components (TransactionSkeleton, FiltersSkeleton) to replace simple spinner - Add running balance column with toggle functionality for both desktop and mobile views - Consolidate TransactionsList.tsx and TransactionsTable.tsx into single comprehensive component - Improve UI design with better visual hierarchy, spacing, and responsive layout - Add proper TypeScript types and fix linting issues 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-09-14 23:57:23 +01:00
Elisiário Couto	077e2bb1ad	refactor(analytics): Simplify analytics endpoints and eliminate client-side processing. - Add /transactions/monthly-stats endpoint with SQL aggregation - Replace client-side monthly processing with server-side calculations - Reduce data transfer by 99.5% (2,507 → 13 records for yearly data) - Simplify MonthlyTrends component by removing 40+ lines of aggregation logic - Clean up unused imports and interfaces 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-09-14 23:02:58 +01:00