diff --git a/src/app/dashboard/[subdomain]/comments/page.tsx b/src/app/dashboard/[subdomain]/comments/page.tsx
index b8520ec5..6f4be148 100644
--- a/src/app/dashboard/[subdomain]/comments/page.tsx
+++ b/src/app/dashboard/[subdomain]/comments/page.tsx
@@ -13,7 +13,7 @@ import { useGetCommentsBySite, useGetSite } from "~/queries/site"
 export default function CommentsPage() {
   const params = useParams()
   const subdomain = params?.subdomain as string
-  const { t } = useTranslation("dashboard")
+  const { t, i18n } = useTranslation("dashboard")
 
   const site = useGetSite(subdomain)
 
@@ -83,6 +83,7 @@ export default function CommentsPage() {
                       <div>
                         {name}{" "}
                         <Trans
+                          i18n={i18n}
                           i18nKey="comment on your"
                           values={{
                             type: t(type || "", {
diff --git a/src/app/dashboard/[subdomain]/page.tsx b/src/app/dashboard/[subdomain]/page.tsx
index 649e88bf..d3398340 100644
--- a/src/app/dashboard/[subdomain]/page.tsx
+++ b/src/app/dashboard/[subdomain]/page.tsx
@@ -24,7 +24,7 @@ export default function SubdomainIndex() {
     characterId,
   })
   const date = useDate()
-  const { t } = useTranslation("dashboard")
+  const { t, i18n } = useTranslation("dashboard")
   const tips = useGetTips({
     toCharacterId: characterId,
     limit: 1000,
@@ -114,6 +114,7 @@ export default function SubdomainIndex() {
           </div>
           <div className="prose p-6 bg-slate-50 rounded-lg relative">
             <Trans
+              i18n={i18n}
               i18nKey="hello.welcome"
               defaults="<p>👋 Hello there,</p><p>Welcome to use xLog!</p><p>Here are some useful links to get started:</p>"
               components={{
@@ -143,6 +144,7 @@ export default function SubdomainIndex() {
               </li>
             </ul>
             <Trans
+              i18n={i18n}
               i18nKey="hello.community"
               defaults="<p>Join the community to meet friends or build xLog together:</p>"
               components={{
diff --git a/src/app/dashboard/[subdomain]/settings/general/page.tsx b/src/app/dashboard/[subdomain]/settings/general/page.tsx
index 3d819696..e59ddcba 100644
--- a/src/app/dashboard/[subdomain]/settings/general/page.tsx
+++ b/src/app/dashboard/[subdomain]/settings/general/page.tsx
@@ -20,7 +20,7 @@ export default function SiteSettingsGeneralPage() {
 
   const updateSite = useUpdateSite()
   const site = useGetSite(subdomain)
-  const { t } = useTranslation("dashboard")
+  const { t, i18n } = useTranslation("dashboard")
 
   const form = useForm({
     defaultValues: {
@@ -185,7 +185,11 @@ export default function SiteSettingsGeneralPage() {
             label="Google Analytics"
             help={
               <p>
-                <Trans i18nKey="Integrate Google Analytics" ns="dashboard">
+                <Trans
+                  i18n={i18n}
+                  i18nKey="Integrate Google Analytics"
+                  ns="dashboard"
+                >
                   Integrate Google Analytics into your site. You can follow the
                   instructions{" "}
                   <UniLink
@@ -207,7 +211,11 @@ export default function SiteSettingsGeneralPage() {
             label="Umami Cloud Analytics"
             help={
               <p>
-                <Trans i18nKey="Integrate Umami Cloud Analytics" ns="dashboard">
+                <Trans
+                  i18n={i18n}
+                  i18nKey="Integrate Umami Cloud Analytics"
+                  ns="dashboard"
+                >
                   Integrate Umami Cloud Analytics into your site. You can follow
                   the instructions{" "}
                   <UniLink
diff --git a/src/app/dashboard/[subdomain]/settings/social-platforms/page.tsx b/src/app/dashboard/[subdomain]/settings/social-platforms/page.tsx
index 1995bb3c..efde5cd4 100644
--- a/src/app/dashboard/[subdomain]/settings/social-platforms/page.tsx
+++ b/src/app/dashboard/[subdomain]/settings/social-platforms/page.tsx
@@ -80,7 +80,7 @@ export default function SiteSettingsNavigationPage() {
 
   const updateSite = useUpdateSite()
   const site = useGetSite(subdomain)
-  const { t } = useTranslation("dashboard")
+  const { t, i18n } = useTranslation("dashboard")
 
   const [items, setItems] = useState<Item[]>([])
 
@@ -167,7 +167,7 @@ export default function SiteSettingsNavigationPage() {
         </p>
         <p>
           <span className="text-zinc-800">
-            <Trans ns="dashboard" i18nKey="social tips.p2">
+            <Trans i18n={i18n} ns="dashboard" i18nKey="social tips.p2">
               We support{" "}
               <UniLink
                 href="https://github.com/Crossbell-Box/xLog/blob/dev/src/components/site/Platform.tsx#L7"
@@ -183,7 +183,7 @@ export default function SiteSettingsNavigationPage() {
         </p>
         <p>
           <span className="text-zinc-800">
-            <Trans ns="dashboard" i18nKey="social tips.p3">
+            <Trans i18n={i18n} ns="dashboard" i18nKey="social tips.p3">
               You can also connect to Twitter, Telegram Channel, Medium,
               Substack and more and automatically sync content on{" "}
               <UniLink href="https://xsync.app/" className="underline">
diff --git a/src/app/site/[site]/layout.tsx b/src/app/site/[site]/layout.tsx
index 754ca3f3..ee54c97b 100644
--- a/src/app/site/[site]/layout.tsx
+++ b/src/app/site/[site]/layout.tsx
@@ -7,7 +7,7 @@ import { Hydrate, dehydrate } from "@tanstack/react-query"
 import { BlockchainInfo } from "~/components/common/BlockchainInfo"
 import { Style } from "~/components/common/Style"
 import { BackToTopFAB } from "~/components/site/BackToTopFAB"
-import { SiteFooter } from "~/components/site/SiteFooter"
+import SiteFooter from "~/components/site/SiteFooter"
 import { SiteHeader } from "~/components/site/SiteHeader"
 import { FABContainer } from "~/components/ui/FAB"
 import { SITE_URL } from "~/lib/env"
@@ -170,8 +170,8 @@ export default async function SiteLayout({
             <BlockchainInfo site={site} page={page || undefined} />
           </div>
         )}
+        {/* @ts-expect-error Async Server Component */}
         <SiteFooter site={site || undefined} />
-
         <FABContainer>
           <BackToTopFAB />
         </FABContainer>
diff --git a/src/components/common/FollowingButton.tsx b/src/components/common/FollowingButton.tsx
index 31328bdb..27c0ec6e 100644
--- a/src/components/common/FollowingButton.tsx
+++ b/src/components/common/FollowingButton.tsx
@@ -23,7 +23,7 @@ export const FollowingButton: React.FC<{
 }> = ({ site, variant, className, size, loadingStatusChange }) => {
   const subscribeToSite = useSubscribeToSite()
   const unsubscribeFromSite = useUnsubscribeFromSite()
-  const { t } = useTranslation("common")
+  const { t, i18n } = useTranslation("common")
 
   const handleClickSubscribe = () => {
     if (site?.characterId) {
@@ -54,7 +54,7 @@ export const FollowingButton: React.FC<{
       subscribeToSite.reset()
       toast.success(
         <span>
-          <Trans i18nKey="Successfully followed" ns="common">
+          <Trans i18n={i18n} i18nKey="Successfully followed" ns="common">
             Hey there! You&apos;re all set to{" "}
             <UniLink className="underline" href={`${SITE_URL}/activities`}>
               keep up with your followed blogger&apos;s latest buzz here
diff --git a/src/components/dashboard/PagesManager.tsx b/src/components/dashboard/PagesManager.tsx
index af7dc6d1..d80163af 100644
--- a/src/components/dashboard/PagesManager.tsx
+++ b/src/components/dashboard/PagesManager.tsx
@@ -48,7 +48,7 @@ export const PagesManager: React.FC<{
     [searchParams],
   )
 
-  const { t } = useTranslation("dashboard")
+  const { t, i18n } = useTranslation("dashboard")
   const { t: siteT } = useTranslation("site")
   const date = useDate()
 
@@ -143,7 +143,7 @@ export const PagesManager: React.FC<{
   const description = isPost ? (
     <>
       <p>
-        <Trans i18nKey="posts description" ns="dashboard">
+        <Trans i18n={i18n} i18nKey="posts description" ns="dashboard">
           Posts are entries listed in reverse chronological order on your site.
           Think of them as articles or updates that you share to offer up new
           content to your readers.{" "}
@@ -156,7 +156,7 @@ export const PagesManager: React.FC<{
   ) : (
     <>
       <p>
-        <Trans i18nKey="pages description" ns="dashboard">
+        <Trans i18n={i18n} i18nKey="pages description" ns="dashboard">
           Pages are static and are not affected by date. Think of them as more
           permanent fixtures of your site — an About page, and a Contact page
           are great examples of this.{" "}
@@ -169,7 +169,7 @@ export const PagesManager: React.FC<{
         </Trans>
       </p>
       <p>
-        <Trans i18nKey="pages add" ns="dashboard">
+        <Trans i18n={i18n} i18nKey="pages add" ns="dashboard">
           After you create a page, you can{" "}
           <UniLink
             className="underline"
diff --git a/src/components/site/SiteFooter.tsx b/src/components/site/SiteFooter.tsx
index d241caf8..7955a5e2 100644
--- a/src/components/site/SiteFooter.tsx
+++ b/src/components/site/SiteFooter.tsx
@@ -3,15 +3,17 @@ import Script from "next/script"
 import { Logo } from "~/components/common/Logo"
 import { Platform } from "~/components/site/Platform"
 import { SITE_URL } from "~/lib/env"
-import { Trans } from "~/lib/i18n"
+import { Trans, useTranslation } from "~/lib/i18n"
 import { ExpandedCharacter } from "~/lib/types"
 
 import { DarkModeSwitch } from "../common/DarkModeSwitch"
 import { UniLink } from "../ui/UniLink"
 
-export const SiteFooter: React.FC<{
+export default async function SiteFooter({
+  site,
+}: {
   site?: ExpandedCharacter
-}> = ({ site }) => {
+}) {
   const LogoWithLink = () => {
     return (
       <UniLink
@@ -23,6 +25,8 @@ export const SiteFooter: React.FC<{
     )
   }
 
+  const { i18n } = await useTranslation("site")
+
   return (
     <>
       <footer className="text-zinc-500 border-t">
@@ -34,6 +38,7 @@ export const SiteFooter: React.FC<{
             </UniLink>
             <span> · </span>
             <Trans
+              i18n={i18n}
               i18nKey="powered by"
               defaults={"<span>Powered by </span><name/>"}
               components={{