diff --git a/src/app/(pages)/[id]/page.tsx b/src/app/(pages)/[id]/page.tsx
index 3d434ad..18accb2 100644
--- a/src/app/(pages)/[id]/page.tsx
+++ b/src/app/(pages)/[id]/page.tsx
@@ -1,14 +1,12 @@
 import { ReactElement } from "react";
-import hljs from "highlight.js";
 import { ActionMenu } from "@/app/components/action-menu";
-import { cn } from "@/app/common/utils";
-import { jetbrainsMono } from "@/app/common/font/font";
 import { Metadata } from "next";
 import moment from "moment";
 import { notFound } from "next/navigation";
 
 // Highlight.js theme
 import "highlight.js/styles/github-dark-dimmed.css";
+import Codeblock from "@/app/components/codeblock";
 
 type PasteProps = {
   params: {
@@ -66,17 +64,9 @@ export default async function Paste({
     <div className="relative">
       <ActionMenu />
 
-      <pre>
-        <code
-          className={cn(
-            "hljs !bg-transparent text-sm",
-            jetbrainsMono.className,
-          )}
-          dangerouslySetInnerHTML={{
-            __html: hljs.highlightAuto(data.content).value,
-          }}
-        />
-      </pre>
+      <div className="p-1 hljs !bg-transparent text-sm">
+        <Codeblock>{data.content}</Codeblock>
+      </div>
     </div>
   );
 }
diff --git a/src/app/components/codeblock.tsx b/src/app/components/codeblock.tsx
new file mode 100644
index 0000000..96bfb5b
--- /dev/null
+++ b/src/app/components/codeblock.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import hljs from "highlight.js";
+import { useEffect, useState } from "react";
+
+const Codeblock = ({ children }: { children: string }) => {
+  const [mounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    if (mounted) {
+      hljs.safeMode();
+      hljs.highlightAll();
+    }
+  }, [mounted, children]);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setIsMounted(true);
+    }
+  }, []);
+
+  if (!mounted) {
+    return;
+  }
+
+  return (
+    <pre>
+      <code className="!bg-transparent">{children}</code>
+    </pre>
+  );
+};
+
+export default Codeblock;
diff --git a/src/app/components/theme-provider.tsx b/src/app/components/theme-provider.tsx
index b2baa74..b0ff266 100644
--- a/src/app/components/theme-provider.tsx
+++ b/src/app/components/theme-provider.tsx
@@ -5,5 +5,5 @@ import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { type ThemeProviderProps } from "next-themes/dist/types";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }