diff --git a/Frontend/public/media/platform/bedrock.png b/Frontend/public/media/platform/bedrock.png
new file mode 100644
index 0000000..4b4feb8
Binary files /dev/null and b/Frontend/public/media/platform/bedrock.png differ
diff --git a/Frontend/public/media/platform/java.png b/Frontend/public/media/platform/java.png
new file mode 100644
index 0000000..3036471
Binary files /dev/null and b/Frontend/public/media/platform/java.png differ
diff --git a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
index 20dfafd..1498623 100644
--- a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
+++ b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
@@ -16,6 +16,7 @@ import {
     type RestfulMCAPIError,
     ServerPlatform,
 } from "restfulmc-lib";
+import ServerRecommendations from "@/components/server/server-recommendations";
 
 /**
  * The page to lookup a server.
@@ -43,38 +44,43 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
 
     // Render the page
     return (
-        <main className="px-3 h-screen flex justify-center items-center">
+        <main className="px-3 h-screen flex flex-col gap-7 justify-center items-center">
             <div className="flex flex-col gap-7">
-                <h1
-                    className={cn(
-                        "mt-20 text-6xl text-minecraft-green-3 text-center select-none pointer-events-none",
-                        minecrafter.className
-                    )}
-                >
-                    Server Lookup
-                </h1>
+                {/* Header */}
+                <div className="relative flex flex-col gap-7">
+                    <h1
+                        className={cn(
+                            "mt-20 text-6xl text-minecraft-green-3 text-center select-none pointer-events-none",
+                            minecrafter.className
+                        )}
+                    >
+                        Server Lookup
+                    </h1>
 
-                <div className="flex flex-col gap-5 px-10 xs:px-14 sm:px-0 transition-all transform-gpu">
-                    {/* Error */}
-                    {error && (
-                        <Alert variant="destructive">
-                            <ExclamationCircleIcon width={20} height={20} />
-                            <AlertTitle>Error</AlertTitle>
-                            <AlertDescription>{error}</AlertDescription>
-                        </Alert>
-                    )}
+                    <div className="flex flex-col gap-5 px-10 xs:px-14 sm:px-0 transition-all transform-gpu">
+                        {/* Error */}
+                        {error && (
+                            <Alert variant="destructive">
+                                <ExclamationCircleIcon width={20} height={20} />
+                                <AlertTitle>Error</AlertTitle>
+                                <AlertDescription>{error}</AlertDescription>
+                            </Alert>
+                        )}
 
-                    {/* Search */}
-                    <ServerSearch platform={platform} hostname={hostname} />
-                </div>
-
-                {/* Server Result */}
-                {result && (
-                    <div className="flex justify-center scale-[.71] xs:scale-75 sm:scale-100 transition-all transform-gpu">
-                        <ServerResult server={result} />
+                        {/* Search */}
+                        <ServerSearch platform={platform} hostname={hostname} />
                     </div>
-                )}
+                </div>
             </div>
+
+            {/* Server Result & Recommendations */}
+            {result ? (
+                <div className="flex justify-center scale-[.71] xs:scale-75 sm:scale-100 transition-all transform-gpu">
+                    <ServerResult server={result} />
+                </div>
+            ) : (
+                <ServerRecommendations />
+            )}
         </main>
     );
 };
diff --git a/Frontend/src/app/components/server/server-recommendations.tsx b/Frontend/src/app/components/server/server-recommendations.tsx
new file mode 100644
index 0000000..f61c2e5
--- /dev/null
+++ b/Frontend/src/app/components/server/server-recommendations.tsx
@@ -0,0 +1,66 @@
+import { ReactElement } from "react";
+import { cn } from "@/lib";
+import { minecrafter } from "@/font/fonts";
+import { ServerPlatform } from "restfulmc-lib";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+
+/**
+ * The recommendations for a server.
+ */
+const RECOMMENDATIONS: {
+    [hostname: string]: ServerPlatform;
+} = {
+    "hypixel.net": ServerPlatform.JAVA,
+    "cubecraft.net": ServerPlatform.JAVA,
+    "wildprison.net": ServerPlatform.JAVA,
+    "wildprison.bedrock.minehut.gg": ServerPlatform.BEDROCK,
+    "play.lbsg.net": ServerPlatform.BEDROCK,
+};
+
+/**
+ * The recommendations for
+ * a server to test.
+ *
+ * @return the recommendations jsx
+ */
+const ServerRecommendations = (): ReactElement => (
+    <div className="p-4 flex flex-col gap-2.5 items-center bg-muted rounded-xl">
+        {/* Header */}
+        <h1
+            className={cn(
+                "text-xl text-minecraft-green-3",
+                minecrafter.className
+            )}
+        >
+            Try A Server
+        </h1>
+
+        {/* Recommendations */}
+        <div className="max-w-2xl flex flex-wrap gap-2 justify-center">
+            {Object.entries(RECOMMENDATIONS).map(
+                (
+                    [hostname, platform]: [string, ServerPlatform],
+                    index: number
+                ): ReactElement => (
+                    <Link key={index} href={`/server/${platform}/${hostname}`}>
+                        <Button
+                            className="px-10 flex gap-2.5 font-semibold hover:opacity-85 transition-all transform-gpu"
+                            variant="outline"
+                        >
+                            <Image
+                                src={`/media/platform/${platform}.png`}
+                                alt=""
+                                width={26}
+                                height={26}
+                            />
+                            <span>{hostname}</span>
+                        </Button>
+                    </Link>
+                )
+            )}
+        </div>
+    </div>
+);
+export default ServerRecommendations;
diff --git a/Frontend/src/app/components/ui/button.tsx b/Frontend/src/app/components/ui/button.tsx
index 7bf9602..43b2c3c 100644
--- a/Frontend/src/app/components/ui/button.tsx
+++ b/Frontend/src/app/components/ui/button.tsx
@@ -14,7 +14,7 @@ const buttonVariants = cva(
                 destructive:
                     "bg-destructive text-destructive-foreground hover:bg-destructive/90",
                 outline:
-                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                    "border border-zinc-700 bg-transparent hover:text-accent-foreground",
                 secondary:
                     "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",