diff --git a/frontend/package.json b/frontend/package.json
index e208d99c8..ee687d423 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-switch": "^1.0.3",
diff --git a/frontend/src/resources/server/stats.tsx b/frontend/src/resources/server/stats.tsx
index 23b0b986d..9c26f6822 100644
--- a/frontend/src/resources/server/stats.tsx
+++ b/frontend/src/resources/server/stats.tsx
@@ -7,6 +7,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@ui/card";
+import { Progress } from "@ui/progress";
 import { Cpu, Database, LineChart, MemoryStick } from "lucide-react";
 import { useParams } from "react-router-dom";
 
@@ -24,7 +25,6 @@ export const ServerStats = () => {
         <CPU server_id={server_id} />
         <RAM server_id={server_id} />
         <DISK server_id={server_id} />
-        <LOAD server_id={server_id} />
       </div>
     </Section>
   );
@@ -44,12 +44,7 @@ const CPU = ({ server_id }: { server_id: string }) => {
         </div>
       </CardHeader>
       <CardContent>
-        <div className="relative w-full rounded-lg bg-muted-foreground h-4">
-          <div
-            className="bg-blue-500 rounded-lg h-4 absolute left-0 top-0"
-            style={{ width: `${perc}%` }}
-          />
-        </div>
+        <Progress value={perc} className="h-4" />
       </CardContent>
     </Card>
   );
@@ -72,12 +67,7 @@ const RAM = ({ server_id }: { server_id: string }) => {
         </div>
       </CardHeader>
       <CardContent>
-        {!isNaN(perc) && (
-          <div
-            className="bg-blue-500 rounded-lg h-4"
-            style={{ width: `${perc}%` }}
-          />
-        )}
+        <Progress value={perc} className="h-4" />
       </CardContent>
     </Card>
   );
@@ -100,31 +90,7 @@ const DISK = ({ server_id }: { server_id: string }) => {
         </div>
       </CardHeader>
       <CardContent>
-        {!isNaN(perc) && (
-          <div
-            className="bg-blue-500 rounded-lg h-4"
-            style={{ width: `${perc}%` }}
-          />
-        )}
-      </CardContent>
-    </Card>
-  );
-};
-
-const LOAD = ({ server_id }: { server_id: string }) => {
-  const stats = useServerStats(server_id);
-  const perc = stats?.basic.system_load;
-
-  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>System Load</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div
-          className="bg-blue-500 rounded-lg h-4"
-          style={{ width: `${perc}%` }}
-        />
+        <Progress value={perc} className="h-4" />
       </CardContent>
     </Card>
   );
diff --git a/frontend/src/ui/progress.tsx b/frontend/src/ui/progress.tsx
new file mode 100644
index 000000000..7beb166b8
--- /dev/null
+++ b/frontend/src/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@util/helpers";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7e4409cf8..340ffb5b2 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -848,6 +848,15 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-progress@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.0.3.tgz#8380272fdc64f15cbf263a294dea70a7d5d9b4fa"
+  integrity sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-roving-focus@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz#0b4f4f9bd509f4510079e9e0734a734fd17cdce3"