diff --git a/USERFLOWS.md b/USERFLOWS.md
new file mode 100644
index 0000000..5db4dde
--- /dev/null
+++ b/USERFLOWS.md
@@ -0,0 +1,54 @@
+# User Flows I want the solution to support
+
+## Flow #1 - Presentation Management
+**Adding, removing, and editing existing presentations**
+
+### Create New Presentation
+- [x] User navigates to create new presentation
+- [x] User enters presentation details (title, description)
+- [ ] User selects aspect ratio (16:9, 4:3, 16:10) for presentation
+- [x] User selects a theme from available options
+- [x] User creates presentation and is taken to editor
+
+### View All Presentations
+- [x] User can view list of all saved presentations
+- [x] User can see presentation metadata (name, description, theme, slide count)
+- [x] User can access presentations from navigation
+
+### Edit Existing Presentation
+- [x] User can open existing presentation for editing
+- [x] User can navigate between slides in editor
+- [x] User can access presentation settings and metadata
+
+### Delete Presentation
+- [x] User can delete presentation from list view
+- [x] User gets confirmation dialog before deletion
+- [x] Presentation is removed from storage
+
+## Flow #2 - Slide Management
+**Adding, removing, and editing individual slides within presentations**
+
+### Add New Slide
+- [x] User clicks "Add Slide" from presentation editor
+- [x] User can select layout for new slide (with themed previews)
+- [x] User can add content to slide slots (text, images)
+- [x] User can add presentation notes to slide
+- [ ] User can see miniature preview of slide live while editing
+- [ ] User can save slide (auto-saves presentation)
+
+### Edit Existing Slide
+- [ ] User can click on existing slide to edit
+- [ ] User can modify slide content in all slots
+- [ ] User can change slide layout
+- [ ] User can edit presentation notes
+- [ ] Changes auto-save to presentation
+
+### Remove Slide
+- [ ] User can delete slides from presentation
+- [ ] User gets confirmation before slide deletion
+- [ ] Slide order adjusts automatically
+
+### Preview Slides
+- [ ] User can preview individual slides
+- [ ] User can view slides in presentation mode
+- [ ] User can navigate between slides in preview
diff --git a/public/themes-manifest.json b/public/themes-manifest.json
index ce5c747..543a7c4 100644
--- a/public/themes-manifest.json
+++ b/public/themes-manifest.json
@@ -11,5 +11,5 @@
       "hasMasterSlide": true
     }
   },
-  "generated": "2025-08-20T18:50:35.588Z"
+  "generated": "2025-08-20T19:28:24.594Z"
 }
\ No newline at end of file
diff --git a/public/themes/default/style.css b/public/themes/default/style.css
index 8e19167..40f9f06 100644
--- a/public/themes/default/style.css
+++ b/public/themes/default/style.css
@@ -127,7 +127,7 @@
   font-size: clamp(2rem, 5vw, 4rem);
   margin-bottom: 2rem;
   width: 80%;
-  
+
   color: var(--theme-primary);
 }
 
diff --git a/src/App.css b/src/App.css
index e38ce7f..a092c76 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,6 @@
+/* Import aspect ratio system for theme engine */
+@import './styles/aspectRatios.css';
+
 /* App Layout */
 .app-root {
   width: 100%;
@@ -9,14 +12,75 @@
 }
 
 .app-header {
-  padding: 2rem;
-  text-align: center;
   border-bottom: 1px solid #e5e7eb;
   background: #ffffff;
   width: 100%;
   box-sizing: border-box;
 }
 
+.app-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.app-logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1e293b;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.app-logo:hover {
+  color: #3b82f6;
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.nav-button {
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  border: none;
+  cursor: pointer;
+}
+
+.nav-button.primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.nav-button.primary:hover {
+  background: #2563eb;
+}
+
+.nav-link {
+  color: #64748b;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: color 0.2s ease;
+}
+
+.nav-link:hover {
+  color: #334155;
+}
+
+.page-title-section {
+  padding: 2rem;
+  text-align: center;
+}
+
 .app-header h1 {
   margin: 0;
   color: #1f2937;
@@ -80,7 +144,18 @@
     gap: 0.75rem;
   }
   
-  .app-header {
+  .app-nav {
+    padding: 1rem;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+  
+  .nav-actions {
+    justify-content: center;
+  }
+  
+  .page-title-section {
     padding: 1.5rem 1rem;
   }
   
diff --git a/src/App.tsx b/src/App.tsx
index 5ac715b..2c68de4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { ThemeBrowser, ThemeDetailPage, LayoutDetailPage, LayoutPreviewPage } from './components/themes'
+import { NewPresentationPage, PresentationViewer, PresentationEditor, SlideEditor, PresentationsList } from './components/presentations'
 import { AppHeader } from './components/AppHeader'
 import { Welcome } from './components/Welcome'
 import './App.css'
@@ -13,6 +14,11 @@ function App() {
         <main className="app-main">
           <Routes>
             <Route path="/" element={<Welcome />} />
+            <Route path="/presentations" element={<PresentationsList />} />
+            <Route path="/presentations/new" element={<NewPresentationPage />} />
+            <Route path="/presentations/:presentationId/edit/slides/:slideNumber" element={<PresentationEditor />} />
+            <Route path="/presentations/:presentationId/view/slides/:slideNumber" element={<PresentationViewer />} />
+            <Route path="/presentations/:presentationId/slide/:slideId/edit" element={<SlideEditor />} />
             <Route path="/themes" element={<ThemeBrowser />} />
             <Route path="/themes/:themeId" element={<ThemeDetailPage />} />
             <Route path="/themes/:themeId/layouts/:layoutId" element={<LayoutDetailPage />} />
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
index 47d4b42..67620a0 100644
--- a/src/components/AppHeader.tsx
+++ b/src/components/AppHeader.tsx
@@ -8,6 +8,34 @@ export const AppHeader: React.FC = () => {
     if (location.pathname === '/') {
       return 'Welcome to Slideshare';
     }
+    if (location.pathname === '/presentations') {
+      return 'My Presentations';
+    }
+    if (location.pathname === '/presentations/new') {
+      return 'Create New Presentation';
+    }
+    if (location.pathname.includes('/slide/') && location.pathname.includes('/edit')) {
+      const segments = location.pathname.split('/');
+      const slideId = segments[4];
+      if (slideId === 'new') {
+        return 'Add New Slide';
+      } else {
+        return 'Edit Slide';
+      }
+    }
+    if (location.pathname.includes('/presentations/') && location.pathname.includes('/slides/')) {
+      const segments = location.pathname.split('/');
+      if (segments.length === 6 && segments[1] === 'presentations') {
+        const mode = segments[3]; // 'edit' or 'view'
+        const slideNumber = segments[5];
+        if (mode === 'edit') {
+          return `Editing Slide ${slideNumber}`;
+        } else if (mode === 'view') {
+          return `Viewing Slide ${slideNumber}`;
+        }
+        return `Presentation Slide ${slideNumber}`;
+      }
+    }
     if (location.pathname === '/themes') {
       return 'Theme Browser';
     }
@@ -27,6 +55,33 @@ export const AppHeader: React.FC = () => {
     if (location.pathname === '/') {
       return 'Create beautiful presentations with customizable themes';
     }
+    if (location.pathname === '/presentations') {
+      return 'View and manage all your presentations';
+    }
+    if (location.pathname === '/presentations/new') {
+      return 'Select a theme and enter details for your new presentation';
+    }
+    if (location.pathname.includes('/slide/') && location.pathname.includes('/edit')) {
+      const segments = location.pathname.split('/');
+      const slideId = segments[4];
+      if (slideId === 'new') {
+        return 'Choose a layout and add content for your new slide';
+      } else {
+        return 'Edit slide content and layout';
+      }
+    }
+    if (location.pathname.includes('/presentations/') && location.pathname.includes('/slides/')) {
+      const segments = location.pathname.split('/');
+      if (segments.length === 6 && segments[1] === 'presentations') {
+        const mode = segments[3];
+        if (mode === 'edit') {
+          return 'Edit slide content, add notes, and manage your presentation';
+        } else if (mode === 'view') {
+          return 'View your presentation slides in read-only mode';
+        }
+      }
+      return 'View and manage your presentation slides';
+    }
     if (location.pathname === '/themes') {
       return 'Browse and select themes for your presentations';
     }
@@ -46,11 +101,19 @@ export const AppHeader: React.FC = () => {
     <header className="app-header">
       <nav className="app-nav">
         <Link to="/" className="app-logo">
-          Home
-        </Link>
-        <Link to="/themes" className="app-logo">
           Slideshare
         </Link>
+        <div className="nav-actions">
+          <Link to="/presentations" className="nav-link">
+            My Presentations
+          </Link>
+          <Link to="/presentations/new" className="nav-button primary">
+            Create Presentation
+          </Link>
+          <Link to="/themes" className="nav-link">
+            Themes
+          </Link>
+        </div>
       </nav>
       <div className="page-title-section">
         <h1 className="page-title">{getPageTitle()}</h1>
diff --git a/src/components/Welcome.tsx b/src/components/Welcome.tsx
index 6f41c35..ec6b3bc 100644
--- a/src/components/Welcome.tsx
+++ b/src/components/Welcome.tsx
@@ -10,7 +10,10 @@ export const Welcome: React.FC = () => {
           Create beautiful presentations with customizable themes and layouts
         </p>
         <div className="hero-actions">
-          <Link to="/themes" className="primary-button">
+          <Link to="/presentations/new" className="primary-button">
+            Create Presentation
+          </Link>
+          <Link to="/themes" className="secondary-button">
             Browse Themes
           </Link>
         </div>
@@ -114,8 +117,8 @@ export const Welcome: React.FC = () => {
           <p className="cta-description">
             Start building your presentation with our theme collection
           </p>
-          <Link to="/themes" className="primary-button">
-            Explore Themes
+          <Link to="/presentations/new" className="primary-button">
+            Create Your First Presentation
           </Link>
         </div>
       </section>
diff --git a/src/components/presentations/NewPresentationPage.css b/src/components/presentations/NewPresentationPage.css
new file mode 100644
index 0000000..b659458
--- /dev/null
+++ b/src/components/presentations/NewPresentationPage.css
@@ -0,0 +1,382 @@
+.new-presentation-page {
+  min-height: 100vh;
+  background: #f8fafc;
+}
+
+.page-header {
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 1.5rem 2rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.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;
+}
+
+.header-content h1 {
+  margin: 0;
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.header-content p {
+  margin: 0.25rem 0 0 0;
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+.page-content {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.creation-form {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+/* Presentation Details Section */
+.presentation-details {
+  background: white;
+  border-radius: 0.75rem;
+  padding: 2rem;
+  border: 1px solid #e2e8f0;
+}
+
+.presentation-details h2 {
+  margin: 0 0 1.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #374151;
+  font-size: 0.875rem;
+}
+
+.form-input,
+.form-textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  background: white;
+  color: #374151;
+  box-sizing: border-box;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 80px;
+  font-family: inherit;
+}
+
+/* Theme Selection Section */
+.theme-selection {
+  background: white;
+  border-radius: 0.75rem;
+  padding: 2rem;
+  border: 1px solid #e2e8f0;
+}
+
+.theme-selection h2 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.section-description {
+  margin: 0 0 2rem 0;
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+.no-themes {
+  text-align: center;
+  padding: 3rem;
+  color: #64748b;
+}
+
+/* Creation Actions Section */
+.creation-actions {
+  background: white;
+  border-radius: 0.75rem;
+  padding: 2rem;
+  border: 1px solid #e2e8f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.selected-theme-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.theme-preview-info h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.theme-preview-info p {
+  margin: 0 0 0.75rem 0;
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+.theme-stats {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.theme-stats span {
+  background: #f1f5f9;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.creation-error {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 0.375rem;
+  color: #dc2626;
+}
+
+.creation-error p {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Aspect Ratio Selection */
+.aspect-ratio-selection {
+  margin-bottom: 2rem;
+}
+
+.aspect-ratio-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.aspect-ratio-card {
+  border: 2px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: white;
+}
+
+.aspect-ratio-card:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.aspect-ratio-card.selected {
+  border-color: #3b82f6;
+  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2);
+  background: #eff6ff;
+}
+
+.aspect-ratio-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  margin-bottom: 1rem;
+  background: #f8fafc;
+  border-radius: 0.5rem;
+  border: 1px dashed #cbd5e1;
+}
+
+.preview-box {
+  background: #3b82f6;
+  border-radius: 0.25rem;
+}
+
+.preview-box.aspect-16-9 {
+  width: 64px;
+  height: 36px;
+}
+
+.preview-box.aspect-4-3 {
+  width: 60px;
+  height: 45px;
+}
+
+.preview-box.aspect-16-10 {
+  width: 64px;
+  height: 40px;
+}
+
+.aspect-ratio-info h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.ratio-description {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.875rem;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+.ratio-dimensions {
+  font-size: 0.75rem;
+  color: #6b7280;
+  background: #f1f5f9;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  display: inline-block;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 1rem;
+  flex-shrink: 0;
+}
+
+.button {
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button.primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.button.primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.button.primary:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+}
+
+.button.secondary {
+  background: #f8fafc;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.button.secondary:hover {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+/* Loading and Error States */
+.loading-content,
+.error-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 {
+  color: #dc2626;
+  margin: 0;
+}
+
+.error-content p {
+  color: #64748b;
+  margin: 0.5rem 0 1.5rem 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .page-header {
+    padding: 1rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .page-content {
+    padding: 1rem;
+  }
+  
+  .creation-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .action-buttons {
+    justify-content: stretch;
+  }
+  
+  .button {
+    flex: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/components/presentations/NewPresentationPage.tsx b/src/components/presentations/NewPresentationPage.tsx
new file mode 100644
index 0000000..7879275
--- /dev/null
+++ b/src/components/presentations/NewPresentationPage.tsx
@@ -0,0 +1,237 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import type { Theme } from '../../types/theme';
+import type { AspectRatio } from '../../types/presentation';
+import { ASPECT_RATIOS } from '../../types/presentation';
+import { getThemes } from '../../themes';
+import { createPresentation } from '../../utils/presentationStorage';
+import { ThemeSelector } from './ThemeSelector';
+import './NewPresentationPage.css';
+
+export const NewPresentationPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [themes, setThemes] = useState<Theme[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedTheme, setSelectedTheme] = useState<Theme | null>(null);
+  const [selectedAspectRatio, setSelectedAspectRatio] = useState<AspectRatio>('16:9');
+  const [presentationTitle, setPresentationTitle] = useState('');
+  const [presentationDescription, setPresentationDescription] = useState('');
+  const [creating, setCreating] = useState(false);
+
+  useEffect(() => {
+    const loadThemes = async () => {
+      try {
+        setLoading(true);
+        const discoveredThemes = await getThemes();
+        setThemes(discoveredThemes);
+        
+        // Auto-select first theme if available
+        if (discoveredThemes.length > 0) {
+          setSelectedTheme(discoveredThemes[0]);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load themes');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadThemes();
+  }, []);
+
+  const handleCreatePresentation = async () => {
+    if (!selectedTheme) {
+      alert('Please select a theme for your presentation');
+      return;
+    }
+
+    if (!presentationTitle.trim()) {
+      alert('Please enter a title for your presentation');
+      return;
+    }
+
+    try {
+      setCreating(true);
+      setError(null);
+
+      const presentation = await createPresentation({
+        name: presentationTitle.trim(),
+        description: presentationDescription.trim(),
+        theme: selectedTheme.id,
+        aspectRatio: selectedAspectRatio
+      });
+
+      console.log('Presentation created successfully:', presentation);
+      
+      // Navigate to the new presentation editor (slide 1)
+      navigate(`/presentations/${presentation.metadata.id}/edit/slides/1`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create presentation');
+      console.error('Error creating presentation:', err);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="new-presentation-page">
+        <div className="loading-content">
+          <div className="loading-spinner">Loading themes...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="new-presentation-page">
+        <div className="error-content">
+          <h2>Error Loading Themes</h2>
+          <p>{error}</p>
+          <button onClick={() => navigate('/themes')} className="button secondary">
+            ← Back to Themes
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="new-presentation-page">
+      <header className="page-header">
+        <button 
+          onClick={() => navigate('/themes')} 
+          className="back-button"
+          type="button"
+        >
+          ← Back to Themes
+        </button>
+        <div className="header-content">
+          <h1>Create New Presentation</h1>
+          <p>Choose a theme and enter details for your new presentation</p>
+        </div>
+      </header>
+
+      <main className="page-content">
+        <div className="creation-form">
+          <section className="presentation-details">
+            <h2>Presentation Details</h2>
+            <div className="form-group">
+              <label htmlFor="title">Title *</label>
+              <input
+                id="title"
+                type="text"
+                value={presentationTitle}
+                onChange={(e) => setPresentationTitle(e.target.value)}
+                placeholder="Enter presentation title"
+                className="form-input"
+                required
+              />
+            </div>
+            
+            <div className="form-group">
+              <label htmlFor="description">Description</label>
+              <textarea
+                id="description"
+                value={presentationDescription}
+                onChange={(e) => setPresentationDescription(e.target.value)}
+                placeholder="Optional description of your presentation"
+                className="form-textarea"
+                rows={3}
+              />
+            </div>
+          </section>
+
+          <section className="aspect-ratio-selection">
+            <h2>Choose Aspect Ratio</h2>
+            <p className="section-description">
+              Select the aspect ratio that best fits your display setup
+            </p>
+            
+            <div className="aspect-ratio-grid">
+              {ASPECT_RATIOS.map((ratio) => (
+                <div
+                  key={ratio.id}
+                  className={`aspect-ratio-card ${selectedAspectRatio === ratio.id ? 'selected' : ''}`}
+                  onClick={() => setSelectedAspectRatio(ratio.id)}
+                >
+                  <div className="aspect-ratio-preview">
+                    <div className={`preview-box ${ratio.cssClass}`}></div>
+                  </div>
+                  <div className="aspect-ratio-info">
+                    <h3>{ratio.name}</h3>
+                    <p className="ratio-description">{ratio.description}</p>
+                    <div className="ratio-dimensions">
+                      {ratio.width} × {ratio.height}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="theme-selection">
+            <h2>Choose a Theme</h2>
+            <p className="section-description">
+              Select a theme that matches the style and tone of your presentation
+            </p>
+            
+            {themes.length > 0 ? (
+              <ThemeSelector
+                themes={themes}
+                selectedTheme={selectedTheme}
+                onThemeSelect={setSelectedTheme}
+              />
+            ) : (
+              <div className="no-themes">
+                <p>No themes available. Please check your theme configuration.</p>
+              </div>
+            )}
+          </section>
+
+          <section className="creation-actions">
+            <div className="selected-theme-info">
+              {selectedTheme && (
+                <div className="theme-preview-info">
+                  <h3>Selected Theme: {selectedTheme.name}</h3>
+                  <p>{selectedTheme.description}</p>
+                  <div className="theme-stats">
+                    <span>{selectedTheme.layouts.length} layouts available</span>
+                    {selectedTheme.author && <span>by {selectedTheme.author}</span>}
+                  </div>
+                </div>
+              )}
+              
+              {error && (
+                <div className="creation-error">
+                  <p>Failed to create presentation: {error}</p>
+                </div>
+              )}
+            </div>
+            
+            <div className="action-buttons">
+              <button 
+                onClick={() => navigate('/themes')} 
+                className="button secondary"
+                type="button"
+                disabled={creating}
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={handleCreatePresentation}
+                className="button primary"
+                type="button"
+                disabled={!selectedTheme || !presentationTitle.trim() || creating}
+              >
+                {creating ? 'Creating...' : 'Create Presentation'}
+              </button>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/presentations/PresentationEditor.css b/src/components/presentations/PresentationEditor.css
new file mode 100644
index 0000000..c44b531
--- /dev/null
+++ b/src/components/presentations/PresentationEditor.css
@@ -0,0 +1,730 @@
+.presentation-editor {
+  min-height: 100vh;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.editor-header {
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.presentation-info {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.back-link {
+  color: #64748b;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.back-link:hover {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.presentation-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.presentation-title h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.presentation-description {
+  margin: 0.25rem 0 0 0;
+  color: #64748b;
+  font-size: 0.875rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.presentation-meta {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.theme-badge {
+  background: #dbeafe;
+  color: #1e40af;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.slide-counter {
+  color: #6b7280;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.saving-indicator {
+  color: #f59e0b;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.editor-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-shrink: 0;
+}
+
+.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.large {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+}
+
+.action-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Main Content */
+.editor-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Empty State */
+.empty-presentation {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.empty-content {
+  text-align: center;
+  max-width: 800px;
+}
+
+.empty-content h2 {
+  margin: 0 0 0.5rem 0;
+  color: #374151;
+  font-size: 1.5rem;
+}
+
+.empty-content p {
+  margin: 0 0 2rem 0;
+  color: #6b7280;
+  font-size: 1rem;
+}
+
+/* Theme Preview in Empty State */
+.theme-preview {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 2rem;
+  margin: 2rem 0;
+  text-align: left;
+  max-height: 500px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.theme-preview h3 {
+  margin: 0 0 0.5rem 0;
+  color: #1e293b;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.theme-description {
+  margin: 0 0 1.5rem 0;
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+.available-layouts {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.available-layouts h4 {
+  margin: 0 0 1rem 0;
+  color: #374151;
+  font-size: 1rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.layouts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+  overflow-y: auto;
+  max-height: 300px;
+  padding-right: 0.5rem;
+}
+
+/* Custom scrollbar for layouts grid */
+.layouts-grid::-webkit-scrollbar {
+  width: 6px;
+}
+
+.layouts-grid::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 3px;
+}
+
+.layouts-grid::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+.layouts-grid::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.layout-preview-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  transition: all 0.2s ease;
+}
+
+.layout-preview-card:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.layout-name {
+  font-weight: 600;
+  color: #1e293b;
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+}
+
+.layout-description {
+  color: #64748b;
+  font-size: 0.75rem;
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+
+.slot-count {
+  color: #059669;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.more-layouts {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f1f5f9;
+  border: 1px dashed #cbd5e1;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  color: #64748b;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Editor Layout */
+.editor-layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Slide Sidebar */
+.slide-sidebar {
+  width: 280px;
+  background: white;
+  border-right: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  padding: 1rem;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-header h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.add-slide-button {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #e2e8f0;
+  background: white;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 1.25rem;
+  color: #3b82f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.add-slide-button:hover:not(:disabled) {
+  background: #f8fafc;
+  border-color: #3b82f6;
+}
+
+.add-slide-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slides-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.slide-thumbnail {
+  background: white;
+  border: 2px solid #e2e8f0;
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.slide-thumbnail:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.slide-thumbnail.active {
+  border-color: #3b82f6;
+  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
+}
+
+.thumbnail-number {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  background: #374151;
+  color: white;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  z-index: 10;
+}
+
+.slide-thumbnail.active .thumbnail-number {
+  background: #3b82f6;
+}
+
+.thumbnail-preview {
+  padding: 2rem 1rem 1rem;
+  min-height: 80px;
+  background: #f8fafc;
+  border-radius: 0.25rem;
+  margin: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumbnail-content {
+  text-align: center;
+}
+
+.layout-name {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 0.25rem;
+}
+
+.content-count {
+  display: block;
+  font-size: 0.625rem;
+  color: #6b7280;
+}
+
+.thumbnail-actions {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  justify-content: center;
+  border-top: 1px solid #f1f5f9;
+}
+
+.thumbnail-action {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #e2e8f0;
+  background: white;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.thumbnail-action:hover:not(:disabled) {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.thumbnail-action.delete:hover:not(:disabled) {
+  background: #fef2f2;
+  border-color: #fecaca;
+  color: #dc2626;
+}
+
+.thumbnail-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Slide Editor Area */
+.slide-editor-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.slide-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+.slide-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.slide-header h3 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.slide-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.control-button {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid #e2e8f0;
+  background: white;
+  color: #374151;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.control-button:hover:not(:disabled) {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.control-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slide-content-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.content-preview {
+  flex: 1;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 2rem;
+  min-height: 400px;
+}
+
+.editor-placeholder {
+  text-align: center;
+  color: #6b7280;
+}
+
+.editor-placeholder h4 {
+  margin: 0 0 1rem 0;
+  color: #374151;
+}
+
+.editor-placeholder p {
+  margin: 0.5rem 0;
+}
+
+.content-slots {
+  margin: 1.5rem 0;
+  text-align: left;
+}
+
+.content-slot {
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  background: #f8fafc;
+  border-radius: 0.375rem;
+}
+
+.content-slot label {
+  display: block;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.slot-content {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.placeholder-note {
+  font-style: italic;
+  color: #9ca3af;
+  margin-top: 1.5rem;
+}
+
+.slide-notes-editor {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 1rem;
+}
+
+.slide-notes-editor h4 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.notes-textarea {
+  width: 100%;
+  min-height: 80px;
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  color: #374151;
+  background: white;
+  box-sizing: border-box;
+  resize: vertical;
+  font-family: inherit;
+}
+
+.notes-textarea:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.slide-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  text-align: center;
+  color: #dc2626;
+}
+
+/* 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;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .slide-sidebar {
+    width: 240px;
+  }
+  
+  .editor-header {
+    padding: 1rem;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+  
+  .presentation-info {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .presentation-meta {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  
+  .editor-actions {
+    justify-content: stretch;
+  }
+  
+  .action-button {
+    flex: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .editor-layout {
+    flex-direction: column;
+  }
+  
+  .slide-sidebar {
+    width: 100%;
+    max-height: 200px;
+    border-right: none;
+    border-bottom: 1px solid #e2e8f0;
+  }
+  
+  .slides-list {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+    padding: 0.5rem;
+  }
+  
+  .slide-thumbnail {
+    min-width: 120px;
+    margin-bottom: 0;
+  }
+  
+  .slide-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .slide-controls {
+    justify-content: stretch;
+  }
+  
+  .control-button {
+    flex: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/components/presentations/PresentationEditor.tsx b/src/components/presentations/PresentationEditor.tsx
new file mode 100644
index 0000000..ae7c1b4
--- /dev/null
+++ b/src/components/presentations/PresentationEditor.tsx
@@ -0,0 +1,420 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import type { Presentation } from '../../types/presentation';
+import type { Theme } from '../../types/theme';
+import { getPresentationById } from '../../utils/presentationStorage';
+import { getTheme } from '../../themes';
+import './PresentationEditor.css';
+
+export const PresentationEditor: React.FC = () => {
+  const { presentationId, slideNumber } = useParams<{ 
+    presentationId: string; 
+    slideNumber: 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 currentSlideIndex = slideNumber ? parseInt(slideNumber, 10) - 1 : 0;
+
+  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);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load presentation');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadPresentationAndTheme();
+  }, [presentationId]);
+
+  const goToSlide = (slideIndex: number) => {
+    if (!presentation) return;
+    
+    const slideNum = slideIndex + 1;
+    navigate(`/presentations/${presentationId}/edit/slides/${slideNum}`);
+  };
+
+  const goToPreviousSlide = () => {
+    if (currentSlideIndex > 0) {
+      goToSlide(currentSlideIndex - 1);
+    }
+  };
+
+  const goToNextSlide = () => {
+    if (presentation && currentSlideIndex < presentation.slides.length - 1) {
+      goToSlide(currentSlideIndex + 1);
+    }
+  };
+
+  const addNewSlide = () => {
+    if (!presentation) return;
+    
+    // Navigate to slide editor for new slide
+    navigate(`/presentations/${presentationId}/slide/new/edit`);
+  };
+
+  const duplicateSlide = async (slideIndex: number) => {
+    if (!presentation) return;
+    
+    try {
+      setSaving(true);
+      
+      // TODO: Implement slide duplication
+      console.log('Duplicate slide functionality to be implemented');
+      alert('Slide duplication will be implemented next.');
+      
+    } catch (err) {
+      console.error('Error duplicating slide:', err);
+      alert('Failed to duplicate slide');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deleteSlide = async (slideIndex: number) => {
+    if (!presentation) return;
+    
+    if (!confirm('Are you sure you want to delete this slide?')) {
+      return;
+    }
+    
+    try {
+      setSaving(true);
+      
+      // TODO: Implement slide deletion
+      console.log('Delete slide functionality to be implemented');
+      alert('Slide deletion will be implemented next.');
+      
+    } catch (err) {
+      console.error('Error deleting slide:', err);
+      alert('Failed to delete slide');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const savePresentation = async () => {
+    if (!presentation) return;
+    
+    try {
+      setSaving(true);
+      
+      // TODO: Implement presentation saving
+      console.log('Save presentation functionality to be implemented');
+      alert('Auto-save will be implemented. Changes are saved automatically.');
+      
+    } catch (err) {
+      console.error('Error saving presentation:', err);
+      alert('Failed to save presentation');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const previewPresentation = () => {
+    if (!presentation) return;
+    
+    const slideNum = Math.max(1, currentSlideIndex + 1);
+    navigate(`/presentations/${presentationId}/view/slides/${slideNum}`);
+  };
+
+  if (loading) {
+    return (
+      <div className="presentation-editor">
+        <div className="loading-content">
+          <div className="loading-spinner">Loading presentation editor...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="presentation-editor">
+        <div className="error-content">
+          <h2>Error Loading Presentation</h2>
+          <p>{error}</p>
+          <Link to="/themes" className="back-link">← Back to Themes</Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (!presentation || !theme) {
+    return (
+      <div className="presentation-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>
+    );
+  }
+
+  const currentSlide = presentation.slides[currentSlideIndex];
+  const totalSlides = presentation.slides.length;
+
+  return (
+    <div className="presentation-editor">
+      <header className="editor-header">
+        <div className="presentation-info">
+          <Link to="/themes" className="back-link">← Back</Link>
+          <div className="presentation-title">
+            <h1>{presentation.metadata.name}</h1>
+            {presentation.metadata.description && (
+              <p className="presentation-description">{presentation.metadata.description}</p>
+            )}
+          </div>
+          <div className="presentation-meta">
+            <span className="theme-badge">Theme: {theme.name}</span>
+            <span className="slide-counter">
+              {totalSlides === 0 ? 'No slides' : `Editing slide ${currentSlideIndex + 1} of ${totalSlides}`}
+            </span>
+            {saving && <span className="saving-indicator">Saving...</span>}
+          </div>
+        </div>
+        
+        <div className="editor-actions">
+          <button 
+            type="button" 
+            className="action-button secondary"
+            onClick={savePresentation}
+            disabled={saving}
+          >
+            {saving ? 'Saving...' : 'Save'}
+          </button>
+          <button 
+            type="button" 
+            className="action-button secondary"
+            onClick={previewPresentation}
+          >
+            Preview
+          </button>
+          <button 
+            type="button" 
+            className="action-button primary"
+            onClick={addNewSlide}
+          >
+            Add Slide
+          </button>
+        </div>
+      </header>
+
+      <main className="editor-content">
+        {totalSlides === 0 ? (
+          <div className="empty-presentation">
+            <div className="empty-content">
+              <h2>Start creating your presentation</h2>
+              <p>Add your first slide to begin editing your presentation</p>
+              
+              {theme && (
+                <div className="theme-preview">
+                  <h3>Using Theme: {theme.name}</h3>
+                  <p className="theme-description">{theme.description}</p>
+                  
+                  <div className="available-layouts">
+                    <h4>Available Layouts ({theme.layouts.length})</h4>
+                    <div className="layouts-grid">
+                      {theme.layouts.slice(0, 6).map((layout) => (
+                        <div key={layout.id} className="layout-preview-card">
+                          <div className="layout-name">{layout.name}</div>
+                          <div className="layout-description">{layout.description}</div>
+                          <div className="slot-count">{layout.slots.length} slots</div>
+                        </div>
+                      ))}
+                      {theme.layouts.length > 6 && (
+                        <div className="more-layouts">
+                          +{theme.layouts.length - 6} more layouts
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+              
+              <button 
+                type="button" 
+                className="action-button primary large"
+                onClick={addNewSlide}
+              >
+                Add First Slide
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="editor-layout">
+            <aside className="slide-sidebar">
+              <div className="sidebar-header">
+                <h3>Slides</h3>
+                <button 
+                  type="button"
+                  className="add-slide-button"
+                  onClick={addNewSlide}
+                  title="Add new slide"
+                >
+                  +
+                </button>
+              </div>
+              
+              <div className="slides-list">
+                {presentation.slides.map((slide, index) => (
+                  <div
+                    key={slide.id}
+                    className={`slide-thumbnail ${index === currentSlideIndex ? 'active' : ''}`}
+                    onClick={() => goToSlide(index)}
+                    onDoubleClick={() => navigate(`/presentations/${presentationId}/slide/${slide.id}/edit`)}
+                  >
+                    <div className="thumbnail-number">{index + 1}</div>
+                    <div className="thumbnail-preview">
+                      <div className="thumbnail-content">
+                        <span className="layout-name">{slide.layoutId}</span>
+                        <span className="content-count">
+                          {Object.keys(slide.content).length} items
+                        </span>
+                      </div>
+                    </div>
+                    <div className="thumbnail-actions">
+                      <button
+                        type="button"
+                        className="thumbnail-action"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          duplicateSlide(index);
+                        }}
+                        title="Duplicate slide"
+                        disabled={saving}
+                      >
+                        ⧉
+                      </button>
+                      <button
+                        type="button"
+                        className="thumbnail-action delete"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          deleteSlide(index);
+                        }}
+                        title="Delete slide"
+                        disabled={saving}
+                      >
+                        ✕
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </aside>
+
+            <div className="slide-editor-area">
+              {currentSlide ? (
+                <div className="slide-editor">
+                  <div className="slide-header">
+                    <h3>Slide {currentSlideIndex + 1} - {currentSlide.layoutId}</h3>
+                    <div className="slide-controls">
+                      <button 
+                        type="button"
+                        className="control-button"
+                        onClick={goToPreviousSlide}
+                        disabled={currentSlideIndex === 0}
+                      >
+                        ← Previous
+                      </button>
+                      <button 
+                        type="button"
+                        className="control-button"
+                        onClick={goToNextSlide}
+                        disabled={currentSlideIndex === totalSlides - 1}
+                      >
+                        Next →
+                      </button>
+                    </div>
+                  </div>
+                  
+                  <div className="slide-content-editor">
+                    <div className="content-preview">
+                      {/* TODO: Render actual slide content with editing capabilities */}
+                      <div className="editor-placeholder">
+                        <h4>Slide Content Editor</h4>
+                        <p>Layout: {currentSlide.layoutId}</p>
+                        <p>Content slots: {Object.keys(currentSlide.content).length}</p>
+                        <div className="content-slots">
+                          {Object.entries(currentSlide.content).map(([slotId, content]) => (
+                            <div key={slotId} className="content-slot">
+                              <label>{slotId}:</label>
+                              <div className="slot-content">{content || '(empty)'}</div>
+                            </div>
+                          ))}
+                        </div>
+                        <p className="placeholder-note">
+                          Interactive slide editor will be implemented next
+                        </p>
+                      </div>
+                    </div>
+                    
+                    {currentSlide.notes && (
+                      <div className="slide-notes-editor">
+                        <h4>Speaker Notes</h4>
+                        <textarea 
+                          value={currentSlide.notes}
+                          onChange={(e) => {
+                            // TODO: Update slide notes
+                            console.log('Update notes:', e.target.value);
+                          }}
+                          placeholder="Add speaker notes for this slide..."
+                          className="notes-textarea"
+                        />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <div className="slide-error">
+                  <p>Invalid slide number</p>
+                  <button 
+                    type="button"
+                    className="action-button secondary"
+                    onClick={() => goToSlide(0)}
+                  >
+                    Go to First Slide
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/presentations/PresentationViewer.css b/src/components/presentations/PresentationViewer.css
new file mode 100644
index 0000000..a170a22
--- /dev/null
+++ b/src/components/presentations/PresentationViewer.css
@@ -0,0 +1,390 @@
+.presentation-viewer {
+  min-height: 100vh;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.viewer-header {
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.presentation-info {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.back-link {
+  color: #64748b;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.back-link:hover {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.presentation-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.presentation-title h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.presentation-description {
+  margin: 0.25rem 0 0 0;
+  color: #64748b;
+  font-size: 0.875rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.presentation-meta {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.theme-badge {
+  background: #dbeafe;
+  color: #1e40af;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.slide-counter {
+  color: #6b7280;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.viewer-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-shrink: 0;
+}
+
+.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 {
+  background: #2563eb;
+}
+
+.action-button.secondary {
+  background: #f8fafc;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.action-button.secondary:hover {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.action-button.large {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+}
+
+/* Main Content */
+.viewer-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  gap: 2rem;
+}
+
+/* Empty State */
+.empty-presentation {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-content {
+  text-align: center;
+  max-width: 400px;
+}
+
+.empty-content h2 {
+  margin: 0 0 0.5rem 0;
+  color: #374151;
+  font-size: 1.5rem;
+}
+
+.empty-content p {
+  margin: 0 0 2rem 0;
+  color: #6b7280;
+  font-size: 1rem;
+}
+
+/* Slide Area */
+.slide-area {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.slide-container {
+  background: white;
+  border-radius: 0.75rem;
+  border: 1px solid #e2e8f0;
+  padding: 2rem;
+  max-width: 800px;
+  width: 100%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.slide-content h3 {
+  margin: 0 0 1rem 0;
+  color: #1e293b;
+  font-size: 1.25rem;
+}
+
+.slide-content p {
+  margin: 0 0 1rem 0;
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+.slide-preview {
+  background: #f8fafc;
+  border: 2px dashed #cbd5e1;
+  border-radius: 0.5rem;
+  padding: 3rem;
+  text-align: center;
+  margin: 1.5rem 0;
+}
+
+.slide-placeholder {
+  color: #6b7280;
+}
+
+.slide-placeholder p {
+  margin: 0.5rem 0;
+}
+
+.slide-notes {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background: #f8fafc;
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0;
+}
+
+.slide-notes h4 {
+  margin: 0 0 0.5rem 0;
+  color: #374151;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.slide-notes p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.slide-error {
+  text-align: center;
+  padding: 2rem;
+  color: #dc2626;
+}
+
+/* Slide Navigation */
+.slide-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: white;
+  border-radius: 0.75rem;
+  border: 1px solid #e2e8f0;
+}
+
+.nav-button {
+  padding: 0.5rem 1rem;
+  border: 1px solid #e2e8f0;
+  background: white;
+  color: #374151;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.nav-button:hover:not(:disabled) {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.nav-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slide-thumbnails {
+  display: flex;
+  gap: 0.5rem;
+  max-width: 300px;
+  overflow-x: auto;
+  padding: 0.25rem;
+}
+
+.thumbnail {
+  min-width: 40px;
+  height: 40px;
+  border: 2px solid #e2e8f0;
+  background: white;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #6b7280;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumbnail:hover {
+  border-color: #cbd5e1;
+  background: #f8fafc;
+}
+
+.thumbnail.active {
+  border-color: #3b82f6;
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+/* 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;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .viewer-header {
+    padding: 1rem;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+  
+  .presentation-info {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .presentation-meta {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  
+  .viewer-actions {
+    justify-content: stretch;
+  }
+  
+  .action-button {
+    flex: 1;
+  }
+  
+  .viewer-content {
+    padding: 1rem;
+  }
+  
+  .slide-container {
+    padding: 1rem;
+  }
+  
+  .slide-navigation {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .slide-thumbnails {
+    justify-content: center;
+    max-width: none;
+  }
+}
\ No newline at end of file
diff --git a/src/components/presentations/PresentationViewer.tsx b/src/components/presentations/PresentationViewer.tsx
new file mode 100644
index 0000000..52a5333
--- /dev/null
+++ b/src/components/presentations/PresentationViewer.tsx
@@ -0,0 +1,249 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import type { Presentation } from '../../types/presentation';
+import type { Theme } from '../../types/theme';
+import { getPresentationById } from '../../utils/presentationStorage';
+import { getTheme } from '../../themes';
+import './PresentationViewer.css';
+
+export const PresentationViewer: React.FC = () => {
+  const { presentationId, slideNumber } = useParams<{ 
+    presentationId: string; 
+    slideNumber: 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 currentSlideIndex = slideNumber ? parseInt(slideNumber, 10) - 1 : 0;
+
+  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);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load presentation');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadPresentationAndTheme();
+  }, [presentationId]);
+
+  const goToSlide = (slideIndex: number) => {
+    if (!presentation) return;
+    
+    const slideNum = slideIndex + 1;
+    navigate(`/presentations/${presentationId}/view/slides/${slideNum}`);
+  };
+
+  const goToPreviousSlide = () => {
+    if (currentSlideIndex > 0) {
+      goToSlide(currentSlideIndex - 1);
+    }
+  };
+
+  const goToNextSlide = () => {
+    if (presentation && currentSlideIndex < presentation.slides.length - 1) {
+      goToSlide(currentSlideIndex + 1);
+    }
+  };
+
+  const editPresentation = () => {
+    if (!presentation) return;
+    
+    const slideNum = Math.max(1, currentSlideIndex + 1);
+    navigate(`/presentations/${presentationId}/edit/slides/${slideNum}`);
+  };
+
+  const enterPresentationMode = () => {
+    // TODO: Implement full-screen presentation mode
+    console.log('Full-screen presentation mode to be implemented');
+  };
+
+  if (loading) {
+    return (
+      <div className="presentation-viewer">
+        <div className="loading-content">
+          <div className="loading-spinner">Loading presentation...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="presentation-viewer">
+        <div className="error-content">
+          <h2>Error Loading Presentation</h2>
+          <p>{error}</p>
+          <Link to="/themes" className="back-link">← Back to Themes</Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (!presentation || !theme) {
+    return (
+      <div className="presentation-viewer">
+        <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>
+    );
+  }
+
+  const currentSlide = presentation.slides[currentSlideIndex];
+  const totalSlides = presentation.slides.length;
+
+  return (
+    <div className="presentation-viewer">
+      <header className="viewer-header">
+        <div className="presentation-info">
+          <Link to="/themes" className="back-link">← Back</Link>
+          <div className="presentation-title">
+            <h1>{presentation.metadata.name}</h1>
+            {presentation.metadata.description && (
+              <p className="presentation-description">{presentation.metadata.description}</p>
+            )}
+          </div>
+          <div className="presentation-meta">
+            <span className="theme-badge">Theme: {theme.name}</span>
+            <span className="slide-counter">
+              {totalSlides === 0 ? 'No slides' : `Slide ${currentSlideIndex + 1} of ${totalSlides}`}
+            </span>
+          </div>
+        </div>
+        
+        <div className="viewer-actions">
+          <button 
+            type="button" 
+            className="action-button secondary"
+            onClick={editPresentation}
+          >
+            Edit
+          </button>
+          <button 
+            type="button" 
+            className="action-button primary"
+            onClick={enterPresentationMode}
+          >
+            Present
+          </button>
+        </div>
+      </header>
+
+      <main className="viewer-content">
+        {totalSlides === 0 ? (
+          <div className="empty-presentation">
+            <div className="empty-content">
+              <h2>This presentation is empty</h2>
+              <p>Switch to edit mode to add slides</p>
+              <button 
+                type="button" 
+                className="action-button primary large"
+                onClick={editPresentation}
+              >
+                Edit Presentation
+              </button>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="slide-area">
+              <div className="slide-container">
+                {currentSlide ? (
+                  <div className="slide-content">
+                    <h3>Slide {currentSlideIndex + 1}</h3>
+                    <p>Layout: {currentSlide.layoutId}</p>
+                    <div className="slide-preview">
+                      {/* TODO: Render actual slide content based on layout */}
+                      <div className="slide-placeholder">
+                        <p>Slide content will be rendered here</p>
+                        <p>Layout: {currentSlide.layoutId}</p>
+                        <p>Content slots: {Object.keys(currentSlide.content).length}</p>
+                      </div>
+                    </div>
+                    {currentSlide.notes && (
+                      <div className="slide-notes">
+                        <h4>Notes:</h4>
+                        <p>{currentSlide.notes}</p>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="slide-error">
+                    <p>Invalid slide number</p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="slide-navigation">
+              <button 
+                type="button"
+                className="nav-button"
+                onClick={goToPreviousSlide}
+                disabled={currentSlideIndex === 0}
+              >
+                ← Previous
+              </button>
+              
+              <div className="slide-thumbnails">
+                {presentation.slides.map((slide, index) => (
+                  <button
+                    key={slide.id}
+                    type="button"
+                    className={`thumbnail ${index === currentSlideIndex ? 'active' : ''}`}
+                    onClick={() => goToSlide(index)}
+                  >
+                    {index + 1}
+                  </button>
+                ))}
+              </div>
+              
+              <button 
+                type="button"
+                className="nav-button"
+                onClick={goToNextSlide}
+                disabled={currentSlideIndex === totalSlides - 1}
+              >
+                Next →
+              </button>
+            </div>
+          </>
+        )}
+      </main>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/presentations/PresentationsList.css b/src/components/presentations/PresentationsList.css
new file mode 100644
index 0000000..cba5294
--- /dev/null
+++ b/src/components/presentations/PresentationsList.css
@@ -0,0 +1,430 @@
+.presentations-list {
+  min-height: 100vh;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.list-header {
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.header-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.header-content h1 {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.header-content p {
+  margin: 0.5rem 0 0 0;
+  color: #64748b;
+  font-size: 1rem;
+}
+
+.header-actions {
+  display: flex;
+  gap: 1rem;
+  flex-shrink: 0;
+}
+
+.action-button {
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  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 {
+  background: #2563eb;
+}
+
+.action-button.secondary {
+  background: #f8fafc;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.action-button.secondary:hover {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.action-button.large {
+  padding: 1rem 2rem;
+  font-size: 1rem;
+}
+
+/* Main Content */
+.list-content {
+  flex: 1;
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Empty State */
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  text-align: center;
+}
+
+.empty-content h2 {
+  margin: 0 0 0.5rem 0;
+  color: #374151;
+  font-size: 1.5rem;
+}
+
+.empty-content p {
+  margin: 0 0 2rem 0;
+  color: #6b7280;
+  font-size: 1rem;
+}
+
+/* Presentations Grid */
+.presentations-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.presentation-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.presentation-card:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* Card Header */
+.card-header {
+  padding: 1.5rem 1.5rem 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.presentation-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.presentation-name {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1e293b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.presentation-description {
+  margin: 0;
+  color: #64748b;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.presentation-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.action-icon {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #e2e8f0;
+  background: white;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.action-icon:hover:not(:disabled) {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.action-icon.delete:hover:not(:disabled) {
+  background: #fef2f2;
+  border-color: #fecaca;
+}
+
+.action-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Card Content */
+.card-content {
+  padding: 0 1.5rem;
+  flex: 1;
+}
+
+.presentation-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.stat-value {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.theme-name {
+  background: #dbeafe;
+  color: #1e40af;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  display: inline-block;
+}
+
+.slides-count {
+  color: #059669;
+  font-weight: 600;
+}
+
+.presentation-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem 0;
+  border-top: 1px solid #f1f5f9;
+}
+
+.meta-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.meta-label {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.meta-value {
+  font-size: 0.75rem;
+  color: #374151;
+  font-weight: 500;
+}
+
+/* Card Footer */
+.card-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #f1f5f9;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.card-action {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+}
+
+.card-action.primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.card-action.primary:hover {
+  background: #2563eb;
+}
+
+.card-action.secondary {
+  background: #f8fafc;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.card-action.secondary:hover {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+/* List Footer */
+.list-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2rem 0;
+  border-top: 1px solid #e2e8f0;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.summary-stats p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.footer-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+/* Loading and Error States */
+.loading-content,
+.error-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 {
+  color: #dc2626;
+  margin: 0;
+}
+
+.error-content p {
+  color: #64748b;
+  margin: 0.5rem 0 1.5rem 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .list-header {
+    padding: 1rem;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+  
+  .header-actions {
+    justify-content: stretch;
+  }
+  
+  .action-button {
+    flex: 1;
+  }
+  
+  .list-content {
+    padding: 1rem;
+  }
+  
+  .presentations-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .card-header {
+    padding: 1rem 1rem 0.5rem;
+  }
+  
+  .presentation-actions {
+    flex-direction: column;
+  }
+  
+  .presentation-stats {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+  }
+  
+  .list-footer {
+    flex-direction: column;
+    align-items: stretch;
+    text-align: center;
+  }
+  
+  .footer-actions {
+    justify-content: stretch;
+  }
+}
+
+@media (max-width: 480px) {
+  .presentations-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .card-footer {
+    flex-direction: column;
+  }
+  
+  .card-action {
+    padding: 0.75rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/presentations/PresentationsList.tsx b/src/components/presentations/PresentationsList.tsx
new file mode 100644
index 0000000..83c011b
--- /dev/null
+++ b/src/components/presentations/PresentationsList.tsx
@@ -0,0 +1,256 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import type { Presentation } from '../../types/presentation';
+import { getAllPresentations, deletePresentation } from '../../utils/presentationStorage';
+import './PresentationsList.css';
+
+export const PresentationsList: React.FC = () => {
+  const navigate = useNavigate();
+  const [presentations, setPresentations] = useState<Presentation[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadPresentations();
+  }, []);
+
+  const loadPresentations = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const allPresentations = await getAllPresentations();
+      setPresentations(allPresentations);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load presentations');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDeletePresentation = async (id: string, name: string) => {
+    if (!confirm(`Are you sure you want to delete "${name}"? This action cannot be undone.`)) {
+      return;
+    }
+
+    try {
+      setDeleting(id);
+      await deletePresentation(id);
+      setPresentations(prev => prev.filter(p => p.metadata.id !== id));
+    } catch (err) {
+      console.error('Error deleting presentation:', err);
+      alert('Failed to delete presentation. Please try again.');
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  const handleEditPresentation = (id: string, slideCount: number) => {
+    const slideNumber = slideCount > 0 ? 1 : 1; // Always go to slide 1, or empty state
+    navigate(`/presentations/${id}/edit/slides/${slideNumber}`);
+  };
+
+  const handleViewPresentation = (id: string, slideCount: number) => {
+    const slideNumber = slideCount > 0 ? 1 : 1; // Always go to slide 1, or empty state
+    navigate(`/presentations/${id}/view/slides/${slideNumber}`);
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="presentations-list">
+        <div className="loading-content">
+          <div className="loading-spinner">Loading presentations...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="presentations-list">
+        <div className="error-content">
+          <h2>Error Loading Presentations</h2>
+          <p>{error}</p>
+          <button 
+            onClick={loadPresentations}
+            className="action-button secondary"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="presentations-list">
+      <header className="list-header">
+        <div className="header-content">
+          <h1>My Presentations</h1>
+          <p>Manage and organize your presentation library</p>
+        </div>
+        <div className="header-actions">
+          <Link 
+            to="/presentations/new" 
+            className="action-button primary"
+          >
+            Create New Presentation
+          </Link>
+        </div>
+      </header>
+
+      <main className="list-content">
+        {presentations.length === 0 ? (
+          <div className="empty-state">
+            <div className="empty-content">
+              <h2>No presentations yet</h2>
+              <p>Create your first presentation to get started</p>
+              <Link 
+                to="/presentations/new" 
+                className="action-button primary large"
+              >
+                Create Your First Presentation
+              </Link>
+            </div>
+          </div>
+        ) : (
+          <div className="presentations-grid">
+            {presentations.map((presentation) => (
+              <div key={presentation.metadata.id} className="presentation-card">
+                <div className="card-header">
+                  <div className="presentation-info">
+                    <h3 className="presentation-name">{presentation.metadata.name}</h3>
+                    {presentation.metadata.description && (
+                      <p className="presentation-description">
+                        {presentation.metadata.description}
+                      </p>
+                    )}
+                  </div>
+                  <div className="presentation-actions">
+                    <button
+                      type="button"
+                      className="action-icon"
+                      onClick={() => handleEditPresentation(presentation.metadata.id, presentation.slides.length)}
+                      title="Edit presentation"
+                    >
+                      ✏️
+                    </button>
+                    <button
+                      type="button"
+                      className="action-icon"
+                      onClick={() => handleViewPresentation(presentation.metadata.id, presentation.slides.length)}
+                      title="View presentation"
+                    >
+                      👁️
+                    </button>
+                    <button
+                      type="button"
+                      className="action-icon delete"
+                      onClick={() => handleDeletePresentation(presentation.metadata.id, presentation.metadata.name)}
+                      disabled={deleting === presentation.metadata.id}
+                      title="Delete presentation"
+                    >
+                      {deleting === presentation.metadata.id ? '⏳' : '🗑️'}
+                    </button>
+                  </div>
+                </div>
+
+                <div className="card-content">
+                  <div className="presentation-stats">
+                    <div className="stat-item">
+                      <span className="stat-label">Theme</span>
+                      <span className="stat-value theme-name">{presentation.metadata.theme}</span>
+                    </div>
+                    <div className="stat-item">
+                      <span className="stat-label">Slides</span>
+                      <span className="stat-value slides-count">
+                        {presentation.slides.length} slide{presentation.slides.length !== 1 ? 's' : ''}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="presentation-meta">
+                    <div className="meta-item">
+                      <span className="meta-label">Created</span>
+                      <span className="meta-value">{formatDate(presentation.metadata.createdAt)}</span>
+                    </div>
+                    {presentation.metadata.updatedAt !== presentation.metadata.createdAt && (
+                      <div className="meta-item">
+                        <span className="meta-label">Updated</span>
+                        <span className="meta-value">{formatDate(presentation.metadata.updatedAt)}</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className="card-footer">
+                  <button
+                    type="button"
+                    className="card-action primary"
+                    onClick={() => handleEditPresentation(presentation.metadata.id, presentation.slides.length)}
+                  >
+                    Edit
+                  </button>
+                  <button
+                    type="button"
+                    className="card-action secondary"
+                    onClick={() => handleViewPresentation(presentation.metadata.id, presentation.slides.length)}
+                  >
+                    View
+                  </button>
+                  {presentation.slides.length > 0 && (
+                    <button
+                      type="button"
+                      className="card-action secondary"
+                      onClick={() => {
+                        // TODO: Implement presentation mode
+                        alert('Presentation mode coming soon!');
+                      }}
+                    >
+                      Present
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {presentations.length > 0 && (
+          <div className="list-footer">
+            <div className="summary-stats">
+              <p>
+                {presentations.length} presentation{presentations.length !== 1 ? 's' : ''} • {' '}
+                {presentations.reduce((total, p) => total + p.slides.length, 0)} total slides
+              </p>
+            </div>
+            <div className="footer-actions">
+              <button 
+                onClick={loadPresentations}
+                className="action-button secondary"
+              >
+                Refresh
+              </button>
+              <Link 
+                to="/presentations/new" 
+                className="action-button primary"
+              >
+                Create New
+              </Link>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/presentations/SlideEditor.css b/src/components/presentations/SlideEditor.css
new file mode 100644
index 0000000..9ec0673
--- /dev/null
+++ b/src/components/presentations/SlideEditor.css
@@ -0,0 +1,568 @@
+.slide-editor {
+  min-height: 100vh;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.slide-editor-header {
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.editor-info {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  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.5rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.editor-title p {
+  margin: 0.25rem 0 0 0;
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+.editor-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-shrink: 0;
+}
+
+.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: 2rem;
+}
+
+.step-header h2 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.step-header p {
+  margin: 0;
+  color: #64748b;
+  font-size: 1rem;
+}
+
+/* Layout Selection */
+.layout-selection {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.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 {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.editing-layout {
+  display: grid;
+  grid-template-columns: 1fr 400px;
+  gap: 2rem;
+  align-items: start;
+}
+
+.content-form {
+  background: white;
+  border-radius: 0.75rem;
+  border: 1px solid #e2e8f0;
+  padding: 2rem;
+}
+
+.content-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.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;
+  gap: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e5e7eb;
+  margin-top: 1rem;
+  justify-content: flex-end;
+}
+
+.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: 1.5rem;
+  position: sticky;
+  top: 2rem;
+}
+
+.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;
+}
+
+.slide-preview-wrapper {
+  background: #f8fafc;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  position: relative;
+}
+
+.slide-preview {
+  max-width: 100%;
+  transform: scale(0.6);
+  transform-origin: center;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  background: white;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
+}
+
+.preview-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+}
+
+.layout-name {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.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) {
+  .editing-layout {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  
+  .content-preview {
+    position: relative;
+    top: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .slide-editor-header {
+    padding: 1rem;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+  
+  .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;
+  }
+  
+  .preview-container {
+    min-height: 200px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/presentations/SlideEditor.tsx b/src/components/presentations/SlideEditor.tsx
new file mode 100644
index 0000000..ce334a3
--- /dev/null
+++ b/src/components/presentations/SlideEditor.tsx
@@ -0,0 +1,434 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import type { Presentation, SlideContent } from '../../types/presentation';
+import type { Theme, SlideLayout } from '../../types/theme';
+import { getPresentationById, updatePresentation } from '../../utils/presentationStorage';
+import { getTheme } from '../../themes';
+import { renderTemplateWithSampleData } from '../../utils/templateRenderer';
+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);
+  
+  // 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');
+  
+  const isEditingExisting = slideId !== 'new';
+  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 || '');
+              setCurrentStep('content');
+            }
+          } 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';
+      let 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);
+    
+    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');
+      console.error('Error saving slide:', 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">
+          {currentStep === 'content' && (
+            <button 
+              type="button"
+              className="action-button secondary"
+              onClick={() => setCurrentStep('layout')}
+            >
+              Change Layout
+            </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: 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 && (
+          <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 === '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={slot.type === 'image' ? 'url' : 'text'}
+                          value={slideContent[slot.id] || ''}
+                          onChange={(e) => updateSlotContent(slot.id, e.target.value)}
+                          placeholder={slot.placeholder || `Enter ${slot.id}`}
+                          className="field-input"
+                        />
+                      )}
+                      
+                      {slot.placeholder && (
+                        <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">
+                    <button 
+                      type="button"
+                      className="action-button secondary"
+                      onClick={() => setCurrentStep('layout')}
+                    >
+                      Change Layout
+                    </button>
+                    <button 
+                      type="button"
+                      className="action-button primary"
+                      onClick={saveSlide}
+                      disabled={saving}
+                    >
+                      {saving ? 'Saving...' : (isEditingExisting ? 'Update Slide' : 'Save Slide')}
+                    </button>
+                  </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-preview"
+                      dangerouslySetInnerHTML={{
+                        __html: renderTemplateWithContent(selectedLayout, slideContent)
+                      }}
+                    />
+                  </div>
+                  <div className="preview-meta">
+                    <span className="layout-name">{selectedLayout.name}</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>
+    </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/ThemeSelector.css b/src/components/presentations/ThemeSelector.css
new file mode 100644
index 0000000..38df2ae
--- /dev/null
+++ b/src/components/presentations/ThemeSelector.css
@@ -0,0 +1,204 @@
+.theme-selector {
+  width: 100%;
+}
+
+.themes-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.5rem;
+}
+
+.theme-card {
+  background: white;
+  border: 2px solid #e2e8f0;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.theme-card:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.theme-card.selected {
+  border-color: #22c55e;
+  box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.2);
+}
+
+.theme-preview {
+  position: relative;
+  height: 120px;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.color-preview-strip {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.color-swatch {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 3px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.no-colors {
+  color: #9ca3af;
+  font-size: 0.875rem;
+  text-align: center;
+  font-style: italic;
+}
+
+.selection-indicator {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 10;
+}
+
+.theme-info {
+  padding: 1.5rem;
+}
+
+.theme-name {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.theme-description {
+  margin: 0 0 1rem 0;
+  color: #64748b;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.theme-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.theme-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.layouts-count {
+  font-weight: 500;
+  color: #475569;
+}
+
+.theme-author {
+  color: #6b7280;
+}
+
+.theme-version {
+  color: #9ca3af;
+  font-family: 'Courier New', monospace;
+}
+
+.theme-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.preview-link {
+  color: #3b82f6;
+  text-decoration: none;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  transition: background-color 0.2s ease;
+}
+
+.preview-link:hover {
+  background: #eff6ff;
+  text-decoration: none;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 3rem;
+  color: #6b7280;
+}
+
+.empty-state h3 {
+  margin: 0 0 0.5rem 0;
+  color: #374151;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .themes-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .theme-card {
+    min-width: 0;
+  }
+  
+  .theme-preview {
+    height: 100px;
+    padding: 0.75rem;
+  }
+  
+  .color-swatch {
+    width: 36px;
+    height: 36px;
+  }
+  
+  .theme-info {
+    padding: 1rem;
+  }
+  
+  .theme-meta {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+}
+
+/* Focus states for accessibility */
+.theme-card:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Animation for selection */
+@keyframes selectPulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.theme-card.selected .selection-indicator {
+  animation: selectPulse 0.3s ease-out;
+}
\ No newline at end of file
diff --git a/src/components/presentations/ThemeSelector.tsx b/src/components/presentations/ThemeSelector.tsx
new file mode 100644
index 0000000..5664287
--- /dev/null
+++ b/src/components/presentations/ThemeSelector.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import type { Theme } from '../../types/theme';
+import './ThemeSelector.css';
+
+interface ThemeSelectorProps {
+  themes: Theme[];
+  selectedTheme: Theme | null;
+  onThemeSelect: (theme: Theme) => void;
+}
+
+export const ThemeSelector: React.FC<ThemeSelectorProps> = ({
+  themes,
+  selectedTheme,
+  onThemeSelect
+}) => {
+  return (
+    <div className="theme-selector">
+      <div className="themes-grid">
+        {themes.map((theme) => (
+          <div
+            key={theme.id}
+            className={`theme-card ${selectedTheme?.id === theme.id ? 'selected' : ''}`}
+            onClick={() => onThemeSelect(theme)}
+          >
+            <div className="theme-preview">
+              {/* Color palette preview */}
+              <div className="color-preview-strip">
+                {theme.variables && Object.entries(theme.variables)
+                  .filter(([_, value]) => value.startsWith('#') || value.includes('rgb') || value.includes('hsl'))
+                  .slice(0, 4)
+                  .map(([key, value]) => (
+                    <div
+                      key={key}
+                      className="color-swatch"
+                      style={{ backgroundColor: value }}
+                      title={`--${key}: ${value}`}
+                    />
+                  ))
+                }
+                {(!theme.variables || Object.entries(theme.variables).filter(([_, value]) => 
+                  value.startsWith('#') || value.includes('rgb') || value.includes('hsl')
+                ).length === 0) && (
+                  <div className="no-colors">No colors defined</div>
+                )}
+              </div>
+              
+              {/* Selection indicator */}
+              {selectedTheme?.id === theme.id && (
+                <div className="selection-indicator">
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="12" r="12" fill="#22c55e"/>
+                    <path 
+                      d="m9 12 2 2 4-4" 
+                      stroke="white" 
+                      strokeWidth="2" 
+                      strokeLinecap="round" 
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+              )}
+            </div>
+            
+            <div className="theme-info">
+              <h3 className="theme-name">{theme.name}</h3>
+              <p className="theme-description">{theme.description}</p>
+              
+              <div className="theme-meta">
+                <div className="theme-stats">
+                  <span className="layouts-count">
+                    {theme.layouts.length} layout{theme.layouts.length !== 1 ? 's' : ''}
+                  </span>
+                  {theme.author && (
+                    <span className="theme-author">by {theme.author}</span>
+                  )}
+                  {theme.version && (
+                    <span className="theme-version">v{theme.version}</span>
+                  )}
+                </div>
+                
+                <div className="theme-actions">
+                  <Link 
+                    to={`/themes/${theme.id}`}
+                    className="preview-link"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    Preview →
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      
+      {themes.length === 0 && (
+        <div className="empty-state">
+          <h3>No Themes Available</h3>
+          <p>No themes could be loaded. Please check your theme configuration.</p>
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/presentations/index.ts b/src/components/presentations/index.ts
new file mode 100644
index 0000000..0abcb16
--- /dev/null
+++ b/src/components/presentations/index.ts
@@ -0,0 +1,6 @@
+export { NewPresentationPage } from './NewPresentationPage';
+export { PresentationViewer } from './PresentationViewer';
+export { PresentationEditor } from './PresentationEditor';
+export { SlideEditor } from './SlideEditor';
+export { ThemeSelector } from './ThemeSelector';
+export { PresentationsList } from './PresentationsList';
\ No newline at end of file
diff --git a/src/styles/aspectRatios.css b/src/styles/aspectRatios.css
new file mode 100644
index 0000000..0fcb99a
--- /dev/null
+++ b/src/styles/aspectRatios.css
@@ -0,0 +1,119 @@
+/**
+ * Global Aspect Ratio CSS Classes for Presentation Theme Engine
+ * These classes are automatically applied to slides based on presentation settings
+ */
+
+/* Base slide container - all themes should use this */
+.slide-container {
+  position: relative;
+  margin: 0 auto;
+  background: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 16:9 Widescreen - Modern standard */
+.slide-container.aspect-16-9 {
+  aspect-ratio: 16 / 9;
+  max-width: 1920px;
+  width: 100%;
+}
+
+/* 4:3 Standard - Classic format */
+.slide-container.aspect-4-3 {
+  aspect-ratio: 4 / 3;
+  max-width: 1024px;
+  width: 100%;
+}
+
+/* 16:10 Wide - Professional displays */
+.slide-container.aspect-16-10 {
+  aspect-ratio: 16 / 10;
+  max-width: 1920px;
+  width: 100%;
+}
+
+/* Responsive scaling for different contexts */
+
+/* Preview mode - smaller scale for editing */
+.slide-preview .slide-container {
+  max-width: 800px;
+}
+
+/* Thumbnail mode - very small scale for sidebar */
+.slide-thumbnail .slide-container {
+  max-width: 200px;
+}
+
+/* Presentation mode - full screen */
+.presentation-mode .slide-container {
+  max-width: 100vw;
+  max-height: 100vh;
+  width: auto;
+  height: auto;
+}
+
+/* Ensure content fits within aspect ratio */
+.slide-container.aspect-16-9 .slide-content {
+  width: 100%;
+  height: 100%;
+  padding: 5.56%; /* 1920/1080 ratio padding */
+  box-sizing: border-box;
+}
+
+.slide-container.aspect-4-3 .slide-content {
+  width: 100%;
+  height: 100%;
+  padding: 6.25%; /* 1024/768 ratio padding */
+  box-sizing: border-box;
+}
+
+.slide-container.aspect-16-10 .slide-content {
+  width: 100%;
+  height: 100%;
+  padding: 5%; /* 1920/1200 ratio padding */
+  box-sizing: border-box;
+}
+
+/* Layout slots should respect aspect ratio boundaries */
+.slide-container .layout-slot {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Print styles - maintain aspect ratios */
+@media print {
+  .slide-container {
+    page-break-inside: avoid;
+    box-shadow: none;
+    border: 1px solid #000;
+  }
+  
+  .slide-container.aspect-16-9 {
+    width: 10in;
+    height: 5.625in;
+  }
+  
+  .slide-container.aspect-4-3 {
+    width: 10in;
+    height: 7.5in;
+  }
+  
+  .slide-container.aspect-16-10 {
+    width: 10in;
+    height: 6.25in;
+  }
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .slide-container {
+    max-width: 100%;
+    margin: 0;
+  }
+  
+  .slide-container .slide-content {
+    padding: 4%;
+  }
+}
\ No newline at end of file
diff --git a/src/types/presentation.ts b/src/types/presentation.ts
new file mode 100644
index 0000000..e24c05c
--- /dev/null
+++ b/src/types/presentation.ts
@@ -0,0 +1,71 @@
+export type AspectRatio = '16:9' | '4:3' | '16:10';
+
+export interface AspectRatioConfig {
+  id: AspectRatio;
+  name: string;
+  description: string;
+  width: number;
+  height: number;
+  cssClass: string;
+  common: boolean;
+}
+
+export const ASPECT_RATIOS: AspectRatioConfig[] = [
+  {
+    id: '16:9',
+    name: 'Widescreen (16:9)',
+    description: 'Modern standard for HD displays and projectors',
+    width: 1920,
+    height: 1080,
+    cssClass: 'aspect-16-9',
+    common: true
+  },
+  {
+    id: '4:3',
+    name: 'Standard (4:3)', 
+    description: 'Classic presentation format, good for older projectors',
+    width: 1024,
+    height: 768,
+    cssClass: 'aspect-4-3',
+    common: true
+  },
+  {
+    id: '16:10',
+    name: 'Wide (16:10)',
+    description: 'Popular for laptops and some professional displays',
+    width: 1920,
+    height: 1200,
+    cssClass: 'aspect-16-10',
+    common: true
+  }
+];
+
+export interface PresentationMetadata {
+  id: string;
+  name: string;
+  description: string;
+  theme: string;
+  aspectRatio: AspectRatio;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface SlideContent {
+  id: string;
+  layoutId: string;
+  content: Record<string, string>; // slot_id -> content mapping
+  notes?: string;
+  order: number;
+}
+
+export interface Presentation {
+  metadata: PresentationMetadata;
+  slides: SlideContent[];
+}
+
+export interface CreatePresentationRequest {
+  name: string;
+  description: string;
+  theme: string;
+  aspectRatio: AspectRatio;
+}
\ No newline at end of file
diff --git a/src/utils/presentationStorage.ts b/src/utils/presentationStorage.ts
new file mode 100644
index 0000000..b527b4f
--- /dev/null
+++ b/src/utils/presentationStorage.ts
@@ -0,0 +1,214 @@
+import type { Presentation, PresentationMetadata, CreatePresentationRequest } from '../types/presentation';
+
+const DB_NAME = 'SlideshareDB';
+const DB_VERSION = 1;
+const PRESENTATIONS_STORE = 'presentations';
+
+/**
+ * Initialize IndexedDB database
+ */
+export const initializeDB = (): Promise<IDBDatabase> => {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    
+    request.onerror = () => {
+      reject(new Error('Failed to open IndexedDB database'));
+    };
+    
+    request.onsuccess = () => {
+      resolve(request.result);
+    };
+    
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      
+      // Create presentations object store
+      if (!db.objectStoreNames.contains(PRESENTATIONS_STORE)) {
+        const store = db.createObjectStore(PRESENTATIONS_STORE, { keyPath: 'metadata.id' });
+        
+        // Create indexes for efficient querying
+        store.createIndex('name', 'metadata.name', { unique: false });
+        store.createIndex('theme', 'metadata.theme', { unique: false });
+        store.createIndex('createdAt', 'metadata.createdAt', { unique: false });
+        store.createIndex('updatedAt', 'metadata.updatedAt', { unique: false });
+      }
+    };
+  });
+};
+
+/**
+ * Generate a unique ID for presentations
+ */
+const generatePresentationId = (): string => {
+  return `presentation_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+};
+
+/**
+ * Create a new presentation
+ */
+export const createPresentation = async (request: CreatePresentationRequest): Promise<Presentation> => {
+  const db = await initializeDB();
+  
+  const now = new Date().toISOString();
+  const presentation: Presentation = {
+    metadata: {
+      id: generatePresentationId(),
+      name: request.name,
+      description: request.description,
+      theme: request.theme,
+      aspectRatio: request.aspectRatio,
+      createdAt: now,
+      updatedAt: now
+    },
+    slides: []
+  };
+  
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction([PRESENTATIONS_STORE], 'readwrite');
+    const store = transaction.objectStore(PRESENTATIONS_STORE);
+    
+    const request = store.add(presentation);
+    
+    request.onerror = () => {
+      reject(new Error('Failed to create presentation'));
+    };
+    
+    request.onsuccess = () => {
+      resolve(presentation);
+    };
+    
+    transaction.onerror = () => {
+      reject(new Error('Transaction failed while creating presentation'));
+    };
+  });
+};
+
+/**
+ * Get all presentations
+ */
+export const getAllPresentations = async (): Promise<Presentation[]> => {
+  const db = await initializeDB();
+  
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction([PRESENTATIONS_STORE], 'readonly');
+    const store = transaction.objectStore(PRESENTATIONS_STORE);
+    
+    const request = store.getAll();
+    
+    request.onerror = () => {
+      reject(new Error('Failed to retrieve presentations'));
+    };
+    
+    request.onsuccess = () => {
+      // Sort by creation date (newest first)
+      const presentations = request.result.sort((a: Presentation, b: Presentation) => 
+        new Date(b.metadata.createdAt).getTime() - new Date(a.metadata.createdAt).getTime()
+      );
+      resolve(presentations);
+    };
+  });
+};
+
+/**
+ * Get a presentation by ID
+ */
+export const getPresentationById = async (id: string): Promise<Presentation | null> => {
+  const db = await initializeDB();
+  
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction([PRESENTATIONS_STORE], 'readonly');
+    const store = transaction.objectStore(PRESENTATIONS_STORE);
+    
+    const request = store.get(id);
+    
+    request.onerror = () => {
+      reject(new Error('Failed to retrieve presentation'));
+    };
+    
+    request.onsuccess = () => {
+      resolve(request.result || null);
+    };
+  });
+};
+
+/**
+ * Update a presentation
+ */
+export const updatePresentation = async (presentation: Presentation): Promise<Presentation> => {
+  const db = await initializeDB();
+  
+  // Update the updatedAt timestamp
+  presentation.metadata.updatedAt = new Date().toISOString();
+  
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction([PRESENTATIONS_STORE], 'readwrite');
+    const store = transaction.objectStore(PRESENTATIONS_STORE);
+    
+    const request = store.put(presentation);
+    
+    request.onerror = () => {
+      reject(new Error('Failed to update presentation'));
+    };
+    
+    request.onsuccess = () => {
+      resolve(presentation);
+    };
+  });
+};
+
+/**
+ * Delete a presentation
+ */
+export const deletePresentation = async (id: string): Promise<void> => {
+  const db = await initializeDB();
+  
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction([PRESENTATIONS_STORE], 'readwrite');
+    const store = transaction.objectStore(PRESENTATIONS_STORE);
+    
+    const request = store.delete(id);
+    
+    request.onerror = () => {
+      reject(new Error('Failed to delete presentation'));
+    };
+    
+    request.onsuccess = () => {
+      resolve();
+    };
+  });
+};
+
+/**
+ * Get presentations by theme
+ */
+export const getPresentationsByTheme = async (theme: string): Promise<Presentation[]> => {
+  const db = await initializeDB();
+  
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction([PRESENTATIONS_STORE], 'readonly');
+    const store = transaction.objectStore(PRESENTATIONS_STORE);
+    const index = store.index('theme');
+    
+    const request = index.getAll(theme);
+    
+    request.onerror = () => {
+      reject(new Error('Failed to retrieve presentations by theme'));
+    };
+    
+    request.onsuccess = () => {
+      // Sort by creation date (newest first)
+      const presentations = request.result.sort((a: Presentation, b: Presentation) => 
+        new Date(b.metadata.createdAt).getTime() - new Date(a.metadata.createdAt).getTime()
+      );
+      resolve(presentations);
+    };
+  });
+};
+
+/**
+ * Get presentation metadata only (for listing views)
+ */
+export const getPresentationMetadata = async (): Promise<PresentationMetadata[]> => {
+  const presentations = await getAllPresentations();
+  return presentations.map(p => p.metadata);
+};
\ No newline at end of file
diff --git a/src/utils/templateRenderer.ts b/src/utils/templateRenderer.ts
index 1bacf54..301c4ea 100644
--- a/src/utils/templateRenderer.ts
+++ b/src/utils/templateRenderer.ts
@@ -23,6 +23,45 @@ const createImageSVG = (slotName: string, width: number = 400, height: number =
   return `data:image/svg+xml,${encodedSVG}`;
 };
 
+/**
+ * Sample content templates for more realistic previews
+ */
+const SAMPLE_CONTENT = {
+  title: [
+    'Quarterly Sales Review',
+    'Project Roadmap 2024',
+    'Market Analysis Report',
+    'New Product Launch',
+    'Team Performance Update'
+  ],
+  subtitle: [
+    'Q4 Results and Future Outlook',
+    'Strategic Planning and Key Milestones',
+    'Customer Insights and Trends',
+    'Innovation and Growth Strategy',
+    'Achievements and Next Steps'
+  ],
+  heading: [
+    'Key Findings',
+    'Next Steps',
+    'Executive Summary',
+    'Strategic Goals',
+    'Market Opportunities'
+  ],
+  text: [
+    'This comprehensive analysis provides insights into market trends and customer behavior patterns that will shape our strategic decisions moving forward.',
+    'Our team has achieved significant milestones this quarter, demonstrating strong execution and commitment to delivering exceptional results.',
+    'The data shows promising growth opportunities in emerging markets, with particular strength in the technology and healthcare sectors.',
+    'Customer feedback indicates high satisfaction levels with our current offerings, while highlighting areas for continued innovation.',
+    'Looking ahead, we will focus on expanding our market presence while maintaining our commitment to quality and customer excellence.'
+  ],
+  list: [
+    '• Increase market share by 15%\n• Launch 3 new products\n• Expand to 5 new regions',
+    '• Improve customer satisfaction\n• Reduce operational costs\n• Enhance digital capabilities',
+    '• Strengthen brand recognition\n• Optimize supply chain\n• Invest in talent development'
+  ]
+};
+
 /**
  * Generates sample data for a slot based on its configuration
  */
@@ -43,10 +82,20 @@ export const generateSampleDataForSlot = (slot: SlotConfig): string => {
       return createImageSVG(slotDisplayName);
       
     case 'title':
+      const titleSamples = SAMPLE_CONTENT.title;
+      return titleSamples[Math.floor(Math.random() * titleSamples.length)];
+      
     case 'subtitle':
-    case 'text':
+      const subtitleSamples = SAMPLE_CONTENT.subtitle;
+      return subtitleSamples[Math.floor(Math.random() * subtitleSamples.length)];
+      
     case 'heading':
-      return slotDisplayName;
+      const headingSamples = SAMPLE_CONTENT.heading;
+      return headingSamples[Math.floor(Math.random() * headingSamples.length)];
+      
+    case 'text':
+      const textSamples = SAMPLE_CONTENT.text;
+      return textSamples[Math.floor(Math.random() * textSamples.length)];
       
     case 'video':
       return createImageSVG(`${slotDisplayName} (Video)`, 640, 360);
@@ -55,7 +104,8 @@ export const generateSampleDataForSlot = (slot: SlotConfig): string => {
       return `[${slotDisplayName} Audio]`;
       
     case 'list':
-      return `• ${slotDisplayName} Item 1\n• ${slotDisplayName} Item 2\n• ${slotDisplayName} Item 3`;
+      const listSamples = SAMPLE_CONTENT.list;
+      return listSamples[Math.floor(Math.random() * listSamples.length)];
       
     case 'code':
       return `// ${slotDisplayName}\nfunction ${id.replace(/-/g, '')}() {\n  return "${slotDisplayName}";\n}`;