diff --git a/src/app/[locale]/site/[site]/preview/[previewId]/page-component.tsx b/src/app/[locale]/site/[site]/preview/[previewId]/page-component.tsx
index 99d9eb89..7988a78e 100644
--- a/src/app/[locale]/site/[site]/preview/[previewId]/page-component.tsx
+++ b/src/app/[locale]/site/[site]/preview/[previewId]/page-component.tsx
@@ -4,7 +4,7 @@ import { useTranslations } from "next-intl"
 import dynamic from "next/dynamic"
 import { useParams } from "next/navigation"
 
-import PostTitle from "~/components/site/PostTitle"
+import PostTitle from "~/components/site/PostTitle.client"
 import { useGetPage } from "~/queries/page"
 import { useGetSite } from "~/queries/site"
 
diff --git a/src/components/site/PostTitle.client.tsx b/src/components/site/PostTitle.client.tsx
new file mode 100644
index 00000000..97f5050a
--- /dev/null
+++ b/src/components/site/PostTitle.client.tsx
@@ -0,0 +1,35 @@
+import { useTranslations } from "next-intl"
+
+import { cn } from "~/lib/utils"
+
+export default function PostTitle({
+  icon,
+  title,
+  className,
+  center,
+  skipTranslate,
+}: {
+  icon?: React.ReactNode
+  title?: string
+  className?: string
+  center?: boolean
+  skipTranslate?: boolean
+}) {
+  const t = useTranslations()
+
+  return (
+    <h2
+      className={cn(
+        "xlog-post-title mb-8 flex items-center relative text-4xl font-extrabold",
+        {
+          "justify-center": center,
+          "text-center": center,
+        },
+        className,
+      )}
+    >
+      {icon}
+      <span>{skipTranslate ? title : t(title)}</span>
+    </h2>
+  )
+}