diff --git a/src/app/api/auth/auth.ts b/src/app/api/auth/auth.ts
new file mode 100644
index 0000000..dd66f58
--- /dev/null
+++ b/src/app/api/auth/auth.ts
@@ -0,0 +1,14 @@
+import Data from "../data";
+
+export const users = new Data<{
+  [key: string]: { username: string; password: string };
+}>("sentryx/users.json", { admin: { username: "admin", password: "admin" } });
+
+export const sessions = new Data<{ [key: string]: string }>(
+  "sentryx/sessions.json",
+  {}
+);
+
+export default function validate(sessionId: string | null) {
+  return sessionId && sessions.data[sessionId] != undefined;
+}
diff --git a/src/app/api/auth/route.ts b/src/app/api/auth/route.ts
index 4b7a756..0fd5a73 100644
--- a/src/app/api/auth/route.ts
+++ b/src/app/api/auth/route.ts
@@ -1,15 +1,7 @@
 import axios, { HttpStatusCode } from "axios";
 import { NextResponse } from "next/server";
 import Data, { findKey } from "../data";
-
-const users = new Data<{
-  [key: string]: { username: string; password: string };
-}>("sentryx/users.json", { admin: { username: "admin", password: "admin" } });
-
-const sessions = new Data<{ [key: string]: string }>(
-  "sentryx/sessions.json",
-  {}
-);
+import { sessions, users } from "./auth";
 
 export async function POST(request: Request) {
   const body = await request.json();
@@ -54,7 +46,3 @@ export async function GET(request: Request) {
 
   return NextResponse.json({ message: "ok" });
 }
-
-export function validate(sessionId: string | null) {
-  return sessionId && sessions.data[sessionId] != undefined;
-}
diff --git a/src/app/api/server/route.ts b/src/app/api/server/route.ts
index fde2454..8197678 100644
--- a/src/app/api/server/route.ts
+++ b/src/app/api/server/route.ts
@@ -1,7 +1,7 @@
 import { HttpStatusCode } from "axios";
 import { NextResponse } from "next/server";
-import { servers } from "../servers/route";
-import { validate } from "../auth/route";
+import { servers } from "../servers/servers";
+import validate from "../auth/auth";
 
 /*
   Vision: This will be 
diff --git a/src/app/api/servers/route.ts b/src/app/api/servers/route.ts
index 49b673d..68ebc28 100644
--- a/src/app/api/servers/route.ts
+++ b/src/app/api/servers/route.ts
@@ -2,56 +2,8 @@ import { NextResponse } from "next/server";
 import Data from "../data";
 import Server, { ServerAPI } from "@/types/server";
 import { HttpStatusCode } from "axios";
-import { validate } from "../auth/route";
-
-const useServer = (server: ServerAPI, index: number) => {
-  const ws = new WebSocket(`ws://${server.ip}:5273`);
-  ws.onmessage = (msg) => {
-    try {
-      if (deletes.has(index) || !currentServers[index]) {
-        ws.close();
-        return;
-      }
-      if (msg.data === "Success") {return}
-      const data = JSON.parse(msg.data);
-      
-      if (data.status) {
-        currentServers[index].status = data.status;
-      }
-      if (data.cpu) {
-        currentServers[index].cpu = data.cpu;
-      }
-      if (data.memory) {
-        currentServers[index].memory = data.memory;
-      }
-      if (data.disk) {
-        currentServers[index].storage = data.disk;
-      }
-      if (data.network) {
-        currentServers[index].network = data.network;
-      }
-    } catch (e) {
-      console.error("Error parsing WebSocket message:", e);
-    }
-  };
-  ws.onopen = () => ws.send("my-key");
-};
-
-const deletes = new Set<number>();
-export const servers = new Data<ServerAPI[]>("sentryx/servers.json", []);
-export var currentServers: Server[] = servers.data.map(
-    (s) =>
-      ({
-        ...s,
-        status: "offline",
-        cpu: 0,
-        memory: 0,
-        storage: 0,
-        network: 0,
-      } as Server)
-  );
-
-servers.data.map(useServer);
+import validate from "../auth/auth";
+import { currentServers, deletes, servers, useServer } from "./servers";
 
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url);
diff --git a/src/app/api/servers/servers.ts b/src/app/api/servers/servers.ts
new file mode 100644
index 0000000..bfb3b7d
--- /dev/null
+++ b/src/app/api/servers/servers.ts
@@ -0,0 +1,51 @@
+import Server, { ServerAPI } from "@/types/server";
+import Data from "../data";
+
+export const useServer = (server: ServerAPI, index: number) => {
+  const ws = new WebSocket(`ws://${server.ip}:5273`);
+  ws.onmessage = (msg) => {
+    try {
+      if (deletes.has(index) || !currentServers[index]) {
+        ws.close();
+        return;
+      }
+      if (msg.data === "Success") {return}
+      const data = JSON.parse(msg.data);
+      
+      if (data.status) {
+        currentServers[index].status = data.status;
+      }
+      if (data.cpu) {
+        currentServers[index].cpu = data.cpu;
+      }
+      if (data.memory) {
+        currentServers[index].memory = data.memory;
+      }
+      if (data.disk) {
+        currentServers[index].storage = data.disk;
+      }
+      if (data.network) {
+        currentServers[index].network = data.network;
+      }
+    } catch (e) {
+      console.error("Error parsing WebSocket message:", e);
+    }
+  };
+  ws.onopen = () => ws.send("my-key");
+};
+
+export const deletes = new Set<number>();
+export const servers = new Data<ServerAPI[]>("sentryx/servers.json", []);
+export var currentServers: Server[] = servers.data.map(
+  (s) =>
+    ({
+      ...s,
+      status: "offline",
+      cpu: 0,
+      memory: 0,
+      storage: 0,
+      network: 0,
+    } as Server)
+);
+
+servers.data.map(useServer);
diff --git a/src/app/dashboard/Summary.tsx b/src/app/dashboard/Summary.tsx
new file mode 100644
index 0000000..2c05012
--- /dev/null
+++ b/src/app/dashboard/Summary.tsx
@@ -0,0 +1,20 @@
+import { Label } from "@/components/ui/label";
+import { Progress } from "@/components/ui/progress";
+
+export default function Summary({
+  value,
+  children,
+}: {
+  value: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <div className="justify-between flex">
+        <Label className="text-md">{children}</Label>
+        <Label className="text-md">{value}%</Label>
+      </div>
+      <Progress value={value} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/dashboard/SummaryCard.tsx b/src/app/dashboard/SummaryCard.tsx
new file mode 100644
index 0000000..29bda81
--- /dev/null
+++ b/src/app/dashboard/SummaryCard.tsx
@@ -0,0 +1,26 @@
+import { Card } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+export default function SummaryCard({
+  children,
+  value,
+  icon,
+  className,
+}: {
+  children: React.ReactNode;
+  value: string;
+  icon: React.ElementType;
+  className?: string;
+}) {
+  const Icon = icon;
+  return (
+    <Card className="h-24 flex flex-row justify-between items-center gap-0 px-6">
+      <div className="">
+        <Label className="text-md font-bold text-foreground">{children}</Label>
+        <Label className={cn("text-2xl font-bold", className)}>{value}</Label>
+      </div>
+      <Icon className={cn("shrink-0", className)} size={32} />
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 0e17d38..fc994e1 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -13,61 +13,20 @@ import { Button } from "@/components/ui/button";
 import { useEffect, useState } from "react";
 import useSession from "@/hooks/useSession";
 import Server from "@/types/server";
-import { toast } from "sonner";
+import SummaryCard from "./SummaryCard";
 
-export function generateHourlyData() {
+function generateHourlyData() {
   const result = [];
   for (let hour = 24; hour >= 0; hour--) {
     result.push({
       hour: hour,
-      cpu: Math.floor(Math.random() * 20 + 30), // random CPU usage between 0-99
-      ram: Math.floor(Math.random() * 40 + 40), // random RAM usage between 0-99
+      cpu: Math.floor(Math.random() * 20 + 30),
+      ram: Math.floor(Math.random() * 40 + 40),
     });
   }
   return result;
 }
 
-export function SummaryCard({
-  children,
-  value,
-  icon,
-  className,
-}: {
-  children: React.ReactNode;
-  value: string;
-  icon: React.ElementType;
-  className?: string;
-}) {
-  const Icon = icon;
-  return (
-    <Card className="h-24 flex flex-row justify-between items-center gap-0 px-6">
-      <div className="">
-        <Label className="text-md font-bold text-foreground">{children}</Label>
-        <Label className={cn("text-2xl font-bold", className)}>{value}</Label>
-      </div>
-      <Icon className={cn("shrink-0", className)} size={32} />
-    </Card>
-  );
-}
-
-export function Summary({
-  value,
-  children,
-}: {
-  value: number;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex flex-col gap-2 w-full">
-      <div className="justify-between flex">
-        <Label className="text-md">{children}</Label>
-        <Label className="text-md">{value}%</Label>
-      </div>
-      <Progress value={value} />
-    </div>
-  );
-}
-
 function average<T>(values: Array<T>, p: (v: T) => number) {
   return values.length > 0
     ? values.reduce((sum, value) => sum + p(value), 0) / values.length
@@ -115,6 +74,7 @@ export default function Dashboard() {
   };
 
   useEffect(() => {
+    getServers();
     const interval = setInterval(() => {
       console.log("Refreshing servers data...");
       getServers();
diff --git a/src/app/servers/page.tsx b/src/app/servers/page.tsx
index 6383c7c..cea10cf 100644
--- a/src/app/servers/page.tsx
+++ b/src/app/servers/page.tsx
@@ -9,7 +9,6 @@ import Server from "@/types/server";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import Map from "./Map";
 import NewServerDialog from "./NewServerDialog";
-import { toast } from "sonner";
 
 export default function Servers() {
   const session = useSession();