Rishon · Rishon · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026
diff --git a/README.md b/README.md
@@ -11,16 +11,16 @@ Highly recommended to install [Bun](https://bun.sh/) for the package management.
 1. Clone the repository:
 
    ```bash
-   git clone https://github.com/Rishon/Server-Tracker
+   $ git clone https://github.com/Rishon/Server-Tracker
    ```
 
 ### Client
 
 2. Install the dependencies:
 
    ```bash
-    cd Server-Tracker/client
-    bun install
+    $ cd Server-Tracker/client
+    $ bun install
    ```
 
 3. Adjust the environment variables:
@@ -33,22 +33,22 @@ Highly recommended to install [Bun](https://bun.sh/) for the package management.
 4. Start the development Next.JS server:
 
    ```bash
-    bun dev
+    $ bun dev
    ```
 
 ### Server
 
 4. Install the dependencies:
 
    ```bash
-    cd Server-Tracker/server
-    bun install
+    $ cd Server-Tracker/server
+    $ bun install
    ```
 
 5. Assign the environment variables:
 
    ```bash
-    cp .env.example .env
+    $ cp .env.example .env
    ```
 
 6. Adjust the environment variables:
@@ -61,7 +61,7 @@ Highly recommended to install [Bun](https://bun.sh/) for the package management.
 7. Start the development server:
 
    ```bash
-    bun dev
+    $ bun dev
    ```
 
 ## Production
@@ -71,15 +71,15 @@ To deploy the Server Tracker, follow these steps:
 1. Build the Next.JS application:
 
    ```bash
-    cd Server-Tracker/client
-    bun run build
+    $ cd Server-Tracker/client
+    $ bun run build
    ```
 
 2. Run the docker-compose file:
 
    ```bash
-    cd Server-Tracker
-    docker-compose up -d
+    $ cd Server-Tracker
+    $ docker-compose up -d
    ```
 
 ## Issues
@@ -91,7 +91,7 @@ If you discover a bug, please open up an [issue](https://github.com/Rishon/Serve
 To contribute to the Server Tracker, follow these steps:
 
 1. Fork this repository.
-2. Create a branch: `git checkout -b <branch_name>`.
-3. Make your changes and commit them: `git commit -m '<commit_message>'`.
-4. Push to the branch: `git push origin <branch>`.
+2. Create a new branch: `git checkout -b <branch_name>`.
+3. Make your changes and commit them: `git commit -m "<commit_message>"`.
+4. Push to the branch: `git push <remote> <branch>`.
 5. Create the pull request.
diff --git a/client/package.json b/client/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@next/third-parties": "^14.2.35",
-    "next": "^16.1.6",
+    "next": "^16.2.3",
     "next-sitemap": "^4.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -20,10 +20,10 @@
   },
   "devDependencies": {
     "typescript": "^5.9.3",
-    "@types/node": "^20.19.37",
+    "@types/node": "^20.19.39",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.9",
     "tailwindcss": "^3.4.19",
     "eslint": "^8.57.1",
     "eslint-config-next": "14.2.4"

diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
@@ -9,19 +9,49 @@ import { GoogleAnalytics } from "@next/third-parties/google";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 
-const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+interface LayoutProps {
+  children: React.ReactNode;
+  seo?: {
+    title?: string;
+    description?: string;
+    image?: string;
+  };
+}
+
+const RootLayout = ({ children, seo }: LayoutProps) => {
   const domain = process.env.NEXT_PUBLIC_HOSTNAME;
 
+  const fallbackTitle = "Server Tracker";
+  const fallbackDescription =
+    "Live tracking of player counts, MOTDs, and historical uptime.";
+
+  const title = seo?.title ? `${seo.title} | Server Tracker` : fallbackTitle;
+  const description = seo?.description || fallbackDescription;
+  const image = seo?.image;
+
   return (
     <div className="flex flex-col min-h-screen">
       <Head>
-        <title>Server Tracker</title>
-        <meta name="description" content="Track Minecraft servers" />
-        <meta name="author" content="Tracker" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta name="author" content="Rishon" />
         <meta name="keywords" content="Tracker, Minecraft, Israel, Servers" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="theme-color" content="#FFFFFF" />
 
+        {/* OpenGraph / Social Media */}
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta property="og:image" content={image} />
+        {domain && <meta property="og:url" content={`https://${domain}`} />}
+
+        {/* Twitter */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={title} />
+        <meta name="twitter:description" content={description} />
+        <meta name="twitter:image" content={image} />
+
         <link rel="canonical" href={domain} />
         <link rel="icon" href="/assets/favicon.ico" />
       </Head>
@@ -36,10 +66,10 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
             "@context": "https://schema.org",
             "@type": "WebSite",
             url: domain,
-            name: "Tracker",
+            name: "Server Tracker",
             author: {
               "@type": "Organization",
-              name: "Sela Development",
+              name: "Server Tracker",
             },
             description: "Track Minecraft servers",
             potentialAction: {

diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
@@ -16,7 +16,6 @@ import { HiOutlineExclamationTriangle } from "react-icons/hi2";
 
 // Context
 import { useGraphColor } from "@/contexts/GraphColorContext";
-import { HiOutlineBeaker } from "react-icons/hi";
 import { useCurrentList } from "@/contexts/CurrentListContext";
 
 const Navbar = () => {
@@ -30,9 +29,6 @@ const Navbar = () => {
   // Current list
   const { currentList, setCurrentList } = useCurrentList();
 
-  // Experimental
-  const [showExperimental, setShowExperimental] = useState(false);
-
   // Snackbar
   const [notification, setNotification] = useState<string | null>(null);
   const [snackbarType, setSnackbarType] = useState<"success" | "error">(
@@ -69,10 +65,7 @@ const Navbar = () => {
   useEffect(() => {
     const cachedGraphColor = getCache("graphColor");
     if (cachedGraphColor) setGraphColor(cachedGraphColor);
-
-    const cachedExperimental = getCache("experimental");
-    if (cachedExperimental) setShowExperimental(cachedExperimental);
-  }, [setGraphColor, setShowExperimental]);
+  }, [setGraphColor]);
 
   function setColor(color: string) {
     setCache("graphColor", color);
@@ -143,7 +136,7 @@ const Navbar = () => {
               bg-[#f0cd31]/5 border border-[#f0cd31]/30 hover:border-[#f0cd31]/60
               shadow-[0_0_15px_-3px_rgba(240,205,49,0.2)] hover:shadow-[0_0_25px_-3px_rgba(240,205,49,0.5)]"
             >
-              <span className="relative z-10">Try Zeraph</span>
+              <span className="relative z-10">Protect your server</span>
               <div className="absolute inset-0 rounded-full bg-[#f0cd31]/5 blur-md transition-opacity opacity-0 group-hover:opacity-100" />
             </Link>
           </div>
@@ -159,48 +152,32 @@ const Navbar = () => {
                   "success",
                 );
               }}
-              className="p-2 rounded-xl bg-white/5 hover:bg-white/10 transition"
+              className="p-2 rounded-xl bg-white/5 hover:bg-white/10 transition flex items-center justify-center w-[40px] h-[40px]"
             >
-              <Image
-                src={
-                  currentList === "minecraft"
-                    ? "/assets/games/minecraft.webp"
-                    : "/assets/games/hytale.webp"
-                }
-                width={22}
-                height={22}
-                alt="Game Toggle"
-              />
+              <div className="relative w-[20px] h-[20px]">
+                <Image
+                  src={
+                    currentList === "minecraft"
+                      ? "/assets/games/minecraft.webp"
+                      : "/assets/games/hytale.webp"
+                  }
+                  fill
+                  alt="Game Toggle"
+                  className="object-contain"
+                  sizes="20px"
+                />
+              </div>
             </button>
 
             <button
               onClick={() => setShowColorPicker(!showColorPicker)}
-              className="p-2 rounded-xl bg-white/5 hover:bg-white/10 transition"
+              className="p-2 rounded-xl bg-white/5 hover:bg-white/10 transition flex items-center justify-center w-[40px] h-[40px]"
             >
               <MdOutlineInvertColors
                 className="text-xl"
                 style={{ color: graphColor }}
               />
             </button>
-
-            {/*             <button
-              onClick={() => {
-                setShowExperimental(!showExperimental);
-                setCache("experimental", !showExperimental);
-                sendSnackbar(
-                  `Experimental Features ${showExperimental ? "disabled" : "enabled"
-                  }!`,
-                  "success",
-                );
-              }}
-              className={`p-2 rounded-xl transition
-          ${showExperimental
-                  ? "bg-emerald-500/20 text-emerald-400"
-                  : "bg-red-500/20 text-red-400"
-                }`}
-            >
-              <HiOutlineBeaker className="text-xl" />
-            </button> */}
           </div>
         </div>