diff --git a/app/[locale]/(main)/header.tsx b/app/[locale]/(main)/header.tsx
index 15b3e82..523b2d1 100644
--- a/app/[locale]/(main)/header.tsx
+++ b/app/[locale]/(main)/header.tsx
@@ -6,7 +6,9 @@ import { Separator } from "@/components/ui/separator";
 import getEnv from "@/lib/env-entry";
 import { DateTime } from "luxon";
 import { useTranslations } from "next-intl";
+import { useLocale } from "next-intl";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 import React, { useEffect, useRef, useState } from "react";
 
 function Header() {
@@ -15,10 +17,18 @@ function Header() {
   const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
   const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
 
+  const router = useRouter();
+  const locale = useLocale();
+
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">
-        <section className="flex items-center text-base font-medium">
+        <section
+          onClick={() => {
+            router.push(`/${locale}/`);
+          }}
+          className="flex cursor-pointer items-center text-base font-medium"
+        >
           <div className="mr-1 flex flex-row items-center justify-start">
             <Image
               width={40}
diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index 8e55c4e..0ca2a88 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -36,31 +36,35 @@ export default function ServerCard({
         "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
       }
     >
-      <section
-        className="grid items-center gap-2 lg:w-28 cursor-pointer"
-        style={{ gridTemplateColumns: "auto 1fr auto" }}
-        onClick={() => {
-          router.push(`/${locale}/detail/${id}`);
-        }}
-      >
-        <div
-          className={cn(
-            "flex items-center justify-center",
-            showFlag ? "min-w-[17px]" : "min-w-0",
-          )}
-        >
-          {showFlag ? <ServerFlag country_code={country_code} /> : null}
-        </div>
-        <p
-          className={cn(
-            "break-all font-bold tracking-tight",
-            showFlag ? "text-xs" : "text-sm",
-          )}
-        >
-          {name}
-        </p>
-        <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
-      </section>
+      <Popover>
+        <PopoverTrigger asChild>
+          <section
+            className="grid items-center gap-2 lg:w-28"
+            style={{ gridTemplateColumns: "auto auto 1fr" }}
+          >
+            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
+            <div
+              className={cn(
+                "flex items-center justify-center",
+                showFlag ? "min-w-[17px]" : "min-w-0",
+              )}
+            >
+              {showFlag ? <ServerFlag country_code={country_code} /> : null}
+            </div>
+            <p
+              className={cn(
+                "break-all font-bold tracking-tight",
+                showFlag ? "text-xs" : "text-sm",
+              )}
+            >
+              {name}
+            </p>
+          </section>
+        </PopoverTrigger>
+        <PopoverContent side="top">
+          <ServerCardPopover status={props.status} host={props.host} />
+        </PopoverContent>
+      </Popover>
       <div
         onClick={() => {
           router.push(`/${locale}/network/${id}`);
@@ -138,8 +142,9 @@ export default function ServerCard({
         <PopoverTrigger asChild>
           <section
             className="grid items-center gap-2 lg:w-28"
-            style={{ gridTemplateColumns: "auto 1fr auto" }}
+            style={{ gridTemplateColumns: "auto auto 1fr" }}
           >
+            <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
             <div
               className={cn(
                 "flex items-center justify-center",
@@ -156,7 +161,6 @@ export default function ServerCard({
             >
               {name}
             </p>
-            <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
           </section>
         </PopoverTrigger>
         <PopoverContent className="w-fit p-2" side="top">
diff --git a/package.json b/package.json
index 07cdb31..03c1c2b 100644
--- a/package.json
+++ b/package.json
@@ -22,14 +22,14 @@
     "@radix-ui/react-tooltip": "^1.1.3",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/luxon": "^3.4.2",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/eslint-plugin": "^8.9.0",
     "caniuse-lite": "^1.0.30001668",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.13",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "flag-icons": "^7.2.3",
-    "framer-motion": "^11.11.8",
+    "framer-motion": "^11.11.9",
     "lucide-react": "^0.451.0",
     "luxon": "^3.5.0",
     "next": "^14.2.15",
@@ -44,7 +44,7 @@
     "recharts": "2.12.7",
     "sharp": "^0.33.5",
     "swr": "^2.2.6-beta.4",
-    "tailwind-merge": "^2.5.3",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
@@ -60,7 +60,7 @@
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3"
   }
 }