diff --git a/web/app/guides/[slug]/GuideContent.tsx b/web/app/guides/[slug]/GuideContent.tsx
index 0aee350..97288c8 100644
--- a/web/app/guides/[slug]/GuideContent.tsx
+++ b/web/app/guides/[slug]/GuideContent.tsx
@@ -5,13 +5,19 @@ import { useState, useEffect } from "react"
 import CopyableCode from "@/components/CopyableCode"
 
 function processContent(content: string): React.ReactNode[] {
-  const parts = content.split(/(```[\s\S]*?```)/g)
+  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 <div key={index} dangerouslySetInnerHTML={{ __html: part }} />
+    return <span key={index} dangerouslySetInnerHTML={{ __html: part }} />
   })
 }
 
@@ -25,15 +31,16 @@ export default function GuideContent({ content }: { content: string }) {
   return (
     <div
       className="prose prose-gray max-w-none bg-white text-gray-900
-      [&>h1]:text-3xl [&>h1]:sm:text-4xl [&>h1]:font-bold [&>h1]:mb-6
-      [&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:mt-8 [&>h2]:mb-4
-      [&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3
+      [&>h1]:text-3xl [&>h1]:sm:text-4xl [&>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-800
+      [&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3 [&>h3]:text-gray-700
       [&>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"
+      [&>a]:text-blue-600 [&>a:hover]:underline
+      [&>strong]:font-bold [&>strong]:text-gray-900"
     >
       {processedContent}
     </div>
diff --git a/web/components/CopyableCode.tsx b/web/components/CopyableCode.tsx
index d043f96..9baee04 100644
--- a/web/components/CopyableCode.tsx
+++ b/web/components/CopyableCode.tsx
@@ -22,13 +22,13 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
   }
 
   return (
-    <div className="relative">
-      <pre className="bg-gray-100 p-4 rounded-md overflow-x-auto">
-        <code>{code}</code>
+    <div className="relative my-4">
+      <pre className="bg-gray-100 text-gray-800 p-4 rounded-md overflow-x-auto">
+        <code className="text-sm">{code}</code>
       </pre>
       <button
         onClick={copyToClipboard}
-        className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
+        className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-200 transition-colors"
         aria-label="Copy to clipboard"
       >
         {isCopied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5 text-gray-500" />}
@@ -39,3 +39,4 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
 
 export default CopyableCode
 
+