diff --git a/web/app/globals.css b/web/app/globals.css
index 76c0b02..908e351 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -56,15 +56,15 @@
   body {
     @apply bg-background text-foreground;
   }
-  hr {
-    @apply my-8 border-t border-gray-300;
-  }
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+/* Custom styles for code blocks */
+.prose pre {
+  background-color: #f3f4f6;
+  color: #1f2937;
 }
 
+.prose code {
+  color: #1f2937;
+}
 
diff --git a/web/app/guides/[slug]/GuideContent.tsx b/web/app/guides/[slug]/GuideContent.tsx
deleted file mode 100644
index 6f61ae2..0000000
--- a/web/app/guides/[slug]/GuideContent.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client"
-
-import type React from "react"
-import CopyableCode from "@/components/CopyableCode"
-
-function processContent(content: string): React.ReactNode[] {
-  const parts = content.split(/(```[\s\S]*?```|`[^`\n]+`)/g)
-  return parts.map((part, index) => {
-    if (part.startsWith("```") && part.endsWith("```")) {
-      const code = part.slice(3, -3).trim()
-      return <CopyableCode key={index} code={code} />
-    } else if (part.startsWith("`") && part.endsWith("`")) {
-      return (
-        <code key={index} className="bg-gray-100 text-gray-800 px-1 rounded">
-          {part.slice(1, -1)}
-        </code>
-      )
-    }
-    return <span key={index} dangerouslySetInnerHTML={{ __html: part }} />
-  })
-}
-
-export default function GuideContent({ content }: { content: string }) {
-  const processedContent = processContent(content)
-
-  return (
-    <div
-      className="prose max-w-none text-gray-900
-      [&>h1]:text-3xl [&>h1]:font-bold [&>h1]:mb-6 [&>h1]:text-gray-900
-      [&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:mt-8 [&>h2]:mb-4 [&>h2]:text-gray-900
-      [&>h3]:text-xl [&>h3]:font-semibold [&>h3]:mt-6 [&>h3]:mb-3 [&>h3]:text-gray-900
-      [&>p]:mb-4 [&>p]:text-gray-700
-      [&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4
-      [&>ul>li]:text-gray-700 [&>ul>li]:mb-2
-      [&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4
-      [&>ol>li]:text-gray-700 [&>ol>li]:mb-2
-      [&>a]:text-blue-600 [&>a:hover]:underline
-      [&>strong]:font-bold [&>strong]:text-gray-900"
-    >
-      {processedContent}
-    </div>
-  )
-}
-
diff --git a/web/app/guides/[slug]/page.tsx b/web/app/guides/[slug]/page.tsx
index 151b033..755cf8c 100644
--- a/web/app/guides/[slug]/page.tsx
+++ b/web/app/guides/[slug]/page.tsx
@@ -2,70 +2,31 @@ import fs from "fs"
 import path from "path"
 import { remark } from "remark"
 import html from "remark-html"
-import dynamic from "next/dynamic"
-
-const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
-
-const guidesDirectory = path.join(process.cwd(), "..", "guides")
 
 async function getGuideContent(slug: string) {
-  const fullPath = path.join(guidesDirectory, `${slug}.md`)
-  try {
-    const fileContents = fs.readFileSync(fullPath, "utf8")
-    const result = await remark().use(html).process(fileContents)
-    return result.toString()
-  } catch (error) {
-    console.error(`Error reading guide file: ${fullPath}`, error)
-    return "<p>Guide content not found.</p>"
-  }
+  const guidePath = path.join(process.cwd(), "..", "guides", `${slug}.md`)
+  const fileContents = fs.readFileSync(guidePath, "utf8")
+
+  const result = await remark().use(html).process(fileContents)
+  return result.toString()
 }
 
 export async function generateStaticParams() {
-  try {
-    if (fs.existsSync(guidesDirectory)) {
-      const guideFiles = fs.readdirSync(guidesDirectory)
-      return guideFiles.map((file) => ({
-        slug: file.replace(/\.md$/, ""),
-      }))
-    } else {
-      console.warn("Guides directory not found. No static params generated.")
-      return []
-    }
-  } catch (error) {
-    console.error("Error generating static params for guides:", error)
-    return []
-  }
-}
-
-function wrapCodeBlocksWithCopyable(content: string) {
-  const codeBlockRegex = /<pre><code>([\s\S]*?)<\/code><\/pre>/g
-  return content.replace(codeBlockRegex, (match, code) => {
-    return `<CopyableCode code={\`${code.replace(/`/g, "\\`")}\`} />`
-  })
+  const guideFiles = fs.readdirSync(path.join(process.cwd(), "..", "guides"))
+  return guideFiles.map((file) => ({
+    slug: file.replace(/\.md$/, ""),
+  }))
 }
 
 export default async function GuidePage({ params }: { params: { slug: string } }) {
-  let guideContent = await getGuideContent(params.slug)
-  guideContent = wrapCodeBlocksWithCopyable(guideContent)
+  const guideContent = await getGuideContent(params.slug)
 
   return (
-    <div className="min-h-screen bg-white">
-      <div className="container mx-auto px-4 py-16 max-w-3xl">
-        <div
-          className="prose prose-gray max-w-none
-            [&>h1]:text-3xl [&>h1]:font-bold [&>h1]:text-gray-900 [&>h1]:mb-6
-            [&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:text-gray-900 [&>h2]:mt-8 [&>h2]:mb-4
-            [&>h3]:text-xl [&>h3]:font-semibold [&>h3]:text-gray-900 [&>h3]:mt-6 [&>h3]:mb-3
-            [&>p]:text-gray-700 [&>p]:mb-4
-            [&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4
-            [&>ul>li]:text-gray-700 [&>ul>li]:mb-2
-            [&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4
-            [&>ol>li]:text-gray-700 [&>ol>li]:mb-2
-            [&>a]:text-blue-600 [&>a:hover]:underline
-            [&>strong]:font-bold [&>strong]:text-gray-900"
-          dangerouslySetInnerHTML={{ __html: guideContent }}
-        />
-      </div>
+    <div className="container mx-auto px-4 py-16 max-w-3xl bg-white text-gray-900">
+      <div
+        className="prose prose-lg prose-gray max-w-none prose-pre:bg-gray-100 prose-pre:text-gray-900"
+        dangerouslySetInnerHTML={{ __html: guideContent }}
+      />
     </div>
   )
 }