diff --git a/app/(main)/[id]/page.tsx b/app/(main)/[id]/page.tsx
index 3646322..ac10cc9 100644
--- a/app/(main)/[id]/page.tsx
+++ b/app/(main)/[id]/page.tsx
@@ -5,13 +5,10 @@ import ServerDetailChartClient from "@/app/(main)/ClientComponents/ServerDetailC
 import ServerDetailClient from "@/app/(main)/ClientComponents/ServerDetailClient";
 import TabSwitch from "@/components/TabSwitch";
 import { Separator } from "@/components/ui/separator";
-import { useTranslations } from "next-intl";
 import { useState } from "react";
 
 export default function Page({ params }: { params: { id: string } }) {
-  const t = useTranslations("TabSwitch");
-
-  const tabs = [t("Detail"), t("Network")];
+  const tabs = ["Detail", "Network"];
   const [currentTab, setCurrentTab] = useState(tabs[0]);
   return (
     <div className="mx-auto grid w-full max-w-5xl gap-2">
diff --git a/components/TabSwitch.tsx b/components/TabSwitch.tsx
index 7701815..7bae3e0 100644
--- a/components/TabSwitch.tsx
+++ b/components/TabSwitch.tsx
@@ -2,7 +2,8 @@
 
 import { cn } from "@/lib/utils";
 import { motion } from "framer-motion";
-import React, { useState } from "react";
+import { useTranslations } from "next-intl";
+import React from "react";
 
 export default function TabSwitch({
   tabs,
@@ -13,6 +14,7 @@ export default function TabSwitch({
   currentTab: string;
   setCurrentTab: (tab: string) => void;
 }) {
+  const t = useTranslations("TabSwitch");
   return (
     <div className="z-50 flex flex-col items-start rounded-[50px]">
       <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
@@ -38,7 +40,7 @@ export default function TabSwitch({
               />
             )}
             <div className="relative z-20 flex items-center gap-1">
-              <p className="whitespace-nowrap">{tab}</p>
+              <p className="whitespace-nowrap">{t(tab)}</p>
             </div>
           </div>
         ))}