diff --git a/public/themes-manifest.json b/public/themes-manifest.json
index 0a6e107..f15d1ad 100644
--- a/public/themes-manifest.json
+++ b/public/themes-manifest.json
@@ -12,5 +12,5 @@
       "hasMasterSlide": true
     }
   },
-  "generated": "2025-08-21T14:43:50.916Z"
+  "generated": "2025-08-21T16:18:27.749Z"
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 4d9b705..7e04051 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import { NewPresentationPage } from './components/presentations/NewPresentationP
 import { PresentationViewer } from './components/presentations/PresentationViewer.tsx';
 import { PresentationMode } from './components/presentations/PresentationMode.tsx';
 import { PresentationEditor } from './components/presentations/PresentationEditor.tsx';
-import { SlideEditor } from './components/presentations/SlideEditor.tsx';
+import { SlideEditor } from './components/slide-editor/index.ts';
 import { PresentationsList } from './components/presentations/PresentationsList.tsx';
 import { AppHeader } from './components/AppHeader.tsx';
 import { Welcome } from './components/Welcome.tsx';
diff --git a/src/components/presentations/SlideEditor.css b/src/components/presentations/SlideEditor.css
deleted file mode 100644
index 3c5309a..0000000
--- a/src/components/presentations/SlideEditor.css
+++ /dev/null
@@ -1,740 +0,0 @@
-.slide-editor {
-  min-height: 100vh;
-  background: #f8fafc;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Header */
-.slide-editor-header {
-  background: white;
-  border-bottom: 1px solid #e2e8f0;
-  padding: 0.75rem 2rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1.5rem;
-  flex-wrap: wrap;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 20;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.editor-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-  min-width: 0;
-}
-
-.back-button {
-  background: none;
-  border: none;
-  color: #64748b;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.375rem;
-  transition: all 0.2s ease;
-}
-
-.back-button:hover {
-  background: #f1f5f9;
-  color: #334155;
-}
-
-.editor-title {
-  flex: 1;
-  min-width: 0;
-}
-
-.editor-title h1 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #1e293b;
-}
-
-.editor-title p {
-  margin: 0.125rem 0 0 0;
-  color: #64748b;
-  font-size: 0.75rem;
-}
-
-.editor-actions {
-  display: flex;
-  gap: 0.75rem;
-  flex-shrink: 0;
-}
-
-.preview-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.action-button {
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  font-weight: 500;
-  font-size: 0.875rem;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.action-button.primary {
-  background: #3b82f6;
-  color: white;
-}
-
-.action-button.primary:hover:not(:disabled) {
-  background: #2563eb;
-}
-
-.action-button.secondary {
-  background: #f8fafc;
-  color: #64748b;
-  border: 1px solid #e2e8f0;
-}
-
-.action-button.secondary:hover:not(:disabled) {
-  background: #f1f5f9;
-  color: #475569;
-}
-
-.action-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Main Content */
-.slide-editor-content {
-  flex: 1;
-  padding: 2rem;
-}
-
-/* Step Header */
-.step-header {
-  text-align: center;
-  margin-bottom: 1.5rem;
-}
-
-.step-header h2 {
-  margin: 0 0 0.25rem 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #1e293b;
-}
-
-.step-header p {
-  margin: 0;
-  color: #64748b;
-  font-size: 0.875rem;
-}
-
-/* Layout Selection */
-.layout-selection {
-  position: fixed;
-  top: 80px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: #f8fafc;
-  z-index: 10;
-  overflow-y: auto;
-  padding: 2rem;
-  box-sizing: border-box;
-}
-
-.layouts-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  gap: 1.5rem;
-}
-
-.layout-card {
-  background: white;
-  border: 2px solid #e2e8f0;
-  border-radius: 0.75rem;
-  overflow: hidden;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.layout-card:hover {
-  border-color: #cbd5e1;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.layout-card.selected {
-  border-color: #3b82f6;
-  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2);
-}
-
-.layout-preview {
-  height: 300px;
-  background: #f8fafc;
-  border-bottom: 1px solid #e2e8f0;
-  overflow: hidden;
-  position: relative;
-}
-
-.layout-rendered {
-  transform: scale(0.4);
-  transform-origin: top left;
-  width: 250%;
-  height: 250%;
-  pointer-events: none;
-}
-
-.layout-info {
-  padding: 1.5rem;
-}
-
-.layout-info h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #1e293b;
-}
-
-.layout-info p {
-  margin: 0 0 1rem 0;
-  color: #64748b;
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
-
-.layout-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.slot-count {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: #6b7280;
-  background: #f1f5f9;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-}
-
-.slot-types {
-  display: flex;
-  gap: 0.25rem;
-  flex-wrap: wrap;
-}
-
-.slot-type-badge {
-  font-size: 0.625rem;
-  font-weight: 500;
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  text-transform: capitalize;
-}
-
-.slot-type-badge.title {
-  background-color: #fef3c7;
-  color: #92400e;
-}
-
-.slot-type-badge.subtitle {
-  background-color: #e0e7ff;
-  color: #3730a3;
-}
-
-.slot-type-badge.text {
-  background-color: #d1fae5;
-  color: #047857;
-}
-
-.slot-type-badge.image {
-  background-color: #fce7f3;
-  color: #be185d;
-}
-
-.slot-type-badge.video {
-  background-color: #ddd6fe;
-  color: #6b21a8;
-}
-
-.slot-type-badge.list {
-  background-color: #fed7d7;
-  color: #c53030;
-}
-
-/* Content Editing */
-.content-editing {
-  /* Use absolute positioning to break out of all DOM constraints */
-  position: fixed;
-  top: 80px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: #f8fafc;
-  z-index: 10;
-  overflow: hidden;
-}
-
-.editing-layout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2rem;
-  align-items: stretch;
-  height: 100%;
-  width: 100%;
-  padding: 2rem;
-  box-sizing: border-box;
-  max-width: none;
-}
-
-.content-form {
-  background: white;
-  border-radius: 0.75rem;
-  border: 1px solid #e2e8f0;
-  padding: 1.5rem;
-  overflow-y: auto;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.content-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  flex: 1;
-  overflow-y: auto;
-  min-height: 0;
-}
-
-.content-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.field-label {
-  font-weight: 500;
-  color: #374151;
-  font-size: 0.875rem;
-}
-
-.required {
-  color: #dc2626;
-  margin-left: 0.25rem;
-}
-
-.field-input,
-.field-textarea {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  color: #374151;
-  background: white;
-  box-sizing: border-box;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.field-input:focus,
-.field-textarea:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.field-textarea {
-  resize: vertical;
-  min-height: 80px;
-  font-family: inherit;
-}
-
-.content-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid #e5e7eb;
-  margin-top: 1rem;
-}
-
-.action-links {
-  display: flex;
-  align-items: center;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 1rem;
-}
-
-.cancel-link {
-  background: none;
-  border: none;
-  color: #64748b;
-  font-size: 0.875rem;
-  font-weight: 400;
-  text-decoration: underline;
-  cursor: pointer;
-  padding: 0;
-  transition: color 0.2s ease;
-}
-
-.cancel-link:hover:not(:disabled) {
-  color: #374151;
-  text-decoration: underline;
-}
-
-.cancel-link:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.content-actions .action-button {
-  padding: 0.75rem 1.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.5rem;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 120px;
-}
-
-.content-actions .action-button.primary {
-  background: #3b82f6;
-  color: white;
-}
-
-.content-actions .action-button.primary:hover:not(:disabled) {
-  background: #2563eb;
-}
-
-.content-actions .action-button.secondary {
-  background: #f8fafc;
-  color: #64748b;
-  border: 1px solid #e2e8f0;
-}
-
-.content-actions .action-button.secondary:hover:not(:disabled) {
-  background: #f1f5f9;
-  color: #475569;
-}
-
-.content-actions .action-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.field-hint {
-  margin: 0;
-  font-size: 0.75rem;
-  color: #6b7280;
-  font-style: italic;
-}
-
-/* Content Preview */
-.content-preview {
-  background: white;
-  border-radius: 0.75rem;
-  border: 1px solid #e2e8f0;
-  padding: 1rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.content-preview h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: #1e293b;
-  text-align: center;
-}
-
-.preview-description {
-  margin: 0 0 1rem 0;
-  font-size: 0.75rem;
-  color: #64748b;
-  text-align: center;
-  font-style: italic;
-}
-
-.preview-container {
-  border: 2px solid #e2e8f0;
-  border-radius: 0.75rem;
-  background: white;
-  overflow: hidden;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.slide-preview-wrapper {
-  background: #f8fafc;
-  padding: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  position: relative;
-  /* Ensure this container doesn't exceed available space */
-  max-height: 100%;
-  overflow: hidden;
-}
-
-/* Use the global aspect ratio classes for proper slide display */
-.slide-preview-wrapper .slide-container {
-  /* Use a width-based approach and let aspect-ratio handle height */
-  width: min(80%, 70vw);
-  max-height: 60vh;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
-  border-radius: 0.5rem;
-  background: white;
-  border: 1px solid #e2e8f0;
-  overflow: hidden;
-}
-
-/* Override global aspect ratio classes for preview context */
-.slide-preview-wrapper .slide-container.aspect-16-9 {
-  aspect-ratio: 16 / 9;
-  width: min(80%, min(70vw, 60vh * (16/9)));
-}
-
-.slide-preview-wrapper .slide-container.aspect-4-3 {
-  aspect-ratio: 4 / 3;
-  width: min(80%, min(70vw, 60vh * (4/3)));
-}
-
-.slide-preview-wrapper .slide-container.aspect-16-10 {
-  aspect-ratio: 16 / 10;
-  width: min(80%, min(70vw, 60vh * (16/10)));
-}
-
-.preview-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: #f8fafc;
-  border-top: 1px solid #e2e8f0;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.layout-name {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: #374151;
-}
-
-.aspect-ratio-info {
-  font-size: 0.625rem;
-  color: #3b82f6;
-  background: #eff6ff;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  font-weight: 500;
-}
-
-.content-count {
-  font-size: 0.625rem;
-  color: #6b7280;
-  background: #e5e7eb;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-}
-
-/* Error State */
-.editor-error {
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin-top: 1rem;
-  color: #dc2626;
-  text-align: center;
-}
-
-.editor-error p {
-  margin: 0;
-  font-weight: 500;
-}
-
-/* Loading and Error States */
-.loading-content,
-.error-content,
-.not-found-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 50vh;
-  text-align: center;
-  gap: 1rem;
-}
-
-.loading-spinner {
-  color: #64748b;
-  font-size: 1.125rem;
-}
-
-.error-content h2,
-.not-found-content h2 {
-  color: #dc2626;
-  margin: 0;
-}
-
-.error-content p,
-.not-found-content p {
-  color: #64748b;
-  margin: 0.5rem 0 1.5rem 0;
-}
-
-.back-link {
-  color: #3b82f6;
-  text-decoration: none;
-  font-weight: 500;
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  border: 1px solid #e2e8f0;
-  transition: all 0.2s ease;
-}
-
-.back-link:hover {
-  background: #eff6ff;
-  border-color: #3b82f6;
-}
-
-/* Responsive Design */
-@media (max-width: 1024px) {
-  .content-editing {
-    top: 60px;
-  }
-  
-  .layout-selection {
-    top: 60px;
-  }
-  
-  .editing-layout {
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-    padding: 1rem;
-  }
-  
-  .content-preview {
-    height: 300px;
-    min-height: 300px;
-  }
-  
-  .slide-preview-wrapper {
-    padding: 0.5rem;
-  }
-  
-  /* Adjust viewport calculations for smaller screens */
-  .slide-preview-wrapper .slide-container {
-    width: min(90%, 90vw);
-    max-height: 250px;
-  }
-  
-  .slide-preview-wrapper .slide-container.aspect-16-9,
-  .slide-preview-wrapper .slide-container.aspect-4-3,
-  .slide-preview-wrapper .slide-container.aspect-16-10 {
-    width: min(90%, min(90vw, 250px * var(--aspect-multiplier, 1.78)));
-  }
-}
-
-@media (max-width: 768px) {
-  .content-editing {
-    top: 50px;
-  }
-  
-  .layout-selection {
-    top: 50px;
-    padding: 1rem;
-  }
-  
-  .slide-editor-header {
-    padding: 0.5rem 1rem;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.5rem;
-  }
-  
-  .editor-info {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-  
-  .editor-actions {
-    justify-content: stretch;
-  }
-  
-  .action-button {
-    flex: 1;
-  }
-  
-  .slide-editor-content {
-    padding: 1rem;
-  }
-  
-  .layouts-grid {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-  
-  .content-form {
-    padding: 1rem;
-  }
-  
-  .content-actions {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.75rem;
-  }
-  
-  .action-links {
-    justify-content: center;
-    order: 2;
-  }
-  
-  .action-buttons {
-    justify-content: stretch;
-    order: 1;
-  }
-  
-  .action-buttons .action-button {
-    flex: 1;
-  }
-  
-  .preview-container {
-    min-height: 200px;
-  }
-}
-
-/* Image slot field integration */
-.content-field .image-slot-field {
-  margin-top: 0.5rem;
-  border: 1px solid #e2e8f0;
-  background: white;
-}
-
-.content-field .image-slot-field:focus-within {
-  border-color: #3b82f6;
-}
\ No newline at end of file
diff --git a/src/components/presentations/SlideEditor.tsx b/src/components/presentations/SlideEditor.tsx
deleted file mode 100644
index cc99992..0000000
--- a/src/components/presentations/SlideEditor.tsx
+++ /dev/null
@@ -1,470 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
-import type { Presentation, SlideContent } from '../../types/presentation.ts';
-import type { Theme, SlideLayout } from '../../types/theme.ts';
-import { getPresentationById, updatePresentation } from '../../utils/presentationStorage.ts';
-import { getTheme } from '../../themes/index.ts';
-import { renderTemplateWithSampleData } from '../../utils/templateRenderer.ts';
-import { sanitizeSlideTemplate } from '../../utils/htmlSanitizer.ts';
-import { loggers } from '../../utils/logger.ts';
-import { SlidePreviewModal } from './SlidePreviewModal.tsx';
-import { ImageUploadField } from '../ui/ImageUploadField.tsx';
-import './SlideEditor.css';
-
-export const SlideEditor: React.FC = () => {
-  const { presentationId, slideId } = useParams<{ 
-    presentationId: string; 
-    slideId: string; 
-  }>();
-  const navigate = useNavigate();
-  
-  const [presentation, setPresentation] = useState<Presentation | null>(null);
-  const [theme, setTheme] = useState<Theme | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [showPreview, setShowPreview] = useState(false);
-  
-  const isEditingExisting = slideId !== 'new';
-  
-  // Editor state
-  const [selectedLayout, setSelectedLayout] = useState<SlideLayout | null>(null);
-  const [slideContent, setSlideContent] = useState<Record<string, string>>({});
-  const [slideNotes, setSlideNotes] = useState('');
-  const [currentStep, setCurrentStep] = useState<'layout' | 'content'>(isEditingExisting ? 'content' : 'layout');
-  const existingSlide = isEditingExisting && presentation 
-    ? presentation.slides.find(s => s.id === slideId)
-    : null;
-
-  useEffect(() => {
-    const loadPresentationAndTheme = async () => {
-      if (!presentationId) {
-        setError('No presentation ID provided');
-        setLoading(false);
-        return;
-      }
-
-      try {
-        setLoading(true);
-        
-        // Load presentation
-        const presentationData = await getPresentationById(presentationId);
-        if (!presentationData) {
-          setError(`Presentation not found: ${presentationId}`);
-          return;
-        }
-        
-        setPresentation(presentationData);
-        
-        // Load theme
-        const themeData = await getTheme(presentationData.metadata.theme);
-        if (!themeData) {
-          setError(`Theme not found: ${presentationData.metadata.theme}`);
-          return;
-        }
-        
-        setTheme(themeData);
-        
-        // If editing existing slide, populate data
-        if (isEditingExisting && slideId !== 'new') {
-          const slide = presentationData.slides.find(s => s.id === slideId);
-          if (slide) {
-            const layout = themeData.layouts.find(l => l.id === slide.layoutId);
-            if (layout) {
-              setSelectedLayout(layout);
-              setSlideContent(slide.content);
-              setSlideNotes(slide.notes || '');
-              // No need to set currentStep here since it's already 'content' for existing slides
-            }
-          } else {
-            setError(`Slide not found: ${slideId}`);
-            return;
-          }
-        }
-        
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load presentation');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadPresentationAndTheme();
-  }, [presentationId, slideId, isEditingExisting]);
-
-  // Load theme CSS for layout previews
-  useEffect(() => {
-    if (theme) {
-      const themeStyleId = 'slide-editor-theme-style';
-      const existingStyle = document.getElementById(themeStyleId);
-      
-      if (existingStyle) {
-        existingStyle.remove();
-      }
-
-      const link = document.createElement('link');
-      link.id = themeStyleId;
-      link.rel = 'stylesheet';
-      link.href = `${theme.basePath}/${theme.cssFile}`;
-      document.head.appendChild(link);
-
-      return () => {
-        const styleToRemove = document.getElementById(themeStyleId);
-        if (styleToRemove) {
-          styleToRemove.remove();
-        }
-      };
-    }
-  }, [theme]);
-
-  const selectLayout = (layout: SlideLayout) => {
-    setSelectedLayout(layout);
-    
-    // Initialize content with empty values for all slots
-    const initialContent: Record<string, string> = {};
-    layout.slots.forEach(slot => {
-      initialContent[slot.id] = slideContent[slot.id] || '';
-    });
-    setSlideContent(initialContent);
-    
-    // Automatically move to content editing after layout selection
-    setCurrentStep('content');
-  };
-
-  const updateSlotContent = (slotId: string, content: string) => {
-    setSlideContent(prev => ({
-      ...prev,
-      [slotId]: content
-    }));
-  };
-
-  const saveSlide = async () => {
-    if (!presentation || !selectedLayout) return;
-    
-    try {
-      setSaving(true);
-      setError(null);
-      
-      const slideData: SlideContent = {
-        id: isEditingExisting ? slideId! : `slide_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-        layoutId: selectedLayout.id,
-        content: slideContent,
-        notes: slideNotes,
-        order: isEditingExisting 
-          ? (existingSlide?.order ?? presentation.slides.length)
-          : presentation.slides.length
-      };
-      
-      const updatedPresentation = { ...presentation };
-      
-      if (isEditingExisting) {
-        // Update existing slide
-        const slideIndex = updatedPresentation.slides.findIndex(s => s.id === slideId);
-        if (slideIndex !== -1) {
-          updatedPresentation.slides[slideIndex] = slideData;
-        }
-      } else {
-        // Add new slide
-        updatedPresentation.slides.push(slideData);
-      }
-      
-      await updatePresentation(updatedPresentation);
-      
-      // Navigate back to editor with the updated slide
-      const slideNumber = isEditingExisting 
-        ? (updatedPresentation.slides.findIndex(s => s.id === slideData.id) + 1)
-        : updatedPresentation.slides.length;
-      
-      navigate(`/presentations/${presentationId}/edit/slides/${slideNumber}`);
-      
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to save slide');
-      loggers.presentation.error('Failed to save slide', err instanceof Error ? err : new Error(String(err)));
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const cancelEditing = () => {
-    if (isEditingExisting) {
-      const slideIndex = presentation?.slides.findIndex(s => s.id === slideId) ?? 0;
-      const slideNumber = slideIndex + 1;
-      navigate(`/presentations/${presentationId}/edit/slides/${slideNumber}`);
-    } else {
-      navigate(`/presentations/${presentationId}/edit/slides/1`);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="slide-editor">
-        <div className="loading-content">
-          <div className="loading-spinner">Loading slide editor...</div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="slide-editor">
-        <div className="error-content">
-          <h2>Error Loading Slide Editor</h2>
-          <p>{error}</p>
-          <Link to="/themes" className="back-link">← Back to Themes</Link>
-        </div>
-      </div>
-    );
-  }
-
-  if (!presentation || !theme) {
-    return (
-      <div className="slide-editor">
-        <div className="not-found-content">
-          <h2>Presentation Not Found</h2>
-          <p>The requested presentation could not be found.</p>
-          <Link to="/themes" className="back-link">← Back to Themes</Link>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="slide-editor">
-      <header className="slide-editor-header">
-        <div className="editor-info">
-          <button 
-            onClick={cancelEditing}
-            className="back-button"
-            type="button"
-          >
-            ← Back to Presentation
-          </button>
-          <div className="editor-title">
-            <h1>{isEditingExisting ? 'Edit Slide' : 'Add New Slide'}</h1>
-            <p>{presentation.metadata.name} • {theme.name} theme</p>
-          </div>
-        </div>
-        
-        <div className="editor-actions">
-          {selectedLayout && currentStep === 'content' && (
-            <button 
-              type="button"
-              className="action-button secondary preview-button"
-              onClick={() => setShowPreview(true)}
-              disabled={saving}
-              title="Preview slide in full screen"
-            >
-              🔍 Preview
-            </button>
-          )}
-          <button 
-            type="button"
-            className="action-button primary"
-            onClick={saveSlide}
-            disabled={!selectedLayout || saving}
-          >
-            {saving ? 'Saving...' : (isEditingExisting ? 'Update Slide' : 'Add Slide')}
-          </button>
-        </div>
-      </header>
-
-      <main className="slide-editor-content">
-        {currentStep === 'layout' && (
-          <div className="layout-selection">
-            <div className="step-header">
-              <h2>Choose a Layout</h2>
-              <p>Select the layout that best fits your content</p>
-            </div>
-            
-            <div className="layouts-grid">
-              {theme.layouts.map((layout) => (
-                <div
-                  key={layout.id}
-                  className={`layout-card ${selectedLayout?.id === layout.id ? 'selected' : ''}`}
-                  onClick={() => selectLayout(layout)}
-                >
-                  <div className="layout-preview">
-                    <div 
-                      className="layout-rendered"
-                      dangerouslySetInnerHTML={{
-                        __html: sanitizeSlideTemplate(renderTemplateWithSampleData(layout.htmlTemplate, layout))
-                      }}
-                    />
-                  </div>
-                  <div className="layout-info">
-                    <h3>{layout.name}</h3>
-                    <p>{layout.description}</p>
-                    <div className="layout-meta">
-                      <span className="slot-count">{layout.slots.length} slots</span>
-                      <div className="slot-types">
-                        {Array.from(new Set(layout.slots.map(slot => slot.type))).map(type => (
-                          <span key={type} className={`slot-type-badge ${type}`}>
-                            {type}
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {currentStep === 'content' && selectedLayout && presentation && (
-          <div className="content-editing">
-            <div className="editing-layout">
-              <div className="content-form">
-                <div className="step-header">
-                  <h2>Edit Slide Content</h2>
-                  <p>Fill in the content for your {selectedLayout.name} slide</p>
-                </div>
-                
-                <div className="content-fields">
-                  {selectedLayout.slots.map((slot) => (
-                    <div key={slot.id} className="content-field">
-                      <label htmlFor={slot.id} className="field-label">
-                        {slot.id.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
-                        {slot.required && <span className="required">*</span>}
-                      </label>
-                      
-                      {slot.type === 'image' ? (
-                        <ImageUploadField
-                          id={slot.id}
-                          value={slideContent[slot.id] || ''}
-                          onChange={(value) => updateSlotContent(slot.id, value)}
-                          placeholder={slot.placeholder || `Upload image or enter URL for ${slot.id}`}
-                          className="image-slot-field"
-                        />
-                      ) : slot.type === 'text' && slot.id.includes('content') ? (
-                        <textarea
-                          id={slot.id}
-                          value={slideContent[slot.id] || ''}
-                          onChange={(e) => updateSlotContent(slot.id, e.target.value)}
-                          placeholder={slot.placeholder || `Enter ${slot.id}`}
-                          className="field-textarea"
-                          rows={4}
-                        />
-                      ) : (
-                        <input
-                          id={slot.id}
-                          type="text"
-                          value={slideContent[slot.id] || ''}
-                          onChange={(e) => updateSlotContent(slot.id, e.target.value)}
-                          placeholder={slot.placeholder || `Enter ${slot.id}`}
-                          className="field-input"
-                        />
-                      )}
-                      
-                      {slot.placeholder && slot.type !== 'image' && (
-                        <p className="field-hint">{slot.placeholder}</p>
-                      )}
-                    </div>
-                  ))}
-                  
-                  <div className="content-field">
-                    <label htmlFor="slide-notes" className="field-label">
-                      Speaker Notes
-                    </label>
-                    <textarea
-                      id="slide-notes"
-                      value={slideNotes}
-                      onChange={(e) => setSlideNotes(e.target.value)}
-                      placeholder="Add notes for this slide (optional)"
-                      className="field-textarea"
-                      rows={3}
-                    />
-                  </div>
-                  
-                  <div className="content-actions">
-                    <div className="action-links">
-                      <button 
-                        type="button"
-                        className="cancel-link"
-                        onClick={cancelEditing}
-                        disabled={saving}
-                      >
-                        Cancel editing
-                      </button>
-                    </div>
-                    <div className="action-buttons">
-                      <button 
-                        type="button"
-                        className="action-button primary"
-                        onClick={saveSlide}
-                        disabled={saving}
-                      >
-                        {saving ? 'Saving...' : (isEditingExisting ? 'Update Slide' : 'Save Slide')}
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              
-              <div className="content-preview">
-                <h3>Live Preview</h3>
-                <p className="preview-description">
-                  Updates automatically as you type
-                </p>
-                <div className="preview-container">
-                  <div className="slide-preview-wrapper">
-                    <div 
-                      className={`slide-container ${presentation.metadata.aspectRatio ? `aspect-${presentation.metadata.aspectRatio.replace(':', '-')}` : 'aspect-16-9'}`}
-                      dangerouslySetInnerHTML={{
-                        __html: sanitizeSlideTemplate(renderTemplateWithContent(selectedLayout, slideContent))
-                      }}
-                    />
-                  </div>
-                  <div className="preview-meta">
-                    <span className="layout-name">{selectedLayout.name}</span>
-                    <span className="aspect-ratio-info">
-                      {presentation.metadata.aspectRatio || '16:9'} aspect ratio
-                    </span>
-                    <span className="content-count">
-                      {Object.values(slideContent).filter(v => v.trim()).length} / {selectedLayout.slots.length} slots filled
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {error && (
-          <div className="editor-error">
-            <p>Error: {error}</p>
-          </div>
-        )}
-      </main>
-
-      {/* Preview Modal */}
-      {selectedLayout && presentation && (
-        <SlidePreviewModal
-          isOpen={showPreview}
-          onClose={() => setShowPreview(false)}
-          layout={selectedLayout}
-          content={slideContent}
-          aspectRatio={presentation.metadata.aspectRatio || '16:9'}
-          themeName={theme?.name || 'Unknown Theme'}
-        />
-      )}
-    </div>
-  );
-};
-
-// Helper function to render template with actual content
-const renderTemplateWithContent = (layout: SlideLayout, content: Record<string, string>): string => {
-  let rendered = layout.htmlTemplate;
-  
-  // Replace content placeholders
-  Object.entries(content).forEach(([slotId, value]) => {
-    const placeholder = new RegExp(`\\{\\{${slotId}\\}\\}`, 'g');
-    rendered = rendered.replace(placeholder, value || '');
-  });
-  
-  // Clean up any remaining placeholders
-  rendered = rendered.replace(/\{\{[^}]+\}\}/g, '');
-  
-  return rendered;
-};
\ No newline at end of file
diff --git a/src/components/presentations/SlidePreviewModal.css b/src/components/presentations/SlidePreviewModal.css
deleted file mode 100644
index 419673e..0000000
--- a/src/components/presentations/SlidePreviewModal.css
+++ /dev/null
@@ -1,133 +0,0 @@
-.slide-preview-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-}
-
-.slide-preview-modal.theme-background {
-  background: var(--theme-background, #000000);
-}
-
-.preview-hint {
-  position: absolute;
-  top: 2rem;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(255, 255, 255, 0.9);
-  color: #1f2937;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  animation: fadeInOut 3s ease-in-out;
-  pointer-events: none;
-}
-
-@keyframes fadeInOut {
-  0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
-  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
-  85% { opacity: 1; transform: translateX(-50%) translateY(0); }
-  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
-}
-
-.preview-close-button {
-  position: absolute;
-  top: 2rem;
-  right: 2rem;
-  background: rgba(255, 255, 255, 0.9);
-  border: none;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  font-size: 1.25rem;
-  color: #374151;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.preview-close-button:hover {
-  background: rgba(255, 255, 255, 1);
-  transform: scale(1.05);
-}
-
-.preview-info {
-  position: absolute;
-  bottom: 2rem;
-  left: 2rem;
-  display: flex;
-  gap: 1rem;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.875rem;
-}
-
-.preview-info span {
-  background: rgba(0, 0, 0, 0.5);
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  backdrop-filter: blur(8px);
-}
-
-.theme-name {
-  font-weight: 600;
-}
-
-.layout-name {
-  font-style: italic;
-}
-
-.aspect-ratio {
-  font-family: monospace;
-}
-
-/* Slide preview - use same selectors as SlideEditor */
-.slide-preview-wrapper {
-  /* This wrapper provides the context for aspect ratio classes */
-}
-
-.slide-preview-wrapper .slide-container {
-  box-shadow: none;
-  border-radius: 0;
-  overflow: hidden;
-  background: white;
-}
-
-/* Full screen aspect ratio handling - maintain proper aspect ratio */
-.slide-preview-wrapper .slide-container {
-  position: relative;
-}
-
-.slide-preview-wrapper .slide-container.aspect-16-9 {
-  aspect-ratio: 16 / 9;
-  width: min(100vw, calc(100vh * 16 / 9));
-  height: min(100vh, calc(100vw * 9 / 16));
-}
-
-.slide-preview-wrapper .slide-container.aspect-4-3 {
-  aspect-ratio: 4 / 3;
-  width: min(100vw, calc(100vh * 4 / 3));
-  height: min(100vh, calc(100vw * 3 / 4));
-}
-
-.slide-preview-wrapper .slide-container.aspect-16-10 {
-  aspect-ratio: 16 / 10;
-  width: min(100vw, calc(100vh * 16 / 10));
-  height: min(100vh, calc(100vw * 10 / 16));
-}
-
-.slide-preview-wrapper .slide-container.aspect-1-1 {
-  aspect-ratio: 1 / 1;
-  width: min(100vw, 100vh);
-  height: min(100vh, 100vw);
-}
\ No newline at end of file
diff --git a/src/components/presentations/index.ts b/src/components/presentations/index.ts
index 5bd36f4..6bc23c2 100644
--- a/src/components/presentations/index.ts
+++ b/src/components/presentations/index.ts
@@ -1,6 +1,5 @@
 export { NewPresentationPage } from './NewPresentationPage.tsx';
 export { PresentationViewer } from './PresentationViewer.tsx';
 export { PresentationEditor } from './PresentationEditor.tsx';
-export { SlideEditor } from './SlideEditor.tsx';
 export { ThemeSelector } from './ThemeSelector.tsx';
 export { PresentationsList } from './PresentationsList.tsx';
\ No newline at end of file
diff --git a/src/components/slide-editor/ContentEditor.tsx b/src/components/slide-editor/ContentEditor.tsx
new file mode 100644
index 0000000..03efe0e
--- /dev/null
+++ b/src/components/slide-editor/ContentEditor.tsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import type { Presentation } from '../../types/presentation.ts';
+import type { SlideLayout } from '../../types/theme.ts';
+import { renderTemplateWithContent } from './utils.ts';
+import { sanitizeSlideTemplate } from '../../utils/htmlSanitizer.ts';
+import { ImageUploadField } from '../ui/ImageUploadField.tsx';
+
+interface ContentEditorProps {
+  presentation: Presentation;
+  selectedLayout: SlideLayout;
+  slideContent: Record<string, string>;
+  slideNotes: string;
+  isEditingExisting: boolean;
+  saving: boolean;
+  onSlotContentChange: (slotId: string, content: string) => void;
+  onNotesChange: (notes: string) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export const ContentEditor: React.FC<ContentEditorProps> = ({
+  presentation,
+  selectedLayout,
+  slideContent,
+  slideNotes,
+  isEditingExisting,
+  saving,
+  onSlotContentChange,
+  onNotesChange,
+  onSave,
+  onCancel,
+}) => {
+  const renderSlotField = (slot: any) => {
+    if (slot.type === 'image') {
+      return (
+        <ImageUploadField
+          id={slot.id}
+          value={slideContent[slot.id] || ''}
+          onChange={(value) => onSlotContentChange(slot.id, value)}
+          placeholder={slot.placeholder || `Upload image or enter URL for ${slot.id}`}
+          className="image-slot-field"
+        />
+      );
+    }
+    
+    if (slot.type === 'text' && slot.id.includes('content')) {
+      return (
+        <textarea
+          id={slot.id}
+          value={slideContent[slot.id] || ''}
+          onChange={(e) => onSlotContentChange(slot.id, e.target.value)}
+          placeholder={slot.placeholder || `Enter ${slot.id}`}
+          className="field-textarea"
+          rows={4}
+        />
+      );
+    }
+    
+    return (
+      <input
+        id={slot.id}
+        type="text"
+        value={slideContent[slot.id] || ''}
+        onChange={(e) => onSlotContentChange(slot.id, e.target.value)}
+        placeholder={slot.placeholder || `Enter ${slot.id}`}
+        className="field-input"
+      />
+    );
+  };
+
+  return (
+    <div className="content-editing">
+      <div className="editing-layout">
+        <div className="content-form">
+          <div className="step-header">
+            <h2>Edit Slide Content</h2>
+            <p>Fill in the content for your {selectedLayout.name} slide</p>
+          </div>
+          
+          <div className="content-fields">
+            {selectedLayout.slots.map((slot) => (
+              <div key={slot.id} className="content-field">
+                <label htmlFor={slot.id} className="field-label">
+                  {slot.id.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                  {slot.required && <span className="required">*</span>}
+                </label>
+                
+                {renderSlotField(slot)}
+                
+                {slot.placeholder && slot.type !== 'image' && (
+                  <p className="field-hint">{slot.placeholder}</p>
+                )}
+              </div>
+            ))}
+            
+            <div className="content-field">
+              <label htmlFor="slide-notes" className="field-label">
+                Speaker Notes
+              </label>
+              <textarea
+                id="slide-notes"
+                value={slideNotes}
+                onChange={(e) => onNotesChange(e.target.value)}
+                placeholder="Add notes for this slide (optional)"
+                className="field-textarea"
+                rows={3}
+              />
+            </div>
+            
+            <div className="content-actions">
+              <div className="action-links">
+                <button 
+                  type="button"
+                  className="cancel-link"
+                  onClick={onCancel}
+                  disabled={saving}
+                >
+                  Cancel editing
+                </button>
+              </div>
+              <div className="action-buttons">
+                <button 
+                  type="button"
+                  className="action-button primary"
+                  onClick={onSave}
+                  disabled={saving}
+                >
+                  {saving ? 'Saving...' : (isEditingExisting ? 'Update Slide' : 'Save Slide')}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div className="content-preview">
+          <h3>Live Preview</h3>
+          <p className="preview-description">
+            Updates automatically as you type
+          </p>
+          <div className="preview-container">
+            <div className="slide-preview-wrapper">
+              <div 
+                className={`slide-container ${presentation.metadata.aspectRatio ? `aspect-${presentation.metadata.aspectRatio.replace(':', '-')}` : 'aspect-16-9'}`}
+                dangerouslySetInnerHTML={{
+                  __html: sanitizeSlideTemplate(renderTemplateWithContent(selectedLayout, slideContent))
+                }}
+              />
+            </div>
+            <div className="preview-meta">
+              <span className="layout-name">{selectedLayout.name}</span>
+              <span className="aspect-ratio-info">
+                {presentation.metadata.aspectRatio || '16:9'} aspect ratio
+              </span>
+              <span className="content-count">
+                {Object.values(slideContent).filter(v => v.trim()).length} / {selectedLayout.slots.length} slots filled
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/slide-editor/ErrorState.tsx b/src/components/slide-editor/ErrorState.tsx
new file mode 100644
index 0000000..4f26e2d
--- /dev/null
+++ b/src/components/slide-editor/ErrorState.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+interface ErrorStateProps {
+  error: string;
+  presentationId?: string;
+}
+
+export const ErrorState: React.FC<ErrorStateProps> = ({ error, presentationId }) => {
+  return (
+    <div className="slide-editor">
+      <header className="slide-editor-header">
+        <div className="editor-info">
+          {presentationId ? (
+            <Link to={`/presentations/${presentationId}/edit/slides/1`} className="back-button">
+              ← Back to Presentation
+            </Link>
+          ) : (
+            <Link to="/presentations" className="back-button">
+              ← Back to Presentations
+            </Link>
+          )}
+          <div className="editor-title">
+            <h1>Slide Editor Error</h1>
+          </div>
+        </div>
+      </header>
+
+      <main className="slide-editor-content">
+        <div className="error-container">
+          <div className="error-content">
+            <h2>Unable to Load Slide Editor</h2>
+            <p>{error}</p>
+            
+            <div className="error-actions">
+              <button 
+                type="button"
+                onClick={() => window.location.reload()}
+                className="action-button primary"
+              >
+                Reload Page
+              </button>
+              
+              {presentationId ? (
+                <Link 
+                  to={`/presentations/${presentationId}/edit/slides/1`}
+                  className="action-button secondary"
+                >
+                  Return to Presentation
+                </Link>
+              ) : (
+                <Link 
+                  to="/presentations"
+                  className="action-button secondary"
+                >
+                  Back to Presentations
+                </Link>
+              )}
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/slide-editor/LayoutSelection.tsx b/src/components/slide-editor/LayoutSelection.tsx
new file mode 100644
index 0000000..878a3c2
--- /dev/null
+++ b/src/components/slide-editor/LayoutSelection.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import type { Theme, SlideLayout } from '../../types/theme.ts';
+import { renderTemplateWithSampleData } from '../../utils/templateRenderer.ts';
+import { sanitizeSlideTemplate } from '../../utils/htmlSanitizer.ts';
+
+interface LayoutSelectionProps {
+  theme: Theme;
+  selectedLayout: SlideLayout | null;
+  onLayoutSelect: (layout: SlideLayout) => void;
+}
+
+export const LayoutSelection: React.FC<LayoutSelectionProps> = ({
+  theme,
+  selectedLayout,
+  onLayoutSelect,
+}) => {
+  return (
+    <div className="layout-selection">
+      <div className="step-header">
+        <h2>Choose a Layout</h2>
+        <p>Select the layout that best fits your content</p>
+      </div>
+      
+      <div className="layouts-container">
+        <div className="layouts-grid">
+          {theme.layouts.map((layout) => (
+            <div
+              key={layout.id}
+              className={`layout-card ${selectedLayout?.id === layout.id ? 'selected' : ''}`}
+              onClick={() => onLayoutSelect(layout)}
+            >
+              <div className="layout-preview">
+                <div 
+                  className="layout-rendered"
+                  dangerouslySetInnerHTML={{
+                    __html: sanitizeSlideTemplate(renderTemplateWithSampleData(layout.htmlTemplate, layout))
+                  }}
+                />
+              </div>
+              <div className="layout-info">
+                <h3>{layout.name}</h3>
+                <p>{layout.description}</p>
+                <div className="layout-meta">
+                  <span className="slot-count">{layout.slots.length} slots</span>
+                  <div className="slot-types">
+                    {Array.from(new Set(layout.slots.map(slot => slot.type))).map(type => (
+                      <span key={type} className={`slot-type-badge ${type}`}>
+                        {type}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/slide-editor/LoadingState.tsx b/src/components/slide-editor/LoadingState.tsx
new file mode 100644
index 0000000..40a7565
--- /dev/null
+++ b/src/components/slide-editor/LoadingState.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+interface LoadingStateProps {
+  presentationId?: string;
+}
+
+export const LoadingState: React.FC<LoadingStateProps> = ({ presentationId }) => {
+  return (
+    <div className="slide-editor">
+      <header className="slide-editor-header">
+        <div className="editor-info">
+          {presentationId ? (
+            <Link to={`/presentations/${presentationId}/edit/slides/1`} className="back-button">
+              ← Back to Presentation
+            </Link>
+          ) : (
+            <Link to="/presentations" className="back-button">
+              ← Back to Presentations
+            </Link>
+          )}
+          <div className="editor-title">
+            <h1>Loading Slide Editor...</h1>
+          </div>
+        </div>
+      </header>
+
+      <main className="slide-editor-content">
+        <div className="loading-container">
+          <div className="loading-content">
+            <div className="loading-spinner">Loading slide editor...</div>
+            <p>Please wait while we prepare your slide editing environment.</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/slide-editor/SlideEditor.css b/src/components/slide-editor/SlideEditor.css
new file mode 100644
index 0000000..0f6cf14
--- /dev/null
+++ b/src/components/slide-editor/SlideEditor.css
@@ -0,0 +1,788 @@
+/* =========================
+   CSS VARIABLES & BASE THEME
+   ========================= */
+.slide-editor {
+  /* Color Palette */
+  --color-bg-primary: #f8fafc;
+  --color-bg-secondary: #ffffff;
+  --color-bg-tertiary: #f1f5f9;
+  --color-bg-accent: #eff6ff;
+  --color-bg-error: #fef2f2;
+  
+  --color-border-primary: #e2e8f0;
+  --color-border-secondary: #d1d5db;
+  --color-border-accent: #3b82f6;
+  --color-border-hover: #cbd5e1;
+  --color-border-error: #fecaca;
+  
+  --color-text-primary: #1e293b;
+  --color-text-secondary: #64748b;
+  --color-text-tertiary: #6b7280;
+  --color-text-accent: #3b82f6;
+  --color-text-error: #dc2626;
+  --color-text-muted: #9ca3af;
+  
+  --color-button-primary: #3b82f6;
+  --color-button-primary-hover: #2563eb;
+  --color-button-secondary: #f8fafc;
+  
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 0.75rem;
+  --space-lg: 1rem;
+  --space-xl: 1.5rem;
+  --space-2xl: 2rem;
+  
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.3);
+  
+  /* Layout */
+  --header-height: 80px;
+  --header-height-tablet: 60px;
+  --header-height-mobile: 50px;
+}
+
+/* =========================
+   BASE COMPONENT STYLES
+   ========================= */
+.slide-editor {
+  min-height: 100vh;
+  background: var(--color-bg-primary);
+  display: flex;
+  flex-direction: column;
+}
+
+/* =========================
+   HEADER COMPONENT
+   ========================= */
+.slide-editor-header {
+  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border-primary);
+  padding: var(--space-md) var(--space-2xl);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-xl);
+  flex-wrap: wrap;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  box-shadow: var(--shadow-md);
+}
+
+.editor-info {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+  flex: 1;
+  min-width: 0;
+}
+
+.editor-title h1 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.presentation-context {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+}
+
+/* =========================
+   REUSABLE BUTTON SYSTEM
+   ========================= */
+.back-button,
+.action-button,
+.cancel-link {
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+}
+
+.back-button {
+  background: none;
+  color: var(--color-text-secondary);
+  padding: var(--space-sm) var(--space-md);
+}
+
+.back-button:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
+
+.action-button {
+  padding: var(--space-md) var(--space-xl);
+  font-weight: 600;
+}
+
+.action-button.primary {
+  background: var(--color-button-primary);
+  color: white;
+  border-color: var(--color-button-primary);
+}
+
+.action-button.primary:hover:not(:disabled) {
+  background: var(--color-button-primary-hover);
+  border-color: var(--color-button-primary-hover);
+}
+
+.action-button.secondary {
+  background: var(--color-button-secondary);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-secondary);
+}
+
+.action-button.secondary:hover:not(:disabled) {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-hover);
+}
+
+.action-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.cancel-link {
+  background: none;
+  color: var(--color-text-secondary);
+  padding: var(--space-sm) var(--space-md);
+  text-decoration: underline;
+}
+
+.cancel-link:hover:not(:disabled) {
+  color: var(--color-text-primary);
+}
+
+/* =========================
+   LAYOUT CONTAINERS
+   ========================= */
+.slide-editor-content {
+  flex: 1;
+  padding-top: var(--header-height);
+}
+
+.layout-selection,
+.content-editing {
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--color-bg-primary);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+/* Layout Selection */
+.layout-selection .step-header {
+  flex-shrink: 0;
+  padding: var(--space-2xl) var(--space-2xl) var(--space-lg) var(--space-2xl);
+}
+
+.layout-selection .layouts-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 var(--space-2xl) var(--space-2xl) var(--space-2xl);
+}
+
+.layouts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--space-xl);
+  min-height: 100%;
+}
+
+/* Content Editing */
+.content-editing .editing-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2xl);
+  align-items: stretch;
+  height: 100%;
+  width: 100%;
+  padding: var(--space-2xl);
+  box-sizing: border-box;
+}
+
+/* =========================
+   CARD COMPONENTS
+   ========================= */
+.layout-card {
+  background: var(--color-bg-secondary);
+  border: 2px solid var(--color-border-primary);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.layout-card:hover {
+  border-color: var(--color-border-hover);
+  box-shadow: var(--shadow-lg);
+}
+
+.layout-card.selected {
+  border-color: var(--color-border-accent);
+  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2);
+}
+
+.layout-preview {
+  height: 300px;
+  background: var(--color-bg-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.layout-rendered {
+  width: 100%;
+  height: 100%;
+  transform: scale(0.3);
+  transform-origin: center;
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border-primary);
+  overflow: hidden;
+}
+
+.layout-info {
+  padding: var(--space-xl);
+}
+
+.layout-info h3 {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.layout-info p {
+  margin: 0 0 var(--space-lg) 0;
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+/* =========================
+   FORM COMPONENTS
+   ========================= */
+.step-header h2 {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.step-header p {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+}
+
+.content-form {
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-xl);
+  padding: var(--space-2xl);
+  border: 1px solid var(--color-border-primary);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xl);
+}
+
+.content-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xl);
+}
+
+.content-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.field-label {
+  font-weight: 600;
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+}
+
+.field-input,
+.field-textarea {
+  padding: var(--space-md);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-lg);
+  font-size: 0.875rem;
+  transition: border-color 0.2s ease;
+  font-family: inherit;
+}
+
+.field-input:focus,
+.field-textarea:focus {
+  outline: none;
+  border-color: var(--color-border-accent);
+  box-shadow: 0 0 0 1px var(--color-border-accent);
+}
+
+.field-hint {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  margin: 0;
+}
+
+.required {
+  color: var(--color-text-error);
+  margin-left: var(--space-xs);
+}
+
+/* =========================
+   PREVIEW COMPONENTS
+   ========================= */
+.content-preview {
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-xl);
+  padding: var(--space-2xl);
+  border: 1px solid var(--color-border-primary);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.content-preview h3 {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.preview-description {
+  margin: 0 0 var(--space-lg) 0;
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+}
+
+.preview-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  min-height: 400px;
+}
+
+/* Base slide preview wrapper */
+.slide-preview-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-primary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border-primary);
+  overflow: hidden;
+  min-height: 350px;
+  padding: var(--space-lg);
+}
+
+/* Base slide container */
+.slide-preview-wrapper .slide-container {
+  box-shadow: none;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-bg-secondary);
+  position: relative;
+  border: 1px solid var(--color-border-primary);
+  transform-origin: center;
+}
+
+/* Ensure slide content fills the container properly */
+.slide-preview-wrapper .slide-container > * {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Theme styles should apply within the preview */
+.slide-preview-wrapper .slide-container .slot {
+  border: 1px dashed transparent;
+  min-height: 1em;
+  padding: 0.25rem;
+}
+
+/* =========================
+   BADGE & METADATA COMPONENTS
+   ========================= */
+.layout-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-lg);
+}
+
+.slot-count {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-tertiary);
+  background: var(--color-bg-tertiary);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+}
+
+.slot-types {
+  display: flex;
+  gap: var(--space-xs);
+  flex-wrap: wrap;
+}
+
+.slot-type-badge {
+  font-size: 0.625rem;
+  font-weight: 500;
+  padding: 0.125rem var(--space-md);
+  border-radius: var(--radius-sm);
+  text-transform: capitalize;
+}
+
+/* Slot type colors */
+.slot-type-badge.title { background-color: #fef3c7; color: #92400e; }
+.slot-type-badge.subtitle { background-color: #e0e7ff; color: #3730a3; }
+.slot-type-badge.text { background-color: #d1fae5; color: #047857; }
+.slot-type-badge.image { background-color: #fce7f3; color: #be185d; }
+.slot-type-badge.video { background-color: #ddd6fe; color: #6b21a8; }
+.slot-type-badge.list { background-color: #fed7d7; color: #c53030; }
+
+.preview-meta {
+  display: flex;
+  gap: var(--space-lg);
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  padding: var(--space-lg);
+  background: var(--color-bg-tertiary);
+  border-top: 1px solid var(--color-border-primary);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+
+/* =========================
+   ACTION COMPONENTS
+   ========================= */
+.content-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-lg);
+  padding-top: var(--space-lg);
+  border-top: 1px solid var(--color-border-primary);
+}
+
+.action-links {
+  display: flex;
+  gap: var(--space-lg);
+}
+
+.action-buttons {
+  display: flex;
+  gap: var(--space-md);
+}
+
+.editor-actions {
+  display: flex;
+  gap: var(--space-md);
+}
+
+/* =========================
+   ERROR & LOADING STATES
+   ========================= */
+.error-boundary-container,
+.loading-container,
+.error-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  padding: var(--space-2xl);
+}
+
+.error-boundary-content,
+.loading-content,
+.error-content {
+  max-width: 600px;
+  text-align: center;
+}
+
+.error-boundary-content h2,
+.error-content h2 {
+  margin: 0 0 var(--space-lg) 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.error-boundary-content p,
+.loading-content p,
+.error-content p {
+  margin: 0 0 var(--space-2xl) 0;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+
+.error-actions {
+  display: flex;
+  gap: var(--space-lg);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.loading-spinner {
+  font-size: 1.1rem;
+  margin-bottom: var(--space-lg);
+  color: var(--color-text-accent);
+}
+
+/* =========================
+   MODAL COMPONENTS
+   ========================= */
+.slide-preview-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: var(--theme-background, #000000);
+}
+
+.preview-hint {
+  position: absolute;
+  top: var(--space-2xl);
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(255, 255, 255, 0.9);
+  color: #1f2937;
+  padding: var(--space-md) var(--space-xl);
+  border-radius: var(--radius-lg);
+  font-size: 0.875rem;
+  font-weight: 500;
+  box-shadow: var(--shadow-xl);
+  animation: fadeInOut 3s ease-in-out;
+  pointer-events: none;
+}
+
+.preview-close-button {
+  position: absolute;
+  top: var(--space-2xl);
+  right: var(--space-2xl);
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  font-size: 1.25rem;
+  color: #374151;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  box-shadow: var(--shadow-xl);
+}
+
+.preview-close-button:hover {
+  background: rgba(255, 255, 255, 1);
+  transform: scale(1.05);
+}
+
+.preview-info {
+  position: absolute;
+  bottom: var(--space-2xl);
+  left: var(--space-2xl);
+  display: flex;
+  gap: var(--space-lg);
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.875rem;
+}
+
+.preview-info span {
+  background: rgba(0, 0, 0, 0.5);
+  padding: var(--space-sm) var(--space-lg);
+  border-radius: var(--radius-sm);
+  backdrop-filter: blur(8px);
+}
+
+/* =========================
+   ASPECT RATIO HANDLING
+   ========================= */
+
+/* Content Editor Preview Aspect Ratios */
+.content-preview .slide-preview-wrapper .slide-container.aspect-16-9 {
+  width: min(100%, 533px);  /* 300px * 16/9 = 533px max width to fit 300px height */
+  height: min(300px, calc(100% * 9 / 16));
+  aspect-ratio: 16 / 9;
+}
+
+.content-preview .slide-preview-wrapper .slide-container.aspect-4-3 {
+  width: min(100%, 400px);  /* 300px * 4/3 = 400px max width */
+  height: min(300px, calc(100% * 3 / 4));
+  aspect-ratio: 4 / 3;
+}
+
+.content-preview .slide-preview-wrapper .slide-container.aspect-16-10 {
+  width: min(100%, 480px);  /* 300px * 16/10 = 480px max width */
+  height: min(300px, calc(100% * 10 / 16));
+  aspect-ratio: 16 / 10;
+}
+
+/* Modal Full-Screen Aspect Ratios (for preview modal) */
+.slide-preview-modal .slide-preview-wrapper .slide-container.aspect-16-9 {
+  aspect-ratio: 16 / 9;
+  width: min(90vw, calc(90vh * 16 / 9));
+  height: min(90vh, calc(90vw * 9 / 16));
+}
+
+.slide-preview-modal .slide-preview-wrapper .slide-container.aspect-4-3 {
+  aspect-ratio: 4 / 3;
+  width: min(90vw, calc(90vh * 4 / 3));
+  height: min(90vh, calc(90vw * 3 / 4));
+}
+
+.slide-preview-modal .slide-preview-wrapper .slide-container.aspect-16-10 {
+  aspect-ratio: 16 / 10;
+  width: min(90vw, calc(90vh * 16 / 10));
+  height: min(90vh, calc(90vw * 10 / 16));
+}
+
+/* =========================
+   IMAGE INTEGRATION
+   ========================= */
+.content-field .image-slot-field {
+  margin-top: var(--space-sm);
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+}
+
+.content-field .image-slot-field:focus-within {
+  border-color: var(--color-border-accent);
+}
+
+/* =========================
+   ANIMATIONS
+   ========================= */
+@keyframes fadeInOut {
+  0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
+  85% { opacity: 1; transform: translateX(-50%) translateY(0); }
+  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+}
+
+/* =========================
+   RESPONSIVE DESIGN
+   ========================= */
+@media (max-width: 1024px) {
+  .slide-editor {
+    --header-height: var(--header-height-tablet);
+  }
+  
+  .slide-editor-header {
+    padding: var(--space-md) var(--space-xl);
+  }
+  
+  .layout-selection .step-header {
+    padding: var(--space-xl) var(--space-xl) var(--space-lg) var(--space-xl);
+  }
+  
+  .layout-selection .layouts-container {
+    padding: 0 var(--space-xl) var(--space-xl) var(--space-xl);
+  }
+  
+  .content-editing .editing-layout {
+    grid-template-columns: 1fr;
+    gap: var(--space-xl);
+    padding: var(--space-lg);
+  }
+}
+
+@media (max-width: 768px) {
+  .slide-editor {
+    --header-height: var(--header-height-mobile);
+  }
+  
+  .slide-editor-header {
+    padding: var(--space-sm) var(--space-lg);
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-sm);
+    position: relative;
+    box-shadow: none;
+    border-bottom: 1px solid var(--color-border-primary);
+  }
+  
+  .slide-editor-content {
+    padding-top: 0;
+  }
+  
+  .layout-selection,
+  .content-editing {
+    position: relative;
+    top: 0;
+  }
+  
+  .layout-selection .step-header {
+    padding: var(--space-lg) var(--space-lg) var(--space-md) var(--space-lg);
+  }
+  
+  .layout-selection .layouts-container {
+    padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
+  }
+  
+  .layouts-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-lg);
+  }
+  
+  .editor-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-md);
+  }
+  
+  .content-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-md);
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+  }
+}
\ No newline at end of file
diff --git a/src/components/slide-editor/SlideEditor.tsx b/src/components/slide-editor/SlideEditor.tsx
new file mode 100644
index 0000000..b30300e
--- /dev/null
+++ b/src/components/slide-editor/SlideEditor.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { SlideEditorErrorBoundary } from './SlideEditorErrorBoundary.tsx';
+import { LoadingState } from './LoadingState.tsx';
+import { ErrorState } from './ErrorState.tsx';
+import { LayoutSelection } from './LayoutSelection.tsx';
+import { ContentEditor } from './ContentEditor.tsx';
+import { SlidePreviewModal } from './SlidePreviewModal.tsx';
+import { useSlideEditor } from './useSlideEditor.ts';
+import './SlideEditor.css';
+
+export const SlideEditor: React.FC = () => {
+  const { presentationId, slideId } = useParams<{ 
+    presentationId: string; 
+    slideId: string; 
+  }>();
+
+  const {
+    // Data
+    presentation,
+    theme,
+    selectedLayout,
+    slideContent,
+    slideNotes,
+    currentStep,
+    
+    // States
+    loading,
+    error,
+    saving,
+    showPreview,
+    
+    // Computed
+    isEditingExisting,
+    
+    // Actions
+    updateSlotContent,
+    setSlideNotes,
+    setShowPreview,
+    selectLayout,
+    saveSlide,
+    cancelEditing,
+  } = useSlideEditor({ presentationId, slideId });
+
+  if (loading) {
+    return <LoadingState presentationId={presentationId} />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} presentationId={presentationId} />;
+  }
+
+  if (!presentation || !theme) {
+    return <ErrorState error="Presentation or theme not found" presentationId={presentationId} />;
+  }
+
+  return (
+    <SlideEditorErrorBoundary presentationId={presentationId}>
+      <div className="slide-editor">
+        <header className="slide-editor-header">
+          <div className="editor-info">
+            <Link 
+              to={`/presentations/${presentationId}/edit/slides/1`} 
+              className="back-button"
+            >
+              ← Back to Presentation
+            </Link>
+            <div className="editor-title">
+              <h1>{isEditingExisting ? 'Edit Slide' : 'New Slide'}</h1>
+              <span className="presentation-context">
+                in "{presentation.metadata.name}"
+              </span>
+            </div>
+          </div>
+          
+          <div className="editor-actions">
+            {currentStep === 'content' && selectedLayout && (
+              <button 
+                type="button"
+                className="action-button secondary"
+                onClick={() => setShowPreview(true)}
+              >
+                Full Preview
+              </button>
+            )}
+          </div>
+        </header>
+
+        <main className="slide-editor-content">
+          {currentStep === 'layout' && (
+            <LayoutSelection
+              theme={theme}
+              selectedLayout={selectedLayout}
+              onLayoutSelect={selectLayout}
+            />
+          )}
+
+          {currentStep === 'content' && selectedLayout && (
+            <ContentEditor
+              presentation={presentation}
+              selectedLayout={selectedLayout}
+              slideContent={slideContent}
+              slideNotes={slideNotes}
+              isEditingExisting={isEditingExisting}
+              saving={saving}
+              onSlotContentChange={updateSlotContent}
+              onNotesChange={setSlideNotes}
+              onSave={saveSlide}
+              onCancel={cancelEditing}
+            />
+          )}
+        </main>
+
+        {/* Preview Modal */}
+        {selectedLayout && presentation && (
+          <SlidePreviewModal
+            isOpen={showPreview}
+            onClose={() => setShowPreview(false)}
+            layout={selectedLayout}
+            content={slideContent}
+            aspectRatio={presentation.metadata.aspectRatio || '16:9'}
+            themeName={theme?.name || 'Unknown Theme'}
+          />
+        )}
+      </div>
+    </SlideEditorErrorBoundary>
+  );
+};
\ No newline at end of file
diff --git a/src/components/slide-editor/SlideEditorErrorBoundary.tsx b/src/components/slide-editor/SlideEditorErrorBoundary.tsx
new file mode 100644
index 0000000..ddfe14e
--- /dev/null
+++ b/src/components/slide-editor/SlideEditorErrorBoundary.tsx
@@ -0,0 +1,115 @@
+import React, { Component, type ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { loggers } from '../../utils/logger.ts';
+
+interface Props {
+  children: ReactNode;
+  presentationId?: string;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: string | null;
+}
+
+export class SlideEditorErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+    errorInfo: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error,
+      errorInfo: null,
+    };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    loggers.ui.error('SlideEditor error boundary caught an error', error);
+    
+    this.setState({
+      error,
+      errorInfo: errorInfo.componentStack || null,
+    });
+  }
+
+  private handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div className="slide-editor">
+          <header className="slide-editor-header">
+            <div className="editor-info">
+              <Link to="/presentations" className="back-button">
+                ← Back to Presentations
+              </Link>
+              <div className="editor-title">
+                <h1>Slide Editor Error</h1>
+              </div>
+            </div>
+          </header>
+
+          <main className="slide-editor-content">
+            <div className="error-boundary-container">
+              <div className="error-boundary-content">
+                <h2>Something went wrong</h2>
+                <p>
+                  The slide editor encountered an unexpected error. This has been logged for investigation.
+                </p>
+                
+                <div className="error-actions">
+                  <button 
+                    type="button"
+                    onClick={this.handleReset}
+                    className="action-button primary"
+                  >
+                    Try Again
+                  </button>
+                  
+                  {this.props.presentationId && (
+                    <Link 
+                      to={`/presentations/${this.props.presentationId}/edit/slides/1`}
+                      className="action-button secondary"
+                    >
+                      Return to Presentation
+                    </Link>
+                  )}
+                  
+                  <Link 
+                    to="/presentations"
+                    className="action-button secondary"
+                  >
+                    Back to Presentations
+                  </Link>
+                </div>
+
+                {process.env.NODE_ENV === 'development' && this.state.error && (
+                  <details className="error-details">
+                    <summary>Error Details (Development Only)</summary>
+                    <pre className="error-stack">
+                      {this.state.error.toString()}
+                      {this.state.errorInfo}
+                    </pre>
+                  </details>
+                )}
+              </div>
+            </div>
+          </main>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
\ No newline at end of file
diff --git a/src/components/presentations/SlidePreviewModal.tsx b/src/components/slide-editor/SlidePreviewModal.tsx
similarity index 98%
rename from src/components/presentations/SlidePreviewModal.tsx
rename to src/components/slide-editor/SlidePreviewModal.tsx
index 1b6c67d..c5b8d12 100644
--- a/src/components/presentations/SlidePreviewModal.tsx
+++ b/src/components/slide-editor/SlidePreviewModal.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import type { SlideLayout } from '../../types/theme.ts';
 import { sanitizeSlideTemplate } from '../../utils/htmlSanitizer.ts';
-import './SlidePreviewModal.css';
 
 interface SlidePreviewModalProps {
   isOpen: boolean;
diff --git a/src/components/slide-editor/index.ts b/src/components/slide-editor/index.ts
new file mode 100644
index 0000000..dcb9899
--- /dev/null
+++ b/src/components/slide-editor/index.ts
@@ -0,0 +1,6 @@
+export { SlideEditor } from './SlideEditor.tsx';
+export { SlidePreviewModal } from './SlidePreviewModal.tsx';
+export { LayoutSelection } from './LayoutSelection.tsx';
+export { ContentEditor } from './ContentEditor.tsx';
+export { useSlideEditor } from './useSlideEditor.ts';
+export { SlideEditorErrorBoundary } from './SlideEditorErrorBoundary.tsx';
\ No newline at end of file
diff --git a/src/components/slide-editor/useSlideEditor.ts b/src/components/slide-editor/useSlideEditor.ts
new file mode 100644
index 0000000..39b4e76
--- /dev/null
+++ b/src/components/slide-editor/useSlideEditor.ts
@@ -0,0 +1,254 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import type { Presentation, SlideContent } from '../../types/presentation.ts';
+import type { Theme, SlideLayout } from '../../types/theme.ts';
+import { getPresentationById, updatePresentation } from '../../utils/presentationStorage.ts';
+import { getTheme } from '../../themes/index.ts';
+import { loggers } from '../../utils/logger.ts';
+
+interface UseSlideEditorProps {
+  presentationId: string | undefined;
+  slideId: string | undefined;
+}
+
+interface UseSlideEditorReturn {
+  // Data
+  presentation: Presentation | null;
+  theme: Theme | null;
+  selectedLayout: SlideLayout | null;
+  slideContent: Record<string, string>;
+  slideNotes: string;
+  currentStep: 'layout' | 'content';
+  
+  // States
+  loading: boolean;
+  error: string | null;
+  saving: boolean;
+  showPreview: boolean;
+  
+  // Computed
+  isEditingExisting: boolean;
+  existingSlide: SlideContent | null;
+  
+  // Actions
+  setSelectedLayout: (layout: SlideLayout | null) => void;
+  updateSlotContent: (slotId: string, content: string) => void;
+  setSlideNotes: (notes: string) => void;
+  setCurrentStep: (step: 'layout' | 'content') => void;
+  setShowPreview: (show: boolean) => void;
+  selectLayout: (layout: SlideLayout) => void;
+  saveSlide: () => Promise<void>;
+  cancelEditing: () => void;
+}
+
+export const useSlideEditor = ({ presentationId, slideId }: UseSlideEditorProps): UseSlideEditorReturn => {
+  const navigate = useNavigate();
+  
+  // Core state
+  const [presentation, setPresentation] = useState<Presentation | null>(null);
+  const [theme, setTheme] = useState<Theme | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+  
+  // Editor state
+  const [selectedLayout, setSelectedLayout] = useState<SlideLayout | null>(null);
+  const [slideContent, setSlideContent] = useState<Record<string, string>>({});
+  const [slideNotes, setSlideNotes] = useState('');
+  const [currentStep, setCurrentStep] = useState<'layout' | 'content'>('layout');
+  
+  // Computed values
+  const isEditingExisting = slideId !== 'new';
+  const existingSlide = isEditingExisting && presentation 
+    ? presentation.slides.find(s => s.id === slideId) || null
+    : null;
+
+  // Initialize current step based on editing mode
+  useEffect(() => {
+    setCurrentStep(isEditingExisting ? 'content' : 'layout');
+  }, [isEditingExisting]);
+
+  // Load presentation and theme
+  useEffect(() => {
+    const loadPresentationAndTheme = async () => {
+      if (!presentationId) {
+        setError('No presentation ID provided');
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        
+        // Load presentation
+        const presentationData = await getPresentationById(presentationId);
+        if (!presentationData) {
+          setError(`Presentation not found: ${presentationId}`);
+          return;
+        }
+        
+        setPresentation(presentationData);
+        
+        // Load theme
+        const themeData = await getTheme(presentationData.metadata.theme);
+        if (!themeData) {
+          setError(`Theme not found: ${presentationData.metadata.theme}`);
+          return;
+        }
+        
+        setTheme(themeData);
+        
+        // If editing existing slide, populate data
+        if (isEditingExisting && slideId !== 'new') {
+          const slide = presentationData.slides.find(s => s.id === slideId);
+          if (slide) {
+            const layout = themeData.layouts.find(l => l.id === slide.layoutId);
+            if (layout) {
+              setSelectedLayout(layout);
+              setSlideContent(slide.content);
+              setSlideNotes(slide.notes || '');
+            }
+          } else {
+            setError(`Slide not found: ${slideId}`);
+            return;
+          }
+        }
+        
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load presentation');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadPresentationAndTheme();
+  }, [presentationId, slideId, isEditingExisting]);
+
+  // Load theme CSS for layout previews
+  useEffect(() => {
+    if (theme) {
+      const themeStyleId = 'slide-editor-theme-style';
+      const existingStyle = document.getElementById(themeStyleId);
+      
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+      
+      const style = document.createElement('link');
+      style.id = themeStyleId;
+      style.rel = 'stylesheet';
+      style.href = `${theme.basePath}/${theme.cssFile}`;
+      document.head.appendChild(style);
+      
+      return () => {
+        const styleToRemove = document.getElementById(themeStyleId);
+        if (styleToRemove) {
+          styleToRemove.remove();
+        }
+      };
+    }
+  }, [theme]);
+
+  // Actions
+  const updateSlotContent = (slotId: string, content: string) => {
+    setSlideContent(prev => ({ ...prev, [slotId]: content }));
+  };
+
+  const selectLayout = (layout: SlideLayout) => {
+    setSelectedLayout(layout);
+    setCurrentStep('content');
+  };
+
+  const saveSlide = async () => {
+    if (!presentation || !selectedLayout || !presentationId) return;
+
+    try {
+      setSaving(true);
+      setError(null);
+
+      const slideData: SlideContent = {
+        id: isEditingExisting ? slideId! : `slide-${Date.now()}`,
+        layoutId: selectedLayout.id,
+        content: slideContent,
+        notes: slideNotes,
+        order: isEditingExisting 
+          ? existingSlide?.order || presentation.slides.length
+          : presentation.slides.length
+      };
+
+      let updatedSlides: SlideContent[];
+      if (isEditingExisting) {
+        updatedSlides = presentation.slides.map(slide =>
+          slide.id === slideId ? slideData : slide
+        );
+      } else {
+        updatedSlides = [...presentation.slides, slideData];
+      }
+
+      const updatedPresentation: Presentation = {
+        ...presentation,
+        slides: updatedSlides,
+        metadata: {
+          ...presentation.metadata,
+          updatedAt: new Date().toISOString()
+        }
+      };
+
+      await updatePresentation(updatedPresentation);
+      
+      // Navigate back to the presentation editor
+      const slideNumber = isEditingExisting 
+        ? presentation.slides.findIndex(s => s.id === slideId) + 1
+        : updatedSlides.length;
+      
+      navigate(`/presentations/${presentationId}/edit/slides/${slideNumber}`);
+      
+    } catch (err) {
+      loggers.ui.error('Failed to save slide', err instanceof Error ? err : new Error(String(err)));
+      setError('Failed to save slide. Please try again.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancelEditing = () => {
+    if (!presentation) return;
+    
+    const slideNumber = isEditingExisting && existingSlide
+      ? presentation.slides.findIndex(s => s.id === slideId) + 1 
+      : 1;
+    
+    navigate(`/presentations/${presentationId}/edit/slides/${slideNumber}`);
+  };
+
+  return {
+    // Data
+    presentation,
+    theme,
+    selectedLayout,
+    slideContent,
+    slideNotes,
+    currentStep,
+    
+    // States
+    loading,
+    error,
+    saving,
+    showPreview,
+    
+    // Computed
+    isEditingExisting,
+    existingSlide,
+    
+    // Actions
+    setSelectedLayout,
+    updateSlotContent,
+    setSlideNotes,
+    setCurrentStep,
+    setShowPreview,
+    selectLayout,
+    saveSlide,
+    cancelEditing,
+  };
+};
\ No newline at end of file
diff --git a/src/components/slide-editor/utils.ts b/src/components/slide-editor/utils.ts
new file mode 100644
index 0000000..5966de1
--- /dev/null
+++ b/src/components/slide-editor/utils.ts
@@ -0,0 +1,17 @@
+import type { SlideLayout } from '../../types/theme.ts';
+
+// Helper function to render template with actual content
+export const renderTemplateWithContent = (layout: SlideLayout, content: Record<string, string>): string => {
+  let rendered = layout.htmlTemplate;
+  
+  // Replace content placeholders
+  Object.entries(content).forEach(([slotId, value]) => {
+    const placeholder = new RegExp(`\\{\\{${slotId}\\}\\}`, 'g');
+    rendered = rendered.replace(placeholder, value || '');
+  });
+  
+  // Clean up any remaining placeholders
+  rendered = rendered.replace(/\{\{[^}]+\}\}/g, '');
+  
+  return rendered;
+};
\ No newline at end of file