diff --git a/ts_web/elements/wysiwyg/blocks/text/code.block.old.ts b/ts_web/elements/wysiwyg/blocks/text/code.block.old.ts
deleted file mode 100644
index 5679638..0000000
--- a/ts_web/elements/wysiwyg/blocks/text/code.block.old.ts
+++ /dev/null
@@ -1,608 +0,0 @@
-import { BaseBlockHandler, type IBlockEventHandlers } from '../block.base.js';
-import type { IBlock } from '../../wysiwyg.types.js';
-import { cssManager } from '@design.estate/dees-element';
-import { WysiwygBlocks } from '../../wysiwyg.blocks.js';
-import { WysiwygSelection } from '../../wysiwyg.selection.js';
-import hlight from 'highlight.js';
-
-export class CodeBlockHandler extends BaseBlockHandler {
-  type = 'code';
-  
-  // Track cursor position
-  private lastKnownCursorPosition: number = 0;
-  
-  // Debounce timer for highlighting
-  private highlightingTimer: any = null;
-  
-  render(block: IBlock, isSelected: boolean): string {
-    const language = block.metadata?.language || 'javascript';
-    const selectedClass = isSelected ? ' selected' : '';
-    
-    return `
-      <div class="code-block-container${selectedClass}">
-        <div class="code-language">${language}</div>
-        <div class="code-grid">
-          <div class="line-numbers"></div>
-          <div
-            class="block code"
-            contenteditable="true"
-            data-block-id="${block.id}"
-            data-block-type="${block.type}"
-            spellcheck="false"
-          ></div>
-        </div>
-      </div>
-    `;
-  }
-  
-  setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void {
-    const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
-    if (!codeBlock) {
-      console.error('CodeBlockHandler.setup: No code block element found');
-      return;
-    }
-    
-    // Set initial content if needed - use textContent for code blocks
-    if (block.content && !codeBlock.textContent) {
-      codeBlock.textContent = block.content;
-    }
-    
-    // Apply initial highlighting
-    this.applyHighlighting(element, block);
-    
-    // Variable to track if we're in composition mode
-    let isComposing = false;
-    
-    // Input handler
-    codeBlock.addEventListener('input', (e) => {
-      handlers.onInput(e as InputEvent);
-      
-      // Track cursor position after input
-      const pos = this.getCursorPosition(element);
-      if (pos !== null) {
-        this.lastKnownCursorPosition = pos;
-      }
-      
-      // Update line numbers immediately
-      const lineNumbersContainer = element.querySelector('.line-numbers') as HTMLDivElement;
-      if (lineNumbersContainer) {
-        this.updateLineNumbers(codeBlock.textContent || '', lineNumbersContainer);
-      }
-      
-      // Debounce highlighting to avoid performance issues while typing
-      if (!isComposing) {
-        clearTimeout(this.highlightingTimer);
-        this.highlightingTimer = setTimeout(() => {
-          // Store cursor position before highlighting
-          const currentPos = this.getCursorPosition(element);
-          
-          // Get plain text before highlighting
-          const plainText = codeBlock.textContent || '';
-          
-          // Apply highlighting
-          const language = block.metadata?.language || 'javascript';
-          try {
-            const result = hlight.highlight(plainText, { 
-              language: language,
-              ignoreIllegals: true 
-            });
-            codeBlock.innerHTML = result.value;
-          } catch (error) {
-            // Keep plain text if highlighting fails
-          }
-          
-          // Restore cursor position
-          if (currentPos !== null && document.activeElement === codeBlock) {
-            WysiwygSelection.setCursorPosition(codeBlock, currentPos);
-          }
-        }, 500); // Wait 500ms after user stops typing
-      }
-    });
-    
-    // Keydown handler
-    codeBlock.addEventListener('keydown', (e) => {
-      // Track cursor position before keydown
-      const pos = this.getCursorPosition(element);
-      if (pos !== null) {
-        this.lastKnownCursorPosition = pos;
-      }
-      
-      // Special handling for Tab key in code blocks
-      if (e.key === 'Tab') {
-        e.preventDefault();
-        // Insert two spaces for tab
-        const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-          const range = selection.getRangeAt(0);
-          range.deleteContents();
-          const textNode = document.createTextNode('  ');
-          range.insertNode(textNode);
-          range.setStartAfter(textNode);
-          range.setEndAfter(textNode);
-          selection.removeAllRanges();
-          selection.addRange(range);
-          
-          // Trigger input event
-          handlers.onInput(new InputEvent('input'));
-        }
-        return;
-      }
-      
-      handlers.onKeyDown(e);
-    });
-    
-    // Focus handler
-    codeBlock.addEventListener('focus', () => {
-      handlers.onFocus();
-    });
-    
-    // Blur handler
-    codeBlock.addEventListener('blur', () => {
-      handlers.onBlur();
-    });
-    
-    // Composition handlers for IME support
-    codeBlock.addEventListener('compositionstart', () => {
-      isComposing = true;
-      handlers.onCompositionStart();
-    });
-    
-    codeBlock.addEventListener('compositionend', () => {
-      isComposing = false;
-      handlers.onCompositionEnd();
-      
-      // Apply highlighting after composition ends
-      setTimeout(() => {
-        this.applyHighlighting(element, block);
-      }, 100);
-    });
-    
-    // Mouse up handler
-    codeBlock.addEventListener('mouseup', (e) => {
-      const pos = this.getCursorPosition(element);
-      if (pos !== null) {
-        this.lastKnownCursorPosition = pos;
-      }
-      handlers.onMouseUp?.(e);
-    });
-    
-    // Click handler with delayed cursor tracking
-    codeBlock.addEventListener('click', (_e: MouseEvent) => {
-      setTimeout(() => {
-        const pos = this.getCursorPosition(element);
-        if (pos !== null) {
-          this.lastKnownCursorPosition = pos;
-        }
-      }, 0);
-    });
-    
-    // Keyup handler for cursor tracking
-    codeBlock.addEventListener('keyup', (_e) => {
-      const pos = this.getCursorPosition(element);
-      if (pos !== null) {
-        this.lastKnownCursorPosition = pos;
-      }
-    });
-    
-    // Paste handler - handle as plain text
-    codeBlock.addEventListener('paste', (e) => {
-      e.preventDefault();
-      const text = e.clipboardData?.getData('text/plain');
-      if (text) {
-        const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-          const range = selection.getRangeAt(0);
-          range.deleteContents();
-          const textNode = document.createTextNode(text);
-          range.insertNode(textNode);
-          range.setStartAfter(textNode);
-          range.setEndAfter(textNode);
-          selection.removeAllRanges();
-          selection.addRange(range);
-          
-          // Trigger input event
-          handlers.onInput(new InputEvent('input'));
-        }
-      }
-    });
-  }
-  
-  getStyles(): string {
-    return `
-      /* Code block specific styles */
-      .code-block-container {
-        position: relative;
-        margin: 20px 0;
-        background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
-        border-radius: 8px;
-        overflow: hidden;
-        transition: all 0.2s ease;
-      }
-      
-      .code-block-container.selected {
-        border-color: ${cssManager.bdTheme('#0066ff', '#4d9fff')};
-        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 102, 255, 0.1)', 'rgba(77, 159, 255, 0.1)')};
-      }
-      
-      .code-grid {
-        display: grid;
-        grid-template-columns: 50px 1fr;
-        overflow: hidden;
-      }
-      
-      .line-numbers {
-        background: ${cssManager.bdTheme('#f3f3f3', '#0a0a0a')};
-        border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
-        padding: 16px 12px 16px 0;
-        text-align: right;
-        user-select: none;
-        color: ${cssManager.bdTheme('#999999', '#666666')};
-        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-        font-size: 14px;
-        line-height: 1.5;
-      }
-      
-      .line-number {
-        height: 21px;
-      }
-      
-      .line-number:last-child {
-        opacity: 0.5;
-      }
-      
-      .block.code {
-        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-        font-size: 14px;
-        padding: 16px 20px;
-        padding-top: 32px;
-        white-space: pre-wrap;
-        color: ${cssManager.bdTheme('#24292e', '#e1e4e8')};
-        line-height: 1.5;
-        overflow-x: auto;
-        margin: 0;
-        min-height: 100px;
-        background: transparent;
-        border: none;
-        outline: none;
-      }
-      
-      .code-language {
-        position: absolute;
-        top: 0;
-        right: 0;
-        background: ${cssManager.bdTheme('#e1e4e8', '#333333')};
-        color: ${cssManager.bdTheme('#586069', '#8b949e')};
-        padding: 4px 12px;
-        font-size: 12px;
-        border-radius: 0 0 0 6px;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        text-transform: lowercase;
-        z-index: 1;
-      }
-      
-      /* Highlight.js theme overrides */
-      .block.code .hljs-keyword {
-        color: ${cssManager.bdTheme('#d73a49', '#ff65ec')};
-        font-weight: normal;
-      }
-      
-      .block.code .hljs-string {
-        color: ${cssManager.bdTheme('#032f62', '#ffa465')};
-      }
-      
-      .block.code .hljs-number {
-        color: ${cssManager.bdTheme('#005cc5', '#65d5ff')};
-      }
-      
-      .block.code .hljs-function {
-        color: ${cssManager.bdTheme('#6f42c1', '#6596ff')};
-      }
-      
-      .block.code .hljs-comment {
-        color: ${cssManager.bdTheme('#6a737d', '#ffd765')};
-        font-style: italic;
-      }
-      
-      .block.code .hljs-variable,
-      .block.code .hljs-attr {
-        color: ${cssManager.bdTheme('#e36209', '#65ff6a')};
-      }
-      
-      .block.code .hljs-class,
-      .block.code .hljs-title {
-        color: ${cssManager.bdTheme('#6f42c1', '#65d5ff')};
-      }
-      
-      .block.code .hljs-params {
-        color: ${cssManager.bdTheme('#24292e', '#e1e4e8')};
-      }
-      
-      .block.code .hljs-built_in {
-        color: ${cssManager.bdTheme('#005cc5', '#65ff6a')};
-      }
-      
-      .block.code .hljs-literal {
-        color: ${cssManager.bdTheme('#005cc5', '#ff65ec')};
-      }
-      
-      .block.code .hljs-meta {
-        color: ${cssManager.bdTheme('#735c0f', '#ffa465')};
-      }
-    `;
-  }
-  
-  getPlaceholder(): string {
-    return '';
-  }
-  
-  // Helper methods for code functionality
-  
-  private applyHighlighting(element: HTMLElement, block: IBlock): void {
-    const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
-    const lineNumbersContainer = element.querySelector('.line-numbers') as HTMLDivElement;
-    
-    if (!codeBlock || !lineNumbersContainer) return;
-    
-    // Store current cursor position
-    const cursorPos = this.getCursorPosition(element);
-    
-    // Get the plain text content
-    const plainText = codeBlock.textContent || '';
-    
-    // Apply syntax highlighting
-    const language = block.metadata?.language || 'javascript';
-    let highlightedHtml: string;
-    
-    try {
-      const result = hlight.highlight(plainText, { 
-        language: language,
-        ignoreIllegals: true 
-      });
-      highlightedHtml = result.value;
-    } catch (error) {
-      // Fallback to plain text if highlighting fails
-      highlightedHtml = this.escapeHtml(plainText);
-    }
-    
-    // Update the code block with highlighted content
-    codeBlock.innerHTML = highlightedHtml;
-    
-    // Update line numbers
-    this.updateLineNumbers(plainText, lineNumbersContainer);
-    
-    // Restore cursor position if we had one
-    if (cursorPos !== null && document.activeElement === codeBlock) {
-      WysiwygSelection.setCursorPosition(codeBlock, cursorPos);
-    }
-  }
-  
-  private updateLineNumbers(content: string, container: HTMLDivElement): void {
-    const lines = content.split('\n');
-    const lineCount = lines.length;
-    
-    // Generate line numbers HTML
-    let lineNumbersHtml = '';
-    for (let i = 1; i <= lineCount; i++) {
-      lineNumbersHtml += `<div class="line-number">${i}</div>`;
-    }
-    
-    container.innerHTML = lineNumbersHtml;
-  }
-  
-  private escapeHtml(text: string): string {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-  
-  getCursorPosition(element: HTMLElement, context?: any): number | null {
-    // Get the actual code element
-    const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
-    if (!codeBlock) {
-      return null;
-    }
-    
-    // Get shadow roots from context
-    const wysiwygBlock = context?.component;
-    const parentComponent = wysiwygBlock?.closest('dees-input-wysiwyg');
-    const parentShadowRoot = parentComponent?.shadowRoot;
-    const blockShadowRoot = context?.shadowRoot;
-    
-    // Get selection info with both shadow roots for proper traversal
-    const shadowRoots: ShadowRoot[] = [];
-    if (parentShadowRoot) shadowRoots.push(parentShadowRoot);
-    if (blockShadowRoot) shadowRoots.push(blockShadowRoot);
-    
-    const selectionInfo = WysiwygSelection.getSelectionInfo(...shadowRoots);
-    
-    if (!selectionInfo) {
-      return null;
-    }
-    
-    if (!WysiwygSelection.containsAcrossShadowDOM(codeBlock, selectionInfo.startContainer)) {
-      return null;
-    }
-    
-    // Create a range from start of element to cursor position
-    const preCaretRange = document.createRange();
-    preCaretRange.selectNodeContents(codeBlock);
-    preCaretRange.setEnd(selectionInfo.startContainer, selectionInfo.startOffset);
-    
-    // Get the text content length up to cursor
-    const position = preCaretRange.toString().length;
-    
-    return position;
-  }
-  
-  getContent(element: HTMLElement, _context?: any): string {
-    const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
-    if (!codeBlock) return '';
-    
-    // For code blocks, get textContent to avoid HTML formatting
-    const content = codeBlock.textContent || '';
-    return content;
-  }
-  
-  setContent(element: HTMLElement, content: string, context?: any): void {
-    const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
-    if (!codeBlock) return;
-    
-    // Store if we have focus
-    const hadFocus = document.activeElement === codeBlock || 
-                     element.shadowRoot?.activeElement === codeBlock;
-    
-    // Use textContent for code blocks
-    codeBlock.textContent = content;
-    
-    // Apply highlighting
-    const block: IBlock = {
-      id: codeBlock.dataset.blockId || '',
-      type: 'code',
-      content: content,
-      metadata: context?.block?.metadata || {}
-    };
-    this.applyHighlighting(element, block);
-    
-    // Restore focus if we had it
-    if (hadFocus) {
-      codeBlock.focus();
-    }
-  }
-  
-  setCursorToStart(element: HTMLElement, _context?: any): void {
-    const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
-    if (codeBlock) {
-      WysiwygBlocks.setCursorToStart(codeBlock);
-    }
-  }
-  
-  setCursorToEnd(element: HTMLElement, _context?: any): void {
-    const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
-    if (codeBlock) {
-      WysiwygBlocks.setCursorToEnd(codeBlock);
-    }
-  }
-  
-  focus(element: HTMLElement, _context?: any): void {
-    const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
-    if (!codeBlock) return;
-    
-    // Ensure the element is focusable
-    if (!codeBlock.hasAttribute('contenteditable')) {
-      codeBlock.setAttribute('contenteditable', 'true');
-    }
-    
-    codeBlock.focus();
-    
-    // If focus failed, try again after a microtask
-    if (document.activeElement !== codeBlock && element.shadowRoot?.activeElement !== codeBlock) {
-      Promise.resolve().then(() => {
-        codeBlock.focus();
-      });
-    }
-  }
-  
-  focusWithCursor(element: HTMLElement, position: 'start' | 'end' | number = 'end', context?: any): void {
-    const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
-    if (!codeBlock) return;
-    
-    // Ensure element is focusable first
-    if (!codeBlock.hasAttribute('contenteditable')) {
-      codeBlock.setAttribute('contenteditable', 'true');
-    }
-    
-    // Focus the element
-    codeBlock.focus();
-    
-    // Set cursor position after focus is established
-    const setCursor = () => {
-      if (position === 'start') {
-        this.setCursorToStart(element, context);
-      } else if (position === 'end') {
-        this.setCursorToEnd(element, context);
-      } else if (typeof position === 'number') {
-        // Use the selection utility to set cursor position
-        WysiwygSelection.setCursorPosition(codeBlock, position);
-      }
-    };
-    
-    // Ensure cursor is set after focus
-    if (document.activeElement === codeBlock || element.shadowRoot?.activeElement === codeBlock) {
-      setCursor();
-    } else {
-      // Wait for focus to be established
-      Promise.resolve().then(() => {
-        if (document.activeElement === codeBlock || element.shadowRoot?.activeElement === codeBlock) {
-          setCursor();
-        }
-      });
-    }
-  }
-  
-  getSplitContent(element: HTMLElement, context?: any): { before: string; after: string } | null {
-    const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
-    if (!codeBlock) {
-      return null;
-    }
-    
-    // Get shadow roots from context
-    const wysiwygBlock = context?.component;
-    const parentComponent = wysiwygBlock?.closest('dees-input-wysiwyg');
-    const parentShadowRoot = parentComponent?.shadowRoot;
-    const blockShadowRoot = context?.shadowRoot;
-    
-    // Get selection info with both shadow roots for proper traversal
-    const shadowRoots: ShadowRoot[] = [];
-    if (parentShadowRoot) shadowRoots.push(parentShadowRoot);
-    if (blockShadowRoot) shadowRoots.push(blockShadowRoot);
-    
-    const selectionInfo = WysiwygSelection.getSelectionInfo(...shadowRoots);
-    
-    if (!selectionInfo) {
-      // Try using last known cursor position
-      if (this.lastKnownCursorPosition !== null) {
-        const fullText = codeBlock.textContent || '';
-        const pos = Math.min(this.lastKnownCursorPosition, fullText.length);
-        return {
-          before: fullText.substring(0, pos),
-          after: fullText.substring(pos)
-        };
-      }
-      return null;
-    }
-    
-    // Make sure the selection is within this block
-    if (!WysiwygSelection.containsAcrossShadowDOM(codeBlock, selectionInfo.startContainer)) {
-      // Try using last known cursor position
-      if (this.lastKnownCursorPosition !== null) {
-        const fullText = codeBlock.textContent || '';
-        const pos = Math.min(this.lastKnownCursorPosition, fullText.length);
-        return {
-          before: fullText.substring(0, pos),
-          after: fullText.substring(pos)
-        };
-      }
-      return null;
-    }
-    
-    // Get cursor position
-    const cursorPos = this.getCursorPosition(element, context);
-    
-    if (cursorPos === null || cursorPos === 0) {
-      // If cursor is at start or can't determine position, move all content
-      return {
-        before: '',
-        after: codeBlock.textContent || ''
-      };
-    }
-    
-    // For code blocks, split based on text content only
-    const fullText = codeBlock.textContent || '';
-    
-    return { 
-      before: fullText.substring(0, cursorPos), 
-      after: fullText.substring(cursorPos) 
-    };
-  }
-}
\ No newline at end of file
diff --git a/ts_web/elements/wysiwyg/blocks/text/code.block.ts b/ts_web/elements/wysiwyg/blocks/text/code.block.ts
index 2925d01..79ad4db 100644
--- a/ts_web/elements/wysiwyg/blocks/text/code.block.ts
+++ b/ts_web/elements/wysiwyg/blocks/text/code.block.ts
@@ -33,6 +33,13 @@ export class CodeBlockHandler extends BaseBlockHandler {
       <div class="code-block-container${isSelected ? ' selected' : ''}" data-language="${language}">
         <div class="code-header">
           <span class="language-label">${language}</span>
+          <button class="copy-button" title="Copy code">
+            <svg class="copy-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
+              <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
+            </svg>
+            <span class="copy-text">Copy</span>
+          </button>
         </div>
         <div class="code-body">
           <div class="line-numbers">${lineNumbersHtml}</div>
@@ -51,9 +58,59 @@ export class CodeBlockHandler extends BaseBlockHandler {
   setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void {
     const editor = element.querySelector('.code-editor') as HTMLElement;
     const container = element.querySelector('.code-block-container') as HTMLElement;
+    const copyButton = element.querySelector('.copy-button') as HTMLButtonElement;
     
     if (!editor || !container) return;
     
+    // Setup copy button
+    if (copyButton) {
+      copyButton.addEventListener('click', async () => {
+        const content = editor.textContent || '';
+        
+        try {
+          await navigator.clipboard.writeText(content);
+          
+          // Show feedback
+          const copyText = copyButton.querySelector('.copy-text') as HTMLElement;
+          const originalText = copyText.textContent;
+          copyText.textContent = 'Copied!';
+          copyButton.classList.add('copied');
+          
+          // Reset after 2 seconds
+          setTimeout(() => {
+            copyText.textContent = originalText;
+            copyButton.classList.remove('copied');
+          }, 2000);
+        } catch (err) {
+          console.error('Failed to copy:', err);
+          // Fallback for older browsers
+          const textArea = document.createElement('textarea');
+          textArea.value = content;
+          textArea.style.position = 'fixed';
+          textArea.style.opacity = '0';
+          document.body.appendChild(textArea);
+          textArea.select();
+          try {
+            // @ts-ignore - execCommand is deprecated but needed for fallback
+            document.execCommand('copy');
+            // Show feedback
+            const copyText = copyButton.querySelector('.copy-text') as HTMLElement;
+            const originalText = copyText.textContent;
+            copyText.textContent = 'Copied!';
+            copyButton.classList.add('copied');
+            
+            setTimeout(() => {
+              copyText.textContent = originalText;
+              copyButton.classList.remove('copied');
+            }, 2000);
+          } catch (err) {
+            console.error('Fallback copy failed:', err);
+          }
+          document.body.removeChild(textArea);
+        }
+      });
+    }
+    
     // Track if we're currently editing
     let isEditing = false;
     
@@ -325,7 +382,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
         border-bottom: 1px solid ${cssManager.bdTheme('#d1d5da', '#30363d')};
         padding: 8px 16px;
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
         align-items: center;
       }
       
@@ -338,6 +395,48 @@ export class CodeBlockHandler extends BaseBlockHandler {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       }
       
+      /* Copy Button */
+      .copy-button {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 12px;
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('#d1d5da', '#30363d')};
+        border-radius: 6px;
+        color: ${cssManager.bdTheme('#57606a', '#8b949e')};
+        font-size: 12px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        outline: none;
+      }
+      
+      .copy-button:hover {
+        background: ${cssManager.bdTheme('#f3f4f6', '#1c2128')};
+        color: ${cssManager.bdTheme('#24292f', '#c9d1d9')};
+        border-color: ${cssManager.bdTheme('#8b949e', '#484f58')};
+      }
+      
+      .copy-button:active {
+        transform: scale(0.95);
+      }
+      
+      .copy-button.copied {
+        background: ${cssManager.bdTheme('#2ea043', '#238636')};
+        border-color: ${cssManager.bdTheme('#2ea043', '#238636')};
+        color: white;
+      }
+      
+      .copy-icon {
+        flex-shrink: 0;
+      }
+      
+      .copy-text {
+        min-width: 45px;
+        text-align: center;
+      }
+      
       /* Code Body */
       .code-body {
         display: flex;
diff --git a/ts_web/elements/wysiwyg/wysiwyg.modalmanager.ts b/ts_web/elements/wysiwyg/wysiwyg.modalmanager.ts
index 3814869..86a707a 100644
--- a/ts_web/elements/wysiwyg/wysiwyg.modalmanager.ts
+++ b/ts_web/elements/wysiwyg/wysiwyg.modalmanager.ts
@@ -1,4 +1,4 @@
-import { html, type TemplateResult } from '@design.estate/dees-element';
+import { html, type TemplateResult, cssManager } from '@design.estate/dees-element';
 import { DeesModal } from '../dees-modal.js';
 import { type IBlock } from './wysiwyg.types.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
@@ -16,37 +16,56 @@ export class WysiwygModalManager {
         heading: 'Select Programming Language',
         content: html`
           <style>
+            .language-container {
+              padding: 16px;
+              max-height: 400px;
+              overflow-y: auto;
+            }
             .language-grid {
               display: grid;
-              grid-template-columns: repeat(3, 1fr);
+              grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
               gap: 8px;
-              padding: 16px;
             }
             .language-button {
-              padding: 12px;
-              background: var(--dees-color-box);
-              border: 1px solid var(--dees-color-line-bright);
-              border-radius: 4px;
+              padding: 12px 8px;
+              background: transparent;
+              border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
+              border-radius: 6px;
               cursor: pointer;
               text-align: center;
-              transition: all 0.2s;
+              font-size: 13px;
+              font-weight: 500;
+              transition: all 0.15s ease;
+              color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
             }
             .language-button:hover {
-              background: var(--dees-color-box-highlight);
-              border-color: var(--dees-color-primary);
+              background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
+              border-color: ${cssManager.bdTheme('#d1d5db', '#4b5563')};
+            }
+            .language-button.selected {
+              background: ${cssManager.bdTheme('#f3f4f6', '#374151')};
+              border-color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
+              color: ${cssManager.bdTheme('#111827', '#f9fafb')};
             }
           </style>
-          <div class="language-grid">
-            ${this.getLanguages().map(lang => html`
-              <div class="language-button" @click="${(e: MouseEvent) => {
-                selectedLanguage = lang.toLowerCase();
-                const modal = (e.target as HTMLElement).closest('dees-modal');
-                if (modal) {
-                  const okButton = modal.shadowRoot?.querySelector('.bottomButton.ok') as HTMLElement;
-                  if (okButton) okButton.click();
-                }
-              }}">${lang}</div>
-            `)}
+          <div class="language-container">
+            <div class="language-grid">
+              ${this.getLanguages().map(lang => html`
+                <div 
+                  class="language-button ${selectedLanguage === lang.toLowerCase() ? 'selected' : ''}" 
+                  @click="${() => {
+                    selectedLanguage = lang.toLowerCase();
+                    // Close modal by finding it in DOM
+                    const modal = document.querySelector('dees-modal');
+                    if (modal && typeof (modal as any).destroy === 'function') {
+                      (modal as any).destroy();
+                    }
+                    resolve(selectedLanguage);
+                  }}">
+                  ${lang}
+                </div>
+              `)}
+            </div>
           </div>
         `,
         menuOptions: [
@@ -56,13 +75,6 @@ export class WysiwygModalManager {
               modal.destroy();
               resolve(null);
             }
-          },
-          {
-            name: 'OK',
-            action: async (modal) => {
-              modal.destroy();
-              resolve(selectedLanguage);
-            }
           }
         ]
       });
@@ -76,48 +88,61 @@ export class WysiwygModalManager {
     block: IBlock, 
     onUpdate: (block: IBlock) => void
   ): Promise<void> {
+    
     const content = html`
       <style>
         .settings-container {
           padding: 16px;
         }
         .settings-section {
-          margin-bottom: 20px;
+          margin-bottom: 24px;
+        }
+        .settings-section:last-child {
+          margin-bottom: 0;
         }
         .settings-label {
           font-weight: 500;
           margin-bottom: 8px;
-          color: var(--dees-color-text);
+          color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+          font-size: 12px;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
         }
         .block-type-grid {
           display: grid;
-          grid-template-columns: repeat(2, 1fr);
+          grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
           gap: 8px;
-          margin-bottom: 16px;
         }
         .block-type-button {
           padding: 12px;
-          background: var(--dees-color-box);
-          border: 1px solid var(--dees-color-line-bright);
-          border-radius: 4px;
+          background: transparent;
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
+          border-radius: 6px;
           cursor: pointer;
-          text-align: center;
-          transition: all 0.2s;
+          text-align: left;
+          transition: all 0.15s ease;
           display: flex;
           align-items: center;
           gap: 8px;
+          font-size: 13px;
+          color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
         }
         .block-type-button:hover {
-          background: var(--dees-color-box-highlight);
-          border-color: var(--dees-color-primary);
+          background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
+          border-color: ${cssManager.bdTheme('#d1d5db', '#4b5563')};
         }
         .block-type-button.selected {
-          background: var(--dees-color-primary);
-          color: white;
+          background: ${cssManager.bdTheme('#f3f4f6', '#374151')};
+          border-color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
+          color: ${cssManager.bdTheme('#111827', '#f9fafb')};
         }
         .block-type-icon {
-          font-weight: 600;
+          font-weight: 500;
           font-size: 16px;
+          width: 20px;
+          text-align: center;
+          flex-shrink: 0;
+          opacity: 0.7;
         }
       </style>
       <div class="settings-container">
@@ -131,7 +156,7 @@ export class WysiwygModalManager {
       content,
       menuOptions: [
         {
-          name: 'Close',
+          name: 'Done',
           action: async (modal) => {
             modal.destroy();
           }
@@ -147,57 +172,55 @@ export class WysiwygModalManager {
     block: IBlock, 
     onUpdate: (block: IBlock) => void
   ): TemplateResult {
-    const currentLanguage = block.metadata?.language || 'plain text';
+    const currentLanguage = block.metadata?.language || 'javascript';
     
     return html`
       <style>
-        .settings-section {
-          margin-bottom: 16px;
-        }
-        .settings-label {
-          font-weight: 500;
-          margin-bottom: 8px;
-        }
         .language-grid {
           display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: 8px;
+          grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+          gap: 6px;
         }
         .language-button {
-          padding: 8px;
-          background: var(--dees-color-box);
-          border: 1px solid var(--dees-color-line-bright);
+          padding: 8px 4px;
+          background: transparent;
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
           border-radius: 4px;
           cursor: pointer;
           text-align: center;
-          transition: all 0.2s;
+          transition: all 0.15s ease;
+          font-size: 12px;
+          color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
         }
         .language-button:hover {
-          background: var(--dees-color-box-highlight);
-          border-color: var(--dees-color-primary);
+          background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
+          border-color: ${cssManager.bdTheme('#d1d5db', '#4b5563')};
         }
         .language-button.selected {
-          background: var(--dees-color-primary);
-          color: white;
+          background: ${cssManager.bdTheme('#f3f4f6', '#374151')};
+          border-color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
+          color: ${cssManager.bdTheme('#111827', '#f9fafb')};
         }
       </style>
       <div class="settings-section">
         <div class="settings-label">Programming Language</div>
         <div class="language-grid">
           ${this.getLanguages().map(lang => html`
-            <div class="language-button ${currentLanguage === lang.toLowerCase() ? 'selected' : ''}" 
-              @click="${(e: MouseEvent) => {
+            <div 
+              class="language-button ${currentLanguage === lang.toLowerCase() ? 'selected' : ''}" 
+              @click="${() => {
                 if (!block.metadata) block.metadata = {};
                 block.metadata.language = lang.toLowerCase();
                 onUpdate(block);
                 
-                // Close modal
-                const modal = (e.target as HTMLElement).closest('dees-modal');
-                if (modal) {
-                  const closeButton = modal.shadowRoot?.querySelector('.bottomButton') as HTMLElement;
-                  if (closeButton) closeButton.click();
+                // Close modal immediately
+                const modal = document.querySelector('dees-modal');
+                if (modal && typeof (modal as any).destroy === 'function') {
+                  (modal as any).destroy();
                 }
-              }}">${lang}</div>
+              }}"
+              data-lang="${lang}"
+            >${lang}</div>
           `)}
         </div>
       </div>
@@ -228,6 +251,8 @@ export class WysiwygModalManager {
             <div 
               class="block-type-button ${block.type === item.type ? 'selected' : ''}"
               @click="${async (e: MouseEvent) => {
+                const button = e.currentTarget as HTMLElement;
+                
                 const oldType = block.type;
                 block.type = item.type as IBlock['type'];
                 
@@ -252,11 +277,10 @@ export class WysiwygModalManager {
                 
                 onUpdate(block);
                 
-                // Close modal after selection
-                const modal = (e.target as HTMLElement).closest('dees-modal');
-                if (modal) {
-                  const closeButton = modal.shadowRoot?.querySelector('.bottomButton') as HTMLElement;
-                  if (closeButton) closeButton.click();
+                // Close modal immediately
+                const modal = document.querySelector('dees-modal');
+                if (modal && typeof (modal as any).destroy === 'function') {
+                  (modal as any).destroy();
                 }
               }}"
             >