diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index f028720..2071cd5 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -38,8 +38,18 @@ export default function ServerCard({
     >
       <Popover>
         <PopoverTrigger asChild>
-          <section className={"flex items-center justify-start gap-2 lg:w-28"}>
-            {showFlag ? <ServerFlag country_code={country_code} /> : null}
+          <section
+            className="grid items-center gap-2 lg:w-28"
+            style={{ gridTemplateColumns: "auto 1fr auto" }}
+          >
+            <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",
@@ -48,7 +58,7 @@ export default function ServerCard({
             >
               {name}
             </p>
-            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
+            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
           </section>
         </PopoverTrigger>
         <PopoverContent side="top">
@@ -127,8 +137,18 @@ export default function ServerCard({
     >
       <Popover>
         <PopoverTrigger asChild>
-          <section className={"flex items-center justify-start gap-2 lg:w-28"}>
-            {showFlag ? <ServerFlag country_code={country_code} /> : null}
+          <section
+            className="grid items-center gap-2 lg:w-28"
+            style={{ gridTemplateColumns: "auto 1fr auto" }}
+          >
+            <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",
@@ -137,7 +157,7 @@ export default function ServerCard({
             >
               {name}
             </p>
-            <span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
+            <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">