diff --git a/packages/akiradocs/src/app/[locale]/[type]/[...slug]/page.tsx b/packages/akiradocs/src/app/[locale]/[type]/[...slug]/page.tsx
index fd8bc61..db4fce9 100644
--- a/packages/akiradocs/src/app/[locale]/[type]/[...slug]/page.tsx
+++ b/packages/akiradocs/src/app/[locale]/[type]/[...slug]/page.tsx
@@ -134,17 +134,19 @@ export default async function ContentPage({ params }: Props) {
               </div>
               <MainTitle>{t(post.title)}</MainTitle>
               <SubTitle>{t(post.description)}</SubTitle>
-              {post.blocks.map((block) => (
-                block.content !== post.title && (
+              <div className="mt-6">
+                {post.blocks.map((block) => (
+                  block.content !== post.title && (
                   <BlockRenderer 
                     key={block.id} 
                     block={{
                       ...block,
                       content: block.content
-                    }} 
-                  />
-                )
-              ))}
+                      }} 
+                    />
+                  )
+                ))}
+              </div>
               <PageNavigation prev={prev} next={next} locale={locale} />
             </div>
           </PostContainer>
diff --git a/packages/akiradocs/src/components/blocks/ArticleHeaders.tsx b/packages/akiradocs/src/components/blocks/ArticleHeaders.tsx
index 4afe7f2..ab5808e 100644
--- a/packages/akiradocs/src/components/blocks/ArticleHeaders.tsx
+++ b/packages/akiradocs/src/components/blocks/ArticleHeaders.tsx
@@ -26,13 +26,13 @@ export function ArticleHeaders({ title, setTitle, subtitle, setSubtitle, showPre
         value={title}
         onChange={(e) => setTitle(e.target.value)}
         placeholder="Article title"
-        className="text-4xl font-bold mb-4 border-none px-0"
+        className="text-4xl font-bold mb-4 border-none px-0 max-w-4xl break-words"
       />
       <Input
         value={subtitle}
         onChange={(e) => setSubtitle(e.target.value)}
         placeholder="Add a subtitle"
-        className="text-xl mb-4 border-none px-0"
+        className="text-xl mb-4 border-none px-0 max-w-4xl break-words"
       />
     </>
   )
diff --git a/packages/akiradocs/src/components/blocks/AudioBlock.tsx b/packages/akiradocs/src/components/blocks/AudioBlock.tsx
index f1e81ca..ece5a5d 100644
--- a/packages/akiradocs/src/components/blocks/AudioBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/AudioBlock.tsx
@@ -1,32 +1,198 @@
-import React from 'react';
-import { cn } from "@/lib/utils";
-
-interface AudioProps {
-  id?: string;
-  src: string;
-  caption?: string;
-  align?: 'left' | 'center' | 'right';
-  styles?: {
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-  };
+"use client"
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Music, Pause, Play } from 'lucide-react'
+import { useState, useRef, useEffect } from 'react'
+
+interface AudioBlockProps {
+  content: string
+  id: string
+  onUpdate?: (content: string) => void
+  isEditing?: boolean
+  metadata?: {
+    caption?: string
+    alignment?: 'left' | 'center' | 'right'
+    styles?: {
+      bold?: boolean
+      italic?: boolean
+      underline?: boolean
+    }
+  }
 }
 
-export function Audio({ id, src, caption, align = 'left', styles }: AudioProps) {
-  const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
-  return (
-    <div id={id} className={`mb-6 py-1 ${alignClass}`}>
-      <audio controls className="w-full bg-background border border-border rounded-md">
-        <source src={src} type="audio/mpeg" />
-        <span className="text-muted-foreground">Your browser does not support the audio element.</span>
-      </audio>
-      {caption && <p className={cn(
-        "mt-2 text-sm text-muted-foreground",
-        styles?.bold && 'font-bold',
-        styles?.italic && 'italic',
-        styles?.underline && 'underline'
-      )}>{caption}</p>}
-    </div>
-  );
+interface AudioBlockContent {
+  url: string
+  caption?: string
+  alignment?: 'left' | 'center' | 'right'
 }
+
+export function AudioBlock({ content, id, onUpdate, isEditing, metadata }: AudioBlockProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const audioRef = useRef<HTMLAudioElement>(null)
+
+  const handlePlayPause = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause()
+      } else {
+        audioRef.current.play()
+      }
+      setIsPlaying(!isPlaying)
+    }
+  }
+
+  // Add event listeners to sync the isPlaying state with audio events
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
+
+    const handlePlay = () => setIsPlaying(true)
+    const handlePause = () => setIsPlaying(false)
+    const handleEnded = () => setIsPlaying(false)
+
+    audio.addEventListener('play', handlePlay)
+    audio.addEventListener('pause', handlePause)
+    audio.addEventListener('ended', handleEnded)
+
+    return () => {
+      audio.removeEventListener('play', handlePlay)
+      audio.removeEventListener('pause', handlePause)
+      audio.removeEventListener('ended', handleEnded)
+    }
+  }, [])
+
+  const parseAudioContent = (content: string): AudioBlockContent => {
+    try {
+      return typeof content === 'string' ? JSON.parse(content) : content
+    } catch {
+      return {
+        url: content,
+        caption: metadata?.caption || '',
+        alignment: metadata?.alignment || 'center'
+      }
+    }
+  }
+
+  const UploadButton = () => (
+    <div className="text-center">
+      <input
+        type="file"
+        id={`audio-upload-${id}`}
+        className="hidden"
+        accept="audio/*"
+      />
+      <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(`audio-upload-${id}`)?.click()
+          }}
+        >
+          <Music className="h-8 w-8 text-muted-foreground" />
+          <span className="font-medium">Upload Audio</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 audioContent = parseAudioContent(content)
+  const alignment = audioContent.alignment || metadata?.alignment || 'center'
+
+  return (
+    <figure 
+      className={cn(
+        "py-1 mb-6 relative group",
+        "flex flex-col",
+        alignment === 'left' && "items-start",
+        alignment === 'center' && "items-center",
+        alignment === 'right' && "items-end",
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="relative w-full max-w-[500px]">
+        <div className="bg-muted rounded-lg p-4 flex items-center gap-4">
+          <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+            <Music className="h-6 w-6 text-primary" />
+          </div>
+          <audio 
+            ref={audioRef}
+            src={audioContent.url}
+            controls
+            className="w-full"
+          />
+        </div>
+        {isEditing && isHovered && (
+          <div 
+            className="absolute inset-0 bg-black/50 flex items-center justify-center gap-2 rounded-lg transition-opacity"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <input
+              type="file"
+              id={`audio-change-${id}`}
+              className="hidden"
+              accept="audio/*"
+            />
+            <Button
+              variant="secondary"
+              className="gap-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                document.getElementById(`audio-change-${id}`)?.click()
+              }}
+            >
+              <Music className="h-4 w-4" />
+              Change Audio
+            </Button>
+            <Button
+              variant="secondary"
+              className="gap-2"
+              onClick={handlePlayPause}
+            >
+              {isPlaying ? (
+                <>
+                  <Pause className="h-4 w-4" />
+                  Pause
+                </>
+              ) : (
+                <>
+                  <Play className="h-4 w-4" />
+                  Play
+                </>
+              )}
+            </Button>
+          </div>
+        )}
+      </div>
+      {audioContent.caption && (
+        <figcaption className={cn(
+          "mt-2 text-sm text-muted-foreground italic",
+          alignment === 'left' && "text-left",
+          alignment === 'center' && "text-center",
+          alignment === 'right' && "text-right",
+          metadata?.styles?.bold && "font-bold",
+          metadata?.styles?.italic && "italic",
+          metadata?.styles?.underline && "underline"
+        )}>
+          {audioContent.caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}
\ No newline at end of file
diff --git a/packages/akiradocs/src/components/blocks/BlockquoteBlock.tsx b/packages/akiradocs/src/components/blocks/BlockquoteBlock.tsx
index 4873b24..5230dfc 100644
--- a/packages/akiradocs/src/components/blocks/BlockquoteBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/BlockquoteBlock.tsx
@@ -40,7 +40,7 @@ export function Blockquote({ id, children, align = 'left', styles, isEditing, on
 
   if (isEditing) {
     return (
-      <div className={cn("border-l-4 border-border pl-4 text-muted-foreground", alignClass)}>
+      <div className={cn("border-l-4 border-border pl-4 py-1 mb-6 text-muted-foreground", alignClass)}>
         <textarea
           ref={textareaRef}
           value={children as string}
@@ -63,7 +63,7 @@ export function Blockquote({ id, children, align = 'left', styles, isEditing, on
     <blockquote 
       id={id} 
       className={cn(
-        "border-l-4 border-border pl-4 text-muted-foreground",
+        "border-l-4 border-border pl-4 py-1 mb-6 text-muted-foreground",
         alignClass,
         commonStyles
       )}
diff --git a/packages/akiradocs/src/components/blocks/CalloutBlock.tsx b/packages/akiradocs/src/components/blocks/CalloutBlock.tsx
index 62532c7..608f724 100644
--- a/packages/akiradocs/src/components/blocks/CalloutBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/CalloutBlock.tsx
@@ -47,7 +47,7 @@ export function Callout({ id, type, title, children, align = 'left', styles, isE
 
   return (
     <Alert className={cn(
-      'flex flex-col sm:flex-row items-start gap-4 p-4 my-4 rounded-lg border-2',
+      'flex flex-col sm:flex-row items-start gap-4 p-4 mb-7 mt-1 rounded-lg border-2',
       className,
       {
         'text-left': align === 'left',
diff --git a/packages/akiradocs/src/components/blocks/CheckListBlock.tsx b/packages/akiradocs/src/components/blocks/CheckListBlock.tsx
index 46386e7..d2d6fb8 100644
--- a/packages/akiradocs/src/components/blocks/CheckListBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/CheckListBlock.tsx
@@ -1,28 +1,132 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
+import { cn } from '@/lib/utils';
+import { Checkbox } from '@/components/ui/checkbox';
 
 interface CheckListProps {
   id?: string;
-  items: { text: string; checked: boolean }[];
-  align?: 'left' | 'center' | 'right'; // Add align prop
+  content: string;
+  align?: 'left' | 'center' | 'right';
+  styles?: {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+  };
+  isEditing?: boolean;
+  onUpdate?: (content: string) => void;
 }
 
-export function CheckList({ id, items, align = 'left' }: CheckListProps) {
+export function CheckList({
+  id,
+  content,
+  align = 'left',
+  styles,
+  isEditing,
+  onUpdate
+}: CheckListProps) {
+  const [isActive, setIsActive] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Parse content into items array
+  const parseContent = (rawContent: string): { text: string; checked: boolean }[] => {
+    try {
+      return JSON.parse(rawContent);
+    } catch {
+      return [{ text: rawContent, checked: false }];
+    }
+  };
+
+  const items = parseContent(content);
+
+  const handleItemChange = (index: number, changes: Partial<{ text: string; checked: boolean }>) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], ...changes };
+    onUpdate?.(JSON.stringify(newItems));
+  };
+
+  const handleAddItem = () => {
+    const newItems = [...items, { text: '', checked: false }];
+    onUpdate?.(JSON.stringify(newItems));
+  };
+
+  const handleRemoveItem = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index);
+    onUpdate?.(JSON.stringify(newItems));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAddItem();
+    } else if (e.key === 'Backspace' && e.currentTarget.value === '') {
+      e.preventDefault();
+      handleRemoveItem(index);
+    }
+  };
+
   const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
+  const textStyles = cn(
+    styles?.bold && 'font-bold',
+    styles?.italic && 'italic',
+    styles?.underline && 'underline'
+  );
+
+  if (isEditing && isActive) {
+    return (
+      <div 
+        ref={containerRef}
+        className={cn("space-y-2 py-1 mb-6", alignClass)}
+        onBlur={(e) => {
+          if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+            setIsActive(false);
+          }
+        }}
+      >
+        {items.map((item, index) => (
+          <div key={index} className="flex items-center gap-2">
+            <Checkbox
+              checked={item.checked}
+              onCheckedChange={(checked) => handleItemChange(index, { checked: checked as boolean })}
+            />
+            <input
+              type="text"
+              value={item.text}
+              onChange={(e) => handleItemChange(index, { text: e.target.value })}
+              onKeyDown={(e) => handleKeyDown(e, index)}
+              className={cn(
+                "flex-1 bg-transparent border-none focus:outline-none",
+                textStyles,
+                item.checked && "line-through text-muted-foreground"
+              )}
+              placeholder="Add a task..."
+              autoFocus={index === items.length - 1}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
   return (
-    <ul id={id} className={`mb-6 py-1 ${alignClass}`}>
-      {items.map((item, index) => (
-        <li key={index} className="flex items-center mb-1">
-          <input
-            type="checkbox"
-            checked={item.checked}
-            readOnly
-            className="mr-2"
-          />
-          <span className={item.checked ? 'line-through text-muted-foreground' : 'text-foreground'}>
-            {item.text}
-          </span>
-        </li>
-      ))}
-    </ul>
+    <div
+      ref={containerRef}
+      onClick={() => isEditing && setIsActive(true)}
+      className={cn("cursor-text focus:outline-none", alignClass)}
+      tabIndex={0}
+    >
+      <ul className={cn("space-y-2 py-1 mb-6", textStyles)}>
+        {items.map((item, index) => (
+          <li key={index} className="flex items-center gap-2">
+            <Checkbox
+              checked={item.checked}
+              onCheckedChange={isEditing ? (checked) => handleItemChange(index, { checked: checked as boolean }) : undefined}
+              disabled={!isEditing}
+            />
+            <span className={cn(item.checked && "line-through text-muted-foreground")}>
+              {item.text}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }
diff --git a/packages/akiradocs/src/components/blocks/CodeBlock.tsx b/packages/akiradocs/src/components/blocks/CodeBlock.tsx
index 3c8e19b..6179dca 100644
--- a/packages/akiradocs/src/components/blocks/CodeBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/CodeBlock.tsx
@@ -35,7 +35,7 @@ export function CodeBlock({
 
   if (!isEditing) {
     return (
-      <div id={id} className={`relative group rounded-lg overflow-hidden py-1 ${alignClass}`}>
+      <div id={id} className={`relative group rounded-lg overflow-hidden py-1 mb-6 ${alignClass}`}>
         {filename && (
           <div className="bg-secondary px-4 py-2 text-sm text-secondary-foreground">
             {filename}
@@ -65,7 +65,7 @@ export function CodeBlock({
   }
 
   return (
-    <div id={id} className={`relative group rounded-lg overflow-hidden py-1 ${alignClass}`}>
+    <div id={id} className={`relative group rounded-lg overflow-hidden py-1 mb-6 ${alignClass}`}>
       {filename && (
         <div className="bg-secondary px-4 py-2 text-sm text-secondary-foreground">
           {filename}
@@ -79,8 +79,8 @@ export function CodeBlock({
         {copied ? <Check size={16} /> : <Copy size={16} />}
       </button>
 
-      <div className="relative">
-        <div className="pointer-events-none">
+      <div className="relative min-h-[55px]">
+        <div className="pointer-events-none h-full">
           <SyntaxHighlighter
             language={language}
             style={oneDark}
@@ -88,7 +88,8 @@ export function CodeBlock({
             customStyle={{
               margin: 0,
               padding: '1rem',
-              borderRadius: filename ? '0' : '0.5rem'
+              borderRadius: filename ? '0' : '0.5rem',
+              height: '100%'
             }}
           >
             {code}
@@ -114,13 +115,13 @@ export function CodeBlock({
             
             onUpdate?.(content);
           }}
-          className="absolute inset-0 m-0 whitespace-pre-wrap bg-[#282c34] focus:bg-[#282c34] focus:opacity-100 opacity-0 focus:outline-none"
+          className="absolute inset-0 m-0 whitespace-pre-wrap bg-[#282c34] focus:bg-[#282c34] focus:opacity-100 opacity-0 focus:outline-none h-full"
           style={{
             ...oneDark['pre[class*="language-"]'],
             ...oneDark['code[class*="language-"]'],
             padding: '1rem',
             margin: 0,
-            lineHeight: 'inherit',
+            lineHeight: 'inherit'
           }}
           dangerouslySetInnerHTML={{ __html: code.replace(/\n/g, '<br>') }}
         />
diff --git a/packages/akiradocs/src/components/blocks/FileBlock.tsx b/packages/akiradocs/src/components/blocks/FileBlock.tsx
index bb81add..e742239 100644
--- a/packages/akiradocs/src/components/blocks/FileBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/FileBlock.tsx
@@ -1,30 +1,169 @@
-import React from 'react';
-import { cn } from "@/lib/utils";
-
-interface FileProps {
-  id?: string;
-  url: string;
-  name: string;
-  align?: 'left' | 'center' | 'right';
-  styles?: {
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-  };
+"use client"
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { 
+  FilePlus, 
+  FileText, 
+  FileImage, 
+  FileVideo, 
+  FileAudio, 
+  FileCode, 
+  FileArchive,
+  File as FileIcon
+} from 'lucide-react'
+import { useState } from 'react'
+
+interface FileBlockProps {
+  content: string
+  id: string
+  onUpdate?: (content: string) => void
+  isEditing?: boolean
+  metadata?: {
+    name?: string
+    fileType?: string
+  }
+}
+
+// Helper function to get appropriate icon based on file type
+const getFileIcon = (fileType: string) => {
+  if (fileType.startsWith('image/')) return FileImage
+  if (fileType.startsWith('video/')) return FileVideo
+  if (fileType.startsWith('audio/')) return FileAudio
+  if (fileType.startsWith('text/')) return FileText
+  if (fileType.includes('pdf')) return FileText
+  if (fileType.includes('word')) return FileText
+  if (fileType.includes('excel')) return FileText
+  if (fileType.includes('powerpoint')) return FileText
+  if (fileType.includes('code') || fileType.includes('javascript') || fileType.includes('json')) return FileCode
+  if (fileType.includes('zip') || fileType.includes('rar') || fileType.includes('archive')) return FileArchive
+  return FileIcon
+}
+
+// Helper function to format file size
+const formatFileSize = (bytes: number) => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+// Helper function to format file type display
+const formatFileType = (fileType: string) => {
+  return fileType
+    .replace('application/', '')
+    .replace('text/', '')
+    .toUpperCase()
 }
 
-export function File({ id, url, name, align = 'left', styles }: FileProps) {
-  const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
+export function FileBlock({ content, id, onUpdate, isEditing, metadata }: FileBlockProps) {
+  const [isHovered, setIsHovered] = useState(false)
+
+  const parseFileContent = (content: string) => {
+    try {
+      return typeof content === 'string' ? JSON.parse(content) : content
+    } catch {
+      return {
+        url: content,
+        name: metadata?.name || '',
+        fileType: metadata?.fileType || '',
+        size: 0
+      }
+    }
+  }
+
+  const UploadButton = () => (
+    <div className="text-center">
+      <input
+        type="file"
+        id={`file-upload-${id}`}
+        className="hidden"
+      />
+      <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(`file-upload-${id}`)?.click()
+          }}
+        >
+          <FilePlus className="h-8 w-8 text-muted-foreground" />
+          <span className="font-medium">Upload File</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 fileContent = parseFileContent(content)
+  const FileTypeIcon = getFileIcon(fileContent.fileType)
+
   return (
-    <div id={id} className={`mb-6 py-1 ${alignClass}`}>
-      <a href={url} download className={cn(
-        "text-primary hover:text-primary/80 hover:underline",
-        styles?.bold && 'font-bold',
-        styles?.italic && 'italic',
-        styles?.underline && 'underline'
-      )}>
-        {name}
-      </a>
+    <div 
+      className={cn(
+        "py-1 mb-6 relative group"
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="relative flex items-center p-4 bg-accent/50 rounded-lg hover:bg-accent transition-colors">
+        <div className="mr-4">
+          <FileTypeIcon className="h-8 w-8 text-primary" />
+        </div>
+        <div className="flex-grow">
+          <div className="flex items-center justify-between">
+            <a 
+              href={fileContent.url} 
+              download 
+              className="text-primary hover:text-primary/80 hover:underline font-medium"
+            >
+              {fileContent.name}
+            </a>
+            {fileContent.size > 0 && (
+              <span className="text-sm text-muted-foreground">
+                {formatFileSize(fileContent.size)}
+              </span>
+            )}
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">
+            {formatFileType(fileContent.fileType)}
+          </p>
+        </div>
+        
+        {isEditing && isHovered && (
+          <div className="ml-4">
+            <input
+              type="file"
+              id={`file-change-${id}`}
+              className="hidden"
+            />
+            <Button
+              variant="default"
+              size="sm"
+              className="gap-2 bg-primary hover:bg-primary/90 text-primary-foreground"
+              onClick={(e) => {
+                e.stopPropagation()
+                document.getElementById(`file-change-${id}`)?.click()
+              }}
+            >
+              <FilePlus className="h-4 w-4" />
+              Change
+            </Button>
+          </div>
+        )}
+      </div>
     </div>
-  );
-}
+  )
+}
\ No newline at end of file
diff --git a/packages/akiradocs/src/components/blocks/HeadingBlock.tsx b/packages/akiradocs/src/components/blocks/HeadingBlock.tsx
index a93c186..3dfe36c 100644
--- a/packages/akiradocs/src/components/blocks/HeadingBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/HeadingBlock.tsx
@@ -40,6 +40,7 @@ export function HeadingTitle({ id, level, children, align = 'left', styles, isEd
         className={cn(
           `font-bold mb-2 py-4 ${sizeClasses[level as keyof typeof sizeClasses]} ${alignClass}`,
           'focus:outline-none rounded-md',
+          'max-w-4xl break-words',
           styles?.italic && 'italic',
           styles?.underline && 'underline'
         )}
@@ -53,7 +54,8 @@ export function HeadingTitle({ id, level, children, align = 'left', styles, isEd
     <Tag id={id} className={cn(
       `font-bold mb-2 py-4 ${sizeClasses[level as keyof typeof sizeClasses]} ${alignClass}`,
       styles?.italic && 'italic',
-      styles?.underline && 'underline'
+      styles?.underline && 'underline',
+      'max-w-4xl break-words',
     )}>
       {children}
     </Tag>
diff --git a/packages/akiradocs/src/components/blocks/ImageBlock.tsx b/packages/akiradocs/src/components/blocks/ImageBlock.tsx
index 1c465d1..4ffbb8b 100644
--- a/packages/akiradocs/src/components/blocks/ImageBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/ImageBlock.tsx
@@ -21,24 +21,6 @@ interface ImageBlockProps {
 export function ImageBlock({ content, id, onUpdate, isEditing, metadata }: ImageBlockProps) {
   const [isHovered, setIsHovered] = useState(false)
 
-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.stopPropagation()
-    const file = e.target.files?.[0]
-    if (!file) return
-
-    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'
-    })
-
-    onUpdate?.(imageContent)
-  }
-
   // Helper function to parse content
   const parseImageContent = (content: string) => {
     try {
@@ -63,7 +45,6 @@ export function ImageBlock({ content, id, onUpdate, isEditing, metadata }: Image
         id={`image-upload-${id}`}
         className="hidden"
         accept="image/*"
-        onChange={handleFileUpload}
       />
       <div className="flex flex-col items-center gap-2">
         <Button
@@ -97,7 +78,7 @@ export function ImageBlock({ content, id, onUpdate, isEditing, metadata }: Image
   return (
     <figure 
       className={cn(
-        "my-4 relative group",
+        "py-1 mb-6 relative group",
         imageContent.alignment === 'left' && "text-left",
         imageContent.alignment === 'center' && "text-center",
         imageContent.alignment === 'right' && "text-right",
@@ -127,7 +108,6 @@ export function ImageBlock({ content, id, onUpdate, isEditing, metadata }: Image
               id={`image-change-${id}`}
               className="hidden"
               accept="image/*"
-              onChange={handleFileUpload}
             />
             <Button
               variant="secondary"
@@ -150,4 +130,4 @@ export function ImageBlock({ content, id, onUpdate, isEditing, metadata }: Image
       )}
     </figure>
   )
-}
+}
\ No newline at end of file
diff --git a/packages/akiradocs/src/components/blocks/ListBlock.tsx b/packages/akiradocs/src/components/blocks/ListBlock.tsx
index dd74009..e42f1f3 100644
--- a/packages/akiradocs/src/components/blocks/ListBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/ListBlock.tsx
@@ -234,7 +234,7 @@ export function List({
       <ListComponent
         id={id}
         className={cn(
-          "pl-8 py-1",
+          "pl-8 py-1 mb-6",
           listStyleClass,
           alignmentClasses,
           textStyles
diff --git a/packages/akiradocs/src/components/blocks/ParagraphBlock.tsx b/packages/akiradocs/src/components/blocks/ParagraphBlock.tsx
index 7f69d19..920d6c7 100644
--- a/packages/akiradocs/src/components/blocks/ParagraphBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/ParagraphBlock.tsx
@@ -58,7 +58,8 @@ export function Paragraph({
           align === 'right' && 'text-right',
           styles.bold && 'font-bold',
           styles.italic && 'italic',
-          styles.underline && 'underline'
+          styles.underline && 'underline',
+          'max-w-4xl break-words',
         )}
       />
     );
@@ -90,7 +91,8 @@ export function Paragraph({
       align === 'right' && 'text-right',
       styles.bold && 'font-bold',
       styles.italic && 'italic',
-      styles.underline && 'underline'
+      styles.underline && 'underline',
+      'max-w-4xl break-words',
     )}>
       {content}
     </p>
diff --git a/packages/akiradocs/src/components/blocks/SortableBlock.tsx b/packages/akiradocs/src/components/blocks/SortableBlock.tsx
index 9eb3de9..9afa175 100644
--- a/packages/akiradocs/src/components/blocks/SortableBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/SortableBlock.tsx
@@ -55,6 +55,11 @@ interface ImageBlockContent {
   size?: 'small' | 'medium' | 'large' | 'full'
 }
 
+interface AudioBlockContent {
+  url: string;
+  caption?: string;
+  alignment?: 'left' | 'center' | 'right';
+}
 
 export function SortableBlock({
   block,
@@ -195,6 +200,74 @@ export function SortableBlock({
 
   const [isRewriting, setIsRewriting] = useState(false)
 
+  const getVideoContent = () => {
+    if (!block.content) {
+      return {
+        url: '',
+        caption: '',
+        alignment: 'center',
+        size: 'medium'
+      }
+    }
+
+    try {
+      return typeof block.content === 'string' 
+        ? JSON.parse(block.content)
+        : block.content
+    } catch {
+      return {
+        url: block.content,
+        caption: '',
+        alignment: 'center',
+        size: 'medium'
+      }
+    }
+  }
+
+  const getAudioContent = () => {
+    if (!block.content) {
+      return {
+        url: '',
+        caption: '',
+        alignment: 'center'
+      }
+    }
+
+    try {
+      return typeof block.content === 'string' 
+        ? JSON.parse(block.content)
+        : block.content;
+    } catch {
+      return {
+        url: block.content,
+        caption: '',
+        alignment: 'center'
+      };
+    }
+  }
+
+  const getFileContent = () => {
+    if (!block.content) {
+      return {
+        url: '',
+        name: '',
+        fileType: ''
+      }
+    }
+
+    try {
+      return typeof block.content === 'string' 
+        ? JSON.parse(block.content)
+        : block.content
+    } catch {
+      return {
+        url: block.content,
+        name: '',
+        fileType: ''
+      }
+    }
+  }
+
   return showPreview ? (
     <BlockRenderer block={block} />
   ) : (
@@ -267,7 +340,15 @@ export function SortableBlock({
             <BlockFormatToolbar
               isVisible={isFocused}
               styles={block.metadata?.styles}
-              align={block.type === 'image' ? getImageContent().alignment : block.metadata?.align}
+              align={
+                block.type === 'image' 
+                  ? getImageContent().alignment 
+                  : block.type === 'video'
+                  ? getVideoContent().alignment
+                  : block.type === 'audio'
+                  ? getAudioContent().alignment
+                  : block.metadata?.align
+              }
               level={block.metadata?.level || 1}
               showLevelSelect={block.type === 'heading'}
               listType={block.metadata?.listType || 'unordered'}
@@ -287,8 +368,22 @@ export function SortableBlock({
                   const currentContent = getImageContent();
                   const updatedContent = {
                     ...currentContent,
-                    alignment: newAlign,  // For the image container alignment
-                    position: newAlign,   // For the image position within container
+                    alignment: newAlign,
+                    position: newAlign,
+                  };
+                  updateBlock(block.id, JSON.stringify(updatedContent));
+                } else if (block.type === 'video') {
+                  const currentContent = getVideoContent();
+                  const updatedContent = {
+                    ...currentContent,
+                    alignment: newAlign,
+                  };
+                  updateBlock(block.id, JSON.stringify(updatedContent));
+                } else if (block.type === 'audio') {
+                  const currentContent = getAudioContent();
+                  const updatedContent = {
+                    ...currentContent,
+                    alignment: newAlign,
                   };
                   updateBlock(block.id, JSON.stringify(updatedContent));
                 } else {
@@ -368,6 +463,57 @@ export function SortableBlock({
                 }
               }}
               isAiRewriting={isRewriting}
+              showVideoControls={block.type === 'video'}
+              videoContent={block.type === 'video' ? (() => {
+                try {
+                  return typeof block.content === 'string' 
+                    ? JSON.parse(block.content)
+                    : block.content;
+                } catch {
+                  return {
+                    url: block.content,
+                    caption: '',
+                    alignment: 'center',
+                    size: 'medium'
+                  };
+                }
+              })() : undefined}
+              onVideoMetadataChange={(metadata) => {
+                if (block.type === 'video') {
+                  const currentContent = (() => {
+                    try {
+                      return typeof block.content === 'string'
+                        ? JSON.parse(block.content)
+                        : block.content;
+                    } catch {
+                      return {
+                        url: block.content,
+                        caption: '',
+                        alignment: 'center',
+                        size: 'medium'
+                      };
+                    }
+                  })();
+                  
+                  const updatedContent = {
+                    ...currentContent,
+                    ...metadata
+                  };
+                  updateBlock(block.id, JSON.stringify(updatedContent));
+                }
+              }}
+              showAudioControls={block.type === 'audio'}
+              audioContent={block.type === 'audio' ? getAudioContent() : undefined}
+              onAudioMetadataChange={(metadata) => {
+                if (block.type === 'audio') {
+                  const currentContent = getAudioContent();
+                  const updatedContent = {
+                    ...currentContent,
+                    ...metadata
+                  };
+                  updateBlock(block.id, JSON.stringify(updatedContent));
+                }
+              }}
             />
           )}
           <BlockRenderer 
diff --git a/packages/akiradocs/src/components/blocks/TableBlock.tsx b/packages/akiradocs/src/components/blocks/TableBlock.tsx
index 118d411..5e161b3 100644
--- a/packages/akiradocs/src/components/blocks/TableBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/TableBlock.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { cn } from "@/lib/utils";
+import { Button } from '@/components/ui/button';
+import { Plus, Minus } from 'lucide-react';
 
 interface TableProps {
   id?: string;
@@ -11,35 +13,160 @@ interface TableProps {
     italic?: boolean;
     underline?: boolean;
   };
+  isEditing?: boolean;
+  onChange?: (headers: string[], rows: string[][]) => void;
 }
 
-export function Table({ id, headers, rows, align = 'left', styles }: TableProps) {
+export function Table({ id, headers, rows, align = 'left', styles, isEditing = false, onChange }: TableProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
   const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
+
+  const handleCellChange = (rowIndex: number, colIndex: number, value: string) => {
+    if (!onChange) return;
+
+    if (rowIndex === -1) {
+      const newHeaders = [...headers];
+      newHeaders[colIndex] = value;
+      onChange(newHeaders, rows);
+    } else {
+      const newRows = rows.map((row, i) =>
+        i === rowIndex ? row.map((cell, j) => (j === colIndex ? value : cell)) : row
+      );
+      onChange(headers, newRows);
+    }
+  };
+
+  const addColumn = () => {
+    if (!onChange) return;
+    const newHeaders = [...headers, 'New Column'];
+    const newRows = rows.map(row => [...row, '']);
+    onChange(newHeaders, newRows);
+  };
+
+  const addRow = () => {
+    if (!onChange) return;
+    const newRow = new Array(headers.length).fill('');
+    onChange(headers, [...rows, newRow]);
+  };
+
+  const removeColumn = (colIndex: number) => {
+    if (!onChange || headers.length <= 1) return;
+    const newHeaders = headers.filter((_, i) => i !== colIndex);
+    const newRows = rows.map(row => row.filter((_, i) => i !== colIndex));
+    onChange(newHeaders, newRows);
+  };
+
+  const removeRow = (rowIndex: number) => {
+    if (!onChange || rows.length <= 1) return;
+    const newRows = rows.filter((_, i) => i !== rowIndex);
+    onChange(headers, newRows);
+  };
+
   return (
-    <div id={id} className={`py-1 ${alignClass}`}>
+    <div
+      id={id}
+      className={`py-1 mb-6 ${alignClass} relative group`}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      tabIndex={0}
+    >
       <table className={cn(
-        "min-w-full bg-background border border-border",
+        "min-w-full bg-background border border-border relative",
         styles?.bold && 'font-bold',
         styles?.italic && 'italic',
-        styles?.underline && 'underline'
+        styles?.underline && 'underline',
+        isEditing && 'group/table'
       )}>
         <thead>
           <tr>
-            {headers.map((header, index) => (
-              <th key={index} className="py-2 px-4 border-b border-border bg-muted text-left text-muted-foreground">
-                {header}
+            {headers.map((header, colIndex) => (
+              <th key={colIndex} className={cn(
+                "py-2 px-4 border-b border-border bg-muted text-left text-muted-foreground relative",
+                isEditing && "pr-12"
+              )}>
+                <div className="flex items-center gap-2">
+                  {isEditing ? (
+                    <input
+                      type="text"
+                      value={header}
+                      onChange={(e) => handleCellChange(-1, colIndex, e.target.value)}
+                      className="w-full bg-transparent focus:outline-none"
+                    />
+                  ) : (
+                    <div className="break-words whitespace-pre-wrap">{header}</div>
+                  )}
+                  {isEditing && isFocused && headers.length > 1 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="absolute right-2 opacity-0 group-hover/table:opacity-100 transition-opacity hover:bg-gray-200 hover:text-gray-700 p-0 h-6 w-6"
+                      onClick={() => removeColumn(colIndex)}
+                    >
+                      <Minus className="h-4 w-4" />
+                    </Button>
+                  )}
+                </div>
               </th>
             ))}
+            {isEditing && isFocused && (
+              <th className="w-10 border-b border-border bg-muted">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="p-0 h-8 w-8 hover:bg-gray-200"
+                  onClick={addColumn}
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </th>
+            )}
           </tr>
         </thead>
         <tbody>
           {rows.map((row, rowIndex) => (
             <tr key={rowIndex}>
-              {row.map((cell, cellIndex) => (
-                <td key={cellIndex} className="py-2 px-4 border-b border-border text-foreground">
-                  {cell}
+              {row.map((cell, colIndex) => (
+                <td key={colIndex} className={cn(
+                  "py-2 px-4 border-b border-border text-foreground relative",
+                  isEditing && colIndex === row.length - 1 && "pr-12"
+                )}>
+                  {isEditing ? (
+                    <input
+                      type="text"
+                      value={cell}
+                      onChange={(e) => handleCellChange(rowIndex, colIndex, e.target.value)}
+                      className="w-full bg-transparent focus:outline-none"
+                    />
+                  ) : (
+                    <div className="break-words whitespace-pre-wrap">{cell}</div>
+                  )}
+                  {isEditing && isFocused && colIndex === row.length - 1 && rows.length > 1 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="absolute right-2 opacity-0 group-hover/table:opacity-100 transition-opacity hover:bg-gray-200 hover:text-gray-700 p-0 h-6 w-6"
+                      onClick={() => removeRow(rowIndex)}
+                    >
+                      <Minus className="h-4 w-4" />
+                    </Button>
+                  )}
                 </td>
               ))}
+              {isEditing && isFocused && (
+                <td className="w-10 border-b border-border">
+                  {rowIndex === rows.length - 1 ? (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="p-0 h-8 w-8 hover:bg-gray-200"
+                      onClick={addRow}
+                    >
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  ) : null}
+                </td>
+              )}
             </tr>
           ))}
         </tbody>
diff --git a/packages/akiradocs/src/components/blocks/VideoBlock.tsx b/packages/akiradocs/src/components/blocks/VideoBlock.tsx
index fc7f8f7..0127511 100644
--- a/packages/akiradocs/src/components/blocks/VideoBlock.tsx
+++ b/packages/akiradocs/src/components/blocks/VideoBlock.tsx
@@ -1,32 +1,210 @@
-import React from 'react';
-import { cn } from "@/lib/utils";
+"use client"
 
-interface VideoProps {
-  id?: string;
-  src: string;
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { VideoIcon, Pause, Play } from 'lucide-react'
+import { useState, useRef, useEffect } from 'react'
+
+interface VideoBlockProps {
+  content: string
+  id: string
+  onUpdate?: (content: string) => void
+  isEditing?: boolean
+  metadata?: {
+    caption?: string
+    alignment?: 'left' | 'center' | 'right'
+    size?: 'small' | 'medium' | 'large' | 'full'
+  }
+}
+
+interface VideoBlockContent {
+  url: string;
   caption?: string;
-  align?: 'left' | 'center' | 'right';
-  styles?: {
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-  };
+  alignment?: 'left' | 'center' | 'right';
+  size?: 'small' | 'medium' | 'large' | 'full';
 }
 
-export function Video({ id, src, caption, align = 'left', styles }: VideoProps) {
-  const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
-  return (
-    <div id={id} className={`mb-6 py-1 ${alignClass}`}>
-      <video controls className="w-full">
-        <source src={src} type="video/mp4" />
-        Your browser does not support the video tag.
-      </video>
-      {caption && <p className={cn(
-        "mt-2 text-sm text-muted-foreground",
-        styles?.bold && 'font-bold',
-        styles?.italic && 'italic',
-        styles?.underline && 'underline'
-      )}>{caption}</p>}
+export function VideoBlock({ content, id, onUpdate, isEditing, metadata }: VideoBlockProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  const handlePlayPause = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause()
+      } else {
+        videoRef.current.play()
+      }
+      setIsPlaying(!isPlaying)
+    }
+  }
+
+  // Add event listeners to sync the isPlaying state with video events
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    const handlePlay = () => setIsPlaying(true)
+    const handlePause = () => setIsPlaying(false)
+    const handleEnded = () => setIsPlaying(false)
+
+    video.addEventListener('play', handlePlay)
+    video.addEventListener('pause', handlePause)
+    video.addEventListener('ended', handleEnded)
+
+    return () => {
+      video.removeEventListener('play', handlePlay)
+      video.removeEventListener('pause', handlePause)
+      video.removeEventListener('ended', handleEnded)
+    }
+  }, [])
+
+
+  const parseVideoContent = (content: string) => {
+    try {
+      return typeof content === 'string' ? JSON.parse(content) : content
+    } catch {
+      return {
+        url: content,
+        caption: metadata?.caption || '',
+        alignment: metadata?.alignment || 'center',
+        size: metadata?.size || 'medium'
+      }
+    }
+  }
+
+  const getVideoContent = (content: string): VideoBlockContent => {
+    try {
+      return typeof content === 'string' 
+        ? JSON.parse(content)
+        : content;
+    } catch {
+      return {
+        url: content,
+        caption: '',
+        alignment: 'center',
+        size: 'medium'
+      };
+    }
+  };
+
+  const UploadButton = () => (
+    <div className="text-center">
+      <input
+        type="file"
+        id={`video-upload-${id}`}
+        className="hidden"
+        accept="video/*"
+      />
+      <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(`video-upload-${id}`)?.click()
+          }}
+        >
+          <VideoIcon className="h-8 w-8 text-muted-foreground" />
+          <span className="font-medium">Upload Video</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 videoContent = parseVideoContent(content)
+  const alignment = videoContent.alignment || metadata?.alignment || 'center'
+
+  return (
+    <figure 
+      className={cn(
+        "py-1 mb-6 relative group",
+        "flex flex-col",
+        alignment === 'left' && "items-start",
+        alignment === 'center' && "items-center",
+        alignment === 'right' && "items-end",
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="relative">
+        <video 
+          ref={videoRef}
+          src={videoContent.url}
+          controls
+          className={cn(
+            "rounded-lg",
+            videoContent.size === 'small' && "max-w-[300px]",
+            videoContent.size === 'medium' && "max-w-[500px]",
+            videoContent.size === 'large' && "max-w-[800px]",
+            videoContent.size === 'full' && "max-w-full w-full",
+          )}
+        />
+        {isEditing && isHovered && (
+          <div 
+            className="absolute inset-0 bg-black/50 flex items-center justify-center gap-2 rounded-lg transition-opacity"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <input
+              type="file"
+              id={`video-change-${id}`}
+              className="hidden"
+              accept="video/*"
+            />
+            <Button
+              variant="secondary"
+              className="gap-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                document.getElementById(`video-change-${id}`)?.click()
+              }}
+            >
+              <VideoIcon className="h-4 w-4" />
+              Change Video
+            </Button>
+            <Button
+              variant="secondary"
+              className="gap-2"
+              onClick={handlePlayPause}
+            >
+              {isPlaying ? (
+                <>
+                  <Pause className="h-4 w-4" />
+                  Pause
+                </>
+              ) : (
+                <>
+                  <Play className="h-4 w-4" />
+                  Play
+                </>
+              )}
+            </Button>
+          </div>
+        )}
+      </div>
+      {videoContent.caption && (
+        <figcaption className={cn(
+          "mt-2 text-sm text-muted-foreground italic",
+          alignment === 'left' && "text-left",
+          alignment === 'center' && "text-center",
+          alignment === 'right' && "text-right",
+        )}>
+          {videoContent.caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}
\ No newline at end of file
diff --git a/packages/akiradocs/src/components/editor/AIRewriteButton.tsx b/packages/akiradocs/src/components/editor/AIRewriteButton.tsx
index 188f35e..eb1c654 100644
--- a/packages/akiradocs/src/components/editor/AIRewriteButton.tsx
+++ b/packages/akiradocs/src/components/editor/AIRewriteButton.tsx
@@ -131,14 +131,69 @@ const blockStyles = {
       prompt: 'Expand the toggle content with more detailed explanations. Keep the toggle structure. Output only the toggle content.'
     }
   ],
-  
-  apiReference: [
+
+  table: [
     {
-      value: 'default',
-      label: 'Default',
-      prompt: 'No rewriting options available for API reference'
+      value: 'simplify',
+      label: 'Simplify',
+      prompt: 'Rewrite this table to simplify its content and structure. Output only the table data in a simplified format.'
+    },
+    {
+      value: 'detailed',
+      label: 'Detailed',
+      prompt: 'Rewrite this table to add more detailed information and context. Output only the table data with added details.'
     }
   ],
+  video: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite the video caption to be more descriptive and engaging.'
+    },
+    {
+      value: 'concise',
+      label: 'Concise',
+      prompt: 'Rewrite the video caption to be more concise and clear.'
+    }
+  ],
+  audio: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite the audio caption to be more descriptive and engaging.'
+    },
+    {
+      value: 'concise',
+      label: 'Concise',
+      prompt: 'Rewrite the audio caption to be more concise and clear.'
+    }
+  ],
+  file: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite the file caption to be more descriptive and engaging.'
+    }
+  ],
+  checkList: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite the checklist to be more descriptive and engaging.'
+    },
+    {
+      value: 'concise',
+      label: 'Concise',
+      prompt: 'Rewrite the checklist to be more concise and clear.'
+    }
+  ],
+  apiReference: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite the API reference to be more descriptive and engaging.'
+    }
+  ]
 } as const;
 
 interface AIRewriteButtonProps {
diff --git a/packages/akiradocs/src/components/editor/AddBlockButton.tsx b/packages/akiradocs/src/components/editor/AddBlockButton.tsx
index b3dba5b..00a1770 100644
--- a/packages/akiradocs/src/components/editor/AddBlockButton.tsx
+++ b/packages/akiradocs/src/components/editor/AddBlockButton.tsx
@@ -14,7 +14,7 @@ import {
   Image,
   List,
   Minus,
-  // Table,
+  Table,
   Quote,
   // ToggleLeft,
   // CheckSquare,
@@ -25,6 +25,10 @@ import {
   AlertCircle,
   Plus,
   // Search,
+  Video,
+  Music,
+  File,
+  CheckSquare,
 } from 'lucide-react'
 
 interface AddBlockButtonProps {
@@ -49,6 +53,7 @@ export const AddBlockButton = forwardRef<
   HTMLButtonElement,
   AddBlockButtonProps
 >(({ onAddBlock, onChangeType, mode, isActive, onOpenChange, type, open }, ref) => {
+  console.debug(isActive)
   const [searchTerm, setSearchTerm] = useState('')
   const searchInputRef = useRef<HTMLInputElement>(null)
 
@@ -65,7 +70,7 @@ export const AddBlockButton = forwardRef<
     { type: 'code', icon: <Code size={18} />, label: 'Code', description: 'Capture a code snippet.', group: 'Basic' },
     { type: 'image', icon: <Image size={18} />, label: 'Image', description: 'Upload or embed with a link.', group: 'Media' },
     { type: 'divider', icon: <Minus size={18} />, label: 'Divider', description: 'Visually divide your page.', group: 'Basic' },
-    // { type: 'table', icon: <Table size={18} />, label: 'Table', description: 'Add a table to your page.', group: 'Advanced' },
+    { type: 'table', icon: <Table size={18} />, label: 'Table', description: 'Add a table to your page.', group: 'Advanced' },
     { type: 'blockquote', icon: <Quote size={18} />, label: 'Quote', description: 'Capture a quote.', group: 'Basic' },
     // { type: 'toggleList', icon: <ToggleLeft size={18} />, label: 'Toggle', description: 'Toggleable content.', group: 'Advanced' },
     // { type: 'checkList', icon: <CheckSquare size={18} />, label: 'To-do list', description: 'Track tasks with a to-do list.', group: 'Basic' },
@@ -74,6 +79,10 @@ export const AddBlockButton = forwardRef<
     // { type: 'file', icon: <File size={18} />, label: 'File', description: 'Upload or link to a file.', group: 'Media' },
     // { type: 'emoji', icon: <Smile size={18} />, label: 'Emoji', description: 'Add an emoji to your page.', group: 'Basic' },
     { type: 'callout', icon: <AlertCircle size={18} />, label: 'Callout', description: 'Make writing stand out.', group: 'Advanced' },
+    { type: 'video', icon: <Video size={18} />, label: 'Video', description: 'Upload or embed a video.', group: 'Media' },
+    { type: 'audio', icon: <Music size={18} />, label: 'Audio', description: 'Embed audio content.', group: 'Media' },
+    { type: 'file', icon: <File size={18} />, label: 'File', description: 'Upload or link to a file.', group: 'Media' },
+    { type: 'checkList', icon: <CheckSquare size={18} />, label: 'To-do list', description: 'Track tasks with a to-do list.', group: 'Basic' },
   ]
 
   const filteredOptions = blockOptions.filter((option) =>
diff --git a/packages/akiradocs/src/components/editor/BlockFormatToolbar.tsx b/packages/akiradocs/src/components/editor/BlockFormatToolbar.tsx
index 2bdbf3d..8a70ee5 100644
--- a/packages/akiradocs/src/components/editor/BlockFormatToolbar.tsx
+++ b/packages/akiradocs/src/components/editor/BlockFormatToolbar.tsx
@@ -30,7 +30,7 @@ interface BlockFormatToolbarProps {
   onLanguageChange?: (language: string) => void
   onFilenameChange?: (filename: string) => void
   onShowLineNumbersChange?: (show: boolean) => void
-  showCodeControls?: boolean
+  showCodeControls?: boolean;
   showImageControls?: boolean;
   imageContent?: {
     url: string;
@@ -54,6 +54,28 @@ interface BlockFormatToolbarProps {
   onAiRewrite?: (style: string) => Promise<void>
   isAiRewriting?: boolean
   blockType?: BlockType
+  showVideoControls?: boolean;
+  videoContent?: {
+    url: string;
+    caption?: string;
+    alignment?: 'left' | 'center' | 'right';
+    size?: 'small' | 'medium' | 'large' | 'full';
+  };
+  onVideoMetadataChange?: (metadata: Partial<{
+    caption: string;
+    alignment: 'left' | 'center' | 'right';
+    size: 'small' | 'medium' | 'large' | 'full';
+  }>) => void;
+  showAudioControls?: boolean;
+  audioContent?: {
+    url: string;
+    caption?: string;
+    alignment?: 'left' | 'center' | 'right';
+  };
+  onAudioMetadataChange?: (metadata: Partial<{
+    caption: string;
+    alignment: 'left' | 'center' | 'right';
+  }>) => void;
 }
 
 export function BlockFormatToolbar({ 
@@ -91,7 +113,17 @@ export function BlockFormatToolbar({
   onAiRewrite,
   isAiRewriting,
   blockType,
+  showVideoControls = false,
+  videoContent,
+  onVideoMetadataChange,
+  showAudioControls = false,
+  audioContent,
+  onAudioMetadataChange,
 }: BlockFormatToolbarProps) {
+  if (blockType === 'file') {
+    return null;
+  }
+
   return (
     <div className={cn(
       "absolute -top-10 left-1/2 -translate-x-1/2 z-50",
@@ -101,7 +133,7 @@ export function BlockFormatToolbar({
       "bg-popover border shadow-md rounded-md",
       className
     )}>
-      {!showImageControls && (
+      {!showImageControls && !showCodeControls && !showVideoControls && !showAudioControls && blockType !== 'table' && (
         <>
           <ToggleGroup 
             type="multiple" 
@@ -115,9 +147,11 @@ export function BlockFormatToolbar({
             }}
             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>
+            {blockType !== 'heading' && (
+              <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>
@@ -125,26 +159,26 @@ export function BlockFormatToolbar({
               <Underline className="h-3.5 w-3.5" />
             </ToggleGroupItem>
           </ToggleGroup>
-          <Separator orientation="vertical" className="mx-0.5 h-7" />
+          {blockType !== 'blockquote' && blockType !== 'list' && blockType !== 'checkList' && <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" />
+      {!showCodeControls && !showCalloutControls && blockType !== 'blockquote' && blockType !== 'list' && blockType !== 'checkList' && blockType !== 'table' && (
+        <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>
+          </ToggleGroupItem>
+        </ToggleGroup>
+      )}
 
       {showCodeControls && (
         <>
-          <Separator orientation="vertical" className="mx-0.5 h-7" />
-          
           <Input
             value={language}
             onChange={(e) => onLanguageChange?.(e.target.value)}
@@ -282,18 +316,62 @@ export function BlockFormatToolbar({
           />
         </>
       )}
-       <Separator orientation="vertical" className="mx-0.5 h-7" />
+
+      {showVideoControls && (
+        <>
+          <Separator orientation="vertical" className="mx-0.5 h-7" />
+          
+          <Input
+            value={videoContent?.caption || ''}
+            onChange={(e) => onVideoMetadataChange?.({ caption: e.target.value })}
+            placeholder="Caption"
+            className="h-7 w-32 text-xs"
+          />
+          
+          <Select 
+            value={videoContent?.size || 'medium'}
+            onValueChange={(value) => onVideoMetadataChange?.({ 
+              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>
+        </>
+      )}
+
+      {showAudioControls && (
+        <>
+          <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>
-          )}
+          <Input
+            value={audioContent?.caption || ''}
+            onChange={(e) => onAudioMetadataChange?.({ caption: e.target.value })}
+            placeholder="Caption"
+            className="h-7 w-32 text-xs"
+          />
+        </>
+      )}
+
+      {!showImageControls && !showVideoControls && !showAudioControls && (
+        <>
+          {!showCalloutControls && blockType !== 'table' && <Separator orientation="vertical" className="mx-0.5 h-7" />}
+          <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/tts/TextToSpeech.tsx b/packages/akiradocs/src/components/tts/TextToSpeech.tsx
index aef01d1..34bede0 100644
--- a/packages/akiradocs/src/components/tts/TextToSpeech.tsx
+++ b/packages/akiradocs/src/components/tts/TextToSpeech.tsx
@@ -96,8 +96,7 @@ export function TextToSpeech({ blocks }: TextToSpeechProps) {
                   ? JSON.parse(block.content)
                   : block.content;
                 const caption = imageContent.caption ? `: ${imageContent.caption}` : '';
-                const alt = imageContent.alt ? ` showing ${imageContent.alt}` : '';
-                return `Image ${alt} ${caption}. `;
+                return `Image for ${caption}. `;
               } catch {
                 return 'Image. ';
               }
@@ -114,9 +113,6 @@ export function TextToSpeech({ blocks }: TextToSpeechProps) {
               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}` : '';
diff --git a/packages/akiradocs/src/lib/renderers/BlockRenderer.tsx b/packages/akiradocs/src/lib/renderers/BlockRenderer.tsx
index c139e4a..ba5d2a9 100644
--- a/packages/akiradocs/src/lib/renderers/BlockRenderer.tsx
+++ b/packages/akiradocs/src/lib/renderers/BlockRenderer.tsx
@@ -9,7 +9,7 @@ import { CodeBlock } from "@/components/blocks/CodeBlock"
 // import { Image } from '../blocks/Image'
 // import { Table } from '../blocks/Table'
 // import { ToggleList } from '../blocks/ToggleList'
-// import { CheckList } from '../blocks/CheckList'
+import { CheckList } from "@/components/blocks/CheckListBlock"
 // import { Video } from '../blocks/Video'
 // import { Audio } from '../blocks/Audio'
 // import { File } from '../blocks/File'
@@ -18,6 +18,10 @@ import { Callout } from "@/components/blocks/CalloutBlock"
 import { cn } from '@/lib/utils'
 import { ErrorBoundary } from 'react-error-boundary'
 import { ImageBlock } from "@/components/blocks/ImageBlock"
+import { Table } from '@/components/blocks/TableBlock'
+import { VideoBlock } from "@/components/blocks/VideoBlock"
+import { AudioBlock } from "@/components/blocks/AudioBlock"
+import { FileBlock } from "@/components/blocks/FileBlock"
 
 interface ImageBlockContent {
   url: string;
@@ -119,20 +123,19 @@ export function BlockRenderer({ block, isEditing, onUpdate }: BlockRendererProps
           onUpdate={(content) => onUpdate?.(block.id, content)}
         />
       );
-    // case 'table':
-    //   return <Table headers={block.metadata?.headers || []} rows={block.metadata?.rows || []} {...commonProps} />;
-    // case 'toggleList':
-    //   return <ToggleList items={block.metadata?.items || []} {...commonProps} />;
-    // case 'checkList':
-    //   return <CheckList items={block.metadata?.checkedItems || []} {...commonProps} />;
-    // case 'video':
-    //   return <Video src={block.content} caption={block.metadata?.caption} {...commonProps} />;
-    // case 'audio':
-    //   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={block.content} label={block.metadata?.label} {...commonProps} />;
+    case 'table':
+      return (
+        <Table
+          headers={block.metadata?.headers || ['Column 1', 'Column 2']}
+          rows={block.metadata?.rows || [['', '']]}
+          isEditing={isEditing}
+          onChange={(headers, rows) => {
+            onUpdate?.(block.id, JSON.stringify({ headers, rows }));
+          }}
+          align={block.metadata?.align}
+          styles={block.metadata?.styles}
+        />
+      );
     case 'callout':
       return (
         <Callout 
@@ -147,6 +150,86 @@ export function BlockRenderer({ block, isEditing, onUpdate }: BlockRendererProps
       );
     case 'divider':
       return <Divider {...commonProps} />;
+    case 'video':
+      const videoContent = (() => {
+        try {
+          return typeof block.content === 'string'
+            ? JSON.parse(block.content)
+            : block.content;
+        } catch {
+          return {
+            url: block.content,
+            caption: '',
+            alignment: 'center',
+            size: 'medium'
+          };
+        }
+      })();
+      
+      return (
+        <VideoBlock
+          {...commonProps}
+          content={block.content}
+          id={block.id}
+          metadata={{
+            ...block.metadata,
+            caption: videoContent.caption,
+            alignment: videoContent.alignment,
+            size: videoContent.size
+          }}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        />
+      );
+    case 'audio':
+      const audioContent = (() => {
+        try {
+          return typeof block.content === 'string'
+            ? JSON.parse(block.content)
+            : block.content;
+        } catch {
+          return {
+            url: block.content,
+            caption: '',
+            alignment: 'center'
+          };
+        }
+      })();
+      
+      return (
+        <AudioBlock
+          {...commonProps}
+          content={block.content}
+          id={block.id}
+          metadata={{
+            ...block.metadata,
+            caption: audioContent.caption,
+            alignment: audioContent.alignment
+          }}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        />
+      );
+    case 'file':
+      return (
+        <FileBlock
+          {...commonProps}
+          content={block.content}
+          id={block.id}
+          metadata={block.metadata}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        />
+      );
+    case 'checkList':
+      return (
+        <CheckList
+          {...commonProps}
+          content={block.content}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        />
+      );
     default:
       return null
   }
diff --git a/packages/akiradocs/src/types/Block.ts b/packages/akiradocs/src/types/Block.ts
index 4d802c8..61f1b7a 100644
--- a/packages/akiradocs/src/types/Block.ts
+++ b/packages/akiradocs/src/types/Block.ts
@@ -6,12 +6,12 @@ export type BlockType =
   | 'list' 
   | 'blockquote' 
   | 'divider' 
-  // | 'table'
+  | 'table'
   // | 'toggleList' 
-  // | 'checkList' 
-  // | 'video' 
-  // | 'audio' 
-  // | 'file' 
+  | 'checkList' 
+  | 'video' 
+  | 'audio' 
+  | 'file' 
   // | 'emoji'
   | 'callout'
   | 'apiReference';
diff --git a/packages/create-app/package.json b/packages/create-app/package.json
index 818459e..0864aeb 100644
--- a/packages/create-app/package.json
+++ b/packages/create-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-akiradocs",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "description": "Create Akira Docs documentation sites with one command",
   "main": "./dist/index.js",
   "type": "module",
diff --git a/packages/editor/src/app/api/upload/delete-from-root/route.ts b/packages/editor/src/app/api/upload/delete-from-root/route.ts
new file mode 100644
index 0000000..c18bc1d
--- /dev/null
+++ b/packages/editor/src/app/api/upload/delete-from-root/route.ts
@@ -0,0 +1,20 @@
+import { unlink } from 'fs/promises'
+import { NextRequest, NextResponse } from 'next/server'
+import path from 'path'
+
+export async function DELETE(request: NextRequest) {
+  try {
+    const filename = request.nextUrl.searchParams.get('filename')
+    if (!filename) {
+      return NextResponse.json({ error: 'No filename provided' }, { status: 400 })
+    }
+
+    const rootPublicPath = path.join(process.cwd(), '..', 'public', filename)
+    await unlink(rootPublicPath)
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error deleting file from root:', error)
+    return NextResponse.json({ error: 'Failed to delete file from root' }, { status: 500 })
+  }
+} 
\ No newline at end of file
diff --git a/packages/editor/src/app/api/upload/move-to-root/route.ts b/packages/editor/src/app/api/upload/move-to-root/route.ts
new file mode 100644
index 0000000..704e592
--- /dev/null
+++ b/packages/editor/src/app/api/upload/move-to-root/route.ts
@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { copyFile, unlink } from 'fs/promises'
+import path from 'path'
+
+export async function POST(request: NextRequest) {
+  try {
+    const filename = request.nextUrl.searchParams.get('filename')
+    if (!filename) {
+      return NextResponse.json({ error: 'No filename provided' }, { status: 400 })
+    }
+
+    const editorPublicPath = path.join(process.cwd(), 'public', filename)
+    const rootPublicPath = path.join(process.cwd(), '..', 'public', filename)
+
+    // Copy to root public folder
+    await copyFile(editorPublicPath, rootPublicPath)
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error moving file to root:', error)
+    return NextResponse.json({ error: 'Failed to move file' }, { status: 500 })
+  }
+} 
\ No newline at end of file
diff --git a/packages/editor/src/app/api/upload/route.ts b/packages/editor/src/app/api/upload/route.ts
new file mode 100644
index 0000000..9d85e20
--- /dev/null
+++ b/packages/editor/src/app/api/upload/route.ts
@@ -0,0 +1,113 @@
+import { writeFile, unlink } from 'fs/promises'
+import { NextRequest, NextResponse } from 'next/server'
+import path from 'path'
+
+// Define allowed file extensions and their corresponding MIME types
+const ALLOWED_FILE_TYPES = new Set([
+  // Images
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+  'image/svg+xml',
+  // Documents
+  'application/pdf',
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
+  'application/vnd.ms-excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
+  'text/plain',
+  'text/csv',
+  // Audio
+  'audio/mpeg',
+  'audio/wav',
+  'audio/ogg',
+  // Video
+  'video/mp4',
+  'video/webm',
+  'video/ogg',
+  // Archives
+  'application/zip',
+  'application/x-rar-compressed',
+  // Code
+  'text/javascript',
+  'application/json',
+  'text/html',
+  'text/css',
+  'text/markdown'
+])
+
+// Maximum file size (in bytes) - 50MB
+const MAX_FILE_SIZE = 50 * 1024 * 1024
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData()
+    const file = formData.get('file') as File
+    
+    if (!file) {
+      return NextResponse.json({ error: 'No file uploaded' }, { status: 400 })
+    }
+
+    // Check file size
+    if (file.size > MAX_FILE_SIZE) {
+      return NextResponse.json(
+        { error: 'File size exceeds 50MB limit' }, 
+        { status: 400 }
+      )
+    }
+
+    // Check file type
+    if (!ALLOWED_FILE_TYPES.has(file.type)) {
+      return NextResponse.json(
+        { error: 'File type not allowed' }, 
+        { status: 400 }
+      )
+    }
+
+    const bytes = await file.arrayBuffer()
+    const buffer = Buffer.from(bytes)
+
+    // Generate a unique filename while preserving the original extension
+    const fileExtension = path.extname(file.name)
+    const baseFilename = path.basename(file.name, fileExtension)
+    const sanitizedFilename = baseFilename.replace(/[^a-zA-Z0-9]/g, '_')
+    const uniqueFilename = `${Date.now()}-${sanitizedFilename}${fileExtension}`
+
+    // Save to editor's public folder
+    const editorPublicPath = path.join(process.cwd(), 'public', uniqueFilename)
+    await writeFile(editorPublicPath, buffer)
+
+    return NextResponse.json({ 
+      filename: uniqueFilename,
+      originalName: file.name,
+      type: file.type,
+      size: file.size
+    })
+  } catch (error) {
+    console.error('Error uploading file:', error)
+    return NextResponse.json(
+      { error: 'Failed to upload file' }, 
+      { status: 500 }
+    )
+  }
+}
+
+export async function DELETE(request: NextRequest) {
+  try {
+    const filename = request.nextUrl.searchParams.get('filename')
+    if (!filename) {
+      return NextResponse.json({ error: 'No filename provided' }, { status: 400 })
+    }
+
+    const editorPublicPath = path.join(process.cwd(), 'public', filename)
+    await unlink(editorPublicPath)
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error deleting file:', error)
+    return NextResponse.json({ error: 'Failed to delete file' }, { status: 500 })
+  }
+} 
\ No newline at end of file
diff --git a/packages/editor/src/app/editMode/[...slug]/page.tsx b/packages/editor/src/app/editMode/[...slug]/page.tsx
index 4426586..116dbff 100644
--- a/packages/editor/src/app/editMode/[...slug]/page.tsx
+++ b/packages/editor/src/app/editMode/[...slug]/page.tsx
@@ -10,6 +10,7 @@ import { TitleBar } from '@/components/layout/TitleBar'
 import { DndContext, DragEndEvent, MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core'
 import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { SortableBlock } from '@/components/blocks/SortableBlock'
+import { deleteImageFromPublic, moveImageToRoot } from '@/lib/fileUtils'
 
 type Block = {
   id: string
@@ -28,7 +29,7 @@ export default function ArticleEditorContent({ params }: { params: Promise<{ slu
   const [isLoading, setIsLoading] = useState(true)
   const [isSaving, setIsSaving] = useState(false)
   const [activeChangeTypeId, setActiveChangeTypeId] = useState<string | null>(null)
-
+  const [deletedImages, setDeletedImages] = useState<string[]>([])
 
   useEffect(() => {
     const loadFileContent = async () => {
@@ -64,6 +65,64 @@ export default function ArticleEditorContent({ params }: { params: Promise<{ slu
 
     setIsSaving(true)
     try {
+      // Delete files that were explicitly marked for deletion
+      await Promise.all(
+        deletedImages.map(filename => 
+          fetch(`/api/upload/delete-from-root?filename=${encodeURIComponent(filename)}`, {
+            method: 'DELETE'
+          })
+        )
+      )
+
+      // Get all current media files from blocks
+      const currentFiles = blocks
+        .filter(block => block.type === 'image' || block.type === 'video' || block.type === 'audio' || block.type === 'file')
+        .map(block => {
+          try {
+            const content = JSON.parse(block.content)
+            return content.url.split('/').pop()
+          } catch {
+            return block.content.split('/').pop()
+          }
+        })
+        .filter(Boolean)
+
+      // Fetch the current article to compare files
+      const response = await fetch(`/api/files?path=${encodeURIComponent(filePath)}`)
+      if (response.ok) {
+        const data = await response.json()
+        const oldFiles = data.blocks
+          ?.filter((block: Block) => block.type === 'image' || block.type === 'video' || block.type === 'audio' || block.type === 'file')
+          .map((block: Block) => {
+            try {
+              const content = JSON.parse(block.content)
+              return content.url.split('/').pop()
+            } catch {
+              return block.content.split('/').pop()
+            }
+          })
+          .filter(Boolean) || []
+
+        // Delete files that are no longer used
+        const filesToDelete = oldFiles.filter((file: string) => !currentFiles.includes(file))
+        await Promise.all(
+          filesToDelete.map((filename: string) =>
+            fetch(`/api/upload/delete-from-root?filename=${encodeURIComponent(filename)}`, {
+              method: 'DELETE'
+            })
+          )
+        )
+      }
+
+      // Move current files to root
+      await Promise.all(
+        currentFiles.map(filename =>
+          fetch(`/api/upload/move-to-root?filename=${encodeURIComponent(filename)}`, {
+            method: 'POST'
+          })
+        )
+      )
+
       const content = {
         title,
         description: subtitle,
@@ -72,50 +131,15 @@ export default function ArticleEditorContent({ params }: { params: Promise<{ slu
         blocks
       }
 
-      const response = await fetch('/api/files', {
+      const saveResponse = await fetch('/api/files', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ path: filePath, content })
       })
 
-      if (!response.ok) throw new Error('Failed to save file')
-
-      // Update root metadata with the new title
-      const rootMetaPath = filePath.split("/").slice(0, 2).join("/") + "/_meta.json"
-      const rootMetaResponse = await fetch(`/api/files?path=${encodeURIComponent(rootMetaPath)}`)
+      if (!saveResponse.ok) throw new Error('Failed to save file')
       
-      if (rootMetaResponse.ok) {
-        const rootMeta = await rootMetaResponse.json()
-        const pathParts = filePath.split('/')
-        let currentSection = rootMeta
-        
-        // Navigate to the correct section
-        for (let i = 1; i < pathParts.length - 1; i++) {
-          const section = pathParts[i]
-          if (i === 1) continue // Skip first section (docs/articles)
-          
-          if (currentSection[section] && currentSection[section].items) {
-            currentSection = currentSection[section].items
-          }
-        }
-
-        // Update the title in metadata
-        const fileName = pathParts[pathParts.length - 1].replace('.json', '')
-        if (currentSection[fileName]) {
-          currentSection[fileName].title = title // Use the title from the saved content
-        }
-
-        // Save the updated metadata
-        await fetch('/api/files', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            path: rootMetaPath,
-            content: rootMeta
-          })
-        })
-      }
-
+      setDeletedImages([])
       toast.success('Changes saved successfully')
     } catch (error) {
       console.error('Error saving file:', error)
@@ -133,8 +157,15 @@ export default function ArticleEditorContent({ params }: { params: Promise<{ slu
       metadata: {}
     }
 
-    if (newBlock.type === 'list') {
-      newBlock.content = '[]'
+    if (newBlock.type === 'table') {
+      newBlock.metadata = {
+        headers: ['Column 1', 'Column 2'],
+        rows: [['', '']]
+      }
+    }
+
+    if (newBlock.type === 'checkList') {
+      newBlock.content = JSON.stringify([{ text: '', checked: false }]);
     }
 
     if (afterId === 'new') {
@@ -149,12 +180,12 @@ export default function ArticleEditorContent({ params }: { params: Promise<{ slu
   const updateBlock = (id: string, content: string) => {
     setBlocks(blocks.map(block => {
       if (block.id === id) {
-        if (block.type === 'list') {
+        if (block.type === 'table') {
           try {
-            const parsed = JSON.parse(content)
-            return { ...block, content: JSON.stringify(Array.isArray(parsed) ? parsed : [parsed]) }
+            const { headers, rows } = JSON.parse(content);
+            return { ...block, metadata: { ...block.metadata, headers, rows } };
           } catch {
-            return { ...block, content: JSON.stringify([content]) }
+            return block;
           }
         }
         return { ...block, content }
@@ -168,7 +199,20 @@ export default function ArticleEditorContent({ params }: { params: Promise<{ slu
     setActiveChangeTypeId(null)
   }
 
-  const deleteBlock = (id: string) => {
+  const deleteBlock = async (id: string) => {
+    const block = blocks.find(b => b.id === id)
+    if (block?.type === 'image' || block?.type === 'video' || block?.type === 'audio' || block?.type === 'file') {
+      try {
+        const content = JSON.parse(block.content)
+        const filename = content.url.split('/').pop()
+        if (filename) {
+          await deleteImageFromPublic(filename)
+          setDeletedImages(prev => [...prev, filename])
+        }
+      } catch (error) {
+        console.error('Error deleting file:', error)
+      }
+    }
     setBlocks(blocks.filter(block => block.id !== id))
   }
 
@@ -233,36 +277,38 @@ export default function ArticleEditorContent({ params }: { params: Promise<{ slu
             setSubtitle={setSubtitle}
             showPreview={showPreview}
           />
-          <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
-            <SortableContext items={blocks} strategy={verticalListSortingStrategy}>
-              {blocks.map((block) => (
-                <SortableBlock
-                  key={block.id}
-                  block={block}
-                  updateBlock={updateBlock}
-                  changeBlockType={changeBlockType}
-                  addBlock={addBlock}
-                  deleteBlock={deleteBlock}
-                  showPreview={showPreview}
-                  isChangeTypeActive={activeChangeTypeId === block.id}
-                  setActiveChangeTypeId={setActiveChangeTypeId}
-                  updateBlockMetadata={updateBlockMetadata}
-                />
-              ))}
-            </SortableContext>
-          </DndContext>
-          {blocks.length === 0 && !showPreview && (
-            <div className="flex justify-center my-8">
-              <Button
-                onClick={() => addBlock('new')}
-                variant="outline"
-                className="flex items-center gap-2"
-              >
-                <Plus size={16} />
-                Add Block
-              </Button>
-            </div>
-          )}
+          <div className='mt-6'>
+            <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
+              <SortableContext items={blocks} strategy={verticalListSortingStrategy}>
+                {blocks.map((block) => (
+                  <SortableBlock
+                    key={block.id}
+                    block={block}
+                    updateBlock={updateBlock}
+                    changeBlockType={changeBlockType}
+                    addBlock={addBlock}
+                    deleteBlock={deleteBlock}
+                    showPreview={showPreview}
+                    isChangeTypeActive={activeChangeTypeId === block.id}
+                    setActiveChangeTypeId={setActiveChangeTypeId}
+                    updateBlockMetadata={updateBlockMetadata}
+                  />
+                ))}
+              </SortableContext>
+            </DndContext>
+            {blocks.length === 0 && !showPreview && (
+              <div className="flex justify-center my-8">
+                <Button
+                  onClick={() => addBlock('new')}
+                  variant="outline"
+                  className="flex items-center gap-2"
+                >
+                  <Plus size={16} />
+                  Add Block
+                </Button>
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/editor/src/components/blocks/ArticleHeaders.tsx b/packages/editor/src/components/blocks/ArticleHeaders.tsx
index 4afe7f2..ab5808e 100644
--- a/packages/editor/src/components/blocks/ArticleHeaders.tsx
+++ b/packages/editor/src/components/blocks/ArticleHeaders.tsx
@@ -26,13 +26,13 @@ export function ArticleHeaders({ title, setTitle, subtitle, setSubtitle, showPre
         value={title}
         onChange={(e) => setTitle(e.target.value)}
         placeholder="Article title"
-        className="text-4xl font-bold mb-4 border-none px-0"
+        className="text-4xl font-bold mb-4 border-none px-0 max-w-4xl break-words"
       />
       <Input
         value={subtitle}
         onChange={(e) => setSubtitle(e.target.value)}
         placeholder="Add a subtitle"
-        className="text-xl mb-4 border-none px-0"
+        className="text-xl mb-4 border-none px-0 max-w-4xl break-words"
       />
     </>
   )
diff --git a/packages/editor/src/components/blocks/AudioBlock.tsx b/packages/editor/src/components/blocks/AudioBlock.tsx
index f1e81ca..a80013b 100644
--- a/packages/editor/src/components/blocks/AudioBlock.tsx
+++ b/packages/editor/src/components/blocks/AudioBlock.tsx
@@ -1,32 +1,221 @@
-import React from 'react';
-import { cn } from "@/lib/utils";
-
-interface AudioProps {
-  id?: string;
-  src: string;
-  caption?: string;
-  align?: 'left' | 'center' | 'right';
-  styles?: {
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-  };
+"use client"
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Music, Pause, Play } from 'lucide-react'
+import { useState, useRef, useEffect } from 'react'
+import { saveAudioToPublic } from '@/lib/fileUtils'
+
+interface AudioBlockProps {
+  content: string
+  id: string
+  onUpdate?: (content: string) => void
+  isEditing?: boolean
+  metadata?: {
+    caption?: string
+    alignment?: 'left' | 'center' | 'right'
+    styles?: {
+      bold?: boolean
+      italic?: boolean
+      underline?: boolean
+    }
+  }
 }
 
-export function Audio({ id, src, caption, align = 'left', styles }: AudioProps) {
-  const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
-  return (
-    <div id={id} className={`mb-6 py-1 ${alignClass}`}>
-      <audio controls className="w-full bg-background border border-border rounded-md">
-        <source src={src} type="audio/mpeg" />
-        <span className="text-muted-foreground">Your browser does not support the audio element.</span>
-      </audio>
-      {caption && <p className={cn(
-        "mt-2 text-sm text-muted-foreground",
-        styles?.bold && 'font-bold',
-        styles?.italic && 'italic',
-        styles?.underline && 'underline'
-      )}>{caption}</p>}
-    </div>
-  );
+interface AudioBlockContent {
+  url: string
+  caption?: string
+  alignment?: 'left' | 'center' | 'right'
 }
+
+export function AudioBlock({ content, id, onUpdate, isEditing, metadata }: AudioBlockProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const audioRef = useRef<HTMLAudioElement>(null)
+
+  const handlePlayPause = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause()
+      } else {
+        audioRef.current.play()
+      }
+      setIsPlaying(!isPlaying)
+    }
+  }
+
+  // Add event listeners to sync the isPlaying state with audio events
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
+
+    const handlePlay = () => setIsPlaying(true)
+    const handlePause = () => setIsPlaying(false)
+    const handleEnded = () => setIsPlaying(false)
+
+    audio.addEventListener('play', handlePlay)
+    audio.addEventListener('pause', handlePause)
+    audio.addEventListener('ended', handleEnded)
+
+    return () => {
+      audio.removeEventListener('play', handlePlay)
+      audio.removeEventListener('pause', handlePause)
+      audio.removeEventListener('ended', handleEnded)
+    }
+  }, [])
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation()
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    try {
+      const filename = await saveAudioToPublic(file, content) 
+      
+      const audioContent = JSON.stringify({
+        url: `/${filename}`,
+        caption: metadata?.caption,
+        alignment: metadata?.alignment || 'center'
+      })
+
+      onUpdate?.(audioContent)
+    } catch (error) {
+      console.error('Failed to upload audio:', error)
+    }
+  }
+
+  const parseAudioContent = (content: string): AudioBlockContent => {
+    try {
+      return typeof content === 'string' ? JSON.parse(content) : content
+    } catch {
+      return {
+        url: content,
+        caption: metadata?.caption || '',
+        alignment: metadata?.alignment || 'center'
+      }
+    }
+  }
+
+  const UploadButton = () => (
+    <div className="text-center">
+      <input
+        type="file"
+        id={`audio-upload-${id}`}
+        className="hidden"
+        accept="audio/*"
+        onChange={handleFileUpload}
+      />
+      <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(`audio-upload-${id}`)?.click()
+          }}
+        >
+          <Music className="h-8 w-8 text-muted-foreground" />
+          <span className="font-medium">Upload Audio</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 audioContent = parseAudioContent(content)
+  const alignment = audioContent.alignment || metadata?.alignment || 'center'
+
+  return (
+    <figure 
+      className={cn(
+        "py-1 mb-6 relative group",
+        "flex flex-col",
+        alignment === 'left' && "items-start",
+        alignment === 'center' && "items-center",
+        alignment === 'right' && "items-end",
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="relative w-full max-w-[500px]">
+        <div className="bg-muted rounded-lg p-4 flex items-center gap-4">
+          <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+            <Music className="h-6 w-6 text-primary" />
+          </div>
+          <audio 
+            ref={audioRef}
+            src={audioContent.url}
+            controls
+            className="w-full"
+          />
+        </div>
+        {isEditing && isHovered && (
+          <div 
+            className="absolute inset-0 bg-black/50 flex items-center justify-center gap-2 rounded-lg transition-opacity"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <input
+              type="file"
+              id={`audio-change-${id}`}
+              className="hidden"
+              accept="audio/*"
+              onChange={handleFileUpload}
+            />
+            <Button
+              variant="secondary"
+              className="gap-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                document.getElementById(`audio-change-${id}`)?.click()
+              }}
+            >
+              <Music className="h-4 w-4" />
+              Change Audio
+            </Button>
+            <Button
+              variant="secondary"
+              className="gap-2"
+              onClick={handlePlayPause}
+            >
+              {isPlaying ? (
+                <>
+                  <Pause className="h-4 w-4" />
+                  Pause
+                </>
+              ) : (
+                <>
+                  <Play className="h-4 w-4" />
+                  Play
+                </>
+              )}
+            </Button>
+          </div>
+        )}
+      </div>
+      {audioContent.caption && (
+        <figcaption className={cn(
+          "mt-2 text-sm text-muted-foreground italic",
+          alignment === 'left' && "text-left",
+          alignment === 'center' && "text-center",
+          alignment === 'right' && "text-right",
+          metadata?.styles?.bold && "font-bold",
+          metadata?.styles?.italic && "italic",
+          metadata?.styles?.underline && "underline"
+        )}>
+          {audioContent.caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}
\ No newline at end of file
diff --git a/packages/editor/src/components/blocks/BlockquoteBlock.tsx b/packages/editor/src/components/blocks/BlockquoteBlock.tsx
index 4873b24..5230dfc 100644
--- a/packages/editor/src/components/blocks/BlockquoteBlock.tsx
+++ b/packages/editor/src/components/blocks/BlockquoteBlock.tsx
@@ -40,7 +40,7 @@ export function Blockquote({ id, children, align = 'left', styles, isEditing, on
 
   if (isEditing) {
     return (
-      <div className={cn("border-l-4 border-border pl-4 text-muted-foreground", alignClass)}>
+      <div className={cn("border-l-4 border-border pl-4 py-1 mb-6 text-muted-foreground", alignClass)}>
         <textarea
           ref={textareaRef}
           value={children as string}
@@ -63,7 +63,7 @@ export function Blockquote({ id, children, align = 'left', styles, isEditing, on
     <blockquote 
       id={id} 
       className={cn(
-        "border-l-4 border-border pl-4 text-muted-foreground",
+        "border-l-4 border-border pl-4 py-1 mb-6 text-muted-foreground",
         alignClass,
         commonStyles
       )}
diff --git a/packages/editor/src/components/blocks/CalloutBlock.tsx b/packages/editor/src/components/blocks/CalloutBlock.tsx
index 62532c7..608f724 100644
--- a/packages/editor/src/components/blocks/CalloutBlock.tsx
+++ b/packages/editor/src/components/blocks/CalloutBlock.tsx
@@ -47,7 +47,7 @@ export function Callout({ id, type, title, children, align = 'left', styles, isE
 
   return (
     <Alert className={cn(
-      'flex flex-col sm:flex-row items-start gap-4 p-4 my-4 rounded-lg border-2',
+      'flex flex-col sm:flex-row items-start gap-4 p-4 mb-7 mt-1 rounded-lg border-2',
       className,
       {
         'text-left': align === 'left',
diff --git a/packages/editor/src/components/blocks/CheckListBlock.tsx b/packages/editor/src/components/blocks/CheckListBlock.tsx
index 46386e7..d2d6fb8 100644
--- a/packages/editor/src/components/blocks/CheckListBlock.tsx
+++ b/packages/editor/src/components/blocks/CheckListBlock.tsx
@@ -1,28 +1,132 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
+import { cn } from '@/lib/utils';
+import { Checkbox } from '@/components/ui/checkbox';
 
 interface CheckListProps {
   id?: string;
-  items: { text: string; checked: boolean }[];
-  align?: 'left' | 'center' | 'right'; // Add align prop
+  content: string;
+  align?: 'left' | 'center' | 'right';
+  styles?: {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+  };
+  isEditing?: boolean;
+  onUpdate?: (content: string) => void;
 }
 
-export function CheckList({ id, items, align = 'left' }: CheckListProps) {
+export function CheckList({
+  id,
+  content,
+  align = 'left',
+  styles,
+  isEditing,
+  onUpdate
+}: CheckListProps) {
+  const [isActive, setIsActive] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Parse content into items array
+  const parseContent = (rawContent: string): { text: string; checked: boolean }[] => {
+    try {
+      return JSON.parse(rawContent);
+    } catch {
+      return [{ text: rawContent, checked: false }];
+    }
+  };
+
+  const items = parseContent(content);
+
+  const handleItemChange = (index: number, changes: Partial<{ text: string; checked: boolean }>) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], ...changes };
+    onUpdate?.(JSON.stringify(newItems));
+  };
+
+  const handleAddItem = () => {
+    const newItems = [...items, { text: '', checked: false }];
+    onUpdate?.(JSON.stringify(newItems));
+  };
+
+  const handleRemoveItem = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index);
+    onUpdate?.(JSON.stringify(newItems));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAddItem();
+    } else if (e.key === 'Backspace' && e.currentTarget.value === '') {
+      e.preventDefault();
+      handleRemoveItem(index);
+    }
+  };
+
   const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
+  const textStyles = cn(
+    styles?.bold && 'font-bold',
+    styles?.italic && 'italic',
+    styles?.underline && 'underline'
+  );
+
+  if (isEditing && isActive) {
+    return (
+      <div 
+        ref={containerRef}
+        className={cn("space-y-2 py-1 mb-6", alignClass)}
+        onBlur={(e) => {
+          if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+            setIsActive(false);
+          }
+        }}
+      >
+        {items.map((item, index) => (
+          <div key={index} className="flex items-center gap-2">
+            <Checkbox
+              checked={item.checked}
+              onCheckedChange={(checked) => handleItemChange(index, { checked: checked as boolean })}
+            />
+            <input
+              type="text"
+              value={item.text}
+              onChange={(e) => handleItemChange(index, { text: e.target.value })}
+              onKeyDown={(e) => handleKeyDown(e, index)}
+              className={cn(
+                "flex-1 bg-transparent border-none focus:outline-none",
+                textStyles,
+                item.checked && "line-through text-muted-foreground"
+              )}
+              placeholder="Add a task..."
+              autoFocus={index === items.length - 1}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
   return (
-    <ul id={id} className={`mb-6 py-1 ${alignClass}`}>
-      {items.map((item, index) => (
-        <li key={index} className="flex items-center mb-1">
-          <input
-            type="checkbox"
-            checked={item.checked}
-            readOnly
-            className="mr-2"
-          />
-          <span className={item.checked ? 'line-through text-muted-foreground' : 'text-foreground'}>
-            {item.text}
-          </span>
-        </li>
-      ))}
-    </ul>
+    <div
+      ref={containerRef}
+      onClick={() => isEditing && setIsActive(true)}
+      className={cn("cursor-text focus:outline-none", alignClass)}
+      tabIndex={0}
+    >
+      <ul className={cn("space-y-2 py-1 mb-6", textStyles)}>
+        {items.map((item, index) => (
+          <li key={index} className="flex items-center gap-2">
+            <Checkbox
+              checked={item.checked}
+              onCheckedChange={isEditing ? (checked) => handleItemChange(index, { checked: checked as boolean }) : undefined}
+              disabled={!isEditing}
+            />
+            <span className={cn(item.checked && "line-through text-muted-foreground")}>
+              {item.text}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }
diff --git a/packages/editor/src/components/blocks/CodeBlock.tsx b/packages/editor/src/components/blocks/CodeBlock.tsx
index 3c8e19b..6179dca 100644
--- a/packages/editor/src/components/blocks/CodeBlock.tsx
+++ b/packages/editor/src/components/blocks/CodeBlock.tsx
@@ -35,7 +35,7 @@ export function CodeBlock({
 
   if (!isEditing) {
     return (
-      <div id={id} className={`relative group rounded-lg overflow-hidden py-1 ${alignClass}`}>
+      <div id={id} className={`relative group rounded-lg overflow-hidden py-1 mb-6 ${alignClass}`}>
         {filename && (
           <div className="bg-secondary px-4 py-2 text-sm text-secondary-foreground">
             {filename}
@@ -65,7 +65,7 @@ export function CodeBlock({
   }
 
   return (
-    <div id={id} className={`relative group rounded-lg overflow-hidden py-1 ${alignClass}`}>
+    <div id={id} className={`relative group rounded-lg overflow-hidden py-1 mb-6 ${alignClass}`}>
       {filename && (
         <div className="bg-secondary px-4 py-2 text-sm text-secondary-foreground">
           {filename}
@@ -79,8 +79,8 @@ export function CodeBlock({
         {copied ? <Check size={16} /> : <Copy size={16} />}
       </button>
 
-      <div className="relative">
-        <div className="pointer-events-none">
+      <div className="relative min-h-[55px]">
+        <div className="pointer-events-none h-full">
           <SyntaxHighlighter
             language={language}
             style={oneDark}
@@ -88,7 +88,8 @@ export function CodeBlock({
             customStyle={{
               margin: 0,
               padding: '1rem',
-              borderRadius: filename ? '0' : '0.5rem'
+              borderRadius: filename ? '0' : '0.5rem',
+              height: '100%'
             }}
           >
             {code}
@@ -114,13 +115,13 @@ export function CodeBlock({
             
             onUpdate?.(content);
           }}
-          className="absolute inset-0 m-0 whitespace-pre-wrap bg-[#282c34] focus:bg-[#282c34] focus:opacity-100 opacity-0 focus:outline-none"
+          className="absolute inset-0 m-0 whitespace-pre-wrap bg-[#282c34] focus:bg-[#282c34] focus:opacity-100 opacity-0 focus:outline-none h-full"
           style={{
             ...oneDark['pre[class*="language-"]'],
             ...oneDark['code[class*="language-"]'],
             padding: '1rem',
             margin: 0,
-            lineHeight: 'inherit',
+            lineHeight: 'inherit'
           }}
           dangerouslySetInnerHTML={{ __html: code.replace(/\n/g, '<br>') }}
         />
diff --git a/packages/editor/src/components/blocks/FileBlock.tsx b/packages/editor/src/components/blocks/FileBlock.tsx
index bb81add..55645c3 100644
--- a/packages/editor/src/components/blocks/FileBlock.tsx
+++ b/packages/editor/src/components/blocks/FileBlock.tsx
@@ -1,30 +1,193 @@
-import React from 'react';
-import { cn } from "@/lib/utils";
-
-interface FileProps {
-  id?: string;
-  url: string;
-  name: string;
-  align?: 'left' | 'center' | 'right';
-  styles?: {
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-  };
+"use client"
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { 
+  FilePlus, 
+  FileText, 
+  FileImage, 
+  FileVideo, 
+  FileAudio, 
+  FileCode, 
+  FileArchive,
+  File as FileIcon
+} from 'lucide-react'
+import { useState } from 'react'
+import { saveFileToPublic } from '@/lib/fileUtils'
+
+interface FileBlockProps {
+  content: string
+  id: string
+  onUpdate?: (content: string) => void
+  isEditing?: boolean
+  metadata?: {
+    name?: string
+    fileType?: string
+  }
 }
 
-export function File({ id, url, name, align = 'left', styles }: FileProps) {
-  const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
+// Helper function to get appropriate icon based on file type
+const getFileIcon = (fileType: string) => {
+  if (fileType.startsWith('image/')) return FileImage
+  if (fileType.startsWith('video/')) return FileVideo
+  if (fileType.startsWith('audio/')) return FileAudio
+  if (fileType.startsWith('text/')) return FileText
+  if (fileType.includes('pdf')) return FileText
+  if (fileType.includes('word')) return FileText
+  if (fileType.includes('excel')) return FileText
+  if (fileType.includes('powerpoint')) return FileText
+  if (fileType.includes('code') || fileType.includes('javascript') || fileType.includes('json')) return FileCode
+  if (fileType.includes('zip') || fileType.includes('rar') || fileType.includes('archive')) return FileArchive
+  return FileIcon
+}
+
+// Helper function to format file size
+const formatFileSize = (bytes: number) => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+// Helper function to format file type display
+const formatFileType = (fileType: string) => {
+  return fileType
+    .replace('application/', '')
+    .replace('text/', '')
+    .toUpperCase()
+}
+
+export function FileBlock({ content, id, onUpdate, isEditing, metadata }: FileBlockProps) {
+  const [isHovered, setIsHovered] = useState(false)
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation()
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    try {
+      const filename = await saveFileToPublic(file, content)
+      
+      const fileContent = JSON.stringify({
+        url: `/${filename}`,
+        name: file.name,
+        fileType: file.type,
+        size: file.size
+      })
+
+      onUpdate?.(fileContent)
+    } catch (error) {
+      console.error('Failed to upload file:', error)
+    }
+  }
+
+  const parseFileContent = (content: string) => {
+    try {
+      return typeof content === 'string' ? JSON.parse(content) : content
+    } catch {
+      return {
+        url: content,
+        name: metadata?.name || '',
+        fileType: metadata?.fileType || '',
+        size: 0
+      }
+    }
+  }
+
+  const UploadButton = () => (
+    <div className="text-center">
+      <input
+        type="file"
+        id={`file-upload-${id}`}
+        className="hidden"
+        onChange={handleFileUpload}
+      />
+      <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(`file-upload-${id}`)?.click()
+          }}
+        >
+          <FilePlus className="h-8 w-8 text-muted-foreground" />
+          <span className="font-medium">Upload File</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 fileContent = parseFileContent(content)
+  const FileTypeIcon = getFileIcon(fileContent.fileType)
+
   return (
-    <div id={id} className={`mb-6 py-1 ${alignClass}`}>
-      <a href={url} download className={cn(
-        "text-primary hover:text-primary/80 hover:underline",
-        styles?.bold && 'font-bold',
-        styles?.italic && 'italic',
-        styles?.underline && 'underline'
-      )}>
-        {name}
-      </a>
+    <div 
+      className={cn(
+        "py-1 mb-6 relative group"
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="relative flex items-center p-4 bg-accent/50 rounded-lg hover:bg-accent transition-colors">
+        <div className="mr-4">
+          <FileTypeIcon className="h-8 w-8 text-primary" />
+        </div>
+        <div className="flex-grow">
+          <div className="flex items-center justify-between">
+            <a 
+              href={fileContent.url} 
+              download 
+              className="text-primary hover:text-primary/80 hover:underline font-medium"
+            >
+              {fileContent.name}
+            </a>
+            {fileContent.size > 0 && (
+              <span className="text-sm text-muted-foreground">
+                {formatFileSize(fileContent.size)}
+              </span>
+            )}
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">
+            {formatFileType(fileContent.fileType)}
+          </p>
+        </div>
+        
+        {isEditing && isHovered && (
+          <div className="ml-4">
+            <input
+              type="file"
+              id={`file-change-${id}`}
+              className="hidden"
+              onChange={handleFileUpload}
+            />
+            <Button
+              variant="default"
+              size="sm"
+              className="gap-2 bg-primary hover:bg-primary/90 text-primary-foreground"
+              onClick={(e) => {
+                e.stopPropagation()
+                document.getElementById(`file-change-${id}`)?.click()
+              }}
+            >
+              <FilePlus className="h-4 w-4" />
+              Change
+            </Button>
+          </div>
+        )}
+      </div>
     </div>
-  );
-}
+  )
+}
\ No newline at end of file
diff --git a/packages/editor/src/components/blocks/HeadingBlock.tsx b/packages/editor/src/components/blocks/HeadingBlock.tsx
index a93c186..3dfe36c 100644
--- a/packages/editor/src/components/blocks/HeadingBlock.tsx
+++ b/packages/editor/src/components/blocks/HeadingBlock.tsx
@@ -40,6 +40,7 @@ export function HeadingTitle({ id, level, children, align = 'left', styles, isEd
         className={cn(
           `font-bold mb-2 py-4 ${sizeClasses[level as keyof typeof sizeClasses]} ${alignClass}`,
           'focus:outline-none rounded-md',
+          'max-w-4xl break-words',
           styles?.italic && 'italic',
           styles?.underline && 'underline'
         )}
@@ -53,7 +54,8 @@ export function HeadingTitle({ id, level, children, align = 'left', styles, isEd
     <Tag id={id} className={cn(
       `font-bold mb-2 py-4 ${sizeClasses[level as keyof typeof sizeClasses]} ${alignClass}`,
       styles?.italic && 'italic',
-      styles?.underline && 'underline'
+      styles?.underline && 'underline',
+      'max-w-4xl break-words',
     )}>
       {children}
     </Tag>
diff --git a/packages/editor/src/components/blocks/ImageBlock.tsx b/packages/editor/src/components/blocks/ImageBlock.tsx
index 1c465d1..ff73a68 100644
--- a/packages/editor/src/components/blocks/ImageBlock.tsx
+++ b/packages/editor/src/components/blocks/ImageBlock.tsx
@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { ImagePlus } from 'lucide-react'
 import { useState } from 'react'
+import { saveImageToPublic } from '@/lib/fileUtils'
 
 interface ImageBlockProps {
   content: string
@@ -26,17 +27,21 @@ export function ImageBlock({ content, id, onUpdate, isEditing, metadata }: Image
     const file = e.target.files?.[0]
     if (!file) return
 
-    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'
-    })
+    try {
+      const filename = await saveImageToPublic(file, content)
+      
+      const imageContent = JSON.stringify({
+        url: `/${filename}`,
+        alt: metadata?.alt || file.name,
+        caption: metadata?.caption,
+        alignment: metadata?.alignment || 'center',
+        size: metadata?.size || 'medium'
+      })
 
-    onUpdate?.(imageContent)
+      onUpdate?.(imageContent)
+    } catch (error) {
+      console.error('Failed to upload image:', error)
+    }
   }
 
   // Helper function to parse content
@@ -97,7 +102,7 @@ export function ImageBlock({ content, id, onUpdate, isEditing, metadata }: Image
   return (
     <figure 
       className={cn(
-        "my-4 relative group",
+        "py-1 mb-6 relative group",
         imageContent.alignment === 'left' && "text-left",
         imageContent.alignment === 'center' && "text-center",
         imageContent.alignment === 'right' && "text-right",
@@ -150,4 +155,4 @@ export function ImageBlock({ content, id, onUpdate, isEditing, metadata }: Image
       )}
     </figure>
   )
-}
+}
\ No newline at end of file
diff --git a/packages/editor/src/components/blocks/ListBlock.tsx b/packages/editor/src/components/blocks/ListBlock.tsx
index dd74009..e42f1f3 100644
--- a/packages/editor/src/components/blocks/ListBlock.tsx
+++ b/packages/editor/src/components/blocks/ListBlock.tsx
@@ -234,7 +234,7 @@ export function List({
       <ListComponent
         id={id}
         className={cn(
-          "pl-8 py-1",
+          "pl-8 py-1 mb-6",
           listStyleClass,
           alignmentClasses,
           textStyles
diff --git a/packages/editor/src/components/blocks/ParagraphBlock.tsx b/packages/editor/src/components/blocks/ParagraphBlock.tsx
index 7f69d19..920d6c7 100644
--- a/packages/editor/src/components/blocks/ParagraphBlock.tsx
+++ b/packages/editor/src/components/blocks/ParagraphBlock.tsx
@@ -58,7 +58,8 @@ export function Paragraph({
           align === 'right' && 'text-right',
           styles.bold && 'font-bold',
           styles.italic && 'italic',
-          styles.underline && 'underline'
+          styles.underline && 'underline',
+          'max-w-4xl break-words',
         )}
       />
     );
@@ -90,7 +91,8 @@ export function Paragraph({
       align === 'right' && 'text-right',
       styles.bold && 'font-bold',
       styles.italic && 'italic',
-      styles.underline && 'underline'
+      styles.underline && 'underline',
+      'max-w-4xl break-words',
     )}>
       {content}
     </p>
diff --git a/packages/editor/src/components/blocks/SortableBlock.tsx b/packages/editor/src/components/blocks/SortableBlock.tsx
index 9eb3de9..9afa175 100644
--- a/packages/editor/src/components/blocks/SortableBlock.tsx
+++ b/packages/editor/src/components/blocks/SortableBlock.tsx
@@ -55,6 +55,11 @@ interface ImageBlockContent {
   size?: 'small' | 'medium' | 'large' | 'full'
 }
 
+interface AudioBlockContent {
+  url: string;
+  caption?: string;
+  alignment?: 'left' | 'center' | 'right';
+}
 
 export function SortableBlock({
   block,
@@ -195,6 +200,74 @@ export function SortableBlock({
 
   const [isRewriting, setIsRewriting] = useState(false)
 
+  const getVideoContent = () => {
+    if (!block.content) {
+      return {
+        url: '',
+        caption: '',
+        alignment: 'center',
+        size: 'medium'
+      }
+    }
+
+    try {
+      return typeof block.content === 'string' 
+        ? JSON.parse(block.content)
+        : block.content
+    } catch {
+      return {
+        url: block.content,
+        caption: '',
+        alignment: 'center',
+        size: 'medium'
+      }
+    }
+  }
+
+  const getAudioContent = () => {
+    if (!block.content) {
+      return {
+        url: '',
+        caption: '',
+        alignment: 'center'
+      }
+    }
+
+    try {
+      return typeof block.content === 'string' 
+        ? JSON.parse(block.content)
+        : block.content;
+    } catch {
+      return {
+        url: block.content,
+        caption: '',
+        alignment: 'center'
+      };
+    }
+  }
+
+  const getFileContent = () => {
+    if (!block.content) {
+      return {
+        url: '',
+        name: '',
+        fileType: ''
+      }
+    }
+
+    try {
+      return typeof block.content === 'string' 
+        ? JSON.parse(block.content)
+        : block.content
+    } catch {
+      return {
+        url: block.content,
+        name: '',
+        fileType: ''
+      }
+    }
+  }
+
   return showPreview ? (
     <BlockRenderer block={block} />
   ) : (
@@ -267,7 +340,15 @@ export function SortableBlock({
             <BlockFormatToolbar
               isVisible={isFocused}
               styles={block.metadata?.styles}
-              align={block.type === 'image' ? getImageContent().alignment : block.metadata?.align}
+              align={
+                block.type === 'image' 
+                  ? getImageContent().alignment 
+                  : block.type === 'video'
+                  ? getVideoContent().alignment
+                  : block.type === 'audio'
+                  ? getAudioContent().alignment
+                  : block.metadata?.align
+              }
               level={block.metadata?.level || 1}
               showLevelSelect={block.type === 'heading'}
               listType={block.metadata?.listType || 'unordered'}
@@ -287,8 +368,22 @@ export function SortableBlock({
                   const currentContent = getImageContent();
                   const updatedContent = {
                     ...currentContent,
-                    alignment: newAlign,  // For the image container alignment
-                    position: newAlign,   // For the image position within container
+                    alignment: newAlign,
+                    position: newAlign,
+                  };
+                  updateBlock(block.id, JSON.stringify(updatedContent));
+                } else if (block.type === 'video') {
+                  const currentContent = getVideoContent();
+                  const updatedContent = {
+                    ...currentContent,
+                    alignment: newAlign,
+                  };
+                  updateBlock(block.id, JSON.stringify(updatedContent));
+                } else if (block.type === 'audio') {
+                  const currentContent = getAudioContent();
+                  const updatedContent = {
+                    ...currentContent,
+                    alignment: newAlign,
                   };
                   updateBlock(block.id, JSON.stringify(updatedContent));
                 } else {
@@ -368,6 +463,57 @@ export function SortableBlock({
                 }
               }}
               isAiRewriting={isRewriting}
+              showVideoControls={block.type === 'video'}
+              videoContent={block.type === 'video' ? (() => {
+                try {
+                  return typeof block.content === 'string' 
+                    ? JSON.parse(block.content)
+                    : block.content;
+                } catch {
+                  return {
+                    url: block.content,
+                    caption: '',
+                    alignment: 'center',
+                    size: 'medium'
+                  };
+                }
+              })() : undefined}
+              onVideoMetadataChange={(metadata) => {
+                if (block.type === 'video') {
+                  const currentContent = (() => {
+                    try {
+                      return typeof block.content === 'string'
+                        ? JSON.parse(block.content)
+                        : block.content;
+                    } catch {
+                      return {
+                        url: block.content,
+                        caption: '',
+                        alignment: 'center',
+                        size: 'medium'
+                      };
+                    }
+                  })();
+                  
+                  const updatedContent = {
+                    ...currentContent,
+                    ...metadata
+                  };
+                  updateBlock(block.id, JSON.stringify(updatedContent));
+                }
+              }}
+              showAudioControls={block.type === 'audio'}
+              audioContent={block.type === 'audio' ? getAudioContent() : undefined}
+              onAudioMetadataChange={(metadata) => {
+                if (block.type === 'audio') {
+                  const currentContent = getAudioContent();
+                  const updatedContent = {
+                    ...currentContent,
+                    ...metadata
+                  };
+                  updateBlock(block.id, JSON.stringify(updatedContent));
+                }
+              }}
             />
           )}
           <BlockRenderer 
diff --git a/packages/editor/src/components/blocks/TableBlock.tsx b/packages/editor/src/components/blocks/TableBlock.tsx
index 118d411..5e161b3 100644
--- a/packages/editor/src/components/blocks/TableBlock.tsx
+++ b/packages/editor/src/components/blocks/TableBlock.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { cn } from "@/lib/utils";
+import { Button } from '@/components/ui/button';
+import { Plus, Minus } from 'lucide-react';
 
 interface TableProps {
   id?: string;
@@ -11,35 +13,160 @@ interface TableProps {
     italic?: boolean;
     underline?: boolean;
   };
+  isEditing?: boolean;
+  onChange?: (headers: string[], rows: string[][]) => void;
 }
 
-export function Table({ id, headers, rows, align = 'left', styles }: TableProps) {
+export function Table({ id, headers, rows, align = 'left', styles, isEditing = false, onChange }: TableProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
   const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
+
+  const handleCellChange = (rowIndex: number, colIndex: number, value: string) => {
+    if (!onChange) return;
+
+    if (rowIndex === -1) {
+      const newHeaders = [...headers];
+      newHeaders[colIndex] = value;
+      onChange(newHeaders, rows);
+    } else {
+      const newRows = rows.map((row, i) =>
+        i === rowIndex ? row.map((cell, j) => (j === colIndex ? value : cell)) : row
+      );
+      onChange(headers, newRows);
+    }
+  };
+
+  const addColumn = () => {
+    if (!onChange) return;
+    const newHeaders = [...headers, 'New Column'];
+    const newRows = rows.map(row => [...row, '']);
+    onChange(newHeaders, newRows);
+  };
+
+  const addRow = () => {
+    if (!onChange) return;
+    const newRow = new Array(headers.length).fill('');
+    onChange(headers, [...rows, newRow]);
+  };
+
+  const removeColumn = (colIndex: number) => {
+    if (!onChange || headers.length <= 1) return;
+    const newHeaders = headers.filter((_, i) => i !== colIndex);
+    const newRows = rows.map(row => row.filter((_, i) => i !== colIndex));
+    onChange(newHeaders, newRows);
+  };
+
+  const removeRow = (rowIndex: number) => {
+    if (!onChange || rows.length <= 1) return;
+    const newRows = rows.filter((_, i) => i !== rowIndex);
+    onChange(headers, newRows);
+  };
+
   return (
-    <div id={id} className={`py-1 ${alignClass}`}>
+    <div
+      id={id}
+      className={`py-1 mb-6 ${alignClass} relative group`}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      tabIndex={0}
+    >
       <table className={cn(
-        "min-w-full bg-background border border-border",
+        "min-w-full bg-background border border-border relative",
         styles?.bold && 'font-bold',
         styles?.italic && 'italic',
-        styles?.underline && 'underline'
+        styles?.underline && 'underline',
+        isEditing && 'group/table'
       )}>
         <thead>
           <tr>
-            {headers.map((header, index) => (
-              <th key={index} className="py-2 px-4 border-b border-border bg-muted text-left text-muted-foreground">
-                {header}
+            {headers.map((header, colIndex) => (
+              <th key={colIndex} className={cn(
+                "py-2 px-4 border-b border-border bg-muted text-left text-muted-foreground relative",
+                isEditing && "pr-12"
+              )}>
+                <div className="flex items-center gap-2">
+                  {isEditing ? (
+                    <input
+                      type="text"
+                      value={header}
+                      onChange={(e) => handleCellChange(-1, colIndex, e.target.value)}
+                      className="w-full bg-transparent focus:outline-none"
+                    />
+                  ) : (
+                    <div className="break-words whitespace-pre-wrap">{header}</div>
+                  )}
+                  {isEditing && isFocused && headers.length > 1 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="absolute right-2 opacity-0 group-hover/table:opacity-100 transition-opacity hover:bg-gray-200 hover:text-gray-700 p-0 h-6 w-6"
+                      onClick={() => removeColumn(colIndex)}
+                    >
+                      <Minus className="h-4 w-4" />
+                    </Button>
+                  )}
+                </div>
               </th>
             ))}
+            {isEditing && isFocused && (
+              <th className="w-10 border-b border-border bg-muted">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="p-0 h-8 w-8 hover:bg-gray-200"
+                  onClick={addColumn}
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </th>
+            )}
           </tr>
         </thead>
         <tbody>
           {rows.map((row, rowIndex) => (
             <tr key={rowIndex}>
-              {row.map((cell, cellIndex) => (
-                <td key={cellIndex} className="py-2 px-4 border-b border-border text-foreground">
-                  {cell}
+              {row.map((cell, colIndex) => (
+                <td key={colIndex} className={cn(
+                  "py-2 px-4 border-b border-border text-foreground relative",
+                  isEditing && colIndex === row.length - 1 && "pr-12"
+                )}>
+                  {isEditing ? (
+                    <input
+                      type="text"
+                      value={cell}
+                      onChange={(e) => handleCellChange(rowIndex, colIndex, e.target.value)}
+                      className="w-full bg-transparent focus:outline-none"
+                    />
+                  ) : (
+                    <div className="break-words whitespace-pre-wrap">{cell}</div>
+                  )}
+                  {isEditing && isFocused && colIndex === row.length - 1 && rows.length > 1 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="absolute right-2 opacity-0 group-hover/table:opacity-100 transition-opacity hover:bg-gray-200 hover:text-gray-700 p-0 h-6 w-6"
+                      onClick={() => removeRow(rowIndex)}
+                    >
+                      <Minus className="h-4 w-4" />
+                    </Button>
+                  )}
                 </td>
               ))}
+              {isEditing && isFocused && (
+                <td className="w-10 border-b border-border">
+                  {rowIndex === rows.length - 1 ? (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="p-0 h-8 w-8 hover:bg-gray-200"
+                      onClick={addRow}
+                    >
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  ) : null}
+                </td>
+              )}
             </tr>
           ))}
         </tbody>
diff --git a/packages/editor/src/components/blocks/VideoBlock.tsx b/packages/editor/src/components/blocks/VideoBlock.tsx
index fc7f8f7..2ff7053 100644
--- a/packages/editor/src/components/blocks/VideoBlock.tsx
+++ b/packages/editor/src/components/blocks/VideoBlock.tsx
@@ -1,32 +1,233 @@
-import React from 'react';
-import { cn } from "@/lib/utils";
+"use client"
 
-interface VideoProps {
-  id?: string;
-  src: string;
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { VideoIcon, Pause, Play } from 'lucide-react'
+import { useState, useRef, useEffect } from 'react'
+import { saveVideoToPublic } from '@/lib/fileUtils'
+
+interface VideoBlockProps {
+  content: string
+  id: string
+  onUpdate?: (content: string) => void
+  isEditing?: boolean
+  metadata?: {
+    caption?: string
+    alignment?: 'left' | 'center' | 'right'
+    size?: 'small' | 'medium' | 'large' | 'full'
+  }
+}
+
+interface VideoBlockContent {
+  url: string;
   caption?: string;
-  align?: 'left' | 'center' | 'right';
-  styles?: {
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-  };
+  alignment?: 'left' | 'center' | 'right';
+  size?: 'small' | 'medium' | 'large' | 'full';
 }
 
-export function Video({ id, src, caption, align = 'left', styles }: VideoProps) {
-  const alignClass = align === 'center' ? 'mx-auto' : align === 'right' ? 'ml-auto' : '';
-  return (
-    <div id={id} className={`mb-6 py-1 ${alignClass}`}>
-      <video controls className="w-full">
-        <source src={src} type="video/mp4" />
-        Your browser does not support the video tag.
-      </video>
-      {caption && <p className={cn(
-        "mt-2 text-sm text-muted-foreground",
-        styles?.bold && 'font-bold',
-        styles?.italic && 'italic',
-        styles?.underline && 'underline'
-      )}>{caption}</p>}
+export function VideoBlock({ content, id, onUpdate, isEditing, metadata }: VideoBlockProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  const handlePlayPause = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause()
+      } else {
+        videoRef.current.play()
+      }
+      setIsPlaying(!isPlaying)
+    }
+  }
+
+  // Add event listeners to sync the isPlaying state with video events
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    const handlePlay = () => setIsPlaying(true)
+    const handlePause = () => setIsPlaying(false)
+    const handleEnded = () => setIsPlaying(false)
+
+    video.addEventListener('play', handlePlay)
+    video.addEventListener('pause', handlePause)
+    video.addEventListener('ended', handleEnded)
+
+    return () => {
+      video.removeEventListener('play', handlePlay)
+      video.removeEventListener('pause', handlePause)
+      video.removeEventListener('ended', handleEnded)
+    }
+  }, [])
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation()
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    try {
+      const filename = await saveVideoToPublic(file, content)
+      
+      const videoContent = JSON.stringify({
+        url: `/${filename}`,
+        caption: metadata?.caption,
+        alignment: metadata?.alignment || 'center',
+        size: metadata?.size || 'medium'
+      })
+
+      onUpdate?.(videoContent)
+    } catch (error) {
+      console.error('Failed to upload video:', error)
+    }
+  }
+
+  const parseVideoContent = (content: string) => {
+    try {
+      return typeof content === 'string' ? JSON.parse(content) : content
+    } catch {
+      return {
+        url: content,
+        caption: metadata?.caption || '',
+        alignment: metadata?.alignment || 'center',
+        size: metadata?.size || 'medium'
+      }
+    }
+  }
+
+  const getVideoContent = (content: string): VideoBlockContent => {
+    try {
+      return typeof content === 'string' 
+        ? JSON.parse(content)
+        : content;
+    } catch {
+      return {
+        url: content,
+        caption: '',
+        alignment: 'center',
+        size: 'medium'
+      };
+    }
+  };
+
+  const UploadButton = () => (
+    <div className="text-center">
+      <input
+        type="file"
+        id={`video-upload-${id}`}
+        className="hidden"
+        accept="video/*"
+        onChange={handleFileUpload}
+      />
+      <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(`video-upload-${id}`)?.click()
+          }}
+        >
+          <VideoIcon className="h-8 w-8 text-muted-foreground" />
+          <span className="font-medium">Upload Video</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 videoContent = parseVideoContent(content)
+  const alignment = videoContent.alignment || metadata?.alignment || 'center'
+
+  return (
+    <figure 
+      className={cn(
+        "py-1 mb-6 relative group",
+        "flex flex-col",
+        alignment === 'left' && "items-start",
+        alignment === 'center' && "items-center",
+        alignment === 'right' && "items-end",
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="relative">
+        <video 
+          ref={videoRef}
+          src={videoContent.url}
+          controls
+          className={cn(
+            "rounded-lg",
+            videoContent.size === 'small' && "max-w-[300px]",
+            videoContent.size === 'medium' && "max-w-[500px]",
+            videoContent.size === 'large' && "max-w-[800px]",
+            videoContent.size === 'full' && "max-w-full w-full",
+          )}
+        />
+        {isEditing && isHovered && (
+          <div 
+            className="absolute inset-0 bg-black/50 flex items-center justify-center gap-2 rounded-lg transition-opacity"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <input
+              type="file"
+              id={`video-change-${id}`}
+              className="hidden"
+              accept="video/*"
+              onChange={handleFileUpload}
+            />
+            <Button
+              variant="secondary"
+              className="gap-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                document.getElementById(`video-change-${id}`)?.click()
+              }}
+            >
+              <VideoIcon className="h-4 w-4" />
+              Change Video
+            </Button>
+            <Button
+              variant="secondary"
+              className="gap-2"
+              onClick={handlePlayPause}
+            >
+              {isPlaying ? (
+                <>
+                  <Pause className="h-4 w-4" />
+                  Pause
+                </>
+              ) : (
+                <>
+                  <Play className="h-4 w-4" />
+                  Play
+                </>
+              )}
+            </Button>
+          </div>
+        )}
+      </div>
+      {videoContent.caption && (
+        <figcaption className={cn(
+          "mt-2 text-sm text-muted-foreground italic",
+          alignment === 'left' && "text-left",
+          alignment === 'center' && "text-center",
+          alignment === 'right' && "text-right",
+        )}>
+          {videoContent.caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}
\ No newline at end of file
diff --git a/packages/editor/src/components/editor/AIRewriteButton.tsx b/packages/editor/src/components/editor/AIRewriteButton.tsx
index 29d2759..eb1c654 100644
--- a/packages/editor/src/components/editor/AIRewriteButton.tsx
+++ b/packages/editor/src/components/editor/AIRewriteButton.tsx
@@ -130,6 +130,69 @@ const blockStyles = {
       label: 'Detailed',
       prompt: 'Expand the toggle content with more detailed explanations. Keep the toggle structure. Output only the toggle content.'
     }
+  ],
+
+  table: [
+    {
+      value: 'simplify',
+      label: 'Simplify',
+      prompt: 'Rewrite this table to simplify its content and structure. Output only the table data in a simplified format.'
+    },
+    {
+      value: 'detailed',
+      label: 'Detailed',
+      prompt: 'Rewrite this table to add more detailed information and context. Output only the table data with added details.'
+    }
+  ],
+  video: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite the video caption to be more descriptive and engaging.'
+    },
+    {
+      value: 'concise',
+      label: 'Concise',
+      prompt: 'Rewrite the video caption to be more concise and clear.'
+    }
+  ],
+  audio: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite the audio caption to be more descriptive and engaging.'
+    },
+    {
+      value: 'concise',
+      label: 'Concise',
+      prompt: 'Rewrite the audio caption to be more concise and clear.'
+    }
+  ],
+  file: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite the file caption to be more descriptive and engaging.'
+    }
+  ],
+  checkList: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite the checklist to be more descriptive and engaging.'
+    },
+    {
+      value: 'concise',
+      label: 'Concise',
+      prompt: 'Rewrite the checklist to be more concise and clear.'
+    }
+  ],
+  apiReference: [
+    {
+      value: 'descriptive',
+      label: 'Descriptive',
+      prompt: 'Rewrite the API reference to be more descriptive and engaging.'
+    }
   ]
 } as const;
 
diff --git a/packages/editor/src/components/editor/AddBlockButton.tsx b/packages/editor/src/components/editor/AddBlockButton.tsx
index b3dba5b..00a1770 100644
--- a/packages/editor/src/components/editor/AddBlockButton.tsx
+++ b/packages/editor/src/components/editor/AddBlockButton.tsx
@@ -14,7 +14,7 @@ import {
   Image,
   List,
   Minus,
-  // Table,
+  Table,
   Quote,
   // ToggleLeft,
   // CheckSquare,
@@ -25,6 +25,10 @@ import {
   AlertCircle,
   Plus,
   // Search,
+  Video,
+  Music,
+  File,
+  CheckSquare,
 } from 'lucide-react'
 
 interface AddBlockButtonProps {
@@ -49,6 +53,7 @@ export const AddBlockButton = forwardRef<
   HTMLButtonElement,
   AddBlockButtonProps
 >(({ onAddBlock, onChangeType, mode, isActive, onOpenChange, type, open }, ref) => {
+  console.debug(isActive)
   const [searchTerm, setSearchTerm] = useState('')
   const searchInputRef = useRef<HTMLInputElement>(null)
 
@@ -65,7 +70,7 @@ export const AddBlockButton = forwardRef<
     { type: 'code', icon: <Code size={18} />, label: 'Code', description: 'Capture a code snippet.', group: 'Basic' },
     { type: 'image', icon: <Image size={18} />, label: 'Image', description: 'Upload or embed with a link.', group: 'Media' },
     { type: 'divider', icon: <Minus size={18} />, label: 'Divider', description: 'Visually divide your page.', group: 'Basic' },
-    // { type: 'table', icon: <Table size={18} />, label: 'Table', description: 'Add a table to your page.', group: 'Advanced' },
+    { type: 'table', icon: <Table size={18} />, label: 'Table', description: 'Add a table to your page.', group: 'Advanced' },
     { type: 'blockquote', icon: <Quote size={18} />, label: 'Quote', description: 'Capture a quote.', group: 'Basic' },
     // { type: 'toggleList', icon: <ToggleLeft size={18} />, label: 'Toggle', description: 'Toggleable content.', group: 'Advanced' },
     // { type: 'checkList', icon: <CheckSquare size={18} />, label: 'To-do list', description: 'Track tasks with a to-do list.', group: 'Basic' },
@@ -74,6 +79,10 @@ export const AddBlockButton = forwardRef<
     // { type: 'file', icon: <File size={18} />, label: 'File', description: 'Upload or link to a file.', group: 'Media' },
     // { type: 'emoji', icon: <Smile size={18} />, label: 'Emoji', description: 'Add an emoji to your page.', group: 'Basic' },
     { type: 'callout', icon: <AlertCircle size={18} />, label: 'Callout', description: 'Make writing stand out.', group: 'Advanced' },
+    { type: 'video', icon: <Video size={18} />, label: 'Video', description: 'Upload or embed a video.', group: 'Media' },
+    { type: 'audio', icon: <Music size={18} />, label: 'Audio', description: 'Embed audio content.', group: 'Media' },
+    { type: 'file', icon: <File size={18} />, label: 'File', description: 'Upload or link to a file.', group: 'Media' },
+    { type: 'checkList', icon: <CheckSquare size={18} />, label: 'To-do list', description: 'Track tasks with a to-do list.', group: 'Basic' },
   ]
 
   const filteredOptions = blockOptions.filter((option) =>
diff --git a/packages/editor/src/components/editor/BlockFormatToolbar.tsx b/packages/editor/src/components/editor/BlockFormatToolbar.tsx
index 2bdbf3d..8a70ee5 100644
--- a/packages/editor/src/components/editor/BlockFormatToolbar.tsx
+++ b/packages/editor/src/components/editor/BlockFormatToolbar.tsx
@@ -30,7 +30,7 @@ interface BlockFormatToolbarProps {
   onLanguageChange?: (language: string) => void
   onFilenameChange?: (filename: string) => void
   onShowLineNumbersChange?: (show: boolean) => void
-  showCodeControls?: boolean
+  showCodeControls?: boolean;
   showImageControls?: boolean;
   imageContent?: {
     url: string;
@@ -54,6 +54,28 @@ interface BlockFormatToolbarProps {
   onAiRewrite?: (style: string) => Promise<void>
   isAiRewriting?: boolean
   blockType?: BlockType
+  showVideoControls?: boolean;
+  videoContent?: {
+    url: string;
+    caption?: string;
+    alignment?: 'left' | 'center' | 'right';
+    size?: 'small' | 'medium' | 'large' | 'full';
+  };
+  onVideoMetadataChange?: (metadata: Partial<{
+    caption: string;
+    alignment: 'left' | 'center' | 'right';
+    size: 'small' | 'medium' | 'large' | 'full';
+  }>) => void;
+  showAudioControls?: boolean;
+  audioContent?: {
+    url: string;
+    caption?: string;
+    alignment?: 'left' | 'center' | 'right';
+  };
+  onAudioMetadataChange?: (metadata: Partial<{
+    caption: string;
+    alignment: 'left' | 'center' | 'right';
+  }>) => void;
 }
 
 export function BlockFormatToolbar({ 
@@ -91,7 +113,17 @@ export function BlockFormatToolbar({
   onAiRewrite,
   isAiRewriting,
   blockType,
+  showVideoControls = false,
+  videoContent,
+  onVideoMetadataChange,
+  showAudioControls = false,
+  audioContent,
+  onAudioMetadataChange,
 }: BlockFormatToolbarProps) {
+  if (blockType === 'file') {
+    return null;
+  }
+
   return (
     <div className={cn(
       "absolute -top-10 left-1/2 -translate-x-1/2 z-50",
@@ -101,7 +133,7 @@ export function BlockFormatToolbar({
       "bg-popover border shadow-md rounded-md",
       className
     )}>
-      {!showImageControls && (
+      {!showImageControls && !showCodeControls && !showVideoControls && !showAudioControls && blockType !== 'table' && (
         <>
           <ToggleGroup 
             type="multiple" 
@@ -115,9 +147,11 @@ export function BlockFormatToolbar({
             }}
             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>
+            {blockType !== 'heading' && (
+              <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>
@@ -125,26 +159,26 @@ export function BlockFormatToolbar({
               <Underline className="h-3.5 w-3.5" />
             </ToggleGroupItem>
           </ToggleGroup>
-          <Separator orientation="vertical" className="mx-0.5 h-7" />
+          {blockType !== 'blockquote' && blockType !== 'list' && blockType !== 'checkList' && <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" />
+      {!showCodeControls && !showCalloutControls && blockType !== 'blockquote' && blockType !== 'list' && blockType !== 'checkList' && blockType !== 'table' && (
+        <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>
+          </ToggleGroupItem>
+        </ToggleGroup>
+      )}
 
       {showCodeControls && (
         <>
-          <Separator orientation="vertical" className="mx-0.5 h-7" />
-          
           <Input
             value={language}
             onChange={(e) => onLanguageChange?.(e.target.value)}
@@ -282,18 +316,62 @@ export function BlockFormatToolbar({
           />
         </>
       )}
-       <Separator orientation="vertical" className="mx-0.5 h-7" />
+
+      {showVideoControls && (
+        <>
+          <Separator orientation="vertical" className="mx-0.5 h-7" />
+          
+          <Input
+            value={videoContent?.caption || ''}
+            onChange={(e) => onVideoMetadataChange?.({ caption: e.target.value })}
+            placeholder="Caption"
+            className="h-7 w-32 text-xs"
+          />
+          
+          <Select 
+            value={videoContent?.size || 'medium'}
+            onValueChange={(value) => onVideoMetadataChange?.({ 
+              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>
+        </>
+      )}
+
+      {showAudioControls && (
+        <>
+          <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>
-          )}
+          <Input
+            value={audioContent?.caption || ''}
+            onChange={(e) => onAudioMetadataChange?.({ caption: e.target.value })}
+            placeholder="Caption"
+            className="h-7 w-32 text-xs"
+          />
+        </>
+      )}
+
+      {!showImageControls && !showVideoControls && !showAudioControls && (
+        <>
+          {!showCalloutControls && blockType !== 'table' && <Separator orientation="vertical" className="mx-0.5 h-7" />}
+          <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/editor/src/lib/fileUtils.ts b/packages/editor/src/lib/fileUtils.ts
new file mode 100644
index 0000000..3f74648
--- /dev/null
+++ b/packages/editor/src/lib/fileUtils.ts
@@ -0,0 +1,174 @@
+export async function saveImageToPublic(file: File, oldContent?: string): Promise<string> {
+  if (oldContent) {
+    const oldFilename = extractFilenameFromContent(oldContent)
+    if (oldFilename) {
+      try {
+        await deleteImageFromPublic(oldFilename)
+      } catch (error) {
+        console.error('Error deleting old file:', error)
+      }
+    }
+  }
+
+  const formData = new FormData()
+  formData.append('file', file)
+
+  try {
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    })
+
+    if (!response.ok) {
+      throw new Error('Failed to upload image')
+    }
+
+    const data = await response.json()
+    return data.filename
+  } catch (error) {
+    console.error('Error uploading file:', error)
+    throw error
+  }
+}
+
+export async function deleteImageFromPublic(filename: string): Promise<void> {
+  try {
+    const response = await fetch(`/api/upload?filename=${encodeURIComponent(filename)}`, {
+      method: 'DELETE',
+    })
+    
+    if (!response.ok) {
+      throw new Error('Failed to delete image')
+    }
+  } catch (error) {
+    console.error('Error deleting image:', error)
+    throw error
+  }
+}
+
+export async function moveImageToRoot(filename: string): Promise<void> {
+  try {
+    const response = await fetch(`/api/upload/move-to-root?filename=${encodeURIComponent(filename)}`, {
+      method: 'POST',
+    })
+    
+    if (!response.ok) {
+      throw new Error('Failed to move image to root')
+    }
+  } catch (error) {
+    console.error('Error moving image:', error)
+    throw error
+  }
+}
+
+export async function saveVideoToPublic(file: File, oldContent?: string): Promise<string> {
+  if (oldContent) {
+    const oldFilename = extractFilenameFromContent(oldContent)
+    if (oldFilename) {
+      try {
+        await deleteImageFromPublic(oldFilename)
+      } catch (error) {
+        console.error('Error deleting old file:', error)
+      }
+    }
+  }
+
+  const formData = new FormData()
+  formData.append('file', file)
+
+  try {
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    })
+
+    if (!response.ok) {
+      throw new Error('Failed to upload video')
+    }
+
+    const data = await response.json()
+    return data.filename
+  } catch (error) {
+    console.error('Error uploading file:', error)
+    throw error
+  }
+}
+
+export async function saveAudioToPublic(file: File, oldContent?: string): Promise<string> {
+  if (oldContent) {
+    const oldFilename = extractFilenameFromContent(oldContent)
+    if (oldFilename) {
+      try {
+        await deleteImageFromPublic(oldFilename)
+      } catch (error) {
+        console.error('Error deleting old file:', error)
+      }
+    }
+  }
+
+  const formData = new FormData()
+  formData.append('file', file)
+
+  try {
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    })
+
+    if (!response.ok) {
+      throw new Error('Failed to upload audio')
+    }
+
+    const data = await response.json()
+    return data.filename
+  } catch (error) {
+    console.error('Error uploading file:', error)
+    throw error
+  }
+}
+
+export async function saveFileToPublic(file: File, oldContent?: string): Promise<string> {
+  if (oldContent) {
+    const oldFilename = extractFilenameFromContent(oldContent)
+    if (oldFilename) {
+      try {
+        await deleteImageFromPublic(oldFilename)
+      } catch (error) {
+        console.error('Error deleting old file:', error)
+      }
+    }
+  }
+
+  const formData = new FormData()
+  formData.append('file', file)
+
+  try {
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    })
+
+    if (!response.ok) {
+      throw new Error('Failed to upload file')
+    }
+
+    const data = await response.json()
+    return data.filename
+  } catch (error) {
+    console.error('Error uploading file:', error)
+    throw error
+  }
+}
+
+export function extractFilenameFromContent(content: string): string | null {
+  try {
+    const parsed = JSON.parse(content)
+    if (parsed.url) {
+      return parsed.url.split('/').pop() || null
+    }
+  } catch {
+    // If content is a direct URL
+    return content.split('/').pop() || null
+  }
+  return null
+}
\ No newline at end of file
diff --git a/packages/editor/src/lib/renderers/BlockRenderer.tsx b/packages/editor/src/lib/renderers/BlockRenderer.tsx
index c139e4a..ba5d2a9 100644
--- a/packages/editor/src/lib/renderers/BlockRenderer.tsx
+++ b/packages/editor/src/lib/renderers/BlockRenderer.tsx
@@ -9,7 +9,7 @@ import { CodeBlock } from "@/components/blocks/CodeBlock"
 // import { Image } from '../blocks/Image'
 // import { Table } from '../blocks/Table'
 // import { ToggleList } from '../blocks/ToggleList'
-// import { CheckList } from '../blocks/CheckList'
+import { CheckList } from "@/components/blocks/CheckListBlock"
 // import { Video } from '../blocks/Video'
 // import { Audio } from '../blocks/Audio'
 // import { File } from '../blocks/File'
@@ -18,6 +18,10 @@ import { Callout } from "@/components/blocks/CalloutBlock"
 import { cn } from '@/lib/utils'
 import { ErrorBoundary } from 'react-error-boundary'
 import { ImageBlock } from "@/components/blocks/ImageBlock"
+import { Table } from '@/components/blocks/TableBlock'
+import { VideoBlock } from "@/components/blocks/VideoBlock"
+import { AudioBlock } from "@/components/blocks/AudioBlock"
+import { FileBlock } from "@/components/blocks/FileBlock"
 
 interface ImageBlockContent {
   url: string;
@@ -119,20 +123,19 @@ export function BlockRenderer({ block, isEditing, onUpdate }: BlockRendererProps
           onUpdate={(content) => onUpdate?.(block.id, content)}
         />
       );
-    // case 'table':
-    //   return <Table headers={block.metadata?.headers || []} rows={block.metadata?.rows || []} {...commonProps} />;
-    // case 'toggleList':
-    //   return <ToggleList items={block.metadata?.items || []} {...commonProps} />;
-    // case 'checkList':
-    //   return <CheckList items={block.metadata?.checkedItems || []} {...commonProps} />;
-    // case 'video':
-    //   return <Video src={block.content} caption={block.metadata?.caption} {...commonProps} />;
-    // case 'audio':
-    //   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={block.content} label={block.metadata?.label} {...commonProps} />;
+    case 'table':
+      return (
+        <Table
+          headers={block.metadata?.headers || ['Column 1', 'Column 2']}
+          rows={block.metadata?.rows || [['', '']]}
+          isEditing={isEditing}
+          onChange={(headers, rows) => {
+            onUpdate?.(block.id, JSON.stringify({ headers, rows }));
+          }}
+          align={block.metadata?.align}
+          styles={block.metadata?.styles}
+        />
+      );
     case 'callout':
       return (
         <Callout 
@@ -147,6 +150,86 @@ export function BlockRenderer({ block, isEditing, onUpdate }: BlockRendererProps
       );
     case 'divider':
       return <Divider {...commonProps} />;
+    case 'video':
+      const videoContent = (() => {
+        try {
+          return typeof block.content === 'string'
+            ? JSON.parse(block.content)
+            : block.content;
+        } catch {
+          return {
+            url: block.content,
+            caption: '',
+            alignment: 'center',
+            size: 'medium'
+          };
+        }
+      })();
+      
+      return (
+        <VideoBlock
+          {...commonProps}
+          content={block.content}
+          id={block.id}
+          metadata={{
+            ...block.metadata,
+            caption: videoContent.caption,
+            alignment: videoContent.alignment,
+            size: videoContent.size
+          }}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        />
+      );
+    case 'audio':
+      const audioContent = (() => {
+        try {
+          return typeof block.content === 'string'
+            ? JSON.parse(block.content)
+            : block.content;
+        } catch {
+          return {
+            url: block.content,
+            caption: '',
+            alignment: 'center'
+          };
+        }
+      })();
+      
+      return (
+        <AudioBlock
+          {...commonProps}
+          content={block.content}
+          id={block.id}
+          metadata={{
+            ...block.metadata,
+            caption: audioContent.caption,
+            alignment: audioContent.alignment
+          }}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        />
+      );
+    case 'file':
+      return (
+        <FileBlock
+          {...commonProps}
+          content={block.content}
+          id={block.id}
+          metadata={block.metadata}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        />
+      );
+    case 'checkList':
+      return (
+        <CheckList
+          {...commonProps}
+          content={block.content}
+          isEditing={isEditing}
+          onUpdate={(content) => onUpdate?.(block.id, content)}
+        />
+      );
     default:
       return null
   }
diff --git a/packages/editor/src/types/Block.ts b/packages/editor/src/types/Block.ts
index 27db31b..61f1b7a 100644
--- a/packages/editor/src/types/Block.ts
+++ b/packages/editor/src/types/Block.ts
@@ -6,41 +6,42 @@ export type BlockType =
   | 'list' 
   | 'blockquote' 
   | 'divider' 
-  // | 'table'
+  | 'table'
   // | 'toggleList' 
-  // | 'checkList' 
-  // | 'video' 
-  // | 'audio' 
-  // | 'file' 
+  | 'checkList' 
+  | 'video' 
+  | 'audio' 
+  | 'file' 
   // | 'emoji'
-  | 'callout';
+  | 'callout'
+  | 'apiReference';
 
 export interface Block {
   id: string;
   type: BlockType;
   content: string;
   metadata?: {
-    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
+      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
   };
@@ -48,6 +49,7 @@ export interface Block {
 
 export interface Post {
   id: string;
+  slug?: string;
   title: string;
   description: string;
   author: string;
@@ -57,4 +59,24 @@ export interface Post {
   category: string;
   keywords: string[];
   blocks: Block[];
+  imageUrl?: string;
+}
+
+export interface APIReferenceBlock extends Block {
+  type: 'apiReference';
+  metadata: Block['metadata'] & {
+    endpoint: string;
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    parameters?: {
+      name: string;
+      type: string;
+      required: boolean;
+      description: string;
+    }[];
+    responses?: {
+      code: number;
+      description: string;
+      example?: any;
+    }[];
+  };
 }