diff --git a/Frontend/src/app/(pages)/mojang/page.tsx b/Frontend/src/app/(pages)/mojang/page.tsx
index fba0e69..917f6e9 100644
--- a/Frontend/src/app/(pages)/mojang/page.tsx
+++ b/Frontend/src/app/(pages)/mojang/page.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { ReactElement } from "react";
 import {
     getMojangServerStatus,
+    MojangServer,
     MojangServerStatus,
     MojangServerStatusResponse,
 } from "restfulmc-lib";
@@ -46,42 +47,44 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
 
             {/* Server Statuses */}
             <div className="w-[25rem] xs:w-[29rem] sm:w-[33.5rem] px-5 py-3.5 flex flex-col gap-2.5 bg-muted rounded-xl divide-y-2 divide-zinc-700/40 transition-all transform-gpu">
-                {servers.map((server, index) => {
-                    const status: MojangServerStatus = server.status; // The status of the server
-                    return (
-                        <div
-                            key={index}
-                            className={cn(
-                                "flex justify-between items-center",
-                                index > 0 && "pt-2"
-                            )}
-                        >
-                            <div className="flex flex-col gap-0.5">
-                                <h1 className="pointer-events-none">
-                                    {server.name}
-                                </h1>
-                                <Link
-                                    href={server.endpoint}
-                                    className="text-xs text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu"
-                                    rel="noopener noreferrer"
-                                    target="_blank"
-                                >
-                                    <code>{server.endpoint}</code>
-                                </Link>
-                            </div>
-
-                            {/* Status */}
-                            <h2
+                {servers.map(
+                    (server: MojangServer, index: number): ReactElement => {
+                        const status: MojangServerStatus = server.status; // The status of the server
+                        return (
+                            <div
+                                key={index}
                                 className={cn(
-                                    "font-semibold pointer-events-none",
-                                    statusStyles[status]
+                                    "flex justify-between items-center",
+                                    index > 0 && "pt-2"
                                 )}
                             >
-                                {status}
-                            </h2>
-                        </div>
-                    );
-                })}
+                                <div className="flex flex-col gap-0.5">
+                                    <h1 className="pointer-events-none">
+                                        {server.name}
+                                    </h1>
+                                    <Link
+                                        href={server.endpoint}
+                                        className="text-xs text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu"
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                    >
+                                        <code>{server.endpoint}</code>
+                                    </Link>
+                                </div>
+
+                                {/* Status */}
+                                <h2
+                                    className={cn(
+                                        "font-semibold pointer-events-none",
+                                        statusStyles[status]
+                                    )}
+                                >
+                                    {status}
+                                </h2>
+                            </div>
+                        );
+                    }
+                )}
             </div>
         </main>
     );
@@ -90,7 +93,9 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
 /**
  * The styles for each status.
  */
-const statusStyles: any = {
+const statusStyles: {
+    [status: string]: string;
+} = {
     ONLINE: "text-green-500",
     DEGRADED: "text-yellow-500",
     OFFLINE: "text-red-500",
diff --git a/Frontend/src/app/(pages)/page.tsx b/Frontend/src/app/(pages)/page.tsx
index a3dba86..24b5898 100644
--- a/Frontend/src/app/(pages)/page.tsx
+++ b/Frontend/src/app/(pages)/page.tsx
@@ -2,7 +2,7 @@ import FeaturedContent from "@/components/landing/featured-content";
 import Hero from "@/components/landing/hero";
 import StatisticCounters from "@/components/landing/statistic-counters";
 import { ReactElement } from "react";
-import HeroBackground from "../components/landing/background";
+import HeroBackground from "@/components/landing/background";
 
 /**
  * The landing page.
diff --git a/Frontend/src/app/components/embed.tsx b/Frontend/src/app/components/embed.tsx
index c82d51f..62595a0 100644
--- a/Frontend/src/app/components/embed.tsx
+++ b/Frontend/src/app/components/embed.tsx
@@ -12,6 +12,7 @@ type EmbedProps = {
     /**
      * The color of this embed, undefined
      * for no custom color.
+     * // TODO: make this work lol
      */
     color?: string | undefined;
 
@@ -52,7 +53,6 @@ const Embed = ({
         twitter: {
             card: "summary",
         },
-        themeColor: color,
     };
 };
 export default Embed;
diff --git a/Frontend/src/app/components/footer.tsx b/Frontend/src/app/components/footer.tsx
index 5fd1cd0..01671e9 100644
--- a/Frontend/src/app/components/footer.tsx
+++ b/Frontend/src/app/components/footer.tsx
@@ -6,6 +6,11 @@ import { minecrafter } from "@/font/fonts";
 import { cn } from "@/lib/utils";
 import { FooterLinks } from "@/types/config";
 
+/**
+ * The footer for the site.
+ *
+ * @returns the footer jsx
+ */
 const Footer = (): ReactElement => (
     <footer
         className={cn(
diff --git a/Frontend/src/app/components/github-star-button.tsx b/Frontend/src/app/components/github-star-button.tsx
index 5eb6ab6..312a432 100644
--- a/Frontend/src/app/components/github-star-button.tsx
+++ b/Frontend/src/app/components/github-star-button.tsx
@@ -22,7 +22,7 @@ import {
 const GitHubStarButton = (): ReactElement => {
     const [stars, setStars]: [
         number | undefined,
-        Dispatch<SetStateAction<number | undefined>>
+        Dispatch<SetStateAction<number | undefined>>,
     ] = useState<number | undefined>(undefined); // The stars of the repository
 
     useEffect(() => {
diff --git a/Frontend/src/app/components/navbar.tsx b/Frontend/src/app/components/navbar.tsx
index 98e7f9e..e4830bd 100644
--- a/Frontend/src/app/components/navbar.tsx
+++ b/Frontend/src/app/components/navbar.tsx
@@ -17,13 +17,12 @@ import { ReactElement } from "react";
 const Navbar = (): ReactElement => {
     const path: string = usePathname(); // Get the current path
     return (
-        <nav className="fixed inset-x-0 flex h-16 px-5 sm:px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
-            {/* Left */}
-            <div className="flex gap-3 xs:gap-7 lg:gap-12 items-center transition-all transform-gpu">
-                {/* App Branding */}
+        <nav className="fixed inset-x-0 flex h-16 px-2.5 xs:px-5 sm:px-12 bg-navbar-background transition-all transform-gpu z-50">
+            <div className="relative w-full flex justify-between items-center">
+                {/* App Branding - Left */}
                 <Link
                     className={cn(
-                        "text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
+                        "text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu z-50",
                         minecrafter.className
                     )}
                     href="/"
@@ -41,33 +40,35 @@ const Navbar = (): ReactElement => {
                     <span className="hidden lg:flex">{config.siteName}</span>
                 </Link>
 
-                {/* Links */}
-                <div className="flex gap-7">
-                    {Object.entries(config.navbarLinks).map(
-                        (link: [string, string], index: number) => {
-                            const url: string = link[1]; // The href of the link
-                            let active: boolean = path.startsWith(url); // Is this the active link?
-                            return (
-                                <Link
-                                    key={index}
-                                    className={cn(
-                                        "font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu",
-                                        active && "text-minecraft-green-4"
-                                    )}
-                                    href={url}
-                                >
-                                    {link[0]}
-                                </Link>
-                            );
-                        }
-                    )}
+                {/* Center - Links */}
+                <div className="absolute inset-x-0 md:left-20 lg:left-0 flex justify-center md:justify-start lg:justify-center">
+                    <div className="flex gap-7">
+                        {Object.entries(config.navbarLinks).map(
+                            (link: [string, string], index: number) => {
+                                const url: string = link[1]; // The href of the link
+                                let active: boolean = path.startsWith(url); // Is this the active link?
+                                return (
+                                    <Link
+                                        key={index}
+                                        className={cn(
+                                            "font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu",
+                                            active && "text-minecraft-green-4"
+                                        )}
+                                        href={url}
+                                    >
+                                        {link[0]}
+                                    </Link>
+                                );
+                            }
+                        )}
+                    </div>
                 </div>
-            </div>
 
-            {/* Social Buttons - Right */}
-            <div className="hidden md:flex">
-                {/* Star on Github <3 */}
-                <GitHubStarButton />
+                {/* Social Buttons - Right */}
+                <div className="hidden md:flex">
+                    {/* Star on Github <3 */}
+                    <GitHubStarButton />
+                </div>
             </div>
         </nav>
     );
diff --git a/Frontend/src/app/components/player/player-result.tsx b/Frontend/src/app/components/player/player-result.tsx
index 2ac2026..7dabdbd 100644
--- a/Frontend/src/app/components/player/player-result.tsx
+++ b/Frontend/src/app/components/player/player-result.tsx
@@ -101,19 +101,24 @@ const PlayerResult = ({
                                         part === SkinPart.FACE ||
                                         part === SkinPart.BODY_FLAT
                                 )
-                                .map(([part, url], index) => (
-                                    <Link
-                                        key={index}
-                                        href={url}
-                                        target="_blank"
-                                    >
-                                        <img
-                                            className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
-                                            src={url}
-                                            alt={`${username}'s ${part}`}
-                                        />
-                                    </Link>
-                                ))}
+                                .map(
+                                    (
+                                        [part, url]: [string, string],
+                                        index: number
+                                    ) => (
+                                        <Link
+                                            key={index}
+                                            href={url}
+                                            target="_blank"
+                                        >
+                                            <img
+                                                className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
+                                                src={url}
+                                                alt={`${username}'s ${part}`}
+                                            />
+                                        </Link>
+                                    )
+                                )}
                         </div>
                     </div>
                 </div>
diff --git a/Frontend/src/app/components/server/server-result.tsx b/Frontend/src/app/components/server/server-result.tsx
index 8f6e5de..2dee97c 100644
--- a/Frontend/src/app/components/server/server-result.tsx
+++ b/Frontend/src/app/components/server/server-result.tsx
@@ -1,11 +1,11 @@
 import { cn } from "@/lib/utils";
 import Image from "next/image";
-import { ReactElement, ReactNode } from "react";
+import { ReactElement } from "react";
 import {
     CachedBedrockMinecraftServer,
     CachedJavaMinecraftServer,
 } from "restfulmc-lib";
-import config from "../../config";
+import config from "@/config";
 
 /**
  * The props for a server result.
@@ -25,7 +25,7 @@ type ServerResultProps = {
  */
 const ServerResult = ({ server }: ServerResultProps): ReactElement => {
     const favicon: string | undefined = (server as CachedJavaMinecraftServer)
-        .favicon?.url; // The favicon of the server (TODO: bedrock)
+        .favicon?.url; // The favicon of the server
     return (
         <div
             className={cn(
diff --git a/Frontend/src/app/components/server/server-search.tsx b/Frontend/src/app/components/server/server-search.tsx
index ba445bd..4b80306 100644
--- a/Frontend/src/app/components/server/server-search.tsx
+++ b/Frontend/src/app/components/server/server-search.tsx
@@ -62,7 +62,10 @@ const ServerSearch = ({
                         </SelectTrigger>
                         <SelectContent>
                             {Object.values(ServerPlatform).map(
-                                (platform, index) => (
+                                (
+                                    platform: ServerPlatform,
+                                    index: number
+                                ): ReactElement => (
                                     <SelectItem key={index} value={platform}>
                                         {capitialize(platform)}
                                     </SelectItem>