diff --git a/docs/src/app/[locale]/[type]/[...slug]/page.tsx b/docs/src/app/[locale]/[type]/[...slug]/page.tsx
index 5d0fa0d..15a5933 100644
--- a/docs/src/app/[locale]/[type]/[...slug]/page.tsx
+++ b/docs/src/app/[locale]/[type]/[...slug]/page.tsx
@@ -17,6 +17,7 @@ import { PageNavigation } from '@/components/layout/PageNavigation'
 import { MainTitle, SubTitle } from '@/components/blocks/HeadingBlock'
 import { SEO } from '@/components/layout/SEO'
 import { NotFound } from '@/components/layout/NotFound'
+import { TextToSpeech } from '@/components/tts/TextToSpeech'
 
 export const runtime = 'edge'
 
@@ -61,27 +62,31 @@ export default function ContentPage({ params }: { params: Promise<{ locale: stri
         <Navigation key={type} locale={locale} items={navigationItems} />
         <div className="flex-1 flex py-4 w-full">
           <PostContainer>
-            <PageBreadcrumb type={type} slug={slug} locale={locale} />
-            {process.env.NEXT_PUBLIC_AKIRADOCS_EDIT_MODE === 'true' && (
-              <Button
-                onClick={handleEdit}
-                variant="outline"
-                size="sm"
-                className="absolute top-0 right-6 flex items-center gap-2 text-muted-foreground hover:text-foreground"
-              >
-                <Edit2 className="w-4 h-4" />
-                Edit
-              </Button>
-            )}
-
-            <MainTitle>{post.title}</MainTitle>
-            <SubTitle>{post.description}</SubTitle>
-            {post.blocks.map((block) => (
-              block.content !== post.title && (
-                <BlockRenderer key={block.id} block={block} />
-              )
-            ))}
-            <PageNavigation prev={prev} next={next} locale={locale}  />
+            <div className="relative">
+              <PageBreadcrumb type={type} slug={slug} locale={locale} />
+              <div className="absolute top-0 right-0 flex gap-2">
+                {process.env.NEXT_PUBLIC_AKIRADOCS_EDIT_MODE === 'true' && (
+                  <Button
+                    onClick={handleEdit}
+                    variant="outline"
+                    size="sm"
+                    className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
+                  >
+                    <Edit2 className="w-4 h-4" />
+                    Edit
+                  </Button>
+                )}
+                <TextToSpeech blocks={post.blocks} />
+              </div>
+              <MainTitle>{post.title}</MainTitle>
+              <SubTitle>{post.description}</SubTitle>
+              {post.blocks.map((block) => (
+                block.content !== post.title && (
+                  <BlockRenderer key={block.id} block={block} />
+                )
+              ))}
+              <PageNavigation prev={prev} next={next} locale={locale}  />
+            </div>
           </PostContainer>
           <TableOfContents publishDate={post.publishDate} modifiedDate={post.modifiedDate} author={post.author} />
         </div>
diff --git a/docs/src/components/tts/TextToSpeech.tsx b/docs/src/components/tts/TextToSpeech.tsx
new file mode 100644
index 0000000..aef01d1
--- /dev/null
+++ b/docs/src/components/tts/TextToSpeech.tsx
@@ -0,0 +1,210 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Volume2, VolumeX, Settings2 } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+interface TextToSpeechProps {
+  blocks: any[];
+}
+
+// Define fixed voice options with clearer voices
+const VOICE_OPTIONS = [
+  { name: 'Samantha', lang: 'en-US' },      // Clear, natural female voice
+  { name: 'Daniel', lang: 'en-GB' },        // Clear male voice
+  { name: 'Karen', lang: 'en-AU' },         // Clear Australian female voice
+  { name: 'Moira', lang: 'en-IE' }          // Clear Irish female voice
+];
+
+export function TextToSpeech({ blocks }: TextToSpeechProps) {
+  const [mounted, setMounted] = useState(false);
+  const [speaking, setSpeaking] = useState(false);
+  const [selectedVoiceIndex, setSelectedVoiceIndex] = useState(0);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const getVoice = useCallback(() => {
+    if (typeof window === 'undefined') return null;
+    const voices = window.speechSynthesis.getVoices();
+    const preferredVoice = voices.find(voice => 
+      voice.name.includes(VOICE_OPTIONS[selectedVoiceIndex].name)
+    );
+    return preferredVoice || voices[0];
+  }, [selectedVoiceIndex]);
+
+  const generateSpeechText = (blocks: any[]) => {
+    return blocks
+      .filter(block => block.content !== undefined)
+      .map(block => {
+        try {
+          switch (block.type) {
+            case 'heading':
+              return `${block.content}. `;
+            
+            case 'paragraph':
+              return `${block.content} `;
+            
+            case 'list':
+              const listItems = Array.isArray(block.content) ? block.content : block.content.split('\n').filter((item: string) => item.trim());
+              return `${listItems.join(', ')}`;
+            
+            case 'checkList':
+              if (block.metadata?.checkedItems) {
+                return `Checklist: ${block.metadata.checkedItems.map((item: { text: string; checked: boolean }) => 
+                  `${item.text} (${item.checked ? 'checked' : 'unchecked'})`
+                ).join(', ')}`;
+              }
+              return '';
+            
+            case 'toggleList':
+              if (block.metadata?.items) {
+                return `Toggle list: ${block.metadata.items.map((item: { title: string; content: string }) => 
+                  `${item.title}: ${item.content}`
+                ).join('. ')}`;
+              }
+              return '';
+            
+            case 'blockquote':
+              return `Quote: ${block.content}. `;
+            
+            case 'code':
+              const lang = block.metadata?.language || 'code';
+              const filename = block.metadata?.filename ? ` in file ${block.metadata.filename}` : '';
+              return `Code block${filename} in ${lang}. `;
+            
+            case 'table':
+              try {
+                const tableData = typeof block.content === 'string' 
+                  ? JSON.parse(block.content)
+                  : block.content;
+                return `Table with ${tableData.rows?.length || 0} rows and ${tableData.columns?.length || 0} columns. `;
+              } catch {
+                return 'Table content. ';
+              }
+            
+            case 'image':
+              try {
+                const imageContent = typeof block.content === 'string' 
+                  ? JSON.parse(block.content)
+                  : block.content;
+                const caption = imageContent.caption ? `: ${imageContent.caption}` : '';
+                const alt = imageContent.alt ? ` showing ${imageContent.alt}` : '';
+                return `Image ${alt} ${caption}. `;
+              } catch {
+                return 'Image. ';
+              }
+            
+            case 'video':
+              const videoCaption = block.metadata?.caption ? `: ${block.metadata.caption}` : '';
+              return `Video for ${videoCaption}. `;
+            
+            case 'audio':
+              const audioCaption = block.metadata?.caption ? `: ${block.metadata.caption}` : '';
+              return `Audio for ${audioCaption}. `;
+            
+            case 'file':
+              const fileName = block.metadata?.filename || 'file';
+              return `Downloadable file called ${fileName}. `;
+            
+            case 'emoji':
+              return '';
+            
+            case 'callout':
+              const type = block.metadata?.type || 'info';
+              const title = block.metadata?.title ? `, titled ${block.metadata.title}` : '';
+              return `${type} callout${title}: ${block.content}. `;
+            
+            case 'divider':
+              return '';
+            
+            default:
+              return '';
+          }
+        } catch (error) {
+          console.error(`Error processing block of type ${block.type}:`, error);
+          return '';
+        }
+      })
+      .join(' ');
+  };
+
+  const speak = useCallback(() => {
+    if (typeof window === 'undefined') return;
+
+    window.speechSynthesis.cancel();
+    const text = generateSpeechText(blocks);
+    const utterance = new SpeechSynthesisUtterance(text);
+    
+    const voice = getVoice();
+    if (voice) utterance.voice = voice;
+    
+    utterance.rate = 0.9;
+    utterance.pitch = 1;
+    utterance.volume = 1;
+
+    utterance.onstart = () => setSpeaking(true);
+    utterance.onend = () => setSpeaking(false);
+    utterance.onerror = () => setSpeaking(false);
+    
+    window.speechSynthesis.speak(utterance);
+  }, [blocks, getVoice]);
+
+  const stop = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      window.speechSynthesis.cancel();
+      setSpeaking(false);
+    }
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="flex items-center gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Settings2 className="w-4 h-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {VOICE_OPTIONS.map((voice, index) => (
+            <DropdownMenuItem
+              key={voice.lang}
+              onClick={() => setSelectedVoiceIndex(index)}
+              className={selectedVoiceIndex === index ? "bg-accent" : ""}
+            >
+              {voice.name}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
+      <Button
+        onClick={speaking ? stop : speak}
+        variant="outline"
+        size="sm"
+        className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
+      >
+        {speaking ? (
+          <>
+            <VolumeX className="w-4 h-4" />
+            Stop Reading
+          </>
+        ) : (
+          <>
+            <Volume2 className="w-4 h-4" />
+            Read Content
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/akiradocs/package-lock.json b/packages/akiradocs/package-lock.json
index 3ce768e..0c5b59b 100644
--- a/packages/akiradocs/package-lock.json
+++ b/packages/akiradocs/package-lock.json
@@ -15,8 +15,8 @@
         "@heroicons/react": "^2.1.5",
         "@mdx-js/loader": "^3.1.0",
         "@mdx-js/react": "^3.1.0",
-        "@mlc-ai/web-llm": "^0.2.76",
         "@million/lint": "^1.0.12",
+        "@mlc-ai/web-llm": "^0.2.76",
         "@next/mdx": "^15.0.1",
         "@radix-ui/react-accordion": "^1.2.1",
         "@radix-ui/react-avatar": "^1.1.1",
@@ -32,6 +32,8 @@
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-switch": "^1.1.1",
         "@radix-ui/react-tabs": "^1.1.1",
+        "@radix-ui/react-toggle": "^1.1.0",
+        "@radix-ui/react-toggle-group": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.3",
         "ai": "^4.0.2",
         "class-variance-authority": "^0.7.0",
@@ -1449,10 +1451,9 @@
       }
     },
     "node_modules/@mlc-ai/web-llm": {
-      "version": "0.2.75",
-      "resolved": "https://registry.npmjs.org/@mlc-ai/web-llm/-/web-llm-0.2.75.tgz",
-      "integrity": "sha512-U3ytE38mzIR/mDGwEl3nbutoIRFyPrsKAwu4A7N8rmHxLtb+gIEu4pfVPQb8uhvrDTsJz2L0zuCE5vRdIf1DUQ==",
-      "license": "Apache-2.0",
+      "version": "0.2.76",
+      "resolved": "https://registry.npmjs.org/@mlc-ai/web-llm/-/web-llm-0.2.76.tgz",
+      "integrity": "sha512-iUQXiGSCjfaiG8UDE2ZlH61DTGABXKTduiZecIMAXP9XV4LzFEeNRL+76QXstaYkBLvJvgfmKzO/ImJgdJe9zw==",
       "dependencies": {
         "loglevel": "^1.9.1"
       }
@@ -1745,100 +1746,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@mdx-js/loader": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-3.1.0.tgz",
-      "integrity": "sha512-xU/lwKdOyfXtQGqn3VnJjlDrmKXEvMi1mgYxVmukEUtVycIz1nh7oQ40bKTd4cA7rLStqu0740pnhGYxGoqsCg==",
-      "dependencies": {
-        "@mdx-js/mdx": "^3.0.0",
-        "source-map": "^0.7.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      },
-      "peerDependencies": {
-        "webpack": ">=5"
-      },
-      "peerDependenciesMeta": {
-        "webpack": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mdx-js/mdx": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.0.tgz",
-      "integrity": "sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "@types/estree-jsx": "^1.0.0",
-        "@types/hast": "^3.0.0",
-        "@types/mdx": "^2.0.0",
-        "collapse-white-space": "^2.0.0",
-        "devlop": "^1.0.0",
-        "estree-util-is-identifier-name": "^3.0.0",
-        "estree-util-scope": "^1.0.0",
-        "estree-walker": "^3.0.0",
-        "hast-util-to-jsx-runtime": "^2.0.0",
-        "markdown-extensions": "^2.0.0",
-        "recma-build-jsx": "^1.0.0",
-        "recma-jsx": "^1.0.0",
-        "recma-stringify": "^1.0.0",
-        "rehype-recma": "^1.0.0",
-        "remark-mdx": "^3.0.0",
-        "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.0.0",
-        "source-map": "^0.7.0",
-        "unified": "^11.0.0",
-        "unist-util-position-from-estree": "^2.0.0",
-        "unist-util-stringify-position": "^4.0.0",
-        "unist-util-visit": "^5.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/@mdx-js/react": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz",
-      "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==",
-      "dependencies": {
-        "@types/mdx": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16",
-        "react": ">=16"
-      }
-    },
-    "node_modules/@mlc-ai/web-llm": {
-      "version": "0.2.76",
-      "resolved": "https://registry.npmjs.org/@mlc-ai/web-llm/-/web-llm-0.2.76.tgz",
-      "integrity": "sha512-iUQXiGSCjfaiG8UDE2ZlH61DTGABXKTduiZecIMAXP9XV4LzFEeNRL+76QXstaYkBLvJvgfmKzO/ImJgdJe9zw==",
-      "dependencies": {
-        "loglevel": "^1.9.1"
-      }
-    },
     "node_modules/@next/env": {
       "version": "15.0.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-15.0.3.tgz",
@@ -2971,6 +2878,72 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.0.tgz",
+      "integrity": "sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.0.tgz",
+      "integrity": "sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-toggle": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.4.tgz",
diff --git a/packages/akiradocs/package.json b/packages/akiradocs/package.json
index 9d4b8a3..2f4677e 100644
--- a/packages/akiradocs/package.json
+++ b/packages/akiradocs/package.json
@@ -19,8 +19,8 @@
     "@heroicons/react": "^2.1.5",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@mlc-ai/web-llm": "^0.2.76",
     "@million/lint": "^1.0.12",
+    "@mlc-ai/web-llm": "^0.2.76",
     "@next/mdx": "^15.0.1",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.1",
@@ -36,6 +36,8 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "ai": "^4.0.2",
     "class-variance-authority": "^0.7.0",
diff --git a/packages/akiradocs/src/app/[locale]/[type]/[...slug]/page.tsx b/packages/akiradocs/src/app/[locale]/[type]/[...slug]/page.tsx
index 5d0fa0d..15a5933 100644
--- a/packages/akiradocs/src/app/[locale]/[type]/[...slug]/page.tsx
+++ b/packages/akiradocs/src/app/[locale]/[type]/[...slug]/page.tsx
@@ -17,6 +17,7 @@ import { PageNavigation } from '@/components/layout/PageNavigation'
 import { MainTitle, SubTitle } from '@/components/blocks/HeadingBlock'
 import { SEO } from '@/components/layout/SEO'
 import { NotFound } from '@/components/layout/NotFound'
+import { TextToSpeech } from '@/components/tts/TextToSpeech'
 
 export const runtime = 'edge'
 
@@ -61,27 +62,31 @@ export default function ContentPage({ params }: { params: Promise<{ locale: stri
         <Navigation key={type} locale={locale} items={navigationItems} />
         <div className="flex-1 flex py-4 w-full">
           <PostContainer>
-            <PageBreadcrumb type={type} slug={slug} locale={locale} />
-            {process.env.NEXT_PUBLIC_AKIRADOCS_EDIT_MODE === 'true' && (
-              <Button
-                onClick={handleEdit}
-                variant="outline"
-                size="sm"
-                className="absolute top-0 right-6 flex items-center gap-2 text-muted-foreground hover:text-foreground"
-              >
-                <Edit2 className="w-4 h-4" />
-                Edit
-              </Button>
-            )}
-
-            <MainTitle>{post.title}</MainTitle>
-            <SubTitle>{post.description}</SubTitle>
-            {post.blocks.map((block) => (
-              block.content !== post.title && (
-                <BlockRenderer key={block.id} block={block} />
-              )
-            ))}
-            <PageNavigation prev={prev} next={next} locale={locale}  />
+            <div className="relative">
+              <PageBreadcrumb type={type} slug={slug} locale={locale} />
+              <div className="absolute top-0 right-0 flex gap-2">
+                {process.env.NEXT_PUBLIC_AKIRADOCS_EDIT_MODE === 'true' && (
+                  <Button
+                    onClick={handleEdit}
+                    variant="outline"
+                    size="sm"
+                    className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
+                  >
+                    <Edit2 className="w-4 h-4" />
+                    Edit
+                  </Button>
+                )}
+                <TextToSpeech blocks={post.blocks} />
+              </div>
+              <MainTitle>{post.title}</MainTitle>
+              <SubTitle>{post.description}</SubTitle>
+              {post.blocks.map((block) => (
+                block.content !== post.title && (
+                  <BlockRenderer key={block.id} block={block} />
+                )
+              ))}
+              <PageNavigation prev={prev} next={next} locale={locale}  />
+            </div>
           </PostContainer>
           <TableOfContents publishDate={post.publishDate} modifiedDate={post.modifiedDate} author={post.author} />
         </div>
diff --git a/packages/akiradocs/src/components/blocks/BlockquoteBlock.tsx b/packages/akiradocs/src/components/blocks/BlockquoteBlock.tsx
index 395ac10..4873b24 100644
--- a/packages/akiradocs/src/components/blocks/BlockquoteBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/BlockquoteBlock.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { cn } from "@/lib/utils";
 
 interface BlockquoteProps {
@@ -10,17 +10,64 @@ interface BlockquoteProps {
     italic?: boolean;
     underline?: boolean;
   };
+  isEditing?: boolean;
+  onUpdate?: (content: string) => void;
 }
 
-export function Blockquote({ id, children, align = 'left', styles }: BlockquoteProps) {
+export function Blockquote({ id, children, align = 'left', styles, isEditing, onUpdate }: BlockquoteProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
+
+  const adjustHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = '0px';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+
+  useEffect(() => {
+    if (isEditing) {
+      adjustHeight();
+    }
+  }, [isEditing, children]);
+
+  const commonStyles = cn(
+    styles?.bold && 'font-bold',
+    styles?.italic && 'italic',
+    styles?.underline && 'underline'
+  );
+
+  if (isEditing) {
+    return (
+      <div className={cn("border-l-4 border-border pl-4 text-muted-foreground", alignClass)}>
+        <textarea
+          ref={textareaRef}
+          value={children as string}
+          onChange={(e) => {
+            onUpdate?.(e.target.value);
+            adjustHeight();
+          }}
+          className={cn(
+            "w-full bg-transparent resize-none focus:outline-none",
+            "block p-0 m-0",
+            "leading-[inherit]",
+            commonStyles
+          )}
+        />
+      </div>
+    );
+  }
+
   return (
-    <blockquote id={id} className={cn(
-      `border-l-4 border-border pl-4 text-muted-foreground mb-6 py-1 ${alignClass}`,
-      styles?.bold && 'font-bold',
-      styles?.italic && 'italic',
-      styles?.underline && 'underline'
-    )}>
+    <blockquote 
+      id={id} 
+      className={cn(
+        "border-l-4 border-border pl-4 text-muted-foreground",
+        alignClass,
+        commonStyles
+      )}
+    >
       {children}
     </blockquote>
   );
diff --git a/packages/akiradocs/src/components/blocks/CalloutBlock.tsx b/packages/akiradocs/src/components/blocks/CalloutBlock.tsx
index b0b3589..62532c7 100644
--- a/packages/akiradocs/src/components/blocks/CalloutBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/CalloutBlock.tsx
@@ -1,6 +1,7 @@
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Info, AlertTriangle, CheckCircle, XCircle } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { useEffect, useRef } from 'react'
 
 type CalloutType = 'info' | 'warning' | 'success' | 'error'
 
@@ -15,6 +16,8 @@ interface CalloutProps {
     italic?: boolean;
     underline?: boolean;
   };
+  isEditing?: boolean;
+  onUpdate?: (content: string) => void;
 }
 
 const calloutStyles: Record<CalloutType, { icon: React.ElementType; className: string }> = {
@@ -24,9 +27,23 @@ const calloutStyles: Record<CalloutType, { icon: React.ElementType; className: s
   error: { icon: XCircle, className: 'border-destructive/20 bg-destructive/5' }
 }
 
-export function Callout({ id, type, title, children, align = 'left', styles }: CalloutProps) {
+export function Callout({ id, type, title, children, align = 'left', styles, isEditing, onUpdate }: CalloutProps) {
   const { icon: Icon, className } = calloutStyles[type]
-  console.debug(id)
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const adjustHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = '0px';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+
+  useEffect(() => {
+    if (isEditing) {
+      adjustHeight();
+    }
+  }, [isEditing, children]);
 
   return (
     <Alert className={cn(
@@ -54,7 +71,25 @@ export function Callout({ id, type, title, children, align = 'left', styles }: C
       </div>
       <div className="flex-1">
         {title && <AlertTitle>{title}</AlertTitle>}
-        <AlertDescription>{children}</AlertDescription>
+        <AlertDescription>
+          {isEditing ? (
+            <textarea
+              ref={textareaRef}
+              value={children as string}
+              onChange={(e) => {
+                onUpdate?.(e.target.value);
+                adjustHeight();
+              }}
+              className={cn(
+                "w-full bg-transparent resize-none focus:outline-none",
+                "block p-0 m-0",
+                "leading-[inherit]"
+              )}
+            />
+          ) : (
+            children
+          )}
+        </AlertDescription>
       </div>
     </Alert>
   )
diff --git a/packages/akiradocs/src/components/blocks/CodeBlock.tsx b/packages/akiradocs/src/components/blocks/CodeBlock.tsx
index 4c24b69..3c8e19b 100644
--- a/packages/akiradocs/src/components/blocks/CodeBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/CodeBlock.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Check, Copy } from 'lucide-react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { useAnalytics } from '@/hooks/useAnalytics';
 
 interface CodeBlockProps {
   id?: string;
@@ -10,7 +9,9 @@ interface CodeBlockProps {
   language?: string;
   filename?: string;
   showLineNumbers?: boolean;
-  align?: 'left' | 'center' | 'right'; // Add align prop
+  align?: 'left' | 'center' | 'right';
+  isEditing?: boolean;
+  onUpdate?: (content: string) => void;
 }
 
 export function CodeBlock({
@@ -19,22 +20,50 @@ export function CodeBlock({
   language = 'typescript',
   filename,
   showLineNumbers = true,
-  align = 'left'
+  align = 'left',
+  isEditing = false,
+  onUpdate
 }: CodeBlockProps) {
   const [copied, setCopied] = useState(false);
   const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
-  const { track } = useAnalytics()
 
-  const copyToClipboard = async () => { 
-    track('copy_code_button_click', {
-      code_type: 'code_block',
-      code_text: code
-    })
+  const copyToClipboard = async () => {
     await navigator.clipboard.writeText(code);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
 
+  if (!isEditing) {
+    return (
+      <div id={id} className={`relative group rounded-lg overflow-hidden py-1 ${alignClass}`}>
+        {filename && (
+          <div className="bg-secondary px-4 py-2 text-sm text-secondary-foreground">
+            {filename}
+          </div>
+        )}
+        
+        <button
+          onClick={copyToClipboard}
+          className="absolute right-2 top-2 p-2 rounded-lg bg-secondary text-secondary-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+        >
+          {copied ? <Check size={16} /> : <Copy size={16} />}
+        </button>
+
+        <SyntaxHighlighter
+          language={language}
+          style={oneDark}
+          showLineNumbers={showLineNumbers}
+          customStyle={{
+            margin: 0,
+            borderRadius: filename ? '0' : '0.5rem'
+          }}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    );
+  }
+
   return (
     <div id={id} className={`relative group rounded-lg overflow-hidden py-1 ${alignClass}`}>
       {filename && (
@@ -50,17 +79,52 @@ export function CodeBlock({
         {copied ? <Check size={16} /> : <Copy size={16} />}
       </button>
 
-      <SyntaxHighlighter
-        language={language}
-        style={oneDark}
-        showLineNumbers={showLineNumbers}
-        customStyle={{
-          margin: 0,
-          borderRadius: filename ? '0' : '0.5rem'
-        }}
-      >
-        {code}
-      </SyntaxHighlighter>
+      <div className="relative">
+        <div className="pointer-events-none">
+          <SyntaxHighlighter
+            language={language}
+            style={oneDark}
+            showLineNumbers={showLineNumbers}
+            customStyle={{
+              margin: 0,
+              padding: '1rem',
+              borderRadius: filename ? '0' : '0.5rem'
+            }}
+          >
+            {code}
+          </SyntaxHighlighter>
+        </div>
+
+        <pre
+          contentEditable
+          suppressContentEditableWarning
+          onBlur={(e) => {
+            const target = e.target as HTMLElement;
+            if (!target) return;
+            
+            let content = target.innerHTML;
+            content = content.replace(/<div><br><\/div>/g, '\n')
+            content = content.replace(/<div>/g, '\n')
+            content = content.replace(/<\/div>/g, '')
+            content = content.replace(/<br>/g, '\n')
+            content = content.replace(/<br\/>/g, '\n')
+            content = content.replace(/&nbsp;/g, ' ')
+            content = content.replace(/\n\n+/g, '\n\n')
+            content = content.trim()
+            
+            onUpdate?.(content);
+          }}
+          className="absolute inset-0 m-0 whitespace-pre-wrap bg-[#282c34] focus:bg-[#282c34] focus:opacity-100 opacity-0 focus:outline-none"
+          style={{
+            ...oneDark['pre[class*="language-"]'],
+            ...oneDark['code[class*="language-"]'],
+            padding: '1rem',
+            margin: 0,
+            lineHeight: 'inherit',
+          }}
+          dangerouslySetInnerHTML={{ __html: code.replace(/\n/g, '<br>') }}
+        />
+      </div>
     </div>
   );
 }
diff --git a/packages/akiradocs/src/components/blocks/HeadingBlock.tsx b/packages/akiradocs/src/components/blocks/HeadingBlock.tsx
index 94c0a0f..a93c186 100644
--- a/packages/akiradocs/src/components/blocks/HeadingBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/HeadingBlock.tsx
@@ -11,9 +11,11 @@ interface HeadingProps {
     italic?: boolean;
     underline?: boolean;
   };
+  isEditing?: boolean;
+  onUpdate?: (content: string) => void;
 }
 
-export function HeadingTitle({ id, level, children, align = 'left', styles }: HeadingProps) {
+export function HeadingTitle({ id, level, children, align = 'left', styles, isEditing, onUpdate }: HeadingProps) {
   const Tag = `h${level}` as keyof JSX.IntrinsicElements;
   const sizeClasses = {
     1: 'text-4xl',
@@ -25,6 +27,28 @@ export function HeadingTitle({ id, level, children, align = 'left', styles }: He
   };
   const alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : '';
 
+  if (isEditing) {
+    return (
+      <div
+        contentEditable
+        suppressContentEditableWarning
+        onBlur={(e) => {
+          const target = e.target as HTMLElement;
+          if (!target) return;
+          onUpdate?.(target.textContent || '');
+        }}
+        className={cn(
+          `font-bold mb-2 py-4 ${sizeClasses[level as keyof typeof sizeClasses]} ${alignClass}`,
+          'focus:outline-none rounded-md',
+          styles?.italic && 'italic',
+          styles?.underline && 'underline'
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+
   return (
     <Tag id={id} className={cn(
       `font-bold mb-2 py-4 ${sizeClasses[level as keyof typeof sizeClasses]} ${alignClass}`,
diff --git a/packages/akiradocs/src/components/blocks/ImageBlock.tsx b/packages/akiradocs/src/components/blocks/ImageBlock.tsx
index c6009f6..1c465d1 100644
--- a/packages/akiradocs/src/components/blocks/ImageBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/ImageBlock.tsx
@@ -1,53 +1,153 @@
-import { cn } from "@/lib/utils";
+"use client"
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { ImagePlus } from 'lucide-react'
+import { useState } from 'react'
 
 interface ImageBlockProps {
-  id?: string;
-  src: string;
-  alt: string;
-  caption?: string;
-  size?: 'small' | 'medium' | 'large' | 'full';
-  position?: 'left' | 'center' | 'right';
-  align?: 'left' | 'center' | 'right';
-  styles?: {
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-  };
+  content: string
+  id: string
+  onUpdate?: (content: string) => void
+  isEditing?: boolean
+  metadata?: {
+    alt?: string
+    caption?: string
+    alignment?: 'left' | 'center' | 'right'
+    size?: 'small' | 'medium' | 'large' | 'full'
+  }
 }
 
-export function Image({ id, src, alt, caption, size = 'medium', position = 'center', align = 'left', styles }: ImageBlockProps) {
-  const sizeClasses = {
-    small: 'w-1/3',
-    medium: 'w-2/3',
-    large: 'w-5/6',
-    full: 'w-full',
-  };
+export function ImageBlock({ content, id, onUpdate, isEditing, metadata }: ImageBlockProps) {
+  const [isHovered, setIsHovered] = useState(false)
 
-  const positionClasses = {
-    left: 'mr-auto',
-    center: '', // Remove mx-auto for center
-    right: 'ml-auto',
-  };
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation()
+    const file = e.target.files?.[0]
+    if (!file) return
 
-  const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
+    const url = URL.createObjectURL(file)
+    
+    const imageContent = JSON.stringify({
+      url,
+      alt: metadata?.alt || file.name,
+      caption: metadata?.caption,
+      alignment: metadata?.alignment || 'center',
+      size: metadata?.size || 'medium'
+    })
 
-  return (
-    <figure id={id} className={`my-8 py-1 ${positionClasses[position]} ${alignClass}`}>
-      <img
-        src={src}
-        alt={alt}
-        className={`rounded-lg ${sizeClasses[size]} ${alignClass}`}
+    onUpdate?.(imageContent)
+  }
+
+  // Helper function to parse content
+  const parseImageContent = (content: string) => {
+    try {
+      // Try parsing as JSON first
+      return typeof content === 'string' ? JSON.parse(content) : content
+    } catch {
+      // If parsing fails, assume it's a direct URL string
+      return {
+        url: content,
+        alt: metadata?.alt || '',
+        caption: metadata?.caption || '',
+        alignment: metadata?.alignment || 'center',
+        size: metadata?.size || 'medium'
+      }
+    }
+  }
+
+  const UploadButton = () => (
+    <div className="text-center">
+      <input
+        type="file"
+        id={`image-upload-${id}`}
+        className="hidden"
+        accept="image/*"
+        onChange={handleFileUpload}
       />
-      {caption && (
-        <figcaption className={cn(
-          `mt-2 text-sm text-${align} text-muted-foreground`,
-          styles?.bold && 'font-bold',
-          styles?.italic && 'italic',
-          styles?.underline && 'underline'
-        )}>
-          {caption}
+      <div className="flex flex-col items-center gap-2">
+        <Button
+          variant="ghost"
+          className="w-full justify-start h-auto py-6 px-8 hover:bg-accent flex flex-col items-center gap-2"
+          onClick={(e) => {
+            e.stopPropagation()
+            document.getElementById(`image-upload-${id}`)?.click()
+          }}
+        >
+          <ImagePlus className="h-8 w-8 text-muted-foreground" />
+          <span className="font-medium">Upload Image</span>
+          <p className="text-sm text-muted-foreground">
+            Click to upload or drag and drop
+          </p>
+        </Button>
+      </div>
+    </div>
+  )
+
+  if (!content && isEditing) {
+    return (
+      <div className="flex items-center justify-center border-2 border-dashed border-muted-foreground/25 rounded-lg my-4">
+        <UploadButton />
+      </div>
+    )
+  }
+
+  const imageContent = parseImageContent(content)
+
+  return (
+    <figure 
+      className={cn(
+        "my-4 relative group",
+        imageContent.alignment === 'left' && "text-left",
+        imageContent.alignment === 'center' && "text-center",
+        imageContent.alignment === 'right' && "text-right",
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="relative inline-block">
+        <img 
+          src={imageContent.url} 
+          alt={imageContent.alt} 
+          className={cn(
+            "h-auto rounded-lg",
+            imageContent.size === 'small' && "max-w-[300px]",
+            imageContent.size === 'medium' && "max-w-[500px]",
+            imageContent.size === 'large' && "max-w-[800px]",
+            imageContent.size === 'full' && "max-w-full",
+          )}
+        />
+        {isEditing && isHovered && (
+          <div 
+            className="absolute inset-0 bg-black/50 flex items-center justify-center rounded-lg transition-opacity"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <input
+              type="file"
+              id={`image-change-${id}`}
+              className="hidden"
+              accept="image/*"
+              onChange={handleFileUpload}
+            />
+            <Button
+              variant="secondary"
+              className="gap-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                document.getElementById(`image-change-${id}`)?.click()
+              }}
+            >
+              <ImagePlus className="h-4 w-4" />
+              Change Image
+            </Button>
+          </div>
+        )}
+      </div>
+      {imageContent.caption && (
+        <figcaption className="mt-2 text-sm text-muted-foreground italic">
+          {imageContent.caption}
         </figcaption>
       )}
     </figure>
-  );
+  )
 }
diff --git a/packages/akiradocs/src/components/blocks/ListBlock.tsx b/packages/akiradocs/src/components/blocks/ListBlock.tsx
index 2f4b719..1e337d3 100644
--- a/packages/akiradocs/src/components/blocks/ListBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/ListBlock.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { cn } from "@/lib/utils";
 
 interface ListProps {
   id?: string;
-  items: string[];
+  content: string;
   listType?: 'ordered' | 'unordered';
   align?: 'left' | 'center' | 'right';
   styles?: {
@@ -11,23 +11,230 @@ interface ListProps {
     italic?: boolean;
     underline?: boolean;
   };
+  isEditing?: boolean;
+  onUpdate?: (content: string) => void;
 }
 
-export function List({ id, items, listType = 'unordered', align = 'left', styles }: ListProps) {
-  const Tag = listType === 'ordered' ? 'ol' : 'ul';
-  const listStyle = listType === 'ordered' ? 'list-decimal' : 'list-disc';
-  const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
+export function List({
+  id,
+  content,
+  listType = 'unordered',
+  align = 'left',
+  styles,
+  isEditing,
+  onUpdate
+}: ListProps) {
+  const [isActive, setIsActive] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Handle click to edit
+  const handleClick = () => {
+    if (isEditing) {
+      setIsActive(true);
+    }
+  };
+
+  const handleBlur = (e: React.FocusEvent) => {
+    // Only blur if clicking outside the component
+    if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+      setIsActive(false);
+    }
+  };
+
+  // Parse content if it's accidentally stringified
+  const parseContent = (rawContent: string): string => {
+    try {
+      // If content is a stringified array, parse it and join with newlines
+      if (rawContent.startsWith('[')) {
+        return JSON.parse(rawContent).join('\n');
+      }
+      return rawContent;
+    } catch {
+      return rawContent;
+    }
+  };
+
+  const normalizedContent = parseContent(content);
+
+  // Auto-adjust height function
+  const adjustTextareaHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = '0';  // Reset height
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+
+  // Determine if we should show the editing view
+  const showEditingView = isEditing && isActive;
+
+  // Adjust height on content change
+  useEffect(() => {
+    adjustTextareaHeight();
+  }, [normalizedContent]);
+
+  // Adjust height when switching to edit mode
+  useEffect(() => {
+    if (showEditingView) {
+      adjustTextareaHeight();
+    }
+  }, [showEditingView]);
+
+  // Format content for editing view
+  const getEditableContent = (rawContent: string): string => {
+    const items = rawContent.split('\n');
+    return items
+      .map((item, index) => 
+        listType === 'ordered' 
+          ? `${index + 1}. ${item}` 
+          : `• ${item}`
+      )
+      .join('\n');
+  };
+
+  // Parse content back to normal format when saving
+  const parseEditableContent = (editableContent: string): string => {
+    return editableContent
+      .split('\n')
+      .map(line => line.replace(/^[\d]+\.\s+/, '').replace(/^[•]\s+/, ''))
+      .join('\n');
+  };
+
+  // Handle key presses for new lines and backspace
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    const textarea = e.currentTarget;
+    const { selectionStart, selectionEnd } = textarea;
+    const currentContent = textarea.value;
+    const lines = currentContent.split('\n');
+    
+    // Find which line we're on
+    let currentLineIndex = 0;
+    let charCount = 0;
+    for (let i = 0; i < lines.length; i++) {
+      charCount += lines[i].length + 1; // +1 for newline
+      if (charCount > selectionStart) {
+        currentLineIndex = i;
+        break;
+      }
+    }
+
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      // Insert new line with proper prefix
+      const prefix = listType === 'ordered' ? `${currentLineIndex + 2}. ` : '• ';
+      const newContent = [
+        ...lines.slice(0, currentLineIndex + 1),
+        prefix,
+        ...lines.slice(currentLineIndex + 1)
+      ].join('\n');
+
+      onUpdate?.(parseEditableContent(newContent));
+    } else if (e.key === 'Backspace') {
+      const currentLine = lines[currentLineIndex];
+      const prefix = listType === 'ordered' ? `${currentLineIndex + 1}. ` : '• ';
+      
+      // If we're at the start of a line's content (right after the prefix)
+      if (currentLine === prefix || currentLine === prefix.trim()) {
+        e.preventDefault();
+        
+        // Remove the current line and update content
+        const newContent = [
+          ...lines.slice(0, currentLineIndex),
+          ...lines.slice(currentLineIndex + 1)
+        ]
+          .map((line, index) => {
+            // Reformat ordered list numbers if needed
+            if (listType === 'ordered') {
+              return line.replace(/^\d+\./, `${index + 1}.`);
+            }
+            return line;
+          })
+          .join('\n');
+
+        onUpdate?.(parseEditableContent(newContent));
+      }
+    }
+  };
+
+  // Modified content change handler
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const rawContent = parseEditableContent(e.target.value);
+    onUpdate?.(rawContent);
+  };
+
+  // Determine alignment classes
+  const alignmentClasses = {
+    left: 'text-left',
+    center: 'text-center mx-auto',
+    right: 'text-right ml-auto'
+  }[align];
+
+  // Style classes based on props
+  const textStyles = cn(
+    styles?.bold && 'font-bold',
+    styles?.italic && 'italic',
+    styles?.underline && 'underline'
+  );
+
+  if (showEditingView) {
+    return (
+      <div 
+        ref={containerRef}
+        className="relative w-full"
+        onBlur={handleBlur}
+      >
+        <textarea
+          ref={textareaRef}
+          value={getEditableContent(normalizedContent)}
+          onChange={handleContentChange}
+          onKeyDown={handleKeyDown}
+          className={cn(
+            "w-full p-2 bg-transparent",
+            "resize-none focus:outline-none",
+            "border rounded-md",
+            textStyles,
+            "min-h-[1.5em] overflow-hidden",
+          )}
+          placeholder={`Enter ${listType === 'ordered' ? 'numbered' : 'bulleted'} list items...`}
+          autoFocus
+          rows={1}
+        />
+      </div>
+    );
+  }
+
+  // Split content into items and filter out empty lines
+  const items = normalizedContent
+    .split('\n')
+    .filter(item => item.trim() !== '');
+
+  const ListComponent = listType === 'ordered' ? 'ol' : 'ul';
+  const listStyleClass = listType === 'ordered' ? 'list-decimal' : 'list-disc';
 
   return (
-    <Tag id={id} className={`mb-6 pl-8 py-1 ${listStyle} ${alignClass}`}>
-      {items.map((item, index) => (
-        <li key={index} className={cn(
-          "mb-1",
-          styles?.bold && 'font-bold',
-          styles?.italic && 'italic',
-          styles?.underline && 'underline'
-        )}>{item}</li>
-      ))}
-    </Tag>
+    <div
+      ref={containerRef}
+      onClick={handleClick}
+      onBlur={handleBlur}
+      className="focus:outline-none cursor-text"
+      tabIndex={0}
+    >
+      <ListComponent
+        id={id}
+        className={cn(
+          "pl-8 py-1",
+          listStyleClass,
+          alignmentClasses,
+          textStyles
+        )}
+      >
+        {items.map((item, index) => (
+          <li key={index} className="mb-1">
+            {item}
+          </li>
+        ))}
+      </ListComponent>
+    </div>
   );
 }
diff --git a/packages/akiradocs/src/components/blocks/ParagraphBlock.tsx b/packages/akiradocs/src/components/blocks/ParagraphBlock.tsx
index 7e3889e..ce6b959 100644
--- a/packages/akiradocs/src/components/blocks/ParagraphBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/ParagraphBlock.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { cn } from "@/lib/utils";
 
 interface ParagraphProps {
@@ -10,19 +10,80 @@ interface ParagraphProps {
     italic?: boolean;
     underline?: boolean;
   };
+  isEditing?: boolean;
+  onUpdate?: (content: string) => void;
 }
 
-export function Paragraph({ id, children, align = 'left', styles }: ParagraphProps) {
+export function Paragraph({ 
+  id, 
+  children, 
+  align = 'left', 
+  styles = {}, 
+  isEditing,
+  onUpdate 
+}: ParagraphProps) {
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  if (isEditing) {
+    return (
+      <div
+        ref={inputRef}
+        contentEditable
+        suppressContentEditableWarning
+        onBlur={(e) => {
+          const target = e.target as HTMLElement;
+          if (!target) return;
+          
+          // Preserve newlines by getting the raw HTML and converting it properly
+          let content = target.innerHTML;
+          
+          // Normalize line breaks
+          content = content.replace(/<div><br><\/div>/g, '\n')
+          content = content.replace(/<div>/g, '\n')
+          content = content.replace(/<\/div>/g, '')
+          content = content.replace(/<br>/g, '\n')
+          content = content.replace(/<br\/>/g, '\n')
+          content = content.replace(/&nbsp;/g, ' ')
+          
+          // Clean up double newlines
+          content = content.replace(/\n\n+/g, '\n\n')
+          content = content.trim()
+          
+          onUpdate?.(content);
+        }}
+        dangerouslySetInnerHTML={{ __html: String(children).replace(/\n/g, '<br>') }}
+        className={cn(
+          'mb-6 text-base leading-relaxed py-1 whitespace-pre-wrap focus:outline-none rounded-md',
+          align === 'center' && 'text-center',
+          align === 'right' && 'text-right',
+          styles.bold && 'font-bold',
+          styles.italic && 'italic',
+          styles.underline && 'underline'
+        )}
+      />
+    );
+  }
+
+  // Non-editing mode remains the same
+  const content = typeof children === 'string' 
+    ? children.split('\n').map((line, i) => (
+        <React.Fragment key={i}>
+          {line}
+          {i < children.split('\n').length - 1 && <br />}
+        </React.Fragment>
+      ))
+    : children;
+
   return (
     <p id={id} className={cn(
-      'mb-6 text-base leading-relaxed py-1',
+      'mb-6 text-base leading-relaxed py-1 whitespace-pre-wrap',
       align === 'center' && 'text-center',
       align === 'right' && 'text-right',
-      styles?.bold && 'font-bold',
-      styles?.italic && 'italic',
-      styles?.underline && 'underline'
+      styles.bold && 'font-bold',
+      styles.italic && 'italic',
+      styles.underline && 'underline'
     )}>
-      {children}
+      {content}
     </p>
   );
 }
diff --git a/packages/akiradocs/src/components/blocks/SortableBlock.tsx b/packages/akiradocs/src/components/blocks/SortableBlock.tsx
index c11b2fa..9eb3de9 100644
--- a/packages/akiradocs/src/components/blocks/SortableBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/SortableBlock.tsx
@@ -3,21 +3,39 @@ import { CSS } from '@dnd-kit/utilities'
 import { GripVertical } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
-import { BlockType } from '../../types/Block'
+import { Block, BlockType } from '../../types/Block'
 import { AddBlockButton } from '../editor/AddBlockButton'
 import { BlockRenderer } from '@/lib/renderers/BlockRenderer'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { Plus, MoreHorizontal, Trash2, Upload } from 'lucide-react'
+import { Plus, Trash2 } from 'lucide-react'
 import { useRef, useCallback, useState } from 'react'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { BlockFormatToolbar } from '../editor/BlockFormatToolbar'
+import { toast } from 'sonner'
+import { rewriteBlockContent } from '@/lib/aiRewrite'
 
 interface SortableBlockProps {
   block: {
     id: string
     type: BlockType
     content: string
+    metadata?: {
+      level?: number
+      styles?: {
+        bold?: boolean
+        italic?: boolean
+        underline?: boolean
+      }
+      language?: string
+      alt?: string
+      caption?: string
+      listType?: 'ordered' | 'unordered'
+      size?: 'small' | 'medium' | 'large' | 'full'
+      position?: 'left' | 'center' | 'right'
+      filename?: string
+      showLineNumbers?: boolean
+      align?: 'left' | 'center' | 'right'
+      type?: 'info' | 'warning' | 'success' | 'error'
+      title?: string
+    }
   }
   updateBlock: (id: string, content: string) => void
   changeBlockType: (id: string, newType: BlockType) => void
@@ -26,6 +44,7 @@ interface SortableBlockProps {
   showPreview: boolean
   isChangeTypeActive: boolean
   setActiveChangeTypeId: (id: string | null) => void
+  updateBlockMetadata: (id: string, metadata: Partial<Block['metadata']>) => void
 }
 
 interface ImageBlockContent {
@@ -45,7 +64,8 @@ export function SortableBlock({
   deleteBlock,
   showPreview,
   isChangeTypeActive,
-  setActiveChangeTypeId
+  setActiveChangeTypeId,
+  updateBlockMetadata
 }: SortableBlockProps) {
   const {
     attributes,
@@ -161,20 +181,36 @@ export function SortableBlock({
     updateBlock(block.id, JSON.stringify(updatedContent))
   }
 
-  if (showPreview) {
-    return <BlockRenderer block={block} />
+  const [isFocused, setIsFocused] = useState(false)
+
+  const handleFocus = () => {
+    setIsFocused(true)
+  }
+
+  const handleBlur = (e: React.FocusEvent) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsFocused(false)
+    }
   }
 
-  return (
+  const [isRewriting, setIsRewriting] = useState(false)
+
+  return showPreview ? (
+    <BlockRenderer block={block} />
+  ) : (
     <div
       ref={setNodeRef}
       style={style}
       className={cn(
-        'group relative mb-4',
+        'group relative',
         isDragging && 'z-50 bg-background/50 backdrop-blur-sm'
       )}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      tabIndex={0}
     >
-      <div className="flex items-center gap-2">
+      {/* Left Controls Container */}
+      <div className="absolute -left-32 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-2">
         {/* Drag Handle */}
         <div
           className="flex-shrink-0 cursor-grab active:cursor-grabbing"
@@ -184,7 +220,7 @@ export function SortableBlock({
           <Button
             variant="ghost"
             size="icon"
-            className="h-8 w-8 text-muted-foreground"
+            className="h-8 w-8 text-muted-foreground hover:text-foreground"
           >
             <GripVertical className="h-4 w-4" />
             <span className="sr-only">Drag handle</span>
@@ -192,7 +228,7 @@ export function SortableBlock({
         </div>
 
         {/* Block Controls */}
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-2">
           <AddBlockButton 
             ref={addBlockButtonRef}
             onChangeType={(type) => {
@@ -221,183 +257,139 @@ export function SortableBlock({
             <span className="sr-only">Add Block</span>
           </Button>
         </div>
+      </div>
 
+      {/* Main Content */}
+      <div className="flex items-center gap-4">
         {/* Content Editor */}
-        <div className="flex-grow">
-          { block.type === 'image' ? (
-            <div className="border-2 border-dashed border-gray-300 rounded-lg p-4">
-              {getImageContent().url ? (
-                <div className="space-y-4">
-                  <div className={cn(
-                    "flex flex-col gap-2",
-                    getImageContent().alignment === 'left' && "items-start",
-                    getImageContent().alignment === 'center' && "items-center",
-                    getImageContent().alignment === 'right' && "items-end",
-                  )}>
-                    <img 
-                      src={getImageContent().url} 
-                      alt={getImageContent().alt} 
-                      className={cn(
-                        "h-auto rounded-lg",
-                        getImageContent().size === 'small' && "max-w-[300px]",
-                        getImageContent().size === 'medium' && "max-w-[500px]",
-                        getImageContent().size === 'large' && "max-w-[800px]",
-                        getImageContent().size === 'full' && "max-w-full",
-                      )}
-                    />
-                    {getImageContent().caption && (
-                      <p className="text-sm text-muted-foreground italic">
-                        {getImageContent().caption}
-                      </p>
-                    )}
-                  </div>
-
-                  <div className="space-y-4 pt-4 border-t">
-                    <div className="grid gap-4">
-                      <div className="grid gap-2">
-                        <Label htmlFor="alt-text">Alt Text</Label>
-                        <Input
-                          id="alt-text"
-                          placeholder="Describe the image..."
-                          value={getImageContent().alt}
-                          onChange={(e) => updateImageMetadata({ alt: e.target.value })}
-                        />
-                      </div>
-
-                      <div className="grid gap-2">
-                        <Label htmlFor="caption">Caption</Label>
-                        <Input
-                          id="caption"
-                          placeholder="Add a caption..."
-                          value={getImageContent().caption}
-                          onChange={(e) => updateImageMetadata({ caption: e.target.value })}
-                        />
-                      </div>
-
-                      <div className="grid gap-2">
-                        <Label>Alignment</Label>
-                        <Select
-                          value={getImageContent().alignment}
-                          onValueChange={(value) => 
-                            updateImageMetadata({ 
-                              alignment: value as 'left' | 'center' | 'right' 
-                            })
-                          }
-                        >
-                          <SelectTrigger>
-                            <SelectValue placeholder="Select alignment" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="left">Left</SelectItem>
-                            <SelectItem value="center">Center</SelectItem>
-                            <SelectItem value="right">Right</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-
-                      <div className="grid gap-2">
-                        <Label>Size</Label>
-                        <Select
-                          value={getImageContent().size || 'medium'}
-                          onValueChange={(value) => 
-                            updateImageMetadata({ 
-                              size: value as 'small' | 'medium' | 'large' | 'full' 
-                            })
-                          }
-                        >
-                          <SelectTrigger>
-                            <SelectValue placeholder="Select size" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="small">Small</SelectItem>
-                            <SelectItem value="medium">Medium</SelectItem>
-                            <SelectItem value="large">Large</SelectItem>
-                            <SelectItem value="full">Full width</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                    </div>
-
-                    <div className="flex justify-center">
-                      <label className="cursor-pointer px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80">
-                        Replace Image
-                        <input
-                          type="file"
-                          accept="image/*"
-                          onChange={handleImageUpload}
-                          className="hidden"
-                        />
-                      </label>
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                <label className="flex flex-col items-center justify-center cursor-pointer py-8">
-                  <Upload className="w-12 h-12 text-muted-foreground" />
-                  <span className="mt-2 text-sm text-muted-foreground">Click to upload an image</span>
-                  <span className="mt-1 text-xs text-muted-foreground">(or drag and drop)</span>
-                  <input
-                    type="file"
-                    accept="image/*"
-                    onChange={handleImageUpload}
-                    className="hidden"
-                  />
-                </label>
-              )}
-            </div>
-          ) : block.type === 'divider' ? (
-            <div className="py-2">
-              <hr className="border-t border-border" />
-            </div>
-          ) : (
-            <div
-              ref={inputRef}
-              contentEditable
-              suppressContentEditableWarning
-              onKeyDown={handleKeyDown}
-              onInput={handleInput}
-              onBlur={(e) => {
-                const target = e.target as HTMLElement
-                if (!target) return
-
-                setTimeout(() => {
-                  updateBlock(block.id, target.textContent || '')
-                }, 100)
+        <div className="flex-grow relative">
+          {!showPreview && block.type !== 'divider' && (
+            <BlockFormatToolbar
+              isVisible={isFocused}
+              styles={block.metadata?.styles}
+              align={block.type === 'image' ? getImageContent().alignment : block.metadata?.align}
+              level={block.metadata?.level || 1}
+              showLevelSelect={block.type === 'heading'}
+              listType={block.metadata?.listType || 'unordered'}
+              showListControls={block.type === 'list'}
+              language={block.metadata?.language || 'typescript'}
+              filename={block.metadata?.filename}
+              showLineNumbers={block.metadata?.showLineNumbers ?? true}
+              showCodeControls={block.type === 'code'}
+              onStyleChange={(styles) => {
+                updateBlockMetadata(block.id, {
+                  ...block.metadata,
+                  styles
+                })
+              }}
+              onAlignChange={(newAlign) => {
+                if (block.type === 'image') {
+                  const currentContent = getImageContent();
+                  const updatedContent = {
+                    ...currentContent,
+                    alignment: newAlign,  // For the image container alignment
+                    position: newAlign,   // For the image position within container
+                  };
+                  updateBlock(block.id, JSON.stringify(updatedContent));
+                } else {
+                  updateBlockMetadata(block.id, {
+                    ...block.metadata,
+                    align: newAlign
+                  });
+                }
               }}
-              className={cn(
-                "w-full p-2 focus:outline-none border border-transparent focus:border-border rounded-md bg-gray-800",
-                block.type === 'heading' && "font-bold text-2xl",
-                block.type === 'code' && "font-mono bg-muted p-4"
-              )}
-              style={{
-                display: 'block',
-                whiteSpace: block.type === 'code' ? 'pre-wrap' : 'normal'
+              onLevelChange={(level) => {
+                updateBlockMetadata(block.id, {
+                  ...block.metadata,
+                  level
+                })
               }}
-            >
-              {block.content}
-            </div>
+              onListTypeChange={(listType) => {
+                updateBlockMetadata(block.id, {
+                  ...block.metadata,
+                  listType
+                })
+              }}
+              onLanguageChange={(language) => {
+                updateBlockMetadata(block.id, {
+                  ...block.metadata,
+                  language
+                })
+              }}
+              onFilenameChange={(filename) => {
+                updateBlockMetadata(block.id, {
+                  ...block.metadata,
+                  filename
+                })
+              }}
+              onShowLineNumbersChange={(showLineNumbers) => {
+                updateBlockMetadata(block.id, {
+                  ...block.metadata,
+                  showLineNumbers
+                })
+              }}
+              showImageControls={block.type === 'image'}
+              imageContent={block.type === 'image' ? getImageContent() : undefined}
+              onImageMetadataChange={(metadata) => {
+                const currentContent = getImageContent();
+                const updatedContent = {
+                  ...currentContent,
+                  ...metadata
+                };
+                updateBlock(block.id, JSON.stringify(updatedContent));
+              }}
+              showCalloutControls={block.type === 'callout'}
+              calloutType={block.metadata?.type || 'info'}
+              calloutTitle={block.metadata?.title || ''}
+              onCalloutTypeChange={(type) => {
+                updateBlockMetadata(block.id, {
+                  ...block.metadata,
+                  type
+                });
+              }}
+              onCalloutTitleChange={(title) => {
+                updateBlockMetadata(block.id, {
+                  ...block.metadata,
+                  title
+                });
+              }}
+              blockType={block.type}
+              onAiRewrite={async (style) => {
+                setIsRewriting(true);
+                try {
+                  const newContent = await rewriteBlockContent(block.content, block.type, style);
+                  updateBlock(block.id, newContent);
+                  toast.success('Content rewritten successfully');
+                } catch (error) {
+                  console.error('Error rewriting content:', error);
+                  toast.error(error instanceof Error ? error.message : 'Failed to rewrite content');
+                } finally {
+                  setIsRewriting(false);
+                }
+              }}
+              isAiRewriting={isRewriting}
+            />
           )}
+          <BlockRenderer 
+            block={block} 
+            isEditing={true}
+            onUpdate={(id, content) => updateBlock(id, content)}
+          />
         </div>
 
-        {/* Block Menu */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
-            >
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => deleteBlock(block.id)}>
-              <Trash2 className="mr-2 h-4 w-4" />
-              <span>Delete block</span>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        {/* Delete Button */}
+        <div className="flex-shrink-0">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
+            onClick={() => deleteBlock(block.id)}
+          >
+            <Trash2 className="h-4 w-4" />
+            <span className="sr-only">Delete block</span>
+          </Button>
+        </div>
       </div>
     </div>
   )
-} 
\ No newline at end of file
+} 
diff --git a/packages/akiradocs/src/components/editor/AIRewriteButton.tsx b/packages/akiradocs/src/components/editor/AIRewriteButton.tsx
new file mode 100644
index 0000000..c398ed7
--- /dev/null
+++ b/packages/akiradocs/src/components/editor/AIRewriteButton.tsx
@@ -0,0 +1,196 @@
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Wand2 } from 'lucide-react'
+import { useState } from 'react'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { BlockType } from '@/types/Block'
+
+const blockStyles = {
+  article: [
+    {
+      value: 'professional',
+      label: 'Professional',
+      prompt: 'Rewrite this article title and subtitle to be clear and professional. Format as JSON with title and subtitle fields.'
+    },
+    {
+      value: 'engaging',
+      label: 'Engaging',
+      prompt: 'Rewrite this article title and subtitle to be more engaging and attention-grabbing. Format as JSON with title and subtitle fields.'
+    }
+  ],
+
+  heading: [
+    {
+      value: 'concise',
+      label: 'Concise',
+      prompt: 'Rewrite this heading to be clear and impactful in 2-6 words. Output only the heading text.'
+    },
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite this heading to be more descriptive while maintaining clarity. Keep under 10 words. Output only the heading text.'
+    }
+  ],
+
+  paragraph: [
+    {
+      value: 'professional',
+      label: 'Professional',
+      prompt: 'Rewrite this paragraph in a clear, professional tone. Keep it concise and direct. Output only the paragraph text.'
+    },
+    {
+      value: 'casual',
+      label: 'Casual',
+      prompt: 'Rewrite this paragraph in a friendly, conversational tone. Make it engaging but clear. Output only the paragraph text.'
+    }
+  ],
+
+  blockquote: [
+    {
+      value: 'inspirational',
+      label: 'Inspirational',
+      prompt: 'Rewrite this quote to be more inspirational while keeping its core message. Output only the quote text without any formatting or quotation marks.'
+    },
+    {
+      value: 'powerful',
+      label: 'Powerful',
+      prompt: 'Rewrite this quote to be more impactful and memorable. Output only the quote text without any formatting or quotation marks.'
+    }
+  ],
+
+  list: [
+    {
+      value: 'structured',
+      label: 'Structured',
+      prompt: 'Reorganize this list to be more structured and clear. Each item should be concise. Output only list items, one per line without bullets or numbers.'
+    },
+    {
+      value: 'detailed',
+      label: 'Detailed',
+      prompt: 'Expand each list item with more detail while keeping clarity. Output only list items, one per line without bullets or numbers.'
+    }
+  ],
+
+  code: [
+    {
+      value: 'optimize',
+      label: 'Optimize',
+      prompt: 'Optimize this code for better performance and readability. Keep the exact same language and functionality. Do not change imports or dependencies. Output only the optimized code.'
+    },
+    {
+      value: 'document',
+      label: 'Document',
+      prompt: 'Add clear comments explaining the code functionality. Keep the exact same code and language. Only add or modify comments. Output only the documented code.'
+    }
+  ],
+
+  image: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite only the alt text and caption to be more descriptive. Keep the image URL and other properties unchanged. Format as JSON with only alt and caption fields.'
+    },
+    {
+      value: 'concise',
+      label: 'Concise',
+      prompt: 'Rewrite only the alt text and caption to be clear and concise. Keep the image URL and other properties unchanged. Format as JSON with only alt and caption fields.'
+    }
+  ],
+
+  callout: [
+    {
+      value: 'clear',
+      label: 'Clear',
+      prompt: 'Rewrite this callout to be clearer and more direct. Keep the callout type (info/warning/success/error) and title unchanged. Output only the callout content.'
+    },
+    {
+      value: 'actionable',
+      label: 'Actionable',
+      prompt: 'Rewrite this callout with clear action items. Keep the callout type and title unchanged. Output only the callout content.'
+    }
+  ],
+
+  divider: [
+    {
+      value: 'default',
+      label: 'Default',
+      prompt: 'No rewriting options available for divider'
+    }
+  ],
+
+  toggle: [
+    { 
+      value: 'clear',
+      label: 'Clear',
+      prompt: 'Rewrite the toggle content to be clearer and more organized. Keep the toggle structure. Output only the toggle content.'
+    },
+    {
+      value: 'detailed',
+      label: 'Detailed',
+      prompt: 'Expand the toggle content with more detailed explanations. Keep the toggle structure. Output only the toggle content.'
+    }
+  ],
+
+  apiReference: [
+    {
+      value: 'default',
+      label: 'Default',
+      prompt: 'No rewriting options available for API reference'
+    }
+  ],
+} as const;
+
+interface AIRewriteButtonProps {
+  onRewrite: (style: string) => Promise<void>
+  blockType: BlockType
+  isRewriting?: boolean
+}
+
+export function AIRewriteButton({ onRewrite, blockType, isRewriting }: AIRewriteButtonProps) {
+  const [style, setStyle] = useState<string>(() => {
+    const styles = blockStyles[blockType] || blockStyles['paragraph']
+    return styles[0].value
+  })
+
+  const getBlockStyles = (blockType: BlockType) => {
+    return blockStyles[blockType] || blockStyles['paragraph'];
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button 
+          variant="ghost" 
+          className="h-8 w-auto px-2 flex items-center gap-2 md:whitespace-nowrap"
+        >
+          <Wand2 className="h-4 w-4" />
+          Rewrite with AI
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56" align="end">
+        <div className="space-y-4">
+          <h3 className="font-medium">Rewrite with AI</h3>
+          <Select value={style} onValueChange={setStyle}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select style" />
+            </SelectTrigger>
+            <SelectContent>
+              {getBlockStyles(blockType).map((style) => (
+                <SelectItem key={style.value} value={style.value}>
+                  {style.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button 
+            className="w-full" 
+            onClick={() => onRewrite(style)}
+            disabled={isRewriting}
+          >
+            {isRewriting ? 'Rewriting...' : 'Rewrite'}
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+} 
\ No newline at end of file
diff --git a/packages/akiradocs/src/components/editor/BlockFormatToolbar.tsx b/packages/akiradocs/src/components/editor/BlockFormatToolbar.tsx
new file mode 100644
index 0000000..2bdbf3d
--- /dev/null
+++ b/packages/akiradocs/src/components/editor/BlockFormatToolbar.tsx
@@ -0,0 +1,299 @@
+import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Wand2 } from 'lucide-react'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
+import { ListIcon, ListOrdered } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { BlockType } from '@/types/Block'
+import { AIRewriteButton } from '@/components/editor/AIRewriteButton'
+
+interface BlockFormatToolbarProps {
+  styles?: {
+    bold?: boolean
+    italic?: boolean
+    underline?: boolean
+  }
+  align?: 'left' | 'center' | 'right'
+  onStyleChange: (styles: { bold?: boolean; italic?: boolean; underline?: boolean }) => void
+  onAlignChange: (align: 'left' | 'center' | 'right') => void
+  className?: string
+  level?: number
+  onLevelChange?: (level: number) => void
+  showLevelSelect?: boolean
+  listType?: 'ordered' | 'unordered'
+  onListTypeChange?: (listType: 'ordered' | 'unordered') => void
+  showListControls?: boolean
+  language?: string
+  filename?: string
+  showLineNumbers?: boolean
+  onLanguageChange?: (language: string) => void
+  onFilenameChange?: (filename: string) => void
+  onShowLineNumbersChange?: (show: boolean) => void
+  showCodeControls?: boolean
+  showImageControls?: boolean;
+  imageContent?: {
+    url: string;
+    alt?: string;
+    caption?: string;
+    alignment?: 'left' | 'center' | 'right';
+    size?: 'small' | 'medium' | 'large' | 'full';
+  };
+  onImageMetadataChange?: (metadata: Partial<{
+    alt: string;
+    caption: string;
+    alignment: 'left' | 'center' | 'right';
+    size: 'small' | 'medium' | 'large' | 'full';
+  }>) => void;
+  showCalloutControls?: boolean;
+  calloutType?: 'info' | 'warning' | 'success' | 'error';
+  calloutTitle?: string;
+  onCalloutTypeChange?: (type: 'info' | 'warning' | 'success' | 'error') => void;
+  onCalloutTitleChange?: (title: string) => void;
+  isVisible?: boolean;
+  onAiRewrite?: (style: string) => Promise<void>
+  isAiRewriting?: boolean
+  blockType?: BlockType
+}
+
+export function BlockFormatToolbar({ 
+  styles = {
+    bold: false,
+    italic: false,
+    underline: false
+  }, 
+  align = 'left',
+  onStyleChange,
+  onAlignChange,
+  className,
+  level = 1,
+  onLevelChange,
+  showLevelSelect = false,
+  listType = 'unordered',
+  onListTypeChange,
+  showListControls = false,
+  language = 'typescript',
+  filename,
+  showLineNumbers = true,
+  onLanguageChange,
+  onFilenameChange,
+  onShowLineNumbersChange,
+  showCodeControls = false,
+  showImageControls = false,
+  imageContent,
+  onImageMetadataChange,
+  showCalloutControls = false,
+  calloutType = 'info',
+  calloutTitle = '',
+  onCalloutTypeChange,
+  onCalloutTitleChange,
+  isVisible = false,
+  onAiRewrite,
+  isAiRewriting,
+  blockType,
+}: BlockFormatToolbarProps) {
+  return (
+    <div className={cn(
+      "absolute -top-10 left-1/2 -translate-x-1/2 z-50",
+      isVisible ? "opacity-100" : "opacity-0",
+      "transition-opacity",
+      "flex items-center gap-1 p-1",
+      "bg-popover border shadow-md rounded-md",
+      className
+    )}>
+      {!showImageControls && (
+        <>
+          <ToggleGroup 
+            type="multiple" 
+            value={Object.entries(styles || {}).filter(([_, value]) => value).map(([key]) => key)} 
+            onValueChange={(values) => {
+              onStyleChange({
+                bold: values.includes('bold'),
+                italic: values.includes('italic'),
+                underline: values.includes('underline')
+              })
+            }}
+            className="flex gap-0.5"
+          >
+            <ToggleGroupItem value="bold" size="sm" className="h-7 w-7 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">
+              <Bold className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic" size="sm" className="h-7 w-7 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">
+              <Italic className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="underline" size="sm" className="h-7 w-7 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">
+              <Underline className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+          <Separator orientation="vertical" className="mx-0.5 h-7" />
+        </>
+      )}
+
+      <ToggleGroup type="single" value={align} onValueChange={(value) => value && onAlignChange(value as 'left' | 'center' | 'right')} className="flex gap-0.5">
+        <ToggleGroupItem value="left" size="sm" className="h-7 w-7 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">
+          <AlignLeft className="h-3.5 w-3.5" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="center" size="sm" className="h-7 w-7 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">
+          <AlignCenter className="h-3.5 w-3.5" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="right" size="sm" className="h-7 w-7 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">
+          <AlignRight className="h-3.5 w-3.5" />
+        </ToggleGroupItem>
+      </ToggleGroup>
+
+      {showCodeControls && (
+        <>
+          <Separator orientation="vertical" className="mx-0.5 h-7" />
+          
+          <Input
+            value={language}
+            onChange={(e) => onLanguageChange?.(e.target.value)}
+            placeholder="Language"
+            className="h-7 w-24 text-xs"
+          />
+          
+          <Input
+            value={filename || ''}
+            onChange={(e) => onFilenameChange?.(e.target.value)}
+            placeholder="Filename"
+            className="h-7 w-32 text-xs"
+          />
+          
+          <ToggleGroup type="single" value={showLineNumbers ? 'show' : 'hide'} onValueChange={(value) => onShowLineNumbersChange?.(value === 'show')} className="flex gap-0.5">
+            <ToggleGroupItem
+              value="show"
+              size="sm"
+              className="h-7 px-2 text-xs data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+            >
+              <ListOrdered className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </>
+      )}
+
+      {showLevelSelect && onLevelChange && (
+        <>
+          <Separator orientation="vertical" className="mx-0.5 h-7" />
+          
+          <Select value={level.toString()} onValueChange={(value) => onLevelChange(parseInt(value))}>
+            <SelectTrigger className="h-7 w-16">
+              <SelectValue placeholder="H1" />
+            </SelectTrigger>
+            <SelectContent>
+              {[1, 2, 3, 4, 5, 6].map((level) => (
+                <SelectItem key={level} value={level.toString()}>
+                  H{level}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </>
+      )}
+
+      {showListControls && onListTypeChange && (
+        <>
+          <Separator orientation="vertical" className="mx-0.5 h-7" />
+          
+          <ToggleGroup 
+            type="single" 
+            value={listType} 
+            onValueChange={(value) => onListTypeChange?.(value as 'ordered' | 'unordered')}
+            className="flex gap-0.5"
+          >
+            <ToggleGroupItem 
+              value="unordered" 
+              size="sm" 
+              className="h-7 w-7 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+            >
+              <ListIcon className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem 
+              value="ordered" 
+              size="sm" 
+              className="h-7 w-7 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+            >
+              <ListOrdered className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </>
+      )}
+
+      {showImageControls && (
+        <>
+          <Separator orientation="vertical" className="mx-0.5 h-7" />
+          
+          <Input
+            value={imageContent?.alt || ''}
+            onChange={(e) => onImageMetadataChange?.({ alt: e.target.value })}
+            placeholder="Alt text"
+            className="h-7 w-24 text-xs"
+          />
+          
+          <Input
+            value={imageContent?.caption || ''}
+            onChange={(e) => onImageMetadataChange?.({ caption: e.target.value })}
+            placeholder="Caption"
+            className="h-7 w-32 text-xs"
+          />
+          
+          <Select 
+            value={imageContent?.size || 'medium'}
+            onValueChange={(value) => onImageMetadataChange?.({ 
+              size: value as 'small' | 'medium' | 'large' | 'full' 
+            })}
+          >
+            <SelectTrigger className="h-7 w-20">
+              <SelectValue placeholder="Size" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="small">Small</SelectItem>
+              <SelectItem value="medium">Medium</SelectItem>
+              <SelectItem value="large">Large</SelectItem>
+              <SelectItem value="full">Full width</SelectItem>
+            </SelectContent>
+          </Select>
+        </>
+      )}
+
+      {showCalloutControls && (
+        <>
+          <Separator orientation="vertical" className="mx-0.5 h-7" />
+          
+          <Select 
+            value={calloutType} 
+            onValueChange={(value) => onCalloutTypeChange?.(value as 'info' | 'warning' | 'success' | 'error')}
+          >
+            <SelectTrigger className="h-7 w-24">
+              <SelectValue placeholder="Type"/>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="info">Info</SelectItem>
+              <SelectItem value="warning">Warning</SelectItem>
+              <SelectItem value="success">Success</SelectItem>
+              <SelectItem value="error">Error</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Input
+            value={calloutTitle}
+            onChange={(e) => onCalloutTitleChange?.(e.target.value)}
+            placeholder="Title"
+            className="h-7 w-32 text-xs"
+          />
+        </>
+      )}
+       <Separator orientation="vertical" className="mx-0.5 h-7" />
+          
+          {/* Only show AI rewrite button if not an image block */}
+          {!showImageControls && (
+            <div className="ml-auto">
+              <AIRewriteButton
+                blockType={blockType || 'paragraph'}
+                onRewrite={onAiRewrite || (async () => {})}
+                isRewriting={isAiRewriting}
+              />
+            </div>
+          )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/akiradocs/src/components/layout/TitleBar.tsx b/packages/akiradocs/src/components/layout/TitleBar.tsx
index 191396c..6e0b658 100644
--- a/packages/akiradocs/src/components/layout/TitleBar.tsx
+++ b/packages/akiradocs/src/components/layout/TitleBar.tsx
@@ -1,34 +1,39 @@
 'use client'
 
-// import Link from 'next/link'
-import { Save } from 'lucide-react'
+import { ArrowLeft, Save } from 'lucide-react'
 import { Button } from "@/components/ui/button"
+import Link from "next/link"
+import { usePathname } from 'next/navigation'
 
 interface TitleBarProps {
-  showPreview: boolean
-  setShowPreview: (show: boolean) => void
   onSave: () => void
   isSaving?: boolean
 }
 
-export function TitleBar({ showPreview, setShowPreview, onSave, isSaving = false }: TitleBarProps) {
+export function TitleBar({ onSave, isSaving = false }: TitleBarProps) {
+  const pathname = usePathname()
+  
+  // Extract filename from URL, remove .json extension, and capitalize
+  const filename = pathname
+    ?.split('/')
+    .pop()
+    ?.replace('.json', '')
+    ?.split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ') || 'Untitled'
 
   return (
     <div className="flex justify-between items-center mb-8">
-      <div className="flex space-x-2">
-        <Button
-          variant={showPreview ? "outline" : "default"}
-          onClick={() => setShowPreview(false)}
-        >
-          Edit
-        </Button>
-        <Button
-          variant={showPreview ? "default" : "outline"}
-          onClick={() => setShowPreview(true)}
-        >
-          Preview
-        </Button>
+      <div className="flex items-center gap-3">
+        <Link href="/editor">
+          <Button variant="ghost" size="icon" className="hover:bg-accent">
+            <ArrowLeft className="w-4 h-4" />
+            <span className="sr-only">Back to editor</span>
+          </Button>
+        </Link>
+        <h1 className="text-lg font-medium">{filename}</h1>
       </div>
+      
       <Button 
         onClick={onSave}
         disabled={isSaving}
diff --git a/packages/akiradocs/src/components/tts/TextToSpeech.tsx b/packages/akiradocs/src/components/tts/TextToSpeech.tsx
new file mode 100644
index 0000000..aef01d1
--- /dev/null
+++ b/packages/akiradocs/src/components/tts/TextToSpeech.tsx
@@ -0,0 +1,210 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Volume2, VolumeX, Settings2 } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+interface TextToSpeechProps {
+  blocks: any[];
+}
+
+// Define fixed voice options with clearer voices
+const VOICE_OPTIONS = [
+  { name: 'Samantha', lang: 'en-US' },      // Clear, natural female voice
+  { name: 'Daniel', lang: 'en-GB' },        // Clear male voice
+  { name: 'Karen', lang: 'en-AU' },         // Clear Australian female voice
+  { name: 'Moira', lang: 'en-IE' }          // Clear Irish female voice
+];
+
+export function TextToSpeech({ blocks }: TextToSpeechProps) {
+  const [mounted, setMounted] = useState(false);
+  const [speaking, setSpeaking] = useState(false);
+  const [selectedVoiceIndex, setSelectedVoiceIndex] = useState(0);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const getVoice = useCallback(() => {
+    if (typeof window === 'undefined') return null;
+    const voices = window.speechSynthesis.getVoices();
+    const preferredVoice = voices.find(voice => 
+      voice.name.includes(VOICE_OPTIONS[selectedVoiceIndex].name)
+    );
+    return preferredVoice || voices[0];
+  }, [selectedVoiceIndex]);
+
+  const generateSpeechText = (blocks: any[]) => {
+    return blocks
+      .filter(block => block.content !== undefined)
+      .map(block => {
+        try {
+          switch (block.type) {
+            case 'heading':
+              return `${block.content}. `;
+            
+            case 'paragraph':
+              return `${block.content} `;
+            
+            case 'list':
+              const listItems = Array.isArray(block.content) ? block.content : block.content.split('\n').filter((item: string) => item.trim());
+              return `${listItems.join(', ')}`;
+            
+            case 'checkList':
+              if (block.metadata?.checkedItems) {
+                return `Checklist: ${block.metadata.checkedItems.map((item: { text: string; checked: boolean }) => 
+                  `${item.text} (${item.checked ? 'checked' : 'unchecked'})`
+                ).join(', ')}`;
+              }
+              return '';
+            
+            case 'toggleList':
+              if (block.metadata?.items) {
+                return `Toggle list: ${block.metadata.items.map((item: { title: string; content: string }) => 
+                  `${item.title}: ${item.content}`
+                ).join('. ')}`;
+              }
+              return '';
+            
+            case 'blockquote':
+              return `Quote: ${block.content}. `;
+            
+            case 'code':
+              const lang = block.metadata?.language || 'code';
+              const filename = block.metadata?.filename ? ` in file ${block.metadata.filename}` : '';
+              return `Code block${filename} in ${lang}. `;
+            
+            case 'table':
+              try {
+                const tableData = typeof block.content === 'string' 
+                  ? JSON.parse(block.content)
+                  : block.content;
+                return `Table with ${tableData.rows?.length || 0} rows and ${tableData.columns?.length || 0} columns. `;
+              } catch {
+                return 'Table content. ';
+              }
+            
+            case 'image':
+              try {
+                const imageContent = typeof block.content === 'string' 
+                  ? JSON.parse(block.content)
+                  : block.content;
+                const caption = imageContent.caption ? `: ${imageContent.caption}` : '';
+                const alt = imageContent.alt ? ` showing ${imageContent.alt}` : '';
+                return `Image ${alt} ${caption}. `;
+              } catch {
+                return 'Image. ';
+              }
+            
+            case 'video':
+              const videoCaption = block.metadata?.caption ? `: ${block.metadata.caption}` : '';
+              return `Video for ${videoCaption}. `;
+            
+            case 'audio':
+              const audioCaption = block.metadata?.caption ? `: ${block.metadata.caption}` : '';
+              return `Audio for ${audioCaption}. `;
+            
+            case 'file':
+              const fileName = block.metadata?.filename || 'file';
+              return `Downloadable file called ${fileName}. `;
+            
+            case 'emoji':
+              return '';
+            
+            case 'callout':
+              const type = block.metadata?.type || 'info';
+              const title = block.metadata?.title ? `, titled ${block.metadata.title}` : '';
+              return `${type} callout${title}: ${block.content}. `;
+            
+            case 'divider':
+              return '';
+            
+            default:
+              return '';
+          }
+        } catch (error) {
+          console.error(`Error processing block of type ${block.type}:`, error);
+          return '';
+        }
+      })
+      .join(' ');
+  };
+
+  const speak = useCallback(() => {
+    if (typeof window === 'undefined') return;
+
+    window.speechSynthesis.cancel();
+    const text = generateSpeechText(blocks);
+    const utterance = new SpeechSynthesisUtterance(text);
+    
+    const voice = getVoice();
+    if (voice) utterance.voice = voice;
+    
+    utterance.rate = 0.9;
+    utterance.pitch = 1;
+    utterance.volume = 1;
+
+    utterance.onstart = () => setSpeaking(true);
+    utterance.onend = () => setSpeaking(false);
+    utterance.onerror = () => setSpeaking(false);
+    
+    window.speechSynthesis.speak(utterance);
+  }, [blocks, getVoice]);
+
+  const stop = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      window.speechSynthesis.cancel();
+      setSpeaking(false);
+    }
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="flex items-center gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Settings2 className="w-4 h-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {VOICE_OPTIONS.map((voice, index) => (
+            <DropdownMenuItem
+              key={voice.lang}
+              onClick={() => setSelectedVoiceIndex(index)}
+              className={selectedVoiceIndex === index ? "bg-accent" : ""}
+            >
+              {voice.name}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
+      <Button
+        onClick={speaking ? stop : speak}
+        variant="outline"
+        size="sm"
+        className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
+      >
+        {speaking ? (
+          <>
+            <VolumeX className="w-4 h-4" />
+            Stop Reading
+          </>
+        ) : (
+          <>
+            <Volume2 className="w-4 h-4" />
+            Read Content
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/akiradocs/src/components/ui/toggle-group.tsx b/packages/akiradocs/src/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..1c876bb
--- /dev/null
+++ b/packages/akiradocs/src/components/ui/toggle-group.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/packages/akiradocs/src/components/ui/toggle.tsx b/packages/akiradocs/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..c19bea3
--- /dev/null
+++ b/packages/akiradocs/src/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }
diff --git a/packages/akiradocs/src/lib/AIConfig.ts b/packages/akiradocs/src/lib/AIConfig.ts
new file mode 100644
index 0000000..26d3475
--- /dev/null
+++ b/packages/akiradocs/src/lib/AIConfig.ts
@@ -0,0 +1,11 @@
+export const aiConfig = {
+  openai: {
+    apiKey: process.env.OPENAI_API_KEY,
+  }
+}
+
+export function validateConfig() {
+  if (!aiConfig.openai.apiKey) {
+    throw new Error('OPENAI_API_KEY is required')
+  }
+} 
\ No newline at end of file
diff --git a/packages/akiradocs/src/lib/aiRewrite.ts b/packages/akiradocs/src/lib/aiRewrite.ts
new file mode 100644
index 0000000..49f6bf8
--- /dev/null
+++ b/packages/akiradocs/src/lib/aiRewrite.ts
@@ -0,0 +1,27 @@
+import { BlockType } from '@/types/Block'
+
+export async function rewriteBlockContent(
+  content: string, 
+  blockType: BlockType, 
+  style: string
+): Promise<string> {
+  const response = await fetch('/api/rewrite', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      content,
+      blockType,
+      style,
+    }),
+  })
+
+  if (!response.ok) {
+    const data = await response.json()
+    throw new Error(data.error)
+  }
+
+  const data = await response.json()
+  return data.content
+}
\ No newline at end of file
diff --git a/packages/akiradocs/src/lib/renderers/BlockRenderer.tsx b/packages/akiradocs/src/lib/renderers/BlockRenderer.tsx
index bcd12d1..c139e4a 100644
--- a/packages/akiradocs/src/lib/renderers/BlockRenderer.tsx
+++ b/packages/akiradocs/src/lib/renderers/BlockRenderer.tsx
@@ -13,10 +13,11 @@ import { CodeBlock } from "@/components/blocks/CodeBlock"
 // import { Video } from '../blocks/Video'
 // import { Audio } from '../blocks/Audio'
 // import { File } from '../blocks/File'
-import { Emoji } from "@/components/blocks/EmojiBlock"
+// import { Emoji } from '../blocks/Emoji'
 import { Callout } from "@/components/blocks/CalloutBlock"
 import { cn } from '@/lib/utils'
 import { ErrorBoundary } from 'react-error-boundary'
+import { ImageBlock } from "@/components/blocks/ImageBlock"
 
 interface ImageBlockContent {
   url: string;
@@ -28,6 +29,8 @@ interface ImageBlockContent {
 
 interface BlockRendererProps {
   block: Block
+  isEditing?: boolean
+  onUpdate?: (id: string, content: string) => void
 }
 
 function BlockErrorFallback({ error }: { error: Error }) {
@@ -38,61 +41,84 @@ function BlockErrorFallback({ error }: { error: Error }) {
   )
 }
 
-export function BlockRenderer({ block }: BlockRendererProps) {
+export function BlockRenderer({ block, isEditing, onUpdate }: BlockRendererProps) {
   const commonProps = {
     align: block.metadata?.align,
     styles: block.metadata?.styles,
     id: block.id,
   };
 
-  if (block.type === 'image') {
-    try {
-      const imageContent: ImageBlockContent = typeof block.content === 'string' 
-        ? JSON.parse(block.content)
-        : block.content;
-
-      return (
-        <figure className={cn(
-          "my-4",
-          imageContent.alignment === 'left' && "text-left",
-          imageContent.alignment === 'center' && "text-center",
-          imageContent.alignment === 'right' && "text-right",
-        )}>
-          <img 
-            src={imageContent.url} 
-            alt={imageContent.alt} 
-            className={cn(
-              "h-auto rounded-lg inline-block",
-              imageContent.size === 'small' && "max-w-[300px]",
-              imageContent.size === 'medium' && "max-w-[500px]",
-              imageContent.size === 'large' && "max-w-[800px]",
-              imageContent.size === 'full' && "max-w-full",
-            )}
-          />
-          {imageContent.caption && (
-            <figcaption className="mt-2 text-sm text-muted-foreground italic">
-              {imageContent.caption}
-            </figcaption>
-          )}
-        </figure>
-      )
-    } catch {
-      // Fallback for old format or invalid JSON
-      return <img src={block.content as string} alt="" className="max-w-full h-auto my-4" />
-    }
-  }
-
   switch (block.type) {
     case 'paragraph':
-      return <Paragraph {...commonProps}>{block.content}</Paragraph>;
+      return (
+        <Paragraph 
+          {...commonProps} 
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        >
+          {block.content}
+        </Paragraph>
+      );
     case 'heading':
-      return <HeadingTitle level={block.metadata?.level || 1} {...commonProps}>{block.content}</HeadingTitle>;
+      return (
+        <HeadingTitle
+          {...commonProps}
+          level={block.metadata?.level || 1}
+          align={block.metadata?.align}
+          styles={block.metadata?.styles}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        >
+          {block.content}
+        </HeadingTitle>
+      );
     case 'list':
-      return <List items={Array.isArray(block.content) ? block.content : [block.content]} listType={block.metadata?.listType || 'unordered'} {...commonProps} />;
+      return (
+        <List 
+          {...commonProps}
+          content={Array.isArray(block.content) ? block.content.join('\n') : block.content}
+          listType={block.metadata?.listType || 'unordered'} 
+          isEditing={isEditing}
+          onUpdate={(content) => {
+            // Ensure we're passing a plain string, not an array
+            onUpdate?.(block.id, content);
+          }}
+        />
+      );
     case 'code':
-      return <CodeBlock code={Array.isArray(block.content) ? block.content.join('\n') : block.content} language={block.metadata?.language} filename={block.metadata?.filename} showLineNumbers={block.metadata?.showLineNumbers} {...commonProps} />;
+      return (
+        <CodeBlock
+          {...commonProps}
+          code={block.content}
+          language={block.metadata?.language}
+          filename={block.metadata?.filename}
+          showLineNumbers={block.metadata?.showLineNumbers}
+          align={block.metadata?.align}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        />
+      );
     case 'blockquote':
-      return <Blockquote {...commonProps}>{block.content}</Blockquote>;
+      return (
+        <Blockquote 
+          {...commonProps}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        >
+          {block.content}
+        </Blockquote>
+      );
+    case 'image':
+      return (
+        <ImageBlock
+          {...commonProps}
+          content={block.content}
+          id={block.id}
+          metadata={block.metadata}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        />
+      );
     // case 'table':
     //   return <Table headers={block.metadata?.headers || []} rows={block.metadata?.rows || []} {...commonProps} />;
     // case 'toggleList':
@@ -105,12 +131,22 @@ export function BlockRenderer({ block }: BlockRendererProps) {
     //   return <Audio src={block.content} caption={block.metadata?.caption} {...commonProps} />;
     // case 'file':
     //   return <File url={block.content} name={block.metadata?.name || ''} {...commonProps} />;
-    case 'emoji':
-      return <Emoji symbol={Array.isArray(block.content) ? block.content[0] : block.content} label={block.metadata?.label} {...commonProps} />;
+    // case 'emoji':
+    //   return <Emoji symbol={block.content} label={block.metadata?.label} {...commonProps} />;
     case 'callout':
-      return <Callout type={block.metadata?.type || 'info'} title={block.metadata?.title} {...commonProps}>{block.content}</Callout>;
+      return (
+        <Callout 
+          {...commonProps}
+          type={block.metadata?.type || 'info'} 
+          title={block.metadata?.title} 
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        >
+          {block.content}
+        </Callout>
+      );
     case 'divider':
-      return <Divider align={block.metadata?.align} />;
+      return <Divider {...commonProps} />;
     default:
       return null
   }
diff --git a/packages/akiradocs/src/types/Block.ts b/packages/akiradocs/src/types/Block.ts
index 15a1b8c..4d802c8 100644
--- a/packages/akiradocs/src/types/Block.ts
+++ b/packages/akiradocs/src/types/Block.ts
@@ -3,7 +3,6 @@ export type BlockType =
   | 'heading' 
   | 'code' 
   | 'image' 
-  | 'apiReference'
   | 'list' 
   | 'blockquote' 
   | 'divider' 
@@ -13,37 +12,36 @@ export type BlockType =
   // | 'video' 
   // | 'audio' 
   // | 'file' 
-  | 'emoji'
-  | 'callout';
+  // | 'emoji'
+  | 'callout'
+  | 'apiReference';
 
 export interface Block {
   id: string;
   type: BlockType;
-  content: string | string[];
+  content: string;
   metadata?: {
-    level?: number; // For headings
-    styles?: {
-      bold?: boolean;
-      italic?: boolean;
-      underline?: boolean;
-    };
-    endpoint?: string; // For API reference
-    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'; // For API reference
-    language?: string; // For code blocks
-    alt?: string; // For images
-    caption?: string; // For images, videos, and audio
-    listType?: 'ordered' | 'unordered'; // For lists
-    size?: 'small' | 'medium' | 'large' | 'full'; // for images
-    position?: 'left' | 'center' | 'right'; // for images
-    headers?: string[]; // For tables
-    rows?: string[][]; // For tables
-    items?: { title: string; content: string }[]; // For toggle lists
-    checkedItems?: { text: string; checked: boolean }[]; // For check lists
-    name?: string; // For files
-    label?: string; // For emojis
-    filename?: string; // For code blocks
-    showLineNumbers?: boolean; // For code blocks
-    align?: 'left' | 'center' | 'right'; // For alignment
+      level?: number; // For headings
+      styles?: {
+        bold?: boolean;
+        italic?: boolean;
+        underline?: boolean;
+      };
+      language?: string; // For code blocks
+      alt?: string; // For images
+      caption?: string; // For images, videos, and audio
+      listType?: 'ordered' | 'unordered'; // For lists
+      size?: 'small' | 'medium' | 'large' | 'full'; // for images
+      position?: 'left' | 'center' | 'right'; // for images
+      headers?: string[]; // For tables
+      rows?: string[][]; // For tables
+      items?: { title: string; content: string }[]; // For toggle lists
+      checkedItems?: { text: string; checked: boolean }[]; // For check lists
+      name?: string; // For files
+      label?: string; // For emojis
+      filename?: string; // For code blocks
+      showLineNumbers?: boolean; // For code blocks
+      align?: 'left' | 'center' | 'right'; // For alignment
     type?: 'info' | 'warning' | 'success' | 'error'; // For callouts
     title?: string; // For callouts
   };
@@ -65,20 +63,20 @@ export interface Post {
 }
 
 export interface APIReferenceBlock extends Block {
-  type: 'apiReference'
-  metadata: {
-    endpoint: string
-    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+  type: 'apiReference';
+  metadata: Block['metadata'] & {
+    endpoint: string;
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
     parameters?: {
-      name: string
-      type: string
-      required: boolean
-      description: string
-    }[]
+      name: string;
+      type: string;
+      required: boolean;
+      description: string;
+    }[];
     responses?: {
-      code: number
-      description: string
-      example?: any
-    }[]
-  }
+      code: number;
+      description: string;
+      example?: any;
+    }[];
+  };
 }
diff --git a/packages/akiradocs/src/types/env.d.ts b/packages/akiradocs/src/types/env.d.ts
new file mode 100644
index 0000000..c508a33
--- /dev/null
+++ b/packages/akiradocs/src/types/env.d.ts
@@ -0,0 +1,9 @@
+declare global {
+    namespace NodeJS {
+      interface ProcessEnv {
+        OPENAI_API_KEY: string;
+      }
+    }
+  }
+  
+  export {}
\ No newline at end of file