From fbab3bb01ed32dbf16c476a552ff17587d0e9d3b Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 1 Apr 2025 15:14:21 +0200
Subject: [PATCH] clean code

---
 package-lock.json                             |  327 ------
 package.json                                  |    8 -
 src/lib/components/DCF.svelte                 |  411 -------
 src/lib/components/FailToDeliver.svelte       |    2 +-
 src/lib/components/HoverStockChart.svelte     |  257 +----
 src/lib/components/MiniPlot.svelte            |  195 ----
 src/lib/components/PriceAnalysis.svelte       |  344 ------
 src/lib/components/Sidecard.svelte            |    6 +-
 src/lib/components/VaR.svelte                 |  253 ----
 src/routes/economic-indicator/+page.server.ts |   22 -
 src/routes/economic-indicator/+page.svelte    | 1023 -----------------
 .../index/[tickerID]/options/+page.svelte     |  331 +-----
 src/routes/pricing/+page.svelte               |   32 +-
 src/routes/stocks/[tickerID]/+page.svelte     |    9 +-
 .../statistics/revenue/+page.svelte           |   12 +-
 src/routes/watchlist/stocks/+page.svelte      |    4 +-
 tailwind.config.cjs                           |    2 -
 17 files changed, 95 insertions(+), 3143 deletions(-)
 delete mode 100644 src/lib/components/DCF.svelte
 delete mode 100644 src/lib/components/MiniPlot.svelte
 delete mode 100644 src/lib/components/PriceAnalysis.svelte
 delete mode 100644 src/lib/components/VaR.svelte
 delete mode 100644 src/routes/economic-indicator/+page.server.ts
 delete mode 100644 src/routes/economic-indicator/+page.svelte

diff --git a/package-lock.json b/package-lock.json
index 198b5d4d..3779cbf6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,15 +38,11 @@
         "date-fns": "^3.6.0",
         "date-fns-tz": "^3.1.3",
         "date-picker-svelte": "^2.12.0",
-        "echarts": "^5.5.1",
         "file-saver": "^2.0.5",
-        "flowbite-svelte": "^0.46.15",
         "got": "^14.4.2",
-        "html2canvas": "^1.4.1",
         "html2canvas-pro": "^1.5.8",
         "jsonwebtoken": "^9.0.2",
         "katex": "^0.16.11",
-        "lightweight-charts": "^4.1.3",
         "lodash-es": "^4.17.21",
         "lucide-svelte": "^0.438.0",
         "luxon": "^3.5.0",
@@ -58,8 +54,6 @@
         "postcss": "^8.4.38",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.7",
-        "quill": "^2.0.2",
-        "quill-delta-to-html": "^0.12.1",
         "rollup-plugin-visualizer": "^5.12.0",
         "rollup-plugin-web-worker-loader": "^1.6.1",
         "sass": "^1.75.0",
@@ -67,10 +61,8 @@
         "string-similarity": "^4.0.4",
         "svelte": "^4.2.15",
         "svelte-check": "^3.6.9",
-        "svelte-echarts": "^1.0.0-rc3",
         "svelte-inview": "^4.0.2",
         "svelte-lazy": "^1.2.11",
-        "svelte-lightweight-charts": "^2.2.0",
         "svelte-loading-spinners": "^0.3.6",
         "svelte-preprocess": "^5.1.4",
         "svelte-sonner": "^0.3.27",
@@ -1280,16 +1272,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "28.0.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.1.tgz",
@@ -2822,12 +2804,6 @@
       "license": "Apache-2.0",
       "peer": true
     },
-    "node_modules/@yr/monotone-cubic-spline": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
-      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
-      "dev": true
-    },
     "node_modules/abs-svg-path": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
@@ -2989,21 +2965,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/apexcharts": {
-      "version": "3.53.0",
-      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.53.0.tgz",
-      "integrity": "sha512-QESZHZY3w9LPQ64PGh1gEdfjYjJ5Jp+Dfy0D/CLjsLOPTpXzdxwlNMqRj+vPbTcP0nAHgjWv1maDqcEq6u5olw==",
-      "dev": true,
-      "dependencies": {
-        "@yr/monotone-cubic-spline": "^1.0.3",
-        "svg.draggable.js": "^2.2.2",
-        "svg.easing.js": "^2.0.0",
-        "svg.filter.js": "^2.0.2",
-        "svg.pathmorphing.js": "^0.1.3",
-        "svg.resize.js": "^1.4.3",
-        "svg.select.js": "^3.0.1"
-      }
-    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -4331,22 +4292,6 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "node_modules/echarts": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.1.tgz",
-      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "2.3.0",
-        "zrender": "5.6.0"
-      }
-    },
-    "node_modules/echarts/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.79",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.79.tgz",
@@ -4688,12 +4633,6 @@
         "es5-ext": "~0.10.14"
       }
     },
-    "node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
-      "dev": true
-    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -4772,12 +4711,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/fancy-canvas": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz",
-      "integrity": "sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==",
-      "dev": true
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4785,12 +4718,6 @@
       "license": "MIT",
       "peer": true
     },
-    "node_modules/fast-diff": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-      "dev": true
-    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -4876,46 +4803,6 @@
         "dtype": "^2.0.0"
       }
     },
-    "node_modules/flowbite": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.5.1.tgz",
-      "integrity": "sha512-7jP1jy9c3QP7y+KU9lc8ueMkTyUdMDvRP+lteSWgY5TigSZjf9K1kqZxmqjhbx2gBnFQxMl1GAjVThCa8cEpKA==",
-      "dev": true,
-      "dependencies": {
-        "@popperjs/core": "^2.9.3",
-        "flowbite-datepicker": "^1.3.0",
-        "mini-svg-data-uri": "^1.4.3"
-      }
-    },
-    "node_modules/flowbite-datepicker": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-1.3.0.tgz",
-      "integrity": "sha512-CLVqzuoE2vkUvWYK/lJ6GzT0be5dlTbH3uuhVwyB67+PjqJWABm2wv68xhBf5BqjpBxvTSQ3mrmLHpPJ2tvrSQ==",
-      "dev": true,
-      "dependencies": {
-        "@rollup/plugin-node-resolve": "^15.2.3",
-        "flowbite": "^2.0.0"
-      }
-    },
-    "node_modules/flowbite-svelte": {
-      "version": "0.46.15",
-      "resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.46.15.tgz",
-      "integrity": "sha512-xWhyLDez/gafTAmQayPMPKmWj1BAoq80SoA48yHZ12Wk3Vu3hFrELLUZf0UksxnjQL9hMOKRUlYl3/IH6pHwnQ==",
-      "dev": true,
-      "dependencies": {
-        "@floating-ui/dom": "^1.6.7",
-        "apexcharts": "^3.49.2",
-        "flowbite": "^2.4.1",
-        "tailwind-merge": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "pnpm": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "svelte": "^3.55.1 || ^4.0.0 || ^5.0.0"
-      }
-    },
     "node_modules/focus-trap": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
@@ -5578,20 +5465,6 @@
       "integrity": "sha512-08iL2VyCRbkQKBySkSh6m8zMUa3sADAxGVWs3Z1aPcUkTJeK0ETG4Fc27tEmQBGUAXZjIsXOZqBvacuVNSC/fQ==",
       "license": "MIT"
     },
-    "node_modules/html2canvas": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
-      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "css-line-break": "^2.1.0",
-        "text-segmentation": "^1.0.3"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/html2canvas-pro": {
       "version": "1.5.8",
       "resolved": "https://registry.npmjs.org/html2canvas-pro/-/html2canvas-pro-1.5.8.tgz",
@@ -6455,15 +6328,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lightweight-charts": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-4.1.3.tgz",
-      "integrity": "sha512-SJacmEyx3LmT2Qsc7Kq7cEX7nEHtQv0MOlujhRlcDxhW62pG6nkBlcM52/jNqkq8B28KQeVmgOQ7zrdJ4BCPDw==",
-      "dev": true,
-      "dependencies": {
-        "fancy-canvas": "2.1.0"
-      }
-    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -6515,12 +6379,6 @@
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
-    "node_modules/lodash.clonedeep": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
-      "dev": true
-    },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -6533,12 +6391,6 @@
       "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
       "dev": true
     },
-    "node_modules/lodash.isequal": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
-      "dev": true
-    },
     "node_modules/lodash.isinteger": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
@@ -6875,15 +6727,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/mini-svg-data-uri": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
-      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
-      "dev": true,
-      "bin": {
-        "mini-svg-data-uri": "cli.js"
-      }
-    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -7250,12 +7093,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parchment": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz",
-      "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==",
-      "dev": true
-    },
     "node_modules/parenthesis": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/parenthesis/-/parenthesis-3.1.8.tgz",
@@ -7830,44 +7667,6 @@
       "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
       "license": "ISC"
     },
-    "node_modules/quill": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.2.tgz",
-      "integrity": "sha512-QfazNrhMakEdRG57IoYFwffUIr04LWJxbS/ZkidRFXYCQt63c1gK6Z7IHUXMx/Vh25WgPBU42oBaNzQ0K1R/xw==",
-      "dev": true,
-      "dependencies": {
-        "eventemitter3": "^5.0.1",
-        "lodash-es": "^4.17.21",
-        "parchment": "^3.0.0",
-        "quill-delta": "^5.1.0"
-      },
-      "engines": {
-        "npm": ">=8.2.3"
-      }
-    },
-    "node_modules/quill-delta": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
-      "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
-      "dev": true,
-      "dependencies": {
-        "fast-diff": "^1.3.0",
-        "lodash.clonedeep": "^4.5.0",
-        "lodash.isequal": "^4.5.0"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      }
-    },
-    "node_modules/quill-delta-to-html": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/quill-delta-to-html/-/quill-delta-to-html-0.12.1.tgz",
-      "integrity": "sha512-QhpeMk9+5ge3HYbL5A0Ewz3pXCsbemqGvIF/kw5D6D4V68AtcUp7yt9xNUkzOk/0IQz43hKy3IkzBzRhLIE+oA==",
-      "dev": true,
-      "dependencies": {
-        "lodash.isequal": "^4.5.0"
-      }
-    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -8693,16 +8492,6 @@
         "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0"
       }
     },
-    "node_modules/svelte-echarts": {
-      "version": "1.0.0-rc3",
-      "resolved": "https://registry.npmjs.org/svelte-echarts/-/svelte-echarts-1.0.0-rc3.tgz",
-      "integrity": "sha512-jM9EU4m7yFJaISCXhnGgtYirMD1VP2DzoI3Lhbl2jsvGzZFIAg8wsn/5n8GccZxm7wHgzcEL48EVJVlrKPU7gQ==",
-      "dev": true,
-      "peerDependencies": {
-        "echarts": "^5.0.0",
-        "svelte": "^4.0.0"
-      }
-    },
     "node_modules/svelte-hmr": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
@@ -8734,16 +8523,6 @@
         "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/svelte-lightweight-charts": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/svelte-lightweight-charts/-/svelte-lightweight-charts-2.2.0.tgz",
-      "integrity": "sha512-LXdha4vfLMuOPc0Yyetu+DLSDJkPryGkufUQgpCkfguCscSQUcrLiI9MdqKwQk6Fkm6AZbg8SQ5qDIYxcyC+Dg==",
-      "dev": true,
-      "peerDependencies": {
-        "lightweight-charts": ">=4.0.0",
-        "svelte": ">=3.44.0"
-      }
-    },
     "node_modules/svelte-loading-spinners": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.3.6.tgz",
@@ -8891,97 +8670,6 @@
         "svg-path-bounds": "^1.0.1"
       }
     },
-    "node_modules/svg.draggable.js": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
-      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
-      "dev": true,
-      "dependencies": {
-        "svg.js": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/svg.easing.js": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
-      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
-      "dev": true,
-      "dependencies": {
-        "svg.js": ">=2.3.x"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/svg.filter.js": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
-      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
-      "dev": true,
-      "dependencies": {
-        "svg.js": "^2.2.5"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/svg.js": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
-      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
-      "dev": true
-    },
-    "node_modules/svg.pathmorphing.js": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
-      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
-      "dev": true,
-      "dependencies": {
-        "svg.js": "^2.4.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/svg.resize.js": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
-      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
-      "dev": true,
-      "dependencies": {
-        "svg.js": "^2.6.5",
-        "svg.select.js": "^2.1.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/svg.resize.js/node_modules/svg.select.js": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
-      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
-      "dev": true,
-      "dependencies": {
-        "svg.js": "^2.2.5"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/svg.select.js": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
-      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
-      "dev": true,
-      "dependencies": {
-        "svg.js": "^2.6.5"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@@ -10025,21 +9713,6 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
-    },
-    "node_modules/zrender": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.0.tgz",
-      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "2.3.0"
-      }
-    },
-    "node_modules/zrender/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
     }
   }
 }
diff --git a/package.json b/package.json
index 904191ae..e5ffedd2 100644
--- a/package.json
+++ b/package.json
@@ -38,15 +38,11 @@
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
     "date-picker-svelte": "^2.12.0",
-    "echarts": "^5.5.1",
     "file-saver": "^2.0.5",
-    "flowbite-svelte": "^0.46.15",
     "got": "^14.4.2",
-    "html2canvas": "^1.4.1",
     "html2canvas-pro": "^1.5.8",
     "jsonwebtoken": "^9.0.2",
     "katex": "^0.16.11",
-    "lightweight-charts": "^4.1.3",
     "lodash-es": "^4.17.21",
     "lucide-svelte": "^0.438.0",
     "luxon": "^3.5.0",
@@ -58,8 +54,6 @@
     "postcss": "^8.4.38",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
-    "quill": "^2.0.2",
-    "quill-delta-to-html": "^0.12.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "rollup-plugin-web-worker-loader": "^1.6.1",
     "sass": "^1.75.0",
@@ -67,10 +61,8 @@
     "string-similarity": "^4.0.4",
     "svelte": "^4.2.15",
     "svelte-check": "^3.6.9",
-    "svelte-echarts": "^1.0.0-rc3",
     "svelte-inview": "^4.0.2",
     "svelte-lazy": "^1.2.11",
-    "svelte-lightweight-charts": "^2.2.0",
     "svelte-loading-spinners": "^0.3.6",
     "svelte-preprocess": "^5.1.4",
     "svelte-sonner": "^0.3.27",
diff --git a/src/lib/components/DCF.svelte b/src/lib/components/DCF.svelte
deleted file mode 100644
index ab98f996..00000000
--- a/src/lib/components/DCF.svelte
+++ /dev/null
@@ -1,411 +0,0 @@
-<script lang="ts">
-  import { Chart } from "svelte-echarts";
-  import InfoModal from "$lib/components/InfoModal.svelte";
-  import {
-    dcfComponent,
-    stockTicker,
-    screenWidth,
-    getCache,
-    setCache,
-  } from "$lib/store";
-  import Lazy from "svelte-lazy";
-
-  //export let quantData;
-  export let data;
-
-  let fairPrice;
-  let isLoaded = false;
-  let lastPrice: Number;
-
-  let optionsBarChart;
-
-  let change: Number;
-
-  const contentModal = `<span class="text-white">
-            Discounted Cash Flow (DCF) is a core method for valuing a company's true worth. It starts by predicting the company's growth and how it affects its future cash flow.
-            <br>
-            <br>
-            Then, it adjusts these future cash flows to their present value using a discount rate. This considers the risk associated with future cash flow predictions. Simply put, higher discount rates signal greater risk.
-          </span>`;
-
-  const plotBarChart = () => {
-    const options = {
-      grid: {
-        left: "0%",
-        right: "0%",
-        top: "0%",
-        bottom: "0%",
-        containLabel: true,
-      },
-      animation: false,
-      silent: true,
-      xAxis: {
-        type: "value",
-        axisLabel: {
-          show: false, // Hide the x-axis labels
-        },
-        axisLine: {
-          show: false, // Hide the y-axis lines
-        },
-        splitLine: {
-          show: false, // Hide the grid lines on the y-axis
-        },
-      },
-      yAxis: {
-        type: "category",
-        axisLabel: {
-          show: false, // Hide the x-axis labels
-        },
-        axisLine: {
-          show: true, // Hide the y-axis lines
-        },
-        splitLine: {
-          show: false, // Hide the grid lines on the y-axis
-        },
-      },
-      series: [
-        {
-          name: "Current Price",
-          type: "bar",
-          barWidth: $screenWidth < 640 ? "30%" : "30%",
-          smooth: true,
-          stack: change < 0 ? "lastPriceStack" : "",
-          data: [lastPrice],
-          label: {
-            show: true,
-            position: "inside",
-            formatter: function (params) {
-              return [
-                "{a|Current Price}",
-                "{b|" + "$" + params.value + "}",
-              ].join("\n");
-            },
-            rich: {
-              a: {
-                color: "white",
-                fontSize: $screenWidth < 640 ? 15 : 20,
-                fontWeight: "bold",
-              },
-              b: {
-                color: "white",
-                fontSize: $screenWidth < 640 ? 24 : 30,
-                fontWeight: "bold",
-              },
-            },
-          },
-          markLine: {
-            symbol: "none",
-            label: {
-              position: "middle",
-              formatter: "{b}",
-            },
-            lineStyle: {
-              color: "white",
-              fontWeight: "bold", // Make the mark line bold
-              type: "dashed",
-              width: 2, // Increase the dashed line width
-            },
-            data: [{ type: "average", name: "" }],
-          },
-        },
-        {
-          name: "Fair Price",
-          type: "bar",
-          barWidth: $screenWidth < 640 ? "30%" : "30%",
-          smooth: true,
-          stack: change > 0 ? "fairPriceStack" : "",
-          data: [fairPrice],
-          itemStyle: {
-            color: "#2DC97E",
-          },
-          label: {
-            show: true,
-            position: lastPrice > fairPrice ? "outside" : "inside",
-            formatter: function (params) {
-              return ["{a|Fair Price}", "{b|" + "$" + params.value + "}"].join(
-                "\n",
-              );
-            },
-            rich: {
-              a: {
-                color: "white",
-                fontSize: $screenWidth < 640 ? 15 : 20,
-                fontWeight: "bold",
-              },
-              b: {
-                color: "white",
-                fontSize: $screenWidth < 640 ? 24 : 30,
-                fontWeight: "bold",
-              },
-            },
-          },
-
-          markLine: {
-            symbol: "none",
-            label: {
-              position: "middle",
-              formatter: "{b}",
-            },
-            lineStyle: {
-              color: "white",
-              fontWeight: "bold", // Make the mark line bold
-              type: "dashed",
-              width: 2, // Increase the dashed line width
-            },
-            data: [{ type: "average", name: "" }],
-          },
-        },
-        // Add the new bar chart on top
-
-        {
-          name: "Difference",
-          type: "bar",
-          barWidth: "100%", // Set the width to cover the other bars
-          smooth: true,
-          stack: change > 0 ? "fairPriceStack" : "lastPriceStack", // Stack this bar on top of the others
-          data: change > 0 ? [lastPrice - fairPrice] : [fairPrice - lastPrice], // Set the value to 200
-          itemStyle: {
-            color: "#FF2F1F",
-          },
-        },
-      ],
-      aria: {
-        enabled: true,
-        decal: {
-          show: true,
-        },
-      },
-    };
-
-    return options;
-  };
-
-  async function getFairPrice(ticker) {
-    const cachedData = getCache(ticker, "getFairPrice");
-    if (cachedData) {
-      fairPrice = cachedData;
-    } else {
-      try {
-        const response = await fetch("/api/ticker-data", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ ticker: ticker, path: "fair-price" }),
-        });
-        fairPrice = await response.json();
-
-        setCache(ticker, fairPrice, "getFairPrice");
-      } catch (error) {
-        console.error("Failed to fetch swap data:", error);
-        fairPrice = null;
-      }
-    }
-    if (fairPrice !== null && fairPrice >= 0) {
-      $dcfComponent = true;
-    } else {
-      $dcfComponent = false;
-    }
-  }
-
-  $: {
-    if ($stockTicker && typeof window !== "undefined") {
-      isLoaded = false;
-      getFairPrice($stockTicker).then(() => {
-        if (fairPrice !== null) {
-          lastPrice = data?.getStockQuote?.price?.toFixed(2);
-          change = ((1 - fairPrice / lastPrice) * 100)?.toFixed(2);
-          optionsBarChart = plotBarChart();
-        }
-
-        isLoaded = true;
-      });
-    }
-  }
-</script>
-
-<section class="overflow-hidden text-white h-full pb-8">
-  <main class="overflow-hidden">
-    <div class="flex flex-row items-center">
-      <label
-        for="dcfInfo"
-        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
-      >
-        Discounted Cashflow Model
-      </label>
-      <InfoModal
-        title={"Discounted Cashflow Model"}
-        content={contentModal}
-        id={"dcfInfo"}
-      />
-    </div>
-
-    {#if ["Pro", "Plus"]?.includes(data?.user?.tier)}
-      {#if isLoaded}
-        {#if fairPrice !== null}
-          <div
-            class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-md bg-default sm:bg-default"
-          >
-            <div
-              class="mt-4 text-white text-[1rem] sm:text-xl pb-4 sm:pb-0 m-auto text-start"
-            >
-              The DCF model signals a
-
-              {#if change < -3}
-                <span class="text-green-700 dark:text-[#00FC50]">
-                  <svg
-                    class="w-6 h-6 sm:w-7 sm:h-7 inline-block"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    ><g
-                      fill="none"
-                      stroke="#00FC50"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2.5"
-                      ><path d="m3 17l6-6l4 4l8-8" /><path d="M17 7h4v4" /></g
-                    ></svg
-                  >
-                  Buy
-                </span>
-              {:else if change > 3}
-                <span class="text-[#E57C34]">
-                  <svg
-                    class="w-6 h-6 sm:w-7 sm:h-7 inline-block"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 256 256"
-                    ><path
-                      fill="#ff2f1f"
-                      d="M244 136v64a12 12 0 0 1-12 12h-64a12 12 0 0 1 0-24h35l-67-67l-31.51 31.52a12 12 0 0 1-17 0l-72-72a12 12 0 0 1 17-17L96 127l31.51-31.52a12 12 0 0 1 17 0L220 171v-35a12 12 0 0 1 24 0Z"
-                    /></svg
-                  >
-                  Sell
-                </span>
-              {:else}
-                <span class="text-red-700 dark:text-[#FF2F1F]">
-                  <svg
-                    class="w-6 h-6 sm:w-7 sm:h-7 inline-block"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    ><path
-                      fill="#e57c34"
-                      d="m22 12l-4-4v3H3v2h15v3l4-4Z"
-                    /></svg
-                  >
-                  Hold
-                </span>
-              {/if}
-            </div>
-
-            {#if change > 0}
-              <div class="text-white">
-                The Stock Price is
-                <span class="text-[#FF2F1F] sm:text-lg"
-                  >{Math?.abs(change)}% overvalued</span
-                >.
-              </div>
-            {:else if change < 0}
-              <div class="text-white">
-                The Stock Price is
-                <span class="text-green-700 dark:text-[#00FC50]"
-                  >{Math?.abs(change)}% undervalued</span
-                >.
-              </div>
-            {/if}
-
-            <div class="text-white text-md mt-2">
-              <span class="text-blue-400">${$stockTicker}</span>
-              (${lastPrice}) is trading {change < 0 ? "below" : "above"}
-              our estimate of fair value (${fairPrice}).
-            </div>
-
-            <br />
-
-            <div class="text-white text-md mb-10 -mt-3">
-              What is the Fair Price of <span class="font-normal text-blue-400"
-                >${$stockTicker}</span
-              > when looking at its future cash flows? For this estimate we use a
-              Discounted Cash Flow model (DCF).
-            </div>
-
-            <Lazy
-              height={300}
-              fadeOption={{ delay: 100, duration: 500 }}
-              keep={true}
-            >
-              <div class="app w-full m-auto mb-5">
-                <Chart options={optionsBarChart} class="chart w-full" />
-              </div>
-            </Lazy>
-
-            {#if Math?.abs(change) > 30}
-              <div
-                class=" mb-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
-              >
-                <svg
-                  class="w-5 h-5 inline-block mr-0.5 shrink-0"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 256 256"
-                  ><path
-                    fill="#fff"
-                    d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-                  /></svg
-                >
-                Caution: The DCF model may not be reliable for
-                <span class="text-blue-400">${$stockTicker}</span> due to significant
-                deviation between intrinsic value and current price.
-              </div>
-            {/if}
-          </div>
-        {/if}
-      {:else}
-        <div class="flex justify-center items-center h-80">
-          <div class="relative">
-            <label
-              class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-            >
-              <span class="loading loading-spinner loading-md text-gray-400"
-              ></span>
-            </label>
-          </div>
-        </div>
-      {/if}
-    {:else}
-      <div
-        class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold"
-      >
-        <svg
-          class="mr-1.5 w-5 h-5 inline-block"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          ><path
-            fill="#A3A3A3"
-            d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-          /></svg
-        >
-        Unlock content with
-        <a
-          class="inline-block ml-2 text-blue-400 sm:hover:text-white"
-          href="/pricing">Pro Subscription</a
-        >
-      </div>
-    {/if}
-  </main>
-</section>
-
-<style>
-  .app {
-    height: 300px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
-
-  @media (max-width: 640px) {
-    .app {
-      height: 180px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>
diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte
index a8be5132..50938494 100644
--- a/src/lib/components/FailToDeliver.svelte
+++ b/src/lib/components/FailToDeliver.svelte
@@ -277,7 +277,7 @@
       </div>
 
       <div
-        class="chart mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
+        class="shadow-sm mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
         use:highcharts={config}
       ></div>
 
diff --git a/src/lib/components/HoverStockChart.svelte b/src/lib/components/HoverStockChart.svelte
index 9fd28af5..0c120ee1 100644
--- a/src/lib/components/HoverStockChart.svelte
+++ b/src/lib/components/HoverStockChart.svelte
@@ -1,57 +1,8 @@
 <script lang="ts">
-  import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
-
-  import { ColorType } from "lightweight-charts";
-  import { Chart, BaselineSeries, PriceLine } from "svelte-lightweight-charts";
-  import { screenWidth, getCache, setCache } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-  import { afterUpdate } from "svelte";
   export let symbol;
   export let assetType = "stock";
   export let link = null;
 
-  let priceData = [];
-  let changesPercentage = 0;
-  let change = 0;
-  let stockChartData;
-
-  async function getStockData(ticker: string) {
-    const cachedData = getCache(ticker, "hoverStockChart");
-    if (cachedData) {
-      stockChartData = cachedData;
-    } else {
-      const postData = { ticker: ticker };
-      const response = await fetch("/api/hover-stock-chart", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(postData),
-      });
-
-      stockChartData = (await response?.json()) ?? {};
-
-      setCache(ticker, stockChartData, "hoverStockChart");
-    }
-
-    changesPercentage = stockChartData?.changesPercentage;
-    change = stockChartData?.change;
-
-    priceData = stockChartData?.history;
-
-    priceData = priceData
-      ?.map((item) => ({
-        time: Date?.parse(item?.time), // Assuming 'time' is the correct property to parse
-        value: item?.close ?? null,
-      }))
-      ?.filter(
-        (item) =>
-          item?.value !== 0 &&
-          item?.value !== null &&
-          item?.value !== undefined,
-      );
-  }
-
   function getHref(symbol: string) {
     let path = "";
     if (symbol?.length !== 0) {
@@ -67,208 +18,10 @@
     }
     return path;
   }
-
-  $: topLineColor = changesPercentage >= 0 ? "#71CA96" : "#FF7070";
-
-  let width = $screenWidth < 640 ? 80 : 150; //= ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80;
-
-  //Initial height of graph
-  let height = $screenWidth < 640 ? 50 : 60;
-
-  let observer;
-  let ref;
-  let chart;
-
-  ref = (element) => {
-    if (observer) {
-      observer?.disconnect();
-    }
-    if (!element) {
-      return;
-    }
-
-    observer = new ResizeObserver(([entry]) => {
-      width = entry.contentRect.width;
-      height = entry.contentRect.height;
-    });
-    observer.observe(element);
-  };
-
-  const THEMES = {
-    Dark: {
-      chart: {
-        layout: {
-          background: {
-            type: ColorType.Solid,
-            color: "#11151D",
-          },
-          lineColor: "#2B2B43",
-          textColor: "#D9D9D9",
-        },
-        crosshair: {
-          mode: 2,
-        },
-        grid: {
-          vertLines: {
-            visible: false,
-          },
-          horzLines: {
-            visible: false,
-          },
-        },
-      },
-
-      series: {
-        baseValue: { type: "price", price: priceData?.at(0)?.value },
-        priceLineVisible: false,
-        baseLineVisible: true,
-        baseLineColor: "#B2B5BE",
-        baseLineWidth: 1,
-        baseLineStyle: 1,
-        lineWidth: 1.5,
-      },
-    },
-  };
-
-  const AVAILABLE_THEMES = Object?.keys(THEMES);
-
-  let selected = AVAILABLE_THEMES[0];
-  $: theme = THEMES[selected];
-
-  const options = {
-    width: width,
-    height: height,
-    rightPriceScale: {
-      visible: false,
-    },
-    timeScale: {
-      borderColor: "#FFFFFF",
-      textColor: "#FFFFFF",
-      visible: false,
-      fixLeftEdge: true,
-      fixRightEdge: true,
-    },
-    handleScale: {
-      mouseWheel: false,
-    },
-    handleScroll: {
-      mouseWheel: false,
-      horzTouchDrag: false,
-      vertTouchDrag: false,
-      pressedMouseMove: false,
-    },
-  };
-
-  afterUpdate(async () => {
-    if (
-      $screenWidth &&
-      stockChartData &&
-      chart &&
-      typeof window !== "undefined"
-    ) {
-      chart?.timeScale()?.fitContent();
-    }
-  });
-
-  $: charNumber = 20;
 </script>
 
-<div on:mouseover={() => getStockData(symbol)} class="inline-block">
-  <HoverCard.Root>
-    <div on:mouseover>
-      <HoverCard.Trigger
-        class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
-      >
-        <a
-          href={getHref(symbol)}
-          class="sm:hover:text-muted dark:sm:hover:text-white text-blue-700 dark:text-blue-400"
-          >{symbol?.length !== 0 ? symbol : "-"}</a
-        >
-      </HoverCard.Trigger>
-    </div>
-    <HoverCard.Content class=" w-96 bg-[#11151D] border border-gray-600">
-      <div class="flex justify-between space-x-4 w-full text-white">
-        <div class="space-y-1 w-full">
-          <!--Hover Stock Chart-->
-          <label
-            class=" text-sm flex flex-row items-center justify-start bg-[#11151D]"
-          >
-            <div class="flex flex-col items-start w-full">
-              <div class=" flex flex-col items-start pb-1">
-                <h4 class="text-sm text-blue-400 inline-block">
-                  {symbol}
-                </h4>
-                <h5 class="text-sm inline-block">
-                  {stockChartData?.name?.length > charNumber
-                    ? stockChartData?.name?.slice(0, charNumber) + "..."
-                    : stockChartData?.name}
-                </h5>
-              </div>
-              <p>
-                Current Price: {stockChartData?.price?.toFixed(2)} (<span
-                  class="text-xs {change >= 0
-                    ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
-                    : 'text-red-700 dark:text-[#FF2F1F]'}"
-                  >{change?.toFixed(2)}</span
-                >)
-              </p>
-              <p>
-                <svg
-                  class="-ml-1 inline-block w-4 h-4 {changesPercentage >= 0
-                    ? ''
-                    : 'rotate-180'}"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fill={changesPercentage >= 0 ? "#00FC50" : "#FF2F1F"}
-                    d="M12.884 5.116a1.253 1.253 0 0 0-1.768 0l-5 5a1.25 1.25 0 0 0 1.768 1.768l2.866-2.866V18a1.25 1.25 0 1 0 2.5 0V9.018l2.866 2.866a1.25 1.25 0 1 0 1.768-1.768z"
-                  />
-                </svg>
-                {#if changesPercentage != null}
-                  <span
-                    class="-ml-1"
-                    style="color: {changesPercentage >= 0
-                      ? '#00FC50'
-                      : '#FF2F1F'}"
-                  >
-                    {changesPercentage >= 1000 || changesPercentage <= -1000
-                      ? abbreviateNumber(changesPercentage)
-                      : changesPercentage?.toFixed(2)}%
-                  </span>
-                {:else}
-                  -
-                {/if}
-                today
-              </p>
-            </div>
-            {#if priceData?.length > 0}
-              <div class="w-[40%]">
-                <Chart
-                  {...options}
-                  {...theme.chart}
-                  autoSize={true}
-                  ref={(ref) => (chart = ref)}
-                >
-                  <BaselineSeries
-                    data={priceData}
-                    {...theme.series}
-                    {topLineColor}
-                  >
-                    <PriceLine
-                      price={priceData?.at(0)?.value}
-                      lineWidth={1}
-                      color="#fff"
-                    />
-                  </BaselineSeries>
-                </Chart>
-              </div>
-            {/if}
-          </label>
-
-          <!--Hover Stock Chart-->
-        </div>
-      </div>
-    </HoverCard.Content>
-  </HoverCard.Root>
-</div>
+<a
+  href={getHref(symbol)}
+  class="sm:hover:text-muted dark:sm:hover:text-white text-blue-700 dark:text-blue-400"
+  >{symbol?.length !== 0 ? symbol : "-"}</a
+>
diff --git a/src/lib/components/MiniPlot.svelte b/src/lib/components/MiniPlot.svelte
deleted file mode 100644
index e658eaab..00000000
--- a/src/lib/components/MiniPlot.svelte
+++ /dev/null
@@ -1,195 +0,0 @@
-<script>
-  import { ColorType } from "lightweight-charts";
-  import { Chart, BaselineSeries, PriceLine } from "svelte-lightweight-charts";
-  import { screenWidth, etfTicker } from "$lib/store";
-  import { goto } from "$app/navigation";
-
-  export let title;
-  export let priceData;
-  export let changesPercentage;
-  export let previousClose;
-
-  const topLineColor = "#71CA96";
-  const topFillColor1 = "rgba( 38, 166, 154, 0.2)";
-  const bottomLineColor = "#FF7070";
-  const bottomFillColor1 = "rgba(239, 83, 80, 0.2)";
-
-  let width = $screenWidth < 640 ? 80 : $screenWidth < 1500 ? 150 : 220; //= ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80;
-
-  //Initial height of graph
-  let height = $screenWidth < 640 ? 50 : 60;
-
-  let observer;
-  let ref;
-  let chart;
-
-  ref = (element) => {
-    if (observer) {
-      observer?.disconnect();
-    }
-    if (!element) {
-      return;
-    }
-
-    observer = new ResizeObserver(([entry]) => {
-      width = entry.contentRect.width;
-      height = entry.contentRect.height;
-    });
-    observer.observe(element);
-  };
-
-  const THEMES = {
-    Dark: {
-      chart: {
-        layout: {
-          background: {
-            type: ColorType.Solid,
-            color: "#09090B",
-          },
-          lineColor: "#2B2B43",
-          textColor: "#D9D9D9",
-        },
-        crosshair: {
-          mode: 2,
-        },
-        grid: {
-          vertLines: {
-            visible: false,
-          },
-          horzLines: {
-            visible: false,
-          },
-        },
-      },
-
-      series: {
-        baseValue: { type: "price", price: priceData?.at(0)?.value },
-        priceLineVisible: false,
-        baseLineVisible: true,
-        baseLineColor: "#B2B5BE",
-        baseLineWidth: 1,
-        baseLineStyle: 1,
-        lineWidth: 1.5,
-      },
-    },
-  };
-
-  const AVAILABLE_THEMES = Object?.keys(THEMES);
-
-  let selected = AVAILABLE_THEMES[0];
-  $: theme = THEMES[selected];
-
-  const options = {
-    width: width,
-    height: height,
-    rightPriceScale: {
-      visible: false,
-    },
-    timeScale: {
-      borderColor: "#FFFFFF",
-      textColor: "#FFFFFF",
-      visible: false,
-      fixLeftEdge: true,
-      fixRightEdge: true,
-    },
-    handleScale: {
-      mouseWheel: false,
-    },
-    handleScroll: {
-      mouseWheel: false,
-      horzTouchDrag: false,
-      vertTouchDrag: false,
-      pressedMouseMove: false,
-    },
-  };
-
-  function etfSelector() {
-    if (title === "S&P500") {
-      etfTicker.update((value) => "SPY");
-      goto("/etf/SPY");
-    } else if (title === "Nasdaq") {
-      etfTicker.update((value) => "QQQ");
-      goto("/etf/QQQ");
-    } else if (title === "Dow") {
-      etfTicker.update((value) => "DIA");
-      goto("/etf/DIA");
-    } else if (title === "Russel") {
-      etfTicker.update((value) => "IWM");
-      goto("/etf/IWM");
-    }
-  }
-
-  $: {
-    if (chart && typeof window !== "undefined") {
-      chart?.timeScale()?.fitContent();
-    }
-  }
-</script>
-
-<label
-  on:click={etfSelector}
-  class="sm:hover:border-[#3C74D4] duration-100 transition ease-in-out cursor-pointer flex flex-row items-center rounded-md shadow-lg border border-gray-600 bg-default"
->
-  <div class="flex flex-col items-center lg:mr-5">
-    <span
-      class="text-white font-semibold text-xs w-20 text-start pl-3 uppercase"
-      >{title}</span
-    >
-    <div class="flex flex-row mt-1 items-center">
-      {#if changesPercentage >= 0}
-        <svg
-          class="w-4 h-4 -mr-0.5"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          ><g id="evaArrowUpFill0"
-            ><g id="evaArrowUpFill1"
-              ><path
-                id="evaArrowUpFill2"
-                fill="#00FC50"
-                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-              /></g
-            ></g
-          ></svg
-        >
-        <span class="text-[#00FC50] text-xs"
-          >+{changesPercentage?.toFixed(2)}%</span
-        >
-      {:else}
-        <svg
-          class="w-4 h-4 -mr-0.5 rotate-180"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          ><g id="evaArrowUpFill0"
-            ><g id="evaArrowUpFill1"
-              ><path
-                id="evaArrowUpFill2"
-                fill="#FF2F1F"
-                d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-              /></g
-            ></g
-          ></svg
-        >
-        <span class="text-[#FF2F1F] text-xs"
-          >{changesPercentage?.toFixed(2)}%
-        </span>
-      {/if}
-    </div>
-  </div>
-  <Chart
-    {...options}
-    {...theme.chart}
-    autoSize={true}
-    ref={(ref) => (chart = ref)}
-  >
-    <BaselineSeries
-      data={priceData}
-      {...theme.series}
-      {topLineColor}
-      {topFillColor1}
-      {bottomLineColor}
-      {bottomFillColor1}
-    >
-      <PriceLine price={priceData?.at(0)?.value} lineWidth={1} color="#fff" />
-    </BaselineSeries>
-  </Chart>
-</label>
diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte
deleted file mode 100644
index 776abb2e..00000000
--- a/src/lib/components/PriceAnalysis.svelte
+++ /dev/null
@@ -1,344 +0,0 @@
-<script lang="ts">
-  import { displayCompanyName, screenWidth } from "$lib/store";
-  import InfoModal from "$lib/components/InfoModal.svelte";
-  import { Chart } from "svelte-echarts";
-  import { onMount } from "svelte";
-
-  import { init, use } from "echarts/core";
-  import { LineChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-
-  use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
-
-  export let data;
-  let isLoaded = false;
-
-  let priceAnalysisDict = data?.getPriceAnalysis;
-  let lastPrice = data?.getStockQuote?.price ?? "n/a";
-
-  const modalContent = `
-    Our AI model, employing a Bayesian approach, predicts future prices by breaking down trends, seasonality, and holiday effects. It integrates uncertainty to offer forecasts with intervals.<br><br>
-    <span class="font-semibold underline"><span class="italic">R</span><sup>2</sup> Score</span>: How well the regression model fits the data. A high score (close to 100%) is good, indicating a strong fit, while a low score (close to 0%) is bad, suggesting poor fit.
-    <br><br>
-    <span class="font-semibold underline">Mean Absolute Percentage Error (MAPE)</span>: Measures the average percentage difference between predicted and actual values. A lower MAPE indicates better accuracy, while a higher MAPE suggests less accurate predictions.
-  `;
-
-  const monthNames = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-
-  let r2Score;
-  let mape;
-  let priceSentiment = "n/a";
-  let oneYearPricePrediction = "n/a";
-  let optionsData;
-
-  function getPlotOptions() {
-    const predictionDate = priceAnalysisDict?.predictionDate;
-    const upperBand = priceAnalysisDict?.upperBand;
-    const lowerBand = priceAnalysisDict?.lowerBand?.map((value) =>
-      value < 0 ? 0 : value,
-    );
-    const historicalPrice = priceAnalysisDict?.historicalPrice;
-
-    const option = {
-      silent: true,
-      animation: false,
-      grid: {
-        left: screenWidth < 640 ? "0%" : "2%",
-        right: screenWidth < 640 ? "5%" : "2%",
-        bottom: screenWidth < 640 ? "0%" : "5%",
-        containLabel: true,
-      },
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-      },
-      xAxis: {
-        type: "category",
-        boundaryGap: false,
-        data: predictionDate,
-        axisLabel: {
-          color: "#fff",
-          formatter(value) {
-            const dateParts = value?.split("-");
-            const year = dateParts[0]?.substring(2);
-            const monthIndex = parseInt(dateParts[1], 10) - 1;
-            return `${monthNames[monthIndex]} '${year}`;
-          },
-        },
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: { show: false },
-          axisLabel: { show: false },
-        },
-      ],
-      series: [
-        {
-          name: "Stock Price",
-          data: historicalPrice,
-          showSymbol: false,
-          smooth: true,
-          type: "line",
-          itemStyle: { color: "#fff" },
-        },
-        {
-          name: "Upperband",
-          data: upperBand,
-          showSymbol: false,
-          smooth: true,
-          type: "line",
-          areaStyle: { color: "rgba(60, 116, 212, 0.4)" },
-          lineStyle: { color: "rgb(60, 116, 212)" },
-        },
-        {
-          name: "Lowerband",
-          data: lowerBand,
-          showSymbol: false,
-          smooth: true,
-          type: "line",
-          areaStyle: { color: "#09090B", opacity: 1 },
-          lineStyle: { color: "rgb(60, 116, 212)" },
-        },
-      ],
-    };
-
-    return option;
-  }
-
-  onMount(async () => {
-    oneYearPricePrediction = priceAnalysisDict?.meanResult?.slice(-1)?.at(0);
-    mape = priceAnalysisDict?.mape;
-    r2Score = priceAnalysisDict?.r2Score;
-    priceSentiment = lastPrice < oneYearPricePrediction ? "Bullish" : "Bearish";
-    optionsData = await getPlotOptions();
-    isLoaded = true;
-  });
-</script>
-
-<section class="overflow-hidden text-white h-full pb-8 sm:pb-2">
-  <main class="overflow-hidden">
-    <div class="flex flex-row items-center">
-      <label
-        for="priceAnalysisInfo"
-        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
-      >
-        AI Price Analysis
-      </label>
-      <InfoModal
-        title={"Price Analysis"}
-        content={modalContent}
-        id={"priceAnalysisInfo"}
-      />
-    </div>
-
-    {#if isLoaded}
-      {#if Object?.keys(priceAnalysisDict)?.length !== 0}
-        <div class="w-full flex flex-col items-start">
-          <div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
-            Our model predicts future prices by analyzing trends, seasonal
-            variations, and holiday impacts. Here are the stats of the model for {$displayCompanyName}
-            to ensure transparency and reliability.
-          </div>
-        </div>
-
-        <div class="w-full mt-5 mb-5 flex justify-start items-center">
-          <div
-            class="w-full grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-3 gap-x-3"
-          >
-            <!--Start Flow Sentiment-->
-            <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
-            >
-              <div class="flex flex-col items-start">
-                <span class=" text-gray-200 text-sm">Price Sentiment</span>
-                <span
-                  class="text-start text-[1rem] sm:text-lg font-semibold {priceSentiment ===
-                  'Bullish'
-                    ? 'text-[#37C97D]'
-                    : 'text-red-700 dark:text-[#FF2F1F]'}"
-                  >{priceSentiment}</span
-                >
-              </div>
-            </div>
-
-            <!--End Flow Sentiment-->
-            <!--Start Put/Call-->
-            <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
-            >
-              <div class="flex flex-col items-start">
-                <span class=" text-gray-200 text-sm"
-                  ><span class="italic">R</span><sup>2</sup> Score</span
-                >
-                <span class="text-start text-sm sm:text-[1rem] text-white">
-                  {r2Score >= 65 ? "Good" : r2Score >= 50 ? "Moderate" : "Bad"}
-                </span>
-              </div>
-              <!-- Circular Progress -->
-              <div class="relative size-14 ml-auto">
-                <svg
-                  class="size-full w-14 h-14"
-                  viewBox="0 0 36 36"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <!-- Background Circle -->
-                  <circle
-                    cx="18"
-                    cy="18"
-                    r="16"
-                    fill="none"
-                    class="stroke-current text-[#3E3E3E]"
-                    stroke-width="3"
-                  ></circle>
-                  <!-- Progress Circle inside a group with rotation -->
-                  <g class="origin-center -rotate-90 transform">
-                    <circle
-                      cx="18"
-                      cy="18"
-                      r="16"
-                      fill="none"
-                      class="stroke-current {r2Score >= 65
-                        ? 'text-green-700 dark:text-[#00FC50]'
-                        : r2Score >= 50
-                          ? 'text-[#F8901E]'
-                          : 'text-red-700 dark:text-[#FF2F1F]'}"
-                      stroke-width="3"
-                      stroke-dasharray="100"
-                      stroke-dashoffset={100 - r2Score}
-                    ></circle>
-                  </g>
-                </svg>
-                <!-- Percentage Text -->
-                <div
-                  class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
-                >
-                  <span class="text-center text-white text-sm">{r2Score}%</span>
-                </div>
-              </div>
-              <!-- End Circular Progress -->
-            </div>
-            <!--End Put/Call-->
-
-            <!--Start mape-->
-            <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-primary shadow-lg rounded-md h-20"
-            >
-              <div class="flex flex-col items-start">
-                <span class=" text-gray-200 text-sm">MAPE</span>
-                <span class="text-start text-sm sm:text-[1rem] text-white">
-                  {mape <= 15 ? "Good" : mape <= 35 ? "Moderate" : "Bad"}
-                </span>
-              </div>
-              <!-- Circular Progress -->
-              <div class="relative size-14 ml-auto">
-                <svg
-                  class="size-full w-14 h-14"
-                  viewBox="0 0 36 36"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <!-- Background Circle -->
-                  <circle
-                    cx="18"
-                    cy="18"
-                    r="16"
-                    fill="none"
-                    class="stroke-current text-[#3E3E3E]"
-                    stroke-width="3"
-                  ></circle>
-                  <!-- Progress Circle inside a group with rotation -->
-                  <g class="origin-center -rotate-90 transform">
-                    <circle
-                      cx="18"
-                      cy="18"
-                      r="16"
-                      fill="none"
-                      class="stroke-current {mape <= 15
-                        ? 'text-green-700 dark:text-[#00FC50]'
-                        : mape <= 35
-                          ? 'text-[#F8901E]'
-                          : 'text-red-700 dark:text-[#FF2F1F]'}"
-                      stroke-width="3"
-                      stroke-dasharray="100"
-                      stroke-dashoffset={100 - mape > 0 ? 100 - mape : 1}
-                    ></circle>
-                  </g>
-                </svg>
-                <!-- Percentage Text -->
-                <div
-                  class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
-                >
-                  <span class="text-center text-white text-sm">{mape}%</span>
-                </div>
-              </div>
-              <!-- End Circular Progress -->
-            </div>
-            <!--End mape-->
-          </div>
-        </div>
-
-        <div class="app w-full h-[300px]">
-          <Chart {init} options={optionsData} class="chart" />
-        </div>
-
-        <div class="text-white text-[1rem] mt-4 sm:mt-7 ml-1">
-          Over the next 12 months, the model predicts a
-          <span
-            class="font-semibold {priceSentiment === 'Bullish'
-              ? 'text-[#37C97D]'
-              : 'text-red-700 dark:text-[#FF2F1F]'}">{priceSentiment}</span
-          >
-          trend, suggesting that the future price is expected to {priceSentiment ===
-          "Bullish"
-            ? "surpass"
-            : "to be less than"} the previous price of
-          <span class="font-semibold">${lastPrice?.toFixed(2) ?? "n/a"}</span>,
-          with a mean value of
-          <span class="font-semibold">${oneYearPricePrediction}</span>.
-        </div>
-      {/if}
-    {:else}
-      <div class="flex justify-center items-center h-80">
-        <div class="relative">
-          <label
-            class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-          >
-            <span class="loading loading-spinner loading-md text-gray-400"
-            ></span>
-          </label>
-        </div>
-      </div>
-    {/if}
-  </main>
-</section>
-
-<style>
-  .app {
-    height: 300px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
-
-  @media (max-width: 640px) {
-    .app {
-      height: 230px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>
diff --git a/src/lib/components/Sidecard.svelte b/src/lib/components/Sidecard.svelte
index 3329b7dc..f13bff74 100644
--- a/src/lib/components/Sidecard.svelte
+++ b/src/lib/components/Sidecard.svelte
@@ -69,9 +69,9 @@
         animation: false,
       },
       title: {
-        text: `<div class="text-muted dark:text-gray-200 mt-3  text-center font-normal text-2xl">Price Target: <span class="${changesPercentage >= 0 ? "text-green-700 dark:text-[#00FC50]" : "text-[#FF2F1F]"}">$${priceTarget}</span></div>
+        text: `<div class="text-muted dark:text-gray-200 mt-3  text-center font-normal text-2xl">Price Target: <span class="${changesPercentage >= 0 ? "text-green-700 dark:text-[#00FC50]" : "text-red-700 dark:text-[#FF2F1F]"}">$${priceTarget}</span></div>
         <div class="text-muted dark:text-gray-200  mb-2 text-center font-normal text-xl">(${changesPercentage}% ${changesPercentage >= 0 ? "upside" : "downside"})</div>
-        <div class="text-muted dark:text-gray-200 text-center font-normal text-xl flex justify-center items-center">Analyst Consensus: <span class="ml-1 ${consensusRating === "Buy" ? "text-green-700 dark:text-[#00FC50]" : consensusRating === "Sell" ? "text-red-500 dark:text-[#FF2F1F]" : consensusRating === "Hold" ? "text-orange-500 dark:text-[#D5AB31]" : "text-muted dark:text-white"}">${consensusRating ?? "n/a"}</span></div>`,
+        <div class="text-muted dark:text-gray-200 text-center font-normal text-xl flex justify-center items-center">Analyst Consensus: <span class="ml-1 ${consensusRating === "Buy" ? "text-green-700 dark:text-[#00FC50]" : consensusRating === "Sell" ? "text-red-700 dark:text-[#FF2F1F]" : consensusRating === "Hold" ? "text-orange-500 dark:text-[#D5AB31]" : "text-muted dark:text-white"}">${consensusRating ?? "n/a"}</span></div>`,
         style: {
           color: "white",
           // Using inline CSS for margin-top and margin-bottom
@@ -299,7 +299,7 @@
         </p>
 
         <div
-          class="mt-3 border border-gray-300 dark:border-gray-700 rounded"
+          class="mt-3 border border-gray-300 dark:border-gray-800 rounded"
           use:highcharts={configAnalyst}
         ></div>
 
diff --git a/src/lib/components/VaR.svelte b/src/lib/components/VaR.svelte
deleted file mode 100644
index 11d2ecfb..00000000
--- a/src/lib/components/VaR.svelte
+++ /dev/null
@@ -1,253 +0,0 @@
-<script lang="ts">
-  import {
-    varComponent,
-    displayCompanyName,
-    stockTicker,
-    etfTicker,
-    assetType,
-    getCache,
-    setCache,
-  } from "$lib/store";
-  import InfoModal from "$lib/components/InfoModal.svelte";
-  import Infobox from "$lib/components/Infobox.svelte";
-
-  import { Chart } from "svelte-echarts";
-
-  import { init, use } from "echarts/core";
-  import { LineChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-
-  export let data;
-  export let rawData = {};
-
-  use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
-
-  let isLoaded = false;
-  let rating: string | undefined;
-  let outlook: string | undefined;
-  let valueAtRisk: number | string | undefined;
-  let optionsData: any;
-  let monthlyVarAvg: string | undefined;
-
-  function getPlotOptions() {
-    const dates: string[] = [];
-    const varList: number[] = [];
-    const priceList = [];
-
-    rawData?.history?.forEach((item: { date: string; var: number }) => {
-      dates.push(item?.date);
-      varList.push(item?.var);
-      priceList.push(item?.price);
-    });
-
-    const sum = varList.reduce((acc, curr) => acc + curr, 0);
-    monthlyVarAvg = (sum / varList.length)?.toFixed(2);
-
-    const option = {
-      silent: true,
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-      },
-      animation: false,
-      grid: {
-        left: "2%",
-        right: "2%",
-        bottom: "2%",
-        top: "5%",
-        containLabel: true,
-      },
-      xAxis: {
-        type: "category",
-        boundaryGap: false,
-        data: dates,
-        axisLabel: {
-          color: "#fff",
-          formatter: (value: string) => {
-            const date = new Date(value + "-01");
-            return new Intl.DateTimeFormat("en-US", {
-              year: "numeric",
-              month: "short",
-            }).format(date);
-          },
-        },
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: { show: false },
-          axisLabel: { show: false },
-        },
-        {
-          type: "value",
-          splitLine: { show: false },
-          axisLabel: { show: false },
-        },
-      ],
-      series: [
-        {
-          name: "VaR",
-          data: varList,
-          type: "line",
-          itemStyle: { color: "#E11D48" },
-          showSymbol: false,
-        },
-        {
-          name: "Stock Price",
-          data: priceList,
-          type: "line",
-          yAxisIndex: 1,
-          itemStyle: { color: "#fff" },
-          showSymbol: false,
-        },
-      ],
-    };
-
-    return option;
-  }
-
-  $: {
-    const ticker = $assetType === "stock" ? $stockTicker : "etf";
-
-    if (ticker) {
-      isLoaded = false;
-
-      rating = rawData.rating;
-      outlook = rawData.outlook;
-      valueAtRisk = rawData.history?.slice(-1)?.at(0)?.var ?? "n/a";
-      optionsData = getPlotOptions();
-    }
-  }
-</script>
-
-<section class="overflow-hidden text-white h-full pb-10 sm:pb-0">
-  <main class="overflow-hidden">
-    <div class="flex flex-row items-center">
-      <label
-        for="varInfo"
-        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
-      >
-        Value at Risk
-      </label>
-      <InfoModal
-        title={"Value at Risk"}
-        content={`Value at Risk (VaR) quantifies the potential loss of investment or capital within a specified time frame (N days) under typical market conditions, providing an estimate of potential losses with a given probability for ${$displayCompanyName}.`}
-        id={"varInfo"}
-      />
-    </div>
-
-    {#if Object?.keys(rawData)?.length !== 0}
-      <div class="pb-4 w-full mt-5">
-        <div
-          class="w-auto p-4 sm:p-6 bg-default sm:bg-default rounded-md relative"
-        >
-          <div class="flex flex-row items-center justify-between">
-            <div class="relative size-[60px] sm:size-[90px] ml-auto">
-              <svg
-                class="size-full w-[60px] h-[60px] sm:w-[90px] sm:h-[90px]"
-                viewBox="0 0 36 36"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <!-- Background Circle -->
-                <circle
-                  cx="18"
-                  cy="18"
-                  r="16"
-                  fill="none"
-                  class="stroke-current text-[#303030]"
-                  stroke-width="4"
-                ></circle>
-                <!-- Progress Circle inside a group with rotation -->
-                <g class="origin-center -rotate-90 transform">
-                  <circle
-                    cx="18"
-                    cy="18"
-                    r="16"
-                    fill="none"
-                    class="stroke-current {rating > 5
-                      ? 'text-green-700 dark:text-[#00FC50]'
-                      : rating < 5
-                        ? 'text-red-700 dark:text-[#FF2F1F]'
-                        : 'text-white'} "
-                    stroke-width="4"
-                    stroke-dasharray="100"
-                    stroke-dashoffset={100 - rating * 10}
-                  ></circle>
-                </g>
-              </svg>
-              <!-- Percentage Text -->
-              <div
-                class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
-              >
-                <span
-                  class="text-center text-white text-xl sm:text-2xl font-semibold"
-                >
-                  {rating}
-                </span>
-              </div>
-            </div>
-
-            <div
-              class="flex flex-col items-start ml-4 sm:ml-10 mr-auto sm:-top-3 sm:relative"
-            >
-              <h3
-                class="hidden sm:block text-gray-300 text-[1rem] sm:text-lg font-semibold"
-              >
-                <span
-                  class={outlook === "Minimum Risk"
-                    ? "text-[#10BC09]"
-                    : outlook === "Risky"
-                      ? "text-red-500"
-                      : "text-white"}>{outlook}</span
-                > outlook:
-              </h3>
-              <span class="text-gray-200 text-sm sm:text-lg mt-1">
-                Under typical market conditions, there is a <span
-                  class="font-semibold">95%</span
-                >
-                probability that
-                {$assetType === "stock" ? $stockTicker : $etfTicker}
-                will incur a maximum loss of
-                <span class="text-[#FF2F1F] font-semibold">{valueAtRisk}%</span>
-                in the upcoming week.
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <h2 class="text-white text-xl sm:text-2xl font-semibold mt-5">
-        Historical VaR
-      </h2>
-      <div class="text-white text-[1rem] mt-3">
-        Based on historical price data, the company experienced an average
-        monthly Value-at-Risk <span class="font-semibold">{monthlyVarAvg}%</span
-        >.
-      </div>
-
-      <div class="app w-full h-[300px] mt-5">
-        <Chart {init} options={optionsData} class="chart" />
-      </div>
-    {:else}
-      <Infobox text="No data available" />
-    {/if}
-  </main>
-</section>
-
-<style>
-  .app {
-    height: 300px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
-
-  @media (max-width: 640px) {
-    .app {
-      height: 210px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/economic-indicator/+page.server.ts b/src/routes/economic-indicator/+page.server.ts
deleted file mode 100644
index b704d431..00000000
--- a/src/routes/economic-indicator/+page.server.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export const load = async ({ locals, setHeaders }) => {
-  const getEconomicIndicator = async () => {
-    const { apiKey, apiURL } = locals;
-
-    const response = await fetch(apiURL + "/economic-indicator", {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getEconomicIndicator: await getEconomicIndicator(),
-  };
-};
diff --git a/src/routes/economic-indicator/+page.svelte b/src/routes/economic-indicator/+page.svelte
deleted file mode 100644
index 6709413e..00000000
--- a/src/routes/economic-indicator/+page.svelte
+++ /dev/null
@@ -1,1023 +0,0 @@
-<script lang="ts">
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
-  import { Chart } from "svelte-echarts";
-  import Lazy from "$lib/components/Lazy.svelte";
-  import Infobox from "$lib/components/Infobox.svelte";
-  import SEO from "$lib/components/SEO.svelte";
-  import { init, use } from "echarts/core";
-  import { LineChart, BarChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-  import { onMount } from "svelte";
-  import { goto } from "$app/navigation";
-  use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
-
-  export let data;
-
-  let isLoaded = false;
-  let rawData;
-  let tableList = [];
-  let optionsData;
-  let optionsCPI;
-  let optionsGDP;
-  let optionsInflation;
-  let optionsFedFundRate;
-
-  let activeIdx = 0;
-
-  const tabs = [
-    {
-      title: "Annual",
-    },
-    {
-      title: "Quarterly",
-    },
-  ];
-
-  let timePeriod = "threeYears";
-  const monthNames = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-
-  const treasuryLabel = {
-    month1: "1-Month",
-    month2: "2-Month",
-    month3: "3-Month",
-    month6: "6-Month",
-    year1: "1-Year",
-    year2: "2-Year",
-    year3: "3-Year",
-    year5: "5-Year",
-    year7: "7-Year",
-    year10: "10-Year",
-    year20: "20-Year",
-    year30: "30-Year",
-  };
-
-  function filterEndOfYearDates(data) {
-    // Step 1: Group data by year
-    const groupedByYear = data.reduce((acc, item) => {
-      const year = new Date(item.date).getFullYear();
-      if (!acc[year]) {
-        acc[year] = [];
-      }
-      acc[year].push(item);
-      return acc;
-    }, {});
-
-    // Step 2: For each year, find the entry with the latest date
-    const annualData = Object.values(groupedByYear).map((yearData) => {
-      return yearData.reduce((latest, current) => {
-        return new Date(latest.date) > new Date(current.date)
-          ? latest
-          : current;
-      });
-    });
-
-    return annualData;
-  }
-
-  function filterEndOfQuarterDates(data) {
-    // Step 1: Group data by year and quarter
-    const groupedByQuarter = data?.reduce((acc, item) => {
-      const date = new Date(item?.date);
-      const year = date.getFullYear();
-      const quarter = Math?.floor(date?.getMonth() / 3) + 1; // Get the quarter (1-4)
-
-      const key = `${year}-Q${quarter}`;
-      if (!acc[key]) {
-        acc[key] = [];
-      }
-      acc[key].push(item);
-      return acc;
-    }, {});
-
-    // Step 2: For each year-quarter group, find the entry with the latest date
-    const quarterlyData = Object?.values(groupedByQuarter)?.map(
-      (quarterData) => {
-        return quarterData?.reduce((latest, current) => {
-          return new Date(latest?.date) > new Date(current?.date)
-            ? latest
-            : current;
-        });
-      },
-    );
-
-    return quarterlyData;
-  }
-
-  function changeTablePeriod(index) {
-    activeIdx = index;
-    if (activeIdx === 0) {
-      tableList = filterEndOfYearDates(rawData);
-    } else {
-      if (["Pro", "Plus"]?.includes(data?.user?.tier)) {
-        tableList = filterEndOfQuarterDates(rawData);
-      } else {
-        goto("/pricing");
-      }
-    }
-    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
-  }
-
-  async function changeStatement(event) {
-    timePeriod = event.target.value;
-
-    optionsData = await plotData();
-  }
-
-  // Function to filter data by a specified time period
-  function filterDataByTimePeriod(rawData, timePeriod) {
-    let dates = [];
-    let seriesData = {};
-
-    const now = new Date();
-
-    // Calculate the date threshold based on the selected time period
-    let thresholdDate;
-    switch (timePeriod) {
-      case "oneMonth":
-        thresholdDate = new Date(now);
-        thresholdDate.setMonth(now.getMonth() - 1);
-        break;
-      case "sixMonths":
-        thresholdDate = new Date(now);
-        thresholdDate.setMonth(now.getMonth() - 6);
-        break;
-      case "oneYear":
-        thresholdDate = new Date(now);
-        thresholdDate.setFullYear(now.getFullYear() - 1);
-        break;
-      case "threeYears":
-        thresholdDate = new Date(now);
-        thresholdDate.setFullYear(now.getFullYear() - 3);
-        break;
-      case "fiveYears":
-        thresholdDate = new Date(now);
-        thresholdDate.setFullYear(now.getFullYear() - 5);
-        break;
-      case "tenYears":
-        thresholdDate = new Date(now);
-        thresholdDate.setFullYear(now.getFullYear() - 10);
-        break;
-      case "max":
-      default:
-        thresholdDate = new Date(0); // Set to the earliest possible date
-        break;
-    }
-
-    // Filter the data based on the threshold date
-    rawData?.forEach((item) => {
-      const itemDate = new Date(item?.date);
-      if (itemDate >= thresholdDate) {
-        dates.push(item?.date);
-
-        // Iterate over each key in the item, except for 'date'
-        Object.keys(item).forEach((key) => {
-          if (key !== "date") {
-            // Initialize the array if it doesn't exist
-            if (!seriesData[key]) {
-              seriesData[key] = [];
-            }
-            // Push the corresponding value into the appropriate array
-            seriesData[key].push(item[key]);
-          }
-        });
-      }
-    });
-
-    return { dates, seriesData };
-  }
-
-  // Function to plot data based on a specified time period
-  async function plotData() {
-    // Get the filtered data based on the selected time period
-    const { dates, seriesData } = filterDataByTimePeriod(rawData, timePeriod);
-
-    // Convert seriesData to the format required by the series property
-    let series = Object?.keys(seriesData).map((key) => {
-      return {
-        name: treasuryLabel[key],
-        data: seriesData[key],
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-      };
-    });
-
-    const options = {
-      animation: false,
-      grid: {
-        left: "2%",
-        right: "2%",
-        bottom: "2%",
-        top: "10%",
-        containLabel: true,
-      },
-      xAxis: {
-        axisLabel: {
-          color: "#fff",
-          formatter: function (value) {
-            // Assuming dates are in the format 'yyyy-mm-dd'
-            // Extract the month and day from the date string and convert the month to its abbreviated name
-            const dateParts = value.split("-");
-            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
-            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-            return `${monthNames[monthIndex]} '${year}`;
-          },
-        },
-        data: dates,
-        type: "category",
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          axisLabel: {
-            show: false,
-          },
-        },
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-        },
-      ],
-      series: series, // Use the dynamically created series array
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-      },
-    };
-
-    return options;
-  }
-
-  async function plotCPI() {
-    // Get the filtered data based on the selected time period
-    let dates = [];
-    let valueList = [];
-    // Iterate over the data and extract required information
-    data?.getEconomicIndicator?.cpi?.forEach((item) => {
-      dates?.push(item?.date);
-      valueList?.push(item?.value);
-    });
-
-    const options = {
-      animation: false,
-      grid: {
-        left: "2%",
-        right: "2%",
-        bottom: "2%",
-        top: "10%",
-        containLabel: true,
-      },
-      xAxis: {
-        axisLabel: {
-          color: "#fff",
-          formatter: function (value) {
-            // Assuming dates are in the format 'yyyy-mm-dd'
-            // Extract the month and day from the date string and convert the month to its abbreviated name
-            const dateParts = value.split("-");
-            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
-            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-            return `${monthNames[monthIndex]} '${year}`;
-          },
-        },
-        data: dates,
-        type: "category",
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          axisLabel: {
-            show: false,
-          },
-        },
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-        },
-      ],
-      series: {
-        name: "CPI",
-        data: valueList,
-        type: "line",
-        areaStyle: { opacity: 0.02 },
-        smooth: true,
-        symbol: "none",
-        itemStyle: {
-          color: "#fff",
-        },
-      },
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-      },
-    };
-
-    return options;
-  }
-
-  async function plotGDP() {
-    // Get the filtered data based on the selected time period
-    let dates = [];
-    let gdpList = [];
-    let realGDPList = [];
-    let realGDPPerCapitaList = [];
-    // Iterate over the data and extract required information
-    data?.getEconomicIndicator?.gdp?.forEach((item) => {
-      dates?.push(item?.date);
-      gdpList?.push(item?.value);
-    });
-
-    data?.getEconomicIndicator?.realGDP?.forEach((item) => {
-      realGDPList?.push(item?.value);
-    });
-
-    data?.getEconomicIndicator?.realGDPPerCapita?.forEach((item) => {
-      realGDPPerCapitaList?.push(item?.value);
-    });
-
-    const options = {
-      animation: false,
-      grid: {
-        left: "2%",
-        right: "2%",
-        bottom: "2%",
-        top: "10%",
-        containLabel: true,
-      },
-      xAxis: {
-        axisLabel: {
-          color: "#fff",
-          formatter: function (value) {
-            // Assuming dates are in the format 'yyyy-mm-dd'
-            // Extract the month and day from the date string and convert the month to its abbreviated name
-            const dateParts = value.split("-");
-            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
-            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-            return `${monthNames[monthIndex]} '${year}`;
-          },
-        },
-        data: dates,
-        type: "category",
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          axisLabel: {
-            show: false,
-          },
-        },
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          axisLabel: {
-            show: false,
-          },
-        },
-      ],
-      series: [
-        {
-          name: "GDP",
-          data: gdpList,
-          type: "line",
-          smooth: true,
-          showSymbol: false,
-        },
-        {
-          name: "Real GDP",
-          data: realGDPList,
-          type: "line",
-          smooth: true,
-          showSymbol: false,
-        },
-        {
-          name: "Real GDP Per Capita",
-          data: realGDPPerCapitaList,
-          type: "line",
-          yAxisIndex: 1,
-          smooth: true,
-          showSymbol: false,
-        },
-      ],
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-      },
-    };
-
-    return options;
-  }
-
-  async function plotInflation() {
-    // Get the filtered data based on the selected time period
-    let dates = [];
-    let inflationRateList = [];
-    let recessionList = [];
-    // Iterate over the data and extract required information
-    data?.getEconomicIndicator?.inflationRate?.forEach((item) => {
-      dates?.push(item?.date);
-      inflationRateList?.push(item?.value);
-    });
-
-    data?.getEconomicIndicator?.unemploymentRate?.forEach((item) => {
-      recessionList?.push(item?.value);
-    });
-
-    const options = {
-      animation: false,
-      grid: {
-        left: "2%",
-        right: "2%",
-        bottom: "2%",
-        top: "10%",
-        containLabel: true,
-      },
-      xAxis: {
-        axisLabel: {
-          color: "#fff",
-          formatter: function (value) {
-            // Assuming dates are in the format 'yyyy-mm-dd'
-            // Extract the month and day from the date string and convert the month to its abbreviated name
-            const dateParts = value.split("-");
-            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
-            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-            return `${monthNames[monthIndex]} '${year}`;
-          },
-        },
-        data: dates,
-        type: "category",
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          axisLabel: {
-            show: false,
-          },
-        },
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          axisLabel: {
-            show: false,
-          },
-        },
-      ],
-      series: [
-        {
-          name: "Inflation Rate",
-          data: inflationRateList,
-          type: "line",
-          smooth: true,
-          showSymbol: false,
-        },
-        {
-          name: "Unemployment Rate",
-          data: recessionList,
-          yAxisIndex: 1,
-
-          type: "line",
-          smooth: true,
-          showSymbol: false,
-        },
-      ],
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-      },
-    };
-
-    return options;
-  }
-
-  async function plotFedFundRate() {
-    // Get the filtered data based on the selected time period
-    let dates = [];
-    let valueList = [];
-    // Iterate over the data and extract required information
-    data?.getEconomicIndicator?.fedFundRate?.forEach((item) => {
-      dates?.push(item?.date);
-      valueList?.push(item?.value);
-    });
-
-    const options = {
-      animation: false,
-      grid: {
-        left: "2%",
-        right: "2%",
-        bottom: "2%",
-        top: "10%",
-        containLabel: true,
-      },
-      xAxis: {
-        axisLabel: {
-          color: "#fff",
-          formatter: function (value) {
-            // Assuming dates are in the format 'yyyy-mm-dd'
-            // Extract the month and day from the date string and convert the month to its abbreviated name
-            const dateParts = value.split("-");
-            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
-            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-            return `${monthNames[monthIndex]} '${year}`;
-          },
-        },
-        data: dates,
-        type: "category",
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          axisLabel: {
-            show: false,
-          },
-        },
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-        },
-      ],
-      series: {
-        name: "Fed Fund Rate",
-        data: valueList,
-        type: "line",
-        areaStyle: { opacity: 0.02 },
-        smooth: true,
-        symbol: "none",
-        itemStyle: {
-          color: "#fff",
-        },
-      },
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-      },
-    };
-
-    return options;
-  }
-
-  onMount(async () => {
-    rawData = data?.getEconomicIndicator?.treasury ?? {};
-
-    // Run the async functions concurrently
-    [
-      optionsData,
-      optionsCPI,
-      optionsGDP,
-      optionsInflation,
-      optionsFedFundRate,
-    ] = await Promise.all([
-      plotData(),
-      plotCPI(),
-      plotGDP(),
-      plotInflation(),
-      plotFedFundRate(),
-    ]);
-
-    tableList = filterEndOfYearDates(rawData);
-    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
-
-    isLoaded = true;
-  });
-</script>
-
-<SEO
-  title="US Economic Indicators - Track Key Growth Metrics"
-  description="Monitor key US economic indicators to measure economic performance and identify growth trends. Stay informed with real-time data and analysis."
-/>
-
-<section
-  class="w-full max-w-(--breakpoint-2xl) overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
->
-  <div class="text-sm sm:text-[1rem] breadcrumbs">
-    <ul>
-      <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
-      <li class="text-muted dark:text-gray-300">US Economic Indicator</li>
-    </ul>
-  </div>
-
-  <div class="w-full overflow-hidden m-auto mt-5">
-    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
-      <div
-        class="relative flex justify-center items-start overflow-hidden w-full"
-      >
-        <main class="w-full lg:w-3/4 lg:pr-5">
-          <div class="mb-6 border-b-[2px]">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
-              Economic Indicators
-            </h1>
-          </div>
-
-          {#if isLoaded}
-            <Infobox
-              text="Real-time and historical data on key economic indicators like GDP,
-              unemployment, and inflation, essential for tracking economic performance
-              and growth trends."
-            />
-
-            <div class="w-full m-auto mt-10">
-              <h2 class="text-xl sm:text-2xl text-gray-200 font-bold">
-                Federal Fund Rate
-              </h2>
-
-              <div class="text-[1rem] text-white mt-2 mb-2">
-                The federal funds rate is the interest rate at which banks lend
-                to each other overnight to maintain reserve balances. It's a
-                critical tool for U.S. monetary policy, influencing borrowing
-                costs for consumers and businesses, economic growth, and
-                inflation. Changes in the federal funds rate affect everything
-                from loan interest rates to stock market performance, making it
-                a key indicator of economic health.
-              </div>
-
-              <Lazy>
-                <div class="app w-full">
-                  <Chart {init} options={optionsFedFundRate} class="chart" />
-                </div>
-              </Lazy>
-
-              <h2
-                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
-              >
-                Consumer Price Index (CPI)
-              </h2>
-
-              <div class="text-[1rem] text-white mt-2 mb-2">
-                The CPI measures the average change in prices for a typical
-                basket of goods. It's key for tracking inflation, affecting
-                interest rates, wages, and business decisions. Rising CPI
-                indicates inflation, impacting purchasing power and the overall
-                economy.
-              </div>
-
-              <Lazy>
-                <div class="app w-full">
-                  <Chart {init} options={optionsCPI} class="chart" />
-                </div>
-              </Lazy>
-
-              <h2
-                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
-              >
-                Gross Domestic Product (GDP)
-              </h2>
-
-              <div class="text-[1rem] text-white mt-2 mb-2">
-                The GDP measures a country's economic performance, representing
-                the total value of all goods and services produced within a
-                specific period. It's a key indicator of economic health, used
-                to compare the economic output of different nations and track
-                growth or decline over time.
-              </div>
-
-              <Lazy>
-                <div class="app w-full">
-                  <Chart {init} options={optionsGDP} class="chart" />
-                </div>
-              </Lazy>
-
-              <h2
-                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
-              >
-                Unemployment Rate vs Inflation Rate
-              </h2>
-
-              <div class="text-[1rem] text-white mt-2 mb-2">
-                The unemployment rate measures the jobless percentage in the
-                labor force, impacting spending and growth. Low unemployment
-                boosts wages and activity, while high unemployment slows them.
-                The inflation rate tracks price increases, with moderate
-                inflation (~2%) being healthy. These rates are often inversely
-                related and crucial for economic stability, influencing
-                spending, savings, and investment.
-              </div>
-
-              <Lazy>
-                <div class="app w-full">
-                  <Chart {init} options={optionsInflation} class="chart" />
-                </div>
-              </Lazy>
-
-              <h2
-                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
-              >
-                Treasury Rates
-              </h2>
-
-              <div class="text-[1rem] text-white mt-2 mb-2">
-                Treasury rates are the interest rates that the US government
-                pays on its debt obligations, and they are a key benchmark for
-                interest rates across the economy.
-              </div>
-
-              <div class="w-full text-white">
-                <div class="relative flex justify-end">
-                  <select
-                    class="w-24 select select-bordered select-sm p-0 pl-5 bg-secondary"
-                    on:change={changeStatement}
-                  >
-                    <option disabled>Choose a Time Period</option>
-                    <option value="oneMonth">1M</option>
-                    <option value="sixMonths">6M</option>
-                    <option value="oneYear">1Y</option>
-                    <option value="threeYears" selected>3Y</option>
-                    <option value="fiveYears">5Y</option>
-                    <option value="max">Max</option>
-                  </select>
-                </div>
-              </div>
-              <Lazy>
-                <div class="app w-full">
-                  <Chart {init} options={optionsData} class="chart" />
-                </div>
-              </Lazy>
-
-              <div
-                class="mt-10 mb-4 bg-secondary w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 flex justify-center sm:justify-end items-center ml-auto"
-              >
-                {#each tabs as item, i}
-                  <button
-                    on:click={() => changeTablePeriod(i)}
-                    class="group relative z-1 rounded-full px-6 py-1 {activeIdx ===
-                    i
-                      ? 'z-0'
-                      : ''} "
-                  >
-                    {#if activeIdx === i}
-                      <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
-                    {/if}
-                    <span
-                      class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
-                      i
-                        ? 'text-black'
-                        : 'text-white'}"
-                    >
-                      {item.title}
-                      <svg
-                        class="{!['Pro', 'Plus']?.includes(data?.user?.tier) &&
-                        i === 1
-                          ? ''
-                          : 'hidden'} inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        ><path
-                          fill="#fff"
-                          d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                        /></svg
-                      >
-                    </span>
-                  </button>
-                {/each}
-              </div>
-
-              <div class="w-full overflow-x-auto">
-                <table
-                  class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto mt-4"
-                >
-                  <thead class="bg-default">
-                    <tr class="">
-                      <th
-                        class="text-white font-semibold text-start text-sm sm:text-[1rem]"
-                        >Date</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >1-Month</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >2-Month</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >3-Month</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >6-Month</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >1-Year</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >2-Year</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >3-Year</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >5-Year</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >7-Year</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >10-Year</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >20-Year</th
-                      >
-                      <th
-                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                        >30-Year</th
-                      >
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {#each tableList as item}
-                      <!-- row -->
-                      <tr
-                        class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder border-gray-800"
-                      >
-                        <td
-                          class="text-white text-sm sm:text-[1rem] whitespace-nowrap"
-                        >
-                          {item?.date}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.month1}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.month2 !== null ? item?.month2 : "-"}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.month3}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.month6}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.year1}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.year2}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.year3}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.year5}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.year7}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.year10}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.year20}
-                        </td>
-                        <td
-                          class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
-                        >
-                          {item?.year30}
-                        </td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          {:else}
-            <div class="flex justify-center items-center h-80">
-              <div class="relative">
-                <label
-                  class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-                >
-                  <span class="loading loading-spinner loading-md text-gray-400"
-                  ></span>
-                </label>
-              </div>
-            </div>
-          {/if}
-        </main>
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          <div
-            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
-          >
-            <a
-              href="/economic-calendar"
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold ml-3">
-                  Economic Events
-                </h2>
-                <ArrowLogo
-                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
-                />
-              </div>
-              <span class="p-3 ml-3 mr-3">
-                Stay updated on upcoming Economic Events worldwide.
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
-          >
-            <a
-              href="/earnings-calendar"
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold ml-3">
-                  Earnings Calendar
-                </h2>
-                <ArrowLogo
-                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
-                />
-              </div>
-              <span class="p-3 ml-3 mr-3">
-                Get the latest Earnings of companies.
-              </span>
-            </a>
-          </div>
-        </aside>
-      </div>
-    </div>
-  </div>
-</section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/index/[tickerID]/options/+page.svelte b/src/routes/index/[tickerID]/options/+page.svelte
index 4bdf1049..650cb36b 100644
--- a/src/routes/index/[tickerID]/options/+page.svelte
+++ b/src/routes/index/[tickerID]/options/+page.svelte
@@ -1,19 +1,13 @@
 <script lang="ts">
-  import { displayCompanyName, screenWidth, indexTicker } from "$lib/store";
+  import { displayCompanyName, indexTicker } from "$lib/store";
   import DailyStats from "$lib/components/Options/DailyStats.svelte";
-  import { Chart } from "svelte-echarts";
-  import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
+  import { abbreviateNumber } from "$lib/utils";
   import { onMount } from "svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
-  import { init, use } from "echarts/core";
-  import { BarChart, LineChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
+
   import Infobox from "$lib/components/Infobox.svelte";
   import SEO from "$lib/components/SEO.svelte";
 
-  use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
-
   export let data;
   let dailyStats = data?.getDailyStats;
 
@@ -56,145 +50,6 @@
     displayData = event.target.value;
   }
 
-  function plotData(callData, putData, priceList) {
-    const options = {
-      animation: false,
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-        borderColor: "#969696", // Black border color
-        borderWidth: 1, // Border width of 1px
-        backgroundColor: "#313131", // Optional: Set background color for contrast
-        textStyle: {
-          color: "#fff", // Optional: Text color for better visibility
-        },
-        formatter: function (params) {
-          // Get the timestamp from the first parameter
-          const timestamp = params[0].axisValue;
-
-          // Initialize result with timestamp
-          let result = timestamp + "<br/>";
-
-          // Sort params to ensure Vol appears last
-          params.sort((a, b) => {
-            if (a.seriesName === "Vol") return 1;
-            if (b.seriesName === "Vol") return -1;
-            return 0;
-          });
-
-          // Add each series data
-          params?.forEach((param) => {
-            const marker =
-              '<span style="display:inline-block;margin-right:4px;' +
-              "border-radius:10px;width:10px;height:10px;background-color:" +
-              param.color +
-              '"></span>';
-            result +=
-              marker +
-              param.seriesName +
-              ": " +
-              abbreviateNumberWithColor(param.value, false, true) +
-              "<br/>";
-          });
-
-          return result;
-        },
-        axisPointer: {
-          lineStyle: {
-            color: "#fff",
-          },
-        },
-      },
-      silent: true,
-      grid: {
-        left: $screenWidth < 640 ? "5%" : "2%",
-        right: $screenWidth < 640 ? "5%" : "2%",
-        bottom: "10%",
-        containLabel: true,
-      },
-      xAxis: [
-        {
-          type: "category",
-          data: dateList,
-          axisLabel: {
-            color: "#fff",
-
-            formatter: function (value) {
-              // Assuming dates are in the format 'yyyy-mm-dd'
-              const dateParts = value.split("-");
-              const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-              const year = parseInt(dateParts[0]);
-              const day = parseInt(dateParts[2]);
-              return `${day} ${monthNames[monthIndex]} ${year}`;
-            },
-          },
-        },
-      ],
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
-        },
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-          position: "right",
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
-        },
-      ],
-      series: [
-        {
-          name: "Call",
-          type: "bar",
-          stack: "Put-Call Ratio",
-          emphasis: {
-            focus: "series",
-          },
-          data: callData,
-          itemStyle: {
-            color: "#00FC50",
-          },
-        },
-        {
-          name: "Put",
-          type: "bar",
-          stack: "Put-Call Ratio",
-          emphasis: {
-            focus: "series",
-          },
-          data: putData,
-          itemStyle: {
-            color: "#EE5365", //'#7A1C16'
-          },
-        },
-        {
-          name: "Price", // Name for the line chart
-          type: "line", // Type of the chart (line)
-          yAxisIndex: 1, // Use the second y-axis on the right
-          data: priceList, // iv60Data (assumed to be passed as priceList)
-          itemStyle: {
-            color: "#fff", // Choose a color for the line (gold in this case)
-          },
-          lineStyle: {
-            width: 2, // Set the width of the line
-          },
-          smooth: true, // Optional: make the line smooth
-          showSymbol: false,
-        },
-      ],
-    };
-    return options;
-  }
-
   function filterDate(filteredList, displayTimePeriod) {
     const now = Date.now();
     let cutoffDate;
@@ -244,11 +99,13 @@
     putOpenInterestList = filteredList?.map((item) => item?.put_open_interest);
 
     // Determine the type of plot data to generate based on displayData
+    /*
     if (displayData === "volume") {
       options = plotData(callVolumeList, putVolumeList, priceList);
     } else if (displayData === "openInterest") {
       options = plotData(callOpenInterestList, putOpenInterestList, priceList);
     }
+      */
   }
 
   async function handleScroll() {
@@ -290,7 +147,7 @@
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
-      <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
+      <div class="sm:pl-5 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
         {#if Object?.keys(dailyStats)?.length === 0 && rawData?.length === 0}
           <Infobox text="No Options data available" />
         {/if}
@@ -302,56 +159,6 @@
         {/if}
 
         {#if rawData?.length > 0}
-          <div class="flex flex-row items-center w-full mt-10">
-            <!--
-            <select
-              class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
-              on:change={changeTimePeriod}
-            >
-              <option disabled>Choose a time period</option>
-              <option value="oneWeek">1 Week</option>
-              <option value="oneMonth">1 Month</option>
-              <option value="threeMonths">3 Months</option>
-              <option value="sixMonths">6 Months</option>
-              <option value="oneYear" selected>1 Year</option>
-            </select>
-            -->
-
-            <select
-              class=" w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
-              on:change={changeVolumeOI}
-            >
-              <option disabled>Choose a category</option>
-              <option value="volume" selected>Volume</option>
-              <option value="openInterest">Open Interest</option>
-            </select>
-          </div>
-
-          <div class="app w-full bg-default">
-            {#if filteredList?.length !== 0}
-              <Chart {init} {options} class="chart" />
-            {:else}
-              <span
-                class="text-xl text-white m-auto flex justify-center items-center h-full"
-              >
-                <div
-                  class="text-white text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
-                >
-                  <svg
-                    class="w-5 h-5 inline-block sm:mr-2 shrink-0"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 256 256"
-                    ><path
-                      fill="#fff"
-                      d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-                    /></svg
-                  >
-                  No Options activity found
-                </div>
-              </span>
-            {/if}
-          </div>
-
           {#if optionList?.length !== 0}
             <h3 class="text-xl sm:text-2xl text-white font-bold text-start">
               Historical {$indexTicker} Data
@@ -359,92 +166,66 @@
 
             <div class="flex justify-start items-center m-auto overflow-x-auto">
               <table
-                class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-3"
               >
-                <thead class="bg-default">
+                <thead class="text-muted dark:text-white dark:bg-default">
                   <tr class="">
-                    <td class="text-white font-semibold text-sm text-start"
-                      >Date</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >% Change</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >P/C</td
-                    >
-                    <td class="text-white font-semibold text-sm text-center"
-                      >Volume</td
-                    >
-                    <td class="text-white font-semibold text-sm text-center"
-                      >C Volume</td
-                    >
-                    <td class="text-white font-semibold text-sm text-center"
-                      >P Volume</td
-                    >
+                    <td class=" font-semibold text-sm text-start">Date</td>
+                    <td class=" font-semibold text-sm text-end">% Change</td>
+                    <td class=" font-semibold text-sm text-end">P/C</td>
+                    <td class=" font-semibold text-sm text-center">Volume</td>
+                    <td class=" font-semibold text-sm text-center">C Volume</td>
+                    <td class=" font-semibold text-sm text-center">P Volume</td>
                     <!--
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >Vol/30D</td
                     >
                       -->
                     <!--
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >🐻/🐂 Prem</td
                     >
                   -->
-                    <td class="text-white font-semibold text-sm text-end"
-                      >Total OI</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >OI Change</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >% OI Change</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >C Prem</td
-                    >
-                    <td class="text-white font-semibold text-sm text-end"
-                      >P Prem</td
-                    >
+                    <td class=" font-semibold text-sm text-end">Total OI</td>
+                    <td class=" font-semibold text-sm text-end">OI Change</td>
+                    <td class=" font-semibold text-sm text-end">% OI Change</td>
+                    <td class=" font-semibold text-sm text-end">C Prem</td>
+                    <td class=" font-semibold text-sm text-end">P Prem</td>
                     <!--
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >Net Prem</td
                     >
-                    <td class="text-white font-semibold text-sm text-end"
+                    <td class=" font-semibold text-sm text-end"
                       >Total Prem</td
                     >
                       -->
                   </tr>
                 </thead>
                 <tbody>
-                  {#each ["Pro"]?.includes(data?.user?.tier) ? optionList : optionList?.slice(0, 3) as item, index}
+                  {#each data?.user?.tier === "Pro" ? optionList : optionList?.slice(0, 3) as item, index}
                     <tr
-                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800 {index +
+                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                         1 ===
                         optionList?.slice(0, 3)?.length &&
                       !['Pro']?.includes(data?.user?.tier)
                         ? 'opacity-[0.1]'
                         : ''}"
                     >
-                      <td class="text-white text-sm sm:text-[1rem] text-start">
+                      <td class=" text-sm sm:text-[1rem] text-start">
                         {formatDate(item?.date)}
                       </td>
 
-                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                      <td class=" text-sm sm:text-[1rem] text-end">
                         {#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
                           <span class="text-green-700 dark:text-[#00FC50]"
                             >+{item?.changesPercentage >= 1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentage,
-                                )
+                              ? abbreviateNumber(item?.changesPercentage)
                               : item?.changesPercentage?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
                           <span class="text-red-700 dark:text-[#FF2F1F]"
                             >{item?.changesPercentage <= -1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentage,
-                                )
+                              ? abbreviateNumber(item?.changesPercentage)
                               : item?.changesPercentage?.toFixed(2)}%
                           </span>
                         {:else}
@@ -452,11 +233,11 @@
                         {/if}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
+                      <td class="text-sm sm:text-[1rem] text-end">
                         {item?.putCallRatio}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
+                      <td class="text-sm sm:text-[1rem] text-end">
                         {item?.volume?.toLocaleString("en-US")}
                       </td>
 
@@ -472,7 +253,7 @@
                         {item?.put_volume?.toLocaleString("en-US")}
                       </td>
                       <!--
-                      <td class="text-sm sm:text-[1rem] text-white text-end">
+                      <td class="text-sm sm:text-[1rem]  text-end">
                         {item?.avgVolumeRatio?.toFixed(2)}
                       </td>
                       -->
@@ -520,24 +301,24 @@
                           >
                             <div class="flex justify-between space-x-4">
                               <div
-                                class="space-y-1 flex flex-col items-start text-white"
+                                class="space-y-1 flex flex-col items-start "
                               >
                                 <div>
-                                  Bearish: {@html abbreviateNumberWithColor(
+                                  Bearish: {@html abbreviateNumber(
                                     item?.premium_ratio[0],
                                     false,
                                     true,
                                   )}
                                 </div>
                                 <div>
-                                  Neutral: {@html abbreviateNumberWithColor(
+                                  Neutral: {@html abbreviateNumber(
                                     item?.premium_ratio[1],
                                     false,
                                     true,
                                   )}
                                 </div>
                                 <div>
-                                  Bullish: {@html abbreviateNumberWithColor(
+                                  Bullish: {@html abbreviateNumber(
                                     item?.premium_ratio[2],
                                     false,
                                     true,
@@ -550,15 +331,15 @@
                       </td>
                       -->
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end">
+                        {@html abbreviateNumber(
                           item?.total_open_interest,
                           false,
                           true,
                         )}
                       </td>
 
-                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                      <td class=" text-sm sm:text-[1rem] text-end">
                         {#if item?.changeOI >= 0}
                           <span class="text-green-700 dark:text-[#00FC50]"
                             >+{item?.changeOI?.toLocaleString("en-US")}</span
@@ -568,58 +349,50 @@
                             >{item?.changeOI?.toLocaleString("en-US")}
                           </span>
                         {:else}
-                          <span class="text-white"> n/a </span>
+                          <span class=""> n/a </span>
                         {/if}
                       </td>
 
-                      <td class="text-white text-sm sm:text-[1rem] text-end">
+                      <td class=" text-sm sm:text-[1rem] text-end">
                         {#if item?.changesPercentageOI >= 0}
                           <span class="text-green-700 dark:text-[#00FC50]"
                             >+{item?.changesPercentageOI >= 1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentageOI,
-                                )
+                              ? abbreviateNumber(item?.changesPercentageOI)
                               : item?.changesPercentageOI?.toFixed(2)}%</span
                           >
                         {:else if item?.changesPercentageOI < 0}
                           <span class="text-red-700 dark:text-[#FF2F1F]"
                             >{item?.changesPercentageOI <= -1000
-                              ? abbreviateNumberWithColor(
-                                  item?.changesPercentageOI,
-                                )
+                              ? abbreviateNumber(item?.changesPercentageOI)
                               : item?.changesPercentageOI?.toFixed(2)}%
                           </span>
                         {:else}
-                          <span class="text-white"> n/a </span>
+                          <span class=""> n/a </span>
                         {/if}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end">
+                        {@html abbreviateNumber(
                           item?.call_premium,
                           false,
                           true,
                         )}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
-                          item?.put_premium,
-                          false,
-                          true,
-                        )}
+                      <td class="text-sm sm:text-[1rem] text-end">
+                        {@html abbreviateNumber(item?.put_premium, false, true)}
                       </td>
                       <!--
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end ">
+                        {@html abbreviateNumber(
                           item?.net_premium,
                           false,
                           true,
                         )}
                       </td>
 
-                      <td class="text-sm sm:text-[1rem] text-end text-white">
-                        {@html abbreviateNumberWithColor(
+                      <td class="text-sm sm:text-[1rem] text-end ">
+                        {@html abbreviateNumber(
                           item?.total_premium,
                           false,
                           true,
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 18a75006..afb6d845 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -1166,7 +1166,7 @@
         <div class="flex flex-row items-center justify-between">
           <h3 class="text-2xl md:text-3xl font-bold">Lifetime</h3>
           <div>
-            <span class="text-3xl md:text-4xl font-bold">$599</span>
+            <span class="text-3xl md:text-4xl font-bold">$799</span>
           </div>
         </div>
         <p class=" md:text-lg mt-4 lg:mt-2">
@@ -1196,24 +1196,30 @@
                   </div>
                 </div>
               </div>
-              <div class="relative flex flex-col items-center">
-                <div
-                  class="h-4 w-4 rounded-full bg-blue-500 relative z-10"
-                ></div>
-                <div class="mt-2 text-center">
-                  <div class="text-lg sm:text-xl font-semibold">
-                    <span class="text-zinc-900 dark:text-white">$599</span>
-                  </div>
-                  <div class="text-xs sm:text-sm">First 100 users</div>
-                </div>
-              </div>
               <div class="relative flex flex-col items-center">
                 <div
                   class="h-4 w-4 rounded-full bg-zinc-500 dark:bg-gray-600 relative z-10"
                 ></div>
                 <div class="mt-2 text-center">
                   <div class="text-lg sm:text-xl font-semibold">
-                    <span class="text-zinc-500 dark:text-zinc-400">$799</span>
+                    <span class="text-gray-800 dark:text-gray-300 line-through"
+                      >$599</span
+                    >
+                  </div>
+                  <div
+                    class="text-xs sm:text-sm text-gray-800 dark:text-gray-300"
+                  >
+                    First 100 users
+                  </div>
+                </div>
+              </div>
+              <div class="relative flex flex-col items-center">
+                <div
+                  class="h-4 w-4 rounded-full bg-blue-500 relative z-10"
+                ></div>
+                <div class="mt-2 text-center">
+                  <div class="text-lg sm:text-xl font-semibold">
+                    <span class="">$799</span>
                   </div>
                   <div
                     class="text-xs sm:text-sm text-gray-800 dark:text-gray-300"
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index fd51d162..1db0ddd8 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -788,11 +788,16 @@
                     class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
                     ><td
                       class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
-                      >Revenue (ttm)</td
+                      ><a
+                        href={`/stocks/${$stockTicker}/statistics/revenue`}
+                        class="sm:hover:text-muted dark:sm:hover:text-blue-400 underline underline-offset-4"
+                        >Revenue (ttm)</a
+                      ></td
                     >
                     <td
                       class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
-                      >{@html stockDeck?.revenueTTM !== null &&
+                    >
+                      {@html stockDeck?.revenueTTM !== null &&
                       stockDeck?.revenueTTM !== 0
                         ? abbreviateNumber(stockDeck?.revenueTTM, false, true)
                         : "n/a"}</td
diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
index 821c30b2..529ebdf1 100644
--- a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
@@ -237,7 +237,7 @@
                     <span>Revenue (ttm)</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold">
+                    <span class="text-xl font-semibold">
                       {abbreviateNumber(rawData?.revenue, true)}</span
                     >
                   </div>
@@ -250,7 +250,7 @@
                     <span>Revenue Growth</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold"
+                    <span class="text-xl font-semibold"
                       >{rawData?.growthRevenue}%</span
                     >
                   </div>
@@ -263,7 +263,7 @@
                     <span>Price / Sales Ratio</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold"
+                    <span class="text-xl font-semibold"
                       >{rawData?.priceToSalesRatio}</span
                     >
                   </div>
@@ -276,7 +276,7 @@
                     <span>Revenue / Employee </span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold"
+                    <span class="text-xl font-semibold"
                       >{abbreviateNumber(
                         rawData?.revenuePerEmployee,
                         true,
@@ -292,7 +292,7 @@
                     <span>Employees </span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold"
+                    <span class="text-xl font-semibold"
                       >{rawData?.employees?.toLocaleString("en-US")}</span
                     >
                   </div>
@@ -304,7 +304,7 @@
                     <span>Market Cap </span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold"
+                    <span class="text-xl font-semibold"
                       >{abbreviateNumber(data?.getStockQuote?.marketCap)}</span
                     >
                   </div>
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index d1eeab76..8a8918d5 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -1377,9 +1377,9 @@
                             on:input={handleInput}
                             autocomplete="off"
                             autofocus=""
-                            class="text-sm w-full bg-white dark:bg-default border-0 focus:border-gray-200 focus:ring-0 placeholder:text-gray-300 pr-8"
+                            class="text-sm w-full bg-white dark:bg-default border-0 focus:border-gray-200 focus:ring-0 focus:outline-none placeholder:text-gray-400 dark:placeholder:text-gray-600 pr-8"
                             type="text"
-                            placeholder=""
+                            placeholder="Search indicators..."
                           />
 
                           <!-- Clear Button - Shown only when searchQuery has input -->
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index e6cea4e2..ca188e34 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,7 +5,6 @@ module.exports = {
   safelist: ["dark"],
   content: [
     "./src/**/*.{html,js,svelte,ts}",
-    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
   ],
   theme: {
     container: {
@@ -194,5 +193,4 @@ module.exports = {
       },
     },
   },
-  plugins: [require("flowbite/plugin")],
 };