diff --git a/app/assets/javascripts/collection_wizard.js b/app/assets/javascripts/collection_wizard.js
new file mode 100644
index 00000000..d56bf30a
--- /dev/null
+++ b/app/assets/javascripts/collection_wizard.js
@@ -0,0 +1,403 @@
+// Collection Creation Wizard Controller
+document.addEventListener('DOMContentLoaded', function() {
+  let currentStep = 1;
+  const totalSteps = 4;
+  
+  // Initialize wizard
+  initializeWizard();
+  
+  function initializeWizard() {
+    // Set up step navigation
+    setupStepNavigation();
+    
+    // Set up form interactions
+    setupFormInteractions();
+    
+    // Set up auto-save
+    setupAutoSave();
+    
+    // Set up content type selection
+    setupContentTypeSelection();
+    
+    // Set up theme selection
+    setupThemeSelection();
+    
+    // Initialize preview
+    updatePreview();
+    
+    // Update progress
+    updateProgress();
+  }
+  
+  function setupStepNavigation() {
+    // Step navigation buttons
+    document.querySelectorAll('.step-nav').forEach(button => {
+      button.addEventListener('click', function() {
+        const targetStep = parseInt(this.dataset.step);
+        if (targetStep <= getCompletedSteps() + 1) {
+          goToStep(targetStep);
+        }
+      });
+    });
+    
+    // Next/Previous buttons
+    document.querySelectorAll('.next-step').forEach(button => {
+      button.addEventListener('click', function() {
+        if (validateCurrentStep()) {
+          nextStep();
+        }
+      });
+    });
+    
+    document.querySelectorAll('.prev-step').forEach(button => {
+      button.addEventListener('click', function() {
+        previousStep();
+      });
+    });
+  }
+  
+  function setupFormInteractions() {
+    // Real-time form validation and preview updates
+    const formInputs = document.querySelectorAll('#collection-form input, #collection-form textarea, #collection-form select');
+    
+    formInputs.forEach(input => {
+      input.addEventListener('input', function() {
+        updatePreview();
+        validateCurrentStep();
+        markAsModified();
+      });
+      
+      input.addEventListener('change', function() {
+        updatePreview();
+        validateCurrentStep();
+        markAsModified();
+      });
+    });
+    
+    // Character counter for description
+    const descriptionField = document.querySelector('textarea[name="page_collection[description]"]');
+    const charCounter = document.getElementById('char-count');
+    
+    if (descriptionField && charCounter) {
+      descriptionField.addEventListener('input', function() {
+        updateCharCount();
+      });
+      updateCharCount();
+    }
+    
+    function updateCharCount() {
+      const count = descriptionField.value.length;
+      charCounter.textContent = `${count} / 500`;
+      
+      if (count > 450) {
+        charCounter.classList.add('text-red-600');
+        charCounter.classList.remove('text-amber-600');
+      } else if (count > 400) {
+        charCounter.classList.add('text-amber-600');
+        charCounter.classList.remove('text-red-600');
+      } else {
+        charCounter.classList.remove('text-amber-600', 'text-red-600');
+      }
+    }
+  }
+  
+  function setupAutoSave() {
+    let saveTimeout;
+    let isModified = false;
+    
+    window.markAsModified = function() {
+      isModified = true;
+      updateSaveStatus('saving');
+      
+      clearTimeout(saveTimeout);
+      saveTimeout = setTimeout(() => {
+        if (isModified) {
+          saveDraft();
+        }
+      }, 2000);
+    };
+    
+    function saveDraft() {
+      // Simulate auto-save (in a real app, this would make an AJAX request)
+      updateSaveStatus('saving');
+      
+      setTimeout(() => {
+        updateSaveStatus('saved');
+        isModified = false;
+      }, 1000);
+    }
+    
+    function updateSaveStatus(status) {
+      const saveStatus = document.getElementById('save-status');
+      const saveIndicator = document.querySelector('.auto-save-indicator');
+      
+      if (saveStatus && saveIndicator) {
+        saveIndicator.className = `auto-save-indicator ${status}`;
+        
+        switch(status) {
+          case 'saving':
+            saveStatus.textContent = 'Saving changes...';
+            break;
+          case 'saved':
+            saveStatus.textContent = 'All changes saved';
+            break;
+          case 'error':
+            saveStatus.textContent = 'Error saving changes';
+            break;
+        }
+      }
+    }
+    
+    // Manual save draft button
+    const saveDraftButton = document.getElementById('save-draft');
+    if (saveDraftButton) {
+      saveDraftButton.addEventListener('click', function() {
+        saveDraft();
+      });
+    }
+  }
+  
+  function setupContentTypeSelection() {
+    const selectAllBtn = document.getElementById('select-all-types');
+    const selectNoneBtn = document.getElementById('select-none-types');
+    const selectCommonBtn = document.getElementById('select-common-types');
+    const checkboxes = document.querySelectorAll('.content-type-checkbox');
+    
+    if (selectAllBtn) {
+      selectAllBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        checkboxes.forEach(checkbox => {
+          checkbox.checked = true;
+          updateCheckboxUI(checkbox);
+        });
+        updatePreview();
+        markAsModified();
+      });
+    }
+    
+    if (selectNoneBtn) {
+      selectNoneBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        checkboxes.forEach(checkbox => {
+          checkbox.checked = false;
+          updateCheckboxUI(checkbox);
+        });
+        updatePreview();
+        markAsModified();
+      });
+    }
+    
+    if (selectCommonBtn) {
+      selectCommonBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        checkboxes.forEach(checkbox => {
+          checkbox.checked = checkbox.dataset.common === 'true';
+          updateCheckboxUI(checkbox);
+        });
+        updatePreview();
+        markAsModified();
+      });
+    }
+    
+    // Update checkbox UI when changed
+    checkboxes.forEach(checkbox => {
+      checkbox.addEventListener('change', function() {
+        updateCheckboxUI(this);
+        updatePreview();
+        markAsModified();
+      });
+      // Initialize UI
+      updateCheckboxUI(checkbox);
+    });
+  }
+  
+  function updateCheckboxUI(checkbox) {
+    const label = checkbox.closest('label');
+    const customCheckbox = label.querySelector('.checkbox-custom');
+    const checkIcon = label.querySelector('.check-icon');
+    
+    if (checkbox.checked) {
+      customCheckbox.classList.add('bg-blue-500', 'border-blue-500');
+      customCheckbox.classList.remove('border-gray-300');
+      checkIcon.classList.remove('opacity-0');
+      checkIcon.classList.add('opacity-100');
+      label.classList.add('ring-2', 'ring-blue-500', 'ring-opacity-20');
+    } else {
+      customCheckbox.classList.remove('bg-blue-500', 'border-blue-500');
+      customCheckbox.classList.add('border-gray-300');
+      checkIcon.classList.add('opacity-0');
+      checkIcon.classList.remove('opacity-100');
+      label.classList.remove('ring-2', 'ring-blue-500', 'ring-opacity-20');
+    }
+  }
+  
+  function setupThemeSelection() {
+    const themeOptions = document.querySelectorAll('.theme-option');
+    
+    themeOptions.forEach(option => {
+      option.addEventListener('click', function() {
+        // Remove active class from all options
+        themeOptions.forEach(opt => opt.classList.remove('active'));
+        
+        // Add active class to clicked option
+        this.classList.add('active');
+        
+        // Update preview theme
+        updatePreviewTheme(this.dataset.theme);
+        markAsModified();
+      });
+    });
+  }
+  
+  function updatePreviewTheme(theme) {
+    const previewHeader = document.getElementById('preview-header');
+    if (!previewHeader) return;
+    
+    // Remove existing theme classes
+    previewHeader.className = previewHeader.className.replace(/from-\w+-\d+|to-\w+-\d+/g, '');
+    
+    // Apply new theme
+    switch(theme) {
+      case 'warm':
+        previewHeader.classList.add('from-orange-500', 'to-red-600');
+        break;
+      case 'nature':
+        previewHeader.classList.add('from-green-500', 'to-emerald-600');
+        break;
+      case 'monochrome':
+        previewHeader.classList.add('from-gray-500', 'to-gray-800');
+        break;
+      default:
+        previewHeader.classList.add('from-blue-500', 'to-purple-600');
+    }
+  }
+  
+  function goToStep(stepNumber) {
+    if (stepNumber < 1 || stepNumber > totalSteps) return;
+    
+    // Hide all steps
+    document.querySelectorAll('.form-step').forEach(step => {
+      step.classList.remove('active');
+    });
+    
+    // Show target step
+    const targetStep = document.getElementById(`step-${stepNumber}`);
+    if (targetStep) {
+      targetStep.classList.add('active');
+    }
+    
+    // Update step navigation
+    document.querySelectorAll('.step-nav').forEach(nav => {
+      nav.classList.remove('active', 'completed');
+    });
+    
+    // Mark completed steps
+    for (let i = 1; i < stepNumber; i++) {
+      const nav = document.querySelector(`[data-step="${i}"]`);
+      if (nav) nav.classList.add('completed');
+    }
+    
+    // Mark current step as active
+    const currentNav = document.querySelector(`[data-step="${stepNumber}"]`);
+    if (currentNav) currentNav.classList.add('active');
+    
+    currentStep = stepNumber;
+    updateProgress();
+  }
+  
+  function nextStep() {
+    if (currentStep < totalSteps) {
+      goToStep(currentStep + 1);
+    }
+  }
+  
+  function previousStep() {
+    if (currentStep > 1) {
+      goToStep(currentStep - 1);
+    }
+  }
+  
+  function validateCurrentStep() {
+    switch(currentStep) {
+      case 1:
+        return validateBasicInfo();
+      case 2:
+        return true; // Visual design is optional
+      case 3:
+        return validateContentTypes();
+      case 4:
+        return validateSettings();
+      default:
+        return true;
+    }
+  }
+  
+  function validateBasicInfo() {
+    const titleInput = document.querySelector('input[name="page_collection[title]"]');
+    return titleInput && titleInput.value.trim().length > 0;
+  }
+  
+  function validateContentTypes() {
+    const checkboxes = document.querySelectorAll('.content-type-checkbox');
+    return Array.from(checkboxes).some(checkbox => checkbox.checked);
+  }
+  
+  function validateSettings() {
+    const privacyRadios = document.querySelectorAll('input[name="page_collection[privacy]"]');
+    return Array.from(privacyRadios).some(radio => radio.checked);
+  }
+  
+  function getCompletedSteps() {
+    let completed = 0;
+    if (validateBasicInfo()) completed = Math.max(completed, 1);
+    if (validateContentTypes()) completed = Math.max(completed, 3);
+    if (validateSettings()) completed = Math.max(completed, 4);
+    return completed;
+  }
+  
+  function updateProgress() {
+    const progressBar = document.getElementById('progress-bar');
+    const progressText = document.getElementById('progress-text');
+    
+    if (progressBar && progressText) {
+      const progress = (currentStep / totalSteps) * 100;
+      progressBar.style.width = `${progress}%`;
+      progressText.textContent = `Step ${currentStep} of ${totalSteps}`;
+    }
+  }
+  
+  function updatePreview() {
+    if (window.updateCollectionPreview) {
+      window.updateCollectionPreview();
+    }
+  }
+  
+  // Submission toggle
+  const submissionToggle = document.querySelector('.submission-toggle');
+  if (submissionToggle) {
+    submissionToggle.addEventListener('change', function() {
+      updatePreview();
+      markAsModified();
+    });
+  }
+  
+  // Keyboard navigation
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'ArrowRight' && e.ctrlKey) {
+      e.preventDefault();
+      if (validateCurrentStep()) nextStep();
+    } else if (e.key === 'ArrowLeft' && e.ctrlKey) {
+      e.preventDefault();
+      previousStep();
+    }
+  });
+  
+  // Prevent accidental navigation away
+  window.addEventListener('beforeunload', function(e) {
+    const saveStatus = document.getElementById('save-status');
+    if (saveStatus && saveStatus.textContent.includes('Saving')) {
+      e.preventDefault();
+      e.returnValue = '';
+    }
+  });
+});
\ No newline at end of file
diff --git a/app/controllers/page_collections_controller.rb b/app/controllers/page_collections_controller.rb
index a1dcfc46..1b698b65 100644
--- a/app/controllers/page_collections_controller.rb
+++ b/app/controllers/page_collections_controller.rb
@@ -9,7 +9,7 @@ class PageCollectionsController < ApplicationController
 
   before_action :require_collection_ownership, only: [:edit, :update, :destroy]
 
-  layout 'tailwind', only: [:index, :show, :edit]
+  layout 'tailwind', only: [:index, :new, :show, :edit]
 
   # GET /page_collections
   def index
diff --git a/app/views/page_collections/_preview.html.erb b/app/views/page_collections/_preview.html.erb
new file mode 100644
index 00000000..59cf7d1b
--- /dev/null
+++ b/app/views/page_collections/_preview.html.erb
@@ -0,0 +1,283 @@
+<!-- Collection Preview -->
+<div id="preview-container" class="space-y-4">
+  
+  <!-- Header Preview -->
+  <div class="relative h-32 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg overflow-hidden" id="preview-header">
+    <div class="absolute inset-0 bg-black bg-opacity-20"></div>
+    <div class="absolute bottom-4 left-4 right-4 text-white">
+      <h1 id="preview-title" class="text-xl font-bold mb-1">
+        <%= page_collection.title.present? ? page_collection.title : "Collection Title" %>
+      </h1>
+      <p id="preview-subtitle" class="text-sm text-white/90">
+        <%= page_collection.subtitle.present? ? page_collection.subtitle : "Collection subtitle will appear here" %>
+      </p>
+    </div>
+  </div>
+  
+  <!-- Collection Info -->
+  <div class="bg-white rounded-lg border border-gray-200 p-4">
+    <div class="flex items-start justify-between mb-3">
+      <div class="flex items-center space-x-3">
+        <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
+          <i class="material-icons text-gray-400">collections</i>
+        </div>
+        <div>
+          <h2 id="preview-title-secondary" class="font-semibold text-gray-900">
+            <%= page_collection.title.present? ? page_collection.title : "My Collection" %>
+          </h2>
+          <p class="text-sm text-gray-500">by <%= current_user.display_name %></p>
+        </div>
+      </div>
+      
+      <div class="flex items-center space-x-2">
+        <span id="preview-privacy" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+          <i class="material-icons text-xs mr-1">public</i>
+          Public
+        </span>
+      </div>
+    </div>
+    
+    <div id="preview-description" class="text-sm text-gray-600 mb-4">
+      <%= page_collection.description.present? ? simple_format(page_collection.description) : "Your collection description will appear here. This is where you can explain what makes your collection special and what visitors can expect to find." %>
+    </div>
+    
+    <!-- Stats -->
+    <div class="flex items-center space-x-6 text-sm text-gray-500 border-t border-gray-100 pt-3">
+      <div class="flex items-center">
+        <i class="material-icons text-xs mr-1">library_books</i>
+        <span>0 items</span>
+      </div>
+      <div class="flex items-center">
+        <i class="material-icons text-xs mr-1">visibility</i>
+        <span>0 views</span>
+      </div>
+      <div class="flex items-center">
+        <i class="material-icons text-xs mr-1">schedule</i>
+        <span>Just created</span>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Content Types Preview -->
+  <div class="bg-white rounded-lg border border-gray-200 p-4">
+    <h3 class="font-medium text-gray-900 mb-3 flex items-center">
+      <i class="material-icons text-sm mr-2">category</i>
+      Accepted Content Types
+    </h3>
+    
+    <div id="preview-content-types" class="grid grid-cols-2 gap-2">
+      <!-- Default content types shown when none selected -->
+      <div class="content-type-preview flex items-center p-2 bg-gray-50 rounded text-sm">
+        <i class="material-icons text-blue-600 text-sm mr-2">person</i>
+        <span>Characters</span>
+      </div>
+      <div class="content-type-preview flex items-center p-2 bg-gray-50 rounded text-sm">
+        <i class="material-icons text-green-600 text-sm mr-2">place</i>
+        <span>Locations</span>
+      </div>
+      <div class="content-type-preview flex items-center p-2 bg-gray-50 rounded text-sm">
+        <i class="material-icons text-purple-600 text-sm mr-2">category</i>
+        <span>Items</span>
+      </div>
+      <div class="content-type-preview flex items-center p-2 bg-gray-50 rounded text-sm">
+        <i class="material-icons text-indigo-600 text-sm mr-2">public</i>
+        <span>Universes</span>
+      </div>
+    </div>
+    
+    <p class="text-xs text-gray-500 mt-3">
+      <i class="material-icons text-xs mr-1">info</i>
+      Users can submit these types of content to your collection
+    </p>
+  </div>
+  
+  <!-- Submission Status -->
+  <div id="preview-submissions" class="bg-white rounded-lg border border-gray-200 p-4">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center">
+        <i class="material-icons text-gray-400 text-sm mr-2">inbox</i>
+        <span class="font-medium text-gray-900">Community Contributions</span>
+      </div>
+      <span id="submissions-status" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+        <i class="material-icons text-xs mr-1">block</i>
+        Disabled
+      </span>
+    </div>
+    <p class="text-sm text-gray-600 mt-2">
+      <span id="submissions-description">This collection is not accepting submissions from other users.</span>
+    </p>
+  </div>
+  
+  <!-- Sample Content Preview -->
+  <div class="bg-white rounded-lg border border-gray-200 p-4">
+    <h3 class="font-medium text-gray-900 mb-3 flex items-center">
+      <i class="material-icons text-sm mr-2">grid_view</i>
+      Collection Content
+    </h3>
+    
+    <div class="space-y-3">
+      <!-- Empty state -->
+      <div class="text-center py-6 text-gray-500">
+        <i class="material-icons text-2xl mb-2">add_circle_outline</i>
+        <p class="text-sm">Content will appear here once you start adding items to your collection</p>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Mobile Preview Toggle -->
+  <div class="mobile-preview-note hidden text-xs text-gray-500 text-center p-2 bg-gray-50 rounded">
+    <i class="material-icons text-xs mr-1">smartphone</i>
+    Mobile preview - Collection will adapt to smaller screens
+  </div>
+</div>
+
+<!-- Preview JavaScript -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Preview update functions
+  window.updateCollectionPreview = function() {
+    // Update title
+    const titleInput = document.querySelector('input[name="page_collection[title]"]');
+    const previewTitle = document.getElementById('preview-title');
+    const previewTitleSecondary = document.getElementById('preview-title-secondary');
+    
+    if (titleInput && previewTitle && previewTitleSecondary) {
+      const title = titleInput.value || 'Collection Title';
+      previewTitle.textContent = title;
+      previewTitleSecondary.textContent = title;
+    }
+    
+    // Update subtitle
+    const subtitleInput = document.querySelector('input[name="page_collection[subtitle]"]');
+    const previewSubtitle = document.getElementById('preview-subtitle');
+    
+    if (subtitleInput && previewSubtitle) {
+      const subtitle = subtitleInput.value || 'Collection subtitle will appear here';
+      previewSubtitle.textContent = subtitle;
+    }
+    
+    // Update description
+    const descriptionInput = document.querySelector('textarea[name="page_collection[description]"]');
+    const previewDescription = document.getElementById('preview-description');
+    
+    if (descriptionInput && previewDescription) {
+      const description = descriptionInput.value || 'Your collection description will appear here. This is where you can explain what makes your collection special and what visitors can expect to find.';
+      previewDescription.textContent = description;
+    }
+    
+    // Update privacy
+    const privacyRadios = document.querySelectorAll('input[name="page_collection[privacy]"]');
+    const previewPrivacy = document.getElementById('preview-privacy');
+    
+    if (previewPrivacy) {
+      let selectedPrivacy = 'public';
+      privacyRadios.forEach(radio => {
+        if (radio.checked) {
+          selectedPrivacy = radio.value;
+        }
+      });
+      
+      if (selectedPrivacy === 'public') {
+        previewPrivacy.innerHTML = '<i class="material-icons text-xs mr-1">public</i>Public';
+        previewPrivacy.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800';
+      } else {
+        previewPrivacy.innerHTML = '<i class="material-icons text-xs mr-1">lock</i>Private';
+        previewPrivacy.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800';
+      }
+    }
+    
+    // Update content types
+    updateContentTypesPreview();
+    
+    // Update submissions status
+    updateSubmissionsPreview();
+  };
+  
+  function updateContentTypesPreview() {
+    const checkboxes = document.querySelectorAll('.content-type-checkbox');
+    const previewContainer = document.getElementById('preview-content-types');
+    
+    if (!previewContainer) return;
+    
+    const selectedTypes = [];
+    checkboxes.forEach(checkbox => {
+      if (checkbox.checked) {
+        const label = checkbox.closest('label');
+        const icon = label.querySelector('.material-icons').textContent;
+        const colorClass = label.querySelector('.material-icons').className;
+        const name = label.querySelector('span').textContent;
+        
+        selectedTypes.push({
+          icon: icon,
+          colorClass: colorClass,
+          name: name
+        });
+      }
+    });
+    
+    if (selectedTypes.length === 0) {
+      // Show default types
+      previewContainer.innerHTML = `
+        <div class="content-type-preview flex items-center p-2 bg-gray-50 rounded text-sm">
+          <i class="material-icons text-gray-400 text-sm mr-2">category</i>
+          <span class="text-gray-500">No content types selected</span>
+        </div>
+      `;
+    } else {
+      previewContainer.innerHTML = selectedTypes.map(type => `
+        <div class="content-type-preview flex items-center p-2 bg-gray-50 rounded text-sm">
+          <i class="material-icons ${type.colorClass} text-sm mr-2">${type.icon}</i>
+          <span>${type.name}</span>
+        </div>
+      `).join('');
+    }
+  }
+  
+  function updateSubmissionsPreview() {
+    const submissionToggle = document.querySelector('.submission-toggle');
+    const submissionsStatus = document.getElementById('submissions-status');
+    const submissionsDescription = document.getElementById('submissions-description');
+    
+    if (submissionToggle && submissionsStatus && submissionsDescription) {
+      if (submissionToggle.checked) {
+        submissionsStatus.innerHTML = '<i class="material-icons text-xs mr-1">inbox</i>Enabled';
+        submissionsStatus.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800';
+        submissionsDescription.textContent = 'Other users can submit content for you to review and add to this collection.';
+      } else {
+        submissionsStatus.innerHTML = '<i class="material-icons text-xs mr-1">block</i>Disabled';
+        submissionsStatus.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800';
+        submissionsDescription.textContent = 'This collection is not accepting submissions from other users.';
+      }
+    }
+  }
+  
+  // Mobile/Desktop preview toggle
+  const previewDesktop = document.getElementById('preview-desktop');
+  const previewMobile = document.getElementById('preview-mobile');
+  const previewContainer = document.getElementById('preview-container');
+  const mobileNote = document.querySelector('.mobile-preview-note');
+  
+  if (previewDesktop && previewMobile && previewContainer) {
+    previewDesktop.addEventListener('click', function() {
+      previewDesktop.classList.add('active', 'bg-blue-100', 'text-blue-600');
+      previewMobile.classList.remove('active', 'bg-blue-100', 'text-blue-600');
+      previewMobile.classList.add('bg-gray-100', 'text-gray-600');
+      
+      previewContainer.classList.remove('mobile-preview');
+      if (mobileNote) mobileNote.classList.add('hidden');
+    });
+    
+    previewMobile.addEventListener('click', function() {
+      previewMobile.classList.add('active', 'bg-blue-100', 'text-blue-600');
+      previewDesktop.classList.remove('active', 'bg-blue-100', 'text-blue-600');
+      previewDesktop.classList.add('bg-gray-100', 'text-gray-600');
+      
+      previewContainer.classList.add('mobile-preview');
+      if (mobileNote) mobileNote.classList.remove('hidden');
+    });
+  }
+  
+  // Initialize preview
+  updateCollectionPreview();
+});
+</script>
\ No newline at end of file
diff --git a/app/views/page_collections/_wizard_form.html.erb b/app/views/page_collections/_wizard_form.html.erb
new file mode 100644
index 00000000..ba14129e
--- /dev/null
+++ b/app/views/page_collections/_wizard_form.html.erb
@@ -0,0 +1,413 @@
+<%= form_with(model: page_collection, local: true, id: 'collection-form', data: { controller: 'collection-wizard' }) do |f| %>
+  
+  <!-- Auto-save indicator -->
+  <div class="auto-save-indicator mb-4">
+    <i class="material-icons text-xs mr-1">cloud_done</i>
+    <span id="save-status">All changes saved</span>
+  </div>
+  
+  <!-- Step 1: Basic Information -->
+  <div class="form-step active" id="step-1">
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+      <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-amber-50 to-orange-50">
+        <div class="flex items-center">
+          <div class="p-2 bg-amber-100 rounded-lg mr-3">
+            <i class="material-icons text-amber-600">edit</i>
+          </div>
+          <div>
+            <h2 class="text-lg font-semibold text-gray-900">Basic Information</h2>
+            <p class="text-sm text-gray-600">Give your collection a name and description</p>
+          </div>
+        </div>
+      </div>
+      
+      <div class="p-6 space-y-6">
+        <!-- Title -->
+        <div>
+          <%= f.label :title, class: 'block text-sm font-medium text-gray-900 mb-2' do %>
+            <span class="flex items-center">
+              <i class="material-icons text-gray-400 text-sm mr-2">title</i>
+              Collection Title *
+            </span>
+          <% end %>
+          <%= f.text_field :title, 
+              placeholder: 'My Awesome Collection', 
+              class: 'block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-colors duration-200 text-sm',
+              required: true,
+              data: { 
+                action: 'input->collection-wizard#updatePreview',
+                preview_target: 'title'
+              } %>
+          <p class="mt-1 text-xs text-gray-500">Choose a descriptive name that captures what your collection is about</p>
+        </div>
+
+        <!-- Subtitle -->  
+        <div>
+          <%= f.label :subtitle, class: 'block text-sm font-medium text-gray-900 mb-2' do %>
+            <span class="flex items-center">
+              <i class="material-icons text-gray-400 text-sm mr-2">subtitles</i>
+              Subtitle
+            </span>
+          <% end %>
+          <%= f.text_field :subtitle, 
+              placeholder: 'A curated selection of my favorite pages', 
+              class: 'block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-colors duration-200 text-sm',
+              data: { 
+                action: 'input->collection-wizard#updatePreview',
+                preview_target: 'subtitle'
+              } %>
+          <p class="mt-1 text-xs text-gray-500">Optional tagline to give more context about your collection</p>
+        </div>
+
+        <!-- Description -->
+        <div>
+          <%= f.label :description, class: 'block text-sm font-medium text-gray-900 mb-2' do %>
+            <span class="flex items-center">
+              <i class="material-icons text-gray-400 text-sm mr-2">description</i>
+              Description
+            </span>
+          <% end %>
+          <%= f.text_area :description, 
+              placeholder: "Write as little or as much as you'd like! Describe what makes this collection special...", 
+              rows: 4,
+              class: 'block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-colors duration-200 text-sm resize-none',
+              data: { 
+                action: 'input->collection-wizard#updatePreview',
+                preview_target: 'description'
+              } %>
+          <p class="mt-1 text-xs text-gray-500">
+            <span class="flex items-center justify-between">
+              <span>Brief description for your collection. <code class="bg-gray-100 px-1 rounded text-xs">&lt;strong&gt;</code> and <code class="bg-gray-100 px-1 rounded text-xs">&lt;em&gt;</code> tags are supported.</span>
+              <span class="text-gray-400" id="char-count">0 / 500</span>
+            </span>
+          </p>
+        </div>
+      </div>
+      
+      <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-between">
+        <div></div>
+        <button type="button" class="next-step px-6 py-2 bg-amber-500 hover:bg-amber-600 text-white rounded-lg font-medium transition-colors duration-200">
+          Next: Visual Design
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Step 2: Visual Design -->
+  <div class="form-step" id="step-2">
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+      <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
+        <div class="flex items-center">
+          <div class="p-2 bg-blue-100 rounded-lg mr-3">
+            <i class="material-icons text-blue-600">palette</i>
+          </div>
+          <div>
+            <h2 class="text-lg font-semibold text-gray-900">Visual Design</h2>
+            <p class="text-sm text-gray-600">Customize how your collection looks</p>
+          </div>
+        </div>
+      </div>
+      
+      <div class="p-6 space-y-6">
+        <!-- Header Image -->
+        <div>
+          <label class="block text-sm font-medium text-gray-900 mb-4">
+            <span class="flex items-center">
+              <i class="material-icons text-gray-400 text-sm mr-2">image</i>
+              Header Image
+            </span>
+          </label>
+          
+          <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors duration-200">
+            <div class="space-y-4">
+              <div class="mx-auto w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
+                <i class="material-icons text-gray-400 text-2xl">cloud_upload</i>
+              </div>
+              
+              <div>
+                <%= f.label :header_image, class: 'cursor-pointer' do %>
+                  <span class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500 transition-colors duration-200">
+                    <i class="material-icons text-sm mr-2">add_photo_alternate</i>
+                    Choose Image
+                  </span>
+                  <%= f.file_field :header_image, 
+                      class: 'sr-only', 
+                      accept: 'image/*',
+                      data: { 
+                        action: 'change->collection-wizard#updatePreview',
+                        preview_target: 'header_image'
+                      } %>
+                <% end %>
+                <p class="text-sm text-gray-500 mt-2">or drag and drop</p>
+              </div>
+              
+              <div class="text-xs text-gray-500">
+                <p>PNG, JPG, GIF up to 10MB</p>
+                <p>Recommended: 1200×400px for best results</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Theme Selection -->
+        <div>
+          <label class="block text-sm font-medium text-gray-900 mb-4">
+            <span class="flex items-center">
+              <i class="material-icons text-gray-400 text-sm mr-2">color_lens</i>
+              Collection Theme
+            </span>
+          </label>
+          
+          <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            <div class="theme-option active" data-theme="default">
+              <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-gradient-to-br from-blue-500 to-purple-600 mb-2"></div>
+              <span class="text-xs font-medium text-gray-700">Default</span>
+            </div>
+            <div class="theme-option" data-theme="warm">
+              <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-gradient-to-br from-orange-500 to-red-600 mb-2"></div>
+              <span class="text-xs font-medium text-gray-700">Warm</span>
+            </div>
+            <div class="theme-option" data-theme="nature">
+              <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-gradient-to-br from-green-500 to-emerald-600 mb-2"></div>
+              <span class="text-xs font-medium text-gray-700">Nature</span>
+            </div>
+            <div class="theme-option" data-theme="monochrome">
+              <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-gradient-to-br from-gray-500 to-gray-800 mb-2"></div>
+              <span class="text-xs font-medium text-gray-700">Mono</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-between">
+        <button type="button" class="prev-step px-6 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors duration-200">
+          Previous
+        </button>
+        <button type="button" class="next-step px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors duration-200">
+          Next: Content Types
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Step 3: Content Types -->
+  <div class="form-step" id="step-3">
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+      <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-purple-50 to-pink-50">
+        <div class="flex items-center">
+          <div class="p-2 bg-purple-100 rounded-lg mr-3">
+            <i class="material-icons text-purple-600">category</i>
+          </div>
+          <div>
+            <h2 class="text-lg font-semibold text-gray-900">Content Types</h2>
+            <p class="text-sm text-gray-600">Choose what types of content can be added</p>
+          </div>
+        </div>
+      </div>
+      
+      <div class="p-6">
+        <!-- Quick Selection -->
+        <div class="flex items-center space-x-4 mb-6 p-3 bg-gray-50 rounded-lg">
+          <span class="text-sm font-medium text-gray-700">Quick select:</span>
+          <button type="button" id="select-common-types" class="text-sm font-medium text-green-600 hover:text-green-700 transition-colors duration-200">
+            Common Types
+          </button>
+          <span class="text-gray-300">|</span>
+          <button type="button" id="select-all-types" class="text-sm font-medium text-blue-600 hover:text-blue-700 transition-colors duration-200">
+            All Types
+          </button>
+          <span class="text-gray-300">|</span>
+          <button type="button" id="select-none-types" class="text-sm font-medium text-gray-600 hover:text-gray-700 transition-colors duration-200">
+            None
+          </button>
+        </div>
+        
+        <!-- Content Type Grid -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          <% Rails.application.config.content_types[:all].each do |content_type| %>
+            <div class="content-type-option">
+              <%= f.label "page_types[#{content_type.name}]", class: 'flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 group' do %>
+                <%= f.check_box "page_types[#{content_type.name}]", 
+                    checked: page_collection.page_types.include?(content_type.name), 
+                    class: 'sr-only content-type-checkbox',
+                    data: { 
+                      type: content_type.name.downcase,
+                      common: %w[character location item universe].include?(content_type.name.downcase),
+                      action: 'change->collection-wizard#updatePreview'
+                    } %>
+                
+                <!-- Custom Checkbox -->
+                <div class="checkbox-custom w-5 h-5 border-2 border-gray-300 rounded flex items-center justify-center mr-3 flex-shrink-0 group-hover:border-gray-400 transition-colors duration-200">
+                  <i class="material-icons text-white text-sm opacity-0 check-icon">check</i>
+                </div>
+                
+                <!-- Content Type Info -->
+                <div class="flex items-center flex-1 min-w-0">
+                  <div class="p-2 <%= content_type.color %> bg-opacity-10 rounded-lg mr-3 flex-shrink-0">
+                    <i class="material-icons <%= content_type.text_color %> text-sm">
+                      <%= content_type.icon %>
+                    </i>
+                  </div>
+                  <span class="text-sm font-medium text-gray-900 truncate">
+                    <%= content_type.name.pluralize %>
+                  </span>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+      
+      <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-between">
+        <button type="button" class="prev-step px-6 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors duration-200">
+          Previous
+        </button>
+        <button type="button" class="next-step px-6 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg font-medium transition-colors duration-200">
+          Next: Settings
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Step 4: Settings -->
+  <div class="form-step" id="step-4">
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+      <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-green-50 to-emerald-50">
+        <div class="flex items-center">
+          <div class="p-2 bg-green-100 rounded-lg mr-3">
+            <i class="material-icons text-green-600">settings</i>
+          </div>
+          <div>
+            <h2 class="text-lg font-semibold text-gray-900">Privacy & Settings</h2>
+            <p class="text-sm text-gray-600">Control who can see and contribute to your collection</p>
+          </div>
+        </div>
+      </div>
+      
+      <div class="p-6 space-y-8">
+        <!-- Privacy Settings -->
+        <fieldset>
+          <legend class="block text-sm font-medium text-gray-900 mb-4">
+            <span class="flex items-center">
+              <i class="material-icons text-gray-400 text-sm mr-2">visibility</i>
+              Visibility *
+            </span>
+          </legend>
+          
+          <div class="space-y-3">
+            <%= f.label :privacy, class: 'flex items-start p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 hover:border-gray-300 transition-all duration-200' do %>
+              <%= f.radio_button :privacy, 'public', class: 'mt-1 mr-3 text-green-600 focus:ring-green-500' %>
+              <div class="flex-1">
+                <div class="flex items-center mb-1">
+                  <i class="material-icons text-green-600 text-sm mr-2">public</i>
+                  <span class="font-medium text-gray-900">Public</span>
+                </div>
+                <p class="text-sm text-gray-600">Anyone can discover and view this collection</p>
+              </div>
+            <% end %>
+            
+            <%= f.label :privacy, class: 'flex items-start p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 hover:border-gray-300 transition-all duration-200' do %>
+              <%= f.radio_button :privacy, 'private', class: 'mt-1 mr-3 text-gray-600 focus:ring-gray-500' %>
+              <div class="flex-1">
+                <div class="flex items-center mb-1">
+                  <i class="material-icons text-gray-600 text-sm mr-2">lock</i>
+                  <span class="font-medium text-gray-900">Private</span>
+                </div>
+                <p class="text-sm text-gray-600">Only you can see this collection</p>
+              </div>
+            <% end %>
+          </div>
+        </fieldset>
+
+        <!-- Submission Settings -->
+        <fieldset>
+          <legend class="block text-sm font-medium text-gray-900 mb-4">
+            <span class="flex items-center">
+              <i class="material-icons text-gray-400 text-sm mr-2">inbox</i>
+              Community Contributions
+            </span>
+          </legend>
+          
+          <div class="border border-gray-200 rounded-lg p-4">
+            <%= f.label :allow_submissions, class: 'flex items-start cursor-pointer' do %>
+              <%= f.check_box :allow_submissions, class: 'sr-only submission-toggle' %>
+              <div class="toggle-switch mr-3 mt-0.5"></div>
+              <div class="flex-1">
+                <div class="font-medium text-gray-900 mb-1">Allow submissions from other users</div>
+                <p class="text-sm text-gray-600">Let the community suggest content for your collection</p>
+              </div>
+            <% end %>
+          </div>
+        </fieldset>
+      </div>
+      
+      <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-between">
+        <button type="button" class="prev-step px-6 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors duration-200">
+          Previous
+        </button>
+        <div class="flex items-center space-x-3">
+          <%= link_to page_collections_path, class: "px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-200" do %>
+            Cancel
+          <% end %>
+          <%= f.submit 'Create Collection', class: "px-6 py-2 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 inline-flex items-center" %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<!-- Additional Styles -->
+<style>
+/* Theme Selection Styles */
+.theme-option {
+  @apply text-center cursor-pointer p-3 rounded-lg transition-all duration-200;
+}
+
+.theme-option:hover {
+  @apply bg-gray-50;
+}
+
+.theme-option.active {
+  @apply bg-blue-50 ring-2 ring-blue-500 ring-opacity-50;
+}
+
+/* Custom Checkbox Styles */
+.content-type-option input[type="checkbox"]:checked + label .checkbox-custom {
+  @apply bg-blue-500 border-blue-500;
+}
+
+.content-type-option input[type="checkbox"]:checked + label .check-icon {
+  @apply opacity-100;
+}
+
+/* Toggle Switch Styles */
+.toggle-switch {
+  width: 48px;
+  height: 24px;
+  background-color: #e5e7eb;
+  border-radius: 12px;
+  position: relative;
+  transition: background-color 0.2s;
+  cursor: pointer;
+}
+
+.toggle-switch::after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: white;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s;
+}
+
+.submission-toggle:checked + .toggle-switch {
+  background-color: #10b981;
+}
+
+.submission-toggle:checked + .toggle-switch::after {
+  transform: translateX(24px);
+}
+</style>
\ No newline at end of file
diff --git a/app/views/page_collections/new.html.erb b/app/views/page_collections/new.html.erb
index 4f1bcd21..1e300af6 100644
--- a/app/views/page_collections/new.html.erb
+++ b/app/views/page_collections/new.html.erb
@@ -3,10 +3,10 @@
   
   <!-- Hero Section -->
   <div class="bg-gradient-to-br from-amber-500 via-orange-500 to-red-500 text-white">
-    <div class="max-w-7xl mx-auto px-6 py-12">
+    <div class="max-w-7xl mx-auto px-6 py-8">
       
       <!-- Breadcrumb -->
-      <nav class="mb-8">
+      <nav class="mb-6">
         <div class="flex items-center space-x-2 text-white/80 text-sm">
           <%= link_to "Collections", page_collections_path, class: "hover:text-white transition-colors duration-200" %>
           <i class="material-icons text-xs">chevron_right</i>
@@ -15,23 +15,175 @@
       </nav>
       
       <!-- Header Content -->
-      <div class="text-center">
-        <div class="mb-6">
-          <div class="inline-flex items-center justify-center w-20 h-20 bg-white/20 rounded-full backdrop-blur-sm mb-4">
-            <i class="material-icons text-white text-4xl">collections</i>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+          <div class="w-16 h-16 bg-white/20 rounded-full backdrop-blur-sm flex items-center justify-center">
+            <i class="material-icons text-white text-2xl">collections</i>
+          </div>
+          <div>
+            <h1 class="text-3xl font-bold text-white">Create a Collection</h1>
+            <p class="text-white/90">Curate and organize your favorite content</p>
           </div>
         </div>
         
-        <h1 class="text-4xl font-bold text-white mb-4">Create a Collection</h1>
-        <p class="text-xl text-white/90 max-w-2xl mx-auto">
-          Curate and organize your favorite content into beautiful, shareable collections that others can discover and contribute to.
-        </p>
+        <!-- Progress Indicator -->
+        <div class="hidden lg:flex items-center space-x-2">
+          <div class="flex items-center space-x-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-2">
+            <span class="text-white/80 text-sm">Progress:</span>
+            <div class="w-24 h-2 bg-white/20 rounded-full overflow-hidden">
+              <div id="progress-bar" class="h-full bg-white rounded-full transition-all duration-300" style="width: 25%"></div>
+            </div>
+            <span id="progress-text" class="text-white text-sm font-medium">Step 1 of 4</span>
+          </div>
+        </div>
       </div>
     </div>
   </div>
   
-  <!-- Form Content -->
-  <div class="max-w-4xl mx-auto px-6 py-8">
-    <%= render 'form', page_collection: @page_collection %>
+  <!-- Main Content -->
+  <div class="max-w-7xl mx-auto px-6 py-8">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      
+      <!-- Form Panel -->
+      <div class="space-y-6">
+        
+        <!-- Step Navigation -->
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+          <div class="flex items-center justify-between">
+            <div class="flex space-x-1">
+              <button class="step-nav active" data-step="1">
+                <span class="step-number">1</span>
+                <span class="step-title">Basics</span>
+              </button>
+              <button class="step-nav" data-step="2">
+                <span class="step-number">2</span>
+                <span class="step-title">Visual</span>
+              </button>
+              <button class="step-nav" data-step="3">
+                <span class="step-number">3</span>
+                <span class="step-title">Content</span>
+              </button>
+              <button class="step-nav" data-step="4">
+                <span class="step-number">4</span>
+                <span class="step-title">Settings</span>
+              </button>
+            </div>
+            
+            <div class="flex items-center space-x-2">
+              <button id="save-draft" class="text-sm text-gray-600 hover:text-gray-800 transition-colors duration-200">
+                <i class="material-icons text-sm mr-1">save</i>
+                Save Draft
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Form Content -->
+        <%= render 'wizard_form', page_collection: @page_collection %>
+      </div>
+      
+      <!-- Live Preview Panel -->
+      <div class="lg:sticky lg:top-8 lg:h-fit">
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+          <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center">
+                <div class="p-2 bg-blue-100 rounded-lg mr-3">
+                  <i class="material-icons text-blue-600">visibility</i>
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold text-gray-900">Live Preview</h3>
+                  <p class="text-sm text-gray-600">See how your collection will look</p>
+                </div>
+              </div>
+              
+              <div class="flex items-center space-x-2">
+                <button id="preview-desktop" class="preview-toggle active p-2 rounded-lg bg-blue-100 text-blue-600">
+                  <i class="material-icons text-sm">desktop_mac</i>
+                </button>
+                <button id="preview-mobile" class="preview-toggle p-2 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200">
+                  <i class="material-icons text-sm">phone_iphone</i>
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Preview Content -->
+          <div id="collection-preview" class="p-6">
+            <%= render 'preview', page_collection: @page_collection %>
+          </div>
+        </div>
+      </div>
+      
+    </div>
   </div>
-</div>
\ No newline at end of file
+</div>
+
+<!-- Custom Styles -->
+<style>
+/* Step Navigation Styles */
+.step-nav {
+  @apply flex flex-col items-center p-3 rounded-lg transition-all duration-200 min-w-0;
+}
+
+.step-nav:not(.active) {
+  @apply text-gray-400 hover:text-gray-600 hover:bg-gray-50;
+}
+
+.step-nav.active {
+  @apply text-blue-600 bg-blue-50;
+}
+
+.step-nav.completed {
+  @apply text-green-600 bg-green-50;
+}
+
+.step-nav.completed .step-number {
+  @apply bg-green-500 text-white;
+}
+
+.step-number {
+  @apply w-8 h-8 rounded-full border-2 border-current flex items-center justify-center text-sm font-semibold mb-1;
+}
+
+.step-nav.active .step-number {
+  @apply bg-blue-500 text-white border-blue-500;
+}
+
+.step-title {
+  @apply text-xs font-medium;
+}
+
+/* Preview Toggle Styles */
+.preview-toggle.active {
+  @apply bg-blue-100 text-blue-600;
+}
+
+/* Mobile Preview Styles */
+.mobile-preview {
+  max-width: 375px;
+  margin: 0 auto;
+}
+
+/* Form Step Styles */
+.form-step {
+  @apply hidden;
+}
+
+.form-step.active {
+  @apply block;
+}
+
+/* Auto-save indicator */
+.auto-save-indicator {
+  @apply text-xs text-gray-500 flex items-center;
+}
+
+.auto-save-indicator.saving {
+  @apply text-blue-600;
+}
+
+.auto-save-indicator.saved {
+  @apply text-green-600;
+}
+</style>
\ No newline at end of file