diff --git a/src/app/server/[server]/historical-data/page.tsx b/src/app/server/[server]/historical-data/page.tsx
index 35ac9cb..515a071 100644
--- a/src/app/server/[server]/historical-data/page.tsx
+++ b/src/app/server/[server]/historical-data/page.tsx
@@ -15,6 +15,7 @@ import { banner } from "@/banner";
 import Link from "next/link";
 import TabServer from "@/components/misc/TabServer";
 import { ChartComponent } from "@/components/Chart";
+import { NewChart } from "@/components/NewChart";
 
 type Props = {
   params: { server: string };
@@ -81,9 +82,8 @@ export default function ServerPage({ params }: { params: { server: string } }) {
         <TabServer server={params.server} tabDef="historical" />
         <div className="pt-8">
           <ServerView server={params.server} />
-          <div className="p-4 grid grid-cols-2 gap-4">
-            <ChartComponent chart="player_count" server={params.server} />
-            <ChartComponent chart="favorites" server={params.server} />
+          <div className="p-4 gap-4">
+            <NewChart server={params.server} />
           </div>
         </div>
       </div>
diff --git a/src/components/FavoritesView.tsx b/src/components/FavoritesView.tsx
index e948399..a693328 100644
--- a/src/components/FavoritesView.tsx
+++ b/src/components/FavoritesView.tsx
@@ -14,7 +14,7 @@ export default function FavoritesView() {
   const [loading, setLoading] = useState(true);
 
   useEffectOnce(() => {
-    fetch("/api/accountLocked/getAllFavorites").then((c) => {
+    fetch("/api/favorites/getAllFavorites").then((c) => {
       c.json().then((d) => {
         let num = 0;
         d.result.forEach((a: any, i: number) => {
@@ -28,7 +28,7 @@ export default function FavoritesView() {
                 if (num == d.result.length) {
                   setLoading(false);
                 }
-              }),
+              })
           );
         });
         if (d.result.length == 0) setLoading(false);
@@ -65,7 +65,7 @@ export default function FavoritesView() {
                   className="  min-w-[128px] max-w-[328px] mb-2 h-[32px] max-md:hidden"
                   onClick={() => {
                     navigator.clipboard.writeText(
-                      server.name + ".mshf.minehut.gg",
+                      server.name + ".mshf.minehut.gg"
                     );
                     toast.success("Copied IP to clipboard");
                   }}
@@ -105,7 +105,7 @@ export default function FavoritesView() {
 }
 
 function convert(value: number) {
-  var result: string = "";
+  var result: string = value.toString();
   if (value >= 1000000) {
     result = Math.floor(value / 1000000) + "m";
   } else if (value >= 1000) {
diff --git a/src/components/NewChart.tsx b/src/components/NewChart.tsx
new file mode 100644
index 0000000..b015123
--- /dev/null
+++ b/src/components/NewChart.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import * as React from "react";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { useEffectOnce } from "@/lib/useEffectOnce";
+import { ServerResponse } from "./ServerView";
+
+const chartConfig = {
+  player_count: {
+    label: "Joins",
+    color: "hsl(var(--chart-1))",
+  },
+  favorites: {
+    label: "Favorites",
+    color: "hsl(var(--chart-3))",
+  },
+} satisfies ChartConfig;
+
+export function NewChart({ server }: { server: string }) {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("player_count");
+
+  const [chartData, setChartData] = React.useState<any>([]);
+  const [joins, setJoins] = React.useState<any>(0);
+  const [favorites, setFavorites] = React.useState<any>(0);
+
+  const allNums = { player_count: joins, favorites };
+  useEffectOnce(() => {
+    fetch("/api/history/getShortTermData", {
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        scopes: ["player_count", "favorites", "time"],
+        server,
+      }),
+      method: "POST",
+    }).then((c) => {
+      c.json().then((b) => {
+        setChartData(b.data);
+        fetch("/api/favorites/getCommunityNum", {
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ server }),
+          method: "POST",
+        }).then((b) =>
+          b.json().then((f) => {
+            setFavorites(f.result);
+          })
+        );
+        fetch("https://api.minehut.com/server/" + server + "?byName=true").then(
+          (k) => {
+            k.json().then((p: { server: ServerResponse }) => {
+              setJoins(p.server.joins);
+            });
+          }
+        );
+      });
+    });
+  });
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+          <CardTitle>
+            {chartConfig[activeChart].label} Chart for {server}
+          </CardTitle>
+          <CardDescription>Showing the past 30 entries.</CardDescription>
+        </div>
+        <div className="flex">
+          {["player_count", "favorites"].map((key) => {
+            const chart = key as keyof typeof chartConfig;
+            return (
+              <button
+                key={chart}
+                data-active={activeChart === chart}
+                className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                onClick={() => setActiveChart(chart)}
+              >
+                <span className="text-xs text-muted-foreground">
+                  {chartConfig[chart].label}
+                </span>
+                <span className="text-lg font-bold leading-none sm:text-3xl">
+                  {convert(allNums[chart])}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="time"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value);
+                return date.toLocaleTimeString("en-US", {
+                  timeStyle: "short",
+                });
+              }}
+            />
+            <YAxis
+              dataKey={activeChart}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return (
+                  value +
+                  (activeChart == "player_count"
+                    ? ` plyr${value != 1 ? "s" : ""}.`
+                    : ` ${value == 1 ? "favorite" : "favrts."}`)
+                );
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey={activeChart}
+                  hideLabel
+                />
+              }
+            />
+            <Line
+              dataKey={activeChart}
+              type="monotone"
+              stroke={`var(--color-${activeChart})`}
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}
+
+function convert(value: number) {
+  var result: string = value.toString();
+  if (value >= 1000000) {
+    result = Math.floor(value / 1000000) + "m";
+  } else if (value >= 1000) {
+    result = Math.floor(value / 1000) + "k";
+  }
+  return result;
+}
diff --git a/src/components/ServerView.tsx b/src/components/ServerView.tsx
index 7e68800..d735da3 100644
--- a/src/components/ServerView.tsx
+++ b/src/components/ServerView.tsx
@@ -54,7 +54,7 @@ export default function ServerView(props: { server: string }) {
   useEffect(() => {
     setRandomText(getRandomText());
     single.init().then(() => {
-      fetch("/api/accountLocked/isFavorited", {
+      fetch("/api/favorites/isFavorited", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -211,7 +211,7 @@ export default function ServerView(props: { server: string }) {
               <Button
                 variant="outline"
                 onClick={() => {
-                  fetch("/api/accountLocked/favoriteServer", {
+                  fetch("/api/favorites/favoriteServer", {
                     headers: { "Content-Type": "application/json" },
                     body: JSON.stringify({
                       server: single.grabOffline()?.name,
@@ -223,7 +223,7 @@ export default function ServerView(props: { server: string }) {
               >
                 {favorited && (
                   <motion.div
-                    animate={{ color: "yellow", fill: "yellow" }}
+                    animate={{ color: "yellow", fill: "yellow" }}
                     transition={{ duration: 2 }}
                   >
                     <Star
@@ -237,7 +237,7 @@ export default function ServerView(props: { server: string }) {
                 {!favorited && (
                   <motion.div
                     transition={{ duration: 1 }}
-                    animate={{ color: "yellow", fill: "yellow" }}
+                    animate={{ color: "yellow", fill: "yellow" }}
                   >
                     <Star className="mr-2" size="16" />
                   </motion.div>
diff --git a/src/pages/api/accountLocked/favoriteServer.ts b/src/pages/api/favorites/favoriteServer.ts
similarity index 97%
rename from src/pages/api/accountLocked/favoriteServer.ts
rename to src/pages/api/favorites/favoriteServer.ts
index e68c301..2eb8b47 100644
--- a/src/pages/api/accountLocked/favoriteServer.ts
+++ b/src/pages/api/favorites/favoriteServer.ts
@@ -5,7 +5,7 @@ import { decreaseNum, increaseNum } from "./getCommunityNum";
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse,
+  res: NextApiResponse
 ) {
   const { userId } = getAuth(req);
 
@@ -41,7 +41,7 @@ export default async function handler(
         {
           user: userId,
           favorites: existingFavorites,
-        },
+        }
       );
       res.send({ message: "Unfavorited " + server });
     } else {
@@ -52,7 +52,7 @@ export default async function handler(
         {
           user: userId,
           favorites: existingFavorites,
-        },
+        }
       );
       res.send({ message: "Favorited " + server });
     }
diff --git a/src/pages/api/accountLocked/getAllFavorites.ts b/src/pages/api/favorites/getAllFavorites.ts
similarity index 100%
rename from src/pages/api/accountLocked/getAllFavorites.ts
rename to src/pages/api/favorites/getAllFavorites.ts
diff --git a/src/pages/api/accountLocked/getCommunityNum.ts b/src/pages/api/favorites/getCommunityNum.ts
similarity index 86%
rename from src/pages/api/accountLocked/getCommunityNum.ts
rename to src/pages/api/favorites/getCommunityNum.ts
index 47143b4..f466d58 100644
--- a/src/pages/api/accountLocked/getCommunityNum.ts
+++ b/src/pages/api/favorites/getCommunityNum.ts
@@ -4,13 +4,8 @@ import { getAuth } from "@clerk/nextjs/server";
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse,
+  res: NextApiResponse
 ) {
-  const { userId } = getAuth(req);
-
-  if (!userId) {
-    return res.status(401).json({ error: "Unauthorized" });
-  }
   const server = checkForInfoOrLeave(res, req.body.server);
   const client = new MongoClient(process.env.MONGO_DB as string);
 
@@ -47,7 +42,7 @@ export async function increaseNum(client: MongoClient, server: string) {
     const entry = find[0];
     collection.findOneAndReplace(
       { server: server },
-      { server: server, favorites: entry.favorites + 1 },
+      { server: server, favorites: entry.favorites + 1 }
     );
   }
 }
@@ -64,7 +59,7 @@ export async function decreaseNum(client: MongoClient, server: string) {
     const entry = find[0];
     collection.findOneAndReplace(
       { server: server },
-      { server: server, favorites: entry.favorites - 1 },
+      { server: server, favorites: entry.favorites - 1 }
     );
   }
 }
diff --git a/src/pages/api/accountLocked/isFavorited.ts b/src/pages/api/favorites/isFavorited.ts
similarity index 100%
rename from src/pages/api/accountLocked/isFavorited.ts
rename to src/pages/api/favorites/isFavorited.ts
diff --git a/src/version.tsx b/src/version.tsx
index 5e533f4..9af65d2 100644
--- a/src/version.tsx
+++ b/src/version.tsx
@@ -1,4 +1,4 @@
-export const version = "b-0.4";
+export const version = "b-0.5";
 
 const User = ({ user }: { user: string }) => (
   <span className="cursor-pointer bg-[rgba(255,165,0,0.25);] rounded p-[2.5px]">
@@ -10,7 +10,17 @@ export const Changelog = () => (
   <>
     <div>
       <strong className="flex items-center">
-        Version b-0.4 (July 24th 2024):
+        Version b-0.4.5 (July 26th 2024):
+      </strong>
+      <ul>
+        <li>• Made charts better</li>
+        <li>• Sorted API endpoints</li>
+      </ul>
+    </div>
+    <br />
+    <div>
+      <strong className="flex items-center">
+        Version b-0.4 (July 24th 2024):
       </strong>
       <ul>
         <li>• Added Info button</li>
@@ -21,7 +31,7 @@ export const Changelog = () => (
     <br />
     <div>
       <strong className="flex items-center">
-        Version b-0.3 (July 23th 2024):
+        Version b-0.3 (July 23th 2024):
       </strong>
       <ul>
         <li>
@@ -32,7 +42,7 @@ export const Changelog = () => (
     <br />
     <div>
       <strong className="flex items-center">
-        Version b-0.2 (July 23th 2024):
+        Version b-0.2 (July 23th 2024):
       </strong>
       <ul>
         <li>• Inital release!</li>