diff --git a/package-lock.json b/package-lock.json
index a1d7782..eb5fb8f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "next": "16.1.1",
         "react": "19.2.3",
         "react-dom": "19.2.3",
-        "recharts": "^3.6.0",
+        "recharts": "^2.15.4",
         "tailwind-merge": "^3.4.0"
       },
       "devDependencies": {
@@ -47,6 +47,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@balena/dockerignore": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@balena/dockerignore/-/dockerignore-1.0.2.tgz",
@@ -1779,54 +1788,6 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
-    "node_modules/@reduxjs/toolkit": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
-      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@standard-schema/spec": "^1.0.0",
-        "@standard-schema/utils": "^0.3.0",
-        "immer": "^11.0.0",
-        "redux": "^5.0.1",
-        "redux-thunk": "^3.1.0",
-        "reselect": "^5.1.0"
-      },
-      "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
-        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-redux": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@reduxjs/toolkit/node_modules/immer": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.0.tgz",
-      "integrity": "sha512-dlzb07f5LDY+tzs+iLCSXV2yuhaYfezqyZQc+n6baLECWkOMEWxkECAOnXL0ba7lsA25fM9b2jtzpu/uxo1a7g==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
-      }
-    },
-    "node_modules/@standard-schema/spec": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
-      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
-      "license": "MIT"
-    },
-    "node_modules/@standard-schema/utils": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
-      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
-      "license": "MIT"
-    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -2244,12 +2205,6 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "license": "MIT"
     },
-    "node_modules/@types/use-sync-external-store": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
-      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
-      "license": "MIT"
-    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2480,7 +2435,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/d3-array": {
@@ -2676,6 +2630,16 @@
         "node": ">= 8.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -2705,16 +2669,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/es-toolkit": {
-      "version": "1.43.0",
-      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.43.0.tgz",
-      "integrity": "sha512-SKCT8AsWvYzBBuUqMk4NPwFlSdqLpJwmy6AP322ERn8W2YLIB6JBXnwMI2Qsh2gfphT3q7EKAxKb23cvFHFwKA==",
-      "license": "MIT",
-      "workspaces": [
-        "docs",
-        "benchmarks"
-      ]
-    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -2725,11 +2679,20 @@
       }
     },
     "node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.4.0.tgz",
+      "integrity": "sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -2781,16 +2744,6 @@
       ],
       "license": "BSD-3-Clause"
     },
-    "node_modules/immer": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
-      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
-      }
-    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -2825,6 +2778,12 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
     "node_modules/lightningcss": {
       "version": "1.30.2",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
@@ -3086,6 +3045,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -3098,6 +3063,18 @@
       "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
       "license": "Apache-2.0"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lucide-react": {
       "version": "0.562.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
@@ -3235,6 +3212,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3279,6 +3265,23 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/protobufjs": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
@@ -3335,34 +3338,10 @@
       }
     },
     "node_modules/react-is": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
-      "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/react-redux": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
-      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/use-sync-external-store": "^0.0.6",
-        "use-sync-external-store": "^1.4.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^18.2.25 || ^19",
-        "react": "^18.0 || ^19",
-        "redux": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "redux": {
-          "optional": true
-        }
-      }
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
     },
     "node_modules/react-remove-scroll": {
       "version": "2.7.2",
@@ -3411,6 +3390,21 @@
         }
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -3433,6 +3427,22 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -3448,48 +3458,35 @@
       }
     },
     "node_modules/recharts": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.6.0.tgz",
-      "integrity": "sha512-L5bjxvQRAe26RlToBAziKUB7whaGKEwD3znoM6fz3DrTowCIC/FnJYnuq1GEzB8Zv2kdTfaxQfi5GoH0tBinyg==",
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
+      "integrity": "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==",
       "license": "MIT",
-      "workspaces": [
-        "www"
-      ],
       "dependencies": {
-        "@reduxjs/toolkit": "1.x.x || 2.x.x",
-        "clsx": "^2.1.1",
-        "decimal.js-light": "^2.5.1",
-        "es-toolkit": "^1.39.3",
-        "eventemitter3": "^5.0.1",
-        "immer": "^10.1.1",
-        "react-redux": "8.x.x || 9.x.x",
-        "reselect": "5.1.1",
-        "tiny-invariant": "^1.3.3",
-        "use-sync-external-store": "^1.2.2",
-        "victory-vendor": "^37.0.2"
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/redux": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
-      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
-    },
-    "node_modules/redux-thunk": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
-      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
       "license": "MIT",
-      "peerDependencies": {
-        "redux": "^5.0.0"
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
       }
     },
     "node_modules/require-directory": {
@@ -3501,12 +3498,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/reselect": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
-      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
-      "license": "MIT"
-    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -3837,15 +3828,6 @@
         }
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
-      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3866,9 +3848,9 @@
       }
     },
     "node_modules/victory-vendor": {
-      "version": "37.3.6",
-      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
-      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
       "license": "MIT AND ISC",
       "dependencies": {
         "@types/d3-array": "^3.0.3",
diff --git a/package.json b/package.json
index 42af77d..dbeb7df 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "next": "16.1.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "recharts": "^3.6.0",
+    "recharts": "^2.15.4",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
diff --git a/src/app/applications/page.tsx b/src/app/applications/page.tsx
index db70541..d983248 100644
--- a/src/app/applications/page.tsx
+++ b/src/app/applications/page.tsx
@@ -89,14 +89,16 @@ export default function ApplicationsPage() {
       title="Applications"
       subtitle="Manage deployed applications"
     >
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-2">
+      {/* Header */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div className="flex flex-wrap items-center gap-2">
           <Badge>{applications.length} apps</Badge>
           <Badge>
             {applications.filter((a) => a.status === "running").length} running
           </Badge>
         </div>
-        <Button size="sm" className="gap-2">
+
+        <Button size="sm" className="gap-2 w-full sm:w-auto">
           <Plus className="w-4 h-4" />
           Deploy Application
         </Button>
@@ -106,28 +108,30 @@ export default function ApplicationsPage() {
         {applications.map((app) => (
           <Card key={app.id}>
             <CardContent className="p-4">
-              <div className="grid grid-cols-12 gap-4 items-center">
+              <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:items-center">
                 {/* Status & Name */}
-                <div className="col-span-3 flex items-center gap-3">
+                <div className="flex items-center gap-3 md:col-span-3">
                   <StatusIndicator status={app.status} />
-                  <div>
+                  <div className="min-w-0">
                     <div className="font-mono text-sm font-medium">
                       {app.name}
                     </div>
-                    <div className="text-xs text-muted-foreground font-mono truncate max-w-48">
+                    <div className="text-xs text-muted-foreground font-mono truncate">
                       {app.image}
                     </div>
                   </div>
                 </div>
 
                 {/* Replicas */}
-                <div className="col-span-1">
-                  <div className="text-xs text-muted-foreground">Replicas</div>
+                <div className="flex justify-between md:block md:col-span-1">
+                  <span className="text-xs text-muted-foreground md:hidden">
+                    Replicas
+                  </span>
                   <div className="font-mono text-sm">{app.replicas}</div>
                 </div>
 
                 {/* CPU */}
-                <div className="col-span-2">
+                <div className="md:col-span-2">
                   <div className="text-xs text-muted-foreground mb-1">CPU</div>
                   <div className="flex items-center gap-2">
                     <Progress value={app.cpu} className="w-full" />
@@ -136,7 +140,7 @@ export default function ApplicationsPage() {
                 </div>
 
                 {/* Memory */}
-                <div className="col-span-2">
+                <div className="md:col-span-2">
                   <div className="text-xs text-muted-foreground mb-1">
                     Memory
                   </div>
@@ -147,13 +151,15 @@ export default function ApplicationsPage() {
                 </div>
 
                 {/* Network */}
-                <div className="col-span-1">
-                  <div className="text-xs text-muted-foreground">Network</div>
+                <div className="flex justify-between md:block md:col-span-1">
+                  <span className="text-xs text-muted-foreground md:hidden">
+                    Network
+                  </span>
                   <div className="font-mono text-xs">{app.network}</div>
                 </div>
 
                 {/* Ports */}
-                <div className="col-span-2">
+                <div className="md:col-span-2">
                   <div className="text-xs text-muted-foreground mb-1">
                     Ports
                   </div>
@@ -171,7 +177,7 @@ export default function ApplicationsPage() {
                 </div>
 
                 {/* Actions */}
-                <div className="col-span-1 flex items-center justify-end gap-1">
+                <div className="flex items-center justify-end gap-1 md:col-span-1">
                   {app.status === "running" ? (
                     <Button variant="ghost" size="icon-sm">
                       <Square className="w-3 h-3" />
diff --git a/src/app/containers/page.tsx b/src/app/containers/page.tsx
index fe21e34..dc3542d 100644
--- a/src/app/containers/page.tsx
+++ b/src/app/containers/page.tsx
@@ -116,7 +116,8 @@ export default function ContainersPage() {
       title="Containers"
       subtitle="View and manage container instances"
     >
-      <div className="flex items-center gap-2 mb-6">
+      {/* Stats */}
+      <div className="flex flex-wrap gap-2 mb-6">
         <Badge>{containers.length} containers</Badge>
         <Badge>
           {containers.filter((c) => c.status === "running").length} running
@@ -131,98 +132,161 @@ export default function ContainersPage() {
 
       <Card>
         <CardContent className="p-0">
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-border">
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Container
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Image
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Node
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Status
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Uptime
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  CPU
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Memory
-                </th>
-                <th className="text-right text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {containers.map((container) => (
-                <tr key={container.id} className="data-table-row">
-                  <td className="py-3 px-4">
-                    <div className="flex items-center gap-2">
-                      <Terminal className="w-4 h-4 text-muted-foreground" />
-                      <div>
-                        <div className="font-mono text-sm">
-                          {container.name}
-                        </div>
-                        <div className="text-[10px] text-muted-foreground font-mono">
-                          {container.id}
+          {/* ================= DESKTOP TABLE ================= */}
+          <div className="hidden md:block">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-border">
+                  {[
+                    "Container",
+                    "Image",
+                    "Node",
+                    "Status",
+                    "Uptime",
+                    "CPU",
+                    "Memory",
+                    "Actions",
+                  ].map((h) => (
+                    <th
+                      key={h}
+                      className={`text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4 ${
+                        h === "Actions" ? "text-right" : ""
+                      }`}
+                    >
+                      {h}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+
+              <tbody>
+                {containers.map((container) => (
+                  <tr key={container.id} className="data-table-row">
+                    <td className="py-3 px-4">
+                      <div className="flex items-center gap-2">
+                        <Terminal className="w-4 h-4 text-muted-foreground" />
+                        <div>
+                          <div className="font-mono text-sm">
+                            {container.name}
+                          </div>
+                          <div className="text-[10px] text-muted-foreground font-mono">
+                            {container.id}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </td>
-                  <td className="py-3 px-4">
-                    <span className="font-mono text-xs text-muted-foreground">
+                    </td>
+
+                    <td className="py-3 px-4 font-mono text-xs text-muted-foreground">
                       {container.image}
-                    </span>
-                  </td>
-                  <td className="py-3 px-4">
-                    <Badge>{container.node}</Badge>
-                  </td>
-                  <td className="py-3 px-4">
-                    <StatusIndicator status={container.status} showLabel />
-                  </td>
-                  <td className="py-3 px-4">
-                    <span className="font-mono text-xs">
+                    </td>
+
+                    <td className="py-3 px-4">
+                      <Badge>{container.node}</Badge>
+                    </td>
+
+                    <td className="py-3 px-4">
+                      <StatusIndicator status={container.status} showLabel />
+                    </td>
+
+                    <td className="py-3 px-4 font-mono text-xs">
                       {container.uptime}
-                    </span>
-                  </td>
-                  <td className="py-3 px-4">
-                    <span className="font-mono text-xs">{container.cpu}</span>
-                  </td>
-                  <td className="py-3 px-4">
-                    <span className="font-mono text-xs">
+                    </td>
+
+                    <td className="py-3 px-4 font-mono text-xs">
+                      {container.cpu}
+                    </td>
+
+                    <td className="py-3 px-4 font-mono text-xs">
                       {container.memory}
-                    </span>
-                  </td>
-                  <td className="py-3 px-4">
-                    <div className="flex items-center justify-end gap-1">
-                      {container.status === "running" ? (
+                    </td>
+
+                    <td className="py-3 px-4">
+                      <div className="flex justify-end gap-1">
+                        {container.status === "running" ? (
+                          <Button variant="ghost" size="icon-sm">
+                            <Square className="w-3 h-3" />
+                          </Button>
+                        ) : (
+                          <Button variant="ghost" size="icon-sm">
+                            <Play className="w-3 h-3" />
+                          </Button>
+                        )}
                         <Button variant="ghost" size="icon-sm">
-                          <Square className="w-3 h-3" />
+                          <Trash2 className="w-3 h-3" />
                         </Button>
-                      ) : (
                         <Button variant="ghost" size="icon-sm">
-                          <Play className="w-3 h-3" />
+                          <MoreVertical className="w-3 h-3" />
                         </Button>
-                      )}
-                      <Button variant="ghost" size="icon-sm">
-                        <Trash2 className="w-3 h-3" />
-                      </Button>
-                      <Button variant="ghost" size="icon-sm">
-                        <MoreVertical className="w-3 h-3" />
-                      </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* ================= MOBILE CARDS ================= */}
+          <div className="md:hidden divide-y divide-border">
+            {containers.map((container) => (
+              <div key={container.id} className="p-4 space-y-3">
+                {/* Header */}
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Terminal className="w-4 h-4 text-muted-foreground" />
+                    <span className="font-mono text-sm">{container.name}</span>
+                  </div>
+                  <StatusIndicator status={container.status} />
+                </div>
+
+                <div className="text-[10px] font-mono text-muted-foreground">
+                  {container.id}
+                </div>
+
+                <div className="text-xs font-mono text-muted-foreground truncate">
+                  {container.image}
+                </div>
+
+                <div className="grid grid-cols-2 gap-2 text-xs">
+                  <div>
+                    <span className="text-muted-foreground">Node</span>
+                    <div>
+                      <Badge>{container.node}</Badge>
                     </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Uptime</span>
+                    <div className="font-mono">{container.uptime}</div>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">CPU</span>
+                    <div className="font-mono">{container.cpu}</div>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Memory</span>
+                    <div className="font-mono">{container.memory}</div>
+                  </div>
+                </div>
+
+                <div className="flex justify-end gap-1 pt-2">
+                  {container.status === "running" ? (
+                    <Button variant="ghost" size="icon-sm">
+                      <Square className="w-3 h-3" />
+                    </Button>
+                  ) : (
+                    <Button variant="ghost" size="icon-sm">
+                      <Play className="w-3 h-3" />
+                    </Button>
+                  )}
+                  <Button variant="ghost" size="icon-sm">
+                    <Trash2 className="w-3 h-3" />
+                  </Button>
+                  <Button variant="ghost" size="icon-sm">
+                    <MoreVertical className="w-3 h-3" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
         </CardContent>
       </Card>
     </DashboardLayout>
diff --git a/src/app/deployments/page.tsx b/src/app/deployments/page.tsx
index 2ed7558..311fe46 100644
--- a/src/app/deployments/page.tsx
+++ b/src/app/deployments/page.tsx
@@ -95,101 +95,156 @@ export default function DeploymentsPage() {
       title="Deployments"
       subtitle="Deployment history and management"
     >
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-2">
-          <Badge>{deployments.length} deployments</Badge>
-        </div>
-        <Button size="sm" className="gap-2">
+      {/* Header */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <Badge>{deployments.length} deployments</Badge>
+
+        <Button size="sm" className="gap-2 self-start sm:self-auto">
           <Plus className="w-4 h-4" />
-          New Deployment
+          <span className="hidden sm:inline">New Deployment</span>
         </Button>
       </div>
 
       <Card>
         <CardContent className="p-0">
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-border">
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Application
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Version
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Status
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Replicas
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Deployed
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Duration
-                </th>
-                <th className="text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Deployed By
-                </th>
-                <th className="text-right text-xs text-muted-foreground uppercase tracking-wider py-3 px-4">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {deployments.map((dep) => (
-                <tr key={dep.id} className="data-table-row">
-                  <td className="py-3 px-4">
-                    <div className="flex items-center gap-2">
-                      <Rocket className="w-4 h-4 text-muted-foreground" />
-                      <span className="font-mono text-sm">{dep.app}</span>
-                    </div>
-                  </td>
-                  <td className="py-3 px-4">
-                    <div className="flex items-center gap-2">
-                      <GitBranch className="w-3 h-3 text-muted-foreground" />
-                      <span className="font-mono text-sm">{dep.version}</span>
-                      <span className="text-[10px] text-muted-foreground">
-                        ← {dep.previousVersion}
-                      </span>
-                    </div>
-                  </td>
-                  <td className="py-3 px-4">
-                    <StatusIndicator status={dep.status} showLabel />
-                  </td>
-                  <td className="py-3 px-4">
-                    <span className="font-mono text-sm">{dep.replicas}</span>
-                  </td>
-                  <td className="py-3 px-4">
-                    <span className="font-mono text-xs text-muted-foreground">
-                      {dep.deployedAt}
-                    </span>
-                  </td>
-                  <td className="py-3 px-4">
-                    <span className="font-mono text-xs">{dep.duration}</span>
-                  </td>
-                  <td className="py-3 px-4">
-                    <span className="text-xs text-muted-foreground">
-                      {dep.deployedBy}
-                    </span>
-                  </td>
-                  <td className="py-3 px-4">
-                    <div className="flex items-center justify-end gap-1">
-                      <Button variant="ghost" size="icon-sm">
-                        <Eye className="w-3 h-3" />
-                      </Button>
-                      <Button variant="ghost" size="icon-sm">
-                        <RotateCcw className="w-3 h-3" />
-                      </Button>
-                      <Button variant="ghost" size="icon-sm">
-                        <MoreVertical className="w-3 h-3" />
-                      </Button>
-                    </div>
-                  </td>
+          {/* Desktop table */}
+          <div className="hidden md:block">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-border">
+                  {[
+                    "Application",
+                    "Version",
+                    "Status",
+                    "Replicas",
+                    "Deployed",
+                    "Duration",
+                    "Deployed By",
+                    "Actions",
+                  ].map((h) => (
+                    <th
+                      key={h}
+                      className={`text-left text-xs text-muted-foreground uppercase tracking-wider py-3 px-4 ${
+                        h === "Actions" ? "text-right" : ""
+                      }`}
+                    >
+                      {h}
+                    </th>
+                  ))}
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {deployments.map((dep) => (
+                  <tr key={dep.id} className="data-table-row">
+                    <td className="py-3 px-4">
+                      <div className="flex items-center gap-2">
+                        <Rocket className="w-4 h-4 text-muted-foreground" />
+                        <span className="font-mono text-sm">{dep.app}</span>
+                      </div>
+                    </td>
+
+                    <td className="py-3 px-4">
+                      <div className="flex items-center gap-2">
+                        <GitBranch className="w-3 h-3 text-muted-foreground" />
+                        <span className="font-mono text-sm">{dep.version}</span>
+                        <span className="text-[10px] text-muted-foreground">
+                          ← {dep.previousVersion}
+                        </span>
+                      </div>
+                    </td>
+
+                    <td className="py-3 px-4">
+                      <StatusIndicator status={dep.status} showLabel />
+                    </td>
+
+                    <td className="py-3 px-4 font-mono text-sm">
+                      {dep.replicas}
+                    </td>
+
+                    <td className="py-3 px-4 font-mono text-xs text-muted-foreground">
+                      {dep.deployedAt}
+                    </td>
+
+                    <td className="py-3 px-4 font-mono text-xs">
+                      {dep.duration}
+                    </td>
+
+                    <td className="py-3 px-4 text-xs text-muted-foreground">
+                      {dep.deployedBy}
+                    </td>
+
+                    <td className="py-3 px-4">
+                      <div className="flex items-center justify-end gap-1">
+                        <Button variant="ghost" size="icon-sm">
+                          <Eye className="w-3 h-3" />
+                        </Button>
+                        <Button variant="ghost" size="icon-sm">
+                          <RotateCcw className="w-3 h-3" />
+                        </Button>
+                        <Button variant="ghost" size="icon-sm">
+                          <MoreVertical className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Mobile cards */}
+          <div className="md:hidden divide-y divide-border">
+            {deployments.map((dep) => (
+              <div key={dep.id} className="p-4 space-y-3">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Rocket className="w-4 h-4 text-muted-foreground" />
+                    <span className="font-mono text-sm">{dep.app}</span>
+                  </div>
+                  <StatusIndicator status={dep.status} />
+                </div>
+
+                <div className="flex items-center gap-2 text-xs">
+                  <GitBranch className="w-3 h-3 text-muted-foreground" />
+                  <span className="font-mono">{dep.version}</span>
+                  <span className="text-muted-foreground">
+                    ← {dep.previousVersion}
+                  </span>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2 text-xs">
+                  <div>
+                    <span className="text-muted-foreground">Replicas</span>
+                    <div className="font-mono">{dep.replicas}</div>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Duration</span>
+                    <div className="font-mono">{dep.duration}</div>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Deployed</span>
+                    <div className="font-mono">{dep.deployedAt}</div>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">By</span>
+                    <div className="truncate">{dep.deployedBy}</div>
+                  </div>
+                </div>
+
+                <div className="flex justify-end gap-1 pt-2">
+                  <Button variant="ghost" size="icon-sm">
+                    <Eye className="w-3 h-3" />
+                  </Button>
+                  <Button variant="ghost" size="icon-sm">
+                    <RotateCcw className="w-3 h-3" />
+                  </Button>
+                  <Button variant="ghost" size="icon-sm">
+                    <MoreVertical className="w-3 h-3" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
         </CardContent>
       </Card>
     </DashboardLayout>
diff --git a/src/app/environment/page.tsx b/src/app/environment/page.tsx
index 65672a6..15f00a3 100644
--- a/src/app/environment/page.tsx
+++ b/src/app/environment/page.tsx
@@ -60,25 +60,28 @@ export default function EnvironmentPage() {
       title="Environment"
       subtitle="Manage environment variables"
     >
-      <div className="flex gap-6">
+      <div className="flex flex-col gap-6 md:flex-row">
         {/* Sidebar */}
-        <div className="w-56 shrink-0">
+        <div className="md:w-56 md:shrink-0">
           <Card>
             <CardHeader className="pb-2">
               <CardTitle className="text-xs text-muted-foreground uppercase tracking-wider">
                 Applications
               </CardTitle>
             </CardHeader>
-            <CardContent className="p-2">
+            <CardContent className="p-2 flex gap-2 md:block overflow-x-auto">
               {envGroups.map((group) => (
                 <button
                   key={group.name}
                   onClick={() => setSelectedApp(group.name)}
-                  className={`w-full text-left px-3 py-2 text-sm font-mono transition-colors ${
-                    selectedApp === group.name
-                      ? "bg-secondary text-foreground"
-                      : "text-muted-foreground hover:bg-muted hover:text-foreground"
-                  }`}
+                  className={`
+                    whitespace-nowrap md:w-full text-left px-3 py-2 text-sm font-mono transition-colors
+                    ${
+                      selectedApp === group.name
+                        ? "bg-secondary text-foreground"
+                        : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                    }
+                  `}
                 >
                   {group.name}
                   <Badge className="ml-2 text-[10px]">
@@ -90,10 +93,10 @@ export default function EnvironmentPage() {
           </Card>
         </div>
 
-        {/* Main Content */}
+        {/* Main */}
         <div className="flex-1">
           <Card>
-            <CardHeader className="flex flex-row items-center justify-between">
+            <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
               <div>
                 <CardTitle className="font-mono">{selectedApp}</CardTitle>
                 <p className="text-xs text-muted-foreground mt-1">
@@ -102,54 +105,66 @@ export default function EnvironmentPage() {
                   secrets
                 </p>
               </div>
-              <div className="flex items-center gap-2">
+
+              <div className="flex flex-wrap items-center gap-2">
                 <Button variant="outline" size="sm" className="gap-2">
                   <Plus className="w-4 h-4" />
-                  Add Variable
+                  <span className="hidden sm:inline">Add Variable</span>
                 </Button>
                 <Button size="sm" className="gap-2">
                   <Save className="w-4 h-4" />
-                  Save Changes
+                  <span className="hidden sm:inline">Save Changes</span>
                 </Button>
               </div>
             </CardHeader>
+
             <CardContent>
-              <div className="space-y-0">
-                <div className="grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
-                  <div className="col-span-4">Key</div>
-                  <div className="col-span-6">Value</div>
-                  <div className="col-span-2 text-right">Actions</div>
-                </div>
+              {/* Table header (desktop only) */}
+              <div className="hidden md:grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
+                <div className="col-span-4">Key</div>
+                <div className="col-span-6">Value</div>
+                <div className="col-span-2 text-right">Actions</div>
+              </div>
+
+              {/* Rows */}
+              <div className="divide-y divide-border md:divide-none">
                 {currentGroup?.variables.map((variable) => (
                   <div
                     key={variable.key}
-                    className="grid grid-cols-12 gap-4 py-3 data-table-row items-center"
+                    className="
+                      py-4 md:py-3
+                      flex flex-col gap-3
+                      md:grid md:grid-cols-12 md:gap-4 md:items-center
+                    "
                   >
-                    <div className="col-span-4 flex items-center gap-2">
+                    {/* Key */}
+                    <div className="md:col-span-4 flex items-center gap-2">
                       {variable.secret && (
                         <Lock className="w-3 h-3 text-warning" />
                       )}
                       <span className="font-mono text-sm">{variable.key}</span>
                     </div>
-                    <div className="col-span-6">
-                      <div className="flex items-center gap-2">
-                        <Input
-                          type={
-                            variable.secret && !showSecrets[variable.key]
-                              ? "password"
-                              : "text"
-                          }
-                          value={
-                            variable.secret && !showSecrets[variable.key]
-                              ? maskValue(variable.value)
-                              : variable.value
-                          }
-                          readOnly
-                          className="font-mono text-xs h-8 bg-background border-border"
-                        />
-                      </div>
+
+                    {/* Value */}
+                    <div className="md:col-span-6">
+                      <Input
+                        type={
+                          variable.secret && !showSecrets[variable.key]
+                            ? "password"
+                            : "text"
+                        }
+                        value={
+                          variable.secret && !showSecrets[variable.key]
+                            ? maskValue(variable.value)
+                            : variable.value
+                        }
+                        readOnly
+                        className="font-mono text-xs h-8 bg-background border-border"
+                      />
                     </div>
-                    <div className="col-span-2 flex items-center justify-end gap-1">
+
+                    {/* Actions */}
+                    <div className="md:col-span-2 flex items-center justify-end gap-1">
                       {variable.secret && (
                         <Button
                           variant="ghost"
diff --git a/src/app/logs/page.tsx b/src/app/logs/page.tsx
index f6ce636..c5f9d30 100644
--- a/src/app/logs/page.tsx
+++ b/src/app/logs/page.tsx
@@ -137,10 +137,9 @@ export default function LogsPage() {
     "all"
   );
 
-  const filteredLogs = logEntries.filter((log) => {
-    if (filter === "all") return true;
-    return log.level === filter;
-  });
+  const filteredLogs = logEntries.filter((log) =>
+    filter === "all" ? true : log.level === filter
+  );
 
   const getLevelClass = (level: string) => {
     switch (level) {
@@ -157,8 +156,10 @@ export default function LogsPage() {
 
   return (
     <DashboardLayout title="Logs" subtitle="Real-time log aggregation">
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-2">
+      {/* Toolbar */}
+      <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        {/* Filters */}
+        <div className="flex flex-wrap gap-2">
           <Button
             variant={filter === "all" ? "secondary" : "ghost"}
             size="sm"
@@ -194,16 +195,20 @@ export default function LogsPage() {
             Error
           </Button>
         </div>
-        <div className="flex items-center gap-2">
+
+        {/* Actions */}
+        <div className="flex flex-wrap items-center gap-2">
           <Button variant="outline" size="sm" className="gap-2">
             <Filter className="w-4 h-4" />
-            Advanced Filter
+            <span className="hidden sm:inline">Advanced Filter</span>
           </Button>
           <Button variant="outline" size="sm" className="gap-2">
             <Download className="w-4 h-4" />
-            Export
+            <span className="hidden sm:inline">Export</span>
           </Button>
-          <div className="w-px h-6 bg-border" />
+
+          <div className="hidden md:block w-px h-6 bg-border" />
+
           <Button
             variant={isPaused ? "secondary" : "outline"}
             size="sm"
@@ -225,6 +230,7 @@ export default function LogsPage() {
         </div>
       </div>
 
+      {/* Log Card */}
       <Card className="h-[calc(100vh-240px)]">
         <CardHeader className="flex flex-row items-center justify-between py-2 px-4 border-b border-border">
           <CardTitle className="text-xs text-muted-foreground uppercase tracking-wider">
@@ -240,25 +246,38 @@ export default function LogsPage() {
             )}
           </div>
         </CardHeader>
+
         <CardContent className="p-0 overflow-auto h-[calc(100%-48px)]">
-          <div className="font-mono text-xs mx-6">
+          <div className="font-mono text-xs px-3 md:px-6 space-y-2 md:space-y-0">
             {filteredLogs.map((log, index) => (
-              <div key={index} className="flex">
-                <span className="text-gray-400 whitespace-nowrap">
+              <div
+                key={index}
+                className="flex flex-col gap-1 md:flex-row md:gap-0"
+              >
+                {/* Timestamp */}
+                <span className="text-gray-400 whitespace-nowrap md:mr-3">
                   {log.timestamp}
                 </span>
+
+                {/* Level */}
                 <span
                   className={cn(
-                    "uppercase w-12 shrink-0 mx-3",
+                    "uppercase md:w-12 md:shrink-0 md:mx-3",
                     getLevelClass(log.level)
                   )}
                 >
                   [{log.level}]
                 </span>
-                <span className="text-muted-foreground w-40 shrink-0 truncate">
+
+                {/* Source */}
+                <span className="text-muted-foreground md:w-40 md:shrink-0 md:truncate">
                   {log.source}
                 </span>
-                <span className="text-foreground">{log.message}</span>
+
+                {/* Message */}
+                <span className="text-foreground wrap-break-words">
+                  {log.message}
+                </span>
               </div>
             ))}
           </div>
diff --git a/src/app/monitoring/page.tsx b/src/app/monitoring/page.tsx
index 8426b43..bb18e13 100644
--- a/src/app/monitoring/page.tsx
+++ b/src/app/monitoring/page.tsx
@@ -14,6 +14,8 @@ import {
   Area,
 } from "recharts";
 import { Progress } from "@/components/ui/progress";
+import RadialChart from "@/components/RadialChart";
+import { ArrowDownLeft, ArrowUpRight, Cpu, MemoryStick } from "lucide-react";
 
 const cpuData = [
   { time: "00:00", value: 45 },
@@ -81,7 +83,7 @@ export default function MonitoringPage() {
       subtitle="Resource utilization and metrics"
     >
       {/* Summary Stats */}
-      <div className="grid grid-cols-4 gap-4 mb-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-6">
         <Card>
           <CardContent className="p-4">
             <div className="text-xs text-muted-foreground uppercase tracking-wider mb-1">
@@ -123,16 +125,15 @@ export default function MonitoringPage() {
       </div>
 
       {/* Charts */}
-      <div className="grid grid-cols-2 gap-4 mb-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="flex items-center justify-between">
-              CPU Usage
-              <Badge variant="outline">Last 12 hours</Badge>
+            <CardTitle className="flex items-center justify-between flex-wrap gap-2">
+              CPU Usage <Badge variant="outline">Last 12 hours</Badge>
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-48">
+            <div className="h-48 w-full">
               <ResponsiveContainer width="100%" height="100%">
                 <AreaChart data={cpuData}>
                   <defs>
@@ -169,8 +170,8 @@ export default function MonitoringPage() {
                   />
                   <Tooltip
                     contentStyle={{
-                      backgroundColor: "hsl(0, 0%, 7%)",
-                      border: "1px solid hsl(0, 0%, 18%)",
+                      backgroundColor: "hsl(0,0%,7%)",
+                      border: "1px solid hsl(0,0%,18%)",
                       borderRadius: "4px",
                       fontSize: "12px",
                     }}
@@ -190,13 +191,12 @@ export default function MonitoringPage() {
 
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="flex items-center justify-between">
-              Memory Usage
-              <Badge variant="outline">Last 12 hours</Badge>
+            <CardTitle className="flex items-center justify-between flex-wrap gap-2">
+              Memory Usage <Badge variant="outline">Last 12 hours</Badge>
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-48">
+            <div className="h-48 w-full">
               <ResponsiveContainer width="100%" height="100%">
                 <AreaChart data={memoryData}>
                   <defs>
@@ -233,8 +233,8 @@ export default function MonitoringPage() {
                   />
                   <Tooltip
                     contentStyle={{
-                      backgroundColor: "hsl(0, 0%, 7%)",
-                      border: "1px solid hsl(0, 0%, 18%)",
+                      backgroundColor: "hsl(0,0%,7%)",
+                      border: "1px solid hsl(0,0%,18%)",
                       borderRadius: "4px",
                       fontSize: "12px",
                     }}
@@ -256,13 +256,12 @@ export default function MonitoringPage() {
       {/* Network Chart */}
       <Card className="mb-6">
         <CardHeader className="pb-2">
-          <CardTitle className="flex items-center justify-between">
-            Network I/O
-            <Badge variant="outline">Last 12 hours</Badge>
+          <CardTitle className="flex items-center justify-between flex-wrap gap-2">
+            Network I/O <Badge variant="outline">Last 12 hours</Badge>
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="h-48">
+          <div className="h-48 w-full">
             <ResponsiveContainer width="100%" height="100%">
               <LineChart data={networkData}>
                 <XAxis
@@ -278,8 +277,8 @@ export default function MonitoringPage() {
                 />
                 <Tooltip
                   contentStyle={{
-                    backgroundColor: "hsl(0, 0%, 7%)",
-                    border: "1px solid hsl(0, 0%, 18%)",
+                    backgroundColor: "hsl(0,0%,7%)",
+                    border: "1px solid hsl(0,0%,18%)",
                     borderRadius: "4px",
                     fontSize: "12px",
                   }}
@@ -303,7 +302,7 @@ export default function MonitoringPage() {
               </LineChart>
             </ResponsiveContainer>
           </div>
-          <div className="flex items-center gap-6 mt-2">
+          <div className="flex flex-wrap gap-6 mt-2">
             <div className="flex items-center gap-2">
               <div className="w-3 h-0.5 bg-primary" />
               <span className="text-xs text-muted-foreground">Inbound</span>
@@ -322,7 +321,7 @@ export default function MonitoringPage() {
           <CardTitle>Container Metrics</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-4 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
             {containerMetrics.map((container) => (
               <div
                 key={container.name}
diff --git a/src/app/nodes/page.tsx b/src/app/nodes/page.tsx
index d3ed3ce..973de4b 100644
--- a/src/app/nodes/page.tsx
+++ b/src/app/nodes/page.tsx
@@ -56,29 +56,26 @@ const nodes = [
 export default function NodesPage() {
   return (
     <DashboardLayout title="Nodes" subtitle="Cluster node management">
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-2">
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 gap-2">
+        <div className="flex flex-wrap items-center gap-2">
           <Badge>{nodes.length} nodes</Badge>
-          <Badge>
-            {nodes.filter((n) => n.status === "running").length} online
-          </Badge>
+          <Badge>{nodes.filter((n) => n.status === "running").length} online</Badge>
         </div>
         <Button size="sm" className="gap-2">
-          <Plus className="w-4 h-4" />
-          Add Node
+          <Plus className="w-4 h-4" /> Add Node
         </Button>
       </div>
 
-      <div className="grid grid-cols-1 gap-4">
+      <div className="flex flex-col gap-4">
         {nodes.map((node) => (
           <Card key={node.id}>
-            <CardHeader className="flex flex-row items-start justify-between pb-2">
-              <div className="flex items-center gap-3">
+            <CardHeader className="flex flex-col sm:flex-row sm:items-start sm:justify-between pb-2 gap-2 sm:gap-0">
+              <div className="flex flex-col sm:flex-row sm:items-center gap-3">
                 <div className="w-10 h-10 bg-secondary flex items-center justify-center">
                   <Server className="w-5 h-5 text-muted-foreground" />
                 </div>
                 <div>
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 flex-wrap">
                     <StatusIndicator status={node.status} />
                     <CardTitle className="font-mono">{node.name}</CardTitle>
                   </div>
@@ -87,7 +84,7 @@ export default function NodesPage() {
                   </div>
                 </div>
               </div>
-              <div className="flex items-center gap-2">
+              <div className="flex flex-wrap items-center gap-2 mt-2 sm:mt-0">
                 {node.labels.map((label) => (
                   <Badge key={label} variant="outline" className="text-[10px]">
                     {label}
@@ -102,12 +99,10 @@ export default function NodesPage() {
               </div>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-5 gap-6">
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-6">
                 {/* System Info */}
-                <div className="border-r border-border pr-6">
-                  <div className="text-xs text-muted-foreground mb-2">
-                    System
-                  </div>
+                <div className="border-b sm:border-b-0 sm:border-r border-border pb-2 sm:pb-0 pr-0 sm:pr-6">
+                  <div className="text-xs text-muted-foreground mb-2">System</div>
                   <div className="space-y-1">
                     <div className="flex justify-between text-xs">
                       <span className="text-muted-foreground">OS</span>
@@ -135,12 +130,8 @@ export default function NodesPage() {
 
                 {/* Memory */}
                 <div>
-                  <div className="text-xs text-muted-foreground mb-2">
-                    Memory
-                  </div>
-                  <div className="stat-value mb-2">
-                    {node.memory.percentage}%
-                  </div>
+                  <div className="text-xs text-muted-foreground mb-2">Memory</div>
+                  <div className="stat-value mb-2">{node.memory.percentage}%</div>
                   <Progress value={node.memory.percentage} className="w-full" />
                   <div className="text-[10px] text-muted-foreground mt-1 font-mono">
                     {node.memory.used} / {node.memory.total}
@@ -159,9 +150,7 @@ export default function NodesPage() {
 
                 {/* Quick Actions */}
                 <div>
-                  <div className="text-xs text-muted-foreground mb-2">
-                    Quick Actions
-                  </div>
+                  <div className="text-xs text-muted-foreground mb-2">Quick Actions</div>
                   <div className="space-y-1">
                     <Button size="sm" className="w-full justify-start">
                       SSH Connect
diff --git a/src/app/overview/page.tsx b/src/app/overview/page.tsx
index f990fbd..325a6b6 100644
--- a/src/app/overview/page.tsx
+++ b/src/app/overview/page.tsx
@@ -117,7 +117,7 @@ export default function OverviewPage() {
   return (
     <DashboardLayout title="Overview" subtitle="System status and metrics">
       {/* Stats Grid */}
-      <div className="grid grid-cols-4 gap-4 mb-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-6">
         <StatCard
           title="Applications"
           value="12"
@@ -144,9 +144,10 @@ export default function OverviewPage() {
         />
       </div>
 
-      <div className="grid grid-cols-3 gap-4">
+      {/* Applications & Deployments */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         {/* Applications Table */}
-        <Card className="col-span-2">
+        <Card className="md:col-span-2">
           <CardHeader className="flex flex-row items-center justify-between">
             <CardTitle>Applications</CardTitle>
             <Link href="/applications">
@@ -155,8 +156,8 @@ export default function OverviewPage() {
               </Button>
             </Link>
           </CardHeader>
-          <CardContent>
-            <div className="space-y-0">
+          <CardContent className="overflow-x-auto">
+            <div className="space-y-0 min-w-125">
               <div className="grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
                 <div className="col-span-4">Name</div>
                 <div className="col-span-2">Containers</div>
@@ -167,27 +168,23 @@ export default function OverviewPage() {
               {applications.map((app) => (
                 <div
                   key={app.name}
-                  className="grid grid-cols-12 gap-4 py-3 data-table-row items-center"
+                  className="grid grid-cols-12 gap-4 py-3 items-center data-table-row"
                 >
                   <div className="col-span-4 font-mono text-sm">{app.name}</div>
                   <div className="col-span-2 text-sm text-muted-foreground">
                     {app.containers}
                   </div>
-                  <div className="col-span-2">
-                    <div className="flex items-center gap-2">
-                      <Progress value={app.cpu} className="w-full" />
-                      <span className="text-xs text-muted-foreground font-mono w-8">
-                        {app.cpu}%
-                      </span>
-                    </div>
+                  <div className="col-span-2 flex items-center gap-2">
+                    <Progress value={app.cpu} className="w-full" />
+                    <span className="text-xs text-muted-foreground font-mono w-8">
+                      {app.cpu}%
+                    </span>
                   </div>
-                  <div className="col-span-2">
-                    <div className="flex items-center gap-2">
-                      <Progress value={app.memory} className="w-full" />
-                      <span className="text-xs text-muted-foreground font-mono w-8">
-                        {app.memory}%
-                      </span>
-                    </div>
+                  <div className="col-span-2 flex items-center gap-2">
+                    <Progress value={app.memory} className="w-full" />
+                    <span className="text-xs text-muted-foreground font-mono w-8">
+                      {app.memory}%
+                    </span>
                   </div>
                   <div className="col-span-2">
                     <StatusIndicator status={app.status} showLabel />
@@ -213,7 +210,7 @@ export default function OverviewPage() {
               {recentDeployments.map((dep) => (
                 <div
                   key={dep.id}
-                  className="flex items-center justify-between py-2 border-b border-border last:border-0"
+                  className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 border-b border-border last:border-0"
                 >
                   <div className="flex items-center gap-3">
                     <StatusIndicator status={dep.status} size="sm" />
@@ -224,9 +221,8 @@ export default function OverviewPage() {
                       </div>
                     </div>
                   </div>
-                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                    <Clock className="w-3 h-3" />
-                    {dep.time}
+                  <div className="flex items-center gap-1 text-xs text-muted-foreground mt-1 sm:mt-0">
+                    <Clock className="w-3 h-3" /> {dep.time}
                   </div>
                 </div>
               ))}
@@ -241,14 +237,14 @@ export default function OverviewPage() {
           <CardTitle>Cluster Nodes</CardTitle>
           <Badge>{nodes.length} nodes</Badge>
         </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-3 gap-4">
+        <CardContent className="overflow-x-auto">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 min-w-75">
             {nodes.map((node) => (
               <div
                 key={node.name}
                 className="border border-border p-4 bg-secondary/30"
               >
-                <div className="flex items-center justify-between mb-3">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-3 gap-2">
                   <div className="flex items-center gap-2">
                     <StatusIndicator status={node.status} />
                     <span className="font-mono text-sm">{node.name}</span>
@@ -267,7 +263,10 @@ export default function OverviewPage() {
                     <span className="text-muted-foreground">Memory</span>
                     <span className="font-mono">{node.memory}%</span>
                   </div>
-                  <Progress value={node.memory} className="w-full [&>div]:bg-chart-3" />
+                  <Progress
+                    value={node.memory}
+                    className="w-full [&>div]:bg-chart-3"
+                  />
                   <div className="flex items-center justify-between text-xs pt-2 border-t border-border mt-2">
                     <span className="text-muted-foreground">Containers</span>
                     <span className="font-mono">{node.containers}</span>
diff --git a/src/components/RadialChart.tsx b/src/components/RadialChart.tsx
new file mode 100644
index 0000000..95d8361
--- /dev/null
+++ b/src/components/RadialChart.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts";
+import { ChartContainer, type ChartConfig } from "@/components/ui/chart";
+
+const chartConfig = {
+  value: {
+    label: "Value",
+  },
+} satisfies ChartConfig;
+
+export default function RadialChart({
+  value,
+  children,
+}: {
+  value: number;
+  children?: React.ReactNode;
+}) {
+  const chartData = [{ value, fill: "var(--color-chart-1)" }];
+
+  return (
+    <ChartContainer config={chartConfig} className="size-30">
+      <RadialBarChart
+        data={chartData}
+        startAngle={-50}
+        endAngle={(value / 100) * 230}
+        innerRadius="65%"
+        outerRadius="100%"
+      >
+        <PolarGrid
+          gridType="circle"
+          radialLines={false}
+          stroke="none"
+          className=""
+          polarRadius={[86, 74]}
+        />
+        <RadialBar dataKey="value" background cornerRadius={10} />
+        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                return (
+                  <text
+                    x={viewBox.cx}
+                    y={viewBox.cy}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                  >
+                    <tspan
+                      x={viewBox.cx}
+                      y={viewBox.cy}
+                      className="fill-foreground text-xl font-bold"
+                    >
+                      {chartData[0].value.toLocaleString()}
+                    </tspan>
+                    <tspan
+                      x={viewBox.cx}
+                      y={(viewBox.cy || 0) + 24}
+                      className="fill-muted-foreground"
+                    >
+                      {children}
+                    </tspan>
+                  </text>
+                );
+              }
+            }}
+          />
+        </PolarRadiusAxis>
+      </RadialBarChart>
+    </ChartContainer>
+  );
+}
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
new file mode 100644
index 0000000..8b42f21
--- /dev/null
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,357 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="text-foreground font-mono font-medium tabular-nums">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}