diff --git a/.vscode/fastify.code-snippets b/.vscode/fastify.code-snippets
index 744f845e0..040eabd42 100644
--- a/.vscode/fastify.code-snippets
+++ b/.vscode/fastify.code-snippets
@@ -22,13 +22,14 @@
 			"import { FastifyInstance } from \"fastify\";",
 			"import fp from \"fastify-plugin\";",
 			"import { Schema } from \"mongoose\";",
+			"import model from \"../../util/model\";",
 			"",
 			"const ${2:$TM_FILENAME_BASE} = fp((app: FastifyInstance, _: {}, done: () => void) => {",
 			"\tconst schema = new Schema({",
 			"\t\t${0}",
 			"\t});",
 			"\t",
-			"\tapp.decorate(\"${2:$TM_FILENAME_BASE}\", app.mongoose.model(\"${1}\", schema));",
+			"\tapp.decorate(\"${2:$TM_FILENAME_BASE}\", model(app, \"${1}\", schema));",
 			"\t",
 			"\tdone();",
 			"});",
diff --git a/core/src/plugins/db/stats.ts b/core/src/plugins/db/stats.ts
index fd8274961..5a7707a48 100644
--- a/core/src/plugins/db/stats.ts
+++ b/core/src/plugins/db/stats.ts
@@ -2,6 +2,7 @@ import { DiskStats, MemStats, StoredStats } from "@monitor/types";
 import { FastifyInstance } from "fastify";
 import fp from "fastify-plugin";
 import { Schema } from "mongoose";
+import model from "../../util/model";
 
 const stats = fp((app: FastifyInstance, _: {}, done: () => void) => {
 	const MemSchema = new Schema<MemStats>({
@@ -22,7 +23,7 @@ const stats = fp((app: FastifyInstance, _: {}, done: () => void) => {
 		disk: DiskSchema
 	});
 	
-	app.decorate("stats", app.mongoose.model("Stats", schema));
+	app.decorate("stats", model(app, "Stats", schema));
 	
 	done();
 });
diff --git a/frontend/package.json b/frontend/package.json
index efb0073c8..633025844 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,9 +17,11 @@
   },
   "dependencies": {
     "@monitor/util": "1.0.0",
+    "apexcharts": "^3.35.4",
     "axios": "^0.26.1",
     "js-file-download": "^0.4.12",
     "reconnecting-websocket": "^4.4.0",
+    "solid-apexcharts": "^0.1.6",
     "solid-js": "^1.3.10"
   }
 }
diff --git a/frontend/src/components/home/Tree/Server.tsx b/frontend/src/components/home/Tree/Server.tsx
index 41fa39e1d..9c7e4dc9f 100644
--- a/frontend/src/components/home/Tree/Server.tsx
+++ b/frontend/src/components/home/Tree/Server.tsx
@@ -1,4 +1,11 @@
-import { Component, createEffect, createMemo, createSignal, For, Show } from "solid-js";
+import {
+  Component,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  Show,
+} from "solid-js";
 import { useAppState } from "../../../state/StateProvider";
 import { useTheme } from "../../../state/ThemeProvider";
 import { useUser } from "../../../state/UserProvider";
@@ -52,7 +59,8 @@ const Server: Component<{ id: string }> = (p) => {
             <Show when={server()?.status === "OK"}>
               <Show when={stats()} fallback={<Loading type="three-dot" />}>
                 <div>
-                  <div style={{ opacity: 0.7 }}>cpu:</div> {stats()?.cpu.toFixed(1)}%
+                  <div style={{ opacity: 0.7 }}>cpu:</div>{" "}
+                  {stats()?.cpu.toFixed(1)}%
                 </div>
                 <div>
                   <div style={{ opacity: 0.7 }}>mem:</div>{" "}
@@ -62,18 +70,28 @@ const Server: Component<{ id: string }> = (p) => {
                   <div style={{ opacity: 0.7 }}>disk:</div>{" "}
                   {stats()?.disk.usedPercentage.toFixed(1)}%
                 </div>
-                <Show when={!reloading()} fallback={<button class="blue"><Loading type="spinner" scale={0.2}/></button>}>
-                  <button
-                    class="blue"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      reloadStats();
-                    }}
+                <Flex gap=".5rem" alignItems="center">
+                  <Show
+                    when={!reloading()}
+                    fallback={
+                      <Button class="blue" style={{ height: "fit-content" }}>
+                        <Loading type="spinner" scale={0.2} />
+                      </Button>
+                    }
                   >
-                    <Icon type="refresh" width="0.75rem" />
-                  </button>
-                </Show>
-                <StatGraphs id={p.id} />
+                    <Button
+                      class="blue"
+                      style={{ height: "fit-content" }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        reloadStats();
+                      }}
+                    >
+                      <Icon type="refresh" width="0.85rem" />
+                    </Button>
+                  </Show>
+                  <StatGraphs id={p.id} />
+                </Flex>
               </Show>
             </Show>
             <div
diff --git a/frontend/src/components/server/StatGraphs.tsx b/frontend/src/components/server/StatGraphs.tsx
index ff1e9a8ec..220f34380 100644
--- a/frontend/src/components/server/StatGraphs.tsx
+++ b/frontend/src/components/server/StatGraphs.tsx
@@ -1,5 +1,6 @@
 import { StoredStats } from "@monitor/types";
-import { Component, createSignal } from "solid-js";
+import { Accessor, Component, createSignal, Show } from "solid-js";
+import { SolidApexCharts } from "solid-apexcharts";
 import { useAppState } from "../../state/StateProvider";
 import { useToggle } from "../../util/hooks";
 import { getServerStatsHistory } from "../../util/query";
@@ -7,6 +8,7 @@ import Button from "../util/Button";
 import Icon from "../util/Icon";
 import Grid from "../util/layout/Grid";
 import CenterMenu from "../util/menu/CenterMenu";
+import { readableTimestamp } from "../../util/helpers";
 
 const StatGraphs: Component<{ id: string }> = (p) => {
   const [show, toggleShow] = useToggle();
@@ -14,11 +16,8 @@ const StatGraphs: Component<{ id: string }> = (p) => {
     <CenterMenu
       show={show}
       toggleShow={toggleShow}
-      target={
-        <Button class="blue" onClick={toggleShow}>
-          <Icon type="timeline-line-chart" />
-        </Button>
-      }
+      target={<Icon type="timeline-line-chart" width="0.85rem" />}
+      targetClass="blue"
       content={<Graphs id={p.id} />}
     />
   );
@@ -35,12 +34,42 @@ const Graphs: Component<{ id: string }> = (p) => {
     setStats(stats);
     setReloading(false);
   };
-	getServerStatsHistory(p.id).then(setStats);
+  getServerStatsHistory(p.id).then(setStats);
   return (
     <Grid placeItems="center start">
       <h1>{server().name}</h1>
+      <Show when={stats()}>
+        <Graph stats={stats} field="cpu" />
+      </Show>
     </Grid>
   );
 };
 
+const Graph: Component<{
+  stats: Accessor<StoredStats[] | undefined>;
+  field: string;
+}> = (p) => {
+  const options = () => ({
+    chart: {
+      id: "mychart",
+    },
+    xaxis: p.stats()!.map((stat) => readableTimestamp(stat.ts / 1000))
+  });
+  const series = () => [
+    {
+      name: "CPU Usage",
+      data: p.stats()!.map((stat) => stat.cpu),
+    },
+  ];
+    
+  return (
+    <SolidApexCharts
+      width="500"
+      type="line"
+      options={options()}
+      series={series() || []}
+    />
+  );
+};
+
 export default StatGraphs;
diff --git a/frontend/src/components/util/menu/CenterMenu.tsx b/frontend/src/components/util/menu/CenterMenu.tsx
index 6a3b0c182..a4cdae2b3 100644
--- a/frontend/src/components/util/menu/CenterMenu.tsx
+++ b/frontend/src/components/util/menu/CenterMenu.tsx
@@ -42,7 +42,10 @@ const CenterMenu: Component<{
   return (
     <>
       <Button
-        onClick={p.toggleShow}
+        onClick={(e) => {
+          e.stopPropagation();
+          p.toggleShow();
+        }}
         class={p.targetClass}
         style={p.targetStyle}
       >
@@ -70,7 +73,10 @@ const Child: Component<{
   return (
     <Grid
       class={combineClasses(s.CenterMenuContainer, p.show() ? s.Enter : s.Exit)}
-      onClick={p.toggleShow}
+      onClick={(e) => {
+        e.stopPropagation();
+        p.toggleShow();
+      }}
       placeItems={p.position === "center" ? "center" : "start center"}
     >
       <Grid
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 5afa4591b..0a5e232e4 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -20,7 +20,7 @@ import { ThemeProvider } from "./state/ThemeProvider";
 export const URL =
   import.meta.env.MODE === "production"
     ? location.origin
-    : "https://monitor.assc.ai";
+    : "http://52.193.1.140:9000";
     
 export const WS_URL = URL.replace("https", "wss").replace("http", "ws") + "/ws";
 
diff --git a/yarn.lock b/yarn.lock
index a7825ea4a..5305e97e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -695,6 +695,18 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+apexcharts@^3.33.1, apexcharts@^3.35.4:
+  version "3.35.4"
+  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.35.4.tgz#347140240fad6e646a76c7bc8e7e75294c2206b2"
+  integrity sha512-dsXjETHF2OmKtxNv66wBeFGU2qtZQnr6kp/vcNY05GWs4vcBepg54qNgOJ2Gp/gXskiGw/frrmIKGi8lJ/UDnQ==
+  dependencies:
+    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"
+
 "aproba@^1.0.3 || ^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
@@ -1105,6 +1117,11 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
+defu@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/defu/-/defu-6.0.0.tgz#b397a6709a2f3202747a3d9daf9446e41ad0c5fc"
+  integrity sha512-t2MZGLf1V2rV4VBZbWIaXKdX/mUcYW0n2znQZoADBkGGxYL8EWqCuCZBmJPJ/Yy9fofJkyuuSuo5GSwo0XdEgw==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -2767,6 +2784,20 @@ socks@^2.6.1:
     ip "^1.1.5"
     smart-buffer "^4.2.0"
 
+solid-apexcharts@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/solid-apexcharts/-/solid-apexcharts-0.1.6.tgz#0df85186d0c2e49343bddda27db9b1a3915398bb"
+  integrity sha512-U9pFwLzDk3a/DPphXVlEGXbeU9HUcKVAH0CaSTXRJfRVFXQeVSJn4RDyScaMMJiqr8OZ+IsytudEcZQAvpHvMw==
+  dependencies:
+    apexcharts "^3.33.1"
+    defu "^6.0.0"
+    solid-js "^1.1.7"
+
+solid-js@^1.1.7:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/solid-js/-/solid-js-1.4.8.tgz#a1e7f56c17d64c1729c6fd36fe513ca283e78dbd"
+  integrity sha512-XErZdnnYYXF7OwGSUAPcua2y5/ELB/c53zFCpWiEGqxTNoH1iQghzI8EsHJXk06sNn+Z/TGhb8bPDNNGSgimag==
+
 solid-js@^1.3.10, solid-js@^1.3.3:
   version "1.3.12"
   resolved "https://registry.yarnpkg.com/solid-js/-/solid-js-1.3.12.tgz#6a02d49e92d3544aa4be6173a5cd974206b808f0"
@@ -2938,6 +2969,61 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg.draggable.js@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
+  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
+  dependencies:
+    svg.js "^2.0.1"
+
+svg.easing.js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
+  integrity sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==
+  dependencies:
+    svg.js ">=2.3.x"
+
+svg.filter.js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
+  integrity sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
+  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
+
+svg.pathmorphing.js@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
+  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
+  dependencies:
+    svg.js "^2.4.0"
+
+svg.resize.js@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
+  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
+  dependencies:
+    svg.js "^2.6.5"
+    svg.select.js "^2.1.2"
+
+svg.select.js@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
+  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.select.js@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
+  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
+  dependencies:
+    svg.js "^2.6.5"
+
 tar-fs@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.1.tgz#e44086c1c60d31a4f0cf893b1c4e155dabfae9e2"