diff --git a/__tests__/accessibility.test.tsx b/__tests__/accessibility.test.tsx
new file mode 100644
index 000000000..cc09fb2c7
--- /dev/null
+++ b/__tests__/accessibility.test.tsx
@@ -0,0 +1,679 @@
+/**
+ * Accessibility Tests
+ * Tests for WCAG 2.1 AA compliance and accessibility features
+ */
+
+import { describe, test, expect, jest, beforeEach } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import React from 'react';
+
+describe('Accessibility Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Keyboard Navigation', () => {
+    test('should support Tab navigation through form fields', async () => {
+      const user = userEvent.setup();
+      
+      const TestForm = () => (
+        <form>
+          <input type="text" name="name" aria-label="Full Name" />
+          <input type="email" name="email" aria-label="Email" />
+          <input type="tel" name="phone" aria-label="Phone" />
+          <button type="submit">Submit</button>
+        </form>
+      );
+
+      render(<TestForm />);
+
+      const nameInput = screen.getByLabelText('Full Name');
+      const emailInput = screen.getByLabelText('Email');
+      const phoneInput = screen.getByLabelText('Phone');
+      const submitButton = screen.getByText('Submit');
+
+      // Start at first input
+      nameInput.focus();
+      expect(nameInput).toHaveFocus();
+
+      // Tab to next input
+      await user.tab();
+      expect(emailInput).toHaveFocus();
+
+      // Tab to next input
+      await user.tab();
+      expect(phoneInput).toHaveFocus();
+
+      // Tab to button
+      await user.tab();
+      expect(submitButton).toHaveFocus();
+    });
+
+    test('should support Shift+Tab for reverse navigation', async () => {
+      const user = userEvent.setup();
+      
+      const TestForm = () => (
+        <form>
+          <input type="text" name="field1" aria-label="Field 1" />
+          <input type="text" name="field2" aria-label="Field 2" />
+        </form>
+      );
+
+      render(<TestForm />);
+
+      const field1 = screen.getByLabelText('Field 1');
+      const field2 = screen.getByLabelText('Field 2');
+
+      // Start at second field
+      field2.focus();
+      expect(field2).toHaveFocus();
+
+      // Shift+Tab to previous field
+      await user.tab({ shift: true });
+      expect(field1).toHaveFocus();
+    });
+
+    test('should support keyboard shortcuts', () => {
+      const shortcuts = {
+        save: 'Ctrl+S',
+        export: 'Ctrl+E',
+        close: 'Escape',
+        undo: 'Ctrl+Z',
+        redo: 'Ctrl+Y',
+      };
+
+      // Verify shortcuts are defined
+      expect(shortcuts.save).toBe('Ctrl+S');
+      expect(shortcuts.export).toBe('Ctrl+E');
+      expect(shortcuts.close).toBe('Escape');
+    });
+
+    test('should handle Enter key on buttons', async () => {
+      const user = userEvent.setup();
+      const handleClick = jest.fn();
+
+      const TestButton = () => (
+        <button onClick={handleClick} aria-label="Test Button">
+          Click Me
+        </button>
+      );
+
+      render(<TestButton />);
+
+      const button = screen.getByLabelText('Test Button');
+      button.focus();
+
+      await user.keyboard('{Enter}');
+
+      expect(handleClick).toHaveBeenCalled();
+    });
+
+    test('should handle Space key on buttons', async () => {
+      const user = userEvent.setup();
+      const handleClick = jest.fn();
+
+      const TestButton = () => (
+        <button onClick={handleClick} aria-label="Test Button">
+          Click Me
+        </button>
+      );
+
+      render(<TestButton />);
+
+      const button = screen.getByLabelText('Test Button');
+      button.focus();
+
+      await user.keyboard(' ');
+
+      expect(handleClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('ARIA Labels and Roles', () => {
+    test('should have proper ARIA labels on interactive elements', () => {
+      const TestComponent = () => (
+        <div>
+          <button aria-label="Add Section">+</button>
+          <button aria-label="Delete Section">×</button>
+          <input type="text" aria-label="Resume Title" />
+          <select aria-label="Template Selector">
+            <option>Modern</option>
+          </select>
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      expect(screen.getByLabelText('Add Section')).toBeInTheDocument();
+      expect(screen.getByLabelText('Delete Section')).toBeInTheDocument();
+      expect(screen.getByLabelText('Resume Title')).toBeInTheDocument();
+      expect(screen.getByLabelText('Template Selector')).toBeInTheDocument();
+    });
+
+    test('should use semantic HTML roles', () => {
+      const TestComponent = () => (
+        <div>
+          <nav role="navigation" aria-label="Main Navigation">
+            <a href="/">Home</a>
+          </nav>
+          <main role="main" aria-label="Resume Editor">
+            <section role="region" aria-label="Personal Information">
+              <h2>Personal Info</h2>
+            </section>
+          </main>
+          <aside role="complementary" aria-label="Preview Panel">
+            <div>Preview</div>
+          </aside>
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      expect(screen.getByRole('navigation')).toBeInTheDocument();
+      expect(screen.getByRole('main')).toBeInTheDocument();
+      expect(screen.getByRole('complementary')).toBeInTheDocument();
+    });
+
+    test('should have descriptive aria-describedby attributes', () => {
+      const TestComponent = () => (
+        <div>
+          <input
+            type="email"
+            aria-label="Email"
+            aria-describedby="email-help"
+          />
+          <span id="email-help">Enter your email address</span>
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      const input = screen.getByLabelText('Email');
+      expect(input).toHaveAttribute('aria-describedby', 'email-help');
+    });
+
+    test('should use aria-invalid for validation errors', () => {
+      const TestComponent = () => (
+        <div>
+          <input
+            type="email"
+            aria-label="Email"
+            aria-invalid="true"
+            aria-errormessage="email-error"
+          />
+          <span id="email-error" role="alert">
+            Invalid email format
+          </span>
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      const input = screen.getByLabelText('Email');
+      expect(input).toHaveAttribute('aria-invalid', 'true');
+      expect(screen.getByRole('alert')).toHaveTextContent('Invalid email format');
+    });
+
+    test('should use aria-live for dynamic updates', () => {
+      const TestComponent = () => (
+        <div>
+          <div aria-live="polite" aria-atomic="true">
+            Resume saved successfully
+          </div>
+          <div aria-live="assertive" role="alert">
+            Error: Failed to save
+          </div>
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      const politeRegion = screen.getByText('Resume saved successfully');
+      expect(politeRegion).toHaveAttribute('aria-live', 'polite');
+
+      const assertiveRegion = screen.getByText('Error: Failed to save');
+      expect(assertiveRegion).toHaveAttribute('aria-live', 'assertive');
+    });
+  });
+
+  describe('Screen Reader Support', () => {
+    test('should have descriptive text for screen readers', () => {
+      const TestComponent = () => (
+        <div>
+          <button aria-label="Export resume as PDF">
+            <span aria-hidden="true">📄</span>
+            <span className="sr-only">Export as PDF</span>
+          </button>
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      const button = screen.getByLabelText('Export resume as PDF');
+      expect(button).toBeInTheDocument();
+    });
+
+    test('should announce state changes', () => {
+      const TestComponent = ({ saving }: { saving: boolean }) => (
+        <div>
+          <div role="status" aria-live="polite">
+            {saving ? 'Saving...' : 'All changes saved'}
+          </div>
+        </div>
+      );
+
+      const { rerender } = render(<TestComponent saving={false} />);
+      expect(screen.getByText('All changes saved')).toBeInTheDocument();
+
+      rerender(<TestComponent saving={true} />);
+      expect(screen.getByText('Saving...')).toBeInTheDocument();
+    });
+
+    test('should provide context for icon buttons', () => {
+      const TestComponent = () => (
+        <div>
+          <button aria-label="Delete section">
+            <svg aria-hidden="true">
+              <path d="M..." />
+            </svg>
+          </button>
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      const button = screen.getByLabelText('Delete section');
+      expect(button).toBeInTheDocument();
+    });
+
+    test('should use sr-only class for screen reader only text', () => {
+      const TestComponent = () => (
+        <div>
+          <span className="sr-only">
+            This text is only for screen readers
+          </span>
+        </div>
+      );
+
+      const { container } = render(<TestComponent />);
+      const srOnlyElement = container.querySelector('.sr-only');
+
+      expect(srOnlyElement).toBeInTheDocument();
+      expect(srOnlyElement).toHaveTextContent('This text is only for screen readers');
+    });
+  });
+
+  describe('Focus Management', () => {
+    test('should maintain focus on section reorder', () => {
+      const TestComponent = () => {
+        const [focused, setFocused] = React.useState(false);
+        
+        return (
+          <button
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            aria-label="Section"
+          >
+            Section {focused ? '(focused)' : ''}
+          </button>
+        );
+      };
+
+      render(<TestComponent />);
+
+      const button = screen.getByLabelText('Section');
+      button.focus();
+
+      expect(button).toHaveFocus();
+    });
+
+    test('should auto-focus first field when adding section', () => {
+      const TestComponent = () => {
+        const inputRef = React.useRef<HTMLInputElement>(null);
+
+        React.useEffect(() => {
+          inputRef.current?.focus();
+        }, []);
+
+        return <input ref={inputRef} type="text" aria-label="First Field" />;
+      };
+
+      render(<TestComponent />);
+
+      const input = screen.getByLabelText('First Field');
+      expect(input).toHaveFocus();
+    });
+
+    test('should trap focus in modal dialogs', async () => {
+      const user = userEvent.setup();
+
+      const TestModal = () => (
+        <div role="dialog" aria-modal="true" aria-label="Export Dialog">
+          <h2>Export Resume</h2>
+          <button aria-label="Export as PDF">PDF</button>
+          <button aria-label="Export as DOCX">DOCX</button>
+          <button aria-label="Close">Close</button>
+        </div>
+      );
+
+      render(<TestModal />);
+
+      const pdfButton = screen.getByLabelText('Export as PDF');
+      const docxButton = screen.getByLabelText('Export as DOCX');
+      const closeButton = screen.getByLabelText('Close');
+
+      pdfButton.focus();
+      expect(pdfButton).toHaveFocus();
+
+      await user.tab();
+      expect(docxButton).toHaveFocus();
+
+      await user.tab();
+      expect(closeButton).toHaveFocus();
+    });
+
+    test('should have visible focus indicators', () => {
+      const TestComponent = () => (
+        <button
+          className="focus:ring-2 focus:ring-purple-500"
+          aria-label="Test Button"
+        >
+          Click Me
+        </button>
+      );
+
+      const { container } = render(<TestComponent />);
+      const button = container.querySelector('button');
+
+      expect(button).toHaveClass('focus:ring-2');
+      expect(button).toHaveClass('focus:ring-purple-500');
+    });
+  });
+
+  describe('Color Contrast', () => {
+    test('should meet WCAG AA contrast requirements for text', () => {
+      // WCAG AA requires:
+      // - 4.5:1 for normal text
+      // - 3:1 for large text (18pt+ or 14pt+ bold)
+
+      const contrastRatios = {
+        normalText: 4.5,
+        largeText: 3.0,
+      };
+
+      expect(contrastRatios.normalText).toBeGreaterThanOrEqual(4.5);
+      expect(contrastRatios.largeText).toBeGreaterThanOrEqual(3.0);
+    });
+
+    test('should use accessible color combinations', () => {
+      const colorCombinations = [
+        { bg: '#ffffff', fg: '#000000', ratio: 21 }, // Black on white
+        { bg: '#8b5cf6', fg: '#ffffff', ratio: 4.5 }, // White on purple
+        { bg: '#f3f4f6', fg: '#1f2937', ratio: 12 }, // Dark gray on light gray
+      ];
+
+      colorCombinations.forEach(combo => {
+        expect(combo.ratio).toBeGreaterThanOrEqual(4.5);
+      });
+    });
+
+    test('should not rely solely on color for information', () => {
+      const TestComponent = () => (
+        <div>
+          <span className="text-red-500" aria-label="Error: Invalid input">
+            ⚠️ Invalid input
+          </span>
+          <span className="text-green-500" aria-label="Success: Saved">
+            ✓ Saved
+          </span>
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      // Icons and text provide information, not just color
+      expect(screen.getByLabelText('Error: Invalid input')).toHaveTextContent('⚠️');
+      expect(screen.getByLabelText('Success: Saved')).toHaveTextContent('✓');
+    });
+  });
+
+  describe('Form Accessibility', () => {
+    test('should associate labels with inputs', () => {
+      const TestForm = () => (
+        <form>
+          <label htmlFor="name-input">Full Name</label>
+          <input id="name-input" type="text" />
+          
+          <label htmlFor="email-input">Email</label>
+          <input id="email-input" type="email" />
+        </form>
+      );
+
+      render(<TestForm />);
+
+      const nameInput = screen.getByLabelText('Full Name');
+      const emailInput = screen.getByLabelText('Email');
+
+      expect(nameInput).toHaveAttribute('id', 'name-input');
+      expect(emailInput).toHaveAttribute('id', 'email-input');
+    });
+
+    test('should mark required fields', () => {
+      const TestForm = () => (
+        <form>
+          <label htmlFor="required-field">
+            Required Field
+            <span aria-label="required">*</span>
+          </label>
+          <input
+            id="required-field"
+            type="text"
+            required
+            aria-required="true"
+          />
+        </form>
+      );
+
+      render(<TestForm />);
+
+      const input = screen.getByLabelText(/Required Field/);
+      expect(input).toHaveAttribute('required');
+      expect(input).toHaveAttribute('aria-required', 'true');
+    });
+
+    test('should provide helpful error messages', () => {
+      const TestForm = () => (
+        <div>
+          <label htmlFor="email">Email</label>
+          <input
+            id="email"
+            type="email"
+            aria-invalid="true"
+            aria-describedby="email-error"
+          />
+          <span id="email-error" role="alert">
+            Please enter a valid email address (e.g., user@example.com)
+          </span>
+        </div>
+      );
+
+      render(<TestForm />);
+
+      const errorMessage = screen.getByRole('alert');
+      expect(errorMessage).toHaveTextContent('Please enter a valid email address');
+    });
+
+    test('should group related form fields', () => {
+      const TestForm = () => (
+        <form>
+          <fieldset>
+            <legend>Personal Information</legend>
+            <label htmlFor="first-name">First Name</label>
+            <input id="first-name" type="text" />
+            <label htmlFor="last-name">Last Name</label>
+            <input id="last-name" type="text" />
+          </fieldset>
+        </form>
+      );
+
+      render(<TestForm />);
+
+      const fieldset = screen.getByRole('group', { name: 'Personal Information' });
+      expect(fieldset).toBeInTheDocument();
+    });
+  });
+
+  describe('Responsive Text and Zoom', () => {
+    test('should support text zoom up to 200%', () => {
+      const TestComponent = () => (
+        <div style={{ fontSize: '16px' }}>
+          <p>This text should be readable at 200% zoom</p>
+        </div>
+      );
+
+      const { container } = render(<TestComponent />);
+      const div = container.querySelector('div');
+
+      expect(div).toHaveStyle({ fontSize: '16px' });
+    });
+
+    test('should use relative units for text sizing', () => {
+      const fontSizes = {
+        body: '1rem',      // 16px
+        heading: '1.5rem', // 24px
+        small: '0.875rem', // 14px
+      };
+
+      expect(fontSizes.body).toContain('rem');
+      expect(fontSizes.heading).toContain('rem');
+      expect(fontSizes.small).toContain('rem');
+    });
+  });
+
+  describe('Alternative Text', () => {
+    test('should provide alt text for images', () => {
+      const TestComponent = () => (
+        <div>
+          <img src="/logo.png" alt="CodeUnia Logo" />
+          <img src="/icon.png" alt="" aria-hidden="true" /> {/* Decorative */}
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      const logo = screen.getByAltText('CodeUnia Logo');
+      expect(logo).toBeInTheDocument();
+    });
+
+    test('should mark decorative images as aria-hidden', () => {
+      const TestComponent = () => (
+        <img src="/decoration.png" alt="" aria-hidden="true" />
+      );
+
+      const { container } = render(<TestComponent />);
+      const img = container.querySelector('img');
+
+      expect(img).toHaveAttribute('aria-hidden', 'true');
+      expect(img).toHaveAttribute('alt', '');
+    });
+  });
+
+  describe('Skip Links', () => {
+    test('should provide skip to main content link', () => {
+      const TestComponent = () => (
+        <div>
+          <a href="#main-content" className="sr-only focus:not-sr-only">
+            Skip to main content
+          </a>
+          <main id="main-content">
+            <h1>Resume Builder</h1>
+          </main>
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      const skipLink = screen.getByText('Skip to main content');
+      expect(skipLink).toHaveAttribute('href', '#main-content');
+    });
+  });
+
+  describe('Heading Hierarchy', () => {
+    test('should maintain proper heading hierarchy', () => {
+      const TestComponent = () => (
+        <div>
+          <h1>Resume Builder</h1>
+          <section>
+            <h2>Personal Information</h2>
+            <h3>Contact Details</h3>
+          </section>
+          <section>
+            <h2>Work Experience</h2>
+            <h3>Current Position</h3>
+          </section>
+        </div>
+      );
+
+      render(<TestComponent />);
+
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Resume Builder');
+      expect(screen.getAllByRole('heading', { level: 2 })).toHaveLength(2);
+      expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(2);
+    });
+  });
+
+  describe('Loading States', () => {
+    test('should announce loading states to screen readers', () => {
+      const TestComponent = ({ loading }: { loading: boolean }) => (
+        <div>
+          {loading && (
+            <div role="status" aria-live="polite" aria-busy="true">
+              <span className="sr-only">Loading resume data...</span>
+            </div>
+          )}
+        </div>
+      );
+
+      render(<TestComponent loading={true} />);
+
+      const status = screen.getByRole('status');
+      expect(status).toHaveAttribute('aria-busy', 'true');
+      expect(screen.getByText('Loading resume data...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Touch Target Size', () => {
+    test('should have minimum touch target size of 44x44px', () => {
+      const TestComponent = () => (
+        <button
+          style={{ minWidth: '44px', minHeight: '44px' }}
+          aria-label="Add Section"
+        >
+          +
+        </button>
+      );
+
+      const { container } = render(<TestComponent />);
+      const button = container.querySelector('button');
+
+      expect(button).toHaveStyle({ minWidth: '44px', minHeight: '44px' });
+    });
+  });
+
+  describe('Language Attributes', () => {
+    test('should specify document language', () => {
+      const TestComponent = () => (
+        <div lang="en">
+          <p>This is English text</p>
+        </div>
+      );
+
+      const { container } = render(<TestComponent />);
+      const div = container.querySelector('div');
+
+      expect(div).toHaveAttribute('lang', 'en');
+    });
+  });
+});
diff --git a/__tests__/cross-browser.test.tsx b/__tests__/cross-browser.test.tsx
new file mode 100644
index 000000000..bb58641cd
--- /dev/null
+++ b/__tests__/cross-browser.test.tsx
@@ -0,0 +1,489 @@
+/**
+ * Cross-Browser Compatibility Tests
+ * Tests for browser-specific features and compatibility
+ */
+
+import { describe, test, expect, jest, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom';
+
+describe('Cross-Browser Compatibility Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Browser Feature Detection', () => {
+    test('should detect modern browser features', () => {
+      // Test for required browser APIs
+      const hasLocalStorage = typeof window !== 'undefined' && 'localStorage' in window;
+      const hasSessionStorage = typeof window !== 'undefined' && 'sessionStorage' in window;
+      const hasBlob = typeof Blob !== 'undefined';
+      const hasURL = typeof URL !== 'undefined';
+
+      // These should all be available in modern browsers or test environment
+      expect(hasLocalStorage).toBe(true);
+      expect(hasSessionStorage).toBe(true);
+      expect(hasBlob).toBe(true);
+      expect(hasURL).toBe(true);
+    });
+
+    test('should support required CSS features', () => {
+      // In test environment, CSS.supports may not be available
+      // In real browsers, these features are widely supported
+      const hasCSS = typeof CSS !== 'undefined' && typeof CSS.supports === 'function';
+      
+      if (hasCSS) {
+        const supportsGrid = CSS.supports('display', 'grid');
+        const supportsFlex = CSS.supports('display', 'flex');
+        const supportsCustomProps = CSS.supports('--custom', '0');
+
+        expect(supportsGrid).toBe(true);
+        expect(supportsFlex).toBe(true);
+        expect(supportsCustomProps).toBe(true);
+      } else {
+        // In test environment without CSS.supports
+        expect(hasCSS).toBe(false);
+      }
+    });
+
+    test('should support ES6+ features', () => {
+      // Test for Promise support
+      expect(typeof Promise).toBe('function');
+
+      // Test for async/await support
+      const asyncFunction = async () => 'test';
+      expect(asyncFunction.constructor.name).toBe('AsyncFunction');
+
+      // Test for arrow functions
+      const arrowFn = () => true;
+      expect(typeof arrowFn).toBe('function');
+
+      // Test for template literals
+      const name = 'test';
+      const template = `Hello ${name}`;
+      expect(template).toBe('Hello test');
+
+      // Test for destructuring
+      const { a, b } = { a: 1, b: 2 };
+      expect(a).toBe(1);
+      expect(b).toBe(2);
+
+      // Test for spread operator
+      const arr1 = [1, 2];
+      const arr2 = [...arr1, 3];
+      expect(arr2).toEqual([1, 2, 3]);
+    });
+  });
+
+  describe('Export Functionality - Browser Compatibility', () => {
+    test('should support Blob creation for PDF export', () => {
+      const pdfData = new Uint8Array([0x25, 0x50, 0x44, 0x46]); // PDF header
+      const blob = new Blob([pdfData], { type: 'application/pdf' });
+
+      expect(blob).toBeInstanceOf(Blob);
+      expect(blob.type).toBe('application/pdf');
+      expect(blob.size).toBeGreaterThan(0);
+    });
+
+    test('should support Blob creation for DOCX export', () => {
+      const docxData = new Uint8Array([0x50, 0x4B, 0x03, 0x04]); // ZIP header (DOCX is ZIP)
+      const blob = new Blob([docxData], { 
+        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
+      });
+
+      expect(blob).toBeInstanceOf(Blob);
+      expect(blob.type).toBe('application/vnd.openxmlformats-officedocument.wordprocessingml.document');
+    });
+
+    test('should support URL.createObjectURL for downloads', () => {
+      const blob = new Blob(['test'], { type: 'text/plain' });
+      
+      // URL.createObjectURL may not be available in test environment
+      if (typeof URL.createObjectURL === 'function') {
+        const url = URL.createObjectURL(blob);
+        expect(url).toMatch(/^blob:/);
+        URL.revokeObjectURL(url);
+      } else {
+        // In test environment, just verify the API exists
+        expect(typeof URL).toBe('function');
+      }
+    });
+
+    test('should support download attribute on anchor elements', () => {
+      if (typeof document !== 'undefined') {
+        const link = document.createElement('a');
+        link.download = 'test.pdf';
+        link.href = 'blob:test';
+
+        expect(link.download).toBe('test.pdf');
+        expect(link.href).toContain('blob:test');
+      } else {
+        // In test environment without DOM
+        expect(true).toBe(true);
+      }
+    });
+  });
+
+  describe('Local Storage - Browser Compatibility', () => {
+    test('should support localStorage API', () => {
+      if (typeof window !== 'undefined' && window.localStorage) {
+        const testKey = 'test-key';
+        const testValue = 'test-value';
+
+        localStorage.setItem(testKey, testValue);
+        const retrieved = localStorage.getItem(testKey);
+        
+        expect(retrieved).toBe(testValue);
+
+        localStorage.removeItem(testKey);
+        expect(localStorage.getItem(testKey)).toBeNull();
+      } else {
+        // In test environment without localStorage
+        expect(true).toBe(true);
+      }
+    });
+
+    test('should handle localStorage quota exceeded', () => {
+      const handleQuotaExceeded = (error: Error): boolean => {
+        return error.name === 'QuotaExceededError' || 
+               error.name === 'NS_ERROR_DOM_QUOTA_REACHED';
+      };
+
+      const quotaError = new Error('Quota exceeded');
+      quotaError.name = 'QuotaExceededError';
+
+      expect(handleQuotaExceeded(quotaError)).toBe(true);
+    });
+
+    test('should support JSON serialization for storage', () => {
+      const data = {
+        id: 'test-id',
+        title: 'Test Resume',
+        sections: [{ type: 'personal_info', content: {} }],
+      };
+
+      const serialized = JSON.stringify(data);
+      const deserialized = JSON.parse(serialized);
+
+      expect(deserialized).toEqual(data);
+    });
+  });
+
+  describe('Drag and Drop - Browser Compatibility', () => {
+    test('should support drag and drop events', () => {
+      const dragEvents = [
+        'dragstart',
+        'drag',
+        'dragend',
+        'dragenter',
+        'dragover',
+        'dragleave',
+        'drop',
+      ];
+
+      dragEvents.forEach(eventType => {
+        if (typeof Event !== 'undefined') {
+          const event = new Event(eventType);
+          expect(event.type).toBe(eventType);
+        } else {
+          expect(true).toBe(true);
+        }
+      });
+    });
+
+    test('should support DataTransfer API', () => {
+      // DataTransfer is used in drag and drop operations
+      // In test environment, DataTransfer may not be available
+      const supportsDataTransfer = typeof DataTransfer !== 'undefined';
+      
+      // Just verify the check works
+      expect(typeof supportsDataTransfer).toBe('boolean');
+    });
+  });
+
+  describe('Touch Events - Mobile Browser Compatibility', () => {
+    test('should support touch events', () => {
+      const touchEvents = [
+        'touchstart',
+        'touchmove',
+        'touchend',
+        'touchcancel',
+      ];
+
+      touchEvents.forEach(eventType => {
+        if (typeof Event !== 'undefined') {
+          const event = new Event(eventType);
+          expect(event.type).toBe(eventType);
+        } else {
+          expect(true).toBe(true);
+        }
+      });
+    });
+
+    test('should handle touch and mouse events', () => {
+      const isTouchDevice = (): boolean => {
+        if (typeof window === 'undefined') return false;
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+      };
+
+      // Should return boolean
+      const result = isTouchDevice();
+      expect(typeof result).toBe('boolean');
+    });
+  });
+
+  describe('Clipboard API - Browser Compatibility', () => {
+    test('should support clipboard operations', async () => {
+      const hasClipboard = typeof navigator !== 'undefined' && 
+                          'clipboard' in navigator;
+
+      // In test environment, clipboard may not be available
+      expect(typeof hasClipboard).toBe('boolean');
+    });
+
+    test('should handle clipboard permissions', () => {
+      const checkClipboardPermission = async (): Promise<boolean> => {
+        if (typeof navigator === 'undefined' || !navigator.clipboard) {
+          return false;
+        }
+        return true;
+      };
+
+      expect(typeof checkClipboardPermission).toBe('function');
+    });
+  });
+
+  describe('Print API - Browser Compatibility', () => {
+    test('should support window.print()', () => {
+      if (typeof window !== 'undefined') {
+        expect(typeof window.print).toBe('function');
+      } else {
+        expect(true).toBe(true);
+      }
+    });
+
+    test('should support print media queries', () => {
+      if (typeof window !== 'undefined' && window.matchMedia) {
+        const printMedia = window.matchMedia('print');
+        expect(printMedia).toBeDefined();
+      } else {
+        expect(true).toBe(true);
+      }
+    });
+  });
+
+  describe('Font Loading - Browser Compatibility', () => {
+    test('should support FontFace API', () => {
+      const supportsFontFace = typeof FontFace !== 'undefined';
+      
+      // In test environment, FontFace may not be available
+      expect(typeof supportsFontFace).toBe('boolean');
+    });
+
+    test('should handle web font loading', () => {
+      const fonts = [
+        'Inter',
+        'Roboto',
+        'Open Sans',
+        'Lato',
+        'Montserrat',
+      ];
+
+      fonts.forEach(font => {
+        expect(typeof font).toBe('string');
+        expect(font.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('ResizeObserver - Browser Compatibility', () => {
+    test('should support ResizeObserver API', () => {
+      const supportsResizeObserver = typeof ResizeObserver !== 'undefined';
+      
+      // Modern browsers should support ResizeObserver
+      expect(supportsResizeObserver || typeof window === 'undefined').toBe(true);
+    });
+  });
+
+  describe('IntersectionObserver - Browser Compatibility', () => {
+    test('should support IntersectionObserver API', () => {
+      const supportsIntersectionObserver = typeof IntersectionObserver !== 'undefined';
+      
+      // In test environment, IntersectionObserver may not be available
+      expect(typeof supportsIntersectionObserver).toBe('boolean');
+    });
+  });
+
+  describe('File API - Browser Compatibility', () => {
+    test('should support File and FileReader APIs', () => {
+      const supportsFile = typeof File !== 'undefined';
+      const supportsFileReader = typeof FileReader !== 'undefined';
+
+      expect(supportsFile).toBe(true);
+      expect(supportsFileReader).toBe(true);
+    });
+
+    test('should handle file reading', () => {
+      if (typeof FileReader !== 'undefined') {
+        const reader = new FileReader();
+        
+        expect(reader).toBeInstanceOf(FileReader);
+        expect(typeof reader.readAsText).toBe('function');
+        expect(typeof reader.readAsDataURL).toBe('function');
+        expect(typeof reader.readAsArrayBuffer).toBe('function');
+      } else {
+        expect(true).toBe(true);
+      }
+    });
+  });
+
+  describe('Canvas API - Browser Compatibility', () => {
+    test('should support Canvas API for PDF generation', () => {
+      if (typeof document !== 'undefined') {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        expect(canvas).toBeDefined();
+        expect(ctx).toBeDefined();
+      } else {
+        expect(true).toBe(true);
+      }
+    });
+  });
+
+  describe('Fetch API - Browser Compatibility', () => {
+    test('should support Fetch API', () => {
+      // In test environment, fetch may not be available
+      const hasFetch = typeof fetch !== 'undefined';
+      expect(typeof hasFetch).toBe('boolean');
+    });
+
+    test('should support Request and Response objects', () => {
+      // In test environment, these may not be available
+      const hasRequest = typeof Request !== 'undefined';
+      const hasResponse = typeof Response !== 'undefined';
+      expect(typeof hasRequest).toBe('boolean');
+      expect(typeof hasResponse).toBe('boolean');
+    });
+
+    test('should support Headers API', () => {
+      const headers = new Headers();
+      headers.set('Content-Type', 'application/json');
+
+      expect(headers.get('Content-Type')).toBe('application/json');
+    });
+  });
+
+  describe('WebWorker - Browser Compatibility', () => {
+    test('should support Web Workers', () => {
+      const supportsWorker = typeof Worker !== 'undefined';
+      
+      // In test environment, Worker may not be available
+      expect(typeof supportsWorker).toBe('boolean');
+    });
+  });
+
+  describe('Browser-Specific Workarounds', () => {
+    test('should detect Safari browser', () => {
+      const isSafari = (): boolean => {
+        if (typeof navigator === 'undefined') return false;
+        return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+      };
+
+      expect(typeof isSafari()).toBe('boolean');
+    });
+
+    test('should detect iOS devices', () => {
+      const isIOS = (): boolean => {
+        if (typeof navigator === 'undefined') return false;
+        return /iPad|iPhone|iPod/.test(navigator.userAgent);
+      };
+
+      expect(typeof isIOS()).toBe('boolean');
+    });
+
+    test('should detect Chrome browser', () => {
+      const isChrome = (): boolean => {
+        if (typeof navigator === 'undefined') return false;
+        return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+      };
+
+      expect(typeof isChrome()).toBe('boolean');
+    });
+
+    test('should detect Firefox browser', () => {
+      const isFirefox = (): boolean => {
+        if (typeof navigator === 'undefined') return false;
+        return /Firefox/.test(navigator.userAgent);
+      };
+
+      expect(typeof isFirefox()).toBe('boolean');
+    });
+
+    test('should detect Edge browser', () => {
+      const isEdge = (): boolean => {
+        if (typeof navigator === 'undefined') return false;
+        return /Edg/.test(navigator.userAgent);
+      };
+
+      expect(typeof isEdge()).toBe('boolean');
+    });
+  });
+
+  describe('Polyfill Requirements', () => {
+    test('should have Array methods available', () => {
+      expect(typeof Array.prototype.map).toBe('function');
+      expect(typeof Array.prototype.filter).toBe('function');
+      expect(typeof Array.prototype.reduce).toBe('function');
+      expect(typeof Array.prototype.find).toBe('function');
+      expect(typeof Array.prototype.findIndex).toBe('function');
+      expect(typeof Array.prototype.includes).toBe('function');
+    });
+
+    test('should have Object methods available', () => {
+      expect(typeof Object.assign).toBe('function');
+      expect(typeof Object.keys).toBe('function');
+      expect(typeof Object.values).toBe('function');
+      expect(typeof Object.entries).toBe('function');
+    });
+
+    test('should have String methods available', () => {
+      expect(typeof String.prototype.includes).toBe('function');
+      expect(typeof String.prototype.startsWith).toBe('function');
+      expect(typeof String.prototype.endsWith).toBe('function');
+      expect(typeof String.prototype.repeat).toBe('function');
+    });
+  });
+
+  describe('Performance API - Browser Compatibility', () => {
+    test('should support Performance API', () => {
+      if (typeof performance !== 'undefined') {
+        expect(typeof performance.now).toBe('function');
+        // mark and measure may not be available in all environments
+        const hasMark = typeof performance.mark !== 'undefined';
+        const hasMeasure = typeof performance.measure !== 'undefined';
+        expect(typeof hasMark).toBe('boolean');
+        expect(typeof hasMeasure).toBe('boolean');
+      } else {
+        expect(true).toBe(true);
+      }
+    });
+  });
+
+  describe('Viewport and Media Queries', () => {
+    test('should support matchMedia API', () => {
+      if (typeof window !== 'undefined' && window.matchMedia) {
+        const mobileQuery = window.matchMedia('(max-width: 768px)');
+        expect(mobileQuery).toBeDefined();
+        expect(typeof mobileQuery.matches).toBe('boolean');
+      } else {
+        expect(true).toBe(true);
+      }
+    });
+
+    test('should handle viewport meta tag', () => {
+      const viewportContent = 'width=device-width, initial-scale=1.0';
+      expect(viewportContent).toContain('width=device-width');
+      expect(viewportContent).toContain('initial-scale=1.0');
+    });
+  });
+});
diff --git a/__tests__/education-section.test.tsx b/__tests__/education-section.test.tsx
new file mode 100644
index 000000000..5327f7e82
--- /dev/null
+++ b/__tests__/education-section.test.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { EducationSection } from '@/components/resume/sections/EducationSection';
+import { Education } from '@/types/resume';
+
+describe('EducationSection', () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('should render empty state when no education entries exist', () => {
+    render(<EducationSection content={[]} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('No education entries yet')).toBeInTheDocument();
+    expect(screen.getByText('Click "Add Education" to get started')).toBeInTheDocument();
+  });
+
+  it('should render add education button', () => {
+    render(<EducationSection content={[]} onChange={mockOnChange} />);
+    
+    expect(screen.getByRole('button', { name: /add education/i })).toBeInTheDocument();
+  });
+
+  it('should add a new education entry when add button is clicked', () => {
+    render(<EducationSection content={[]} onChange={mockOnChange} />);
+    
+    const addButton = screen.getByRole('button', { name: /add education/i });
+    fireEvent.click(addButton);
+    
+    expect(mockOnChange).toHaveBeenCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({
+          institution: '',
+          degree: '',
+          field: '',
+          current: false,
+        })
+      ])
+    );
+  });
+
+  it('should render education entry with all required fields', () => {
+    const education: Education = {
+      id: '1',
+      institution: 'MIT',
+      degree: 'Bachelor of Science',
+      field: 'Computer Science',
+      start_date: '2018-09',
+      end_date: '2022-05',
+      current: false,
+      gpa: '3.9',
+      achievements: ['Dean\'s List'],
+    };
+
+    render(<EducationSection content={[education]} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('MIT')).toBeInTheDocument();
+    expect(screen.getByText('Bachelor of Science in Computer Science')).toBeInTheDocument();
+  });
+
+  it('should update institution field', () => {
+    const education: Education = {
+      id: '1',
+      institution: '',
+      degree: '',
+      field: '',
+      start_date: '',
+      current: false,
+    };
+
+    render(<EducationSection content={[education]} onChange={mockOnChange} />);
+    
+    const institutionInput = screen.getByPlaceholderText('University of California, Berkeley');
+    fireEvent.change(institutionInput, { target: { value: 'Stanford University' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        institution: 'Stanford University',
+      })
+    ]);
+  });
+
+  it('should handle current checkbox correctly', () => {
+    const education: Education = {
+      id: '1',
+      institution: 'MIT',
+      degree: 'PhD',
+      field: 'AI',
+      start_date: '2022-09',
+      current: false,
+    };
+
+    render(<EducationSection content={[education]} onChange={mockOnChange} />);
+    
+    const currentCheckbox = screen.getByRole('checkbox', { name: /i currently study here/i });
+    fireEvent.click(currentCheckbox);
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        current: true,
+        end_date: undefined,
+      })
+    ]);
+  });
+
+  it('should add achievement to education entry', () => {
+    const education: Education = {
+      id: '1',
+      institution: 'MIT',
+      degree: 'BS',
+      field: 'CS',
+      start_date: '2018-09',
+      current: false,
+      achievements: [],
+    };
+
+    render(<EducationSection content={[education]} onChange={mockOnChange} />);
+    
+    // Find the achievements section and click its Add button
+    const achievementsLabel = screen.getByText('Achievements & Honors (Optional)');
+    const achievementsSection = achievementsLabel.closest('div');
+    
+    if (achievementsSection) {
+      const addButton = achievementsSection.querySelector('button');
+      if (addButton) {
+        fireEvent.click(addButton);
+        
+        expect(mockOnChange).toHaveBeenCalledWith([
+          expect.objectContaining({
+            achievements: [''],
+          })
+        ]);
+      }
+    }
+  });
+
+  it('should remove education entry', () => {
+    const education: Education = {
+      id: '1',
+      institution: 'MIT',
+      degree: 'BS',
+      field: 'CS',
+      start_date: '2018-09',
+      current: false,
+    };
+
+    render(<EducationSection content={[education]} onChange={mockOnChange} />);
+    
+    const deleteButton = screen.getByRole('button', { name: '' });
+    fireEvent.click(deleteButton);
+    
+    expect(mockOnChange).toHaveBeenCalledWith([]);
+  });
+
+  it('should render multiple education entries', () => {
+    const educations: Education[] = [
+      {
+        id: '1',
+        institution: 'MIT',
+        degree: 'BS',
+        field: 'CS',
+        start_date: '2018-09',
+        current: false,
+      },
+      {
+        id: '2',
+        institution: 'Stanford',
+        degree: 'MS',
+        field: 'AI',
+        start_date: '2022-09',
+        current: true,
+      },
+    ];
+
+    render(<EducationSection content={educations} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('MIT')).toBeInTheDocument();
+    expect(screen.getByText('Stanford')).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/experience-section.test.tsx b/__tests__/experience-section.test.tsx
new file mode 100644
index 000000000..c64729ab5
--- /dev/null
+++ b/__tests__/experience-section.test.tsx
@@ -0,0 +1,261 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ExperienceSection } from '@/components/resume/sections/ExperienceSection';
+import { Experience } from '@/types/resume';
+
+describe('ExperienceSection', () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('should render empty state when no experience entries exist', () => {
+    render(<ExperienceSection content={[]} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('No work experience entries yet')).toBeInTheDocument();
+    expect(screen.getByText('Click "Add Experience" to get started')).toBeInTheDocument();
+  });
+
+  it('should render add experience button', () => {
+    render(<ExperienceSection content={[]} onChange={mockOnChange} />);
+    
+    expect(screen.getByRole('button', { name: /add experience/i })).toBeInTheDocument();
+  });
+
+  it('should add a new experience entry when add button is clicked', () => {
+    render(<ExperienceSection content={[]} onChange={mockOnChange} />);
+    
+    const addButton = screen.getByRole('button', { name: /add experience/i });
+    fireEvent.click(addButton);
+    
+    expect(mockOnChange).toHaveBeenCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({
+          company: '',
+          position: '',
+          location: '',
+          current: false,
+          description: '',
+          achievements: [],
+        })
+      ])
+    );
+  });
+
+  it('should render experience entry with all required fields', () => {
+    const experience: Experience = {
+      id: '1',
+      company: 'Google',
+      position: 'Software Engineer',
+      location: 'Mountain View, CA',
+      start_date: '2020-01',
+      end_date: '2023-05',
+      current: false,
+      description: 'Developed scalable web applications',
+      achievements: ['Led team of 5 engineers'],
+    };
+
+    render(<ExperienceSection content={[experience]} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('Software Engineer')).toBeInTheDocument();
+    expect(screen.getByText('Google • Mountain View, CA')).toBeInTheDocument();
+  });
+
+  it('should update position field', () => {
+    const experience: Experience = {
+      id: '1',
+      company: '',
+      position: '',
+      location: '',
+      start_date: '',
+      current: false,
+      description: '',
+      achievements: [],
+    };
+
+    render(<ExperienceSection content={[experience]} onChange={mockOnChange} />);
+    
+    const positionInput = screen.getByPlaceholderText('Software Engineer');
+    fireEvent.change(positionInput, { target: { value: 'Senior Developer' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        position: 'Senior Developer',
+      })
+    ]);
+  });
+
+  it('should update company field', () => {
+    const experience: Experience = {
+      id: '1',
+      company: '',
+      position: '',
+      location: '',
+      start_date: '',
+      current: false,
+      description: '',
+      achievements: [],
+    };
+
+    render(<ExperienceSection content={[experience]} onChange={mockOnChange} />);
+    
+    const companyInput = screen.getByPlaceholderText('Tech Company Inc.');
+    fireEvent.change(companyInput, { target: { value: 'Microsoft' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        company: 'Microsoft',
+      })
+    ]);
+  });
+
+  it('should update description field', () => {
+    const experience: Experience = {
+      id: '1',
+      company: 'Google',
+      position: 'Engineer',
+      location: 'CA',
+      start_date: '2020-01',
+      current: false,
+      description: '',
+      achievements: [],
+    };
+
+    render(<ExperienceSection content={[experience]} onChange={mockOnChange} />);
+    
+    const descriptionInput = screen.getByPlaceholderText(/Describe your role/i);
+    fireEvent.change(descriptionInput, { target: { value: 'Built amazing products' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        description: 'Built amazing products',
+      })
+    ]);
+  });
+
+  it('should handle current position checkbox correctly', () => {
+    const experience: Experience = {
+      id: '1',
+      company: 'Google',
+      position: 'Software Engineer',
+      location: 'CA',
+      start_date: '2020-01',
+      current: false,
+      description: 'Working on cool stuff',
+      achievements: [],
+    };
+
+    render(<ExperienceSection content={[experience]} onChange={mockOnChange} />);
+    
+    const currentCheckbox = screen.getByRole('checkbox', { name: /i currently work here/i });
+    fireEvent.click(currentCheckbox);
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        current: true,
+        end_date: undefined,
+      })
+    ]);
+  });
+
+  it('should add achievement to experience entry', () => {
+    const experience: Experience = {
+      id: '1',
+      company: 'Google',
+      position: 'Engineer',
+      location: 'CA',
+      start_date: '2020-01',
+      current: false,
+      description: 'Working',
+      achievements: [],
+    };
+
+    render(<ExperienceSection content={[experience]} onChange={mockOnChange} />);
+    
+    // Find the achievements section and click its Add button
+    const achievementsLabel = screen.getByText('Key Achievements & Responsibilities');
+    const achievementsSection = achievementsLabel.closest('div');
+    
+    if (achievementsSection) {
+      const addButton = achievementsSection.querySelector('button');
+      if (addButton) {
+        fireEvent.click(addButton);
+        
+        expect(mockOnChange).toHaveBeenCalledWith([
+          expect.objectContaining({
+            achievements: [''],
+          })
+        ]);
+      }
+    }
+  });
+
+  it('should remove experience entry', () => {
+    const experience: Experience = {
+      id: '1',
+      company: 'Google',
+      position: 'Engineer',
+      location: 'CA',
+      start_date: '2020-01',
+      current: false,
+      description: 'Working',
+      achievements: [],
+    };
+
+    render(<ExperienceSection content={[experience]} onChange={mockOnChange} />);
+    
+    const deleteButton = screen.getByRole('button', { name: '' });
+    fireEvent.click(deleteButton);
+    
+    expect(mockOnChange).toHaveBeenCalledWith([]);
+  });
+
+  it('should render multiple experience entries', () => {
+    const experiences: Experience[] = [
+      {
+        id: '1',
+        company: 'Google',
+        position: 'Software Engineer',
+        location: 'CA',
+        start_date: '2020-01',
+        current: false,
+        description: 'Working',
+        achievements: [],
+      },
+      {
+        id: '2',
+        company: 'Microsoft',
+        position: 'Senior Engineer',
+        location: 'WA',
+        start_date: '2023-06',
+        current: true,
+        description: 'Leading',
+        achievements: [],
+      },
+    ];
+
+    render(<ExperienceSection content={experiences} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('Software Engineer')).toBeInTheDocument();
+    expect(screen.getByText('Senior Engineer')).toBeInTheDocument();
+  });
+
+  it('should display character count for description', () => {
+    const experience: Experience = {
+      id: '1',
+      company: 'Google',
+      position: 'Engineer',
+      location: 'CA',
+      start_date: '2020-01',
+      current: false,
+      description: 'Test description',
+      achievements: [],
+    };
+
+    render(<ExperienceSection content={[experience]} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('16 characters')).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/mobile-optimizations.test.tsx b/__tests__/mobile-optimizations.test.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/__tests__/performance.test.tsx b/__tests__/performance.test.tsx
new file mode 100644
index 000000000..a3d0f0534
--- /dev/null
+++ b/__tests__/performance.test.tsx
@@ -0,0 +1,619 @@
+/**
+ * Performance Tests
+ * Tests for performance requirements and optimization
+ */
+
+import { describe, test, expect, jest, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom';
+import type { Resume, ResumeSection } from '@/types/resume';
+
+describe('Performance Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Auto-save Performance', () => {
+    test('should debounce save operations within 2 seconds', async () => {
+      const saveFn = jest.fn();
+      const debounceDelay = 2000;
+      let timeoutId: NodeJS.Timeout | null = null;
+
+      const debouncedSave = (data: any) => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+          saveFn(data);
+        }, debounceDelay);
+      };
+
+      // Simulate rapid changes
+      debouncedSave({ change: 1 });
+      debouncedSave({ change: 2 });
+      debouncedSave({ change: 3 });
+
+      // Save should not be called immediately
+      expect(saveFn).not.toHaveBeenCalled();
+
+      // Wait for debounce delay
+      await new Promise(resolve => setTimeout(resolve, debounceDelay + 100));
+
+      // Save should be called once with the last change
+      expect(saveFn).toHaveBeenCalledTimes(1);
+      expect(saveFn).toHaveBeenCalledWith({ change: 3 });
+    });
+
+    test('should handle multiple rapid updates efficiently', () => {
+      const updates: any[] = [];
+      const maxUpdates = 100;
+
+      const startTime = performance.now();
+
+      for (let i = 0; i < maxUpdates; i++) {
+        updates.push({ id: i, value: `update-${i}` });
+      }
+
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+
+      // Should handle 100 updates in less than 100ms
+      expect(duration).toBeLessThan(100);
+      expect(updates).toHaveLength(maxUpdates);
+    });
+
+    test('should queue save operations correctly', () => {
+      const saveQueue: any[] = [];
+      const maxQueueSize = 10;
+
+      const queueSave = (data: any) => {
+        if (saveQueue.length >= maxQueueSize) {
+          saveQueue.shift(); // Remove oldest
+        }
+        saveQueue.push(data);
+      };
+
+      // Add more than max queue size
+      for (let i = 0; i < 15; i++) {
+        queueSave({ change: i });
+      }
+
+      // Queue should not exceed max size
+      expect(saveQueue.length).toBeLessThanOrEqual(maxQueueSize);
+      // Should have the most recent items
+      expect(saveQueue[saveQueue.length - 1]).toEqual({ change: 14 });
+    });
+  });
+
+  describe('Preview Rendering Performance', () => {
+    test('should update preview within 500ms requirement', async () => {
+      const maxUpdateTime = 500; // ms
+      
+      const mockResume: Resume = {
+        id: 'test-id',
+        user_id: 'user-id',
+        title: 'Test Resume',
+        template_id: 'modern',
+        sections: [
+          {
+            id: 'section-1',
+            type: 'personal_info',
+            title: 'Personal Information',
+            order: 0,
+            visible: true,
+            content: {
+              full_name: 'John Doe',
+              email: 'john@example.com',
+              phone: '+1234567890',
+              location: 'New York, NY',
+            },
+          },
+        ],
+        styling: {
+          font_family: 'Inter',
+          font_size_body: 11,
+          font_size_heading: 16,
+          color_primary: '#8b5cf6',
+          color_text: '#000000',
+          color_accent: '#6366f1',
+          margin_top: 0.75,
+          margin_bottom: 0.75,
+          margin_left: 0.75,
+          margin_right: 0.75,
+          line_height: 1.5,
+          section_spacing: 1.5,
+        },
+        metadata: {
+          page_count: 1,
+          word_count: 50,
+          completeness_score: 25,
+          export_count: 0,
+        },
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+      };
+
+      const startTime = performance.now();
+
+      // Simulate preview update
+      const updatedResume = {
+        ...mockResume,
+        sections: mockResume.sections.map(s => ({
+          ...s,
+          content: { ...s.content },
+        })),
+      };
+
+      const endTime = performance.now();
+      const updateTime = endTime - startTime;
+
+      // Update should be fast (well under 500ms)
+      expect(updateTime).toBeLessThan(maxUpdateTime);
+      expect(updatedResume).toBeDefined();
+    });
+
+    test('should handle large resumes efficiently', () => {
+      const maxSections = 20;
+      const sections: ResumeSection[] = [];
+
+      const startTime = performance.now();
+
+      // Create a large resume with many sections
+      for (let i = 0; i < maxSections; i++) {
+        sections.push({
+          id: `section-${i}`,
+          type: 'experience',
+          title: `Experience ${i}`,
+          order: i,
+          visible: true,
+          content: [
+            {
+              id: `exp-${i}`,
+              company: `Company ${i}`,
+              position: `Position ${i}`,
+              location: 'Location',
+              start_date: '2020-01',
+              end_date: '2021-01',
+              current: false,
+              description: 'Description '.repeat(50), // Long description
+              achievements: Array(10).fill('Achievement'),
+            },
+          ],
+        });
+      }
+
+      const endTime = performance.now();
+      const creationTime = endTime - startTime;
+
+      // Should create large resume quickly
+      expect(creationTime).toBeLessThan(100);
+      expect(sections).toHaveLength(maxSections);
+    });
+
+    test('should calculate page count efficiently', () => {
+      const calculatePageCount = (wordCount: number): number => {
+        const wordsPerPage = 500;
+        return Math.max(1, Math.ceil(wordCount / wordsPerPage));
+      };
+
+      const startTime = performance.now();
+
+      // Test with various word counts
+      const testCases = [0, 100, 500, 1000, 2500, 5000];
+      const results = testCases.map(wc => calculatePageCount(wc));
+
+      const endTime = performance.now();
+      const calculationTime = endTime - startTime;
+
+      // Should calculate quickly
+      expect(calculationTime).toBeLessThan(10);
+      expect(results).toEqual([1, 1, 1, 2, 5, 10]);
+    });
+  });
+
+  describe('Export Performance', () => {
+    test('should prepare PDF export data within 3 seconds', async () => {
+      const maxExportTime = 3000; // ms
+
+      const mockResume: Resume = {
+        id: 'test-id',
+        user_id: 'user-id',
+        title: 'Test Resume',
+        template_id: 'modern',
+        sections: [
+          {
+            id: 'section-1',
+            type: 'personal_info',
+            title: 'Personal Information',
+            order: 0,
+            visible: true,
+            content: {
+              full_name: 'John Doe',
+              email: 'john@example.com',
+              phone: '+1234567890',
+              location: 'New York, NY',
+            },
+          },
+        ],
+        styling: {
+          font_family: 'Inter',
+          font_size_body: 11,
+          font_size_heading: 16,
+          color_primary: '#8b5cf6',
+          color_text: '#000000',
+          color_accent: '#6366f1',
+          margin_top: 0.75,
+          margin_bottom: 0.75,
+          margin_left: 0.75,
+          margin_right: 0.75,
+          line_height: 1.5,
+          section_spacing: 1.5,
+        },
+        metadata: {
+          page_count: 1,
+          word_count: 250,
+          completeness_score: 75,
+          export_count: 0,
+        },
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+      };
+
+      const startTime = performance.now();
+
+      // Simulate export preparation
+      const exportData = JSON.stringify(mockResume);
+      const blob = new Blob([exportData], { type: 'application/json' });
+
+      const endTime = performance.now();
+      const exportTime = endTime - startTime;
+
+      // Export preparation should be fast
+      expect(exportTime).toBeLessThan(maxExportTime);
+      expect(blob.size).toBeGreaterThan(0);
+    });
+
+    test('should prepare DOCX export data within 3 seconds', async () => {
+      const maxExportTime = 3000; // ms
+
+      const mockResume = {
+        title: 'Test Resume',
+        sections: [
+          {
+            type: 'personal_info',
+            content: {
+              full_name: 'John Doe',
+              email: 'john@example.com',
+            },
+          },
+        ],
+      };
+
+      const startTime = performance.now();
+
+      // Simulate DOCX data preparation
+      const docxData = JSON.stringify(mockResume);
+      const blob = new Blob([docxData], { 
+        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
+      });
+
+      const endTime = performance.now();
+      const exportTime = endTime - startTime;
+
+      // Export preparation should be fast
+      expect(exportTime).toBeLessThan(maxExportTime);
+      expect(blob.size).toBeGreaterThan(0);
+    });
+
+    test('should handle JSON export instantly', () => {
+      const mockResume = {
+        id: 'test-id',
+        title: 'Test Resume',
+        sections: Array(10).fill({
+          type: 'experience',
+          content: [{ company: 'Company', position: 'Position' }],
+        }),
+      };
+
+      const startTime = performance.now();
+
+      const jsonString = JSON.stringify(mockResume, null, 2);
+
+      const endTime = performance.now();
+      const exportTime = endTime - startTime;
+
+      // JSON export should be nearly instant
+      expect(exportTime).toBeLessThan(50);
+      expect(jsonString.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Section Reordering Performance', () => {
+    test('should reorder sections quickly', () => {
+      const sections: ResumeSection[] = Array(10).fill(null).map((_, i) => ({
+        id: `section-${i}`,
+        type: 'experience',
+        title: `Section ${i}`,
+        order: i,
+        visible: true,
+        content: [],
+      }));
+
+      const startTime = performance.now();
+
+      // Reorder: move last section to first
+      const reordered = [
+        sections[9],
+        ...sections.slice(0, 9),
+      ].map((section, index) => ({
+        ...section,
+        order: index,
+      }));
+
+      const endTime = performance.now();
+      const reorderTime = endTime - startTime;
+
+      // Reordering should be fast
+      expect(reorderTime).toBeLessThan(10);
+      expect(reordered[0].id).toBe('section-9');
+      expect(reordered[0].order).toBe(0);
+    });
+
+    test('should handle drag-and-drop calculations efficiently', () => {
+      const items = Array(20).fill(null).map((_, i) => ({
+        id: `item-${i}`,
+        position: i,
+      }));
+
+      const startTime = performance.now();
+
+      // Simulate drag from position 5 to position 15
+      const draggedItem = items[5];
+      const filtered = items.filter(item => item.id !== draggedItem.id);
+      const reordered = [
+        ...filtered.slice(0, 15),
+        draggedItem,
+        ...filtered.slice(15),
+      ];
+
+      const endTime = performance.now();
+      const calculationTime = endTime - startTime;
+
+      // Calculation should be fast
+      expect(calculationTime).toBeLessThan(10);
+      expect(reordered).toHaveLength(20);
+    });
+  });
+
+  describe('Memory Management', () => {
+    test('should not create memory leaks with repeated operations', () => {
+      const operations = 1000;
+      const objects: any[] = [];
+
+      const startTime = performance.now();
+
+      for (let i = 0; i < operations; i++) {
+        const obj = {
+          id: i,
+          data: `data-${i}`,
+          timestamp: Date.now(),
+        };
+        objects.push(obj);
+      }
+
+      // Clear references
+      objects.length = 0;
+
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+
+      // Should handle many operations efficiently
+      expect(duration).toBeLessThan(100);
+      expect(objects).toHaveLength(0);
+    });
+
+    test('should handle large data structures efficiently', () => {
+      const largeResume = {
+        id: 'large-resume',
+        sections: Array(50).fill(null).map((_, i) => ({
+          id: `section-${i}`,
+          type: 'experience',
+          content: Array(10).fill(null).map((_, j) => ({
+            id: `item-${i}-${j}`,
+            description: 'Description '.repeat(100),
+            achievements: Array(20).fill('Achievement'),
+          })),
+        })),
+      };
+
+      const startTime = performance.now();
+
+      // Serialize and deserialize
+      const serialized = JSON.stringify(largeResume);
+      const deserialized = JSON.parse(serialized);
+
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+
+      // Should handle large data efficiently
+      expect(duration).toBeLessThan(500);
+      expect(deserialized.sections).toHaveLength(50);
+    });
+  });
+
+  describe('Optimistic UI Updates', () => {
+    test('should apply optimistic updates immediately', () => {
+      const initialState = {
+        saving: false,
+        data: { value: 'initial' },
+      };
+
+      const startTime = performance.now();
+
+      // Apply optimistic update
+      const optimisticState = {
+        ...initialState,
+        saving: true,
+        data: { value: 'updated' },
+      };
+
+      const endTime = performance.now();
+      const updateTime = endTime - startTime;
+
+      // Update should be instant
+      expect(updateTime).toBeLessThan(5);
+      expect(optimisticState.data.value).toBe('updated');
+      expect(optimisticState.saving).toBe(true);
+    });
+
+    test('should rollback on error efficiently', () => {
+      const currentState = { value: 'current' };
+      const previousState = { value: 'previous' };
+
+      const startTime = performance.now();
+
+      // Simulate rollback
+      const rolledBack = { ...previousState };
+
+      const endTime = performance.now();
+      const rollbackTime = endTime - startTime;
+
+      // Rollback should be instant
+      expect(rollbackTime).toBeLessThan(5);
+      expect(rolledBack.value).toBe('previous');
+    });
+  });
+
+  describe('Template Switching Performance', () => {
+    test('should switch templates within 500ms', () => {
+      const mockResume: Partial<Resume> = {
+        template_id: 'modern',
+        sections: Array(10).fill({
+          id: 'section',
+          type: 'experience',
+          content: [{ company: 'Company' }],
+        }),
+      };
+
+      const startTime = performance.now();
+
+      // Switch template
+      const updatedResume = {
+        ...mockResume,
+        template_id: 'classic',
+      };
+
+      const endTime = performance.now();
+      const switchTime = endTime - startTime;
+
+      // Template switch should be instant
+      expect(switchTime).toBeLessThan(500);
+      expect(updatedResume.template_id).toBe('classic');
+    });
+  });
+
+  describe('Validation Performance', () => {
+    test('should validate email quickly', () => {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      const testEmails = [
+        'valid@example.com',
+        'invalid-email',
+        'another@test.org',
+        'bad@',
+        'good@domain.co.uk',
+      ];
+
+      const startTime = performance.now();
+
+      const results = testEmails.map(email => emailRegex.test(email));
+
+      const endTime = performance.now();
+      const validationTime = endTime - startTime;
+
+      // Validation should be fast
+      expect(validationTime).toBeLessThan(10);
+      expect(results).toEqual([true, false, true, false, true]);
+    });
+
+    test('should validate URLs quickly', () => {
+      const urlRegex = /^https?:\/\/.+/;
+      const testUrls = [
+        'https://example.com',
+        'http://test.org',
+        'invalid-url',
+        'https://github.com/user',
+      ];
+
+      const startTime = performance.now();
+
+      const results = testUrls.map(url => urlRegex.test(url));
+
+      const endTime = performance.now();
+      const validationTime = endTime - startTime;
+
+      // Validation should be fast
+      expect(validationTime).toBeLessThan(10);
+      expect(results).toEqual([true, true, false, true]);
+    });
+  });
+
+  describe('Scoring Performance', () => {
+    test('should calculate resume score quickly', () => {
+      const sections: ResumeSection[] = [
+        {
+          id: '1',
+          type: 'personal_info',
+          title: 'Personal Info',
+          order: 0,
+          visible: true,
+          content: { full_name: 'John', email: 'john@example.com', phone: '', location: '' },
+        },
+        {
+          id: '2',
+          type: 'experience',
+          title: 'Experience',
+          order: 1,
+          visible: true,
+          content: [{ id: '1', company: 'Company', position: 'Developer', location: '', start_date: '2020-01', current: true, description: '', achievements: [] }],
+        },
+        {
+          id: '3',
+          type: 'education',
+          title: 'Education',
+          order: 2,
+          visible: true,
+          content: [{ id: '1', institution: 'University', degree: 'BS', field: 'CS', start_date: '2016-09', end_date: '2020-05', current: false }],
+        },
+      ];
+
+      const weights: Record<string, number> = {
+        personal_info: 20,
+        education: 15,
+        experience: 25,
+        projects: 15,
+        skills: 15,
+        certifications: 5,
+        awards: 5,
+      };
+
+      const startTime = performance.now();
+
+      let score = 0;
+      sections.forEach(section => {
+        const weight = weights[section.type] || 0;
+        const isComplete = section.visible && 
+          (Array.isArray(section.content) ? section.content.length > 0 : true);
+        
+        if (isComplete) {
+          score += weight;
+        }
+      });
+
+      const endTime = performance.now();
+      const calculationTime = endTime - startTime;
+
+      // Score calculation should be fast
+      expect(calculationTime).toBeLessThan(10);
+      expect(score).toBe(60); // 20 + 25 + 15
+    });
+  });
+});
diff --git a/__tests__/personal-info-section.test.tsx b/__tests__/personal-info-section.test.tsx
new file mode 100644
index 000000000..1231a66a3
--- /dev/null
+++ b/__tests__/personal-info-section.test.tsx
@@ -0,0 +1,227 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { PersonalInfoSection } from '@/components/resume/sections/PersonalInfoSection';
+import { PersonalInfo } from '@/types/resume';
+
+describe('PersonalInfoSection', () => {
+  const mockOnChange = jest.fn();
+  
+  const defaultContent: PersonalInfo = {
+    full_name: '',
+    email: '',
+    phone: '',
+    location: '',
+    website: '',
+    linkedin: '',
+    github: '',
+    summary: '',
+  };
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('renders all required fields', () => {
+    render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    expect(screen.getByLabelText(/full name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/phone/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/location/i)).toBeInTheDocument();
+  });
+
+  it('renders optional fields', () => {
+    render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    expect(screen.getByLabelText(/website/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/linkedin/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/github/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/professional summary/i)).toBeInTheDocument();
+  });
+
+  it('calls onChange when full name is updated', () => {
+    render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    const input = screen.getByLabelText(/full name/i);
+    fireEvent.change(input, { target: { value: 'John Doe' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith({
+      ...defaultContent,
+      full_name: 'John Doe',
+    });
+  });
+
+  it('validates email format and shows error for invalid email', async () => {
+    const { rerender } = render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    const emailInput = screen.getByLabelText(/email/i);
+    
+    // Enter invalid email
+    fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
+    
+    // Rerender with updated content
+    const updatedContent = { ...defaultContent, email: 'invalid-email' };
+    rerender(<PersonalInfoSection content={updatedContent} onChange={mockOnChange} />);
+    
+    fireEvent.blur(emailInput);
+    
+    await waitFor(() => {
+      expect(screen.getByText(/please enter a valid email address/i)).toBeInTheDocument();
+    });
+  });
+
+  it('does not show error for valid email', async () => {
+    render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    const emailInput = screen.getByLabelText(/email/i);
+    
+    // Enter valid email
+    fireEvent.change(emailInput, { target: { value: 'john@example.com' } });
+    fireEvent.blur(emailInput);
+    
+    await waitFor(() => {
+      expect(screen.queryByText(/please enter a valid email address/i)).not.toBeInTheDocument();
+    });
+  });
+
+  it('validates website URL and shows error for invalid URL', async () => {
+    const { rerender } = render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    const websiteInput = screen.getByLabelText(/website/i);
+    
+    // Enter invalid URL
+    fireEvent.change(websiteInput, { target: { value: 'not a url' } });
+    
+    // Rerender with updated content
+    const updatedContent = { ...defaultContent, website: 'not a url' };
+    rerender(<PersonalInfoSection content={updatedContent} onChange={mockOnChange} />);
+    
+    fireEvent.blur(websiteInput);
+    
+    await waitFor(() => {
+      expect(screen.getByText(/please enter a valid url/i)).toBeInTheDocument();
+    });
+  });
+
+  it('accepts valid website URL', async () => {
+    render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    const websiteInput = screen.getByLabelText(/website/i);
+    
+    // Enter valid URL
+    fireEvent.change(websiteInput, { target: { value: 'https://johndoe.com' } });
+    fireEvent.blur(websiteInput);
+    
+    await waitFor(() => {
+      expect(screen.queryByText(/please enter a valid url/i)).not.toBeInTheDocument();
+    });
+  });
+
+  it('validates LinkedIn URL format', async () => {
+    const { rerender } = render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    const linkedinInput = screen.getByLabelText(/linkedin/i);
+    
+    // Enter invalid LinkedIn URL (with spaces which are not allowed)
+    fireEvent.change(linkedinInput, { target: { value: 'not a linkedin url' } });
+    
+    // Rerender with updated content
+    const updatedContent = { ...defaultContent, linkedin: 'not a linkedin url' };
+    rerender(<PersonalInfoSection content={updatedContent} onChange={mockOnChange} />);
+    
+    fireEvent.blur(linkedinInput);
+    
+    await waitFor(() => {
+      expect(screen.getByText(/please enter a valid linkedin url or username/i)).toBeInTheDocument();
+    });
+  });
+
+  it('accepts valid LinkedIn username', async () => {
+    render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    const linkedinInput = screen.getByLabelText(/linkedin/i);
+    
+    // Enter valid username
+    fireEvent.change(linkedinInput, { target: { value: 'johndoe' } });
+    fireEvent.blur(linkedinInput);
+    
+    await waitFor(() => {
+      expect(screen.queryByText(/please enter a valid linkedin url or username/i)).not.toBeInTheDocument();
+    });
+  });
+
+  it('validates GitHub URL format', async () => {
+    const { rerender } = render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    const githubInput = screen.getByLabelText(/github/i);
+    
+    // Enter invalid GitHub URL (with spaces which are not allowed)
+    fireEvent.change(githubInput, { target: { value: 'not a github url' } });
+    
+    // Rerender with updated content
+    const updatedContent = { ...defaultContent, github: 'not a github url' };
+    rerender(<PersonalInfoSection content={updatedContent} onChange={mockOnChange} />);
+    
+    fireEvent.blur(githubInput);
+    
+    await waitFor(() => {
+      expect(screen.getByText(/please enter a valid github url or username/i)).toBeInTheDocument();
+    });
+  });
+
+  it('accepts valid GitHub username', async () => {
+    render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    const githubInput = screen.getByLabelText(/github/i);
+    
+    // Enter valid username
+    fireEvent.change(githubInput, { target: { value: 'johndoe' } });
+    fireEvent.blur(githubInput);
+    
+    await waitFor(() => {
+      expect(screen.queryByText(/please enter a valid github url or username/i)).not.toBeInTheDocument();
+    });
+  });
+
+  it('displays character count for summary', () => {
+    const contentWithSummary: PersonalInfo = {
+      ...defaultContent,
+      summary: 'This is a test summary',
+    };
+    
+    render(<PersonalInfoSection content={contentWithSummary} onChange={mockOnChange} />);
+    
+    expect(screen.getByText(/22 characters/i)).toBeInTheDocument();
+  });
+
+  it('updates summary and character count', () => {
+    render(<PersonalInfoSection content={defaultContent} onChange={mockOnChange} />);
+    
+    const summaryInput = screen.getByLabelText(/professional summary/i);
+    fireEvent.change(summaryInput, { target: { value: 'New summary text' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith({
+      ...defaultContent,
+      summary: 'New summary text',
+    });
+  });
+
+  it('displays pre-filled content correctly', () => {
+    const filledContent: PersonalInfo = {
+      full_name: 'John Doe',
+      email: 'john@example.com',
+      phone: '+1 555-1234',
+      location: 'San Francisco, CA',
+      website: 'https://johndoe.com',
+      linkedin: 'linkedin.com/in/johndoe',
+      github: 'github.com/johndoe',
+      summary: 'Experienced software engineer',
+    };
+    
+    render(<PersonalInfoSection content={filledContent} onChange={mockOnChange} />);
+    
+    expect(screen.getByDisplayValue('John Doe')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('john@example.com')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('+1 555-1234')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('San Francisco, CA')).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/projects-section.test.tsx b/__tests__/projects-section.test.tsx
new file mode 100644
index 000000000..f231c89a7
--- /dev/null
+++ b/__tests__/projects-section.test.tsx
@@ -0,0 +1,335 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ProjectsSection } from '@/components/resume/sections/ProjectsSection';
+import { Project } from '@/types/resume';
+
+describe('ProjectsSection', () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('should render empty state when no projects exist', () => {
+    render(<ProjectsSection content={[]} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('No projects yet')).toBeInTheDocument();
+    expect(screen.getByText('Click "Add Project" to get started')).toBeInTheDocument();
+  });
+
+  it('should render add project button', () => {
+    render(<ProjectsSection content={[]} onChange={mockOnChange} />);
+    
+    expect(screen.getByRole('button', { name: /add project/i })).toBeInTheDocument();
+  });
+
+  it('should add a new project entry when add button is clicked', () => {
+    render(<ProjectsSection content={[]} onChange={mockOnChange} />);
+    
+    const addButton = screen.getByRole('button', { name: /add project/i });
+    fireEvent.click(addButton);
+    
+    expect(mockOnChange).toHaveBeenCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({
+          name: '',
+          description: '',
+          technologies: [],
+        })
+      ])
+    );
+  });
+
+  it('should render project entry with all fields', () => {
+    const project: Project = {
+      id: '1',
+      name: 'E-commerce Platform',
+      description: 'A full-stack e-commerce solution',
+      technologies: ['React', 'Node.js', 'PostgreSQL'],
+      url: 'https://example.com',
+      github: 'https://github.com/user/repo',
+      start_date: '2023-01',
+      end_date: '2023-12',
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('E-commerce Platform')).toBeInTheDocument();
+    expect(screen.getAllByText('A full-stack e-commerce solution').length).toBeGreaterThan(0);
+  });
+
+  it('should update project name field', () => {
+    const project: Project = {
+      id: '1',
+      name: '',
+      description: '',
+      technologies: [],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    const nameInput = screen.getByPlaceholderText('E-commerce Platform');
+    fireEvent.change(nameInput, { target: { value: 'My Awesome Project' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        name: 'My Awesome Project',
+      })
+    ]);
+  });
+
+  it('should update project description field', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test Project',
+      description: '',
+      technologies: [],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    const descriptionInput = screen.getByPlaceholderText(/describe the project/i);
+    fireEvent.change(descriptionInput, { target: { value: 'A test description' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        description: 'A test description',
+      })
+    ]);
+  });
+
+  it('should add technology tag', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test Project',
+      description: 'Test',
+      technologies: [],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    const techInput = screen.getByPlaceholderText(/e.g., React, Node.js/i);
+    fireEvent.change(techInput, { target: { value: 'React' } });
+    
+    // Find the small + button next to the tech input (not the "Add Project" button)
+    const buttons = screen.getAllByRole('button');
+    const addTechButton = buttons.find(btn => {
+      const svg = btn.querySelector('svg');
+      return svg && btn.className.includes('h-8') && !btn.textContent?.includes('Add Project');
+    });
+    
+    if (addTechButton) {
+      fireEvent.click(addTechButton);
+      
+      expect(mockOnChange).toHaveBeenCalledWith([
+        expect.objectContaining({
+          technologies: ['React'],
+        })
+      ]);
+    }
+  });
+
+  it('should add technology tag on Enter key press', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test Project',
+      description: 'Test',
+      technologies: [],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    const techInput = screen.getByPlaceholderText(/e.g., React, Node.js/i);
+    fireEvent.change(techInput, { target: { value: 'TypeScript' } });
+    fireEvent.keyDown(techInput, { key: 'Enter', code: 'Enter' });
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        technologies: ['TypeScript'],
+      })
+    ]);
+  });
+
+  it('should display technology badges', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test Project',
+      description: 'Test',
+      technologies: ['React', 'Node.js', 'PostgreSQL'],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    // Technologies appear in both collapsed and expanded views
+    expect(screen.getAllByText('React').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Node.js').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('PostgreSQL').length).toBeGreaterThan(0);
+  });
+
+  it('should remove technology tag', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test Project',
+      description: 'Test',
+      technologies: ['React', 'Node.js'],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    // Find all React badges and get the one in the expanded view (with remove button)
+    const reactBadges = screen.getAllByText('React');
+    const expandedBadge = reactBadges.find(badge => {
+      const parent = badge.closest('div');
+      return parent?.querySelector('button') !== null;
+    });
+    
+    const removeButton = expandedBadge?.closest('div')?.querySelector('button');
+    
+    if (removeButton) {
+      fireEvent.click(removeButton);
+      
+      expect(mockOnChange).toHaveBeenCalledWith([
+        expect.objectContaining({
+          technologies: ['Node.js'],
+        })
+      ]);
+    }
+  });
+
+  it('should update project URL fields', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test Project',
+      description: 'Test',
+      technologies: [],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    const urlInput = screen.getByPlaceholderText('https://project-demo.com');
+    fireEvent.change(urlInput, { target: { value: 'https://myproject.com' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        url: 'https://myproject.com',
+      })
+    ]);
+  });
+
+  it('should update GitHub URL field', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test Project',
+      description: 'Test',
+      technologies: [],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    const githubInput = screen.getByPlaceholderText('https://github.com/username/repo');
+    fireEvent.change(githubInput, { target: { value: 'https://github.com/test/repo' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        github: 'https://github.com/test/repo',
+      })
+    ]);
+  });
+
+  it('should update optional date fields', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test Project',
+      description: 'Test',
+      technologies: [],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    const startDateInputs = screen.getAllByLabelText(/start date/i);
+    const startDateInput = startDateInputs[0];
+    fireEvent.change(startDateInput, { target: { value: '2023-01' } });
+    
+    expect(mockOnChange).toHaveBeenCalledWith([
+      expect.objectContaining({
+        start_date: '2023-01',
+      })
+    ]);
+  });
+
+  it('should remove project entry', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test Project',
+      description: 'Test',
+      technologies: [],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    // Find the delete button (trash icon) - it has text-destructive class
+    const buttons = screen.getAllByRole('button');
+    const deleteButton = buttons.find(btn => 
+      btn.className.includes('text-destructive')
+    );
+    
+    if (deleteButton) {
+      fireEvent.click(deleteButton);
+      expect(mockOnChange).toHaveBeenCalledWith([]);
+    }
+  });
+
+  it('should render multiple project entries', () => {
+    const projects: Project[] = [
+      {
+        id: '1',
+        name: 'Project One',
+        description: 'First project',
+        technologies: ['React'],
+      },
+      {
+        id: '2',
+        name: 'Project Two',
+        description: 'Second project',
+        technologies: ['Vue'],
+      },
+    ];
+
+    render(<ProjectsSection content={projects} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('Project One')).toBeInTheDocument();
+    expect(screen.getByText('Project Two')).toBeInTheDocument();
+  });
+
+  it('should show character count for description', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test',
+      description: 'Hello',
+      technologies: [],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    expect(screen.getByText('5 characters')).toBeInTheDocument();
+  });
+
+  it('should display truncated technologies in collapsed view', () => {
+    const project: Project = {
+      id: '1',
+      name: 'Test Project',
+      description: 'Test',
+      technologies: ['React', 'Node.js', 'PostgreSQL', 'TypeScript', 'Docker'],
+    };
+
+    render(<ProjectsSection content={[project]} onChange={mockOnChange} />);
+    
+    // Collapse the project
+    const projectHeader = screen.getByText('Test Project');
+    fireEvent.click(projectHeader);
+    
+    // Should show first 3 technologies and a +2 badge
+    expect(screen.getByText('+2')).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/resume-builder-layout.test.tsx b/__tests__/resume-builder-layout.test.tsx
new file mode 100644
index 000000000..71d418e06
--- /dev/null
+++ b/__tests__/resume-builder-layout.test.tsx
@@ -0,0 +1,141 @@
+/**
+ * Resume Builder Layout Tests
+ * Tests for responsive layout behavior
+ */
+
+import { describe, test, expect, jest, beforeEach } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { ResumeBuilderLayout } from '@/components/resume/ResumeBuilderLayout';
+import '@testing-library/jest-dom';
+import React from 'react';
+
+// Mock the hooks
+const mockUseIsMobile = jest.fn();
+const mockUseResume = jest.fn();
+
+jest.mock('@/hooks/use-mobile', () => ({
+  useIsMobile: () => mockUseIsMobile(),
+}));
+
+jest.mock('@/contexts/ResumeContext', () => ({
+  useResume: () => mockUseResume(),
+  ResumeProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+// Mock child components
+jest.mock('@/components/resume/ResumeEditor', () => ({
+  ResumeEditor: () => <div data-testid="resume-editor">Resume Editor</div>,
+}));
+
+jest.mock('@/components/resume/ResumePreview', () => ({
+  ResumePreview: () => <div data-testid="resume-preview">Resume Preview</div>,
+}));
+
+describe('ResumeBuilderLayout', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    
+    // Default mock implementation
+    mockUseResume.mockReturnValue({
+      resume: null,
+      resumes: [],
+      loading: false,
+      saving: false,
+      error: null,
+    });
+    
+    mockUseIsMobile.mockReturnValue(false);
+  });
+
+  describe('Loading State', () => {
+    test('should display loading spinner when loading', () => {
+      mockUseResume.mockReturnValue({
+        resume: null,
+        resumes: [],
+        loading: true,
+        saving: false,
+        error: null,
+      });
+      
+      mockUseIsMobile.mockReturnValue(false);
+
+      render(<ResumeBuilderLayout />);
+
+      expect(screen.getByText('Loading Resume Builder...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Desktop Layout', () => {
+    test('should render split-panel layout on desktop', () => {
+      mockUseIsMobile.mockReturnValue(false);
+
+      render(<ResumeBuilderLayout />);
+
+      // Both editor and preview should be visible
+      expect(screen.getByTestId('resume-editor')).toBeInTheDocument();
+      expect(screen.getByTestId('resume-preview')).toBeInTheDocument();
+    });
+
+    test('should not render tabs on desktop', () => {
+      mockUseIsMobile.mockReturnValue(false);
+
+      render(<ResumeBuilderLayout />);
+
+      // Tab triggers should not be present
+      expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+      expect(screen.queryByText('Preview')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Mobile Layout', () => {
+    test('should render tabbed interface on mobile', () => {
+      mockUseIsMobile.mockReturnValue(true);
+
+      render(<ResumeBuilderLayout />);
+
+      // Tab triggers should be present
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+      expect(screen.getByText('Preview')).toBeInTheDocument();
+    });
+
+    test('should show editor by default on mobile', () => {
+      mockUseIsMobile.mockReturnValue(true);
+
+      render(<ResumeBuilderLayout />);
+
+      // Editor should be visible by default
+      expect(screen.getByTestId('resume-editor')).toBeInTheDocument();
+    });
+  });
+
+  describe('Responsive Breakpoint Detection', () => {
+    test('should handle breakpoint changes', () => {
+      // Start with desktop
+      mockUseIsMobile.mockReturnValue(false);
+      const { rerender } = render(<ResumeBuilderLayout />);
+
+      // Verify split-panel layout
+      expect(screen.getByTestId('resume-editor')).toBeInTheDocument();
+      expect(screen.getByTestId('resume-preview')).toBeInTheDocument();
+
+      // Switch to mobile
+      mockUseIsMobile.mockReturnValue(true);
+      rerender(<ResumeBuilderLayout />);
+
+      // Verify tabbed interface
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+      expect(screen.getByText('Preview')).toBeInTheDocument();
+    });
+  });
+
+  describe('Hydration Safety', () => {
+    test('should handle hydration without errors', () => {
+      mockUseIsMobile.mockReturnValue(false);
+
+      const { container } = render(<ResumeBuilderLayout />);
+
+      // Component should render without throwing
+      expect(container).toBeInTheDocument();
+    });
+  });
+});
diff --git a/__tests__/resume-context.test.ts b/__tests__/resume-context.test.ts
new file mode 100644
index 000000000..28f1aa5bd
--- /dev/null
+++ b/__tests__/resume-context.test.ts
@@ -0,0 +1,176 @@
+/**
+ * Resume Context Tests
+ * Tests for core Resume Context functionality
+ */
+
+import { describe, test, expect } from '@jest/globals';
+import {
+  DEFAULT_STYLING,
+  DEFAULT_METADATA,
+  DEFAULT_PERSONAL_INFO,
+  SECTION_TYPES,
+} from '@/types/resume';
+
+describe('Resume Context Core Functionality', () => {
+  describe('Default Values', () => {
+    test('should have valid default styling', () => {
+      expect(DEFAULT_STYLING).toBeDefined();
+      expect(DEFAULT_STYLING.font_family).toBe('Inter');
+      expect(DEFAULT_STYLING.font_size_body).toBe(11);
+      expect(DEFAULT_STYLING.font_size_heading).toBe(16);
+      expect(DEFAULT_STYLING.color_primary).toBe('#8b5cf6');
+    });
+
+    test('should have valid default metadata', () => {
+      expect(DEFAULT_METADATA).toBeDefined();
+      expect(DEFAULT_METADATA.page_count).toBe(1);
+      expect(DEFAULT_METADATA.word_count).toBe(0);
+      expect(DEFAULT_METADATA.completeness_score).toBe(0);
+      expect(DEFAULT_METADATA.export_count).toBe(0);
+    });
+
+    test('should have valid default personal info', () => {
+      expect(DEFAULT_PERSONAL_INFO).toBeDefined();
+      expect(DEFAULT_PERSONAL_INFO.full_name).toBe('');
+      expect(DEFAULT_PERSONAL_INFO.email).toBe('');
+      expect(DEFAULT_PERSONAL_INFO.phone).toBe('');
+      expect(DEFAULT_PERSONAL_INFO.location).toBe('');
+    });
+  });
+
+  describe('Section Types', () => {
+    test('should have all required section types', () => {
+      const requiredTypes = [
+        'personal_info',
+        'education',
+        'experience',
+        'projects',
+        'skills',
+        'certifications',
+        'awards',
+        'custom',
+      ];
+
+      requiredTypes.forEach((type) => {
+        expect(SECTION_TYPES[type as keyof typeof SECTION_TYPES]).toBeDefined();
+      });
+    });
+
+    test('should have valid section type info', () => {
+      const personalInfo = SECTION_TYPES.personal_info;
+      expect(personalInfo.type).toBe('personal_info');
+      expect(personalInfo.label).toBe('Personal Information');
+      expect(personalInfo.defaultTitle).toBe('Personal Information');
+      expect(personalInfo.description).toBeTruthy();
+    });
+  });
+
+  describe('Resume Data Validation', () => {
+    test('should validate resume structure', () => {
+      const mockResume = {
+        id: 'test-id',
+        user_id: 'user-id',
+        title: 'Test Resume',
+        template_id: 'modern',
+        sections: [],
+        styling: DEFAULT_STYLING,
+        metadata: DEFAULT_METADATA,
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+      };
+
+      expect(mockResume.id).toBeTruthy();
+      expect(mockResume.user_id).toBeTruthy();
+      expect(mockResume.title).toBeTruthy();
+      expect(mockResume.template_id).toBe('modern');
+      expect(Array.isArray(mockResume.sections)).toBe(true);
+    });
+
+    test('should validate section structure', () => {
+      const mockSection = {
+        id: 'section-id',
+        type: 'personal_info' as const,
+        title: 'Personal Information',
+        order: 0,
+        visible: true,
+        content: DEFAULT_PERSONAL_INFO,
+      };
+
+      expect(mockSection.id).toBeTruthy();
+      expect(mockSection.type).toBe('personal_info');
+      expect(mockSection.order).toBeGreaterThanOrEqual(0);
+      expect(mockSection.visible).toBe(true);
+    });
+  });
+
+  describe('Auto-fill Mapping', () => {
+    test('should map profile data to personal info', () => {
+      const mockProfile = {
+        first_name: 'John',
+        last_name: 'Doe',
+        phone: '+1234567890',
+        location: 'New York, NY',
+        linkedin_url: 'https://linkedin.com/in/johndoe',
+        github_url: 'https://github.com/johndoe',
+        bio: 'Software Engineer with 5 years of experience',
+      };
+
+      const mockEmail = 'john.doe@example.com';
+
+      const expectedPersonalInfo = {
+        full_name: 'John Doe',
+        email: mockEmail,
+        phone: '+1234567890',
+        location: 'New York, NY',
+        linkedin: 'https://linkedin.com/in/johndoe',
+        github: 'https://github.com/johndoe',
+        summary: 'Software Engineer with 5 years of experience',
+      };
+
+      // Verify mapping logic
+      const mappedName = `${mockProfile.first_name} ${mockProfile.last_name}`.trim();
+      expect(mappedName).toBe(expectedPersonalInfo.full_name);
+      expect(mockProfile.phone).toBe(expectedPersonalInfo.phone);
+      expect(mockProfile.location).toBe(expectedPersonalInfo.location);
+      expect(mockProfile.linkedin_url).toBe(expectedPersonalInfo.linkedin);
+      expect(mockProfile.github_url).toBe(expectedPersonalInfo.github);
+      expect(mockProfile.bio).toBe(expectedPersonalInfo.summary);
+    });
+  });
+
+  describe('Score Calculation Logic', () => {
+    test('should calculate score based on section completeness', () => {
+      const weights = {
+        personal_info: 20,
+        education: 15,
+        experience: 25,
+        projects: 15,
+        skills: 15,
+        certifications: 5,
+        awards: 5,
+      };
+
+      // Test that weights add up to 100
+      const totalWeight = Object.values(weights).reduce((sum, w) => sum + w, 0);
+      expect(totalWeight).toBe(100);
+
+      // Test individual weight values
+      expect(weights.personal_info).toBe(20);
+      expect(weights.experience).toBe(25);
+      expect(weights.education).toBe(15);
+    });
+
+    test('should handle empty sections correctly', () => {
+      const emptyArraySections = [
+        { type: 'education', content: [] },
+        { type: 'experience', content: [] },
+        { type: 'projects', content: [] },
+      ];
+
+      emptyArraySections.forEach((section) => {
+        expect(Array.isArray(section.content)).toBe(true);
+        expect(section.content.length).toBe(0);
+      });
+    });
+  });
+});
diff --git a/__tests__/resume-integration.test.tsx b/__tests__/resume-integration.test.tsx
new file mode 100644
index 000000000..42e17ce85
--- /dev/null
+++ b/__tests__/resume-integration.test.tsx
@@ -0,0 +1,624 @@
+/**
+ * Resume Builder Integration Tests
+ * Tests complete user flows and feature integration
+ */
+
+import { describe, test, expect, jest, beforeEach } from '@jest/globals';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import React from 'react';
+import type { Resume, ResumeSection } from '@/types/resume';
+
+// Mock Supabase client
+const mockSupabase = {
+  from: jest.fn(() => ({
+    select: jest.fn(() => ({
+      eq: jest.fn(() => ({
+        order: jest.fn(() => ({
+          data: [],
+          error: null,
+        })),
+        single: jest.fn(() => ({
+          data: null,
+          error: null,
+        })),
+      })),
+    })),
+    insert: jest.fn(() => ({
+      select: jest.fn(() => ({
+        single: jest.fn(() => ({
+          data: null,
+          error: null,
+        })),
+      })),
+    })),
+    update: jest.fn(() => ({
+      eq: jest.fn(() => ({
+        data: null,
+        error: null,
+      })),
+    })),
+    delete: jest.fn(() => ({
+      eq: jest.fn(() => ({
+        data: null,
+        error: null,
+      })),
+    })),
+  })),
+  auth: {
+    getUser: jest.fn(() => ({
+      data: { user: { id: 'test-user-id' } },
+      error: null,
+    })),
+  },
+};
+
+jest.mock('@/lib/supabase/client', () => ({
+  createClient: () => mockSupabase,
+}));
+
+describe('Resume Builder Integration Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Complete Resume Creation Flow', () => {
+    test('should create a new resume with all sections', async () => {
+      const user = userEvent.setup();
+      
+      // Mock successful resume creation
+      const mockResume: Resume = {
+        id: 'new-resume-id',
+        user_id: 'test-user-id',
+        title: 'My Professional Resume',
+        template_id: 'modern',
+        sections: [],
+        styling: {
+          font_family: 'Inter',
+          font_size_body: 11,
+          font_size_heading: 16,
+          color_primary: '#8b5cf6',
+          color_text: '#000000',
+          color_accent: '#6366f1',
+          margin_top: 0.75,
+          margin_bottom: 0.75,
+          margin_left: 0.75,
+          margin_right: 0.75,
+          line_height: 1.5,
+          section_spacing: 1.5,
+        },
+        metadata: {
+          page_count: 1,
+          word_count: 0,
+          completeness_score: 0,
+          export_count: 0,
+        },
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+      };
+
+      // Verify resume structure
+      expect(mockResume.id).toBeTruthy();
+      expect(mockResume.user_id).toBe('test-user-id');
+      expect(mockResume.title).toBe('My Professional Resume');
+      expect(mockResume.template_id).toBe('modern');
+      expect(Array.isArray(mockResume.sections)).toBe(true);
+    });
+
+    test('should auto-fill personal info from profile', async () => {
+      const mockProfile = {
+        first_name: 'Jane',
+        last_name: 'Smith',
+        phone: '+1987654321',
+        location: 'San Francisco, CA',
+        linkedin_url: 'https://linkedin.com/in/janesmith',
+        github_url: 'https://github.com/janesmith',
+        bio: 'Full-stack developer passionate about web technologies',
+      };
+
+      const mockEmail = 'jane.smith@example.com';
+
+      // Verify auto-fill mapping
+      const personalInfo = {
+        full_name: `${mockProfile.first_name} ${mockProfile.last_name}`.trim(),
+        email: mockEmail,
+        phone: mockProfile.phone,
+        location: mockProfile.location,
+        linkedin: mockProfile.linkedin_url,
+        github: mockProfile.github_url,
+        summary: mockProfile.bio,
+      };
+
+      expect(personalInfo.full_name).toBe('Jane Smith');
+      expect(personalInfo.email).toBe(mockEmail);
+      expect(personalInfo.phone).toBe('+1987654321');
+      expect(personalInfo.location).toBe('San Francisco, CA');
+    });
+  });
+
+  describe('Section Management Flow', () => {
+    test('should add multiple section types', () => {
+      const sections: ResumeSection[] = [];
+      
+      // Add personal info section
+      const personalInfoSection: ResumeSection = {
+        id: 'section-1',
+        type: 'personal_info',
+        title: 'Personal Information',
+        order: 0,
+        visible: true,
+        content: {
+          full_name: '',
+          email: '',
+          phone: '',
+          location: '',
+        },
+      };
+      sections.push(personalInfoSection);
+
+      // Add education section
+      const educationSection: ResumeSection = {
+        id: 'section-2',
+        type: 'education',
+        title: 'Education',
+        order: 1,
+        visible: true,
+        content: [],
+      };
+      sections.push(educationSection);
+
+      // Add experience section
+      const experienceSection: ResumeSection = {
+        id: 'section-3',
+        type: 'experience',
+        title: 'Work Experience',
+        order: 2,
+        visible: true,
+        content: [],
+      };
+      sections.push(experienceSection);
+
+      expect(sections).toHaveLength(3);
+      expect(sections[0].type).toBe('personal_info');
+      expect(sections[1].type).toBe('education');
+      expect(sections[2].type).toBe('experience');
+    });
+
+    test('should reorder sections correctly', () => {
+      const sections: ResumeSection[] = [
+        {
+          id: 'section-1',
+          type: 'personal_info',
+          title: 'Personal Information',
+          order: 0,
+          visible: true,
+          content: {},
+        },
+        {
+          id: 'section-2',
+          type: 'education',
+          title: 'Education',
+          order: 1,
+          visible: true,
+          content: [],
+        },
+        {
+          id: 'section-3',
+          type: 'experience',
+          title: 'Work Experience',
+          order: 2,
+          visible: true,
+          content: [],
+        },
+      ];
+
+      // Reorder: move experience before education
+      const reordered = [
+        sections[0],
+        sections[2],
+        sections[1],
+      ].map((section, index) => ({
+        ...section,
+        order: index,
+      }));
+
+      expect(reordered[0].type).toBe('personal_info');
+      expect(reordered[1].type).toBe('experience');
+      expect(reordered[2].type).toBe('education');
+      expect(reordered[1].order).toBe(1);
+      expect(reordered[2].order).toBe(2);
+    });
+
+    test('should remove sections', () => {
+      let sections: ResumeSection[] = [
+        {
+          id: 'section-1',
+          type: 'personal_info',
+          title: 'Personal Information',
+          order: 0,
+          visible: true,
+          content: {},
+        },
+        {
+          id: 'section-2',
+          type: 'education',
+          title: 'Education',
+          order: 1,
+          visible: true,
+          content: [],
+        },
+      ];
+
+      // Remove education section
+      sections = sections.filter(s => s.id !== 'section-2');
+
+      expect(sections).toHaveLength(1);
+      expect(sections[0].type).toBe('personal_info');
+    });
+
+    test('should toggle section visibility', () => {
+      const section: ResumeSection = {
+        id: 'section-1',
+        type: 'education',
+        title: 'Education',
+        order: 0,
+        visible: true,
+        content: [],
+      };
+
+      // Toggle visibility
+      section.visible = !section.visible;
+      expect(section.visible).toBe(false);
+
+      // Toggle back
+      section.visible = !section.visible;
+      expect(section.visible).toBe(true);
+    });
+  });
+
+  describe('Template Switching Flow', () => {
+    test('should switch templates while preserving content', () => {
+      const resume: Resume = {
+        id: 'resume-id',
+        user_id: 'user-id',
+        title: 'My Resume',
+        template_id: 'modern',
+        sections: [
+          {
+            id: 'section-1',
+            type: 'personal_info',
+            title: 'Personal Information',
+            order: 0,
+            visible: true,
+            content: {
+              full_name: 'John Doe',
+              email: 'john@example.com',
+              phone: '+1234567890',
+              location: 'New York, NY',
+            },
+          },
+        ],
+        styling: {
+          font_family: 'Inter',
+          font_size_body: 11,
+          font_size_heading: 16,
+          color_primary: '#8b5cf6',
+          color_text: '#000000',
+          color_accent: '#6366f1',
+          margin_top: 0.75,
+          margin_bottom: 0.75,
+          margin_left: 0.75,
+          margin_right: 0.75,
+          line_height: 1.5,
+          section_spacing: 1.5,
+        },
+        metadata: {
+          page_count: 1,
+          word_count: 50,
+          completeness_score: 25,
+          export_count: 0,
+        },
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+      };
+
+      const originalContent = resume.sections[0].content;
+
+      // Switch template
+      resume.template_id = 'classic';
+
+      // Verify content is preserved
+      expect(resume.template_id).toBe('classic');
+      expect(resume.sections[0].content).toEqual(originalContent);
+    });
+
+    test('should support all template types', () => {
+      const templates = ['modern', 'classic', 'minimal', 'creative', 'executive'];
+
+      templates.forEach(templateId => {
+        const resume: Partial<Resume> = {
+          template_id: templateId,
+        };
+
+        expect(resume.template_id).toBe(templateId);
+      });
+    });
+  });
+
+  describe('Export Functionality Flow', () => {
+    test('should track export metadata', () => {
+      const metadata = {
+        page_count: 1,
+        word_count: 250,
+        completeness_score: 85,
+        last_exported: new Date().toISOString(),
+        export_count: 1,
+      };
+
+      expect(metadata.export_count).toBe(1);
+      expect(metadata.last_exported).toBeTruthy();
+
+      // Increment export count
+      metadata.export_count += 1;
+      metadata.last_exported = new Date().toISOString();
+
+      expect(metadata.export_count).toBe(2);
+    });
+
+    test('should support multiple export formats', () => {
+      const exportFormats = ['pdf', 'docx', 'json'];
+
+      exportFormats.forEach(format => {
+        expect(['pdf', 'docx', 'json']).toContain(format);
+      });
+    });
+  });
+
+  describe('Import Functionality Flow', () => {
+    test('should validate imported JSON structure', () => {
+      const validImportData = {
+        title: 'Imported Resume',
+        sections: [
+          {
+            type: 'personal_info',
+            content: {
+              full_name: 'Imported User',
+              email: 'imported@example.com',
+              phone: '+1111111111',
+              location: 'Boston, MA',
+            },
+          },
+        ],
+      };
+
+      expect(validImportData.title).toBeTruthy();
+      expect(Array.isArray(validImportData.sections)).toBe(true);
+      expect(validImportData.sections[0].type).toBe('personal_info');
+    });
+
+    test('should handle invalid import data gracefully', () => {
+      const invalidData = {
+        // Missing required fields
+        sections: 'not an array',
+      };
+
+      const isValid = typeof invalidData.sections === 'object' && Array.isArray(invalidData.sections);
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('Mobile Responsiveness Flow', () => {
+    test('should adapt layout for mobile viewport', () => {
+      const isMobile = (width: number) => width < 768;
+
+      expect(isMobile(375)).toBe(true);  // iPhone
+      expect(isMobile(768)).toBe(false); // Tablet
+      expect(isMobile(1024)).toBe(false); // Desktop
+    });
+
+    test('should handle touch gestures on mobile', () => {
+      const touchEvent = {
+        type: 'touchstart',
+        touches: [{ clientX: 100, clientY: 100 }],
+      };
+
+      expect(touchEvent.type).toBe('touchstart');
+      expect(touchEvent.touches).toHaveLength(1);
+    });
+  });
+
+  describe('Auto-save Flow', () => {
+    test('should debounce save operations', async () => {
+      const saveCallTimes: number[] = [];
+      let saveCount = 0;
+
+      const debouncedSave = () => {
+        saveCallTimes.push(Date.now());
+        saveCount++;
+      };
+
+      // Simulate rapid changes
+      debouncedSave();
+      
+      // Verify save was called
+      expect(saveCount).toBeGreaterThan(0);
+    });
+
+    test('should handle save errors gracefully', () => {
+      const saveError = {
+        code: 'SAVE_FAILED',
+        message: 'Failed to save resume',
+      };
+
+      expect(saveError.code).toBe('SAVE_FAILED');
+      expect(saveError.message).toBeTruthy();
+    });
+  });
+
+  describe('Real-time Preview Updates', () => {
+    test('should update preview when content changes', () => {
+      const resume: Partial<Resume> = {
+        sections: [
+          {
+            id: 'section-1',
+            type: 'personal_info',
+            title: 'Personal Information',
+            order: 0,
+            visible: true,
+            content: {
+              full_name: 'Initial Name',
+              email: 'initial@example.com',
+              phone: '',
+              location: '',
+            },
+          },
+        ],
+      };
+
+      // Update content
+      if (resume.sections && resume.sections[0]) {
+        const content = resume.sections[0].content as any;
+        content.full_name = 'Updated Name';
+      }
+
+      // Verify update
+      const updatedContent = resume.sections?.[0]?.content as any;
+      expect(updatedContent?.full_name).toBe('Updated Name');
+    });
+
+    test('should calculate page count based on content', () => {
+      const calculatePageCount = (wordCount: number): number => {
+        const wordsPerPage = 500;
+        return Math.max(1, Math.ceil(wordCount / wordsPerPage));
+      };
+
+      expect(calculatePageCount(0)).toBe(1);
+      expect(calculatePageCount(250)).toBe(1);
+      expect(calculatePageCount(500)).toBe(1);
+      expect(calculatePageCount(501)).toBe(2);
+      expect(calculatePageCount(1000)).toBe(2);
+    });
+  });
+
+  describe('Styling Customization Flow', () => {
+    test('should update styling in real-time', () => {
+      const styling = {
+        font_family: 'Inter',
+        font_size_body: 11,
+        color_primary: '#8b5cf6',
+      };
+
+      // Update font
+      styling.font_family = 'Roboto';
+      expect(styling.font_family).toBe('Roboto');
+
+      // Update color
+      styling.color_primary = '#ef4444';
+      expect(styling.color_primary).toBe('#ef4444');
+
+      // Update size
+      styling.font_size_body = 12;
+      expect(styling.font_size_body).toBe(12);
+    });
+
+    test('should validate margin values', () => {
+      const isValidMargin = (value: number): boolean => {
+        return value >= 0.5 && value <= 1.5;
+      };
+
+      expect(isValidMargin(0.5)).toBe(true);
+      expect(isValidMargin(0.75)).toBe(true);
+      expect(isValidMargin(1.0)).toBe(true);
+      expect(isValidMargin(1.5)).toBe(true);
+      expect(isValidMargin(0.25)).toBe(false);
+      expect(isValidMargin(2.0)).toBe(false);
+    });
+  });
+
+  describe('Resume Scoring Flow', () => {
+    test('should calculate completeness score', () => {
+      const calculateScore = (sections: ResumeSection[]): number => {
+        const weights: Record<string, number> = {
+          personal_info: 20,
+          education: 15,
+          experience: 25,
+          projects: 15,
+          skills: 15,
+          certifications: 5,
+          awards: 5,
+        };
+
+        let score = 0;
+
+        sections.forEach(section => {
+          const weight = weights[section.type] || 0;
+          const isComplete = section.visible && 
+            (Array.isArray(section.content) ? section.content.length > 0 : true);
+          
+          if (isComplete) {
+            score += weight;
+          }
+        });
+
+        return score;
+      };
+
+      const sections: ResumeSection[] = [
+        {
+          id: '1',
+          type: 'personal_info',
+          title: 'Personal Info',
+          order: 0,
+          visible: true,
+          content: { full_name: 'John', email: 'john@example.com', phone: '', location: '' },
+        },
+        {
+          id: '2',
+          type: 'experience',
+          title: 'Experience',
+          order: 1,
+          visible: true,
+          content: [{ id: '1', company: 'Company', position: 'Developer', location: '', start_date: '2020-01', current: true, description: '', achievements: [] }],
+        },
+      ];
+
+      const score = calculateScore(sections);
+      expect(score).toBe(45); // 20 (personal_info) + 25 (experience)
+    });
+  });
+
+  describe('Error Handling Flow', () => {
+    test('should handle network errors', () => {
+      const networkError = {
+        code: 'NETWORK_ERROR',
+        message: 'Failed to connect to server',
+        retry: true,
+      };
+
+      expect(networkError.code).toBe('NETWORK_ERROR');
+      expect(networkError.retry).toBe(true);
+    });
+
+    test('should validate form inputs', () => {
+      const validateEmail = (email: string): boolean => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+      };
+
+      expect(validateEmail('valid@example.com')).toBe(true);
+      expect(validateEmail('invalid-email')).toBe(false);
+      expect(validateEmail('')).toBe(false);
+    });
+
+    test('should handle validation errors', () => {
+      const validationError = {
+        field: 'email',
+        message: 'Invalid email format',
+      };
+
+      expect(validationError.field).toBe('email');
+      expect(validationError.message).toBeTruthy();
+    });
+  });
+});
diff --git a/__tests__/skills-section.test.tsx b/__tests__/skills-section.test.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/__tests__/template-renderer.test.tsx b/__tests__/template-renderer.test.tsx
new file mode 100644
index 000000000..f6b2b39a1
--- /dev/null
+++ b/__tests__/template-renderer.test.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TemplateRenderer } from '@/components/resume/templates/TemplateRenderer';
+import { Resume } from '@/types/resume';
+
+// Mock the template components
+jest.mock('@/components/resume/templates/ModernTemplate', () => ({
+  ModernTemplate: ({ resume }: { resume: Resume }) => (
+    <div data-testid="modern-template">Modern Template: {resume.title}</div>
+  ),
+}));
+
+jest.mock('@/components/resume/templates/ClassicTemplate', () => ({
+  ClassicTemplate: ({ resume }: { resume: Resume }) => (
+    <div data-testid="classic-template">Classic Template: {resume.title}</div>
+  ),
+}));
+
+jest.mock('@/components/resume/templates/MinimalTemplate', () => ({
+  MinimalTemplate: ({ resume }: { resume: Resume }) => (
+    <div data-testid="minimal-template">Minimal Template: {resume.title}</div>
+  ),
+}));
+
+jest.mock('@/components/resume/templates/CreativeTemplate', () => ({
+  CreativeTemplate: ({ resume }: { resume: Resume }) => (
+    <div data-testid="creative-template">Creative Template: {resume.title}</div>
+  ),
+}));
+
+jest.mock('@/components/resume/templates/ExecutiveTemplate', () => ({
+  ExecutiveTemplate: ({ resume }: { resume: Resume }) => (
+    <div data-testid="executive-template">Executive Template: {resume.title}</div>
+  ),
+}));
+
+const createMockResume = (templateId: string): Resume => ({
+  id: '1',
+  user_id: 'user-1',
+  title: 'Test Resume',
+  template_id: templateId,
+  sections: [],
+  styling: {
+    font_family: 'Arial',
+    font_size_body: 12,
+    font_size_heading: 16,
+    color_primary: '#000000',
+    color_text: '#333333',
+    color_accent: '#666666',
+    margin_top: 1,
+    margin_bottom: 1,
+    margin_left: 1,
+    margin_right: 1,
+    line_height: 1.5,
+    section_spacing: 1,
+  },
+  metadata: {
+    page_count: 1,
+    word_count: 0,
+    completeness_score: 0,
+    export_count: 0,
+  },
+  created_at: '2025-01-01T00:00:00Z',
+  updated_at: '2025-01-01T00:00:00Z',
+});
+
+describe('TemplateRenderer', () => {
+  it('should render null when no resume is provided', () => {
+    const { container } = render(<TemplateRenderer resume={null} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render ModernTemplate when template_id is "modern"', () => {
+    const resume = createMockResume('modern');
+    render(<TemplateRenderer resume={resume} />);
+    expect(screen.getByTestId('modern-template')).toBeInTheDocument();
+    expect(screen.getByText('Modern Template: Test Resume')).toBeInTheDocument();
+  });
+
+  it('should render ClassicTemplate when template_id is "classic"', async () => {
+    const resume = createMockResume('classic');
+    render(<TemplateRenderer resume={resume} />);
+    // Wait for template transition to complete
+    await screen.findByTestId('classic-template');
+    expect(screen.getByTestId('classic-template')).toBeInTheDocument();
+  });
+
+  it('should render MinimalTemplate when template_id is "minimal"', async () => {
+    const resume = createMockResume('minimal');
+    render(<TemplateRenderer resume={resume} />);
+    // Wait for template transition to complete
+    await screen.findByTestId('minimal-template');
+    expect(screen.getByTestId('minimal-template')).toBeInTheDocument();
+  });
+
+  it('should render CreativeTemplate when template_id is "creative"', async () => {
+    const resume = createMockResume('creative');
+    render(<TemplateRenderer resume={resume} />);
+    // Wait for template transition to complete
+    await screen.findByTestId('creative-template');
+    expect(screen.getByTestId('creative-template')).toBeInTheDocument();
+  });
+
+  it('should render ExecutiveTemplate when template_id is "executive"', async () => {
+    const resume = createMockResume('executive');
+    render(<TemplateRenderer resume={resume} />);
+    // Wait for template transition to complete
+    await screen.findByTestId('executive-template');
+    expect(screen.getByTestId('executive-template')).toBeInTheDocument();
+  });
+
+  it('should default to ModernTemplate when template_id is invalid', () => {
+    const resume = createMockResume('invalid-template');
+    render(<TemplateRenderer resume={resume} />);
+    expect(screen.getByTestId('modern-template')).toBeInTheDocument();
+  });
+
+  it('should default to ModernTemplate when template_id is empty', () => {
+    const resume = createMockResume('');
+    render(<TemplateRenderer resume={resume} />);
+    expect(screen.getByTestId('modern-template')).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/template-selector.test.tsx b/__tests__/template-selector.test.tsx
new file mode 100644
index 000000000..50939ff26
--- /dev/null
+++ b/__tests__/template-selector.test.tsx
@@ -0,0 +1,132 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { TemplateSelector } from '@/components/resume/TemplateSelector';
+import { ResumeProvider } from '@/contexts/ResumeContext';
+import { Resume } from '@/types/resume';
+
+// Mock Supabase client
+jest.mock('@/lib/supabase/client', () => ({
+  createClient: jest.fn(() => ({
+    auth: {
+      getUser: jest.fn(() => Promise.resolve({ data: { user: { id: 'test-user' } }, error: null })),
+    },
+    from: jest.fn(() => ({
+      select: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          single: jest.fn(() => Promise.resolve({ data: null, error: null })),
+          order: jest.fn(() => Promise.resolve({ data: [], error: null })),
+        })),
+      })),
+      insert: jest.fn(() => ({
+        select: jest.fn(() => ({
+          single: jest.fn(() => Promise.resolve({ data: null, error: null })),
+        })),
+      })),
+      update: jest.fn(() => ({
+        eq: jest.fn(() => Promise.resolve({ data: null, error: null })),
+      })),
+    })),
+  })),
+}));
+
+// Mock toast
+jest.mock('sonner', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+    info: jest.fn(),
+  },
+}));
+
+const mockResume: Resume = {
+  id: 'test-resume-id',
+  user_id: 'test-user',
+  title: 'Test Resume',
+  template_id: 'modern',
+  sections: [],
+  styling: {
+    font_family: 'Inter',
+    font_size_body: 11,
+    font_size_heading: 16,
+    color_primary: '#9333ea',
+    color_text: '#1f2937',
+    color_accent: '#6366f1',
+    margin_top: 0.75,
+    margin_bottom: 0.75,
+    margin_left: 0.75,
+    margin_right: 0.75,
+    line_height: 1.5,
+    section_spacing: 1.5,
+  },
+  metadata: {
+    page_count: 1,
+    word_count: 0,
+    completeness_score: 0,
+    export_count: 0,
+  },
+  created_at: new Date().toISOString(),
+  updated_at: new Date().toISOString(),
+};
+
+describe('TemplateSelector', () => {
+  it('should render the template selector button', () => {
+    render(
+      <ResumeProvider initialResumes={[mockResume]}>
+        <TemplateSelector />
+      </ResumeProvider>
+    );
+
+    const button = screen.getByRole('button', { name: /template/i });
+    expect(button).toBeInTheDocument();
+  });
+
+  it('should open dialog when button is clicked', async () => {
+    render(
+      <ResumeProvider initialResumes={[mockResume]}>
+        <TemplateSelector />
+      </ResumeProvider>
+    );
+
+    const button = screen.getByRole('button', { name: /template/i });
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText('Choose a Template')).toBeInTheDocument();
+    });
+  });
+
+  it('should display all template options', async () => {
+    render(
+      <ResumeProvider initialResumes={[mockResume]}>
+        <TemplateSelector />
+      </ResumeProvider>
+    );
+
+    const button = screen.getByRole('button', { name: /template/i });
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText('Modern')).toBeInTheDocument();
+      expect(screen.getByText('Classic')).toBeInTheDocument();
+      expect(screen.getByText('Minimal')).toBeInTheDocument();
+      expect(screen.getByText('Creative')).toBeInTheDocument();
+      expect(screen.getByText('Executive')).toBeInTheDocument();
+    });
+  });
+
+  it('should show selected badge on current template', async () => {
+    render(
+      <ResumeProvider initialResumes={[mockResume]}>
+        <TemplateSelector />
+      </ResumeProvider>
+    );
+
+    const button = screen.getByRole('button', { name: /template/i });
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      // The modern template should be selected by default
+      const modernTemplate = screen.getByText('Modern').closest('button');
+      expect(modernTemplate).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index dec56953b..7fc50000f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -103,10 +103,35 @@
   /* Moves the gradient background for a dynamic effect */
 
   .animate-fade-in {
-    animation: fadeIn 1s ease-out forwards;
+    animation: fadeIn 0.5s ease-out forwards;
   }
   /* Fade in animation for text elements */
 
+  .animate-slide-in-left {
+    animation: slideInLeft 0.4s ease-out forwards;
+  }
+  /* Slide in from left animation */
+
+  .animate-slide-in-right {
+    animation: slideInRight 0.4s ease-out forwards;
+  }
+  /* Slide in from right animation */
+
+  .animate-slide-in-up {
+    animation: slideInUp 0.4s ease-out forwards;
+  }
+  /* Slide in from bottom animation */
+
+  .animate-scale-in {
+    animation: scaleIn 0.3s ease-out forwards;
+  }
+  /* Scale in animation */
+
+  .transition-smooth {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  /* Smooth transition for all properties */
+
   .bg-grid-pattern {
     background-image: 
       linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
@@ -158,6 +183,54 @@
   }
   /* Fade in animation keyframes */
 
+  @keyframes slideInLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  /* Slide in from left keyframes */
+
+  @keyframes slideInRight {
+    from {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  /* Slide in from right keyframes */
+
+  @keyframes slideInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  /* Slide in from bottom keyframes */
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  /* Scale in keyframes */
+
   .card-hover {
     transition: all 0.3s ease;
   }
@@ -340,4 +413,47 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
+/* 
+Accessibility: Enhanced focus indicators for keyboard navigation */
+.keyboard-navigation *:focus {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+.keyboard-navigation button:focus,
+.keyboard-navigation a:focus,
+.keyboard-navigation input:focus,
+.keyboard-navigation textarea:focus,
+.keyboard-navigation select:focus {
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3);
+}
+
+/* Screen reader only content */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Skip to main content link */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  padding: 8px 16px;
+  text-decoration: none;
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 0;
+}
diff --git a/app/protected/resume/page.tsx b/app/protected/resume/page.tsx
new file mode 100644
index 000000000..31753f554
--- /dev/null
+++ b/app/protected/resume/page.tsx
@@ -0,0 +1,47 @@
+import { redirect } from 'next/navigation';
+import { createClient } from '@/lib/supabase/server';
+import { ResumeBuilderClient } from '@/components/resume/ResumeBuilderClient';
+import { Resume, ResumeSection, ResumeStyling, ResumeMetadata } from '@/types/resume';
+import { Profile } from '@/types/profile';
+
+export default async function ResumeBuilderPage() {
+  const supabase = await createClient();
+  
+  // Check authentication
+  const { data: { user }, error: authError } = await supabase.auth.getUser();
+  
+  if (authError || !user) {
+    redirect('/auth/signin');
+  }
+  
+  // Fetch user's resumes
+  const { data: resumesData } = await supabase
+    .from('resumes')
+    .select('*')
+    .eq('user_id', user.id)
+    .order('updated_at', { ascending: false });
+  
+  // Transform resumes data
+  const resumes: Resume[] = (resumesData || []).map((r) => ({
+    ...r,
+    sections: (r.sections as ResumeSection[]) || [],
+    styling: (r.styling as ResumeStyling) || {},
+    metadata: (r.metadata as ResumeMetadata) || {},
+  }));
+  
+  // Fetch user profile for auto-fill
+  const { data: profileData } = await supabase
+    .from('profiles')
+    .select('*')
+    .eq('id', user.id)
+    .single();
+  
+  const profile: Profile | null = profileData || null;
+  
+  return (
+    <ResumeBuilderClient 
+      initialResumes={resumes}
+      userProfile={profile}
+    />
+  );
+}
diff --git a/components/accessibility/LiveRegion.tsx b/components/accessibility/LiveRegion.tsx
new file mode 100644
index 000000000..27c1021a7
--- /dev/null
+++ b/components/accessibility/LiveRegion.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+interface LiveRegionProps {
+  message: string;
+  politeness?: 'polite' | 'assertive' | 'off';
+  clearAfter?: number;
+}
+
+export function LiveRegion({ message, politeness = 'polite', clearAfter = 3000 }: LiveRegionProps) {
+  const regionRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (message && clearAfter > 0) {
+      const timer = setTimeout(() => {
+        if (regionRef.current) {
+          regionRef.current.textContent = '';
+        }
+      }, clearAfter);
+
+      return () => clearTimeout(timer);
+    }
+  }, [message, clearAfter]);
+
+  return (
+    <div
+      ref={regionRef}
+      role="status"
+      aria-live={politeness}
+      aria-atomic="true"
+      className="sr-only"
+    >
+      {message}
+    </div>
+  );
+}
+
+export function useAnnounce() {
+  const [announcement, setAnnouncement] = useState('');
+
+  const announce = (message: string) => {
+    setAnnouncement(message);
+  };
+
+  return { announcement, announce };
+}
diff --git a/components/resume/AddSectionMenu.tsx b/components/resume/AddSectionMenu.tsx
new file mode 100644
index 000000000..77e5fb83e
--- /dev/null
+++ b/components/resume/AddSectionMenu.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useResume } from '@/contexts/ResumeContext';
+import { SECTION_TYPES, SectionType } from '@/types/resume';
+import {
+  Plus,
+  User,
+  GraduationCap,
+  Briefcase,
+  Code,
+  Wrench,
+  Award,
+  Trophy,
+  FileText,
+} from 'lucide-react';
+
+// Icon mapping for section types
+const SECTION_ICONS: Record<SectionType, React.ComponentType<{ className?: string }>> = {
+  personal_info: User,
+  education: GraduationCap,
+  experience: Briefcase,
+  projects: Code,
+  skills: Wrench,
+  certifications: Award,
+  awards: Trophy,
+  custom: FileText,
+};
+
+export function AddSectionMenu() {
+  const { addSection, resume } = useResume();
+
+  if (!resume) return null;
+
+  // Get section types that can be added (exclude personal_info as it's always present)
+  const availableSectionTypes = Object.values(SECTION_TYPES).filter(
+    (sectionType) => sectionType.type !== 'personal_info'
+  );
+
+  const handleAddSection = (type: SectionType) => {
+    addSection(type);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          className="w-full border-dashed border-2 hover:border-primary hover:bg-primary/5"
+          aria-label="Add a new section to your resume"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          Add Section
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent 
+        align="start" 
+        className="w-64"
+        aria-label="Section types"
+      >
+        <DropdownMenuLabel>Choose a section type</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {availableSectionTypes.map((sectionType) => {
+          const Icon = SECTION_ICONS[sectionType.type];
+          return (
+            <DropdownMenuItem
+              key={sectionType.type}
+              onClick={() => handleAddSection(sectionType.type)}
+              className="cursor-pointer"
+              aria-label={`Add ${sectionType.label} section`}
+            >
+              <div className="flex items-start gap-3 py-1">
+                <Icon className="h-5 w-5 mt-0.5 text-primary" />
+                <div className="flex-1">
+                  <div className="font-medium">{sectionType.label}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {sectionType.description}
+                  </div>
+                </div>
+              </div>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/resume/ConfettiEffect.tsx b/components/resume/ConfettiEffect.tsx
new file mode 100644
index 000000000..97901e72e
--- /dev/null
+++ b/components/resume/ConfettiEffect.tsx
@@ -0,0 +1,154 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface ConfettiPiece {
+  id: number;
+  x: number;
+  y: number;
+  rotation: number;
+  color: string;
+  size: number;
+  velocity: { x: number; y: number };
+  rotationSpeed: number;
+}
+
+interface ConfettiEffectProps {
+  trigger: boolean;
+  onComplete?: () => void;
+}
+
+const COLORS = [
+  '#9333ea', // purple-600
+  '#a855f7', // purple-500
+  '#c084fc', // purple-400
+  '#e879f9', // fuchsia-400
+  '#f0abfc', // fuchsia-300
+  '#fbbf24', // amber-400
+  '#60a5fa', // blue-400
+];
+
+export function ConfettiEffect({ trigger, onComplete }: ConfettiEffectProps) {
+  const [confetti, setConfetti] = useState<ConfettiPiece[]>([]);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    if (!trigger) return;
+
+    // Generate confetti pieces
+    const pieces: ConfettiPiece[] = [];
+    const pieceCount = 50;
+
+    for (let i = 0; i < pieceCount; i++) {
+      pieces.push({
+        id: i,
+        x: Math.random() * 100, // Start position (percentage)
+        y: -10, // Start above viewport
+        rotation: Math.random() * 360,
+        color: COLORS[Math.floor(Math.random() * COLORS.length)],
+        size: Math.random() * 10 + 5, // 5-15px
+        velocity: {
+          x: (Math.random() - 0.5) * 2, // -1 to 1
+          y: Math.random() * 2 + 2, // 2-4
+        },
+        rotationSpeed: (Math.random() - 0.5) * 10, // -5 to 5
+      });
+    }
+
+    setConfetti(pieces);
+    setIsActive(true);
+
+    // Animate confetti
+    const animationDuration = 3000; // 3 seconds
+    const startTime = Date.now();
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = elapsed / animationDuration;
+
+      if (progress >= 1) {
+        setIsActive(false);
+        setConfetti([]);
+        onComplete?.();
+        return;
+      }
+
+      setConfetti((prev) =>
+        prev.map((piece) => ({
+          ...piece,
+          y: piece.y + piece.velocity.y,
+          x: piece.x + piece.velocity.x * 0.5,
+          rotation: piece.rotation + piece.rotationSpeed,
+        }))
+      );
+
+      requestAnimationFrame(animate);
+    };
+
+    requestAnimationFrame(animate);
+  }, [trigger, onComplete]);
+
+  if (!isActive || confetti.length === 0) return null;
+
+  return (
+    <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
+      {confetti.map((piece) => (
+        <div
+          key={piece.id}
+          className="absolute transition-all duration-100 ease-linear"
+          style={{
+            left: `${piece.x}%`,
+            top: `${piece.y}%`,
+            width: `${piece.size}px`,
+            height: `${piece.size}px`,
+            backgroundColor: piece.color,
+            transform: `rotate(${piece.rotation}deg)`,
+            opacity: Math.max(0, 1 - piece.y / 100),
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+// Simpler confetti burst for quick celebrations
+export function ConfettiBurst() {
+  const [show, setShow] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setShow(false), 2000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!show) return null;
+
+  return (
+    <div className="fixed inset-0 pointer-events-none z-50 flex items-center justify-center">
+      <div className="relative w-64 h-64">
+        {Array.from({ length: 30 }).map((_, i) => {
+          const angle = (i / 30) * Math.PI * 2;
+          const distance = 100;
+          const x = Math.cos(angle) * distance;
+          const y = Math.sin(angle) * distance;
+          const color = COLORS[i % COLORS.length];
+
+          return (
+            <div
+              key={i}
+              className="absolute w-3 h-3 rounded-full animate-ping"
+              style={{
+                left: '50%',
+                top: '50%',
+                backgroundColor: color,
+                transform: `translate(${x}px, ${y}px)`,
+                animationDelay: `${i * 20}ms`,
+                animationDuration: '1s',
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/components/resume/ContentHint.tsx b/components/resume/ContentHint.tsx
new file mode 100644
index 000000000..3429118b7
--- /dev/null
+++ b/components/resume/ContentHint.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Lightbulb, AlertCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ContentHintProps {
+  show: boolean;
+  example?: string;
+  characterCount?: number;
+  minCharacters?: number;
+  className?: string;
+}
+
+export function ContentHint({
+  show,
+  example,
+  characterCount,
+  minCharacters = 50,
+  className,
+}: ContentHintProps) {
+  if (!show) return null;
+
+  const isMinimal = characterCount !== undefined && characterCount > 0 && characterCount < minCharacters;
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {/* Character Count Warning */}
+      {isMinimal && (
+        <Alert variant="default" className="border-yellow-200 bg-yellow-50 dark:bg-yellow-950/20 dark:border-yellow-800">
+          <AlertCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+          <AlertDescription className="text-sm text-yellow-800 dark:text-yellow-200">
+            This section has minimal content ({characterCount} characters). Consider adding more details
+            (recommended: {minCharacters}+ characters).
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Example Content Hint */}
+      {example && characterCount === 0 && (
+        <Alert variant="default" className="border-blue-200 bg-blue-50 dark:bg-blue-950/20 dark:border-blue-800">
+          <Lightbulb className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+          <AlertDescription className="space-y-2">
+            <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
+              Example:
+            </p>
+            <p className="text-sm text-blue-700 dark:text-blue-300 italic">
+              {example}
+            </p>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Character Count Display */}
+      {characterCount !== undefined && characterCount > 0 && (
+        <div className="flex items-center justify-end gap-2">
+          <Badge
+            variant={characterCount >= minCharacters ? 'default' : 'secondary'}
+            className="text-xs"
+          >
+            {characterCount} characters
+          </Badge>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SectionContentHintProps {
+  isEmpty: boolean;
+  characterCount: number;
+  exampleContent: string;
+  minCharacters?: number;
+  className?: string;
+}
+
+export function SectionContentHint({
+  isEmpty,
+  characterCount,
+  exampleContent,
+  minCharacters = 50,
+  className,
+}: SectionContentHintProps) {
+  return (
+    <ContentHint
+      show={isEmpty || characterCount < minCharacters}
+      example={isEmpty ? exampleContent : undefined}
+      characterCount={isEmpty ? 0 : characterCount}
+      minCharacters={minCharacters}
+      className={className}
+    />
+  );
+}
diff --git a/components/resume/ExportMenu.tsx b/components/resume/ExportMenu.tsx
new file mode 100644
index 000000000..30dfc2463
--- /dev/null
+++ b/components/resume/ExportMenu.tsx
@@ -0,0 +1,201 @@
+'use client';
+
+import { useState } from 'react';
+import { useResume } from '@/contexts/ResumeContext';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Download, FileText, FileJson, Loader2, CheckCircle2, XCircle } from 'lucide-react';
+import { toast } from 'sonner';
+import { LazyResumeExportService } from '@/lib/services/resume-export-lazy';
+import { ExportFormat } from '@/types/resume';
+
+// Export format options with icons and descriptions
+const EXPORT_FORMATS = [
+  {
+    id: 'pdf' as ExportFormat,
+    name: 'PDF',
+    description: 'Portable Document Format',
+    icon: FileText,
+  },
+  {
+    id: 'docx' as ExportFormat,
+    name: 'DOCX',
+    description: 'Microsoft Word Document',
+    icon: FileText,
+  },
+  {
+    id: 'json' as ExportFormat,
+    name: 'JSON',
+    description: 'Data format for backup',
+    icon: FileJson,
+  },
+];
+
+interface ExportMenuProps {
+  compact?: boolean;
+}
+
+export function ExportMenu({ compact = false }: ExportMenuProps) {
+  const { resume, updateMetadata } = useResume();
+  const [exporting, setExporting] = useState(false);
+  const [exportingFormat, setExportingFormat] = useState<ExportFormat | null>(null);
+
+  // Handle export
+  const handleExport = async (format: ExportFormat) => {
+    if (!resume) {
+      toast.error('No resume to export', {
+        description: 'Please create or load a resume first.',
+      });
+      return;
+    }
+
+    setExporting(true);
+    setExportingFormat(format);
+
+    try {
+      // Show progress toast with estimated time
+      const progressToast = toast.loading(`Exporting as ${format.toUpperCase()}...`, {
+        description: 'Generating your resume. This may take a few seconds.',
+        duration: Infinity, // Keep showing until dismissed
+      });
+
+      let result;
+
+      // Call appropriate export method based on format (lazy loaded)
+      switch (format) {
+        case 'pdf':
+          result = await LazyResumeExportService.exportToPDF(resume);
+          break;
+        case 'docx':
+          result = await LazyResumeExportService.exportToDOCX(resume);
+          break;
+        case 'json':
+          result = await LazyResumeExportService.exportToJSON(resume);
+          break;
+        default:
+          throw new Error(`Unsupported export format: ${format}`);
+      }
+
+      // Dismiss progress toast
+      toast.dismiss(progressToast);
+
+      if (result.success && result.blob) {
+        // Trigger download
+        LazyResumeExportService.triggerDownload(result.blob, result.filename);
+
+        // Update metadata
+        updateMetadata({
+          last_exported: new Date().toISOString(),
+          export_count: resume.metadata.export_count + 1,
+        });
+
+        // Show success toast with checkmark animation
+        toast.success('Export complete! ✓', {
+          description: `Your resume has been downloaded as ${result.filename}`,
+          icon: <CheckCircle2 className="h-5 w-5 text-green-500 animate-scale-in" />,
+          duration: 4000,
+        });
+      } else {
+        throw new Error(result.error || 'Export failed');
+      }
+    } catch (error) {
+      console.error('Export error:', error);
+      
+      toast.error('Export failed', {
+        description: error instanceof Error ? error.message : 'Failed to export your resume. Please try again.',
+        icon: <XCircle className="h-4 w-4" />,
+      });
+    } finally {
+      setExporting(false);
+      setExportingFormat(null);
+    }
+  };
+
+  // If compact mode, render as nested menu items
+  if (compact) {
+    return (
+      <>
+        {EXPORT_FORMATS.map((format) => {
+          const Icon = format.icon;
+          const isExportingThis = exporting && exportingFormat === format.id;
+
+          return (
+            <DropdownMenuItem
+              key={format.id}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleExport(format.id);
+              }}
+              disabled={exporting}
+              className="cursor-pointer pl-8"
+            >
+              {isExportingThis ? (
+                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+              ) : (
+                <Icon className="h-4 w-4 mr-2" />
+              )}
+              <span>{format.name}</span>
+            </DropdownMenuItem>
+          );
+        })}
+      </>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" disabled={!resume || exporting}>
+          {exporting ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Download className="h-4 w-4" />
+          )}
+          <span className="hidden sm:inline">
+            {exporting && exportingFormat
+              ? `Exporting ${exportingFormat.toUpperCase()}...`
+              : 'Export'}
+          </span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-64">
+        <DropdownMenuLabel>Export Format</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {EXPORT_FORMATS.map((format) => {
+          const Icon = format.icon;
+          const isExportingThis = exporting && exportingFormat === format.id;
+
+          return (
+            <DropdownMenuItem
+              key={format.id}
+              onClick={() => handleExport(format.id)}
+              disabled={exporting}
+              className="cursor-pointer"
+            >
+              <div className="flex items-center gap-3 w-full">
+                {isExportingThis ? (
+                  <Loader2 className="h-4 w-4 animate-spin flex-shrink-0" />
+                ) : (
+                  <Icon className="h-4 w-4 flex-shrink-0" />
+                )}
+                <div className="flex flex-col flex-1 min-w-0">
+                  <span className="font-medium">{format.name}</span>
+                  <span className="text-xs text-muted-foreground truncate">
+                    {format.description}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/resume/ExportProgress.tsx b/components/resume/ExportProgress.tsx
new file mode 100644
index 000000000..8c3eaecf2
--- /dev/null
+++ b/components/resume/ExportProgress.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Progress } from '@/components/ui/progress';
+import { Loader2 } from 'lucide-react';
+
+interface ExportProgressProps {
+  format: string;
+  onComplete?: () => void;
+}
+
+export function ExportProgress({ format, onComplete }: ExportProgressProps) {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    // Simulate progress for better UX
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 90) {
+          clearInterval(interval);
+          return 90; // Stop at 90% until actual completion
+        }
+        return prev + 10;
+      });
+    }, 300);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (progress === 100 && onComplete) {
+      onComplete();
+    }
+  }, [progress, onComplete]);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-3">
+        <Loader2 className="h-5 w-5 animate-spin text-primary" />
+        <div className="flex-1">
+          <p className="text-sm font-medium">Exporting as {format.toUpperCase()}</p>
+          <p className="text-xs text-muted-foreground">
+            {progress < 30 && 'Preparing document...'}
+            {progress >= 30 && progress < 60 && 'Rendering content...'}
+            {progress >= 60 && progress < 90 && 'Finalizing export...'}
+            {progress >= 90 && 'Almost done...'}
+          </p>
+        </div>
+      </div>
+      <Progress value={progress} className="h-2" />
+    </div>
+  );
+}
diff --git a/components/resume/ImportDialog.tsx b/components/resume/ImportDialog.tsx
new file mode 100644
index 000000000..b796317df
--- /dev/null
+++ b/components/resume/ImportDialog.tsx
@@ -0,0 +1,308 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Upload, FileJson, AlertCircle, CheckCircle2, X } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Progress } from '@/components/ui/progress';
+import { ResumeImportService, ImportResult } from '@/lib/services/resume-import';
+import { useResume } from '@/contexts/ResumeContext';
+
+interface ImportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+type ImportState = 'idle' | 'uploading' | 'processing' | 'success' | 'error';
+
+export function ImportDialog({ open, onOpenChange }: ImportDialogProps) {
+  const { importFromJSON } = useResume();
+  const [state, setState] = useState<ImportState>('idle');
+  const [progress, setProgress] = useState(0);
+  const [result, setResult] = useState<ImportResult | null>(null);
+  const [dragActive, setDragActive] = useState(false);
+
+  const resetState = useCallback(() => {
+    setState('idle');
+    setProgress(0);
+    setResult(null);
+    setDragActive(false);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    resetState();
+    onOpenChange(false);
+  }, [resetState, onOpenChange]);
+
+  const processFile = async (file: File) => {
+    try {
+      setState('uploading');
+      setProgress(20);
+
+      // Validate file type
+      if (!ResumeImportService.validateFileType(file)) {
+        setResult({
+          success: false,
+          errors: ['Invalid file type. Please upload a JSON file.'],
+          warnings: [],
+          fieldsPopulated: 0,
+        });
+        setState('error');
+        return;
+      }
+
+      // Validate file size
+      if (!ResumeImportService.validateFileSize(file, 5)) {
+        setResult({
+          success: false,
+          errors: ['File size exceeds 5MB limit.'],
+          warnings: [],
+          fieldsPopulated: 0,
+        });
+        setState('error');
+        return;
+      }
+
+      setProgress(40);
+      setState('processing');
+
+      // Read file content
+      const fileContent = await file.text();
+      setProgress(60);
+
+      // Import resume data
+      const importResult = await importFromJSON(fileContent);
+      setProgress(100);
+
+      setResult(importResult);
+      setState(importResult.success ? 'success' : 'error');
+
+      // Close dialog after successful import
+      if (importResult.success) {
+        setTimeout(() => {
+          handleClose();
+        }, 2000);
+      }
+    } catch (error) {
+      setResult({
+        success: false,
+        errors: [`Failed to process file: ${error instanceof Error ? error.message : 'Unknown error'}`],
+        warnings: [],
+        fieldsPopulated: 0,
+      });
+      setState('error');
+    }
+  };
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      processFile(file);
+    }
+  };
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      processFile(file);
+    }
+  };
+
+  const renderContent = () => {
+    switch (state) {
+      case 'idle':
+        return (
+          <div className="space-y-4">
+            <div
+              className={`
+                relative border-2 border-dashed rounded-lg p-8
+                transition-colors duration-200
+                ${dragActive 
+                  ? 'border-primary bg-primary/5' 
+                  : 'border-muted-foreground/25 hover:border-primary/50'
+                }
+              `}
+              onDragEnter={handleDragEnter}
+              onDragLeave={handleDragLeave}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+            >
+              <div className="flex flex-col items-center justify-center space-y-4 text-center">
+                <div className="p-4 rounded-full bg-primary/10">
+                  <Upload className="h-8 w-8 text-primary" />
+                </div>
+                
+                <div className="space-y-2">
+                  <p className="text-lg font-medium">
+                    Drop your resume JSON file here
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    or click to browse
+                  </p>
+                </div>
+
+                <input
+                  type="file"
+                  accept=".json,application/json"
+                  onChange={handleFileSelect}
+                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                  disabled={state !== 'idle'}
+                />
+              </div>
+            </div>
+
+            <Alert>
+              <FileJson className="h-4 w-4" />
+              <AlertDescription>
+                Upload a JSON file exported from this resume builder or compatible format.
+                Maximum file size: 5MB.
+              </AlertDescription>
+            </Alert>
+          </div>
+        );
+
+      case 'uploading':
+      case 'processing':
+        return (
+          <div className="space-y-4 py-8">
+            <div className="flex flex-col items-center justify-center space-y-4">
+              <div className="p-4 rounded-full bg-primary/10 animate-pulse">
+                <Upload className="h-8 w-8 text-primary" />
+              </div>
+              
+              <div className="space-y-2 text-center w-full">
+                <p className="text-lg font-medium">
+                  {state === 'uploading' ? 'Uploading file...' : 'Processing resume data...'}
+                </p>
+                <Progress value={progress} className="w-full" />
+                <p className="text-sm text-muted-foreground">
+                  {progress}% complete
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'success':
+        return (
+          <div className="space-y-4 py-8 animate-fade-in">
+            <div className="flex flex-col items-center justify-center space-y-4">
+              <div className="p-4 rounded-full bg-green-500/10 animate-scale-in">
+                <CheckCircle2 className="h-8 w-8 text-green-500" />
+              </div>
+              
+              <div className="space-y-2 text-center">
+                <p className="text-lg font-medium text-green-600 dark:text-green-400">
+                  🎉 Import successful!
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {result?.fieldsPopulated || 0} fields populated
+                </p>
+              </div>
+
+              {result?.warnings && result.warnings.length > 0 && (
+                <Alert className="w-full">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription>
+                    <div className="space-y-1">
+                      {result.warnings.map((warning, index) => (
+                        <p key={index} className="text-sm">{warning}</p>
+                      ))}
+                    </div>
+                  </AlertDescription>
+                </Alert>
+              )}
+            </div>
+          </div>
+        );
+
+      case 'error':
+        return (
+          <div className="space-y-4 py-4">
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                <div className="space-y-2">
+                  <p className="font-medium">Import failed</p>
+                  {result?.errors && result.errors.length > 0 && (
+                    <ul className="list-disc list-inside space-y-1">
+                      {result.errors.map((error, index) => (
+                        <li key={index} className="text-sm">{error}</li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              </AlertDescription>
+            </Alert>
+
+            <div className="flex justify-end space-x-2">
+              <Button variant="outline" onClick={resetState}>
+                Try Again
+              </Button>
+              <Button variant="default" onClick={handleClose}>
+                Close
+              </Button>
+            </div>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <div className="flex items-center justify-between">
+            <DialogTitle>Import Resume</DialogTitle>
+            {state !== 'uploading' && state !== 'processing' && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={handleClose}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+          <DialogDescription>
+            Import your resume data from a JSON file
+          </DialogDescription>
+        </DialogHeader>
+
+        {renderContent()}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/resume/LoadingSkeleton.tsx b/components/resume/LoadingSkeleton.tsx
new file mode 100644
index 000000000..6ac5bc6c2
--- /dev/null
+++ b/components/resume/LoadingSkeleton.tsx
@@ -0,0 +1,144 @@
+'use client';
+
+import { Skeleton } from '@/components/ui/skeleton';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+
+export function ResumeEditorSkeleton() {
+  return (
+    <div className="h-full overflow-y-auto p-6 space-y-6">
+      {/* Resume Title Skeleton */}
+      <div className="space-y-2">
+        <Skeleton className="h-10 w-64" />
+      </div>
+
+      {/* Section Skeletons */}
+      {[1, 2, 3, 4].map((i) => (
+        <Card key={i}>
+          <CardHeader>
+            <Skeleton className="h-6 w-48" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+            <Skeleton className="h-20 w-full" />
+          </CardContent>
+        </Card>
+      ))}
+
+      {/* Add Section Button Skeleton */}
+      <Skeleton className="h-10 w-40" />
+    </div>
+  );
+}
+
+export function ResumePreviewSkeleton() {
+  return (
+    <div className="h-full flex flex-col bg-muted/20">
+      {/* Preview Toolbar Skeleton */}
+      <div className="flex items-center justify-between p-4 border-b">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-8 w-8" />
+          <Skeleton className="h-6 w-12" />
+          <Skeleton className="h-8 w-8" />
+        </div>
+        <Skeleton className="h-6 w-16" />
+      </div>
+
+      {/* Preview Content Skeleton */}
+      <div className="flex-1 overflow-auto p-8 flex justify-center">
+        <div className="bg-white shadow-2xl w-[8.5in] min-h-[11in] p-12 space-y-6">
+          {/* Header */}
+          <div className="space-y-2">
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-4 w-64" />
+            <Skeleton className="h-4 w-56" />
+          </div>
+
+          {/* Sections */}
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="space-y-3">
+              <Skeleton className="h-6 w-32" />
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-3/4" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ResumeListSkeleton() {
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header Skeleton */}
+      <div className="p-4 border-b space-y-3">
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-9 w-full" />
+      </div>
+
+      {/* List Items Skeleton */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <Card key={i} className="cursor-pointer hover:bg-accent/50 transition-colors">
+            <CardContent className="p-4">
+              <div className="space-y-2">
+                <Skeleton className="h-5 w-3/4" />
+                <div className="flex items-center justify-between">
+                  <Skeleton className="h-4 w-32" />
+                  <Skeleton className="h-4 w-24" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function FullPageLoadingSkeleton() {
+  return (
+    <div className="flex flex-col h-screen bg-background">
+      {/* Toolbar Skeleton */}
+      <div className="border-b bg-background px-4 py-3">
+        <div className="flex items-center justify-between gap-4">
+          <Skeleton className="h-6 w-48" />
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-9 w-20" />
+            <Skeleton className="h-9 w-24" />
+            <Skeleton className="h-9 w-20" />
+            <Skeleton className="h-9 w-28" />
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content Skeleton */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Sidebar Skeleton */}
+        <div className="w-80 border-r p-4 space-y-3">
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-9 w-full" />
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-20 w-full" />
+          ))}
+        </div>
+
+        {/* Editor Skeleton */}
+        <div className="w-[40%] min-w-[400px] max-w-[600px]">
+          <ResumeEditorSkeleton />
+        </div>
+
+        {/* Preview Skeleton */}
+        <div className="flex-1">
+          <ResumePreviewSkeleton />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/resume/MetadataDisplay.tsx b/components/resume/MetadataDisplay.tsx
new file mode 100644
index 000000000..2ac9f6e15
--- /dev/null
+++ b/components/resume/MetadataDisplay.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { useResume } from '@/contexts/ResumeContext';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { FileText, Calendar, Download, Hash } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+
+export function MetadataDisplay() {
+  const { resume } = useResume();
+
+  if (!resume) {
+    return null;
+  }
+
+  const { word_count, page_count, last_exported, export_count } = resume.metadata;
+
+  // Format last exported date
+  const formatLastExported = () => {
+    if (!last_exported) return 'Never';
+    try {
+      return formatDistanceToNow(new Date(last_exported), { addSuffix: true });
+    } catch {
+      return 'Unknown';
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">Resume Statistics</CardTitle>
+        <CardDescription>Metadata and usage information</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Word Count */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Hash className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">Word Count</span>
+          </div>
+          <Badge variant="secondary">{word_count || 0}</Badge>
+        </div>
+
+        {/* Page Count */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <FileText className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">Page Count</span>
+          </div>
+          <Badge variant="secondary">
+            {page_count || 1} {page_count === 1 ? 'page' : 'pages'}
+          </Badge>
+        </div>
+
+        {/* Export Count */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Download className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">Times Exported</span>
+          </div>
+          <Badge variant="secondary">{export_count || 0}</Badge>
+        </div>
+
+        {/* Last Exported */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Calendar className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">Last Exported</span>
+          </div>
+          <span className="text-sm text-muted-foreground">{formatLastExported()}</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/resume/PreviewToolbar.tsx b/components/resume/PreviewToolbar.tsx
new file mode 100644
index 000000000..c503912c9
--- /dev/null
+++ b/components/resume/PreviewToolbar.tsx
@@ -0,0 +1,144 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ZoomIn, ZoomOut, Maximize2 } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+
+interface PreviewToolbarProps {
+  zoom: number;
+  onZoomChange: (zoom: number) => void;
+  pageCount: number;
+  fitToScreen?: boolean;
+  onFitToScreenChange?: (fit: boolean) => void;
+  isMobile?: boolean;
+}
+
+const ZOOM_LEVELS = [50, 75, 100, 125, 150];
+
+export function PreviewToolbar({ 
+  zoom, 
+  onZoomChange, 
+  pageCount,
+  fitToScreen = false,
+  onFitToScreenChange,
+  isMobile = false
+}: PreviewToolbarProps) {
+  const handleZoomIn = () => {
+    if (onFitToScreenChange) {
+      onFitToScreenChange(false);
+    }
+    const currentIndex = ZOOM_LEVELS.indexOf(zoom);
+    if (currentIndex < ZOOM_LEVELS.length - 1) {
+      onZoomChange(ZOOM_LEVELS[currentIndex + 1]);
+    }
+  };
+
+  const handleZoomOut = () => {
+    if (onFitToScreenChange) {
+      onFitToScreenChange(false);
+    }
+    const currentIndex = ZOOM_LEVELS.indexOf(zoom);
+    if (currentIndex > 0) {
+      onZoomChange(ZOOM_LEVELS[currentIndex - 1]);
+    }
+  };
+
+  const handleFitToScreen = () => {
+    if (onFitToScreenChange) {
+      onFitToScreenChange(!fitToScreen);
+    }
+  };
+
+  const canZoomIn = zoom < ZOOM_LEVELS[ZOOM_LEVELS.length - 1];
+  const canZoomOut = zoom > ZOOM_LEVELS[0];
+
+  return (
+    <div className="flex items-center justify-between p-2 sm:p-4 border-b bg-background">
+      {/* Zoom Controls */}
+      <div className="flex items-center gap-1 sm:gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleZoomOut}
+          disabled={!canZoomOut || fitToScreen}
+          aria-label="Zoom out"
+          title="Zoom out"
+          className="h-8 w-8 sm:h-9 sm:w-auto sm:px-3"
+        >
+          <ZoomOut className="h-4 w-4" />
+        </Button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="min-w-[60px] sm:min-w-[70px] font-medium h-8 sm:h-9 text-xs sm:text-sm"
+              aria-label={`Current zoom level: ${zoom}%`}
+              disabled={fitToScreen}
+            >
+              {fitToScreen ? 'Fit' : `${zoom}%`}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {ZOOM_LEVELS.map((level) => (
+              <DropdownMenuItem
+                key={level}
+                onClick={() => {
+                  if (onFitToScreenChange) {
+                    onFitToScreenChange(false);
+                  }
+                  onZoomChange(level);
+                }}
+                className={zoom === level && !fitToScreen ? 'bg-accent' : ''}
+              >
+                {level}%
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleZoomIn}
+          disabled={!canZoomIn || fitToScreen}
+          aria-label="Zoom in"
+          title="Zoom in"
+          className="h-8 w-8 sm:h-9 sm:w-auto sm:px-3"
+        >
+          <ZoomIn className="h-4 w-4" />
+        </Button>
+
+        {/* Fit to Screen Button (Mobile Only) */}
+        {isMobile && onFitToScreenChange && (
+          <Button
+            variant={fitToScreen ? 'default' : 'outline'}
+            size="sm"
+            onClick={handleFitToScreen}
+            aria-label="Fit to screen"
+            title="Fit to screen"
+            className={cn(
+              "h-8 w-8 sm:h-9 sm:w-auto sm:px-3",
+              fitToScreen && "bg-primary text-primary-foreground"
+            )}
+          >
+            <Maximize2 className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Page Count Indicator */}
+      <Badge variant="secondary" className="font-medium text-xs sm:text-sm">
+        <span className="hidden sm:inline">Page </span>{pageCount}
+      </Badge>
+    </div>
+  );
+}
diff --git a/components/resume/ResumeBuilderClient.tsx b/components/resume/ResumeBuilderClient.tsx
new file mode 100644
index 000000000..07aa852f5
--- /dev/null
+++ b/components/resume/ResumeBuilderClient.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { ResumeProvider } from '@/contexts/ResumeContext';
+import { ResumeBuilderLayout } from './ResumeBuilderLayout';
+import { Resume } from '@/types/resume';
+import { Profile } from '@/types/profile';
+
+interface ResumeBuilderClientProps {
+  initialResumes: Resume[];
+  userProfile: Profile | null;
+}
+
+export function ResumeBuilderClient({ 
+  initialResumes, 
+  userProfile 
+}: ResumeBuilderClientProps) {
+  return (
+    <ResumeProvider 
+      initialResumes={initialResumes}
+      userProfile={userProfile}
+    >
+      <ResumeBuilderLayout />
+    </ResumeProvider>
+  );
+}
diff --git a/components/resume/ResumeBuilderLayout.tsx b/components/resume/ResumeBuilderLayout.tsx
new file mode 100644
index 000000000..3a6ed6744
--- /dev/null
+++ b/components/resume/ResumeBuilderLayout.tsx
@@ -0,0 +1,234 @@
+'use client';
+
+import { useResume } from '@/contexts/ResumeContext';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
+import { useFocusVisible } from '@/hooks/useFocusManagement';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Separator } from '@/components/ui/separator';
+import { ResumeEditor } from './ResumeEditor';
+import { ResumePreview } from './ResumePreview';
+import { ResumeToolbar } from './ResumeToolbar';
+import { SaveErrorBanner } from './SaveErrorBanner';
+import { useState, useEffect, useRef, lazy, Suspense } from 'react';
+import { FileEdit, Eye, List } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import toast from 'react-hot-toast';
+import { LiveRegion } from '@/components/accessibility/LiveRegion';
+import { FullPageLoadingSkeleton, ResumeListSkeleton } from './LoadingSkeleton';
+
+// Lazy load large components for better performance
+const ResumeList = lazy(() => import('./ResumeList').then(m => ({ default: m.ResumeList })));
+
+export function ResumeBuilderLayout() {
+  const { loading, saveResume, resume, announcement } = useResume();
+  const isMobile = useIsMobile();
+  const [mounted, setMounted] = useState(false);
+  const [resumeListOpen, setResumeListOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState('editor');
+  const [showExportMenu, setShowExportMenu] = useState(false);
+  
+  // Touch gesture state
+  const touchStartX = useRef<number>(0);
+  const touchEndX = useRef<number>(0);
+  const tabsContainerRef = useRef<HTMLDivElement>(null);
+
+  // Enable focus visible indicators for keyboard navigation
+  useFocusVisible();
+
+  // Keyboard shortcuts
+  useKeyboardShortcuts(
+    [
+      {
+        key: 's',
+        ctrl: true,
+        handler: (e) => {
+          e.preventDefault();
+          if (resume) {
+            saveResume();
+            toast.success('Resume saved successfully');
+          }
+        },
+        description: 'Save resume',
+      },
+      {
+        key: 'e',
+        ctrl: true,
+        handler: (e) => {
+          e.preventDefault();
+          setShowExportMenu(true);
+        },
+        description: 'Open export menu',
+      },
+      {
+        key: 'Escape',
+        handler: (e) => {
+          e.preventDefault();
+          if (resumeListOpen) {
+            setResumeListOpen(false);
+          } else if (showExportMenu) {
+            setShowExportMenu(false);
+          }
+        },
+        description: 'Close dialogs',
+      },
+    ],
+    mounted && !loading
+  );
+
+  // Handle hydration mismatch by only rendering after mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Handle swipe gestures for tab switching on mobile
+  const handleTouchStart = (e: React.TouchEvent) => {
+    if (!isMobile) return;
+    touchStartX.current = e.touches[0].clientX;
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (!isMobile) return;
+    touchEndX.current = e.touches[0].clientX;
+  };
+
+  const handleTouchEnd = () => {
+    if (!isMobile) return;
+    
+    const swipeThreshold = 50; // Minimum swipe distance in pixels
+    const swipeDistance = touchStartX.current - touchEndX.current;
+
+    // Swipe left (next tab)
+    if (swipeDistance > swipeThreshold && activeTab === 'editor') {
+      setActiveTab('preview');
+    }
+    
+    // Swipe right (previous tab)
+    if (swipeDistance < -swipeThreshold && activeTab === 'preview') {
+      setActiveTab('editor');
+    }
+
+    // Reset touch positions
+    touchStartX.current = 0;
+    touchEndX.current = 0;
+  };
+
+  if (loading || !mounted) {
+    return <FullPageLoadingSkeleton />;
+  }
+
+  return (
+    <div className="flex flex-col h-screen bg-background">
+      {/* Skip to main content link for keyboard navigation */}
+      <a href="#resume-editor" className="skip-link">
+        Skip to resume editor
+      </a>
+      
+      {/* Live Region for Screen Reader Announcements */}
+      <LiveRegion message={announcement} />
+      
+      {/* Toolbar */}
+      <ResumeToolbar />
+      
+      {/* Save Error Banner */}
+      <div className="px-4 pt-4">
+        <SaveErrorBanner />
+      </div>
+      
+      {/* Main Content */}
+      <div className="flex-1 flex overflow-hidden">
+        {isMobile ? (
+          // Mobile: Tabbed Interface with Resume List Sheet and Swipe Gestures
+          <>
+            <Tabs 
+              value={activeTab} 
+              onValueChange={setActiveTab}
+              className="flex-1 flex flex-col"
+            >
+              <div className="border-b bg-background px-4">
+                <div className="flex items-center gap-2">
+                  <Sheet open={resumeListOpen} onOpenChange={setResumeListOpen}>
+                    <SheetTrigger asChild>
+                      <Button variant="ghost" size="sm" className="mr-2">
+                        <List className="h-4 w-4" />
+                      </Button>
+                    </SheetTrigger>
+                    <SheetContent side="left" className="w-full sm:max-w-md p-0">
+                      <SheetHeader className="sr-only">
+                        <SheetTitle>Resume List</SheetTitle>
+                      </SheetHeader>
+                      <Suspense fallback={<ResumeListSkeleton />}>
+                        <ResumeList 
+                          onResumeSelect={() => setResumeListOpen(false)}
+                          onCreateNew={() => setResumeListOpen(false)}
+                        />
+                      </Suspense>
+                    </SheetContent>
+                  </Sheet>
+                  <TabsList className="flex-1 grid grid-cols-2 h-12">
+                    <TabsTrigger value="editor" className="flex items-center gap-2">
+                      <FileEdit className="h-4 w-4" />
+                      <span>Edit</span>
+                    </TabsTrigger>
+                    <TabsTrigger value="preview" className="flex items-center gap-2">
+                      <Eye className="h-4 w-4" />
+                      <span>Preview</span>
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+              </div>
+              <div
+                ref={tabsContainerRef}
+                onTouchStart={handleTouchStart}
+                onTouchMove={handleTouchMove}
+                onTouchEnd={handleTouchEnd}
+                className="flex-1 overflow-hidden"
+              >
+                <TabsContent 
+                  value="editor" 
+                  className={`h-full m-0 overflow-hidden ${
+                    activeTab === 'editor' ? 'animate-slide-in-left' : ''
+                  }`}
+                >
+                  <ResumeEditor />
+                </TabsContent>
+                <TabsContent 
+                  value="preview" 
+                  className={`h-full m-0 overflow-hidden ${
+                    activeTab === 'preview' ? 'animate-slide-in-right' : ''
+                  }`}
+                >
+                  <ResumePreview />
+                </TabsContent>
+              </div>
+            </Tabs>
+          </>
+        ) : (
+          // Desktop: Split-Panel Layout with Resume List Sidebar
+          <div className="flex-1 flex">
+            {/* Resume List Sidebar */}
+            <div className="w-80 border-r flex flex-col">
+              <Suspense fallback={<ResumeListSkeleton />}>
+                <ResumeList />
+              </Suspense>
+            </div>
+
+            {/* Editor Panel */}
+            <div className="w-[40%] min-w-[400px] max-w-[600px] flex flex-col">
+              <ResumeEditor />
+            </div>
+
+            {/* Separator */}
+            <Separator orientation="vertical" className="h-full" />
+
+            {/* Preview Panel */}
+            <div className="flex-1 flex flex-col">
+              <ResumePreview />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/resume/ResumeEditor.tsx b/components/resume/ResumeEditor.tsx
new file mode 100644
index 000000000..4bd90e940
--- /dev/null
+++ b/components/resume/ResumeEditor.tsx
@@ -0,0 +1,183 @@
+'use client';
+
+import { useResume } from '@/contexts/ResumeContext';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+  DragStartEvent,
+  DragOverlay,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { useState } from 'react';
+import { SortableSection } from './SortableSection';
+import { AddSectionMenu } from './AddSectionMenu';
+import { MetadataDisplay } from './MetadataDisplay';
+import { SuggestionPanel } from './SuggestionPanel';
+
+export function ResumeEditor() {
+  const { resume, updateResumeTitle, reorderSections } = useResume();
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [focusedSectionIndex, setFocusedSectionIndex] = useState<number>(-1);
+
+  // Configure drag sensors with touch support
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // 8px movement required to start drag
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 250, // 250ms press delay for touch
+        tolerance: 5, // 5px movement tolerance
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id && resume) {
+      const oldIndex = resume.sections.findIndex((s) => s.id === active.id);
+      const newIndex = resume.sections.findIndex((s) => s.id === over.id);
+
+      const reorderedSections = arrayMove(resume.sections, oldIndex, newIndex);
+      reorderSections(reorderedSections);
+    }
+
+    setActiveId(null);
+  };
+
+  const handleDragCancel = () => {
+    setActiveId(null);
+  };
+
+  // Handle keyboard-based section reordering
+  const handleSectionKeyDown = (event: React.KeyboardEvent, index: number) => {
+    if (!resume) return;
+
+    const isArrowUp = event.key === 'ArrowUp' && event.altKey;
+    const isArrowDown = event.key === 'ArrowDown' && event.altKey;
+
+    if (isArrowUp || isArrowDown) {
+      event.preventDefault();
+      
+      const newIndex = isArrowUp ? index - 1 : index + 1;
+      
+      if (newIndex >= 0 && newIndex < resume.sections.length) {
+        const reorderedSections = arrayMove(resume.sections, index, newIndex);
+        reorderSections(reorderedSections);
+        setFocusedSectionIndex(newIndex);
+      }
+    }
+  };
+
+  const activeSection = resume?.sections.find((s) => s.id === activeId);
+
+  if (!resume) {
+    return (
+      <div className="h-full overflow-y-auto p-6 space-y-6 bg-background">
+        <div className="flex items-center justify-center h-full">
+          <div className="text-center space-y-4">
+            <p className="text-lg text-muted-foreground">
+              No resume selected
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Create or select a resume to start editing
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      id="resume-editor"
+      className="h-full overflow-y-auto p-6 space-y-6 bg-background"
+      role="region"
+      aria-label="Resume editor"
+    >
+      {/* Resume Title Input */}
+      <div className="space-y-2">
+        <Label htmlFor="resume-title" className="text-sm font-medium">
+          Resume Title
+        </Label>
+        <Input
+          id="resume-title"
+          value={resume.title}
+          onChange={(e) => updateResumeTitle(e.target.value)}
+          placeholder="e.g., Software Engineer Resume"
+          className="text-lg font-semibold"
+          aria-describedby="resume-title-description"
+        />
+        <p id="resume-title-description" className="sr-only">
+          Enter a descriptive title for your resume to help you identify it later
+        </p>
+      </div>
+
+      {/* Sections Container with Drag-and-Drop */}
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+      >
+        <div className="space-y-4" role="list" aria-label="Resume sections">
+          <SortableContext
+            items={resume.sections.map((s) => s.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            {resume.sections.map((section, index) => (
+              <SortableSection 
+                key={section.id} 
+                section={section}
+                index={index}
+                onKeyDown={handleSectionKeyDown}
+                autoFocus={focusedSectionIndex === index}
+              />
+            ))}
+          </SortableContext>
+
+          <DragOverlay>
+            {activeSection ? (
+              <div className="bg-card border-2 border-primary rounded-lg p-4 shadow-lg opacity-90">
+                <h3 className="font-semibold">{activeSection.title}</h3>
+              </div>
+            ) : null}
+          </DragOverlay>
+        </div>
+      </DndContext>
+
+      {/* Add Section Button */}
+      <AddSectionMenu />
+
+      {/* Suggestion Panel */}
+      <SuggestionPanel />
+
+      {/* Metadata Display */}
+      <MetadataDisplay />
+    </div>
+  );
+}
diff --git a/components/resume/ResumeErrorBoundary.tsx b/components/resume/ResumeErrorBoundary.tsx
new file mode 100644
index 000000000..04c165518
--- /dev/null
+++ b/components/resume/ResumeErrorBoundary.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import React, { Component, ReactNode } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+import { ResumeError, ErrorLogger, getErrorMessage } from '@/lib/errors/resume-errors';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Error Boundary for Resume Builder
+ * Catches errors in the component tree and displays a fallback UI
+ */
+export class ResumeErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // Log error
+    if (error instanceof ResumeError) {
+      ErrorLogger.log(error, {
+        componentStack: errorInfo.componentStack,
+      });
+    } else {
+      ErrorLogger.log(
+        new ResumeError(error.message, 'UNKNOWN_ERROR' as any, {
+          originalError: error,
+          componentStack: errorInfo.componentStack,
+        })
+      );
+    }
+
+    // Call custom error handler if provided
+    this.props.onError?.(error, errorInfo);
+  }
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+    });
+  };
+
+  handleReload = () => {
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      const errorMessage = getErrorMessage(this.state.error);
+
+      return (
+        <div className="flex items-center justify-center min-h-screen p-4 bg-background">
+          <Card className="max-w-md w-full">
+            <CardHeader>
+              <div className="flex items-center gap-2 text-destructive">
+                <AlertTriangle className="h-5 w-5" />
+                <CardTitle>Something went wrong</CardTitle>
+              </div>
+              <CardDescription>
+                {errorMessage}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {process.env.NODE_ENV === 'development' && this.state.error && (
+                <div className="p-3 bg-muted rounded-md">
+                  <p className="text-xs font-mono text-muted-foreground break-all">
+                    {this.state.error.message}
+                  </p>
+                </div>
+              )}
+              <div className="flex gap-2">
+                <Button
+                  onClick={this.handleReset}
+                  variant="outline"
+                  className="flex-1"
+                >
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                  Try Again
+                </Button>
+                <Button
+                  onClick={this.handleReload}
+                  className="flex-1"
+                >
+                  Reload Page
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/components/resume/ResumeList.tsx b/components/resume/ResumeList.tsx
new file mode 100644
index 000000000..afb92f41b
--- /dev/null
+++ b/components/resume/ResumeList.tsx
@@ -0,0 +1,297 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { useResume } from '@/contexts/ResumeContext';
+import { Resume } from '@/types/resume';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+import {
+  FileText,
+  Search,
+  MoreVertical,
+  Trash2,
+  Copy,
+  Calendar,
+  Plus,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { formatDistanceToNow } from 'date-fns';
+
+interface ResumeListProps {
+  onResumeSelect?: (resume: Resume) => void;
+  onCreateNew?: () => void;
+}
+
+export function ResumeList({ onResumeSelect, onCreateNew }: ResumeListProps) {
+  const {
+    resumes,
+    resume: currentResume,
+    loadResume,
+    deleteResume,
+    duplicateResume,
+    createResume,
+  } = useResume();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [resumeToDelete, setResumeToDelete] = useState<Resume | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // Filter resumes based on search query
+  const filteredResumes = useMemo(() => {
+    if (!searchQuery.trim()) return resumes;
+
+    const query = searchQuery.toLowerCase();
+    return resumes.filter((resume) =>
+      resume.title.toLowerCase().includes(query)
+    );
+  }, [resumes, searchQuery]);
+
+  // Handle resume selection
+  const handleSelectResume = async (resume: Resume) => {
+    try {
+      await loadResume(resume.id);
+      onResumeSelect?.(resume);
+      toast.success('Resume loaded', {
+        description: `Loaded "${resume.title}"`,
+      });
+    } catch (error) {
+      toast.error('Failed to load resume', {
+        description: 'Please try again.',
+      });
+    }
+  };
+
+  // Handle resume duplication
+  const handleDuplicateResume = async (resume: Resume) => {
+    try {
+      const duplicated = await duplicateResume(resume.id);
+      toast.success('Resume duplicated', {
+        description: `Created "${duplicated.title}"`,
+      });
+    } catch (error) {
+      toast.error('Failed to duplicate resume', {
+        description: 'Please try again.',
+      });
+    }
+  };
+
+  // Handle delete confirmation
+  const handleDeleteClick = (resume: Resume) => {
+    setResumeToDelete(resume);
+    setDeleteDialogOpen(true);
+  };
+
+  // Handle resume deletion
+  const handleConfirmDelete = async () => {
+    if (!resumeToDelete) return;
+
+    setIsDeleting(true);
+    try {
+      await deleteResume(resumeToDelete.id);
+      toast.success('Resume deleted', {
+        description: `Deleted "${resumeToDelete.title}"`,
+      });
+      setDeleteDialogOpen(false);
+      setResumeToDelete(null);
+    } catch (error) {
+      toast.error('Failed to delete resume', {
+        description: 'Please try again.',
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  // Handle create new resume
+  const handleCreateNew = async () => {
+    try {
+      const newResume = await createResume('Untitled Resume', false);
+      onCreateNew?.();
+      toast.success('Resume created', {
+        description: `Created "${newResume.title}"`,
+      });
+    } catch (error) {
+      toast.error('Failed to create resume', {
+        description: 'Please try again.',
+      });
+    }
+  };
+
+  // Format date
+  const formatDate = (dateString: string) => {
+    try {
+      return formatDistanceToNow(new Date(dateString), { addSuffix: true });
+    } catch {
+      return 'Unknown';
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="p-4 border-b space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold">My Resumes</h2>
+          <Button size="sm" onClick={handleCreateNew}>
+            <Plus className="h-4 w-4 mr-2" />
+            New Resume
+          </Button>
+        </div>
+
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search resumes..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+      </div>
+
+      {/* Resume List */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {filteredResumes.length === 0 ? (
+          <div className="text-center py-12">
+            <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+            <p className="text-muted-foreground mb-2">
+              {searchQuery ? 'No resumes found' : 'No resumes yet'}
+            </p>
+            {!searchQuery && (
+              <Button variant="outline" size="sm" onClick={handleCreateNew}>
+                <Plus className="h-4 w-4 mr-2" />
+                Create your first resume
+              </Button>
+            )}
+          </div>
+        ) : (
+          filteredResumes.map((resume) => (
+            <Card
+              key={resume.id}
+              className={`cursor-pointer transition-all hover:shadow-md ${
+                currentResume?.id === resume.id
+                  ? 'ring-2 ring-primary'
+                  : ''
+              }`}
+              onClick={() => handleSelectResume(resume)}
+            >
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex-1 min-w-0">
+                    <CardTitle className="text-base truncate">
+                      {resume.title}
+                    </CardTitle>
+                    <CardDescription className="flex items-center gap-2 mt-1">
+                      <Calendar className="h-3 w-3" />
+                      <span className="text-xs">
+                        Updated {formatDate(resume.updated_at)}
+                      </span>
+                    </CardDescription>
+                  </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+                      <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDuplicateResume(resume);
+                        }}
+                      >
+                        <Copy className="h-4 w-4 mr-2" />
+                        Duplicate
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteClick(resume);
+                        }}
+                        className="text-destructive focus:text-destructive"
+                      >
+                        <Trash2 className="h-4 w-4 mr-2" />
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </CardHeader>
+              <CardContent className="pb-3">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Badge variant="secondary" className="text-xs">
+                    {resume.template_id}
+                  </Badge>
+                  <Badge variant="outline" className="text-xs">
+                    {resume.sections.length} sections
+                  </Badge>
+                  {resume.metadata?.page_count && (
+                    <Badge variant="outline" className="text-xs">
+                      {resume.metadata.page_count} {resume.metadata.page_count === 1 ? 'page' : 'pages'}
+                    </Badge>
+                  )}
+                  {resume.metadata?.word_count && (
+                    <Badge variant="outline" className="text-xs">
+                      {resume.metadata.word_count} words
+                    </Badge>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Resume</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete "{resumeToDelete?.title}"? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmDelete}
+              disabled={isDeleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/components/resume/ResumePreview.tsx b/components/resume/ResumePreview.tsx
new file mode 100644
index 000000000..dcafc3b7a
--- /dev/null
+++ b/components/resume/ResumePreview.tsx
@@ -0,0 +1,252 @@
+'use client';
+
+import { useResume } from '@/contexts/ResumeContext';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { Card, CardContent } from '@/components/ui/card';
+import { PreviewToolbar } from './PreviewToolbar';
+import { TemplateRenderer } from './templates/TemplateRenderer';
+import { useState, useEffect, useRef } from 'react';
+
+// Constants for page calculations
+const PAGE_HEIGHT_INCHES = 11;
+const PAGE_WIDTH_INCHES = 8.5;
+const PIXELS_PER_INCH = 96; // Standard screen DPI
+const PAGE_HEIGHT_PX = PAGE_HEIGHT_INCHES * PIXELS_PER_INCH;
+
+export function ResumePreview() {
+  const { resume, updateMetadata } = useResume();
+  const isMobile = useIsMobile();
+  const [zoom, setZoom] = useState(100);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [pageBreaks, setPageBreaks] = useState<number[]>([]);
+  const [fitToScreen, setFitToScreen] = useState(false);
+  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const previousResumeRef = useRef<string>('');
+  const contentRef = useRef<HTMLDivElement>(null);
+  const previewContainerRef = useRef<HTMLDivElement>(null);
+  
+  // Pinch-to-zoom state
+  const initialPinchDistance = useRef<number>(0);
+  const initialZoom = useRef<number>(100);
+
+  // Detect content changes and trigger smooth update animation
+  useEffect(() => {
+    if (!resume) return;
+
+    const currentSnapshot = JSON.stringify(resume);
+    
+    // Skip if this is the first render or nothing changed
+    if (!previousResumeRef.current) {
+      previousResumeRef.current = currentSnapshot;
+      return;
+    }
+
+    if (currentSnapshot === previousResumeRef.current) return;
+
+    // Trigger update animation with smooth transition
+    setIsUpdating(true);
+
+    // Clear existing timeout
+    if (updateTimeoutRef.current) {
+      clearTimeout(updateTimeoutRef.current);
+    }
+
+    // Reset animation state after 300ms for smooth transition
+    updateTimeoutRef.current = setTimeout(() => {
+      setIsUpdating(false);
+      previousResumeRef.current = currentSnapshot;
+    }, 300);
+
+    return () => {
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+    };
+  }, [resume]);
+
+  // Calculate page breaks and update metadata
+  useEffect(() => {
+    if (!resume || !contentRef.current) return;
+
+    // Use requestAnimationFrame to ensure DOM is fully rendered
+    const calculatePageBreaks = () => {
+      requestAnimationFrame(() => {
+        if (!contentRef.current) return;
+
+        const contentHeight = contentRef.current.scrollHeight;
+        const padding = 0.5 * PIXELS_PER_INCH * 2; // Top and bottom padding
+        const effectivePageHeight = PAGE_HEIGHT_PX - padding;
+        
+        // Calculate number of pages
+        const pageCount = Math.ceil(contentHeight / effectivePageHeight);
+        
+        // Calculate page break positions
+        const breaks: number[] = [];
+        for (let i = 1; i < pageCount; i++) {
+          breaks.push(i * effectivePageHeight);
+        }
+        
+        setPageBreaks(breaks);
+        
+        // Update metadata with new page count
+        if (updateMetadata && resume.metadata.page_count !== pageCount) {
+          updateMetadata({ page_count: pageCount });
+        }
+      });
+    };
+
+    // Calculate immediately
+    calculatePageBreaks();
+
+    // Recalculate after a short delay to ensure all content is rendered
+    const timeoutId = setTimeout(calculatePageBreaks, 100);
+
+    return () => clearTimeout(timeoutId);
+  }, [resume, updateMetadata]);
+
+  // Calculate fit-to-screen zoom on mobile
+  useEffect(() => {
+    if (!isMobile || !previewContainerRef.current || !fitToScreen) return;
+
+    const calculateFitZoom = () => {
+      if (!previewContainerRef.current) return;
+      
+      const containerWidth = previewContainerRef.current.clientWidth;
+      const pageWidthInches = 8.5;
+      const pageWidthPx = pageWidthInches * PIXELS_PER_INCH;
+      const padding = 32; // 16px padding on each side
+      
+      const fitZoom = ((containerWidth - padding) / pageWidthPx) * 100;
+      setZoom(Math.min(100, Math.max(50, fitZoom)));
+    };
+
+    calculateFitZoom();
+    window.addEventListener('resize', calculateFitZoom);
+    
+    return () => window.removeEventListener('resize', calculateFitZoom);
+  }, [isMobile, fitToScreen]);
+
+  // Pinch-to-zoom handlers for mobile
+  const handleTouchStart = (e: React.TouchEvent) => {
+    if (!isMobile || e.touches.length !== 2) return;
+    
+    const touch1 = e.touches[0];
+    const touch2 = e.touches[1];
+    const distance = Math.hypot(
+      touch2.clientX - touch1.clientX,
+      touch2.clientY - touch1.clientY
+    );
+    
+    initialPinchDistance.current = distance;
+    initialZoom.current = zoom;
+    setFitToScreen(false); // Disable fit-to-screen when user manually zooms
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (!isMobile || e.touches.length !== 2 || initialPinchDistance.current === 0) return;
+    
+    e.preventDefault(); // Prevent default pinch-zoom behavior
+    
+    const touch1 = e.touches[0];
+    const touch2 = e.touches[1];
+    const distance = Math.hypot(
+      touch2.clientX - touch1.clientX,
+      touch2.clientY - touch1.clientY
+    );
+    
+    const scale = distance / initialPinchDistance.current;
+    const newZoom = Math.min(150, Math.max(50, initialZoom.current * scale));
+    
+    setZoom(Math.round(newZoom));
+  };
+
+  const handleTouchEnd = () => {
+    initialPinchDistance.current = 0;
+  };
+
+
+
+  return (
+    <div 
+      className="h-full flex flex-col bg-muted/20"
+      role="region"
+      aria-label="Resume preview"
+    >
+      {/* Preview Toolbar */}
+      <PreviewToolbar
+        zoom={zoom}
+        onZoomChange={setZoom}
+        pageCount={resume?.metadata?.page_count || 1}
+        fitToScreen={fitToScreen}
+        onFitToScreenChange={setFitToScreen}
+        isMobile={isMobile}
+      />
+
+      {/* Preview Content */}
+      <div 
+        ref={previewContainerRef}
+        className="flex-1 overflow-auto p-4 sm:p-8 flex justify-center"
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+        aria-label="Resume preview content"
+      >
+        {resume ? (
+          <div className="relative">
+            <div
+              id="resume-preview"
+              role="document"
+              aria-label={`${resume.title} preview at ${zoom}% zoom`}
+              className={`bg-white shadow-2xl transition-all duration-500 ${
+                isUpdating ? 'opacity-90 scale-[0.995]' : 'opacity-100 scale-100'
+              }`}
+              style={{
+                transform: `scale(${zoom / 100}) ${isUpdating ? 'scale(0.995)' : ''}`,
+                transformOrigin: 'top center',
+                width: '8.5in',
+                minHeight: '11in',
+                paddingTop: `${resume.styling.margin_top}in`,
+                paddingBottom: `${resume.styling.margin_bottom}in`,
+                paddingLeft: `${resume.styling.margin_left}in`,
+                paddingRight: `${resume.styling.margin_right}in`,
+              }}
+            >
+              <div ref={contentRef}>
+                {/* Use TemplateRenderer to render resume with selected template */}
+                <TemplateRenderer resume={resume} />
+              </div>
+            </div>
+            
+            {/* Page Break Indicators */}
+            {pageBreaks.map((breakPosition, index) => (
+              <div
+                key={index}
+                className="absolute left-0 right-0 pointer-events-none"
+                style={{
+                  top: `${breakPosition}px`,
+                  transform: `scale(${zoom / 100})`,
+                  transformOrigin: 'top center',
+                }}
+              >
+                <div className="relative">
+                  <div className="h-px bg-red-500 opacity-50" />
+                  <div className="absolute right-2 -top-3 bg-red-500 text-white text-xs px-2 py-0.5 rounded">
+                    Page {index + 1} / {index + 2}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <Card className="w-full max-w-md">
+            <CardContent className="pt-6">
+              <p className="text-center text-muted-foreground">
+                No resume selected. Create or select a resume to see the preview.
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/resume/ResumeToolbar.tsx b/components/resume/ResumeToolbar.tsx
new file mode 100644
index 000000000..cd16916cd
--- /dev/null
+++ b/components/resume/ResumeToolbar.tsx
@@ -0,0 +1,293 @@
+'use client';
+
+import { useState, lazy, Suspense } from 'react';
+import { useResume } from '@/contexts/ResumeContext';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Save,
+  Settings,
+  Check,
+  Loader2,
+  AlertCircle,
+  Upload,
+  ChevronDown,
+  Copy,
+  MoreVertical,
+  Download,
+  Palette,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { TemplateSelector } from './TemplateSelector';
+import { ExportMenu } from './ExportMenu';
+import { SaveAsDialog } from './SaveAsDialog';
+
+// Lazy load large components for better performance
+const StyleCustomizer = lazy(() => import('./StyleCustomizer').then(m => ({ default: m.StyleCustomizer })));
+const ImportDialog = lazy(() => import('./ImportDialog').then(m => ({ default: m.ImportDialog })));
+
+export function ResumeToolbar() {
+  const {
+    resume,
+    saveResume,
+    saving,
+    saveStatus,
+  } = useResume();
+
+  const isMobile = useIsMobile();
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [saveAsDialogOpen, setSaveAsDialogOpen] = useState(false);
+  const [styleSheetOpen, setStyleSheetOpen] = useState(false);
+
+  // Handle manual save
+  const handleSave = async () => {
+    try {
+      await saveResume();
+      toast.success('Resume saved', {
+        description: 'Your changes have been saved successfully.',
+      });
+    } catch {
+      toast.error('Save failed', {
+        description: 'Failed to save your resume. Please try again.',
+      });
+    }
+  };
+
+  // Get save button icon and text
+  const getSaveButtonContent = () => {
+    switch (saveStatus) {
+      case 'saving':
+        return {
+          icon: <Loader2 className="h-4 w-4 animate-spin" />,
+          text: 'Saving...',
+        };
+      case 'saved':
+        return {
+          icon: <Check className="h-4 w-4" />,
+          text: 'Saved',
+        };
+      case 'error':
+        return {
+          icon: <AlertCircle className="h-4 w-4" />,
+          text: 'Error',
+        };
+      default:
+        return {
+          icon: <Save className="h-4 w-4" />,
+          text: 'Save',
+        };
+    }
+  };
+
+  const saveButtonContent = getSaveButtonContent();
+
+  return (
+    <div 
+      className="border-b bg-background px-4 py-2 sm:py-3"
+      role="toolbar"
+      aria-label="Resume builder toolbar"
+    >
+      <div className="flex items-center justify-between gap-2 sm:gap-4">
+        {/* Left side - Resume title */}
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <h1 className="text-base sm:text-lg font-semibold truncate">
+            {resume?.title || 'Untitled Resume'}
+          </h1>
+        </div>
+
+        {/* Right side - Actions */}
+        {isMobile ? (
+          // Mobile: Compact menu with all actions
+          <div className="flex items-center gap-1">
+            {/* Quick Save Button */}
+            <Button
+              variant={saveStatus === 'error' ? 'destructive' : 'default'}
+              size="sm"
+              onClick={handleSave}
+              disabled={!resume || saving || saveStatus === 'saving'}
+              className="px-2"
+              aria-label={`Save resume. Status: ${saveButtonContent.text}. Keyboard shortcut: Ctrl+S`}
+            >
+              {saveButtonContent.icon}
+            </Button>
+
+            {/* More Actions Menu */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  className="px-2"
+                  aria-label="More actions"
+                >
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuItem onClick={handleSave} disabled={!resume}>
+                  <Save className="h-4 w-4 mr-2" />
+                  Save
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setSaveAsDialogOpen(true)} disabled={!resume}>
+                  <Copy className="h-4 w-4 mr-2" />
+                  Save As...
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => setImportDialogOpen(true)}>
+                  <Upload className="h-4 w-4 mr-2" />
+                  Import
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <div className="w-full">
+                    <Download className="h-4 w-4 mr-2" />
+                    <ExportMenu compact />
+                  </div>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                  <div className="w-full">
+                    <Palette className="h-4 w-4 mr-2" />
+                    <TemplateSelector compact />
+                  </div>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setStyleSheetOpen(true)} disabled={!resume}>
+                  <Settings className="h-4 w-4 mr-2" />
+                  Customize Style
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        ) : (
+          // Desktop: Full toolbar
+          <div className="flex items-center gap-2">
+            {/* Import Button */}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setImportDialogOpen(true)}
+            >
+              <Upload className="h-4 w-4" />
+              <span className="hidden sm:inline">Import</span>
+            </Button>
+
+            {/* Template Selector */}
+            <TemplateSelector />
+
+            {/* Export Menu */}
+            <ExportMenu />
+
+            {/* Settings Menu */}
+            <Sheet open={styleSheetOpen} onOpenChange={setStyleSheetOpen}>
+              <SheetTrigger asChild>
+                <Button variant="outline" size="sm" disabled={!resume}>
+                  <Settings className="h-4 w-4" />
+                  <span className="hidden sm:inline">Customize</span>
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="right" className="w-full sm:max-w-md overflow-y-auto">
+                <SheetHeader>
+                  <SheetTitle>Customize Style</SheetTitle>
+                  <SheetDescription>
+                    Adjust fonts, colors, and spacing to personalize your resume
+                  </SheetDescription>
+                </SheetHeader>
+                <div className="mt-6">
+                  <Suspense fallback={
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                    </div>
+                  }>
+                    <StyleCustomizer />
+                  </Suspense>
+                </div>
+              </SheetContent>
+            </Sheet>
+
+            {/* Save Button with Dropdown */}
+            <DropdownMenu>
+              <div className="flex items-center">
+                <Button
+                  variant={saveStatus === 'error' ? 'destructive' : 'default'}
+                  size="sm"
+                  onClick={handleSave}
+                  disabled={!resume || saving || saveStatus === 'saving'}
+                  className="rounded-r-none"
+                >
+                  {saveButtonContent.icon}
+                  <span className="hidden sm:inline">{saveButtonContent.text}</span>
+                </Button>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant={saveStatus === 'error' ? 'destructive' : 'default'}
+                    size="sm"
+                    disabled={!resume || saving || saveStatus === 'saving'}
+                    className="rounded-l-none border-l px-2"
+                  >
+                    <ChevronDown className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </div>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={handleSave} disabled={!resume}>
+                  <Save className="h-4 w-4 mr-2" />
+                  Save
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => setSaveAsDialogOpen(true)} disabled={!resume}>
+                  <Copy className="h-4 w-4 mr-2" />
+                  Save As...
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )}
+      </div>
+
+      {/* Import Dialog */}
+      <Suspense fallback={null}>
+        <ImportDialog open={importDialogOpen} onOpenChange={setImportDialogOpen} />
+      </Suspense>
+      
+      {/* Save As Dialog */}
+      <SaveAsDialog open={saveAsDialogOpen} onOpenChange={setSaveAsDialogOpen} />
+
+      {/* Style Customizer Sheet for Mobile */}
+      {isMobile && (
+        <Sheet open={styleSheetOpen} onOpenChange={setStyleSheetOpen}>
+          <SheetContent side="bottom" className="h-[90vh] overflow-y-auto">
+            <SheetHeader>
+              <SheetTitle>Customize Style</SheetTitle>
+              <SheetDescription>
+                Adjust fonts, colors, and spacing to personalize your resume
+              </SheetDescription>
+            </SheetHeader>
+            <div className="mt-6">
+              <Suspense fallback={
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                </div>
+              }>
+                <StyleCustomizer />
+              </Suspense>
+            </div>
+          </SheetContent>
+        </Sheet>
+      )}
+    </div>
+  );
+}
diff --git a/components/resume/SaveAsDialog.tsx b/components/resume/SaveAsDialog.tsx
new file mode 100644
index 000000000..6e96eded2
--- /dev/null
+++ b/components/resume/SaveAsDialog.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import { useState } from 'react';
+import { useResume } from '@/contexts/ResumeContext';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { toast } from 'sonner';
+
+interface SaveAsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function SaveAsDialog({ open, onOpenChange }: SaveAsDialogProps) {
+  const { resume, duplicateResume, loadResume } = useResume();
+  const [newTitle, setNewTitle] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Reset state when dialog opens
+  const handleOpenChange = (newOpen: boolean) => {
+    if (newOpen && resume) {
+      setNewTitle(`${resume.title} (Copy)`);
+    } else {
+      setNewTitle('');
+    }
+    onOpenChange(newOpen);
+  };
+
+  // Handle save as
+  const handleSaveAs = async () => {
+    if (!resume) return;
+    
+    const trimmedTitle = newTitle.trim();
+    if (!trimmedTitle) {
+      toast.error('Invalid title', {
+        description: 'Please enter a valid resume title.',
+      });
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const duplicated = await duplicateResume(resume.id, trimmedTitle);
+      
+      // Load the new resume
+      await loadResume(duplicated.id);
+      
+      toast.success('Resume saved successfully! ✓', {
+        description: `Created "${duplicated.title}"`,
+        duration: 4000,
+      });
+      
+      onOpenChange(false);
+    } catch (error) {
+      toast.error('Failed to save as', {
+        description: 'Please try again.',
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Handle Enter key
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !isSaving) {
+      e.preventDefault();
+      handleSaveAs();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Save Resume As</DialogTitle>
+          <DialogDescription>
+            Create a copy of your resume with a new name. The current resume will remain unchanged.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="resume-title">Resume Title</Label>
+            <Input
+              id="resume-title"
+              placeholder="Enter resume title"
+              value={newTitle}
+              onChange={(e) => setNewTitle(e.target.value)}
+              onKeyDown={handleKeyDown}
+              disabled={isSaving}
+              autoFocus
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isSaving}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSaveAs}
+            disabled={isSaving || !newTitle.trim()}
+          >
+            {isSaving ? 'Saving...' : 'Save As'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/resume/SaveErrorBanner.tsx b/components/resume/SaveErrorBanner.tsx
new file mode 100644
index 000000000..ab355c37f
--- /dev/null
+++ b/components/resume/SaveErrorBanner.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, RefreshCw, X, WifiOff } from 'lucide-react';
+import { useResume } from '@/contexts/ResumeContext';
+
+interface SaveErrorBannerProps {
+  onRetry?: () => void;
+  onDismiss?: () => void;
+}
+
+export function SaveErrorBanner({ onRetry, onDismiss }: SaveErrorBannerProps) {
+  const { error, saveStatus, saveResume, clearError } = useResume();
+  const [isOnline, setIsOnline] = useState(true);
+
+  useEffect(() => {
+    const handleOnline = () => setIsOnline(true);
+    const handleOffline = () => setIsOnline(false);
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    // Check initial status
+    setIsOnline(navigator.onLine);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  const handleRetry = async () => {
+    if (onRetry) {
+      onRetry();
+    } else {
+      try {
+        await saveResume();
+      } catch (err) {
+        // Error is handled by context
+      }
+    }
+  };
+
+  const handleDismiss = () => {
+    if (onDismiss) {
+      onDismiss();
+    } else {
+      clearError();
+    }
+  };
+
+  // Don't show banner if no error or if save was successful
+  if (!error || saveStatus === 'saved' || saveStatus === 'idle') {
+    return null;
+  }
+
+  return (
+    <Alert variant="destructive" className="mb-4">
+      <div className="flex items-start gap-3">
+        {isOnline ? (
+          <AlertTriangle className="h-5 w-5 mt-0.5" />
+        ) : (
+          <WifiOff className="h-5 w-5 mt-0.5" />
+        )}
+        <div className="flex-1 space-y-2">
+          <AlertTitle className="font-semibold">
+            {isOnline ? 'Failed to save resume' : 'You are offline'}
+          </AlertTitle>
+          <AlertDescription className="text-sm">
+            {isOnline
+              ? error || 'Your changes could not be saved. Please try again.'
+              : 'Your changes are being saved locally and will sync when you reconnect.'}
+          </AlertDescription>
+          <div className="flex gap-2 mt-3">
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleRetry}
+              className="gap-2"
+              disabled={!isOnline}
+            >
+              <RefreshCw className="h-3.5 w-3.5" />
+              Retry
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={handleDismiss}
+              className="gap-2"
+            >
+              <X className="h-3.5 w-3.5" />
+              Dismiss
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Alert>
+  );
+}
diff --git a/components/resume/SortableSection.tsx b/components/resume/SortableSection.tsx
new file mode 100644
index 000000000..458829c87
--- /dev/null
+++ b/components/resume/SortableSection.tsx
@@ -0,0 +1,233 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ResumeSection } from '@/types/resume';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { GripVertical, Eye, EyeOff, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
+import { useResume } from '@/contexts/ResumeContext';
+import { useIsMobile } from '@/hooks/use-mobile';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { PersonalInfoSection } from './sections/PersonalInfoSection';
+import { EducationSection } from './sections/EducationSection';
+import { ExperienceSection } from './sections/ExperienceSection';
+import { ProjectsSection } from './sections/ProjectsSection';
+import { SkillsSection } from './sections/SkillsSection';
+import { CertificationsSection } from './sections/CertificationsSection';
+import { AwardsSection } from './sections/AwardsSection';
+import { CustomSection } from './sections/CustomSection';
+import { PersonalInfo, Education, Experience, Project, Skill, Certification, Award, CustomContent } from '@/types/resume';
+
+interface SortableSectionProps {
+  section: ResumeSection;
+  index: number;
+  onKeyDown?: (event: React.KeyboardEvent, index: number) => void;
+  autoFocus?: boolean;
+}
+
+export function SortableSection({ section, index, onKeyDown, autoFocus }: SortableSectionProps) {
+  const { removeSection, toggleSectionVisibility, updateSection, lastAddedSectionId } = useResume();
+  const isMobile = useIsMobile();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const isNewlyAdded = lastAddedSectionId === section.id;
+  
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: section.id });
+
+  // Auto-focus when requested
+  useEffect(() => {
+    if (autoFocus && sectionRef.current) {
+      sectionRef.current.focus();
+    }
+  }, [autoFocus]);
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div 
+      ref={(node) => {
+        setNodeRef(node);
+        if (node) {
+          (sectionRef as React.MutableRefObject<HTMLDivElement>).current = node;
+        }
+      }}
+      style={style}
+      role="listitem"
+      tabIndex={0}
+      onKeyDown={(e) => onKeyDown?.(e, index)}
+      aria-label={`${section.title} section, position ${index + 1}`}
+      className={isNewlyAdded ? 'animate-fade-in' : ''}
+    >
+      <Card className={`${!section.visible ? 'opacity-60' : ''} transition-smooth`}>
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 flex-1">
+              {/* Drag Handle */}
+              <button
+                className="cursor-grab active:cursor-grabbing touch-none p-1 hover:bg-muted rounded"
+                {...attributes}
+                {...listeners}
+                aria-label={`Drag to reorder ${section.title} section. Use Alt+Arrow Up or Alt+Arrow Down to reorder with keyboard.`}
+                tabIndex={-1}
+              >
+                <GripVertical className="h-5 w-5 text-muted-foreground" />
+              </button>
+
+              {/* Section Title - Clickable on mobile to collapse/expand */}
+              {isMobile ? (
+                <button
+                  onClick={() => setIsCollapsed(!isCollapsed)}
+                  className="flex items-center gap-2 flex-1 text-left"
+                >
+                  <CardTitle className="text-lg">{section.title}</CardTitle>
+                  {isCollapsed ? (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </button>
+              ) : (
+                <CardTitle className="text-lg">{section.title}</CardTitle>
+              )}
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex items-center gap-1">
+              {/* Toggle Visibility */}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => toggleSectionVisibility(section.id)}
+                aria-label={section.visible ? 'Hide section' : 'Show section'}
+              >
+                {section.visible ? (
+                  <Eye className="h-4 w-4" />
+                ) : (
+                  <EyeOff className="h-4 w-4" />
+                )}
+              </Button>
+
+              {/* Delete Section */}
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    aria-label="Delete section"
+                  >
+                    <Trash2 className="h-4 w-4 text-destructive" />
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Delete Section</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      Are you sure you want to delete the &quot;{section.title}&quot; section?
+                      This action cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={() => removeSection(section.id)}
+                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    >
+                      Delete
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          </div>
+        </CardHeader>
+
+        {/* Collapsible Content on Mobile */}
+        {(!isMobile || !isCollapsed) && (
+          <CardContent>
+          {/* Render section-specific editor */}
+          {section.type === 'personal_info' && (
+            <PersonalInfoSection
+              content={section.content as PersonalInfo}
+              onChange={(content) => updateSection(section.id, content)}
+              autoFocus={isNewlyAdded}
+            />
+          )}
+          
+          {section.type === 'education' && (
+            <EducationSection
+              content={section.content as Education[]}
+              onChange={(content) => updateSection(section.id, content)}
+            />
+          )}
+          
+          {section.type === 'experience' && (
+            <ExperienceSection
+              content={section.content as Experience[]}
+              onChange={(content) => updateSection(section.id, content)}
+            />
+          )}
+          
+          {section.type === 'projects' && (
+            <ProjectsSection
+              content={section.content as Project[]}
+              onChange={(content) => updateSection(section.id, content)}
+            />
+          )}
+          
+          {section.type === 'skills' && (
+            <SkillsSection
+              content={section.content as Skill[]}
+              onChange={(content) => updateSection(section.id, content)}
+            />
+          )}
+          
+          {section.type === 'certifications' && (
+            <CertificationsSection
+              content={section.content as Certification[]}
+              onChange={(content) => updateSection(section.id, content)}
+            />
+          )}
+          
+          {section.type === 'awards' && (
+            <AwardsSection
+              content={section.content as Award[]}
+              onChange={(content) => updateSection(section.id, content)}
+            />
+          )}
+          
+          {section.type === 'custom' && (
+            <CustomSection
+              content={section.content as CustomContent}
+              onChange={(content) => updateSection(section.id, content)}
+              sectionTitle={section.title}
+            />
+          )}
+          </CardContent>
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/components/resume/StyleCustomizer.tsx b/components/resume/StyleCustomizer.tsx
new file mode 100644
index 000000000..8d2309969
--- /dev/null
+++ b/components/resume/StyleCustomizer.tsx
@@ -0,0 +1,444 @@
+'use client';
+
+import { useResume } from '@/contexts/ResumeContext';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { Type, Palette, Ruler } from 'lucide-react';
+
+// Professional font families
+const FONT_FAMILIES = [
+  { value: 'Inter', label: 'Inter', category: 'Sans-serif' },
+  { value: 'Roboto', label: 'Roboto', category: 'Sans-serif' },
+  { value: 'Open Sans', label: 'Open Sans', category: 'Sans-serif' },
+  { value: 'Lato', label: 'Lato', category: 'Sans-serif' },
+  { value: 'Montserrat', label: 'Montserrat', category: 'Sans-serif' },
+  { value: 'Poppins', label: 'Poppins', category: 'Sans-serif' },
+  { value: 'Source Sans Pro', label: 'Source Sans Pro', category: 'Sans-serif' },
+  { value: 'Georgia', label: 'Georgia', category: 'Serif' },
+  { value: 'Merriweather', label: 'Merriweather', category: 'Serif' },
+  { value: 'Playfair Display', label: 'Playfair Display', category: 'Serif' },
+  { value: 'Crimson Text', label: 'Crimson Text', category: 'Serif' },
+  { value: 'Courier New', label: 'Courier New', category: 'Monospace' },
+];
+
+// Color preset schemes
+const COLOR_PRESETS = [
+  {
+    name: 'Purple Professional',
+    colors: {
+      color_primary: '#8b5cf6',
+      color_text: '#1f2937',
+      color_accent: '#6366f1',
+    },
+  },
+  {
+    name: 'Blue Corporate',
+    colors: {
+      color_primary: '#3b82f6',
+      color_text: '#1e293b',
+      color_accent: '#0ea5e9',
+    },
+  },
+  {
+    name: 'Green Modern',
+    colors: {
+      color_primary: '#10b981',
+      color_text: '#1f2937',
+      color_accent: '#14b8a6',
+    },
+  },
+  {
+    name: 'Red Bold',
+    colors: {
+      color_primary: '#ef4444',
+      color_text: '#1f2937',
+      color_accent: '#f97316',
+    },
+  },
+  {
+    name: 'Gray Minimal',
+    colors: {
+      color_primary: '#6b7280',
+      color_text: '#111827',
+      color_accent: '#4b5563',
+    },
+  },
+  {
+    name: 'Teal Creative',
+    colors: {
+      color_primary: '#14b8a6',
+      color_text: '#1f2937',
+      color_accent: '#06b6d4',
+    },
+  },
+];
+
+export function StyleCustomizer() {
+  const { resume, updateStyling } = useResume();
+
+  if (!resume) {
+    return (
+      <div className="p-6 text-center text-muted-foreground">
+        <p>No resume selected</p>
+      </div>
+    );
+  }
+
+  const { styling } = resume;
+
+  return (
+    <div className="h-full overflow-y-auto p-6 space-y-6">
+      {/* Typography Section */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Type className="h-5 w-5 text-primary" />
+            <CardTitle>Typography</CardTitle>
+          </div>
+          <CardDescription>Customize fonts and text sizes</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Font Family */}
+          <div className="space-y-2">
+            <Label htmlFor="font-family">Font Family</Label>
+            <Select
+              value={styling.font_family}
+              onValueChange={(value) => updateStyling({ font_family: value })}
+            >
+              <SelectTrigger id="font-family">
+                <SelectValue placeholder="Select font" />
+              </SelectTrigger>
+              <SelectContent>
+                {/* Sans-serif fonts */}
+                <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                  Sans-serif
+                </div>
+                {FONT_FAMILIES.filter((f) => f.category === 'Sans-serif').map((font) => (
+                  <SelectItem key={font.value} value={font.value}>
+                    <span style={{ fontFamily: font.value }}>{font.label}</span>
+                  </SelectItem>
+                ))}
+
+                {/* Serif fonts */}
+                <Separator className="my-2" />
+                <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                  Serif
+                </div>
+                {FONT_FAMILIES.filter((f) => f.category === 'Serif').map((font) => (
+                  <SelectItem key={font.value} value={font.value}>
+                    <span style={{ fontFamily: font.value }}>{font.label}</span>
+                  </SelectItem>
+                ))}
+
+                {/* Monospace fonts */}
+                <Separator className="my-2" />
+                <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                  Monospace
+                </div>
+                {FONT_FAMILIES.filter((f) => f.category === 'Monospace').map((font) => (
+                  <SelectItem key={font.value} value={font.value}>
+                    <span style={{ fontFamily: font.value }}>{font.label}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Heading Font Size */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="heading-size">Heading Size</Label>
+              <span className="text-sm text-muted-foreground">{styling.font_size_heading}pt</span>
+            </div>
+            <Slider
+              id="heading-size"
+              min={12}
+              max={24}
+              step={1}
+              value={[styling.font_size_heading]}
+              onValueChange={([value]) => updateStyling({ font_size_heading: value })}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>12pt</span>
+              <span>24pt</span>
+            </div>
+          </div>
+
+          {/* Body Font Size */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="body-size">Body Text Size</Label>
+              <span className="text-sm text-muted-foreground">{styling.font_size_body}pt</span>
+            </div>
+            <Slider
+              id="body-size"
+              min={8}
+              max={14}
+              step={0.5}
+              value={[styling.font_size_body]}
+              onValueChange={([value]) => updateStyling({ font_size_body: value })}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>8pt</span>
+              <span>14pt</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Color Section */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Palette className="h-5 w-5 text-primary" />
+            <CardTitle>Colors</CardTitle>
+          </div>
+          <CardDescription>Customize color scheme</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Color Presets */}
+          <div className="space-y-2">
+            <Label>Color Presets</Label>
+            <div className="grid grid-cols-2 gap-2">
+              {COLOR_PRESETS.map((preset) => (
+                <button
+                  key={preset.name}
+                  onClick={() => updateStyling(preset.colors)}
+                  className="flex items-center gap-2 p-3 rounded-lg border hover:border-primary transition-colors text-left"
+                >
+                  <div className="flex gap-1">
+                    <div
+                      className="w-4 h-4 rounded"
+                      style={{ backgroundColor: preset.colors.color_primary }}
+                    />
+                    <div
+                      className="w-4 h-4 rounded"
+                      style={{ backgroundColor: preset.colors.color_accent }}
+                    />
+                  </div>
+                  <span className="text-sm font-medium">{preset.name}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Primary Color */}
+          <div className="space-y-2">
+            <Label htmlFor="primary-color">Primary Color</Label>
+            <div className="flex items-center gap-2">
+              <input
+                id="primary-color"
+                type="color"
+                value={styling.color_primary}
+                onChange={(e) => updateStyling({ color_primary: e.target.value })}
+                className="h-10 w-20 rounded border cursor-pointer"
+              />
+              <input
+                type="text"
+                value={styling.color_primary}
+                onChange={(e) => updateStyling({ color_primary: e.target.value })}
+                className="flex-1 h-10 px-3 rounded-md border bg-background text-sm"
+                placeholder="#8b5cf6"
+              />
+            </div>
+          </div>
+
+          {/* Text Color */}
+          <div className="space-y-2">
+            <Label htmlFor="text-color">Text Color</Label>
+            <div className="flex items-center gap-2">
+              <input
+                id="text-color"
+                type="color"
+                value={styling.color_text}
+                onChange={(e) => updateStyling({ color_text: e.target.value })}
+                className="h-10 w-20 rounded border cursor-pointer"
+              />
+              <input
+                type="text"
+                value={styling.color_text}
+                onChange={(e) => updateStyling({ color_text: e.target.value })}
+                className="flex-1 h-10 px-3 rounded-md border bg-background text-sm"
+                placeholder="#1f2937"
+              />
+            </div>
+          </div>
+
+          {/* Accent Color */}
+          <div className="space-y-2">
+            <Label htmlFor="accent-color">Accent Color</Label>
+            <div className="flex items-center gap-2">
+              <input
+                id="accent-color"
+                type="color"
+                value={styling.color_accent}
+                onChange={(e) => updateStyling({ color_accent: e.target.value })}
+                className="h-10 w-20 rounded border cursor-pointer"
+              />
+              <input
+                type="text"
+                value={styling.color_accent}
+                onChange={(e) => updateStyling({ color_accent: e.target.value })}
+                className="flex-1 h-10 px-3 rounded-md border bg-background text-sm"
+                placeholder="#6366f1"
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Spacing Section */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Ruler className="h-5 w-5 text-primary" />
+            <CardTitle>Spacing & Margins</CardTitle>
+          </div>
+          <CardDescription>Adjust layout spacing</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Top Margin */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="margin-top">Top Margin</Label>
+              <span className="text-sm text-muted-foreground">{styling.margin_top}"</span>
+            </div>
+            <Slider
+              id="margin-top"
+              min={0.5}
+              max={1.5}
+              step={0.25}
+              value={[styling.margin_top]}
+              onValueChange={([value]) => updateStyling({ margin_top: value })}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>0.5"</span>
+              <span>1.5"</span>
+            </div>
+          </div>
+
+          {/* Bottom Margin */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="margin-bottom">Bottom Margin</Label>
+              <span className="text-sm text-muted-foreground">{styling.margin_bottom}"</span>
+            </div>
+            <Slider
+              id="margin-bottom"
+              min={0.5}
+              max={1.5}
+              step={0.25}
+              value={[styling.margin_bottom]}
+              onValueChange={([value]) => updateStyling({ margin_bottom: value })}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>0.5"</span>
+              <span>1.5"</span>
+            </div>
+          </div>
+
+          {/* Left Margin */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="margin-left">Left Margin</Label>
+              <span className="text-sm text-muted-foreground">{styling.margin_left}"</span>
+            </div>
+            <Slider
+              id="margin-left"
+              min={0.5}
+              max={1.5}
+              step={0.25}
+              value={[styling.margin_left]}
+              onValueChange={([value]) => updateStyling({ margin_left: value })}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>0.5"</span>
+              <span>1.5"</span>
+            </div>
+          </div>
+
+          {/* Right Margin */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="margin-right">Right Margin</Label>
+              <span className="text-sm text-muted-foreground">{styling.margin_right}"</span>
+            </div>
+            <Slider
+              id="margin-right"
+              min={0.5}
+              max={1.5}
+              step={0.25}
+              value={[styling.margin_right]}
+              onValueChange={([value]) => updateStyling({ margin_right: value })}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>0.5"</span>
+              <span>1.5"</span>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Line Height */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="line-height">Line Height</Label>
+              <span className="text-sm text-muted-foreground">{styling.line_height}</span>
+            </div>
+            <Slider
+              id="line-height"
+              min={1}
+              max={2}
+              step={0.1}
+              value={[styling.line_height]}
+              onValueChange={([value]) => updateStyling({ line_height: value })}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>1.0</span>
+              <span>2.0</span>
+            </div>
+          </div>
+
+          {/* Section Spacing */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="section-spacing">Section Spacing</Label>
+              <span className="text-sm text-muted-foreground">{styling.section_spacing}rem</span>
+            </div>
+            <Slider
+              id="section-spacing"
+              min={0.5}
+              max={3}
+              step={0.25}
+              value={[styling.section_spacing]}
+              onValueChange={([value]) => updateStyling({ section_spacing: value })}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>0.5rem</span>
+              <span>3rem</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/components/resume/SuggestionPanel.tsx b/components/resume/SuggestionPanel.tsx
new file mode 100644
index 000000000..d815e1405
--- /dev/null
+++ b/components/resume/SuggestionPanel.tsx
@@ -0,0 +1,313 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useResume } from '@/contexts/ResumeContext';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import {
+  AlertCircle,
+  AlertTriangle,
+  Info,
+  CheckCircle2,
+  ChevronDown,
+  ChevronUp,
+  TrendingUp,
+} from 'lucide-react';
+import { ResumeSuggestion } from '@/lib/services/resume-scoring';
+import { cn } from '@/lib/utils';
+import { ConfettiEffect } from './ConfettiEffect';
+
+interface SuggestionPanelProps {
+  className?: string;
+}
+
+export function SuggestionPanel({ className }: SuggestionPanelProps) {
+  const { getDetailedScore } = useResume();
+  const [expanded, setExpanded] = useState(true);
+  const [showBreakdown, setShowBreakdown] = useState(false);
+  const [showConfetti, setShowConfetti] = useState(false);
+  const [previousScore, setPreviousScore] = useState(0);
+
+  const scoringResult = getDetailedScore();
+  const { totalScore, breakdown, suggestions, completedCategories, totalCategories } = scoringResult;
+
+  // Trigger confetti when score reaches 100 or crosses 90 threshold
+  useEffect(() => {
+    if (totalScore === 100 && previousScore < 100) {
+      setShowConfetti(true);
+    } else if (totalScore >= 90 && previousScore < 90) {
+      setShowConfetti(true);
+    }
+    setPreviousScore(totalScore);
+  }, [totalScore, previousScore]);
+
+  // Determine score color and status
+  const getScoreColor = (score: number) => {
+    if (score >= 80) return 'text-green-600 dark:text-green-400';
+    if (score >= 60) return 'text-yellow-600 dark:text-yellow-400';
+    if (score >= 40) return 'text-orange-600 dark:text-orange-400';
+    return 'text-red-600 dark:text-red-400';
+  };
+
+  const getScoreStatus = (score: number) => {
+    if (score >= 80) return 'Excellent';
+    if (score >= 60) return 'Good';
+    if (score >= 40) return 'Fair';
+    return 'Needs Work';
+  };
+
+  const getSeverityIcon = (severity: ResumeSuggestion['severity']) => {
+    switch (severity) {
+      case 'critical':
+        return <AlertCircle className="h-4 w-4 text-red-500" />;
+      case 'warning':
+        return <AlertTriangle className="h-4 w-4 text-yellow-500" />;
+      case 'info':
+        return <Info className="h-4 w-4 text-blue-500" />;
+    }
+  };
+
+  const getSeverityBadgeVariant = (severity: ResumeSuggestion['severity']) => {
+    switch (severity) {
+      case 'critical':
+        return 'destructive';
+      case 'warning':
+        return 'default';
+      case 'info':
+        return 'secondary';
+    }
+  };
+
+  // Group suggestions by severity
+  const criticalSuggestions = suggestions.filter((s) => s.severity === 'critical');
+  const warningSuggestions = suggestions.filter((s) => s.severity === 'warning');
+  const infoSuggestions = suggestions.filter((s) => s.severity === 'info');
+
+  return (
+    <>
+      {/* Confetti Effect */}
+      <ConfettiEffect 
+        trigger={showConfetti} 
+        onComplete={() => setShowConfetti(false)} 
+      />
+      
+      <Card className={cn('w-full', className)}>
+        <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <TrendingUp className="h-5 w-5 text-purple-600" />
+            <CardTitle className="text-lg">Resume Score</CardTitle>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setExpanded(!expanded)}
+            className="h-8 w-8 p-0"
+          >
+            {expanded ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+        <CardDescription>
+          Track your resume completeness and get improvement suggestions
+        </CardDescription>
+      </CardHeader>
+
+      {expanded && (
+        <CardContent className="space-y-4">
+          {/* Score Display */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span className={cn('text-4xl font-bold', getScoreColor(totalScore))}>
+                  {totalScore}
+                </span>
+                <span className="text-2xl text-muted-foreground">/100</span>
+              </div>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setShowBreakdown(!showBreakdown)}
+                    >
+                      <Info className="h-4 w-4 mr-1" />
+                      Details
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="left" className="max-w-xs">
+                    <p className="text-sm">
+                      Click to see how your score is calculated across different sections
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Progress value={totalScore} className="flex-1" />
+              <Badge variant={totalScore >= 80 ? 'default' : 'secondary'}>
+                {getScoreStatus(totalScore)}
+              </Badge>
+            </div>
+
+            <p className="text-sm text-muted-foreground">
+              {completedCategories} of {totalCategories} sections completed
+            </p>
+          </div>
+
+          {/* Score Breakdown */}
+          {showBreakdown && (
+            <div className="space-y-2 pt-2 border-t">
+              <h4 className="text-sm font-semibold">Score Breakdown</h4>
+              <div className="space-y-2">
+                {breakdown.map((item) => (
+                  <TooltipProvider key={item.category}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div className="space-y-1">
+                          <div className="flex items-center justify-between text-sm">
+                            <span className="text-muted-foreground">{item.category}</span>
+                            <span className="font-medium">
+                              {Math.round(item.score)}/{item.maxScore}
+                            </span>
+                          </div>
+                          <Progress value={item.percentage} className="h-1.5" />
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent side="left" className="max-w-xs">
+                        <div className="space-y-1">
+                          <p className="font-semibold">{item.category}</p>
+                          <p className="text-xs">{item.percentage}% complete</p>
+                          {item.issues.length > 0 && (
+                            <div className="mt-2 space-y-1">
+                              <p className="text-xs font-semibold">Issues:</p>
+                              <ul className="text-xs list-disc list-inside space-y-0.5">
+                                {item.issues.map((issue, idx) => (
+                                  <li key={idx}>{issue}</li>
+                                ))}
+                              </ul>
+                            </div>
+                          )}
+                        </div>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Suggestions */}
+          {suggestions.length > 0 && (
+            <div className="space-y-3 pt-2 border-t">
+              <div className="flex items-center justify-between">
+                <h4 className="text-sm font-semibold">Improvement Suggestions</h4>
+                <Badge variant="outline" className="text-xs">
+                  {suggestions.length} {suggestions.length === 1 ? 'suggestion' : 'suggestions'}
+                </Badge>
+              </div>
+
+              <div className="space-y-2 max-h-[400px] overflow-y-auto pr-2">
+                {/* Critical Suggestions */}
+                {criticalSuggestions.length > 0 && (
+                  <div className="space-y-2">
+                    {criticalSuggestions.map((suggestion) => (
+                      <SuggestionItem key={suggestion.id} suggestion={suggestion} />
+                    ))}
+                  </div>
+                )}
+
+                {/* Warning Suggestions */}
+                {warningSuggestions.length > 0 && (
+                  <div className="space-y-2">
+                    {warningSuggestions.map((suggestion) => (
+                      <SuggestionItem key={suggestion.id} suggestion={suggestion} />
+                    ))}
+                  </div>
+                )}
+
+                {/* Info Suggestions */}
+                {infoSuggestions.length > 0 && (
+                  <div className="space-y-2">
+                    {infoSuggestions.map((suggestion) => (
+                      <SuggestionItem key={suggestion.id} suggestion={suggestion} />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* No Suggestions - Perfect Score */}
+          {suggestions.length === 0 && totalScore === 100 && (
+            <div className="flex items-center gap-2 p-3 bg-green-50 dark:bg-green-950/20 rounded-lg border border-green-200 dark:border-green-800 animate-fade-in">
+              <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400 animate-scale-in" />
+              <div className="flex-1">
+                <p className="text-sm font-medium text-green-900 dark:text-green-100">
+                  🎉 Perfect Resume!
+                </p>
+                <p className="text-xs text-green-700 dark:text-green-300">
+                  Your resume is complete and follows best practices
+                </p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      )}
+      </Card>
+    </>
+  );
+}
+
+interface SuggestionItemProps {
+  suggestion: ResumeSuggestion;
+}
+
+function SuggestionItem({ suggestion }: SuggestionItemProps) {
+  const getSeverityIcon = (severity: ResumeSuggestion['severity']) => {
+    switch (severity) {
+      case 'critical':
+        return <AlertCircle className="h-4 w-4 text-red-500 flex-shrink-0" />;
+      case 'warning':
+        return <AlertTriangle className="h-4 w-4 text-yellow-500 flex-shrink-0" />;
+      case 'info':
+        return <Info className="h-4 w-4 text-blue-500 flex-shrink-0" />;
+    }
+  };
+
+  const getBorderColor = (severity: ResumeSuggestion['severity']) => {
+    switch (severity) {
+      case 'critical':
+        return 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950/20';
+      case 'warning':
+        return 'border-yellow-200 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-950/20';
+      case 'info':
+        return 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-950/20';
+    }
+  };
+
+  return (
+    <div className={cn('flex items-start gap-2 p-2.5 rounded-lg border', getBorderColor(suggestion.severity))}>
+      {getSeverityIcon(suggestion.severity)}
+      <div className="flex-1 min-w-0">
+        <p className="text-xs font-medium text-foreground">{suggestion.message}</p>
+        {suggestion.category && (
+          <p className="text-xs text-muted-foreground mt-0.5">{suggestion.category}</p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/resume/TemplateSelector.tsx b/components/resume/TemplateSelector.tsx
new file mode 100644
index 000000000..f686a0d43
--- /dev/null
+++ b/components/resume/TemplateSelector.tsx
@@ -0,0 +1,299 @@
+'use client';
+
+import { useState } from 'react';
+import { useResume } from '@/contexts/ResumeContext';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Palette, Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+// Template metadata with descriptions and visual characteristics
+const TEMPLATES = [
+  {
+    id: 'modern',
+    name: 'Modern',
+    description: 'Clean design with purple accents and two-column layout',
+    color: 'from-purple-600 to-indigo-600',
+    preview: 'Modern template with gradient headers and sidebar for skills',
+  },
+  {
+    id: 'classic',
+    name: 'Classic',
+    description: 'Traditional single-column layout with serif fonts',
+    color: 'from-slate-700 to-slate-900',
+    preview: 'Professional single-column layout with conservative styling',
+  },
+  {
+    id: 'minimal',
+    name: 'Minimal',
+    description: 'Ultra-clean with maximum whitespace and simple typography',
+    color: 'from-gray-600 to-gray-800',
+    preview: 'Minimalist design focusing on content hierarchy',
+  },
+  {
+    id: 'creative',
+    name: 'Creative',
+    description: 'Bold and colorful design with unique structure',
+    color: 'from-orange-500 to-pink-600',
+    preview: 'Eye-catching layout with vibrant colors and visual elements',
+  },
+  {
+    id: 'executive',
+    name: 'Executive',
+    description: 'Professional layout for senior positions with elegant typography',
+    color: 'from-blue-700 to-blue-900',
+    preview: 'Sophisticated design with refined spacing and branding',
+  },
+];
+
+interface TemplateSelectorProps {
+  trigger?: React.ReactNode;
+  compact?: boolean;
+}
+
+export function TemplateSelector({ trigger, compact = false }: TemplateSelectorProps) {
+  const { resume, applyTemplate } = useResume();
+  const [open, setOpen] = useState(false);
+  const [hoveredTemplate, setHoveredTemplate] = useState<string | null>(null);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  const currentTemplateId = resume?.template_id || 'modern';
+
+  const handleTemplateSelect = (templateId: string) => {
+    if (templateId === currentTemplateId) {
+      setOpen(false);
+      return;
+    }
+
+    // Trigger transition animation
+    setIsTransitioning(true);
+
+    // Apply template after brief animation
+    setTimeout(() => {
+      applyTemplate(templateId);
+      setIsTransitioning(false);
+      
+      // Close dialog after template is applied
+      setTimeout(() => {
+        setOpen(false);
+      }, 300);
+    }, 200);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          compact ? (
+            <span className="w-full" onClick={() => setOpen(true)}>
+              Templates
+            </span>
+          ) : (
+            <Button variant="outline" size="sm">
+              <Palette className="h-4 w-4" />
+              <span className="hidden sm:inline">Template</span>
+            </Button>
+          )
+        )}
+      </DialogTrigger>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">
+            Choose a Template
+          </DialogTitle>
+          <DialogDescription>
+            Select a template that best represents your personal brand. Your content will be preserved.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Template Gallery */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
+          {TEMPLATES.map((template) => {
+            const isSelected = template.id === currentTemplateId;
+            const isHovered = hoveredTemplate === template.id;
+
+            return (
+              <div
+                key={template.id}
+                className={cn(
+                  'relative group cursor-pointer rounded-lg border-2 transition-all duration-300',
+                  isSelected
+                    ? 'border-purple-600 shadow-lg shadow-purple-200 dark:shadow-purple-900/50'
+                    : 'border-border hover:border-purple-400 hover:shadow-md',
+                  isTransitioning && 'pointer-events-none opacity-50'
+                )}
+                onClick={() => handleTemplateSelect(template.id)}
+                onMouseEnter={() => setHoveredTemplate(template.id)}
+                onMouseLeave={() => setHoveredTemplate(null)}
+              >
+                {/* Template Thumbnail */}
+                <div className="relative aspect-[8.5/11] overflow-hidden rounded-t-lg bg-white">
+                  {/* Thumbnail Preview */}
+                  <div className="absolute inset-0 p-4 scale-[0.35] origin-top-left">
+                    <TemplateThumbnail template={template} />
+                  </div>
+
+                  {/* Hover Overlay */}
+                  <div
+                    className={cn(
+                      'absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent transition-opacity duration-300',
+                      isHovered ? 'opacity-100' : 'opacity-0'
+                    )}
+                  >
+                    <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
+                      <p className="text-sm font-medium">{template.preview}</p>
+                    </div>
+                  </div>
+
+                  {/* Selected Badge */}
+                  {isSelected && (
+                    <div className="absolute top-2 right-2 animate-fade-in">
+                      <Badge className="bg-purple-600 text-white">
+                        <Check className="h-3 w-3 mr-1" />
+                        Selected
+                      </Badge>
+                    </div>
+                  )}
+                </div>
+
+                {/* Template Info */}
+                <div className="p-4 bg-background">
+                  <div className="flex items-center justify-between mb-2">
+                    <h3 className="font-bold text-lg">{template.name}</h3>
+                    <div
+                      className={cn(
+                        'w-8 h-8 rounded-full bg-gradient-to-br',
+                        template.color,
+                        'transition-transform duration-300',
+                        isHovered && 'scale-110'
+                      )}
+                    />
+                  </div>
+                  <p className="text-sm text-muted-foreground">{template.description}</p>
+                </div>
+
+                {/* Hover Effect Border */}
+                <div
+                  className={cn(
+                    'absolute inset-0 rounded-lg bg-gradient-to-br pointer-events-none transition-opacity duration-300',
+                    template.color,
+                    isHovered ? 'opacity-10' : 'opacity-0'
+                  )}
+                />
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Footer Info */}
+        <div className="mt-6 p-4 bg-muted/50 rounded-lg">
+          <p className="text-sm text-muted-foreground text-center">
+            💡 Tip: Hover over a template to see a preview description. Your content will automatically adapt to the new layout.
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Template Thumbnail Component - Renders a miniature version of each template
+function TemplateThumbnail({ template }: { template: typeof TEMPLATES[0] }) {
+  return (
+    <div className="w-[850px] h-[1100px] bg-white p-12 text-[10px]">
+      {/* Header with gradient based on template color */}
+      <div className="mb-6 pb-4 border-b-2" style={{ borderColor: getTemplateColor(template.id) }}>
+        <h1
+          className="text-3xl font-bold mb-2"
+          style={{ color: getTemplateColor(template.id) }}
+        >
+          Your Name
+        </h1>
+        <div className="flex gap-3 text-gray-600 text-xs">
+          <span>email@example.com</span>
+          <span>•</span>
+          <span>(555) 123-4567</span>
+          <span>•</span>
+          <span>City, State</span>
+        </div>
+      </div>
+
+      {/* Content sections */}
+      <div className={cn(
+        template.id === 'modern' ? 'grid grid-cols-3 gap-6' : 'space-y-4'
+      )}>
+        {/* Main content */}
+        <div className={cn(template.id === 'modern' ? 'col-span-2' : '')}>
+          {/* Experience Section */}
+          <div className="mb-4">
+            <h2
+              className="text-sm font-bold mb-2 uppercase"
+              style={{ color: getTemplateColor(template.id) }}
+            >
+              Experience
+            </h2>
+            <div className="space-y-2">
+              <div className="border-l-2 pl-2" style={{ borderColor: getTemplateColor(template.id) }}>
+                <div className="font-bold text-xs">Job Title</div>
+                <div className="text-xs text-gray-600">Company Name • 2020 - Present</div>
+                <div className="text-xs text-gray-700 mt-1">
+                  Brief description of responsibilities and achievements.
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Education Section */}
+          <div>
+            <h2
+              className="text-sm font-bold mb-2 uppercase"
+              style={{ color: getTemplateColor(template.id) }}
+            >
+              Education
+            </h2>
+            <div className="border-l-2 pl-2" style={{ borderColor: getTemplateColor(template.id) }}>
+              <div className="font-bold text-xs">Degree Name</div>
+              <div className="text-xs text-gray-600">University Name • 2016 - 2020</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Sidebar for Modern template */}
+        {template.id === 'modern' && (
+          <div className="space-y-4">
+            <div className="bg-purple-50 p-3 rounded">
+              <h2 className="text-sm font-bold mb-2 text-purple-700 uppercase">Skills</h2>
+              <div className="flex flex-wrap gap-1">
+                <span className="px-2 py-0.5 bg-purple-200 text-purple-700 rounded text-xs">
+                  Skill 1
+                </span>
+                <span className="px-2 py-0.5 bg-purple-200 text-purple-700 rounded text-xs">
+                  Skill 2
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Helper function to get template primary color
+function getTemplateColor(templateId: string): string {
+  const colorMap: Record<string, string> = {
+    modern: '#9333ea', // purple-600
+    classic: '#334155', // slate-700
+    minimal: '#4b5563', // gray-600
+    creative: '#f97316', // orange-500
+    executive: '#1d4ed8', // blue-700
+  };
+  return colorMap[templateId] || '#9333ea';
+}
diff --git a/components/resume/ValidatedInput.tsx b/components/resume/ValidatedInput.tsx
new file mode 100644
index 000000000..22e214fc0
--- /dev/null
+++ b/components/resume/ValidatedInput.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { AlertCircle } from 'lucide-react';
+import { forwardRef } from 'react';
+
+interface ValidatedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  error?: string;
+  icon?: React.ReactNode;
+  showError?: boolean;
+}
+
+export const ValidatedInput = forwardRef<HTMLInputElement, ValidatedInputProps>(
+  ({ label, error, icon, showError = true, className, ...props }, ref) => {
+    return (
+      <div className="space-y-2">
+        <Label htmlFor={props.id} className="text-sm font-medium flex items-center gap-1">
+          {icon}
+          {label}
+          {props.required && <span className="text-destructive">*</span>}
+        </Label>
+        <Input
+          ref={ref}
+          aria-invalid={!!error}
+          className={className}
+          {...props}
+        />
+        {showError && error && (
+          <p className="text-xs text-destructive flex items-center gap-1">
+            <AlertCircle className="h-3 w-3" />
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+ValidatedInput.displayName = 'ValidatedInput';
diff --git a/components/resume/sections/AwardsSection.tsx b/components/resume/sections/AwardsSection.tsx
new file mode 100644
index 000000000..93c0e4f44
--- /dev/null
+++ b/components/resume/sections/AwardsSection.tsx
@@ -0,0 +1,210 @@
+'use client';
+
+import { Award } from '@/types/resume';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { useState } from 'react';
+import { Trophy, Plus, Trash2 } from 'lucide-react';
+import { v4 as uuidv4 } from 'uuid';
+
+interface AwardsSectionProps {
+  content: Award[];
+  onChange: (content: Award[]) => void;
+}
+
+export function AwardsSection({ content, onChange }: AwardsSectionProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    new Set(content.map((award) => award.id))
+  );
+
+  const handleAddAward = () => {
+    const newAward: Award = {
+      id: uuidv4(),
+      title: '',
+      issuer: '',
+      date: '',
+      description: '',
+    };
+    onChange([...content, newAward]);
+    setExpandedIds((prev) => new Set([...prev, newAward.id]));
+  };
+
+  const handleRemoveAward = (id: string) => {
+    onChange(content.filter((award) => award.id !== id));
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(id);
+      return newSet;
+    });
+  };
+
+  const handleUpdateAward = (id: string, updates: Partial<Award>) => {
+    onChange(
+      content.map((award) =>
+        award.id === id ? { ...award, ...updates } : award
+      )
+    );
+  };
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span className="flex items-center gap-2">
+            <Trophy className="h-5 w-5" />
+            Awards & Honors
+          </span>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleAddAward}
+            className="gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            Add Award
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {content.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <Trophy className="h-12 w-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">No awards yet</p>
+            <p className="text-xs mt-1">Click "Add Award" to get started</p>
+          </div>
+        ) : (
+          content.map((award, index) => (
+            <div key={award.id} className="space-y-4">
+              {index > 0 && <Separator />}
+              
+              {/* Award Entry Header */}
+              <div className="flex items-start justify-between">
+                <button
+                  type="button"
+                  onClick={() => toggleExpanded(award.id)}
+                  className="flex-1 text-left"
+                >
+                  <div className="font-medium">
+                    {award.title || 'Untitled Award'}
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    {award.issuer
+                      ? `${award.issuer}${award.date ? ` • ${new Date(award.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}` : ''}`
+                      : 'No issuer specified'}
+                  </div>
+                </button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemoveAward(award.id)}
+                  className="text-destructive hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* Award Entry Form */}
+              {expandedIds.has(award.id) && (
+                <div className="space-y-4 pl-4 border-l-2 border-muted">
+                  {/* Award Title */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`title-${award.id}`} className="text-sm font-medium">
+                      Award Title <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      id={`title-${award.id}`}
+                      value={award.title}
+                      onChange={(e) =>
+                        handleUpdateAward(award.id, {
+                          title: e.target.value,
+                        })
+                      }
+                      placeholder="Best Innovation Award"
+                      required
+                    />
+                  </div>
+
+                  {/* Issuer */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`issuer-${award.id}`} className="text-sm font-medium">
+                      Issuing Organization <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      id={`issuer-${award.id}`}
+                      value={award.issuer}
+                      onChange={(e) =>
+                        handleUpdateAward(award.id, {
+                          issuer: e.target.value,
+                        })
+                      }
+                      placeholder="Tech Conference 2024"
+                      required
+                    />
+                  </div>
+
+                  {/* Date */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`date-${award.id}`} className="text-sm font-medium">
+                      Date Received <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      id={`date-${award.id}`}
+                      type="month"
+                      value={award.date}
+                      onChange={(e) =>
+                        handleUpdateAward(award.id, {
+                          date: e.target.value,
+                        })
+                      }
+                      required
+                    />
+                  </div>
+
+                  {/* Description */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`description-${award.id}`} className="text-sm font-medium">
+                      Description (Optional)
+                    </Label>
+                    <Textarea
+                      id={`description-${award.id}`}
+                      value={award.description || ''}
+                      onChange={(e) =>
+                        handleUpdateAward(award.id, {
+                          description: e.target.value,
+                        })
+                      }
+                      placeholder="Describe the award, what you achieved, and why you received it..."
+                      rows={3}
+                      className="resize-none"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      {(award.description || '').length} characters
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/resume/sections/CertificationsSection.tsx b/components/resume/sections/CertificationsSection.tsx
new file mode 100644
index 000000000..0f289249b
--- /dev/null
+++ b/components/resume/sections/CertificationsSection.tsx
@@ -0,0 +1,262 @@
+'use client';
+
+import { Certification } from '@/types/resume';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { useState } from 'react';
+import { Award, Plus, Trash2, ExternalLink } from 'lucide-react';
+import { v4 as uuidv4 } from 'uuid';
+
+interface CertificationsSectionProps {
+  content: Certification[];
+  onChange: (content: Certification[]) => void;
+}
+
+export function CertificationsSection({ content, onChange }: CertificationsSectionProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    new Set(content.map((cert) => cert.id))
+  );
+
+  const handleAddCertification = () => {
+    const newCertification: Certification = {
+      id: uuidv4(),
+      name: '',
+      issuer: '',
+      date: '',
+      expiry_date: '',
+      credential_id: '',
+      url: '',
+    };
+    onChange([...content, newCertification]);
+    setExpandedIds((prev) => new Set([...prev, newCertification.id]));
+  };
+
+  const handleRemoveCertification = (id: string) => {
+    onChange(content.filter((cert) => cert.id !== id));
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(id);
+      return newSet;
+    });
+  };
+
+  const handleUpdateCertification = (id: string, updates: Partial<Certification>) => {
+    onChange(
+      content.map((cert) =>
+        cert.id === id ? { ...cert, ...updates } : cert
+      )
+    );
+  };
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span className="flex items-center gap-2">
+            <Award className="h-5 w-5" />
+            Certifications
+          </span>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleAddCertification}
+            className="gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            Add Certification
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {content.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <Award className="h-12 w-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">No certifications yet</p>
+            <p className="text-xs mt-1">Click "Add Certification" to get started</p>
+          </div>
+        ) : (
+          content.map((certification, index) => (
+            <div key={certification.id} className="space-y-4">
+              {index > 0 && <Separator />}
+              
+              {/* Certification Entry Header */}
+              <div className="flex items-start justify-between">
+                <button
+                  type="button"
+                  onClick={() => toggleExpanded(certification.id)}
+                  className="flex-1 text-left"
+                >
+                  <div className="font-medium">
+                    {certification.name || 'Untitled Certification'}
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    {certification.issuer
+                      ? `${certification.issuer}${certification.date ? ` • ${new Date(certification.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}` : ''}`
+                      : 'No issuer specified'}
+                  </div>
+                </button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemoveCertification(certification.id)}
+                  className="text-destructive hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* Certification Entry Form */}
+              {expandedIds.has(certification.id) && (
+                <div className="space-y-4 pl-4 border-l-2 border-muted">
+                  {/* Certification Name */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`name-${certification.id}`} className="text-sm font-medium">
+                      Certification Name <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      id={`name-${certification.id}`}
+                      value={certification.name}
+                      onChange={(e) =>
+                        handleUpdateCertification(certification.id, {
+                          name: e.target.value,
+                        })
+                      }
+                      placeholder="AWS Certified Solutions Architect"
+                      required
+                    />
+                  </div>
+
+                  {/* Issuer */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`issuer-${certification.id}`} className="text-sm font-medium">
+                      Issuing Organization <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      id={`issuer-${certification.id}`}
+                      value={certification.issuer}
+                      onChange={(e) =>
+                        handleUpdateCertification(certification.id, {
+                          issuer: e.target.value,
+                        })
+                      }
+                      placeholder="Amazon Web Services"
+                      required
+                    />
+                  </div>
+
+                  {/* Issue Date and Expiry Date */}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor={`date-${certification.id}`} className="text-sm font-medium">
+                        Issue Date <span className="text-destructive">*</span>
+                      </Label>
+                      <Input
+                        id={`date-${certification.id}`}
+                        type="month"
+                        value={certification.date}
+                        onChange={(e) =>
+                          handleUpdateCertification(certification.id, {
+                            date: e.target.value,
+                          })
+                        }
+                        required
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor={`expiry-date-${certification.id}`} className="text-sm font-medium">
+                        Expiry Date (Optional)
+                      </Label>
+                      <Input
+                        id={`expiry-date-${certification.id}`}
+                        type="month"
+                        value={certification.expiry_date || ''}
+                        onChange={(e) =>
+                          handleUpdateCertification(certification.id, {
+                            expiry_date: e.target.value,
+                          })
+                        }
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        Leave blank if certification doesn&apos;t expire
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Credential ID */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`credential-id-${certification.id}`} className="text-sm font-medium">
+                      Credential ID (Optional)
+                    </Label>
+                    <Input
+                      id={`credential-id-${certification.id}`}
+                      value={certification.credential_id || ''}
+                      onChange={(e) =>
+                        handleUpdateCertification(certification.id, {
+                          credential_id: e.target.value,
+                        })
+                      }
+                      placeholder="ABC123XYZ789"
+                    />
+                  </div>
+
+                  {/* Credential URL */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`url-${certification.id}`} className="text-sm font-medium">
+                      Credential URL (Optional)
+                    </Label>
+                    <div className="flex gap-2">
+                      <Input
+                        id={`url-${certification.id}`}
+                        type="url"
+                        value={certification.url || ''}
+                        onChange={(e) =>
+                          handleUpdateCertification(certification.id, {
+                            url: e.target.value,
+                          })
+                        }
+                        placeholder="https://www.credly.com/badges/..."
+                        className="flex-1"
+                      />
+                      {certification.url && (
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={() => window.open(certification.url, '_blank')}
+                          className="gap-2"
+                        >
+                          <ExternalLink className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      Link to verify your certification online
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/resume/sections/CustomSection.tsx b/components/resume/sections/CustomSection.tsx
new file mode 100644
index 000000000..2646d6c5d
--- /dev/null
+++ b/components/resume/sections/CustomSection.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import { CustomContent } from '@/types/resume';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { FileText } from 'lucide-react';
+
+interface CustomSectionProps {
+  content: CustomContent;
+  onChange: (content: CustomContent) => void;
+  sectionTitle?: string;
+}
+
+export function CustomSection({ content, onChange, sectionTitle }: CustomSectionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <FileText className="h-5 w-5" />
+          {sectionTitle || 'Custom Section'}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Section Title */}
+        <div className="space-y-2">
+          <Label htmlFor="custom-title" className="text-sm font-medium">
+            Section Title <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            id="custom-title"
+            value={content.title}
+            onChange={(e) =>
+              onChange({
+                ...content,
+                title: e.target.value,
+              })
+            }
+            placeholder="e.g., Publications, Languages, Volunteer Work"
+            required
+          />
+          <p className="text-xs text-muted-foreground">
+            Give your custom section a descriptive title
+          </p>
+        </div>
+
+        {/* Section Content */}
+        <div className="space-y-2">
+          <Label htmlFor="custom-content" className="text-sm font-medium">
+            Content <span className="text-destructive">*</span>
+          </Label>
+          <Textarea
+            id="custom-content"
+            value={content.content}
+            onChange={(e) =>
+              onChange({
+                ...content,
+                content: e.target.value,
+              })
+            }
+            placeholder="Enter your content here. You can add multiple paragraphs, bullet points, or any text you'd like to include in this section..."
+            rows={8}
+            className="resize-y min-h-[200px]"
+            required
+          />
+          <p className="text-xs text-muted-foreground">
+            {content.content.length} characters
+          </p>
+        </div>
+
+        {/* Formatting Tips */}
+        <div className="rounded-lg bg-muted/50 p-4 space-y-2">
+          <p className="text-sm font-medium">Formatting Tips:</p>
+          <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside">
+            <li>Use line breaks to separate paragraphs</li>
+            <li>Start lines with • or - for bullet points</li>
+            <li>Keep content concise and relevant</li>
+            <li>Use this for sections like Publications, Languages, Volunteer Work, etc.</li>
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/resume/sections/EducationSection.tsx b/components/resume/sections/EducationSection.tsx
new file mode 100644
index 000000000..5a20a990c
--- /dev/null
+++ b/components/resume/sections/EducationSection.tsx
@@ -0,0 +1,395 @@
+'use client';
+
+import { Education } from '@/types/resume';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Separator } from '@/components/ui/separator';
+import { useState } from 'react';
+import { GraduationCap, Plus, Trash2, X, AlertCircle } from 'lucide-react';
+import { v4 as uuidv4 } from 'uuid';
+import { validateDateRange } from '@/lib/validation/resume-validation';
+
+interface EducationSectionProps {
+  content: Education[];
+  onChange: (content: Education[]) => void;
+}
+
+export function EducationSection({ content, onChange }: EducationSectionProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    new Set(content.map((edu) => edu.id))
+  );
+  const [dateErrors, setDateErrors] = useState<Record<string, string>>({});
+
+  const handleAddEducation = () => {
+    const newEducation: Education = {
+      id: uuidv4(),
+      institution: '',
+      degree: '',
+      field: '',
+      start_date: '',
+      end_date: '',
+      current: false,
+      gpa: '',
+      achievements: [],
+    };
+    onChange([...content, newEducation]);
+    setExpandedIds((prev) => new Set([...prev, newEducation.id]));
+  };
+
+  const handleRemoveEducation = (id: string) => {
+    onChange(content.filter((edu) => edu.id !== id));
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(id);
+      return newSet;
+    });
+  };
+
+  const handleUpdateEducation = (id: string, updates: Partial<Education>) => {
+    const updatedEducation = content.find((edu) => edu.id === id);
+    if (updatedEducation) {
+      const newEducation = { ...updatedEducation, ...updates };
+      
+      // Validate date range
+      const validation = validateDateRange(
+        newEducation.start_date,
+        newEducation.end_date,
+        newEducation.current
+      );
+      
+      if (!validation.isValid && validation.error) {
+        setDateErrors((prev) => ({ ...prev, [id]: validation.error! }));
+      } else {
+        setDateErrors((prev) => {
+          const newErrors = { ...prev };
+          delete newErrors[id];
+          return newErrors;
+        });
+      }
+    }
+    
+    onChange(
+      content.map((edu) =>
+        edu.id === id ? { ...edu, ...updates } : edu
+      )
+    );
+  };
+
+  const handleAddAchievement = (id: string) => {
+    const education = content.find((edu) => edu.id === id);
+    if (education) {
+      handleUpdateEducation(id, {
+        achievements: [...(education.achievements || []), ''],
+      });
+    }
+  };
+
+  const handleUpdateAchievement = (
+    educationId: string,
+    achievementIndex: number,
+    value: string
+  ) => {
+    const education = content.find((edu) => edu.id === educationId);
+    if (education) {
+      const newAchievements = [...(education.achievements || [])];
+      newAchievements[achievementIndex] = value;
+      handleUpdateEducation(educationId, { achievements: newAchievements });
+    }
+  };
+
+  const handleRemoveAchievement = (educationId: string, achievementIndex: number) => {
+    const education = content.find((edu) => edu.id === educationId);
+    if (education) {
+      const newAchievements = (education.achievements || []).filter(
+        (_, index) => index !== achievementIndex
+      );
+      handleUpdateEducation(educationId, { achievements: newAchievements });
+    }
+  };
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span className="flex items-center gap-2">
+            <GraduationCap className="h-5 w-5" />
+            Education
+          </span>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleAddEducation}
+            className="gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            Add Education
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {content.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <GraduationCap className="h-12 w-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">No education entries yet</p>
+            <p className="text-xs mt-1">Click "Add Education" to get started</p>
+          </div>
+        ) : (
+          content.map((education, index) => (
+            <div key={education.id} className="space-y-4">
+              {index > 0 && <Separator />}
+              
+              {/* Education Entry Header */}
+              <div className="flex items-start justify-between">
+                <button
+                  type="button"
+                  onClick={() => toggleExpanded(education.id)}
+                  className="flex-1 text-left"
+                >
+                  <div className="font-medium">
+                    {education.institution || 'Untitled Institution'}
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    {education.degree && education.field
+                      ? `${education.degree} in ${education.field}`
+                      : education.degree || education.field || 'No degree specified'}
+                  </div>
+                </button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemoveEducation(education.id)}
+                  className="text-destructive hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* Education Entry Form */}
+              {expandedIds.has(education.id) && (
+                <div className="space-y-4 pl-4 border-l-2 border-muted">
+                  {/* Institution */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`institution-${education.id}`} className="text-sm font-medium">
+                      Institution <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      id={`institution-${education.id}`}
+                      value={education.institution}
+                      onChange={(e) =>
+                        handleUpdateEducation(education.id, {
+                          institution: e.target.value,
+                        })
+                      }
+                      placeholder="University of California, Berkeley"
+                      required
+                    />
+                  </div>
+
+                  {/* Degree and Field */}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor={`degree-${education.id}`} className="text-sm font-medium">
+                        Degree <span className="text-destructive">*</span>
+                      </Label>
+                      <Input
+                        id={`degree-${education.id}`}
+                        value={education.degree}
+                        onChange={(e) =>
+                          handleUpdateEducation(education.id, {
+                            degree: e.target.value,
+                          })
+                        }
+                        placeholder="Bachelor of Science"
+                        required
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor={`field-${education.id}`} className="text-sm font-medium">
+                        Field of Study <span className="text-destructive">*</span>
+                      </Label>
+                      <Input
+                        id={`field-${education.id}`}
+                        value={education.field}
+                        onChange={(e) =>
+                          handleUpdateEducation(education.id, {
+                            field: e.target.value,
+                          })
+                        }
+                        placeholder="Computer Science"
+                        required
+                      />
+                    </div>
+                  </div>
+
+                  {/* Dates */}
+                  <div className="space-y-2">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label htmlFor={`start-date-${education.id}`} className="text-sm font-medium">
+                          Start Date <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          id={`start-date-${education.id}`}
+                          type="month"
+                          value={education.start_date}
+                          onChange={(e) =>
+                            handleUpdateEducation(education.id, {
+                              start_date: e.target.value,
+                            })
+                          }
+                          aria-invalid={!!dateErrors[education.id]}
+                          required
+                        />
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label htmlFor={`end-date-${education.id}`} className="text-sm font-medium">
+                          End Date {!education.current && <span className="text-destructive">*</span>}
+                        </Label>
+                        <Input
+                          id={`end-date-${education.id}`}
+                          type="month"
+                          value={education.end_date || ''}
+                          onChange={(e) =>
+                            handleUpdateEducation(education.id, {
+                              end_date: e.target.value,
+                            })
+                          }
+                          disabled={education.current}
+                          aria-invalid={!!dateErrors[education.id]}
+                          required={!education.current}
+                        />
+                      </div>
+                    </div>
+                    {dateErrors[education.id] && (
+                      <p className="text-xs text-destructive flex items-center gap-1">
+                        <AlertCircle className="h-3 w-3" />
+                        {dateErrors[education.id]}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Current Checkbox */}
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`current-${education.id}`}
+                      checked={education.current}
+                      onCheckedChange={(checked) =>
+                        handleUpdateEducation(education.id, {
+                          current: checked === true,
+                          end_date: checked === true ? undefined : education.end_date,
+                        })
+                      }
+                    />
+                    <Label
+                      htmlFor={`current-${education.id}`}
+                      className="text-sm font-normal cursor-pointer"
+                    >
+                      I currently study here
+                    </Label>
+                  </div>
+
+                  {/* GPA */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`gpa-${education.id}`} className="text-sm font-medium">
+                      GPA (Optional)
+                    </Label>
+                    <Input
+                      id={`gpa-${education.id}`}
+                      value={education.gpa || ''}
+                      onChange={(e) =>
+                        handleUpdateEducation(education.id, {
+                          gpa: e.target.value,
+                        })
+                      }
+                      placeholder="3.8 / 4.0"
+                    />
+                  </div>
+
+                  {/* Achievements */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-sm font-medium">
+                        Achievements & Honors (Optional)
+                      </Label>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleAddAchievement(education.id)}
+                        className="gap-1 h-8"
+                      >
+                        <Plus className="h-3 w-3" />
+                        Add
+                      </Button>
+                    </div>
+
+                    {education.achievements && education.achievements.length > 0 && (
+                      <div className="space-y-2">
+                        {education.achievements.map((achievement, achievementIndex) => (
+                          <div
+                            key={achievementIndex}
+                            className="flex items-start gap-2"
+                          >
+                            <span className="text-muted-foreground mt-3 text-sm">•</span>
+                            <Input
+                              value={achievement}
+                              onChange={(e) =>
+                                handleUpdateAchievement(
+                                  education.id,
+                                  achievementIndex,
+                                  e.target.value
+                                )
+                              }
+                              placeholder="Dean's List, Summa Cum Laude, etc."
+                              className="flex-1"
+                            />
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              onClick={() =>
+                                handleRemoveAchievement(education.id, achievementIndex)
+                              }
+                              className="mt-1"
+                            >
+                              <X className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+
+                    {(!education.achievements || education.achievements.length === 0) && (
+                      <p className="text-xs text-muted-foreground">
+                        Add notable achievements, honors, or awards received during your studies
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/resume/sections/ExperienceSection.tsx b/components/resume/sections/ExperienceSection.tsx
new file mode 100644
index 000000000..4fba60499
--- /dev/null
+++ b/components/resume/sections/ExperienceSection.tsx
@@ -0,0 +1,370 @@
+'use client';
+
+import { Experience } from '@/types/resume';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Separator } from '@/components/ui/separator';
+import { useState } from 'react';
+import { Briefcase, Plus, Trash2, X } from 'lucide-react';
+import { v4 as uuidv4 } from 'uuid';
+import { SectionContentHint } from '../ContentHint';
+
+interface ExperienceSectionProps {
+  content: Experience[];
+  onChange: (content: Experience[]) => void;
+}
+
+export function ExperienceSection({ content, onChange }: ExperienceSectionProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    new Set(content.map((exp) => exp.id))
+  );
+
+  const handleAddExperience = () => {
+    const newExperience: Experience = {
+      id: uuidv4(),
+      company: '',
+      position: '',
+      location: '',
+      start_date: '',
+      end_date: '',
+      current: false,
+      description: '',
+      achievements: [],
+    };
+    onChange([...content, newExperience]);
+    setExpandedIds((prev) => new Set([...prev, newExperience.id]));
+  };
+
+  const handleRemoveExperience = (id: string) => {
+    onChange(content.filter((exp) => exp.id !== id));
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(id);
+      return newSet;
+    });
+  };
+
+  const handleUpdateExperience = (id: string, updates: Partial<Experience>) => {
+    onChange(
+      content.map((exp) =>
+        exp.id === id ? { ...exp, ...updates } : exp
+      )
+    );
+  };
+
+  const handleAddAchievement = (id: string) => {
+    const experience = content.find((exp) => exp.id === id);
+    if (experience) {
+      handleUpdateExperience(id, {
+        achievements: [...experience.achievements, ''],
+      });
+    }
+  };
+
+  const handleUpdateAchievement = (
+    experienceId: string,
+    achievementIndex: number,
+    value: string
+  ) => {
+    const experience = content.find((exp) => exp.id === experienceId);
+    if (experience) {
+      const newAchievements = [...experience.achievements];
+      newAchievements[achievementIndex] = value;
+      handleUpdateExperience(experienceId, { achievements: newAchievements });
+    }
+  };
+
+  const handleRemoveAchievement = (experienceId: string, achievementIndex: number) => {
+    const experience = content.find((exp) => exp.id === experienceId);
+    if (experience) {
+      const newAchievements = experience.achievements.filter(
+        (_, index) => index !== achievementIndex
+      );
+      handleUpdateExperience(experienceId, { achievements: newAchievements });
+    }
+  };
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span className="flex items-center gap-2">
+            <Briefcase className="h-5 w-5" />
+            Work Experience
+          </span>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleAddExperience}
+            className="gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            Add Experience
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {content.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <Briefcase className="h-12 w-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">No work experience entries yet</p>
+            <p className="text-xs mt-1">Click "Add Experience" to get started</p>
+          </div>
+        ) : (
+          content.map((experience, index) => (
+            <div key={experience.id} className="space-y-4">
+              {index > 0 && <Separator />}
+              
+              {/* Experience Entry Header */}
+              <div className="flex items-start justify-between">
+                <button
+                  type="button"
+                  onClick={() => toggleExpanded(experience.id)}
+                  className="flex-1 text-left"
+                >
+                  <div className="font-medium">
+                    {experience.position || 'Untitled Position'}
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    {experience.company
+                      ? `${experience.company}${experience.location ? ` • ${experience.location}` : ''}`
+                      : 'No company specified'}
+                  </div>
+                </button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemoveExperience(experience.id)}
+                  className="text-destructive hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* Experience Entry Form */}
+              {expandedIds.has(experience.id) && (
+                <div className="space-y-4 pl-4 border-l-2 border-muted">
+                  {/* Position */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`position-${experience.id}`} className="text-sm font-medium">
+                      Position / Job Title <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      id={`position-${experience.id}`}
+                      value={experience.position}
+                      onChange={(e) =>
+                        handleUpdateExperience(experience.id, {
+                          position: e.target.value,
+                        })
+                      }
+                      placeholder="Software Engineer"
+                      required
+                    />
+                  </div>
+
+                  {/* Company and Location */}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor={`company-${experience.id}`} className="text-sm font-medium">
+                        Company <span className="text-destructive">*</span>
+                      </Label>
+                      <Input
+                        id={`company-${experience.id}`}
+                        value={experience.company}
+                        onChange={(e) =>
+                          handleUpdateExperience(experience.id, {
+                            company: e.target.value,
+                          })
+                        }
+                        placeholder="Tech Company Inc."
+                        required
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor={`location-${experience.id}`} className="text-sm font-medium">
+                        Location <span className="text-destructive">*</span>
+                      </Label>
+                      <Input
+                        id={`location-${experience.id}`}
+                        value={experience.location}
+                        onChange={(e) =>
+                          handleUpdateExperience(experience.id, {
+                            location: e.target.value,
+                          })
+                        }
+                        placeholder="San Francisco, CA"
+                        required
+                      />
+                    </div>
+                  </div>
+
+                  {/* Dates */}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor={`start-date-${experience.id}`} className="text-sm font-medium">
+                        Start Date <span className="text-destructive">*</span>
+                      </Label>
+                      <Input
+                        id={`start-date-${experience.id}`}
+                        type="month"
+                        value={experience.start_date}
+                        onChange={(e) =>
+                          handleUpdateExperience(experience.id, {
+                            start_date: e.target.value,
+                          })
+                        }
+                        required
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor={`end-date-${experience.id}`} className="text-sm font-medium">
+                        End Date {!experience.current && <span className="text-destructive">*</span>}
+                      </Label>
+                      <Input
+                        id={`end-date-${experience.id}`}
+                        type="month"
+                        value={experience.end_date || ''}
+                        onChange={(e) =>
+                          handleUpdateExperience(experience.id, {
+                            end_date: e.target.value,
+                          })
+                        }
+                        disabled={experience.current}
+                        required={!experience.current}
+                      />
+                    </div>
+                  </div>
+
+                  {/* Current Position Checkbox */}
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`current-${experience.id}`}
+                      checked={experience.current}
+                      onCheckedChange={(checked) =>
+                        handleUpdateExperience(experience.id, {
+                          current: checked === true,
+                          end_date: checked === true ? undefined : experience.end_date,
+                        })
+                      }
+                    />
+                    <Label
+                      htmlFor={`current-${experience.id}`}
+                      className="text-sm font-normal cursor-pointer"
+                    >
+                      I currently work here
+                    </Label>
+                  </div>
+
+                  {/* Description */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`description-${experience.id}`} className="text-sm font-medium">
+                      Job Description <span className="text-destructive">*</span>
+                    </Label>
+                    <Textarea
+                      id={`description-${experience.id}`}
+                      value={experience.description}
+                      onChange={(e) =>
+                        handleUpdateExperience(experience.id, {
+                          description: e.target.value,
+                        })
+                      }
+                      placeholder="Describe your role, responsibilities, and key contributions..."
+                      rows={3}
+                      className="resize-none"
+                      required
+                    />
+                    <SectionContentHint
+                      isEmpty={!experience.description || experience.description.trim().length === 0}
+                      characterCount={experience.description.length}
+                      exampleContent="Led development of microservices architecture serving 1M+ users. Collaborated with cross-functional teams to deliver features on time. Mentored 3 junior developers and conducted code reviews."
+                      minCharacters={50}
+                    />
+                  </div>
+
+                  {/* Achievements */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-sm font-medium">
+                        Key Achievements & Responsibilities
+                      </Label>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleAddAchievement(experience.id)}
+                        className="gap-1 h-8"
+                      >
+                        <Plus className="h-3 w-3" />
+                        Add
+                      </Button>
+                    </div>
+
+                    {experience.achievements.length > 0 ? (
+                      <div className="space-y-2">
+                        {experience.achievements.map((achievement, achievementIndex) => (
+                          <div
+                            key={achievementIndex}
+                            className="flex items-start gap-2"
+                          >
+                            <span className="text-muted-foreground mt-3 text-sm">•</span>
+                            <Input
+                              value={achievement}
+                              onChange={(e) =>
+                                handleUpdateAchievement(
+                                  experience.id,
+                                  achievementIndex,
+                                  e.target.value
+                                )
+                              }
+                              placeholder="Led a team of 5 engineers to deliver..."
+                              className="flex-1"
+                            />
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              onClick={() =>
+                                handleRemoveAchievement(experience.id, achievementIndex)
+                              }
+                              className="mt-1"
+                            >
+                              <X className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <p className="text-xs text-muted-foreground">
+                        Add bullet points highlighting your key achievements, responsibilities, and impact
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/resume/sections/PersonalInfoSection.tsx b/components/resume/sections/PersonalInfoSection.tsx
new file mode 100644
index 000000000..1b668fee7
--- /dev/null
+++ b/components/resume/sections/PersonalInfoSection.tsx
@@ -0,0 +1,225 @@
+'use client';
+
+import { PersonalInfo } from '@/types/resume';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useState, useRef, useEffect } from 'react';
+import { Mail, Phone, MapPin, Globe } from 'lucide-react';
+import { SectionContentHint } from '../ContentHint';
+import { validatePersonalInfo } from '@/lib/validation/resume-validation';
+
+interface PersonalInfoSectionProps {
+  content: PersonalInfo;
+  onChange: (content: PersonalInfo) => void;
+  autoFocus?: boolean;
+}
+
+export function PersonalInfoSection({ content, onChange, autoFocus = false }: PersonalInfoSectionProps) {
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+  const firstInputRef = useRef<HTMLInputElement>(null);
+
+  // Auto-focus first field when section is newly added
+  useEffect(() => {
+    if (autoFocus && firstInputRef.current) {
+      const timer = setTimeout(() => {
+        firstInputRef.current?.focus();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [autoFocus]);
+
+  const handleChange = (field: keyof PersonalInfo, value: string) => {
+    onChange({
+      ...content,
+      [field]: value,
+    });
+
+    // Validate if field has been touched
+    if (touched[field]) {
+      const validationErrors = validatePersonalInfo({ ...content, [field]: value });
+      setErrors(validationErrors);
+    }
+  };
+
+  const handleBlur = (field: string) => {
+    setTouched((prev: Record<string, boolean>) => ({ ...prev, [field]: true }));
+    
+    // Validate on blur
+    const validationErrors = validatePersonalInfo(content);
+    setErrors(validationErrors);
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          Personal Information
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Full Name */}
+        <div className="space-y-2">
+          <Label htmlFor="full_name" className="text-sm font-medium">
+            Full Name <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            ref={firstInputRef}
+            id="full_name"
+            value={content.full_name}
+            onChange={(e) => handleChange('full_name', e.target.value)}
+            onBlur={() => handleBlur('full_name')}
+            placeholder="John Doe"
+            required
+          />
+        </div>
+
+        {/* Email and Phone */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="email" className="text-sm font-medium flex items-center gap-1">
+              <Mail className="h-3.5 w-3.5" />
+              Email <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="email"
+              type="email"
+              value={content.email}
+              onChange={(e) => handleChange('email', e.target.value)}
+              onBlur={() => handleBlur('email')}
+              placeholder="john.doe@example.com"
+              aria-invalid={!!errors.email}
+              required
+            />
+            {errors.email && (
+              <p className="text-xs text-destructive">{errors.email}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="phone" className="text-sm font-medium flex items-center gap-1">
+              <Phone className="h-3.5 w-3.5" />
+              Phone <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="phone"
+              type="tel"
+              value={content.phone}
+              onChange={(e) => handleChange('phone', e.target.value)}
+              onBlur={() => handleBlur('phone')}
+              placeholder="+1 (555) 123-4567"
+              aria-invalid={!!errors.phone}
+              required
+            />
+            {errors.phone && (
+              <p className="text-xs text-destructive">{errors.phone}</p>
+            )}
+          </div>
+        </div>
+
+        {/* Location */}
+        <div className="space-y-2">
+          <Label htmlFor="location" className="text-sm font-medium flex items-center gap-1">
+            <MapPin className="h-3.5 w-3.5" />
+            Location <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            id="location"
+            value={content.location}
+            onChange={(e) => handleChange('location', e.target.value)}
+            onBlur={() => handleBlur('location')}
+            placeholder="San Francisco, CA"
+            required
+          />
+        </div>
+
+        {/* Website */}
+        <div className="space-y-2">
+          <Label htmlFor="website" className="text-sm font-medium flex items-center gap-1">
+            <Globe className="h-3.5 w-3.5" />
+            Website
+          </Label>
+          <Input
+            id="website"
+            type="url"
+            value={content.website || ''}
+            onChange={(e) => handleChange('website', e.target.value)}
+            onBlur={() => handleBlur('website')}
+            placeholder="https://johndoe.com"
+            aria-invalid={!!errors.website}
+          />
+          {errors.website && (
+            <p className="text-xs text-destructive">{errors.website}</p>
+          )}
+        </div>
+
+        {/* LinkedIn and GitHub */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="linkedin" className="text-sm font-medium">
+              LinkedIn
+            </Label>
+            <Input
+              id="linkedin"
+              value={content.linkedin || ''}
+              onChange={(e) => handleChange('linkedin', e.target.value)}
+              onBlur={() => handleBlur('linkedin')}
+              placeholder="linkedin.com/in/johndoe"
+              aria-invalid={!!errors.linkedin}
+            />
+            {errors.linkedin && (
+              <p className="text-xs text-destructive flex items-center gap-1">
+                <Mail className="h-3 w-3" />
+                {errors.linkedin}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="github" className="text-sm font-medium">
+              GitHub
+            </Label>
+            <Input
+              id="github"
+              value={content.github || ''}
+              onChange={(e) => handleChange('github', e.target.value)}
+              onBlur={() => handleBlur('github')}
+              placeholder="github.com/johndoe"
+              aria-invalid={!!errors.github}
+            />
+            {errors.github && (
+              <p className="text-xs text-destructive flex items-center gap-1">
+                <Mail className="h-3 w-3" />
+                {errors.github}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Summary/Objective */}
+        <div className="space-y-2">
+          <Label htmlFor="summary" className="text-sm font-medium">
+            Professional Summary
+          </Label>
+          <Textarea
+            id="summary"
+            value={content.summary || ''}
+            onChange={(e) => handleChange('summary', e.target.value)}
+            onBlur={() => handleBlur('summary')}
+            placeholder="A brief summary of your professional background, skills, and career objectives..."
+            rows={4}
+            className="resize-none"
+          />
+          <SectionContentHint
+            isEmpty={!content.summary || content.summary.trim().length === 0}
+            characterCount={content.summary?.length || 0}
+            exampleContent="Results-driven software engineer with 5+ years of experience in full-stack development. Specialized in React, Node.js, and cloud technologies. Passionate about building scalable applications and mentoring junior developers."
+            minCharacters={100}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/resume/sections/ProjectsSection.tsx b/components/resume/sections/ProjectsSection.tsx
new file mode 100644
index 000000000..613c7e836
--- /dev/null
+++ b/components/resume/sections/ProjectsSection.tsx
@@ -0,0 +1,367 @@
+'use client';
+
+import { Project } from '@/types/resume';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { Badge } from '@/components/ui/badge';
+import { useState } from 'react';
+import { Code, Plus, Trash2, X } from 'lucide-react';
+import { v4 as uuidv4 } from 'uuid';
+import { SectionContentHint } from '../ContentHint';
+
+interface ProjectsSectionProps {
+  content: Project[];
+  onChange: (content: Project[]) => void;
+}
+
+export function ProjectsSection({ content, onChange }: ProjectsSectionProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    new Set(content.map((project) => project.id))
+  );
+  const [techInputs, setTechInputs] = useState<Record<string, string>>({});
+
+  const handleAddProject = () => {
+    const newProject: Project = {
+      id: uuidv4(),
+      name: '',
+      description: '',
+      technologies: [],
+      url: '',
+      github: '',
+      start_date: '',
+      end_date: '',
+    };
+    onChange([...content, newProject]);
+    setExpandedIds((prev) => new Set([...prev, newProject.id]));
+  };
+
+  const handleRemoveProject = (id: string) => {
+    onChange(content.filter((project) => project.id !== id));
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(id);
+      return newSet;
+    });
+    // Clean up tech input state
+    setTechInputs((prev) => {
+      const newInputs = { ...prev };
+      delete newInputs[id];
+      return newInputs;
+    });
+  };
+
+  const handleUpdateProject = (id: string, updates: Partial<Project>) => {
+    onChange(
+      content.map((project) =>
+        project.id === id ? { ...project, ...updates } : project
+      )
+    );
+  };
+
+  const handleAddTechnology = (projectId: string) => {
+    const techInput = techInputs[projectId]?.trim();
+    if (!techInput) return;
+
+    const project = content.find((p) => p.id === projectId);
+    if (project && !project.technologies.includes(techInput)) {
+      handleUpdateProject(projectId, {
+        technologies: [...project.technologies, techInput],
+      });
+      // Clear input
+      setTechInputs((prev) => ({ ...prev, [projectId]: '' }));
+    }
+  };
+
+  const handleRemoveTechnology = (projectId: string, technology: string) => {
+    const project = content.find((p) => p.id === projectId);
+    if (project) {
+      handleUpdateProject(projectId, {
+        technologies: project.technologies.filter((tech) => tech !== technology),
+      });
+    }
+  };
+
+  const handleTechInputKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    projectId: string
+  ) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAddTechnology(projectId);
+    }
+  };
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span className="flex items-center gap-2">
+            <Code className="h-5 w-5" />
+            Projects
+          </span>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleAddProject}
+            className="gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            Add Project
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {content.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <Code className="h-12 w-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">No projects yet</p>
+            <p className="text-xs mt-1">Click "Add Project" to get started</p>
+          </div>
+        ) : (
+          content.map((project, index) => (
+            <div key={project.id} className="space-y-4">
+              {index > 0 && <Separator />}
+              
+              {/* Project Entry Header */}
+              <div className="flex items-start justify-between">
+                <button
+                  type="button"
+                  onClick={() => toggleExpanded(project.id)}
+                  className="flex-1 text-left"
+                >
+                  <div className="font-medium">
+                    {project.name || 'Untitled Project'}
+                  </div>
+                  <div className="text-sm text-muted-foreground line-clamp-1">
+                    {project.description || 'No description'}
+                  </div>
+                  {project.technologies.length > 0 && (
+                    <div className="flex flex-wrap gap-1 mt-1">
+                      {project.technologies.slice(0, 3).map((tech) => (
+                        <Badge key={tech} variant="secondary" className="text-xs">
+                          {tech}
+                        </Badge>
+                      ))}
+                      {project.technologies.length > 3 && (
+                        <Badge variant="secondary" className="text-xs">
+                          +{project.technologies.length - 3}
+                        </Badge>
+                      )}
+                    </div>
+                  )}
+                </button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemoveProject(project.id)}
+                  className="text-destructive hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* Project Entry Form */}
+              {expandedIds.has(project.id) && (
+                <div className="space-y-4 pl-4 border-l-2 border-muted">
+                  {/* Project Name */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`name-${project.id}`} className="text-sm font-medium">
+                      Project Name <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      id={`name-${project.id}`}
+                      value={project.name}
+                      onChange={(e) =>
+                        handleUpdateProject(project.id, {
+                          name: e.target.value,
+                        })
+                      }
+                      placeholder="E-commerce Platform"
+                      required
+                    />
+                  </div>
+
+                  {/* Description */}
+                  <div className="space-y-2">
+                    <Label htmlFor={`description-${project.id}`} className="text-sm font-medium">
+                      Description <span className="text-destructive">*</span>
+                    </Label>
+                    <Textarea
+                      id={`description-${project.id}`}
+                      value={project.description}
+                      onChange={(e) =>
+                        handleUpdateProject(project.id, {
+                          description: e.target.value,
+                        })
+                      }
+                      placeholder="Describe the project, your role, and key features..."
+                      rows={3}
+                      className="resize-none"
+                      required
+                    />
+                    <SectionContentHint
+                      isEmpty={!project.description || project.description.trim().length === 0}
+                      characterCount={project.description.length}
+                      exampleContent="Built a real-time chat application using React and WebSocket. Implemented user authentication, message encryption, and file sharing. Deployed on AWS with auto-scaling capabilities."
+                      minCharacters={50}
+                    />
+                  </div>
+
+                  {/* Technologies */}
+                  <div className="space-y-2">
+                    <Label className="text-sm font-medium">
+                      Technologies Used <span className="text-destructive">*</span>
+                    </Label>
+                    
+                    {/* Technology Tags Display */}
+                    {project.technologies.length > 0 && (
+                      <div className="flex flex-wrap gap-2 p-3 bg-muted/50 rounded-md">
+                        {project.technologies.map((tech) => (
+                          <Badge
+                            key={tech}
+                            variant="secondary"
+                            className="gap-1 pr-1"
+                          >
+                            {tech}
+                            <button
+                              type="button"
+                              onClick={() => handleRemoveTechnology(project.id, tech)}
+                              className="ml-1 hover:bg-destructive/20 rounded-full p-0.5"
+                            >
+                              <X className="h-3 w-3" />
+                            </button>
+                          </Badge>
+                        ))}
+                      </div>
+                    )}
+
+                    {/* Technology Input */}
+                    <div className="flex gap-2">
+                      <Input
+                        value={techInputs[project.id] || ''}
+                        onChange={(e) =>
+                          setTechInputs((prev) => ({
+                            ...prev,
+                            [project.id]: e.target.value,
+                          }))
+                        }
+                        onKeyDown={(e) => handleTechInputKeyDown(e, project.id)}
+                        placeholder="e.g., React, Node.js, PostgreSQL"
+                        className="flex-1"
+                      />
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleAddTechnology(project.id)}
+                        disabled={!techInputs[project.id]?.trim()}
+                      >
+                        <Plus className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      Press Enter or click + to add a technology
+                    </p>
+                  </div>
+
+                  {/* URLs */}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor={`url-${project.id}`} className="text-sm font-medium">
+                        Project URL (Optional)
+                      </Label>
+                      <Input
+                        id={`url-${project.id}`}
+                        type="url"
+                        value={project.url || ''}
+                        onChange={(e) =>
+                          handleUpdateProject(project.id, {
+                            url: e.target.value,
+                          })
+                        }
+                        placeholder="https://project-demo.com"
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor={`github-${project.id}`} className="text-sm font-medium">
+                        GitHub URL (Optional)
+                      </Label>
+                      <Input
+                        id={`github-${project.id}`}
+                        type="url"
+                        value={project.github || ''}
+                        onChange={(e) =>
+                          handleUpdateProject(project.id, {
+                            github: e.target.value,
+                          })
+                        }
+                        placeholder="https://github.com/username/repo"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Dates (Optional) */}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor={`start-date-${project.id}`} className="text-sm font-medium">
+                        Start Date (Optional)
+                      </Label>
+                      <Input
+                        id={`start-date-${project.id}`}
+                        type="month"
+                        value={project.start_date || ''}
+                        onChange={(e) =>
+                          handleUpdateProject(project.id, {
+                            start_date: e.target.value,
+                          })
+                        }
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor={`end-date-${project.id}`} className="text-sm font-medium">
+                        End Date (Optional)
+                      </Label>
+                      <Input
+                        id={`end-date-${project.id}`}
+                        type="month"
+                        value={project.end_date || ''}
+                        onChange={(e) =>
+                          handleUpdateProject(project.id, {
+                            end_date: e.target.value,
+                          })
+                        }
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        Leave empty if project is ongoing
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/resume/sections/SkillsSection.tsx b/components/resume/sections/SkillsSection.tsx
new file mode 100644
index 000000000..064681b8d
--- /dev/null
+++ b/components/resume/sections/SkillsSection.tsx
@@ -0,0 +1,341 @@
+'use client';
+
+import { Skill } from '@/types/resume';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { useState, KeyboardEvent } from 'react';
+import { Wrench, Plus, Trash2, X, GripVertical } from 'lucide-react';
+import { v4 as uuidv4 } from 'uuid';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+interface SkillsSectionProps {
+  content: Skill[];
+  onChange: (content: Skill[]) => void;
+}
+
+interface SkillCategoryWithId extends Skill {
+  id: string;
+}
+
+// Sortable skill category component
+function SortableSkillCategory({
+  skill,
+  onUpdate,
+  onRemove,
+}: {
+  skill: SkillCategoryWithId;
+  onUpdate: (id: string, updates: Partial<Skill>) => void;
+  onRemove: (id: string) => void;
+}) {
+  const [inputValue, setInputValue] = useState('');
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: skill.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const handleAddSkill = () => {
+    const trimmedValue = inputValue.trim();
+    if (trimmedValue && !skill.items.includes(trimmedValue)) {
+      onUpdate(skill.id, {
+        items: [...skill.items, trimmedValue],
+      });
+      setInputValue('');
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAddSkill();
+    } else if (e.key === ',' || e.key === 'Tab') {
+      e.preventDefault();
+      handleAddSkill();
+    }
+  };
+
+  const handleRemoveSkill = (skillToRemove: string) => {
+    onUpdate(skill.id, {
+      items: skill.items.filter((item) => item !== skillToRemove),
+    });
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className="space-y-3">
+      {/* Category Header */}
+      <div className="flex items-start gap-2">
+        <button
+          type="button"
+          className="mt-2 cursor-grab active:cursor-grabbing touch-none"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="h-5 w-5 text-muted-foreground" />
+        </button>
+
+        <div className="flex-1 space-y-2">
+          <div className="flex items-center gap-2">
+            <Input
+              value={skill.category}
+              onChange={(e) =>
+                onUpdate(skill.id, { category: e.target.value })
+              }
+              placeholder="e.g., Programming Languages, Frameworks, Tools"
+              className="font-medium"
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => onRemove(skill.id)}
+              className="text-destructive hover:text-destructive"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Skills Tags */}
+          {isExpanded && (
+            <>
+              <div className="flex flex-wrap gap-2 min-h-[2rem] p-2 border rounded-md bg-muted/20">
+                {skill.items.length > 0 ? (
+                  skill.items.map((item, index) => (
+                    <Badge
+                      key={index}
+                      variant="secondary"
+                      className="gap-1 pr-1"
+                    >
+                      {item}
+                      <button
+                        type="button"
+                        onClick={() => handleRemoveSkill(item)}
+                        className="ml-1 hover:bg-destructive/20 rounded-full p-0.5"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </Badge>
+                  ))
+                ) : (
+                  <span className="text-sm text-muted-foreground">
+                    No skills added yet
+                  </span>
+                )}
+              </div>
+
+              {/* Add Skill Input */}
+              <div className="flex gap-2">
+                <Input
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder="Type a skill and press Enter, comma, or Tab"
+                  className="flex-1"
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleAddSkill}
+                  disabled={!inputValue.trim()}
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Press Enter, comma, or Tab to add multiple skills quickly
+              </p>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SkillsSection({ content, onChange }: SkillsSectionProps) {
+  // Add unique IDs to skills for drag-and-drop
+  const [skillsWithIds, setSkillsWithIds] = useState<SkillCategoryWithId[]>(
+    () =>
+      content.map((skill) => ({
+        ...skill,
+        id: uuidv4(),
+      }))
+  );
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // Sync skillsWithIds with content when content changes externally
+  useState(() => {
+    if (content.length !== skillsWithIds.length) {
+      setSkillsWithIds(
+        content.map((skill, index) => ({
+          ...skill,
+          id: skillsWithIds[index]?.id || uuidv4(),
+        }))
+      );
+    }
+  });
+
+  const handleAddCategory = () => {
+    const newSkill: SkillCategoryWithId = {
+      id: uuidv4(),
+      category: '',
+      items: [],
+    };
+    const newSkills = [...skillsWithIds, newSkill];
+    setSkillsWithIds(newSkills);
+    onChange(newSkills.map(({ id, ...skill }) => skill));
+  };
+
+  const handleUpdateCategory = (id: string, updates: Partial<Skill>) => {
+    const newSkills = skillsWithIds.map((skill) =>
+      skill.id === id ? { ...skill, ...updates } : skill
+    );
+    setSkillsWithIds(newSkills);
+    onChange(newSkills.map(({ id, ...skill }) => skill));
+  };
+
+  const handleRemoveCategory = (id: string) => {
+    const newSkills = skillsWithIds.filter((skill) => skill.id !== id);
+    setSkillsWithIds(newSkills);
+    onChange(newSkills.map(({ id, ...skill }) => skill));
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = skillsWithIds.findIndex(
+        (skill) => skill.id === active.id
+      );
+      const newIndex = skillsWithIds.findIndex((skill) => skill.id === over.id);
+
+      const newSkills = arrayMove(skillsWithIds, oldIndex, newIndex);
+      setSkillsWithIds(newSkills);
+      onChange(newSkills.map(({ id, ...skill }) => skill));
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span className="flex items-center gap-2">
+            <Wrench className="h-5 w-5" />
+            Skills
+          </span>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleAddCategory}
+            className="gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            Add Category
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {skillsWithIds.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <Wrench className="h-12 w-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">No skill categories yet</p>
+            <p className="text-xs mt-1">
+              Click "Add Category" to organize your skills
+            </p>
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={skillsWithIds.map((s) => s.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-4">
+                {skillsWithIds.map((skill, index) => (
+                  <div key={skill.id}>
+                    {index > 0 && <Separator className="my-4" />}
+                    <SortableSkillCategory
+                      skill={skill}
+                      onUpdate={handleUpdateCategory}
+                      onRemove={handleRemoveCategory}
+                    />
+                  </div>
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        )}
+
+        {skillsWithIds.length > 0 && (
+          <>
+            {/* Warning for too few skills */}
+            {(() => {
+              const totalSkills = skillsWithIds.reduce(
+                (sum, skill) => sum + skill.items.length,
+                0
+              );
+              return totalSkills < 5 ? (
+                <Alert variant="default" className="border-yellow-200 bg-yellow-50 dark:bg-yellow-950/20 dark:border-yellow-800">
+                  <AlertCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                  <AlertDescription className="text-sm text-yellow-800 dark:text-yellow-200">
+                    You have {totalSkills} skill{totalSkills !== 1 ? 's' : ''} listed. Consider adding more skills to better showcase your capabilities (aim for at least 5-10).
+                  </AlertDescription>
+                </Alert>
+              ) : null;
+            })()}
+            
+            <div className="pt-2">
+              <p className="text-xs text-muted-foreground">
+                💡 Tip: Drag categories to reorder them. Organize skills by type
+                (e.g., Programming Languages, Frameworks, Tools, Soft Skills)
+              </p>
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/resume/templates/ClassicTemplate.tsx b/components/resume/templates/ClassicTemplate.tsx
new file mode 100644
index 000000000..99f1e537f
--- /dev/null
+++ b/components/resume/templates/ClassicTemplate.tsx
@@ -0,0 +1,283 @@
+'use client';
+
+import { Resume, PersonalInfo, Education, Experience, Project, Skill, Certification, Award, CustomContent } from '@/types/resume';
+
+interface ClassicTemplateProps {
+  resume: Resume;
+}
+
+export function ClassicTemplate({ resume }: ClassicTemplateProps) {
+  const { styling } = resume;
+  
+  // Get personal info section
+  const personalInfoSection = resume.sections.find(s => s.type === 'personal_info');
+  const personalInfo = personalInfoSection?.content as PersonalInfo | undefined;
+
+  // Get all visible sections sorted by order
+  const visibleSections = resume.sections
+    .filter(s => s.visible && s.type !== 'personal_info')
+    .sort((a, b) => a.order - b.order);
+
+  // Render section content based on type
+  const renderSectionContent = (section: { type: string; content: unknown; visible: boolean }) => {
+    if (!section.visible) return null;
+
+    switch (section.type) {
+      case 'education':
+        return renderEducation(section.content as Education[]);
+      case 'experience':
+        return renderExperience(section.content as Experience[]);
+      case 'projects':
+        return renderProjects(section.content as Project[]);
+      case 'skills':
+        return renderSkills(section.content as Skill[]);
+      case 'certifications':
+        return renderCertifications(section.content as Certification[]);
+      case 'awards':
+        return renderAwards(section.content as Award[]);
+      case 'custom':
+        return renderCustom(section.content as CustomContent);
+      default:
+        return null;
+    }
+  };
+
+  const renderPersonalInfo = (content: PersonalInfo) => {
+    return (
+      <div className="mb-6 pb-4 border-b-2 border-gray-800 text-center">
+        {content.full_name && (
+          <h1 className="text-3xl font-serif font-bold text-gray-900 mb-2 tracking-wide">
+            {content.full_name}
+          </h1>
+        )}
+        <div className="flex flex-wrap justify-center gap-x-3 gap-y-1 text-sm text-gray-700">
+          {content.email && <span>{content.email}</span>}
+          {content.phone && <span>•</span>}
+          {content.phone && <span>{content.phone}</span>}
+          {content.location && <span>•</span>}
+          {content.location && <span>{content.location}</span>}
+        </div>
+        {(content.website || content.linkedin || content.github) && (
+          <div className="flex flex-wrap justify-center gap-x-3 gap-y-1 text-sm text-gray-700 mt-1">
+            {content.website && <span className="truncate">{content.website}</span>}
+            {content.linkedin && content.website && <span>•</span>}
+            {content.linkedin && <span className="truncate">{content.linkedin}</span>}
+            {content.github && (content.website || content.linkedin) && <span>•</span>}
+            {content.github && <span className="truncate">{content.github}</span>}
+          </div>
+        )}
+        {content.summary && (
+          <p className="mt-3 text-sm text-gray-800 leading-relaxed text-left font-serif">
+            {content.summary}
+          </p>
+        )}
+      </div>
+    );
+  };
+
+  const renderEducation = (items: Education[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-3">
+        {items.map((item) => (
+          <div key={item.id}>
+            <div className="flex justify-between items-start mb-1">
+              <div className="flex-1">
+                <h3 className="font-serif font-bold text-gray-900">{item.institution}</h3>
+                <p className="text-sm text-gray-800 italic">
+                  {item.degree} in {item.field}
+                </p>
+              </div>
+              <div className="text-right text-sm text-gray-700 ml-4">
+                <p>
+                  {item.start_date} - {item.current ? 'Present' : item.end_date}
+                </p>
+                {item.gpa && <p>GPA: {item.gpa}</p>}
+              </div>
+            </div>
+            {item.achievements && item.achievements.length > 0 && (
+              <ul className="mt-2 space-y-1 text-sm text-gray-800 list-disc list-inside">
+                {item.achievements.map((achievement, idx) => (
+                  <li key={idx}>{achievement}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderExperience = (items: Experience[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-3">
+        {items.map((item) => (
+          <div key={item.id}>
+            <div className="flex justify-between items-start mb-1">
+              <div className="flex-1">
+                <h3 className="font-serif font-bold text-gray-900">{item.position}</h3>
+                <p className="text-sm text-gray-800 italic">{item.company}, {item.location}</p>
+              </div>
+              <p className="text-sm text-gray-700 ml-4">
+                {item.start_date} - {item.current ? 'Present' : item.end_date}
+              </p>
+            </div>
+            {item.description && (
+              <p className="mt-1 text-sm text-gray-800">{item.description}</p>
+            )}
+            {item.achievements && item.achievements.length > 0 && (
+              <ul className="mt-2 space-y-1 text-sm text-gray-800 list-disc list-inside">
+                {item.achievements.map((achievement, idx) => (
+                  <li key={idx}>{achievement}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderProjects = (items: Project[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-3">
+        {items.map((item) => (
+          <div key={item.id}>
+            <div className="flex justify-between items-start mb-1">
+              <h3 className="font-serif font-bold text-gray-900 flex-1">{item.name}</h3>
+              {(item.start_date || item.end_date) && (
+                <p className="text-sm text-gray-700 ml-4">
+                  {item.start_date} {item.end_date && `- ${item.end_date}`}
+                </p>
+              )}
+            </div>
+            {item.description && (
+              <p className="mt-1 text-sm text-gray-800">{item.description}</p>
+            )}
+            {item.technologies && item.technologies.length > 0 && (
+              <p className="mt-1 text-sm text-gray-700">
+                <span className="font-semibold">Technologies:</span> {item.technologies.join(', ')}
+              </p>
+            )}
+            {(item.url || item.github) && (
+              <div className="mt-1 text-xs text-gray-600">
+                {item.url && <span className="truncate block">URL: {item.url}</span>}
+                {item.github && <span className="truncate block">GitHub: {item.github}</span>}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderSkills = (items: Skill[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-2">
+        {items.map((skill, idx) => (
+          <div key={idx}>
+            <span className="font-serif font-bold text-gray-900 text-sm">{skill.category}:</span>{' '}
+            <span className="text-sm text-gray-800">{skill.items.join(', ')}</span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCertifications = (items: Certification[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-2">
+        {items.map((item) => (
+          <div key={item.id}>
+            <div className="flex justify-between items-start">
+              <div className="flex-1">
+                <h3 className="font-serif font-bold text-gray-900 text-sm">{item.name}</h3>
+                <p className="text-sm text-gray-800 italic">{item.issuer}</p>
+              </div>
+              <p className="text-sm text-gray-700 ml-4">{item.date}</p>
+            </div>
+            {item.credential_id && (
+              <p className="text-xs text-gray-600 mt-1">Credential ID: {item.credential_id}</p>
+            )}
+            {item.url && (
+              <p className="text-xs text-gray-600 mt-1 truncate">{item.url}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderAwards = (items: Award[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-2">
+        {items.map((item) => (
+          <div key={item.id}>
+            <div className="flex justify-between items-start">
+              <div className="flex-1">
+                <h3 className="font-serif font-bold text-gray-900 text-sm">{item.title}</h3>
+                <p className="text-sm text-gray-800 italic">{item.issuer}</p>
+              </div>
+              <p className="text-sm text-gray-700 ml-4">{item.date}</p>
+            </div>
+            {item.description && (
+              <p className="text-sm text-gray-800 mt-1">{item.description}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCustom = (content: CustomContent) => {
+    if (!content.content) return null;
+    return (
+      <div>
+        <p className="text-sm text-gray-800 whitespace-pre-wrap font-serif">{content.content}</p>
+      </div>
+    );
+  };
+
+  return (
+    <div 
+      className="min-h-full font-serif"
+      style={{
+        fontFamily: styling.font_family,
+        fontSize: `${styling.font_size_body}pt`,
+        lineHeight: styling.line_height,
+        color: styling.color_text,
+      }}
+    >
+      {/* Header with Personal Info */}
+      {personalInfo && renderPersonalInfo(personalInfo)}
+
+      {/* Single-column layout for all sections */}
+      <div className="space-y-5">
+        {visibleSections.map((section) => (
+          <div key={section.id} className="animate-fade-in">
+            <div className="mb-3">
+              <h2 className="text-base font-serif font-bold text-gray-900 uppercase tracking-wider border-b border-gray-800 pb-1">
+                {section.title}
+              </h2>
+            </div>
+            {renderSectionContent(section)}
+          </div>
+        ))}
+
+        {/* Empty state */}
+        {visibleSections.length === 0 && (
+          <div className="text-center py-12">
+            <p className="text-gray-500 font-sans">
+              Add sections to your resume to see them here
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/resume/templates/CreativeTemplate.tsx b/components/resume/templates/CreativeTemplate.tsx
new file mode 100644
index 000000000..4dc140ffa
--- /dev/null
+++ b/components/resume/templates/CreativeTemplate.tsx
@@ -0,0 +1,467 @@
+'use client';
+
+import { Resume, PersonalInfo, Education, Experience, Project, Skill, Certification, Award, CustomContent } from '@/types/resume';
+
+interface CreativeTemplateProps {
+  resume: Resume;
+}
+
+/**
+ * CreativeTemplate - Bold, colorful layout with unique asymmetric structure
+ * Design principles:
+ * - Vibrant color palette with gradients
+ * - Asymmetric layout with visual interest
+ * - Icons and visual elements throughout
+ * - Creative use of shapes and backgrounds
+ * - Bold typography with varied sizes
+ */
+export function CreativeTemplate({ resume }: CreativeTemplateProps) {
+  const { styling } = resume;
+  
+  // Get personal info section
+  const personalInfoSection = resume.sections.find(s => s.type === 'personal_info');
+  const personalInfo = personalInfoSection?.content as PersonalInfo | undefined;
+
+  // Get all visible sections sorted by order
+  const visibleSections = resume.sections
+    .filter(s => s.visible && s.type !== 'personal_info')
+    .sort((a, b) => a.order - b.order);
+
+  // Render section content based on type
+  const renderSectionContent = (section: { type: string; content: unknown; visible: boolean }) => {
+    if (!section.visible) return null;
+
+    switch (section.type) {
+      case 'education':
+        return renderEducation(section.content as Education[]);
+      case 'experience':
+        return renderExperience(section.content as Experience[]);
+      case 'projects':
+        return renderProjects(section.content as Project[]);
+      case 'skills':
+        return renderSkills(section.content as Skill[]);
+      case 'certifications':
+        return renderCertifications(section.content as Certification[]);
+      case 'awards':
+        return renderAwards(section.content as Award[]);
+      case 'custom':
+        return renderCustom(section.content as CustomContent);
+      default:
+        return null;
+    }
+  };
+
+  const renderPersonalInfo = (content: PersonalInfo) => {
+    return (
+      <div className="relative mb-8 overflow-hidden">
+        {/* Colorful background with geometric shapes */}
+        <div className="absolute inset-0 bg-gradient-to-br from-purple-600 via-pink-500 to-orange-400 opacity-90"></div>
+        <div className="absolute top-0 right-0 w-64 h-64 bg-yellow-400 rounded-full -translate-y-32 translate-x-32 opacity-20"></div>
+        <div className="absolute bottom-0 left-0 w-48 h-48 bg-blue-400 rounded-full translate-y-24 -translate-x-24 opacity-20"></div>
+        
+        {/* Content */}
+        <div className="relative z-10 p-8 text-white">
+          {content.full_name && (
+            <h1 className="text-5xl font-black mb-4 tracking-tight drop-shadow-lg">
+              {content.full_name}
+            </h1>
+          )}
+          
+          {/* Contact info with icons */}
+          <div className="flex flex-wrap gap-4 mb-4">
+            {content.email && (
+              <div className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-full">
+                <span className="text-lg">✉️</span>
+                <span className="text-sm font-medium">{content.email}</span>
+              </div>
+            )}
+            {content.phone && (
+              <div className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-full">
+                <span className="text-lg">📱</span>
+                <span className="text-sm font-medium">{content.phone}</span>
+              </div>
+            )}
+            {content.location && (
+              <div className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-full">
+                <span className="text-lg">📍</span>
+                <span className="text-sm font-medium">{content.location}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Links with icons */}
+          <div className="flex flex-wrap gap-3">
+            {content.website && (
+              <div className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-full">
+                <span className="text-lg">🌐</span>
+                <span className="text-xs font-medium truncate max-w-[150px]">{content.website}</span>
+              </div>
+            )}
+            {content.linkedin && (
+              <div className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-full">
+                <span className="text-lg">💼</span>
+                <span className="text-xs font-medium truncate max-w-[150px]">{content.linkedin}</span>
+              </div>
+            )}
+            {content.github && (
+              <div className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-full">
+                <span className="text-lg">⚡</span>
+                <span className="text-xs font-medium truncate max-w-[150px]">{content.github}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Summary */}
+          {content.summary && (
+            <p className="mt-5 text-sm leading-relaxed bg-white/10 backdrop-blur-sm p-4 rounded-lg border border-white/20">
+              {content.summary}
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const renderEducation = (items: Education[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-5">
+        {items.map((item, index) => (
+          <div 
+            key={item.id} 
+            className="relative pl-6 border-l-4 border-gradient-to-b from-purple-500 to-pink-500"
+            style={{ borderImage: 'linear-gradient(to bottom, rgb(168, 85, 247), rgb(236, 72, 153)) 1' }}
+          >
+            {/* Decorative circle */}
+            <div className="absolute -left-2.5 top-0 w-5 h-5 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 border-2 border-white"></div>
+            
+            <div className="flex justify-between items-start mb-2">
+              <div className="flex-1">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-xl">🎓</span>
+                  <h3 className="font-bold text-gray-900 text-base">{item.institution}</h3>
+                </div>
+                <p className="text-sm text-gray-700 font-semibold">
+                  {item.degree} in {item.field}
+                </p>
+              </div>
+              <div className="text-right ml-4">
+                <div className="bg-gradient-to-r from-purple-100 to-pink-100 px-3 py-1 rounded-full">
+                  <p className="text-xs font-bold text-purple-700">
+                    {item.start_date} - {item.current ? 'Present' : item.end_date}
+                  </p>
+                </div>
+                {item.gpa && (
+                  <p className="text-xs text-gray-600 mt-1 font-semibold">GPA: {item.gpa}</p>
+                )}
+              </div>
+            </div>
+            {item.achievements && item.achievements.length > 0 && (
+              <ul className="mt-3 space-y-2 text-sm text-gray-700">
+                {item.achievements.map((achievement, idx) => (
+                  <li key={idx} className="flex items-start gap-2">
+                    <span className="text-purple-500 mt-1 text-xs">★</span>
+                    <span>{achievement}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderExperience = (items: Experience[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-5">
+        {items.map((item, index) => (
+          <div 
+            key={item.id}
+            className="relative pl-6 border-l-4"
+            style={{ borderImage: 'linear-gradient(to bottom, rgb(59, 130, 246), rgb(147, 51, 234)) 1' }}
+          >
+            {/* Decorative circle */}
+            <div className="absolute -left-2.5 top-0 w-5 h-5 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 border-2 border-white"></div>
+            
+            <div className="flex justify-between items-start mb-2">
+              <div className="flex-1">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-xl">💼</span>
+                  <h3 className="font-bold text-gray-900 text-base">{item.position}</h3>
+                </div>
+                <p className="text-sm text-gray-700 font-semibold">
+                  {item.company} • {item.location}
+                </p>
+              </div>
+              <div className="bg-gradient-to-r from-blue-100 to-purple-100 px-3 py-1 rounded-full ml-4">
+                <p className="text-xs font-bold text-blue-700">
+                  {item.start_date} - {item.current ? 'Present' : item.end_date}
+                </p>
+              </div>
+            </div>
+            {item.description && (
+              <p className="mt-2 text-sm text-gray-700 bg-gray-50 p-3 rounded-lg">{item.description}</p>
+            )}
+            {item.achievements && item.achievements.length > 0 && (
+              <ul className="mt-3 space-y-2 text-sm text-gray-700">
+                {item.achievements.map((achievement, idx) => (
+                  <li key={idx} className="flex items-start gap-2">
+                    <span className="text-blue-500 mt-1 text-xs">★</span>
+                    <span>{achievement}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderProjects = (items: Project[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-5">
+        {items.map((item, index) => (
+          <div 
+            key={item.id}
+            className="relative pl-6 border-l-4"
+            style={{ borderImage: 'linear-gradient(to bottom, rgb(34, 197, 94), rgb(59, 130, 246)) 1' }}
+          >
+            {/* Decorative circle */}
+            <div className="absolute -left-2.5 top-0 w-5 h-5 rounded-full bg-gradient-to-br from-green-500 to-blue-500 border-2 border-white"></div>
+            
+            <div className="flex justify-between items-start mb-2">
+              <div className="flex items-center gap-2 flex-1">
+                <span className="text-xl">🚀</span>
+                <h3 className="font-bold text-gray-900 text-base">{item.name}</h3>
+              </div>
+              {(item.start_date || item.end_date) && (
+                <div className="bg-gradient-to-r from-green-100 to-blue-100 px-3 py-1 rounded-full ml-4">
+                  <p className="text-xs font-bold text-green-700">
+                    {item.start_date} {item.end_date && `- ${item.end_date}`}
+                  </p>
+                </div>
+              )}
+            </div>
+            {item.description && (
+              <p className="mt-2 text-sm text-gray-700">{item.description}</p>
+            )}
+            {item.technologies && item.technologies.length > 0 && (
+              <div className="mt-3 flex flex-wrap gap-2">
+                {item.technologies.map((tech, idx) => (
+                  <span
+                    key={idx}
+                    className="px-3 py-1 text-xs font-bold bg-gradient-to-r from-green-400 to-blue-400 text-white rounded-full shadow-sm"
+                  >
+                    {tech}
+                  </span>
+                ))}
+              </div>
+            )}
+            {(item.url || item.github) && (
+              <div className="mt-3 flex gap-3 text-xs">
+                {item.url && (
+                  <div className="flex items-center gap-1 text-gray-600">
+                    <span>🔗</span>
+                    <span className="truncate max-w-[200px]">{item.url}</span>
+                  </div>
+                )}
+                {item.github && (
+                  <div className="flex items-center gap-1 text-gray-600">
+                    <span>⚡</span>
+                    <span className="truncate max-w-[200px]">{item.github}</span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderSkills = (items: Skill[]) => {
+    if (!items || items.length === 0) return null;
+    
+    // Color schemes for different skill categories
+    const colorSchemes = [
+      'from-red-400 to-orange-400',
+      'from-blue-400 to-cyan-400',
+      'from-purple-400 to-pink-400',
+      'from-green-400 to-emerald-400',
+      'from-yellow-400 to-amber-400',
+      'from-indigo-400 to-violet-400',
+    ];
+
+    return (
+      <div className="space-y-5">
+        {items.map((skill, idx) => (
+          <div key={idx}>
+            <div className="flex items-center gap-2 mb-3">
+              <span className="text-xl">⚡</span>
+              <h3 className="font-bold text-gray-900 text-sm uppercase tracking-wide">
+                {skill.category}
+              </h3>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {skill.items.map((item, itemIdx) => (
+                <span
+                  key={itemIdx}
+                  className={`px-4 py-2 text-sm font-bold bg-gradient-to-r ${colorSchemes[idx % colorSchemes.length]} text-white rounded-lg shadow-md transform hover:scale-105 transition-transform`}
+                >
+                  {item}
+                </span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCertifications = (items: Certification[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-4">
+        {items.map((item, index) => (
+          <div 
+            key={item.id}
+            className="relative pl-6 border-l-4"
+            style={{ borderImage: 'linear-gradient(to bottom, rgb(251, 146, 60), rgb(251, 191, 36)) 1' }}
+          >
+            {/* Decorative circle */}
+            <div className="absolute -left-2.5 top-0 w-5 h-5 rounded-full bg-gradient-to-br from-orange-400 to-yellow-400 border-2 border-white"></div>
+            
+            <div className="flex justify-between items-start">
+              <div className="flex-1">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-xl">🏆</span>
+                  <h3 className="font-bold text-gray-900 text-sm">{item.name}</h3>
+                </div>
+                <p className="text-sm text-gray-700 font-medium">{item.issuer}</p>
+              </div>
+              <div className="bg-gradient-to-r from-orange-100 to-yellow-100 px-3 py-1 rounded-full ml-4">
+                <p className="text-xs font-bold text-orange-700">{item.date}</p>
+              </div>
+            </div>
+            {item.credential_id && (
+              <p className="text-xs text-gray-600 mt-2 bg-gray-50 px-2 py-1 rounded inline-block">
+                ID: {item.credential_id}
+              </p>
+            )}
+            {item.url && (
+              <div className="mt-2 flex items-center gap-1 text-xs text-gray-600">
+                <span>🔗</span>
+                <span className="truncate">{item.url}</span>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderAwards = (items: Award[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-4">
+        {items.map((item, index) => (
+          <div 
+            key={item.id}
+            className="relative pl-6 border-l-4"
+            style={{ borderImage: 'linear-gradient(to bottom, rgb(236, 72, 153), rgb(239, 68, 68)) 1' }}
+          >
+            {/* Decorative circle */}
+            <div className="absolute -left-2.5 top-0 w-5 h-5 rounded-full bg-gradient-to-br from-pink-500 to-red-500 border-2 border-white"></div>
+            
+            <div className="flex justify-between items-start">
+              <div className="flex-1">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-xl">🌟</span>
+                  <h3 className="font-bold text-gray-900 text-sm">{item.title}</h3>
+                </div>
+                <p className="text-sm text-gray-700 font-medium">{item.issuer}</p>
+              </div>
+              <div className="bg-gradient-to-r from-pink-100 to-red-100 px-3 py-1 rounded-full ml-4">
+                <p className="text-xs font-bold text-pink-700">{item.date}</p>
+              </div>
+            </div>
+            {item.description && (
+              <p className="text-sm text-gray-700 mt-2">{item.description}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCustom = (content: CustomContent) => {
+    if (!content.content) return null;
+    return (
+      <div className="bg-gradient-to-br from-gray-50 to-gray-100 p-4 rounded-lg border-l-4 border-purple-500">
+        <p className="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed">
+          {content.content}
+        </p>
+      </div>
+    );
+  };
+
+  return (
+    <div 
+      className="min-h-full"
+      style={{
+        fontFamily: styling.font_family,
+        fontSize: `${styling.font_size_body}pt`,
+        lineHeight: styling.line_height,
+        color: styling.color_text,
+      }}
+    >
+      {/* Colorful header with personal info */}
+      {personalInfo && renderPersonalInfo(personalInfo)}
+
+      {/* Asymmetric layout - alternating section styles */}
+      <div className="space-y-8">
+        {visibleSections.map((section, index) => {
+          // Alternate between different visual styles for asymmetry
+          const isEven = index % 2 === 0;
+          
+          return (
+            <div 
+              key={section.id} 
+              className={`animate-fade-in ${isEven ? '' : 'ml-4'}`}
+            >
+              {/* Section header with colorful gradient and icon */}
+              <div className="mb-4 relative">
+                <div className={`inline-block ${isEven ? '' : 'ml-auto'}`}>
+                  <h2 className="text-xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-500 to-orange-400 uppercase tracking-wide inline-block">
+                    {section.title}
+                  </h2>
+                  <div className="h-1 bg-gradient-to-r from-purple-600 via-pink-500 to-orange-400 rounded-full mt-1"></div>
+                </div>
+              </div>
+              
+              {/* Section content */}
+              <div className={isEven ? '' : 'mr-4'}>
+                {renderSectionContent(section)}
+              </div>
+            </div>
+          );
+        })}
+
+        {/* Empty state with colorful design */}
+        {visibleSections.length === 0 && (
+          <div className="text-center py-16">
+            <div className="inline-block bg-gradient-to-r from-purple-100 via-pink-100 to-orange-100 p-8 rounded-2xl">
+              <p className="text-gray-600 font-bold">
+                ✨ Add sections to your resume to see them here ✨
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/resume/templates/ExecutiveTemplate.tsx b/components/resume/templates/ExecutiveTemplate.tsx
new file mode 100644
index 000000000..d71143c2a
--- /dev/null
+++ b/components/resume/templates/ExecutiveTemplate.tsx
@@ -0,0 +1,432 @@
+'use client';
+
+import { Resume, PersonalInfo, Education, Experience, Project, Skill, Certification, Award, CustomContent } from '@/types/resume';
+
+interface ExecutiveTemplateProps {
+  resume: Resume;
+}
+
+/**
+ * ExecutiveTemplate - Professional layout for senior positions
+ * Design principles:
+ * - Elegant, sophisticated typography with refined spacing
+ * - Subtle branding elements and professional color palette
+ * - Clean hierarchy emphasizing leadership and achievements
+ * - Premium feel with refined details and balanced whitespace
+ * - Emphasis on impact and executive presence
+ */
+export function ExecutiveTemplate({ resume }: ExecutiveTemplateProps) {
+  const { styling } = resume;
+  
+  // Get personal info section
+  const personalInfoSection = resume.sections.find(s => s.type === 'personal_info');
+  const personalInfo = personalInfoSection?.content as PersonalInfo | undefined;
+
+  // Get all visible sections sorted by order
+  const visibleSections = resume.sections
+    .filter(s => s.visible && s.type !== 'personal_info')
+    .sort((a, b) => a.order - b.order);
+
+  // Render section content based on type
+  const renderSectionContent = (section: { type: string; content: unknown; visible: boolean }) => {
+    if (!section.visible) return null;
+
+    switch (section.type) {
+      case 'education':
+        return renderEducation(section.content as Education[]);
+      case 'experience':
+        return renderExperience(section.content as Experience[]);
+      case 'projects':
+        return renderProjects(section.content as Project[]);
+      case 'skills':
+        return renderSkills(section.content as Skill[]);
+      case 'certifications':
+        return renderCertifications(section.content as Certification[]);
+      case 'awards':
+        return renderAwards(section.content as Award[]);
+      case 'custom':
+        return renderCustom(section.content as CustomContent);
+      default:
+        return null;
+    }
+  };
+
+  const renderPersonalInfo = (content: PersonalInfo) => {
+    return (
+      <div className="mb-10 pb-6 border-b border-gray-300">
+        {/* Name with elegant typography */}
+        {content.full_name && (
+          <h1 className="text-4xl font-light text-gray-900 mb-4 tracking-wide" style={{ fontFamily: 'Georgia, serif' }}>
+            {content.full_name}
+          </h1>
+        )}
+        
+        {/* Contact information in refined layout */}
+        <div className="flex flex-wrap gap-x-6 gap-y-2 text-sm text-gray-600 mb-4">
+          {content.email && (
+            <div className="flex items-center gap-2">
+              <span className="w-1 h-1 rounded-full bg-gray-400"></span>
+              <span>{content.email}</span>
+            </div>
+          )}
+          {content.phone && (
+            <div className="flex items-center gap-2">
+              <span className="w-1 h-1 rounded-full bg-gray-400"></span>
+              <span>{content.phone}</span>
+            </div>
+          )}
+          {content.location && (
+            <div className="flex items-center gap-2">
+              <span className="w-1 h-1 rounded-full bg-gray-400"></span>
+              <span>{content.location}</span>
+            </div>
+          )}
+        </div>
+
+        {/* Professional links */}
+        {(content.website || content.linkedin || content.github) && (
+          <div className="flex flex-wrap gap-x-6 gap-y-2 text-sm text-gray-600 mb-4">
+            {content.website && (
+              <div className="flex items-center gap-2">
+                <span className="w-1 h-1 rounded-full bg-gray-400"></span>
+                <span className="truncate">{content.website}</span>
+              </div>
+            )}
+            {content.linkedin && (
+              <div className="flex items-center gap-2">
+                <span className="w-1 h-1 rounded-full bg-gray-400"></span>
+                <span className="truncate">{content.linkedin}</span>
+              </div>
+            )}
+            {content.github && (
+              <div className="flex items-center gap-2">
+                <span className="w-1 h-1 rounded-full bg-gray-400"></span>
+                <span className="truncate">{content.github}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Executive summary with emphasis */}
+        {content.summary && (
+          <div className="mt-5 pt-5 border-t border-gray-200">
+            <p className="text-sm text-gray-700 leading-relaxed" style={{ fontFamily: 'Georgia, serif' }}>
+              {content.summary}
+            </p>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderEducation = (items: Education[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-6">
+        {items.map((item) => (
+          <div key={item.id} className="relative">
+            {/* Subtle accent line */}
+            <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-gradient-to-b from-gray-400 to-transparent"></div>
+            
+            <div className="pl-5">
+              <div className="flex justify-between items-start mb-2">
+                <div className="flex-1">
+                  <h3 className="font-semibold text-gray-900 text-base" style={{ fontFamily: 'Georgia, serif' }}>
+                    {item.degree} in {item.field}
+                  </h3>
+                  <p className="text-sm text-gray-700 mt-1 font-medium">{item.institution}</p>
+                </div>
+                <div className="text-right text-sm text-gray-600 ml-6">
+                  <p className="font-medium">
+                    {item.start_date} – {item.current ? 'Present' : item.end_date}
+                  </p>
+                  {item.gpa && (
+                    <p className="text-xs text-gray-500 mt-1">GPA: {item.gpa}</p>
+                  )}
+                </div>
+              </div>
+              {item.achievements && item.achievements.length > 0 && (
+                <ul className="mt-3 space-y-2 text-sm text-gray-700">
+                  {item.achievements.map((achievement, idx) => (
+                    <li key={idx} className="flex items-start gap-3">
+                      <span className="text-gray-400 mt-1.5 text-xs">▪</span>
+                      <span className="leading-relaxed">{achievement}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderExperience = (items: Experience[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-6">
+        {items.map((item) => (
+          <div key={item.id} className="relative">
+            {/* Subtle accent line */}
+            <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-gradient-to-b from-gray-400 to-transparent"></div>
+            
+            <div className="pl-5">
+              <div className="flex justify-between items-start mb-2">
+                <div className="flex-1">
+                  <h3 className="font-semibold text-gray-900 text-base" style={{ fontFamily: 'Georgia, serif' }}>
+                    {item.position}
+                  </h3>
+                  <p className="text-sm text-gray-700 mt-1 font-medium">
+                    {item.company} · {item.location}
+                  </p>
+                </div>
+                <p className="text-sm text-gray-600 ml-6 font-medium">
+                  {item.start_date} – {item.current ? 'Present' : item.end_date}
+                </p>
+              </div>
+              {item.description && (
+                <p className="mt-3 text-sm text-gray-700 leading-relaxed italic">
+                  {item.description}
+                </p>
+              )}
+              {item.achievements && item.achievements.length > 0 && (
+                <ul className="mt-3 space-y-2 text-sm text-gray-700">
+                  {item.achievements.map((achievement, idx) => (
+                    <li key={idx} className="flex items-start gap-3">
+                      <span className="text-gray-400 mt-1.5 text-xs">▪</span>
+                      <span className="leading-relaxed">{achievement}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderProjects = (items: Project[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-6">
+        {items.map((item) => (
+          <div key={item.id} className="relative">
+            {/* Subtle accent line */}
+            <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-gradient-to-b from-gray-400 to-transparent"></div>
+            
+            <div className="pl-5">
+              <div className="flex justify-between items-start mb-2">
+                <h3 className="font-semibold text-gray-900 text-base flex-1" style={{ fontFamily: 'Georgia, serif' }}>
+                  {item.name}
+                </h3>
+                {(item.start_date || item.end_date) && (
+                  <p className="text-sm text-gray-600 ml-6 font-medium">
+                    {item.start_date} {item.end_date && `– ${item.end_date}`}
+                  </p>
+                )}
+              </div>
+              {item.description && (
+                <p className="mt-2 text-sm text-gray-700 leading-relaxed">{item.description}</p>
+              )}
+              {item.technologies && item.technologies.length > 0 && (
+                <div className="mt-3 flex flex-wrap gap-2">
+                  {item.technologies.map((tech, idx) => (
+                    <span
+                      key={idx}
+                      className="px-3 py-1 text-xs font-medium bg-gray-100 text-gray-700 border border-gray-300 rounded"
+                    >
+                      {tech}
+                    </span>
+                  ))}
+                </div>
+              )}
+              {(item.url || item.github) && (
+                <div className="mt-3 space-y-1 text-xs text-gray-500">
+                  {item.url && (
+                    <div className="flex items-center gap-2">
+                      <span className="w-1 h-1 rounded-full bg-gray-400"></span>
+                      <span className="truncate">{item.url}</span>
+                    </div>
+                  )}
+                  {item.github && (
+                    <div className="flex items-center gap-2">
+                      <span className="w-1 h-1 rounded-full bg-gray-400"></span>
+                      <span className="truncate">{item.github}</span>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderSkills = (items: Skill[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-4">
+        {items.map((skill, idx) => (
+          <div key={idx} className="relative pl-5">
+            {/* Subtle accent marker */}
+            <div className="absolute left-0 top-2 w-2 h-2 rounded-full bg-gray-400"></div>
+            
+            <div>
+              <h3 className="font-semibold text-gray-900 text-sm mb-2" style={{ fontFamily: 'Georgia, serif' }}>
+                {skill.category}
+              </h3>
+              <div className="flex flex-wrap gap-2">
+                {skill.items.map((item, itemIdx) => (
+                  <span
+                    key={itemIdx}
+                    className="px-3 py-1 text-xs font-medium bg-gray-100 text-gray-700 border border-gray-300 rounded"
+                  >
+                    {item}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCertifications = (items: Certification[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-5">
+        {items.map((item) => (
+          <div key={item.id} className="relative">
+            {/* Subtle accent line */}
+            <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-gradient-to-b from-gray-400 to-transparent"></div>
+            
+            <div className="pl-5">
+              <div className="flex justify-between items-start mb-1">
+                <div className="flex-1">
+                  <h3 className="font-semibold text-gray-900 text-sm" style={{ fontFamily: 'Georgia, serif' }}>
+                    {item.name}
+                  </h3>
+                  <p className="text-sm text-gray-700 mt-1">{item.issuer}</p>
+                </div>
+                <p className="text-sm text-gray-600 ml-6 font-medium">{item.date}</p>
+              </div>
+              {item.credential_id && (
+                <p className="text-xs text-gray-500 mt-2">Credential: {item.credential_id}</p>
+              )}
+              {item.url && (
+                <div className="mt-2 flex items-center gap-2 text-xs text-gray-500">
+                  <span className="w-1 h-1 rounded-full bg-gray-400"></span>
+                  <span className="truncate">{item.url}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderAwards = (items: Award[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-5">
+        {items.map((item) => (
+          <div key={item.id} className="relative">
+            {/* Subtle accent line */}
+            <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-gradient-to-b from-gray-400 to-transparent"></div>
+            
+            <div className="pl-5">
+              <div className="flex justify-between items-start mb-1">
+                <div className="flex-1">
+                  <h3 className="font-semibold text-gray-900 text-sm" style={{ fontFamily: 'Georgia, serif' }}>
+                    {item.title}
+                  </h3>
+                  <p className="text-sm text-gray-700 mt-1">{item.issuer}</p>
+                </div>
+                <p className="text-sm text-gray-600 ml-6 font-medium">{item.date}</p>
+              </div>
+              {item.description && (
+                <p className="text-sm text-gray-700 mt-2 leading-relaxed">{item.description}</p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCustom = (content: CustomContent) => {
+    if (!content.content) return null;
+    return (
+      <div className="relative pl-5">
+        <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-gradient-to-b from-gray-400 to-transparent"></div>
+        <p className="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed" style={{ fontFamily: 'Georgia, serif' }}>
+          {content.content}
+        </p>
+      </div>
+    );
+  };
+
+  return (
+    <div 
+      className="min-h-full"
+      style={{
+        fontFamily: styling.font_family,
+        fontSize: `${styling.font_size_body}pt`,
+        lineHeight: styling.line_height,
+        color: styling.color_text,
+      }}
+    >
+      {/* Header with personal info - elegant and refined */}
+      {personalInfo && renderPersonalInfo(personalInfo)}
+
+      {/* Single-column layout with sophisticated spacing */}
+      <div className="space-y-10">
+        {visibleSections.map((section) => (
+          <div key={section.id} className="animate-fade-in">
+            {/* Section header with subtle branding element */}
+            <div className="mb-5 relative">
+              <div className="flex items-center gap-3">
+                {/* Subtle branding accent */}
+                <div className="w-1 h-6 bg-gradient-to-b from-gray-600 to-gray-400 rounded-full"></div>
+                <h2 
+                  className="text-lg font-semibold text-gray-900 uppercase tracking-widest" 
+                  style={{ fontFamily: 'Georgia, serif', letterSpacing: '0.15em' }}
+                >
+                  {section.title}
+                </h2>
+              </div>
+              {/* Refined underline */}
+              <div className="mt-2 ml-4 h-px bg-gradient-to-r from-gray-300 to-transparent"></div>
+            </div>
+            
+            {/* Section content */}
+            {renderSectionContent(section)}
+          </div>
+        ))}
+
+        {/* Empty state with refined styling */}
+        {visibleSections.length === 0 && (
+          <div className="text-center py-16">
+            <div className="inline-block border border-gray-300 px-8 py-6 rounded">
+              <p className="text-gray-500 text-sm" style={{ fontFamily: 'Georgia, serif' }}>
+                Add sections to your resume to see them here
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Subtle footer branding element */}
+      <div className="mt-12 pt-6 border-t border-gray-200">
+        <div className="flex justify-center">
+          <div className="w-12 h-0.5 bg-gradient-to-r from-transparent via-gray-400 to-transparent"></div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/resume/templates/MinimalTemplate.tsx b/components/resume/templates/MinimalTemplate.tsx
new file mode 100644
index 000000000..c334d647d
--- /dev/null
+++ b/components/resume/templates/MinimalTemplate.tsx
@@ -0,0 +1,309 @@
+'use client';
+
+import { Resume, PersonalInfo, Education, Experience, Project, Skill, Certification, Award, CustomContent } from '@/types/resume';
+
+interface MinimalTemplateProps {
+  resume: Resume;
+}
+
+/**
+ * MinimalTemplate - Ultra-clean layout with maximum whitespace
+ * Design principles:
+ * - Maximum whitespace for breathing room
+ * - Minimal colors (black text on white background)
+ * - Simple, clean typography
+ * - Clear content hierarchy through spacing and font sizes
+ * - No decorative elements or borders
+ */
+export function MinimalTemplate({ resume }: MinimalTemplateProps) {
+  const { styling } = resume;
+  
+  // Get personal info section
+  const personalInfoSection = resume.sections.find(s => s.type === 'personal_info');
+  const personalInfo = personalInfoSection?.content as PersonalInfo | undefined;
+
+  // Get all visible sections sorted by order
+  const visibleSections = resume.sections
+    .filter(s => s.visible && s.type !== 'personal_info')
+    .sort((a, b) => a.order - b.order);
+
+  // Render section content based on type
+  const renderSectionContent = (section: { type: string; content: unknown; visible: boolean }) => {
+    if (!section.visible) return null;
+
+    switch (section.type) {
+      case 'education':
+        return renderEducation(section.content as Education[]);
+      case 'experience':
+        return renderExperience(section.content as Experience[]);
+      case 'projects':
+        return renderProjects(section.content as Project[]);
+      case 'skills':
+        return renderSkills(section.content as Skill[]);
+      case 'certifications':
+        return renderCertifications(section.content as Certification[]);
+      case 'awards':
+        return renderAwards(section.content as Award[]);
+      case 'custom':
+        return renderCustom(section.content as CustomContent);
+      default:
+        return null;
+    }
+  };
+
+  const renderPersonalInfo = (content: PersonalInfo) => {
+    return (
+      <div className="mb-12">
+        {content.full_name && (
+          <h1 className="text-4xl font-light text-gray-900 mb-6 tracking-tight">
+            {content.full_name}
+          </h1>
+        )}
+        
+        {/* Contact information in a clean, minimal layout */}
+        <div className="space-y-1 text-sm text-gray-600 mb-6">
+          {content.email && (
+            <div>{content.email}</div>
+          )}
+          {content.phone && (
+            <div>{content.phone}</div>
+          )}
+          {content.location && (
+            <div>{content.location}</div>
+          )}
+          {content.website && (
+            <div className="truncate">{content.website}</div>
+          )}
+          {content.linkedin && (
+            <div className="truncate">{content.linkedin}</div>
+          )}
+          {content.github && (
+            <div className="truncate">{content.github}</div>
+          )}
+        </div>
+
+        {/* Summary with extra spacing */}
+        {content.summary && (
+          <p className="text-sm text-gray-700 leading-relaxed max-w-3xl">
+            {content.summary}
+          </p>
+        )}
+      </div>
+    );
+  };
+
+  const renderEducation = (items: Education[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-8">
+        {items.map((item) => (
+          <div key={item.id}>
+            <div className="flex justify-between items-start mb-2">
+              <div className="flex-1">
+                <h3 className="font-medium text-gray-900 text-base">
+                  {item.degree} in {item.field}
+                </h3>
+                <p className="text-sm text-gray-600 mt-1">{item.institution}</p>
+              </div>
+              <div className="text-right text-sm text-gray-500 ml-6">
+                <p>
+                  {item.start_date} – {item.current ? 'Present' : item.end_date}
+                </p>
+                {item.gpa && <p className="mt-1">{item.gpa}</p>}
+              </div>
+            </div>
+            {item.achievements && item.achievements.length > 0 && (
+              <ul className="mt-3 space-y-2 text-sm text-gray-700">
+                {item.achievements.map((achievement, idx) => (
+                  <li key={idx} className="leading-relaxed">
+                    {achievement}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderExperience = (items: Experience[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-8">
+        {items.map((item) => (
+          <div key={item.id}>
+            <div className="flex justify-between items-start mb-2">
+              <div className="flex-1">
+                <h3 className="font-medium text-gray-900 text-base">{item.position}</h3>
+                <p className="text-sm text-gray-600 mt-1">
+                  {item.company} · {item.location}
+                </p>
+              </div>
+              <p className="text-sm text-gray-500 ml-6">
+                {item.start_date} – {item.current ? 'Present' : item.end_date}
+              </p>
+            </div>
+            {item.description && (
+              <p className="mt-3 text-sm text-gray-700 leading-relaxed">{item.description}</p>
+            )}
+            {item.achievements && item.achievements.length > 0 && (
+              <ul className="mt-3 space-y-2 text-sm text-gray-700">
+                {item.achievements.map((achievement, idx) => (
+                  <li key={idx} className="leading-relaxed">
+                    {achievement}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderProjects = (items: Project[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-8">
+        {items.map((item) => (
+          <div key={item.id}>
+            <div className="flex justify-between items-start mb-2">
+              <h3 className="font-medium text-gray-900 text-base flex-1">{item.name}</h3>
+              {(item.start_date || item.end_date) && (
+                <p className="text-sm text-gray-500 ml-6">
+                  {item.start_date} {item.end_date && `– ${item.end_date}`}
+                </p>
+              )}
+            </div>
+            {item.description && (
+              <p className="mt-2 text-sm text-gray-700 leading-relaxed">{item.description}</p>
+            )}
+            {item.technologies && item.technologies.length > 0 && (
+              <p className="mt-3 text-sm text-gray-600">
+                {item.technologies.join(' · ')}
+              </p>
+            )}
+            {(item.url || item.github) && (
+              <div className="mt-2 space-y-1 text-xs text-gray-500">
+                {item.url && <div className="truncate">{item.url}</div>}
+                {item.github && <div className="truncate">{item.github}</div>}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderSkills = (items: Skill[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-6">
+        {items.map((skill, idx) => (
+          <div key={idx}>
+            <h3 className="font-medium text-gray-900 text-sm mb-2">{skill.category}</h3>
+            <p className="text-sm text-gray-700 leading-relaxed">
+              {skill.items.join(' · ')}
+            </p>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCertifications = (items: Certification[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-6">
+        {items.map((item) => (
+          <div key={item.id}>
+            <div className="flex justify-between items-start mb-1">
+              <div className="flex-1">
+                <h3 className="font-medium text-gray-900 text-base">{item.name}</h3>
+                <p className="text-sm text-gray-600 mt-1">{item.issuer}</p>
+              </div>
+              <p className="text-sm text-gray-500 ml-6">{item.date}</p>
+            </div>
+            {item.credential_id && (
+              <p className="text-xs text-gray-500 mt-2">{item.credential_id}</p>
+            )}
+            {item.url && (
+              <p className="text-xs text-gray-500 mt-1 truncate">{item.url}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderAwards = (items: Award[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-6">
+        {items.map((item) => (
+          <div key={item.id}>
+            <div className="flex justify-between items-start mb-1">
+              <div className="flex-1">
+                <h3 className="font-medium text-gray-900 text-base">{item.title}</h3>
+                <p className="text-sm text-gray-600 mt-1">{item.issuer}</p>
+              </div>
+              <p className="text-sm text-gray-500 ml-6">{item.date}</p>
+            </div>
+            {item.description && (
+              <p className="text-sm text-gray-700 mt-2 leading-relaxed">{item.description}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCustom = (content: CustomContent) => {
+    if (!content.content) return null;
+    return (
+      <div>
+        <p className="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed">
+          {content.content}
+        </p>
+      </div>
+    );
+  };
+
+  return (
+    <div 
+      className="min-h-full"
+      style={{
+        fontFamily: styling.font_family,
+        fontSize: `${styling.font_size_body}pt`,
+        lineHeight: styling.line_height,
+        color: styling.color_text,
+      }}
+    >
+      {/* Header with Personal Info - Maximum whitespace */}
+      {personalInfo && renderPersonalInfo(personalInfo)}
+
+      {/* Single-column layout with generous spacing */}
+      <div className="space-y-12">
+        {visibleSections.map((section) => (
+          <div key={section.id} className="animate-fade-in">
+            {/* Section title with minimal styling - just uppercase and spacing */}
+            <h2 className="text-xs font-medium text-gray-900 uppercase tracking-widest mb-6 letter-spacing-wide">
+              {section.title}
+            </h2>
+            {renderSectionContent(section)}
+          </div>
+        ))}
+
+        {/* Empty state */}
+        {visibleSections.length === 0 && (
+          <div className="text-center py-16">
+            <p className="text-gray-400 text-sm">
+              Add sections to your resume to see them here
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/resume/templates/ModernTemplate.tsx b/components/resume/templates/ModernTemplate.tsx
new file mode 100644
index 000000000..15c0b2487
--- /dev/null
+++ b/components/resume/templates/ModernTemplate.tsx
@@ -0,0 +1,413 @@
+'use client';
+
+import { Resume, PersonalInfo, Education, Experience, Project, Skill, Certification, Award, CustomContent } from '@/types/resume';
+
+interface ModernTemplateProps {
+  resume: Resume;
+}
+
+export function ModernTemplate({ resume }: ModernTemplateProps) {
+  const { styling } = resume;
+  
+  // Create CSS variables from styling
+  const styleVars = {
+    '--resume-font-family': styling.font_family,
+    '--resume-font-size-body': `${styling.font_size_body}pt`,
+    '--resume-font-size-heading': `${styling.font_size_heading}pt`,
+    '--resume-color-primary': styling.color_primary,
+    '--resume-color-text': styling.color_text,
+    '--resume-color-accent': styling.color_accent,
+    '--resume-line-height': styling.line_height,
+    '--resume-section-spacing': `${styling.section_spacing}rem`,
+  } as React.CSSProperties;
+  // Get personal info section
+  const personalInfoSection = resume.sections.find(s => s.type === 'personal_info');
+  const personalInfo = personalInfoSection?.content as PersonalInfo | undefined;
+
+  // Get skills section for sidebar
+  const skillsSection = resume.sections.find(s => s.type === 'skills' && s.visible);
+  const skills = skillsSection?.content as Skill[] | undefined;
+
+  // Get other sections for main content
+  const mainSections = resume.sections.filter(
+    s => s.visible && s.type !== 'personal_info' && s.type !== 'skills'
+  ).sort((a, b) => a.order - b.order);
+
+  // Render section content based on type
+  const renderSectionContent = (section: { type: string; content: unknown; visible: boolean }) => {
+    if (!section.visible) return null;
+
+    switch (section.type) {
+      case 'education':
+        return renderEducation(section.content as Education[]);
+      case 'experience':
+        return renderExperience(section.content as Experience[]);
+      case 'projects':
+        return renderProjects(section.content as Project[]);
+      case 'certifications':
+        return renderCertifications(section.content as Certification[]);
+      case 'awards':
+        return renderAwards(section.content as Award[]);
+      case 'custom':
+        return renderCustom(section.content as CustomContent);
+      default:
+        return null;
+    }
+  };
+
+  const renderPersonalInfo = (content: PersonalInfo) => {
+    return (
+      <div className="mb-8 pb-6 border-b-2 border-gradient-to-r from-purple-600 to-indigo-600">
+        {content.full_name && (
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent mb-3">
+            {content.full_name}
+          </h1>
+        )}
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-700">
+          {content.email && (
+            <div className="flex items-center gap-1">
+              <span className="text-purple-600">✉</span>
+              <span>{content.email}</span>
+            </div>
+          )}
+          {content.phone && (
+            <div className="flex items-center gap-1">
+              <span className="text-purple-600">☎</span>
+              <span>{content.phone}</span>
+            </div>
+          )}
+          {content.location && (
+            <div className="flex items-center gap-1">
+              <span className="text-purple-600">📍</span>
+              <span>{content.location}</span>
+            </div>
+          )}
+        </div>
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-700 mt-2">
+          {content.website && (
+            <div className="flex items-center gap-1">
+              <span className="text-purple-600">🌐</span>
+              <span className="truncate">{content.website}</span>
+            </div>
+          )}
+          {content.linkedin && (
+            <div className="flex items-center gap-1">
+              <span className="text-purple-600">in</span>
+              <span className="truncate">{content.linkedin}</span>
+            </div>
+          )}
+          {content.github && (
+            <div className="flex items-center gap-1">
+              <span className="text-purple-600">⚡</span>
+              <span className="truncate">{content.github}</span>
+            </div>
+          )}
+        </div>
+        {content.summary && (
+          <p className="mt-4 text-sm text-gray-700 leading-relaxed">
+            {content.summary}
+          </p>
+        )}
+      </div>
+    );
+  };
+
+  const renderEducation = (items: Education[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-4">
+        {items.map((item) => (
+          <div key={item.id} className="border-l-2 border-purple-400 pl-4">
+            <div className="flex justify-between items-start mb-1">
+              <div className="flex-1">
+                <h3 className="font-bold text-gray-900">{item.institution}</h3>
+                <p className="text-sm text-gray-700 font-medium">
+                  {item.degree} in {item.field}
+                </p>
+              </div>
+              <div className="text-right text-sm text-purple-600 font-medium ml-4">
+                <p>
+                  {item.start_date} - {item.current ? 'Present' : item.end_date}
+                </p>
+                {item.gpa && <p className="text-gray-600">GPA: {item.gpa}</p>}
+              </div>
+            </div>
+            {item.achievements && item.achievements.length > 0 && (
+              <ul className="mt-2 space-y-1 text-sm text-gray-700">
+                {item.achievements.map((achievement, idx) => (
+                  <li key={idx} className="flex items-start">
+                    <span className="text-purple-600 mr-2">▸</span>
+                    <span>{achievement}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderExperience = (items: Experience[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-4">
+        {items.map((item) => (
+          <div key={item.id} className="border-l-2 border-purple-400 pl-4">
+            <div className="flex justify-between items-start mb-1">
+              <div className="flex-1">
+                <h3 className="font-bold text-gray-900">{item.position}</h3>
+                <p className="text-sm text-gray-700 font-medium">{item.company} • {item.location}</p>
+              </div>
+              <p className="text-sm text-purple-600 font-medium ml-4">
+                {item.start_date} - {item.current ? 'Present' : item.end_date}
+              </p>
+            </div>
+            {item.description && (
+              <p className="mt-2 text-sm text-gray-700">{item.description}</p>
+            )}
+            {item.achievements && item.achievements.length > 0 && (
+              <ul className="mt-2 space-y-1 text-sm text-gray-700">
+                {item.achievements.map((achievement, idx) => (
+                  <li key={idx} className="flex items-start">
+                    <span className="text-purple-600 mr-2">▸</span>
+                    <span>{achievement}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderProjects = (items: Project[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-4">
+        {items.map((item) => (
+          <div key={item.id} className="border-l-2 border-purple-400 pl-4">
+            <div className="flex justify-between items-start mb-1">
+              <h3 className="font-bold text-gray-900 flex-1">{item.name}</h3>
+              {(item.start_date || item.end_date) && (
+                <p className="text-sm text-purple-600 font-medium ml-4">
+                  {item.start_date} {item.end_date && `- ${item.end_date}`}
+                </p>
+              )}
+            </div>
+            {item.description && (
+              <p className="mt-1 text-sm text-gray-700">{item.description}</p>
+            )}
+            {item.technologies && item.technologies.length > 0 && (
+              <div className="mt-2 flex flex-wrap gap-2">
+                {item.technologies.map((tech, idx) => (
+                  <span
+                    key={idx}
+                    className="px-2 py-1 text-xs bg-gradient-to-r from-purple-100 to-indigo-100 text-purple-700 rounded font-medium"
+                  >
+                    {tech}
+                  </span>
+                ))}
+              </div>
+            )}
+            {(item.url || item.github) && (
+              <div className="mt-2 flex gap-3 text-xs text-gray-600">
+                {item.url && <span className="truncate">🔗 {item.url}</span>}
+                {item.github && <span className="truncate">⚡ {item.github}</span>}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderSkills = (items: Skill[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-3">
+        {items.map((skill, idx) => (
+          <div key={idx}>
+            <h3 className="font-bold text-sm text-purple-700 mb-2">{skill.category}</h3>
+            <div className="flex flex-wrap gap-2">
+              {skill.items.map((item, itemIdx) => (
+                <span
+                  key={itemIdx}
+                  className="px-2 py-1 text-xs bg-gradient-to-r from-purple-100 to-indigo-100 text-purple-700 rounded font-medium"
+                >
+                  {item}
+                </span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCertifications = (items: Certification[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-3">
+        {items.map((item) => (
+          <div key={item.id} className="border-l-2 border-purple-400 pl-4">
+            <div className="flex justify-between items-start">
+              <div className="flex-1">
+                <h3 className="font-bold text-gray-900 text-sm">{item.name}</h3>
+                <p className="text-sm text-gray-700">{item.issuer}</p>
+              </div>
+              <p className="text-sm text-purple-600 font-medium ml-4">{item.date}</p>
+            </div>
+            {item.credential_id && (
+              <p className="text-xs text-gray-600 mt-1">ID: {item.credential_id}</p>
+            )}
+            {item.url && (
+              <p className="text-xs text-gray-600 mt-1 truncate">🔗 {item.url}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderAwards = (items: Award[]) => {
+    if (!items || items.length === 0) return null;
+    return (
+      <div className="space-y-3">
+        {items.map((item) => (
+          <div key={item.id} className="border-l-2 border-purple-400 pl-4">
+            <div className="flex justify-between items-start">
+              <div className="flex-1">
+                <h3 className="font-bold text-gray-900 text-sm">{item.title}</h3>
+                <p className="text-sm text-gray-700">{item.issuer}</p>
+              </div>
+              <p className="text-sm text-purple-600 font-medium ml-4">{item.date}</p>
+            </div>
+            {item.description && (
+              <p className="text-sm text-gray-700 mt-1">{item.description}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderCustom = (content: CustomContent) => {
+    if (!content.content) return null;
+    return (
+      <div className="border-l-2 border-purple-400 pl-4">
+        <p className="text-sm text-gray-700 whitespace-pre-wrap">{content.content}</p>
+      </div>
+    );
+  };
+
+  return (
+    <div 
+      className="min-h-full"
+      style={{
+        ...styleVars,
+        fontFamily: styling.font_family,
+        fontSize: `${styling.font_size_body}pt`,
+        lineHeight: styling.line_height,
+        color: styling.color_text,
+      }}
+    >
+      {/* Header with Personal Info */}
+      {personalInfo && renderPersonalInfo(personalInfo)}
+
+      {/* Two-column layout: Main content + Sidebar */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Main Content - 2/3 width */}
+        <div className="md:col-span-2 space-y-6">
+          {mainSections.map((section) => (
+            <div key={section.id} className="animate-fade-in">
+              <div className="mb-3">
+                <h2 className="text-lg font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent uppercase tracking-wide">
+                  {section.title}
+                </h2>
+                <div className="h-0.5 w-full bg-gradient-to-r from-purple-600 via-indigo-600 to-transparent mt-1"></div>
+              </div>
+              {renderSectionContent(section)}
+            </div>
+          ))}
+
+          {/* Empty state for main content */}
+          {mainSections.length === 0 && !skillsSection && (
+            <div className="text-center py-12">
+              <p className="text-gray-500">
+                Add sections to your resume to see them here
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Sidebar - 1/3 width for Skills and Contact */}
+        {skillsSection && (
+          <div className="md:col-span-1 space-y-6">
+            {/* Skills Section in Sidebar */}
+            <div className="bg-gradient-to-br from-purple-50 to-indigo-50 p-4 rounded-lg border border-purple-200">
+              <div className="mb-3">
+                <h2 className="text-lg font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent uppercase tracking-wide">
+                  {skillsSection.title}
+                </h2>
+                <div className="h-0.5 w-full bg-gradient-to-r from-purple-600 via-indigo-600 to-transparent mt-1"></div>
+              </div>
+              {renderSkills(skills || [])}
+            </div>
+
+            {/* Contact Info Card in Sidebar */}
+            {personalInfo && (personalInfo.email || personalInfo.phone || personalInfo.location) && (
+              <div className="bg-gradient-to-br from-purple-50 to-indigo-50 p-4 rounded-lg border border-purple-200">
+                <div className="mb-3">
+                  <h2 className="text-lg font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent uppercase tracking-wide">
+                    Contact
+                  </h2>
+                  <div className="h-0.5 w-full bg-gradient-to-r from-purple-600 via-indigo-600 to-transparent mt-1"></div>
+                </div>
+                <div className="space-y-2 text-sm">
+                  {personalInfo.email && (
+                    <div className="flex items-start gap-2">
+                      <span className="text-purple-600 mt-0.5">✉</span>
+                      <span className="text-gray-700 break-all">{personalInfo.email}</span>
+                    </div>
+                  )}
+                  {personalInfo.phone && (
+                    <div className="flex items-start gap-2">
+                      <span className="text-purple-600 mt-0.5">☎</span>
+                      <span className="text-gray-700">{personalInfo.phone}</span>
+                    </div>
+                  )}
+                  {personalInfo.location && (
+                    <div className="flex items-start gap-2">
+                      <span className="text-purple-600 mt-0.5">📍</span>
+                      <span className="text-gray-700">{personalInfo.location}</span>
+                    </div>
+                  )}
+                  {personalInfo.website && (
+                    <div className="flex items-start gap-2">
+                      <span className="text-purple-600 mt-0.5">🌐</span>
+                      <span className="text-gray-700 break-all text-xs">{personalInfo.website}</span>
+                    </div>
+                  )}
+                  {personalInfo.linkedin && (
+                    <div className="flex items-start gap-2">
+                      <span className="text-purple-600 mt-0.5">in</span>
+                      <span className="text-gray-700 break-all text-xs">{personalInfo.linkedin}</span>
+                    </div>
+                  )}
+                  {personalInfo.github && (
+                    <div className="flex items-start gap-2">
+                      <span className="text-purple-600 mt-0.5">⚡</span>
+                      <span className="text-gray-700 break-all text-xs">{personalInfo.github}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/resume/templates/TemplateRenderer.tsx b/components/resume/templates/TemplateRenderer.tsx
new file mode 100644
index 000000000..7d5178e7e
--- /dev/null
+++ b/components/resume/templates/TemplateRenderer.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { Resume } from '@/types/resume';
+import { useEffect, useState, lazy, Suspense } from 'react';
+
+// Lazy load template components for better performance
+const ModernTemplate = lazy(() => import('./ModernTemplate').then(m => ({ default: m.ModernTemplate })));
+const ClassicTemplate = lazy(() => import('./ClassicTemplate').then(m => ({ default: m.ClassicTemplate })));
+const MinimalTemplate = lazy(() => import('./MinimalTemplate').then(m => ({ default: m.MinimalTemplate })));
+const CreativeTemplate = lazy(() => import('./CreativeTemplate').then(m => ({ default: m.CreativeTemplate })));
+const ExecutiveTemplate = lazy(() => import('./ExecutiveTemplate').then(m => ({ default: m.ExecutiveTemplate })));
+
+// Template registry mapping template IDs to their lazy-loaded components
+const TEMPLATES: Record<string, React.ComponentType<{ resume: Resume }>> = {
+  modern: ModernTemplate,
+  classic: ClassicTemplate,
+  minimal: MinimalTemplate,
+  creative: CreativeTemplate,
+  executive: ExecutiveTemplate,
+};
+
+// Default template if none is specified or template ID is invalid
+const DEFAULT_TEMPLATE = 'modern';
+
+interface TemplateRendererProps {
+  resume: Resume | null;
+}
+
+export function TemplateRenderer({ resume }: TemplateRendererProps) {
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [currentTemplateId, setCurrentTemplateId] = useState<string>(DEFAULT_TEMPLATE);
+
+  // Handle template switching with animation
+  useEffect(() => {
+    if (!resume) return;
+
+    const newTemplateId = resume.template_id || DEFAULT_TEMPLATE;
+    
+    // If template changed, trigger transition animation
+    if (newTemplateId !== currentTemplateId) {
+      setIsTransitioning(true);
+      
+      // Update template after brief fade out
+      const timeoutId = setTimeout(() => {
+        setCurrentTemplateId(newTemplateId);
+        setIsTransitioning(false);
+      }, 150);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [resume, currentTemplateId]);
+
+  // Return null if no resume is provided
+  if (!resume) {
+    return null;
+  }
+
+  // Get the template component, fallback to default if not found
+  const TemplateComponent = TEMPLATES[currentTemplateId] || TEMPLATES[DEFAULT_TEMPLATE];
+
+  // Validate that we have a valid template component
+  if (!TemplateComponent) {
+    console.error(`Template "${currentTemplateId}" not found, using default template`);
+    const DefaultTemplate = TEMPLATES[DEFAULT_TEMPLATE];
+    return <DefaultTemplate resume={resume} />;
+  }
+
+  return (
+    <Suspense fallback={
+      <div className="flex items-center justify-center h-full">
+        <div className="animate-pulse text-muted-foreground">Loading template...</div>
+      </div>
+    }>
+      <div
+        className={`transition-opacity duration-300 ${
+          isTransitioning ? 'opacity-0' : 'opacity-100'
+        }`}
+      >
+        <TemplateComponent resume={resume} />
+      </div>
+    </Suspense>
+  );
+}
diff --git a/components/resume/templates/index.ts b/components/resume/templates/index.ts
new file mode 100644
index 000000000..fcde349c8
--- /dev/null
+++ b/components/resume/templates/index.ts
@@ -0,0 +1,6 @@
+export { TemplateRenderer } from './TemplateRenderer';
+export { ModernTemplate } from './ModernTemplate';
+export { ClassicTemplate } from './ClassicTemplate';
+export { MinimalTemplate } from './MinimalTemplate';
+export { CreativeTemplate } from './CreativeTemplate';
+export { ExecutiveTemplate } from './ExecutiveTemplate';
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100644
index 000000000..69e522319
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 000000000..ab19d576f
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/contexts/ResumeContext.tsx b/contexts/ResumeContext.tsx
new file mode 100644
index 000000000..cadf35411
--- /dev/null
+++ b/contexts/ResumeContext.tsx
@@ -0,0 +1,872 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
+import { createClient } from '@/lib/supabase/client';
+import {
+  Resume,
+  ResumeSection,
+  SectionType,
+  SectionContent,
+  ResumeStyling,
+  ResumeMetadata,
+  ResumeError,
+  ResumeErrorCode,
+  DEFAULT_STYLING,
+  DEFAULT_METADATA,
+  DEFAULT_PERSONAL_INFO,
+  SECTION_TYPES,
+  DeepPartial,
+  ResumeInsert,
+  ResumeUpdate,
+} from '@/types/resume';
+import { Profile } from '@/types/profile';
+import { ResumeImportService, ImportResult } from '@/lib/services/resume-import';
+import { updateResumeMetadata } from '@/lib/services/resume-metadata';
+import { ResumeScoringService, ScoringResult } from '@/lib/services/resume-scoring';
+import { saveToLocalStorage, loadFromLocalStorage, removeFromLocalStorage } from '@/lib/storage/offline-storage';
+
+// Context Type Definition
+export interface ResumeContextType {
+  // State
+  resume: Resume | null;
+  resumes: Resume[];
+  loading: boolean;
+  saving: boolean;
+  saveStatus: 'idle' | 'saving' | 'saved' | 'error';
+  error: string | null;
+  announcement: string;
+  lastAddedSectionId: string | null;
+
+  // Resume CRUD
+  createResume: (title: string, autoFill?: boolean) => Promise<Resume>;
+  loadResume: (id: string) => Promise<void>;
+  saveResume: () => Promise<void>;
+  deleteResume: (id: string) => Promise<void>;
+  duplicateResume: (id: string, newTitle?: string) => Promise<Resume>;
+  updateResumeTitle: (title: string) => void;
+
+  // Section Management
+  addSection: (type: SectionType) => void;
+  removeSection: (sectionId: string) => void;
+  reorderSections: (sections: ResumeSection[]) => void;
+  updateSection: (sectionId: string, content: Partial<SectionContent>) => void;
+  toggleSectionVisibility: (sectionId: string) => void;
+
+  // Styling
+  updateStyling: (styling: Partial<ResumeStyling>) => void;
+  applyTemplate: (templateId: string) => void;
+
+  // Metadata
+  updateMetadata: (metadata: Partial<ResumeMetadata>) => void;
+
+  // Auto-fill
+  autoFillFromProfile: (profile: Profile) => Promise<void>;
+
+  // Import
+  importFromJSON: (jsonString: string) => Promise<ImportResult>;
+
+  // Utilities
+  calculateScore: () => number;
+  getDetailedScore: () => ScoringResult;
+  clearError: () => void;
+  refreshResumes: () => Promise<void>;
+  setAutoSaveEnabled: (enabled: boolean) => void;
+}
+
+// Create Context
+const ResumeContext = createContext<ResumeContextType | undefined>(undefined);
+
+// Provider Props
+interface ResumeProviderProps {
+  children: React.ReactNode;
+  initialResumes?: Resume[];
+  userProfile?: Profile | null;
+}
+
+// Helper function to generate unique IDs
+const generateId = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+// Helper function to create default section
+const createDefaultSection = (type: SectionType, order: number): ResumeSection => {
+  const sectionInfo = SECTION_TYPES[type];
+  let defaultContent: SectionContent;
+
+  switch (type) {
+    case 'personal_info':
+      defaultContent = DEFAULT_PERSONAL_INFO;
+      break;
+    case 'education':
+    case 'experience':
+    case 'projects':
+    case 'certifications':
+    case 'awards':
+      defaultContent = [];
+      break;
+    case 'skills':
+      defaultContent = [];
+      break;
+    case 'custom':
+      defaultContent = { title: '', content: '' };
+      break;
+    default:
+      defaultContent = [];
+  }
+
+  return {
+    id: generateId(),
+    type,
+    title: sectionInfo.defaultTitle,
+    order,
+    visible: true,
+    content: defaultContent,
+  };
+};
+
+// Provider Component
+export function ResumeProvider({ children, initialResumes = [], userProfile }: ResumeProviderProps) {
+  const [resume, setResume] = useState<Resume | null>(null);
+  const [resumes, setResumes] = useState<Resume[]>(initialResumes);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+  const [error, setError] = useState<string | null>(null);
+  const [announcement, setAnnouncement] = useState<string>('');
+  const [lastAddedSectionId, setLastAddedSectionId] = useState<string | null>(null);
+
+  const supabase = createClient();
+  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const autoSaveEnabledRef = useRef(true);
+  const lastSavedResumeRef = useRef<string>('');
+  const saveQueueRef = useRef<Resume[]>([]);
+  const isSavingRef = useRef(false);
+  const optimisticStateRef = useRef<Resume | null>(null);
+
+  // Create a new resume
+  const createResume = useCallback(
+    async (title: string, autoFill = false): Promise<Resume> => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          throw new ResumeError('User not authenticated', ResumeErrorCode.UNAUTHORIZED);
+        }
+
+        // Create default sections
+        const defaultSections: ResumeSection[] = [
+          createDefaultSection('personal_info', 0),
+          createDefaultSection('education', 1),
+          createDefaultSection('experience', 2),
+          createDefaultSection('skills', 3),
+        ];
+
+        const newResume: ResumeInsert = {
+          user_id: user.id,
+          title: title || 'Untitled Resume',
+          template_id: 'modern',
+          sections: defaultSections as unknown,
+          styling: DEFAULT_STYLING as unknown,
+          metadata: DEFAULT_METADATA as unknown,
+        };
+
+        const { data, error: insertError } = await supabase
+          .from('resumes')
+          .insert(newResume)
+          .select()
+          .single();
+
+        if (insertError) {
+          throw new ResumeError('Failed to create resume', ResumeErrorCode.SAVE_FAILED, insertError);
+        }
+
+        const createdResume: Resume = {
+          ...data,
+          sections: defaultSections,
+          styling: DEFAULT_STYLING,
+          metadata: DEFAULT_METADATA,
+        };
+
+        setResume(createdResume);
+        setResumes((prev) => [createdResume, ...prev]);
+
+        // Auto-fill if requested and profile is available
+        if (autoFill && userProfile) {
+          await autoFillFromProfile(userProfile);
+        }
+
+        return createdResume;
+      } catch (err) {
+        const errorMessage = err instanceof ResumeError ? err.message : 'Failed to create resume';
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [supabase, userProfile]
+  );
+
+  // Load a resume by ID
+  const loadResume = useCallback(
+    async (id: string): Promise<void> => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const { data, error: fetchError } = await supabase
+          .from('resumes')
+          .select('*')
+          .eq('id', id)
+          .single();
+
+        if (fetchError) {
+          throw new ResumeError('Failed to load resume', ResumeErrorCode.LOAD_FAILED, fetchError);
+        }
+
+        if (!data) {
+          throw new ResumeError('Resume not found', ResumeErrorCode.NOT_FOUND);
+        }
+
+        const loadedResume: Resume = {
+          ...data,
+          sections: (data.sections as ResumeSection[]) || [],
+          styling: (data.styling as ResumeStyling) || DEFAULT_STYLING,
+          metadata: (data.metadata as ResumeMetadata) || DEFAULT_METADATA,
+        };
+
+        setResume(loadedResume);
+      } catch (err) {
+        const errorMessage = err instanceof ResumeError ? err.message : 'Failed to load resume';
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [supabase]
+  );
+
+  // Save the current resume
+  const saveResume = useCallback(async (): Promise<void> => {
+    if (!resume) return;
+
+    try {
+      setSaving(true);
+      setSaveStatus('saving');
+      setError(null);
+
+      // Update metadata before saving
+      const updatedResume = updateResumeMetadata(resume);
+      setResume(updatedResume);
+
+      // Save to local storage first (offline fallback)
+      saveToLocalStorage(updatedResume);
+
+      const updateData: ResumeUpdate = {
+        title: updatedResume.title,
+        template_id: updatedResume.template_id,
+        sections: updatedResume.sections as unknown,
+        styling: updatedResume.styling as unknown,
+        metadata: updatedResume.metadata as unknown,
+      };
+
+      const { error: updateError } = await supabase
+        .from('resumes')
+        .update(updateData)
+        .eq('id', updatedResume.id);
+
+      if (updateError) {
+        throw new ResumeError('Failed to save resume', ResumeErrorCode.SAVE_FAILED, updateError);
+      }
+
+      // Remove from local storage after successful save
+      removeFromLocalStorage(updatedResume.id);
+
+      setSaveStatus('saved');
+      setAnnouncement('Resume saved successfully');
+
+      // Reset to idle after 2 seconds
+      setTimeout(() => {
+        setSaveStatus('idle');
+      }, 2000);
+
+      // Update resumes list
+      setResumes((prev) =>
+        prev.map((r) => (r.id === updatedResume.id ? { ...updatedResume, updated_at: new Date().toISOString() } : r))
+      );
+    } catch (err) {
+      const errorMessage = err instanceof ResumeError ? err.message : 'Failed to save resume';
+      setError(errorMessage);
+      setSaveStatus('error');
+      
+      // Keep in local storage if save failed
+      if (resume) {
+        saveToLocalStorage(resume);
+      }
+      
+      throw err;
+    } finally {
+      setSaving(false);
+    }
+  }, [resume, supabase]);
+
+  // Delete a resume
+  const deleteResume = useCallback(
+    async (id: string): Promise<void> => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const { error: deleteError } = await supabase.from('resumes').delete().eq('id', id);
+
+        if (deleteError) {
+          throw new ResumeError('Failed to delete resume', ResumeErrorCode.SAVE_FAILED, deleteError);
+        }
+
+        setResumes((prev) => prev.filter((r) => r.id !== id));
+
+        if (resume?.id === id) {
+          setResume(null);
+        }
+      } catch (err) {
+        const errorMessage = err instanceof ResumeError ? err.message : 'Failed to delete resume';
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [resume, supabase]
+  );
+
+  // Duplicate a resume
+  const duplicateResume = useCallback(
+    async (id: string, newTitle?: string): Promise<Resume> => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          throw new ResumeError('User not authenticated', ResumeErrorCode.UNAUTHORIZED);
+        }
+
+        // Find the resume to duplicate
+        const originalResume = resumes.find((r) => r.id === id);
+        if (!originalResume) {
+          throw new ResumeError('Resume not found', ResumeErrorCode.NOT_FOUND);
+        }
+
+        const duplicateData: ResumeInsert = {
+          user_id: user.id,
+          title: newTitle || `${originalResume.title} (Copy)`,
+          template_id: originalResume.template_id,
+          sections: originalResume.sections as unknown,
+          styling: originalResume.styling as unknown,
+          metadata: { ...originalResume.metadata, export_count: 0, last_exported: undefined } as unknown,
+        };
+
+        const { data, error: insertError } = await supabase
+          .from('resumes')
+          .insert(duplicateData)
+          .select()
+          .single();
+
+        if (insertError) {
+          throw new ResumeError('Failed to duplicate resume', ResumeErrorCode.SAVE_FAILED, insertError);
+        }
+
+        const duplicatedResume: Resume = {
+          ...data,
+          sections: originalResume.sections,
+          styling: originalResume.styling,
+          metadata: { ...originalResume.metadata, export_count: 0, last_exported: undefined },
+        };
+
+        setResumes((prev) => [duplicatedResume, ...prev]);
+
+        return duplicatedResume;
+      } catch (err) {
+        const errorMessage = err instanceof ResumeError ? err.message : 'Failed to duplicate resume';
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [resumes, supabase]
+  );
+
+  // Update resume title with optimistic update
+  const updateResumeTitle = useCallback((title: string) => {
+    setResume((prev) => {
+      if (!prev) return null;
+      
+      // Store previous state for potential rollback
+      optimisticStateRef.current = prev;
+      
+      // Apply optimistic update immediately
+      return { ...prev, title };
+    });
+  }, []);
+
+  // Add a section with optimistic update
+  const addSection = useCallback((type: SectionType) => {
+    setResume((prev) => {
+      if (!prev) return null;
+
+      // Store previous state for potential rollback
+      optimisticStateRef.current = prev;
+
+      const newSection = createDefaultSection(type, prev.sections.length);
+      const sectionInfo = SECTION_TYPES[type];
+      setAnnouncement(`${sectionInfo.defaultTitle} section added`);
+      setLastAddedSectionId(newSection.id);
+      
+      // Clear the lastAddedSectionId after a short delay
+      setTimeout(() => setLastAddedSectionId(null), 500);
+      
+      // Apply optimistic update immediately
+      return {
+        ...prev,
+        sections: [...prev.sections, newSection],
+      };
+    });
+  }, []);
+
+  // Remove a section with optimistic update
+  const removeSection = useCallback((sectionId: string) => {
+    setResume((prev) => {
+      if (!prev) return null;
+
+      // Store previous state for potential rollback
+      optimisticStateRef.current = prev;
+
+      const sectionToRemove = prev.sections.find((s) => s.id === sectionId);
+      if (sectionToRemove) {
+        setAnnouncement(`${sectionToRemove.title} section removed`);
+      }
+
+      const filteredSections = prev.sections.filter((s) => s.id !== sectionId);
+      // Reorder remaining sections
+      const reorderedSections = filteredSections.map((s, index) => ({ ...s, order: index }));
+
+      // Apply optimistic update immediately
+      return {
+        ...prev,
+        sections: reorderedSections,
+      };
+    });
+  }, []);
+
+  // Reorder sections with optimistic update
+  const reorderSections = useCallback((sections: ResumeSection[]) => {
+    setResume((prev) => {
+      if (!prev) return null;
+
+      // Store previous state for potential rollback
+      optimisticStateRef.current = prev;
+
+      // Update order property
+      const reorderedSections = sections.map((s, index) => ({ ...s, order: index }));
+      setAnnouncement('Section order updated');
+
+      // Apply optimistic update immediately
+      return {
+        ...prev,
+        sections: reorderedSections,
+      };
+    });
+  }, []);
+
+  // Update section content with optimistic update
+  const updateSection = useCallback((sectionId: string, content: Partial<SectionContent>) => {
+    setResume((prev) => {
+      if (!prev) return null;
+
+      // Store previous state for potential rollback
+      optimisticStateRef.current = prev;
+
+      // Apply optimistic update immediately
+      return {
+        ...prev,
+        sections: prev.sections.map((s) =>
+          s.id === sectionId ? { ...s, content: { ...s.content, ...content } as SectionContent } : s
+        ),
+      };
+    });
+  }, []);
+
+  // Toggle section visibility
+  const toggleSectionVisibility = useCallback((sectionId: string) => {
+    setResume((prev) => {
+      if (!prev) return null;
+
+      const section = prev.sections.find((s) => s.id === sectionId);
+      if (section) {
+        setAnnouncement(`${section.title} section ${section.visible ? 'hidden' : 'shown'}`);
+      }
+
+      return {
+        ...prev,
+        sections: prev.sections.map((s) => (s.id === sectionId ? { ...s, visible: !s.visible } : s)),
+      };
+    });
+  }, []);
+
+  // Update styling with optimistic update
+  const updateStyling = useCallback((styling: Partial<ResumeStyling>) => {
+    setResume((prev) => {
+      if (!prev) return null;
+
+      // Store previous state for potential rollback
+      optimisticStateRef.current = prev;
+
+      // Apply optimistic update immediately
+      return {
+        ...prev,
+        styling: { ...prev.styling, ...styling },
+      };
+    });
+  }, []);
+
+  // Apply template with optimistic update
+  const applyTemplate = useCallback((templateId: string) => {
+    setResume((prev) => {
+      if (!prev) return null;
+
+      // Store previous state for potential rollback
+      optimisticStateRef.current = prev;
+
+      // Apply optimistic update immediately
+      return {
+        ...prev,
+        template_id: templateId,
+      };
+    });
+  }, []);
+
+  // Update metadata
+  const updateMetadata = useCallback((metadata: Partial<ResumeMetadata>) => {
+    setResume((prev) => {
+      if (!prev) return null;
+
+      return {
+        ...prev,
+        metadata: { ...prev.metadata, ...metadata },
+      };
+    });
+  }, []);
+
+  // Auto-fill from profile
+  const autoFillFromProfile = useCallback(
+    async (profile: Profile): Promise<void> => {
+      if (!resume) return;
+
+      try {
+        setError(null);
+
+        // Find personal info section
+        const personalInfoSection = resume.sections.find((s) => s.type === 'personal_info');
+        if (!personalInfoSection) return;
+
+        // Get user email from auth
+        const { data: { user } } = await supabase.auth.getUser();
+        const email = user?.email || '';
+
+        // Map profile data to personal info
+        const updatedPersonalInfo = {
+          full_name: `${profile.first_name || ''} ${profile.last_name || ''}`.trim(),
+          email: email,
+          phone: profile.phone || '',
+          location: profile.location || '',
+          linkedin: profile.linkedin_url || '',
+          github: profile.github_url || '',
+          website: profile.twitter_url || '',
+          summary: profile.bio || '',
+        };
+
+        updateSection(personalInfoSection.id, updatedPersonalInfo);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to auto-fill from profile';
+        setError(errorMessage);
+      }
+    },
+    [resume, updateSection, supabase]
+  );
+
+  // Import from JSON
+  const importFromJSON = useCallback(
+    async (jsonString: string): Promise<ImportResult> => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          throw new ResumeError('User not authenticated', ResumeErrorCode.UNAUTHORIZED);
+        }
+
+        // Import and validate data
+        const result = await ResumeImportService.importFromJSON(jsonString, user.id);
+
+        if (!result.success || !result.resume) {
+          return result;
+        }
+
+        // Create new resume with imported data
+        const importedResume: ResumeInsert = {
+          user_id: user.id,
+          title: result.resume.title || 'Imported Resume',
+          template_id: result.resume.template_id || 'modern',
+          sections: result.resume.sections as unknown,
+          styling: result.resume.styling as unknown,
+          metadata: result.resume.metadata as unknown,
+        };
+
+        const { data, error: insertError } = await supabase
+          .from('resumes')
+          .insert(importedResume)
+          .select()
+          .single();
+
+        if (insertError) {
+          throw new ResumeError('Failed to save imported resume', ResumeErrorCode.SAVE_FAILED, insertError);
+        }
+
+        const createdResume: Resume = {
+          ...data,
+          sections: result.resume.sections || [],
+          styling: result.resume.styling || DEFAULT_STYLING,
+          metadata: result.resume.metadata || DEFAULT_METADATA,
+        };
+
+        setResume(createdResume);
+        setResumes((prev) => [createdResume, ...prev]);
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof ResumeError ? err.message : 'Failed to import resume';
+        setError(errorMessage);
+        return {
+          success: false,
+          errors: [errorMessage],
+          warnings: [],
+          fieldsPopulated: 0,
+        };
+      } finally {
+        setLoading(false);
+      }
+    },
+    [supabase]
+  );
+
+  // Calculate completeness score (simple version)
+  const calculateScore = useCallback((): number => {
+    return ResumeScoringService.calculateScore(resume).totalScore;
+  }, [resume]);
+
+  // Get detailed scoring result
+  const getDetailedScore = useCallback((): ScoringResult => {
+    return ResumeScoringService.calculateScore(resume);
+  }, [resume]);
+
+  // Clear error
+  const clearError = useCallback(() => {
+    setError(null);
+    setSaveStatus('idle');
+  }, []);
+
+  // Refresh resumes list
+  const refreshResumes = useCallback(async (): Promise<void> => {
+    try {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) return;
+
+      const { data, error: fetchError } = await supabase
+        .from('resumes')
+        .select('*')
+        .eq('user_id', user.id)
+        .order('updated_at', { ascending: false });
+
+      if (fetchError) {
+        throw new ResumeError('Failed to refresh resumes', ResumeErrorCode.LOAD_FAILED, fetchError);
+      }
+
+      const loadedResumes: Resume[] = (data || []).map((r) => ({
+        ...r,
+        sections: (r.sections as ResumeSection[]) || [],
+        styling: (r.styling as ResumeStyling) || DEFAULT_STYLING,
+        metadata: (r.metadata as ResumeMetadata) || DEFAULT_METADATA,
+      }));
+
+      setResumes(loadedResumes);
+    } catch (err) {
+      console.error('Failed to refresh resumes:', err);
+    }
+  }, [supabase]);
+
+  // Enable/disable auto-save
+  const setAutoSaveEnabled = useCallback((enabled: boolean) => {
+    autoSaveEnabledRef.current = enabled;
+    if (!enabled && saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+      saveTimeoutRef.current = null;
+    }
+  }, []);
+
+  // Process save queue
+  const processSaveQueue = useCallback(async () => {
+    if (isSavingRef.current || saveQueueRef.current.length === 0) return;
+
+    isSavingRef.current = true;
+    
+    // Get the latest resume from the queue (discard intermediate states)
+    const latestResume = saveQueueRef.current[saveQueueRef.current.length - 1];
+    saveQueueRef.current = [];
+
+    try {
+      setSaving(true);
+      setSaveStatus('saving');
+      setError(null);
+
+      // Update metadata before saving
+      const updatedResume = updateResumeMetadata(latestResume);
+
+      // Save to local storage first (offline fallback)
+      saveToLocalStorage(updatedResume);
+
+      const updateData: ResumeUpdate = {
+        title: updatedResume.title,
+        template_id: updatedResume.template_id,
+        sections: updatedResume.sections as unknown,
+        styling: updatedResume.styling as unknown,
+        metadata: updatedResume.metadata as unknown,
+      };
+
+      const { error: updateError } = await supabase
+        .from('resumes')
+        .update(updateData)
+        .eq('id', updatedResume.id);
+
+      if (updateError) {
+        throw new ResumeError('Failed to save resume', ResumeErrorCode.SAVE_FAILED, updateError);
+      }
+
+      // Remove from local storage after successful save
+      removeFromLocalStorage(updatedResume.id);
+
+      setSaveStatus('saved');
+      setAnnouncement('Resume saved successfully');
+      lastSavedResumeRef.current = JSON.stringify(updatedResume);
+
+      // Reset to idle after 2 seconds
+      setTimeout(() => {
+        setSaveStatus('idle');
+      }, 2000);
+
+      // Update resumes list
+      setResumes((prev) =>
+        prev.map((r) => (r.id === updatedResume.id ? { ...updatedResume, updated_at: new Date().toISOString() } : r))
+      );
+    } catch (err) {
+      const errorMessage = err instanceof ResumeError ? err.message : 'Failed to save resume';
+      setError(errorMessage);
+      setSaveStatus('error');
+      
+      // Rollback to previous state if available
+      if (optimisticStateRef.current) {
+        setResume(optimisticStateRef.current);
+        setAnnouncement('Changes reverted due to save error');
+      }
+      
+      // Keep in local storage if save failed
+      if (latestResume) {
+        saveToLocalStorage(latestResume);
+      }
+    } finally {
+      setSaving(false);
+      isSavingRef.current = false;
+      
+      // Process any new items that were added to the queue while saving
+      if (saveQueueRef.current.length > 0) {
+        processSaveQueue();
+      }
+    }
+  }, [supabase]);
+
+  // Debounced auto-save effect with save queue
+  useEffect(() => {
+    if (!resume || !autoSaveEnabledRef.current) return;
+
+    // Create a snapshot of the current resume
+    const currentSnapshot = JSON.stringify(resume);
+
+    // Skip if nothing changed
+    if (currentSnapshot === lastSavedResumeRef.current) return;
+
+    // Add to save queue
+    saveQueueRef.current.push(resume);
+
+    // Clear existing timeout
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+    }
+
+    // Set new timeout for auto-save (2 seconds)
+    saveTimeoutRef.current = setTimeout(() => {
+      processSaveQueue();
+    }, 2000);
+
+    // Cleanup on unmount
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
+  }, [resume, processSaveQueue]);
+
+  const contextValue: ResumeContextType = {
+    resume,
+    resumes,
+    loading,
+    saving,
+    saveStatus,
+    error,
+    announcement,
+    lastAddedSectionId,
+    createResume,
+    loadResume,
+    saveResume,
+    deleteResume,
+    duplicateResume,
+    updateResumeTitle,
+    addSection,
+    removeSection,
+    reorderSections,
+    updateSection,
+    toggleSectionVisibility,
+    updateStyling,
+    applyTemplate,
+    updateMetadata,
+    autoFillFromProfile,
+    importFromJSON,
+    calculateScore,
+    getDetailedScore,
+    clearError,
+    refreshResumes,
+    setAutoSaveEnabled,
+  };
+
+  return <ResumeContext.Provider value={contextValue}>{children}</ResumeContext.Provider>;
+}
+
+// Custom hook to use the Resume Context
+export function useResume() {
+  const context = useContext(ResumeContext);
+  if (context === undefined) {
+    throw new Error('useResume must be used within a ResumeProvider');
+  }
+  return context;
+}
diff --git a/hooks/useFocusManagement.ts b/hooks/useFocusManagement.ts
new file mode 100644
index 000000000..86c8c50ff
--- /dev/null
+++ b/hooks/useFocusManagement.ts
@@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Hook to auto-focus the first input field in a section when it's added
+ */
+export function useAutoFocus(shouldFocus: boolean = true) {
+  const firstInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (shouldFocus && firstInputRef.current) {
+      // Small delay to ensure DOM is ready
+      const timer = setTimeout(() => {
+        firstInputRef.current?.focus();
+      }, 100);
+
+      return () => clearTimeout(timer);
+    }
+  }, [shouldFocus]);
+
+  return firstInputRef;
+}
+
+/**
+ * Hook to trap focus within a modal or dialog
+ */
+export function useFocusTrap(isActive: boolean = true) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isActive || !containerRef.current) return;
+
+    const container = containerRef.current;
+    const focusableElements = container.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    // Focus first element on mount
+    firstElement?.focus();
+
+    const handleTabKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+
+      if (e.shiftKey) {
+        // Shift + Tab
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement?.focus();
+        }
+      } else {
+        // Tab
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement?.focus();
+        }
+      }
+    };
+
+    container.addEventListener('keydown', handleTabKey);
+
+    return () => {
+      container.removeEventListener('keydown', handleTabKey);
+    };
+  }, [isActive]);
+
+  return containerRef;
+}
+
+/**
+ * Hook to add visible focus indicators
+ */
+export function useFocusVisible() {
+  useEffect(() => {
+    // Add focus-visible class to body for keyboard navigation
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Tab') {
+        document.body.classList.add('keyboard-navigation');
+      }
+    };
+
+    const handleMouseDown = () => {
+      document.body.classList.remove('keyboard-navigation');
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('mousedown', handleMouseDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('mousedown', handleMouseDown);
+    };
+  }, []);
+}
diff --git a/hooks/useKeyboardShortcuts.ts b/hooks/useKeyboardShortcuts.ts
new file mode 100644
index 000000000..4e360d4ca
--- /dev/null
+++ b/hooks/useKeyboardShortcuts.ts
@@ -0,0 +1,99 @@
+import { useEffect, useCallback, useState } from 'react';
+
+export interface KeyboardShortcut {
+  key: string;
+  ctrl?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+  meta?: boolean;
+  handler: (event: KeyboardEvent) => void;
+  description: string;
+}
+
+export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[], enabled = true) {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!enabled) return;
+
+      for (const shortcut of shortcuts) {
+        const ctrlMatch = shortcut.ctrl ? event.ctrlKey || event.metaKey : !event.ctrlKey && !event.metaKey;
+        const shiftMatch = shortcut.shift ? event.shiftKey : !event.shiftKey;
+        const altMatch = shortcut.alt ? event.altKey : !event.altKey;
+        const metaMatch = shortcut.meta ? event.metaKey : !event.metaKey;
+
+        if (
+          event.key.toLowerCase() === shortcut.key.toLowerCase() &&
+          ctrlMatch &&
+          shiftMatch &&
+          altMatch &&
+          (shortcut.meta === undefined || metaMatch)
+        ) {
+          event.preventDefault();
+          shortcut.handler(event);
+          break;
+        }
+      }
+    },
+    [shortcuts, enabled]
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown, enabled]);
+}
+
+export function useKeyboardNavigation(
+  items: string[],
+  onSelect: (index: number) => void,
+  enabled = true
+) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!enabled || items.length === 0) return;
+
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          setSelectedIndex((prev) => {
+            const newIndex = prev > 0 ? prev - 1 : items.length - 1;
+            return newIndex;
+          });
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          setSelectedIndex((prev) => {
+            const newIndex = prev < items.length - 1 ? prev + 1 : 0;
+            return newIndex;
+          });
+          break;
+        case 'Enter':
+          event.preventDefault();
+          onSelect(selectedIndex);
+          break;
+        case 'Escape':
+          event.preventDefault();
+          // Let parent handle escape
+          break;
+      }
+    },
+    [enabled, items.length, selectedIndex, onSelect]
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown, enabled]);
+
+  return { selectedIndex, setSelectedIndex };
+}
diff --git a/lib/errors/resume-errors.ts b/lib/errors/resume-errors.ts
new file mode 100644
index 000000000..4bfc7ce15
--- /dev/null
+++ b/lib/errors/resume-errors.ts
@@ -0,0 +1,157 @@
+/**
+ * Resume Builder Error Handling System
+ * Defines error types, codes, and error handling utilities
+ */
+
+export enum ResumeErrorCode {
+  LOAD_FAILED = 'LOAD_FAILED',
+  SAVE_FAILED = 'SAVE_FAILED',
+  EXPORT_FAILED = 'EXPORT_FAILED',
+  IMPORT_FAILED = 'IMPORT_FAILED',
+  VALIDATION_FAILED = 'VALIDATION_FAILED',
+  NETWORK_ERROR = 'NETWORK_ERROR',
+  UNAUTHORIZED = 'UNAUTHORIZED',
+  NOT_FOUND = 'NOT_FOUND',
+  RATE_LIMIT_EXCEEDED = 'RATE_LIMIT_EXCEEDED',
+  UNKNOWN_ERROR = 'UNKNOWN_ERROR',
+}
+
+export class ResumeError extends Error {
+  public readonly code: ResumeErrorCode;
+  public readonly details?: unknown;
+  public readonly timestamp: Date;
+  public readonly recoverable: boolean;
+
+  constructor(
+    message: string,
+    code: ResumeErrorCode,
+    details?: unknown,
+    recoverable = true
+  ) {
+    super(message);
+    this.name = 'ResumeError';
+    this.code = code;
+    this.details = details;
+    this.timestamp = new Date();
+    this.recoverable = recoverable;
+
+    // Maintains proper stack trace for where our error was thrown
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, ResumeError);
+    }
+  }
+
+  toJSON() {
+    return {
+      name: this.name,
+      message: this.message,
+      code: this.code,
+      details: this.details,
+      timestamp: this.timestamp.toISOString(),
+      recoverable: this.recoverable,
+      stack: this.stack,
+    };
+  }
+}
+
+/**
+ * Error logger utility
+ */
+export class ErrorLogger {
+  private static logs: Array<{
+    error: ResumeError;
+    context?: Record<string, unknown>;
+  }> = [];
+
+  static log(error: ResumeError, context?: Record<string, unknown>) {
+    this.logs.push({ error, context });
+
+    // Log to console in development
+    if (process.env.NODE_ENV === 'development') {
+      console.error('[ResumeError]', {
+        message: error.message,
+        code: error.code,
+        details: error.details,
+        context,
+        stack: error.stack,
+      });
+    }
+
+    // In production, you might want to send to an error tracking service
+    // e.g., Sentry, LogRocket, etc.
+    if (process.env.NODE_ENV === 'production') {
+      // Example: Sentry.captureException(error, { extra: context });
+    }
+  }
+
+  static getLogs() {
+    return this.logs;
+  }
+
+  static clearLogs() {
+    this.logs = [];
+  }
+}
+
+/**
+ * User-friendly error messages
+ */
+export const ERROR_MESSAGES: Record<ResumeErrorCode, string> = {
+  [ResumeErrorCode.LOAD_FAILED]: 'Failed to load resume. Please try again.',
+  [ResumeErrorCode.SAVE_FAILED]: 'Failed to save resume. Your changes may not be saved.',
+  [ResumeErrorCode.EXPORT_FAILED]: 'Failed to export resume. Please try again.',
+  [ResumeErrorCode.IMPORT_FAILED]: 'Failed to import resume data. Please check the file format.',
+  [ResumeErrorCode.VALIDATION_FAILED]: 'Some fields contain invalid data. Please check and try again.',
+  [ResumeErrorCode.NETWORK_ERROR]: 'Network connection lost. Please check your internet connection.',
+  [ResumeErrorCode.UNAUTHORIZED]: 'You are not authorized to perform this action.',
+  [ResumeErrorCode.NOT_FOUND]: 'Resume not found.',
+  [ResumeErrorCode.RATE_LIMIT_EXCEEDED]: 'Too many requests. Please wait a moment and try again.',
+  [ResumeErrorCode.UNKNOWN_ERROR]: 'An unexpected error occurred. Please try again.',
+};
+
+/**
+ * Get user-friendly error message
+ */
+export function getErrorMessage(error: unknown): string {
+  if (error instanceof ResumeError) {
+    return ERROR_MESSAGES[error.code] || error.message;
+  }
+  
+  if (error instanceof Error) {
+    return error.message;
+  }
+  
+  return ERROR_MESSAGES[ResumeErrorCode.UNKNOWN_ERROR];
+}
+
+/**
+ * Check if error is recoverable
+ */
+export function isRecoverableError(error: unknown): boolean {
+  if (error instanceof ResumeError) {
+    return error.recoverable;
+  }
+  return true; // Assume recoverable by default
+}
+
+/**
+ * Create error from unknown error
+ */
+export function createResumeError(
+  error: unknown,
+  defaultCode: ResumeErrorCode = ResumeErrorCode.UNKNOWN_ERROR
+): ResumeError {
+  if (error instanceof ResumeError) {
+    return error;
+  }
+
+  if (error instanceof Error) {
+    return new ResumeError(error.message, defaultCode, { originalError: error });
+  }
+
+  return new ResumeError(
+    'An unexpected error occurred',
+    defaultCode,
+    { originalError: error }
+  );
+}
diff --git a/lib/services/resume-autofill.ts b/lib/services/resume-autofill.ts
new file mode 100644
index 000000000..eb72ac501
--- /dev/null
+++ b/lib/services/resume-autofill.ts
@@ -0,0 +1,108 @@
+import { createClient } from '@/lib/supabase/client';
+import { Profile } from '@/types/profile';
+import { PersonalInfo } from '@/types/resume';
+
+export class ResumeAutoFillService {
+  /**
+   * Fetch user profile and auth data for auto-filling resume
+   */
+  static async getUserDataForAutoFill(): Promise<{
+    profile: Profile | null;
+    email: string | null;
+  }> {
+    const supabase = createClient();
+
+    try {
+      // Get authenticated user
+      const { data: { user }, error: authError } = await supabase.auth.getUser();
+      
+      if (authError || !user) {
+        console.error('Error fetching user:', authError);
+        return { profile: null, email: null };
+      }
+
+      // Get user profile
+      const { data: profile, error: profileError } = await supabase
+        .from('profiles')
+        .select('*')
+        .eq('id', user.id)
+        .single();
+
+      if (profileError) {
+        console.error('Error fetching profile:', profileError);
+        return { profile: null, email: user.email || null };
+      }
+
+      return {
+        profile: profile as Profile,
+        email: user.email || null,
+      };
+    } catch (error) {
+      console.error('Error in getUserDataForAutoFill:', error);
+      return { profile: null, email: null };
+    }
+  }
+
+  /**
+   * Map profile data to resume personal info section
+   */
+  static mapProfileToPersonalInfo(
+    profile: Profile | null,
+    email: string | null
+  ): Partial<PersonalInfo> {
+    if (!profile && !email) {
+      return {};
+    }
+
+    const personalInfo: Partial<PersonalInfo> = {};
+
+    if (profile) {
+      // Map name
+      if (profile.first_name || profile.last_name) {
+        personalInfo.full_name = `${profile.first_name || ''} ${profile.last_name || ''}`.trim();
+      }
+
+      // Map contact info
+      if (profile.phone) {
+        personalInfo.phone = profile.phone;
+      }
+
+      if (profile.location) {
+        personalInfo.location = profile.location;
+      }
+
+      // Map social links
+      if (profile.linkedin_url) {
+        personalInfo.linkedin = profile.linkedin_url;
+      }
+
+      if (profile.github_url) {
+        personalInfo.github = profile.github_url;
+      }
+
+      if (profile.twitter_url) {
+        personalInfo.website = profile.twitter_url;
+      }
+
+      // Map bio to summary
+      if (profile.bio) {
+        personalInfo.summary = profile.bio;
+      }
+    }
+
+    // Add email from auth
+    if (email) {
+      personalInfo.email = email;
+    }
+
+    return personalInfo;
+  }
+
+  /**
+   * Auto-fill resume from user profile
+   */
+  static async autoFillResume(): Promise<Partial<PersonalInfo>> {
+    const { profile, email } = await this.getUserDataForAutoFill();
+    return this.mapProfileToPersonalInfo(profile, email);
+  }
+}
diff --git a/lib/services/resume-export-lazy.ts b/lib/services/resume-export-lazy.ts
new file mode 100644
index 000000000..3f5e40ad9
--- /dev/null
+++ b/lib/services/resume-export-lazy.ts
@@ -0,0 +1,144 @@
+/**
+ * Lazy-loaded Resume Export Service
+ * Dynamically imports heavy export libraries only when needed
+ */
+
+import { Resume, ExportFormat, ExportResult, ResumeError, ResumeErrorCode } from '@/types/resume';
+
+export class LazyResumeExportService {
+  /**
+   * Lazy load and export to PDF
+   */
+  static async exportToPDF(resume: Resume, elementId: string = 'resume-preview'): Promise<ExportResult> {
+    try {
+      // Dynamically import the export service only when needed
+      const { ResumeExportService } = await import('./resume-export');
+      return await ResumeExportService.exportToPDF(resume, elementId);
+    } catch (error) {
+      console.error('Failed to load PDF export module:', error);
+      return {
+        success: false,
+        error: 'Failed to load PDF export functionality',
+        filename: '',
+      };
+    }
+  }
+
+  /**
+   * Lazy load and export to DOCX
+   */
+  static async exportToDOCX(resume: Resume): Promise<ExportResult> {
+    try {
+      // Dynamically import the export service only when needed
+      const { ResumeExportService } = await import('./resume-export');
+      return await ResumeExportService.exportToDOCX(resume);
+    } catch (error) {
+      console.error('Failed to load DOCX export module:', error);
+      return {
+        success: false,
+        error: 'Failed to load DOCX export functionality',
+        filename: '',
+      };
+    }
+  }
+
+  /**
+   * Export to JSON (no lazy loading needed - lightweight)
+   */
+  static async exportToJSON(resume: Resume): Promise<ExportResult> {
+    try {
+      // Dynamically import the export service
+      const { ResumeExportService } = await import('./resume-export');
+      return await ResumeExportService.exportToJSON(resume);
+    } catch (error) {
+      console.error('Failed to load JSON export module:', error);
+      return {
+        success: false,
+        error: 'Failed to load JSON export functionality',
+        filename: '',
+      };
+    }
+  }
+
+  /**
+   * Validate export format
+   */
+  static validateFormat(format: string): format is ExportFormat {
+    return ['pdf', 'docx', 'json'].includes(format);
+  }
+
+  /**
+   * Generate filename for export
+   */
+  static generateFilename(resume: Resume, format: ExportFormat): string {
+    const sanitizedTitle = resume.title
+      .replace(/[^a-z0-9]/gi, '_')
+      .toLowerCase()
+      .substring(0, 50);
+    
+    const timestamp = new Date().toISOString().split('T')[0];
+    return `${sanitizedTitle}_${timestamp}.${format}`;
+  }
+
+  /**
+   * Trigger browser download
+   */
+  static triggerDownload(blob: Blob, filename: string): void {
+    try {
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      
+      // Clean up the URL object after a short delay
+      setTimeout(() => URL.revokeObjectURL(url), 100);
+    } catch (error) {
+      throw new ResumeError(
+        'Failed to trigger download',
+        ResumeErrorCode.EXPORT_FAILED,
+        error
+      );
+    }
+  }
+
+  /**
+   * Check if export format is supported
+   */
+  static isFormatSupported(format: string): boolean {
+    return this.validateFormat(format);
+  }
+
+  /**
+   * Get MIME type for export format
+   */
+  static getMimeType(format: ExportFormat): string {
+    const mimeTypes: Record<ExportFormat, string> = {
+      pdf: 'application/pdf',
+      docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      json: 'application/json',
+    };
+
+    return mimeTypes[format];
+  }
+
+  /**
+   * Estimate export time (for progress indicators)
+   */
+  static estimateExportTime(resume: Resume, format: ExportFormat): number {
+    // Base time in milliseconds
+    const baseTimes: Record<ExportFormat, number> = {
+      pdf: 2000,
+      docx: 2500,
+      json: 100,
+    };
+
+    // Add time based on content size
+    const sectionCount = resume.sections.length;
+    const additionalTime = sectionCount * 100;
+
+    return baseTimes[format] + additionalTime;
+  }
+}
diff --git a/lib/services/resume-export.ts b/lib/services/resume-export.ts
new file mode 100644
index 000000000..99126f202
--- /dev/null
+++ b/lib/services/resume-export.ts
@@ -0,0 +1,583 @@
+/**
+ * Resume Export Service
+ * Handles exporting resumes to various formats (PDF, DOCX, JSON)
+ */
+
+import { Resume, ExportFormat, ExportResult, ResumeError, ResumeErrorCode, PersonalInfo, Education, Experience, Project, Skill, Certification, Award, CustomContent } from '@/types/resume';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+import { Document, Packer, Paragraph, TextRun, HeadingLevel, AlignmentType, convertInchesToTwip } from 'docx';
+
+export class ResumeExportService {
+  /**
+   * Validate export format
+   */
+  static validateFormat(format: string): format is ExportFormat {
+    return ['pdf', 'docx', 'json'].includes(format);
+  }
+
+  /**
+   * Generate filename for export
+   */
+  static generateFilename(resume: Resume, format: ExportFormat): string {
+    const sanitizedTitle = resume.title
+      .replace(/[^a-z0-9]/gi, '_')
+      .toLowerCase()
+      .substring(0, 50);
+    
+    const timestamp = new Date().toISOString().split('T')[0];
+    return `${sanitizedTitle}_${timestamp}.${format}`;
+  }
+
+  /**
+   * Trigger browser download
+   */
+  static triggerDownload(blob: Blob, filename: string): void {
+    try {
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      
+      // Clean up the URL object after a short delay
+      setTimeout(() => URL.revokeObjectURL(url), 100);
+    } catch (error) {
+      throw new ResumeError(
+        'Failed to trigger download',
+        ResumeErrorCode.EXPORT_FAILED,
+        error
+      );
+    }
+  }
+
+  /**
+   * Handle export errors gracefully
+   */
+  static handleExportError(error: unknown, format: ExportFormat): ExportResult {
+    console.error(`Export to ${format.toUpperCase()} failed:`, error);
+
+    let errorMessage = `Failed to export resume as ${format.toUpperCase()}`;
+    
+    if (error instanceof ResumeError) {
+      errorMessage = error.message;
+    } else if (error instanceof Error) {
+      errorMessage = error.message;
+    }
+
+    return {
+      success: false,
+      error: errorMessage,
+      filename: '',
+    };
+  }
+
+  /**
+   * Validate resume data before export
+   */
+  static validateResumeData(resume: Resume | null): void {
+    if (!resume) {
+      throw new ResumeError(
+        'No resume data available for export',
+        ResumeErrorCode.VALIDATION_FAILED
+      );
+    }
+
+    if (!resume.sections || resume.sections.length === 0) {
+      throw new ResumeError(
+        'Resume must have at least one section',
+        ResumeErrorCode.VALIDATION_FAILED
+      );
+    }
+  }
+
+  /**
+   * Check if export format is supported
+   */
+  static isFormatSupported(format: string): boolean {
+    return this.validateFormat(format);
+  }
+
+  /**
+   * Get MIME type for export format
+   */
+  static getMimeType(format: ExportFormat): string {
+    const mimeTypes: Record<ExportFormat, string> = {
+      pdf: 'application/pdf',
+      docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      json: 'application/json',
+    };
+
+    return mimeTypes[format];
+  }
+
+  /**
+   * Estimate export time (for progress indicators)
+   */
+  static estimateExportTime(resume: Resume, format: ExportFormat): number {
+    // Base time in milliseconds
+    const baseTimes: Record<ExportFormat, number> = {
+      pdf: 2000,
+      docx: 2500,
+      json: 100,
+    };
+
+    // Add time based on content size
+    const sectionCount = resume.sections.length;
+    const additionalTime = sectionCount * 100;
+
+    return baseTimes[format] + additionalTime;
+  }
+
+  /**
+   * Export resume to PDF format
+   */
+  static async exportToPDF(resume: Resume, elementId: string = 'resume-preview'): Promise<ExportResult> {
+    try {
+      this.validateResumeData(resume);
+
+      // Get the resume preview element
+      const element = document.getElementById(elementId);
+      if (!element) {
+        throw new ResumeError(
+          'Resume preview element not found',
+          ResumeErrorCode.EXPORT_FAILED
+        );
+      }
+
+      // Capture the element as canvas with high quality
+      const canvas = await html2canvas(element, {
+        scale: 2, // Higher quality
+        useCORS: true,
+        logging: false,
+        backgroundColor: '#ffffff',
+      });
+
+      // Calculate dimensions for PDF (8.5" x 11" letter size)
+      const imgWidth = 210; // A4 width in mm
+      const imgHeight = (canvas.height * imgWidth) / canvas.width;
+      
+      // Create PDF
+      const pdf = new jsPDF({
+        orientation: imgHeight > imgWidth ? 'portrait' : 'portrait',
+        unit: 'mm',
+        format: 'a4',
+      });
+
+      // Convert canvas to image
+      const imgData = canvas.toDataURL('image/png');
+      
+      // Add image to PDF
+      pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
+
+      // Handle multi-page resumes
+      let heightLeft = imgHeight - 297; // A4 height in mm
+      let position = 0;
+
+      while (heightLeft > 0) {
+        position = heightLeft - imgHeight;
+        pdf.addPage();
+        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+        heightLeft -= 297;
+      }
+
+      // Generate blob
+      const blob = pdf.output('blob');
+      
+      // Generate filename
+      const filename = this.generateFilename(resume, 'pdf');
+
+      return {
+        success: true,
+        blob,
+        filename,
+      };
+    } catch (error) {
+      return this.handleExportError(error, 'pdf');
+    }
+  }
+
+  /**
+   * Export resume to DOCX format
+   */
+  static async exportToDOCX(resume: Resume): Promise<ExportResult> {
+    try {
+      this.validateResumeData(resume);
+
+      const sections: Paragraph[] = [];
+
+      // Process each section
+      for (const section of resume.sections.filter(s => s.visible)) {
+        switch (section.type) {
+          case 'personal_info':
+            sections.push(...this.createPersonalInfoSection(section.content as PersonalInfo));
+            break;
+          case 'education':
+            sections.push(...this.createEducationSection(section.content as Education[]));
+            break;
+          case 'experience':
+            sections.push(...this.createExperienceSection(section.content as Experience[]));
+            break;
+          case 'projects':
+            sections.push(...this.createProjectsSection(section.content as Project[]));
+            break;
+          case 'skills':
+            sections.push(...this.createSkillsSection(section.content as Skill[]));
+            break;
+          case 'certifications':
+            sections.push(...this.createCertificationsSection(section.content as Certification[]));
+            break;
+          case 'awards':
+            sections.push(...this.createAwardsSection(section.content as Award[]));
+            break;
+          case 'custom':
+            sections.push(...this.createCustomSection(section.content as CustomContent, section.title));
+            break;
+        }
+      }
+
+      // Create document
+      const doc = new Document({
+        sections: [{
+          properties: {
+            page: {
+              margin: {
+                top: convertInchesToTwip(resume.styling.margin_top),
+                bottom: convertInchesToTwip(resume.styling.margin_bottom),
+                left: convertInchesToTwip(resume.styling.margin_left),
+                right: convertInchesToTwip(resume.styling.margin_right),
+              },
+            },
+          },
+          children: sections,
+        }],
+      });
+
+      // Generate blob
+      const blob = await Packer.toBlob(doc);
+      
+      // Generate filename
+      const filename = this.generateFilename(resume, 'docx');
+
+      return {
+        success: true,
+        blob,
+        filename,
+      };
+    } catch (error) {
+      return this.handleExportError(error, 'docx');
+    }
+  }
+
+  // Helper methods for DOCX sections
+  private static createPersonalInfoSection(content: PersonalInfo): Paragraph[] {
+    const paragraphs: Paragraph[] = [];
+
+    // Name
+    if (content.full_name) {
+      paragraphs.push(
+        new Paragraph({
+          text: content.full_name,
+          heading: HeadingLevel.HEADING_1,
+          alignment: AlignmentType.CENTER,
+        })
+      );
+    }
+
+    // Contact info
+    const contactInfo: string[] = [];
+    if (content.email) contactInfo.push(content.email);
+    if (content.phone) contactInfo.push(content.phone);
+    if (content.location) contactInfo.push(content.location);
+
+    if (contactInfo.length > 0) {
+      paragraphs.push(
+        new Paragraph({
+          text: contactInfo.join(' | '),
+          alignment: AlignmentType.CENTER,
+        })
+      );
+    }
+
+    // Links
+    const links: string[] = [];
+    if (content.website) links.push(content.website);
+    if (content.linkedin) links.push(content.linkedin);
+    if (content.github) links.push(content.github);
+
+    if (links.length > 0) {
+      paragraphs.push(
+        new Paragraph({
+          text: links.join(' | '),
+          alignment: AlignmentType.CENTER,
+        })
+      );
+    }
+
+    // Summary
+    if (content.summary) {
+      paragraphs.push(new Paragraph({ text: '' })); // Spacing
+      paragraphs.push(
+        new Paragraph({
+          text: content.summary,
+        })
+      );
+    }
+
+    paragraphs.push(new Paragraph({ text: '' })); // Spacing
+    return paragraphs;
+  }
+
+  private static createEducationSection(content: Education[]): Paragraph[] {
+    if (!content || content.length === 0) return [];
+
+    const paragraphs: Paragraph[] = [
+      new Paragraph({
+        text: 'Education',
+        heading: HeadingLevel.HEADING_2,
+      }),
+    ];
+
+    content.forEach((edu) => {
+      paragraphs.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: edu.institution, bold: true }),
+            new TextRun({ text: ` - ${edu.degree} in ${edu.field}` }),
+          ],
+        })
+      );
+
+      const dates = edu.current ? `${edu.start_date} - Present` : `${edu.start_date} - ${edu.end_date || ''}`;
+      paragraphs.push(new Paragraph({ text: dates }));
+
+      if (edu.gpa) {
+        paragraphs.push(new Paragraph({ text: `GPA: ${edu.gpa}` }));
+      }
+
+      if (edu.achievements && edu.achievements.length > 0) {
+        edu.achievements.forEach((achievement) => {
+          paragraphs.push(new Paragraph({ text: `• ${achievement}` }));
+        });
+      }
+
+      paragraphs.push(new Paragraph({ text: '' })); // Spacing
+    });
+
+    return paragraphs;
+  }
+
+  private static createExperienceSection(content: Experience[]): Paragraph[] {
+    if (!content || content.length === 0) return [];
+
+    const paragraphs: Paragraph[] = [
+      new Paragraph({
+        text: 'Work Experience',
+        heading: HeadingLevel.HEADING_2,
+      }),
+    ];
+
+    content.forEach((exp) => {
+      paragraphs.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: exp.position, bold: true }),
+            new TextRun({ text: ` - ${exp.company}` }),
+          ],
+        })
+      );
+
+      const dates = exp.current ? `${exp.start_date} - Present` : `${exp.start_date} - ${exp.end_date || ''}`;
+      paragraphs.push(new Paragraph({ text: `${dates} | ${exp.location}` }));
+
+      if (exp.description) {
+        paragraphs.push(new Paragraph({ text: exp.description }));
+      }
+
+      if (exp.achievements && exp.achievements.length > 0) {
+        exp.achievements.forEach((achievement) => {
+          paragraphs.push(new Paragraph({ text: `• ${achievement}` }));
+        });
+      }
+
+      paragraphs.push(new Paragraph({ text: '' })); // Spacing
+    });
+
+    return paragraphs;
+  }
+
+  private static createProjectsSection(content: Project[]): Paragraph[] {
+    if (!content || content.length === 0) return [];
+
+    const paragraphs: Paragraph[] = [
+      new Paragraph({
+        text: 'Projects',
+        heading: HeadingLevel.HEADING_2,
+      }),
+    ];
+
+    content.forEach((project) => {
+      paragraphs.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: project.name, bold: true }),
+          ],
+        })
+      );
+
+      if (project.description) {
+        paragraphs.push(new Paragraph({ text: project.description }));
+      }
+
+      if (project.technologies && project.technologies.length > 0) {
+        paragraphs.push(
+          new Paragraph({ text: `Technologies: ${project.technologies.join(', ')}` })
+        );
+      }
+
+      if (project.url || project.github) {
+        const links: string[] = [];
+        if (project.url) links.push(project.url);
+        if (project.github) links.push(project.github);
+        paragraphs.push(new Paragraph({ text: links.join(' | ') }));
+      }
+
+      paragraphs.push(new Paragraph({ text: '' })); // Spacing
+    });
+
+    return paragraphs;
+  }
+
+  private static createSkillsSection(content: Skill[]): Paragraph[] {
+    if (!content || content.length === 0) return [];
+
+    const paragraphs: Paragraph[] = [
+      new Paragraph({
+        text: 'Skills',
+        heading: HeadingLevel.HEADING_2,
+      }),
+    ];
+
+    content.forEach((skill) => {
+      paragraphs.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: `${skill.category}: `, bold: true }),
+            new TextRun({ text: skill.items.join(', ') }),
+          ],
+        })
+      );
+    });
+
+    paragraphs.push(new Paragraph({ text: '' })); // Spacing
+    return paragraphs;
+  }
+
+  private static createCertificationsSection(content: Certification[]): Paragraph[] {
+    if (!content || content.length === 0) return [];
+
+    const paragraphs: Paragraph[] = [
+      new Paragraph({
+        text: 'Certifications',
+        heading: HeadingLevel.HEADING_2,
+      }),
+    ];
+
+    content.forEach((cert) => {
+      paragraphs.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: cert.name, bold: true }),
+            new TextRun({ text: ` - ${cert.issuer}` }),
+          ],
+        })
+      );
+
+      paragraphs.push(new Paragraph({ text: cert.date }));
+
+      if (cert.credential_id) {
+        paragraphs.push(new Paragraph({ text: `Credential ID: ${cert.credential_id}` }));
+      }
+
+      paragraphs.push(new Paragraph({ text: '' })); // Spacing
+    });
+
+    return paragraphs;
+  }
+
+  private static createAwardsSection(content: Award[]): Paragraph[] {
+    if (!content || content.length === 0) return [];
+
+    const paragraphs: Paragraph[] = [
+      new Paragraph({
+        text: 'Awards & Honors',
+        heading: HeadingLevel.HEADING_2,
+      }),
+    ];
+
+    content.forEach((award) => {
+      paragraphs.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: award.title, bold: true }),
+            new TextRun({ text: ` - ${award.issuer}` }),
+          ],
+        })
+      );
+
+      paragraphs.push(new Paragraph({ text: award.date }));
+
+      if (award.description) {
+        paragraphs.push(new Paragraph({ text: award.description }));
+      }
+
+      paragraphs.push(new Paragraph({ text: '' })); // Spacing
+    });
+
+    return paragraphs;
+  }
+
+  private static createCustomSection(content: CustomContent, title: string): Paragraph[] {
+    const paragraphs: Paragraph[] = [
+      new Paragraph({
+        text: title,
+        heading: HeadingLevel.HEADING_2,
+      }),
+    ];
+
+    if (content.content) {
+      paragraphs.push(new Paragraph({ text: content.content }));
+    }
+
+    paragraphs.push(new Paragraph({ text: '' })); // Spacing
+    return paragraphs;
+  }
+
+  /**
+   * Export resume to JSON format
+   */
+  static async exportToJSON(resume: Resume): Promise<ExportResult> {
+    try {
+      this.validateResumeData(resume);
+
+      // Serialize resume data to JSON with proper indentation
+      const jsonString = JSON.stringify(resume, null, 2);
+      
+      // Create blob
+      const blob = new Blob([jsonString], { type: this.getMimeType('json') });
+      
+      // Generate filename
+      const filename = this.generateFilename(resume, 'json');
+
+      return {
+        success: true,
+        blob,
+        filename,
+      };
+    } catch (error) {
+      return this.handleExportError(error, 'json');
+    }
+  }
+}
diff --git a/lib/services/resume-import.ts b/lib/services/resume-import.ts
new file mode 100644
index 000000000..ed5818c21
--- /dev/null
+++ b/lib/services/resume-import.ts
@@ -0,0 +1,400 @@
+import { Resume, ResumeSection, SectionType, SectionContent } from '@/types/resume';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface ImportResult {
+  success: boolean;
+  resume?: Partial<Resume>;
+  errors: string[];
+  warnings: string[];
+  fieldsPopulated: number;
+}
+
+export interface ImportValidationError {
+  field: string;
+  message: string;
+}
+
+export class ResumeImportService {
+  /**
+   * Import resume data from JSON string
+   */
+  static async importFromJSON(jsonString: string, userId: string): Promise<ImportResult> {
+    const errors: string[] = [];
+    const warnings: string[] = [];
+    let fieldsPopulated = 0;
+
+    try {
+      // Parse JSON
+      const data = JSON.parse(jsonString);
+
+      // Validate basic structure
+      const validationErrors = this.validateStructure(data);
+      if (validationErrors.length > 0) {
+        return {
+          success: false,
+          errors: validationErrors.map(e => e.message),
+          warnings,
+          fieldsPopulated: 0,
+        };
+      }
+
+      // Map imported data to resume schema
+      const resume = this.mapToResumeSchema(data, userId);
+      
+      // Count populated fields
+      fieldsPopulated = this.countPopulatedFields(resume);
+
+      // Check for unrecognized fields
+      const unrecognizedFields = this.findUnrecognizedFields(data);
+      if (unrecognizedFields.length > 0) {
+        warnings.push(
+          `Unrecognized fields found and ignored: ${unrecognizedFields.join(', ')}`
+        );
+      }
+
+      return {
+        success: true,
+        resume,
+        errors,
+        warnings,
+        fieldsPopulated,
+      };
+    } catch (error) {
+      if (error instanceof SyntaxError) {
+        errors.push('Invalid JSON format. Please check your file and try again.');
+      } else {
+        errors.push(`Import failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      }
+
+      return {
+        success: false,
+        errors,
+        warnings,
+        fieldsPopulated: 0,
+      };
+    }
+  }
+
+  /**
+   * Validate the structure of imported data
+   */
+  private static validateStructure(data: any): ImportValidationError[] {
+    const errors: ImportValidationError[] = [];
+
+    if (!data || typeof data !== 'object') {
+      errors.push({ field: 'root', message: 'Invalid data format. Expected an object.' });
+      return errors;
+    }
+
+    // Check for required fields
+    if (data.sections && !Array.isArray(data.sections)) {
+      errors.push({ field: 'sections', message: 'Sections must be an array.' });
+    }
+
+    // Validate sections if present
+    if (Array.isArray(data.sections)) {
+      data.sections.forEach((section: any, index: number) => {
+        if (!section.type) {
+          errors.push({ 
+            field: `sections[${index}]`, 
+            message: 'Section must have a type.' 
+          });
+        }
+        if (!section.content) {
+          errors.push({ 
+            field: `sections[${index}]`, 
+            message: 'Section must have content.' 
+          });
+        }
+      });
+    }
+
+    return errors;
+  }
+
+  /**
+   * Map imported data to resume schema
+   */
+  private static mapToResumeSchema(data: any, userId: string): Partial<Resume> {
+    const now = new Date().toISOString();
+    
+    const resume: Partial<Resume> = {
+      id: data.id || uuidv4(),
+      user_id: userId,
+      title: data.title || 'Imported Resume',
+      template_id: data.template_id || 'modern',
+      sections: this.mapSections(data.sections || []),
+      styling: this.mapStyling(data.styling || {}),
+      metadata: this.mapMetadata(data.metadata || {}),
+      created_at: data.created_at || now,
+      updated_at: now,
+    };
+
+    return resume;
+  }
+
+  /**
+   * Map sections from imported data
+   */
+  private static mapSections(sections: any[]): ResumeSection[] {
+    return sections
+      .filter(section => this.isValidSectionType(section.type))
+      .map((section, index) => ({
+        id: section.id || uuidv4(),
+        type: section.type as SectionType,
+        title: section.title || this.getDefaultSectionTitle(section.type),
+        order: section.order ?? index,
+        visible: section.visible ?? true,
+        content: this.mapSectionContent(section.type, section.content),
+      }));
+  }
+
+  /**
+   * Map section content based on type
+   */
+  private static mapSectionContent(type: SectionType, content: any): SectionContent {
+    switch (type) {
+      case 'personal_info':
+        return {
+          full_name: content.full_name || '',
+          email: content.email || '',
+          phone: content.phone || '',
+          location: content.location || '',
+          website: content.website,
+          linkedin: content.linkedin,
+          github: content.github,
+          summary: content.summary,
+        };
+
+      case 'education':
+        return Array.isArray(content) 
+          ? content.map(edu => ({
+              id: edu.id || uuidv4(),
+              institution: edu.institution || '',
+              degree: edu.degree || '',
+              field: edu.field || '',
+              start_date: edu.start_date || '',
+              end_date: edu.end_date,
+              current: edu.current || false,
+              gpa: edu.gpa,
+              achievements: Array.isArray(edu.achievements) ? edu.achievements : [],
+            }))
+          : [];
+
+      case 'experience':
+        return Array.isArray(content)
+          ? content.map(exp => ({
+              id: exp.id || uuidv4(),
+              company: exp.company || '',
+              position: exp.position || '',
+              location: exp.location || '',
+              start_date: exp.start_date || '',
+              end_date: exp.end_date,
+              current: exp.current || false,
+              description: exp.description || '',
+              achievements: Array.isArray(exp.achievements) ? exp.achievements : [],
+            }))
+          : [];
+
+      case 'projects':
+        return Array.isArray(content)
+          ? content.map(proj => ({
+              id: proj.id || uuidv4(),
+              name: proj.name || '',
+              description: proj.description || '',
+              technologies: Array.isArray(proj.technologies) ? proj.technologies : [],
+              url: proj.url,
+              github: proj.github,
+              start_date: proj.start_date,
+              end_date: proj.end_date,
+            }))
+          : [];
+
+      case 'skills':
+        return Array.isArray(content)
+          ? content.map(skill => ({
+              category: skill.category || 'General',
+              items: Array.isArray(skill.items) ? skill.items : [],
+            }))
+          : [];
+
+      case 'certifications':
+        return Array.isArray(content)
+          ? content.map(cert => ({
+              id: cert.id || uuidv4(),
+              name: cert.name || '',
+              issuer: cert.issuer || '',
+              date: cert.date || '',
+              expiry_date: cert.expiry_date,
+              credential_id: cert.credential_id,
+              url: cert.url,
+            }))
+          : [];
+
+      case 'awards':
+        return Array.isArray(content)
+          ? content.map(award => ({
+              id: award.id || uuidv4(),
+              title: award.title || '',
+              issuer: award.issuer || '',
+              date: award.date || '',
+              description: award.description,
+            }))
+          : [];
+
+      case 'custom':
+        return {
+          title: content.title || '',
+          content: content.content || '',
+        };
+
+      default:
+        return content;
+    }
+  }
+
+  /**
+   * Map styling from imported data
+   */
+  private static mapStyling(styling: any) {
+    return {
+      font_family: styling.font_family || 'Inter',
+      font_size_body: styling.font_size_body || 11,
+      font_size_heading: styling.font_size_heading || 16,
+      color_primary: styling.color_primary || '#8b5cf6',
+      color_text: styling.color_text || '#1f2937',
+      color_accent: styling.color_accent || '#6366f1',
+      margin_top: styling.margin_top || 0.5,
+      margin_bottom: styling.margin_bottom || 0.5,
+      margin_left: styling.margin_left || 0.75,
+      margin_right: styling.margin_right || 0.75,
+      line_height: styling.line_height || 1.5,
+      section_spacing: styling.section_spacing || 1.5,
+    };
+  }
+
+  /**
+   * Map metadata from imported data
+   */
+  private static mapMetadata(metadata: any) {
+    return {
+      page_count: metadata.page_count || 1,
+      word_count: metadata.word_count || 0,
+      completeness_score: metadata.completeness_score || 0,
+      last_exported: metadata.last_exported,
+      export_count: metadata.export_count || 0,
+    };
+  }
+
+  /**
+   * Check if section type is valid
+   */
+  private static isValidSectionType(type: string): boolean {
+    const validTypes: SectionType[] = [
+      'personal_info',
+      'education',
+      'experience',
+      'projects',
+      'skills',
+      'certifications',
+      'awards',
+      'custom',
+    ];
+    return validTypes.includes(type as SectionType);
+  }
+
+  /**
+   * Get default title for section type
+   */
+  private static getDefaultSectionTitle(type: SectionType): string {
+    const titles: Record<SectionType, string> = {
+      personal_info: 'Personal Information',
+      education: 'Education',
+      experience: 'Work Experience',
+      projects: 'Projects',
+      skills: 'Skills',
+      certifications: 'Certifications',
+      awards: 'Awards & Honors',
+      custom: 'Custom Section',
+    };
+    return titles[type] || 'Section';
+  }
+
+  /**
+   * Count populated fields in resume
+   */
+  private static countPopulatedFields(resume: Partial<Resume>): number {
+    let count = 0;
+
+    // Count basic fields
+    if (resume.title) count++;
+    if (resume.template_id) count++;
+
+    // Count section fields
+    resume.sections?.forEach(section => {
+      count++; // Section itself
+      count += this.countSectionFields(section.content);
+    });
+
+    return count;
+  }
+
+  /**
+   * Count fields in section content
+   */
+  private static countSectionFields(content: SectionContent): number {
+    let count = 0;
+
+    if (Array.isArray(content)) {
+      content.forEach(item => {
+        Object.values(item).forEach(value => {
+          if (value && value !== '' && (!Array.isArray(value) || value.length > 0)) {
+            count++;
+          }
+        });
+      });
+    } else if (typeof content === 'object') {
+      Object.values(content).forEach(value => {
+        if (value && value !== '' && (!Array.isArray(value) || value.length > 0)) {
+          count++;
+        }
+      });
+    }
+
+    return count;
+  }
+
+  /**
+   * Find unrecognized fields in imported data
+   */
+  private static findUnrecognizedFields(data: any): string[] {
+    const recognizedFields = [
+      'id',
+      'user_id',
+      'title',
+      'template_id',
+      'sections',
+      'styling',
+      'metadata',
+      'created_at',
+      'updated_at',
+    ];
+
+    return Object.keys(data).filter(key => !recognizedFields.includes(key));
+  }
+
+  /**
+   * Validate file size
+   */
+  static validateFileSize(file: File, maxSizeMB: number = 5): boolean {
+    const maxSizeBytes = maxSizeMB * 1024 * 1024;
+    return file.size <= maxSizeBytes;
+  }
+
+  /**
+   * Validate file type
+   */
+  static validateFileType(file: File): boolean {
+    return file.type === 'application/json' || file.name.endsWith('.json');
+  }
+}
diff --git a/lib/services/resume-metadata.ts b/lib/services/resume-metadata.ts
new file mode 100644
index 000000000..7d7ebf5b6
--- /dev/null
+++ b/lib/services/resume-metadata.ts
@@ -0,0 +1,180 @@
+import { Resume, PersonalInfo, Education, Experience, Project, Certification, Award, CustomContent } from '@/types/resume';
+
+/**
+ * Calculate the word count for a resume
+ */
+export function calculateWordCount(resume: Resume): number {
+  let wordCount = 0;
+
+  // Helper to count words in a string
+  const countWords = (text: string): number => {
+    if (!text || typeof text !== 'string') return 0;
+    return text.trim().split(/\s+/).filter(word => word.length > 0).length;
+  };
+
+  // Count words in each section
+  resume.sections.forEach((section) => {
+    if (!section.visible) return;
+
+    switch (section.type) {
+      case 'personal_info': {
+        const content = section.content as PersonalInfo;
+        wordCount += countWords(content.full_name || '');
+        wordCount += countWords(content.email || '');
+        wordCount += countWords(content.phone || '');
+        wordCount += countWords(content.location || '');
+        wordCount += countWords(content.website || '');
+        wordCount += countWords(content.linkedin || '');
+        wordCount += countWords(content.github || '');
+        wordCount += countWords(content.summary || '');
+        break;
+      }
+
+      case 'education': {
+        const content = section.content as Education[];
+        content.forEach((edu) => {
+          wordCount += countWords(edu.institution);
+          wordCount += countWords(edu.degree);
+          wordCount += countWords(edu.field);
+          wordCount += countWords(edu.gpa || '');
+          if (edu.achievements) {
+            edu.achievements.forEach((achievement) => {
+              wordCount += countWords(achievement);
+            });
+          }
+        });
+        break;
+      }
+
+      case 'experience': {
+        const content = section.content as Experience[];
+        content.forEach((exp) => {
+          wordCount += countWords(exp.company);
+          wordCount += countWords(exp.position);
+          wordCount += countWords(exp.location);
+          wordCount += countWords(exp.description);
+          exp.achievements.forEach((achievement) => {
+            wordCount += countWords(achievement);
+          });
+        });
+        break;
+      }
+
+      case 'projects': {
+        const content = section.content as Project[];
+        content.forEach((project) => {
+          wordCount += countWords(project.name);
+          wordCount += countWords(project.description);
+          project.technologies.forEach((tech) => {
+            wordCount += countWords(tech);
+          });
+          wordCount += countWords(project.url || '');
+          wordCount += countWords(project.github || '');
+        });
+        break;
+      }
+
+      case 'skills': {
+        const content = section.content as Array<{ category: string; items: string[] }>;
+        content.forEach((skillGroup) => {
+          wordCount += countWords(skillGroup.category);
+          skillGroup.items.forEach((item) => {
+            wordCount += countWords(item);
+          });
+        });
+        break;
+      }
+
+      case 'certifications': {
+        const content = section.content as Certification[];
+        content.forEach((cert) => {
+          wordCount += countWords(cert.name);
+          wordCount += countWords(cert.issuer);
+          wordCount += countWords(cert.credential_id || '');
+          wordCount += countWords(cert.url || '');
+        });
+        break;
+      }
+
+      case 'awards': {
+        const content = section.content as Award[];
+        content.forEach((award) => {
+          wordCount += countWords(award.title);
+          wordCount += countWords(award.issuer);
+          wordCount += countWords(award.description || '');
+        });
+        break;
+      }
+
+      case 'custom': {
+        const content = section.content as CustomContent;
+        wordCount += countWords(content.title);
+        wordCount += countWords(content.content);
+        break;
+      }
+    }
+  });
+
+  return wordCount;
+}
+
+/**
+ * Calculate the page count based on content length
+ * This is an approximation - actual page count depends on template and styling
+ */
+export function calculatePageCount(resume: Resume): number {
+  const wordCount = calculateWordCount(resume);
+  
+  // Average words per page for a resume (considering formatting, spacing, etc.)
+  const WORDS_PER_PAGE = 400;
+  
+  // Calculate pages, minimum 1
+  const pages = Math.max(1, Math.ceil(wordCount / WORDS_PER_PAGE));
+  
+  return pages;
+}
+
+/**
+ * Update resume metadata with calculated values
+ */
+export function updateResumeMetadata(resume: Resume): Resume {
+  const wordCount = calculateWordCount(resume);
+  const pageCount = calculatePageCount(resume);
+
+  return {
+    ...resume,
+    metadata: {
+      ...resume.metadata,
+      word_count: wordCount,
+      page_count: pageCount,
+    },
+  };
+}
+
+/**
+ * Record an export event in metadata
+ */
+export function recordExport(resume: Resume): Resume {
+  return {
+    ...resume,
+    metadata: {
+      ...resume.metadata,
+      last_exported: new Date().toISOString(),
+      export_count: (resume.metadata.export_count || 0) + 1,
+    },
+  };
+}
+
+/**
+ * Format metadata for display
+ */
+export function formatMetadata(resume: Resume) {
+  const { word_count, page_count, last_exported, export_count } = resume.metadata;
+
+  return {
+    wordCount: word_count || 0,
+    pageCount: page_count || 1,
+    lastExported: last_exported ? new Date(last_exported) : null,
+    exportCount: export_count || 0,
+  };
+}
diff --git a/lib/services/resume-scoring.ts b/lib/services/resume-scoring.ts
new file mode 100644
index 000000000..543ed6be8
--- /dev/null
+++ b/lib/services/resume-scoring.ts
@@ -0,0 +1,844 @@
+// Resume Scoring Service
+// Calculates completeness score and provides improvement suggestions
+
+import {
+  Resume,
+  ResumeSection,
+  PersonalInfo,
+  Education,
+  Experience,
+  Project,
+  Skill,
+  Certification,
+  Award,
+  CustomContent,
+} from '@/types/resume';
+
+export interface ScoreBreakdown {
+  category: string;
+  score: number;
+  maxScore: number;
+  percentage: number;
+  issues: string[];
+}
+
+export interface ResumeSuggestion {
+  id: string;
+  category: string;
+  severity: 'critical' | 'warning' | 'info';
+  message: string;
+  sectionId?: string;
+}
+
+export interface ScoringResult {
+  totalScore: number;
+  breakdown: ScoreBreakdown[];
+  suggestions: ResumeSuggestion[];
+  completedCategories: number;
+  totalCategories: number;
+}
+
+export class ResumeScoringService {
+  private static readonly WEIGHTS = {
+    personal_info: 20,
+    education: 15,
+    experience: 25,
+    projects: 15,
+    skills: 15,
+    certifications: 5,
+    awards: 5,
+  };
+
+  private static readonly MIN_CONTENT_LENGTH = 50;
+  private static readonly MIN_SUMMARY_LENGTH = 100;
+  private static readonly MIN_DESCRIPTION_LENGTH = 50;
+
+  /**
+   * Calculate comprehensive resume score with breakdown
+   */
+  static calculateScore(resume: Resume | null): ScoringResult {
+    if (!resume) {
+      return {
+        totalScore: 0,
+        breakdown: [],
+        suggestions: [],
+        completedCategories: 0,
+        totalCategories: 0,
+      };
+    }
+
+    const breakdown: ScoreBreakdown[] = [];
+    const suggestions: ResumeSuggestion[] = [];
+    let totalScore = 0;
+    let completedCategories = 0;
+
+    // Score each section type
+    const sectionsByType = this.groupSectionsByType(resume.sections);
+
+    // Personal Info
+    const personalInfoResult = this.scorePersonalInfo(sectionsByType.personal_info);
+    breakdown.push(personalInfoResult.breakdown);
+    suggestions.push(...personalInfoResult.suggestions);
+    totalScore += personalInfoResult.breakdown.score;
+    if (personalInfoResult.breakdown.percentage >= 80) completedCategories++;
+
+    // Education
+    const educationResult = this.scoreEducation(sectionsByType.education);
+    breakdown.push(educationResult.breakdown);
+    suggestions.push(...educationResult.suggestions);
+    totalScore += educationResult.breakdown.score;
+    if (educationResult.breakdown.percentage >= 80) completedCategories++;
+
+    // Experience
+    const experienceResult = this.scoreExperience(sectionsByType.experience);
+    breakdown.push(experienceResult.breakdown);
+    suggestions.push(...experienceResult.suggestions);
+    totalScore += experienceResult.breakdown.score;
+    if (experienceResult.breakdown.percentage >= 80) completedCategories++;
+
+    // Projects
+    const projectsResult = this.scoreProjects(sectionsByType.projects);
+    breakdown.push(projectsResult.breakdown);
+    suggestions.push(...projectsResult.suggestions);
+    totalScore += projectsResult.breakdown.score;
+    if (projectsResult.breakdown.percentage >= 80) completedCategories++;
+
+    // Skills
+    const skillsResult = this.scoreSkills(sectionsByType.skills);
+    breakdown.push(skillsResult.breakdown);
+    suggestions.push(...skillsResult.suggestions);
+    totalScore += skillsResult.breakdown.score;
+    if (skillsResult.breakdown.percentage >= 80) completedCategories++;
+
+    // Certifications
+    const certificationsResult = this.scoreCertifications(sectionsByType.certifications);
+    breakdown.push(certificationsResult.breakdown);
+    suggestions.push(...certificationsResult.suggestions);
+    totalScore += certificationsResult.breakdown.score;
+    if (certificationsResult.breakdown.percentage >= 80) completedCategories++;
+
+    // Awards
+    const awardsResult = this.scoreAwards(sectionsByType.awards);
+    breakdown.push(awardsResult.breakdown);
+    suggestions.push(...awardsResult.suggestions);
+    totalScore += awardsResult.breakdown.score;
+    if (awardsResult.breakdown.percentage >= 80) completedCategories++;
+
+    // Add general best practices suggestions
+    suggestions.push(...this.checkBestPractices(resume));
+
+    return {
+      totalScore: Math.round(totalScore),
+      breakdown,
+      suggestions: this.prioritizeSuggestions(suggestions),
+      completedCategories,
+      totalCategories: 7,
+    };
+  }
+
+  /**
+   * Group sections by type
+   */
+  private static groupSectionsByType(sections: ResumeSection[]): Record<string, ResumeSection[]> {
+    const grouped: Record<string, ResumeSection[]> = {};
+    sections.forEach((section) => {
+      if (!grouped[section.type]) {
+        grouped[section.type] = [];
+      }
+      grouped[section.type].push(section);
+    });
+    return grouped;
+  }
+
+  /**
+   * Score Personal Info section
+   */
+  private static scorePersonalInfo(sections: ResumeSection[] = []): {
+    breakdown: ScoreBreakdown;
+    suggestions: ResumeSuggestion[];
+  } {
+    const maxScore = this.WEIGHTS.personal_info;
+    const issues: string[] = [];
+    const suggestions: ResumeSuggestion[] = [];
+
+    if (sections.length === 0 || !sections[0].visible) {
+      return {
+        breakdown: {
+          category: 'Personal Information',
+          score: 0,
+          maxScore,
+          percentage: 0,
+          issues: ['Section is missing or hidden'],
+        },
+        suggestions: [
+          {
+            id: 'personal-info-missing',
+            category: 'Personal Information',
+            severity: 'critical',
+            message: 'Add your personal information including name, email, and contact details',
+          },
+        ],
+      };
+    }
+
+    const section = sections[0];
+    const content = section.content as PersonalInfo;
+    const requiredFields = ['full_name', 'email', 'phone'];
+    const optionalFields = ['location', 'linkedin', 'github', 'website', 'summary'];
+
+    let filledRequired = 0;
+    let filledOptional = 0;
+
+    // Check required fields
+    requiredFields.forEach((field) => {
+      const value = content[field as keyof PersonalInfo];
+      if (value && String(value).trim().length > 0) {
+        filledRequired++;
+      } else {
+        issues.push(`Missing ${field.replace('_', ' ')}`);
+        suggestions.push({
+          id: `personal-info-${field}`,
+          category: 'Personal Information',
+          severity: 'critical',
+          message: `Add your ${field.replace('_', ' ')}`,
+          sectionId: section.id,
+        });
+      }
+    });
+
+    // Check optional fields
+    optionalFields.forEach((field) => {
+      const value = content[field as keyof PersonalInfo];
+      if (value && String(value).trim().length > 0) {
+        filledOptional++;
+      }
+    });
+
+    // Check summary length
+    if (content.summary && content.summary.length < this.MIN_SUMMARY_LENGTH) {
+      issues.push('Summary is too short');
+      suggestions.push({
+        id: 'personal-info-summary-short',
+        category: 'Personal Information',
+        severity: 'warning',
+        message: `Expand your summary to at least ${this.MIN_SUMMARY_LENGTH} characters for better impact`,
+        sectionId: section.id,
+      });
+    } else if (!content.summary || content.summary.trim().length === 0) {
+      suggestions.push({
+        id: 'personal-info-summary-missing',
+        category: 'Personal Information',
+        severity: 'warning',
+        message: 'Add a professional summary to introduce yourself',
+        sectionId: section.id,
+      });
+    }
+
+    // Calculate score: 60% for required fields, 40% for optional fields
+    const requiredScore = (filledRequired / requiredFields.length) * 0.6;
+    const optionalScore = (filledOptional / optionalFields.length) * 0.4;
+    const score = (requiredScore + optionalScore) * maxScore;
+
+    return {
+      breakdown: {
+        category: 'Personal Information',
+        score,
+        maxScore,
+        percentage: Math.round((score / maxScore) * 100),
+        issues,
+      },
+      suggestions,
+    };
+  }
+
+  /**
+   * Score Education section
+   */
+  private static scoreEducation(sections: ResumeSection[] = []): {
+    breakdown: ScoreBreakdown;
+    suggestions: ResumeSuggestion[];
+  } {
+    const maxScore = this.WEIGHTS.education;
+    const issues: string[] = [];
+    const suggestions: ResumeSuggestion[] = [];
+
+    const visibleSections = sections.filter((s) => s.visible);
+
+    if (visibleSections.length === 0) {
+      return {
+        breakdown: {
+          category: 'Education',
+          score: 0,
+          maxScore,
+          percentage: 0,
+          issues: ['No education entries'],
+        },
+        suggestions: [
+          {
+            id: 'education-missing',
+            category: 'Education',
+            severity: 'critical',
+            message: 'Add at least one education entry',
+          },
+        ],
+      };
+    }
+
+    let totalEntries = 0;
+    let completeEntries = 0;
+
+    visibleSections.forEach((section) => {
+      const entries = section.content as Education[];
+      totalEntries += entries.length;
+
+      entries.forEach((entry, index) => {
+        const requiredFields = ['institution', 'degree', 'field', 'start_date'];
+        const missingFields = requiredFields.filter(
+          (field) => !entry[field as keyof Education] || String(entry[field as keyof Education]).trim().length === 0
+        );
+
+        if (missingFields.length === 0) {
+          completeEntries++;
+        } else {
+          issues.push(`Entry ${index + 1}: Missing ${missingFields.join(', ')}`);
+          suggestions.push({
+            id: `education-incomplete-${section.id}-${index}`,
+            category: 'Education',
+            severity: 'warning',
+            message: `Complete education entry ${index + 1}: Add ${missingFields.join(', ')}`,
+            sectionId: section.id,
+          });
+        }
+      });
+    });
+
+    if (totalEntries === 0) {
+      issues.push('No education entries added');
+      suggestions.push({
+        id: 'education-empty',
+        category: 'Education',
+        severity: 'critical',
+        message: 'Add your educational background',
+      });
+    }
+
+    const score = totalEntries > 0 ? (completeEntries / totalEntries) * maxScore : 0;
+
+    return {
+      breakdown: {
+        category: 'Education',
+        score,
+        maxScore,
+        percentage: Math.round((score / maxScore) * 100),
+        issues,
+      },
+      suggestions,
+    };
+  }
+
+  /**
+   * Score Experience section
+   */
+  private static scoreExperience(sections: ResumeSection[] = []): {
+    breakdown: ScoreBreakdown;
+    suggestions: ResumeSuggestion[];
+  } {
+    const maxScore = this.WEIGHTS.experience;
+    const issues: string[] = [];
+    const suggestions: ResumeSuggestion[] = [];
+
+    const visibleSections = sections.filter((s) => s.visible);
+
+    if (visibleSections.length === 0) {
+      return {
+        breakdown: {
+          category: 'Work Experience',
+          score: 0,
+          maxScore,
+          percentage: 0,
+          issues: ['No experience entries'],
+        },
+        suggestions: [
+          {
+            id: 'experience-missing',
+            category: 'Work Experience',
+            severity: 'critical',
+            message: 'Add your work experience to showcase your professional background',
+          },
+        ],
+      };
+    }
+
+    let totalEntries = 0;
+    let completeEntries = 0;
+
+    visibleSections.forEach((section) => {
+      const entries = section.content as Experience[];
+      totalEntries += entries.length;
+
+      entries.forEach((entry, index) => {
+        let entryScore = 0;
+        const entryIssues: string[] = [];
+
+        // Check required fields
+        const requiredFields = ['company', 'position', 'start_date', 'description'];
+        const missingFields = requiredFields.filter(
+          (field) => !entry[field as keyof Experience] || String(entry[field as keyof Experience]).trim().length === 0
+        );
+
+        if (missingFields.length > 0) {
+          entryIssues.push(`Missing ${missingFields.join(', ')}`);
+        } else {
+          entryScore += 0.5;
+        }
+
+        // Check description length
+        if (entry.description && entry.description.length >= this.MIN_DESCRIPTION_LENGTH) {
+          entryScore += 0.25;
+        } else {
+          entryIssues.push('Description too short');
+          suggestions.push({
+            id: `experience-description-short-${section.id}-${index}`,
+            category: 'Work Experience',
+            severity: 'warning',
+            message: `Expand description for ${entry.position || 'position'} (at least ${this.MIN_DESCRIPTION_LENGTH} characters)`,
+            sectionId: section.id,
+          });
+        }
+
+        // Check achievements
+        if (entry.achievements && entry.achievements.length > 0) {
+          entryScore += 0.25;
+        } else {
+          entryIssues.push('No achievements listed');
+          suggestions.push({
+            id: `experience-achievements-missing-${section.id}-${index}`,
+            category: 'Work Experience',
+            severity: 'info',
+            message: `Add achievements for ${entry.position || 'position'} to highlight your impact`,
+            sectionId: section.id,
+          });
+        }
+
+        if (entryScore >= 0.8) {
+          completeEntries++;
+        }
+
+        if (entryIssues.length > 0) {
+          issues.push(`Entry ${index + 1}: ${entryIssues.join(', ')}`);
+        }
+      });
+    });
+
+    if (totalEntries === 0) {
+      issues.push('No experience entries added');
+      suggestions.push({
+        id: 'experience-empty',
+        category: 'Work Experience',
+        severity: 'critical',
+        message: 'Add your work experience',
+      });
+    }
+
+    const score = totalEntries > 0 ? (completeEntries / totalEntries) * maxScore : 0;
+
+    return {
+      breakdown: {
+        category: 'Work Experience',
+        score,
+        maxScore,
+        percentage: Math.round((score / maxScore) * 100),
+        issues,
+      },
+      suggestions,
+    };
+  }
+
+  /**
+   * Score Projects section
+   */
+  private static scoreProjects(sections: ResumeSection[] = []): {
+    breakdown: ScoreBreakdown;
+    suggestions: ResumeSuggestion[];
+  } {
+    const maxScore = this.WEIGHTS.projects;
+    const issues: string[] = [];
+    const suggestions: ResumeSuggestion[] = [];
+
+    const visibleSections = sections.filter((s) => s.visible);
+
+    if (visibleSections.length === 0) {
+      return {
+        breakdown: {
+          category: 'Projects',
+          score: maxScore * 0.5, // 50% for not having projects (optional)
+          maxScore,
+          percentage: 50,
+          issues: ['No projects section'],
+        },
+        suggestions: [
+          {
+            id: 'projects-missing',
+            category: 'Projects',
+            severity: 'info',
+            message: 'Consider adding projects to showcase your practical skills',
+          },
+        ],
+      };
+    }
+
+    let totalEntries = 0;
+    let completeEntries = 0;
+
+    visibleSections.forEach((section) => {
+      const entries = section.content as Project[];
+      totalEntries += entries.length;
+
+      entries.forEach((entry, index) => {
+        const requiredFields = ['name', 'description', 'technologies'];
+        const missingFields: string[] = [];
+
+        if (!entry.name || entry.name.trim().length === 0) missingFields.push('name');
+        if (!entry.description || entry.description.trim().length === 0) missingFields.push('description');
+        if (!entry.technologies || entry.technologies.length === 0) missingFields.push('technologies');
+
+        if (missingFields.length === 0 && entry.description.length >= this.MIN_CONTENT_LENGTH) {
+          completeEntries++;
+        } else {
+          if (missingFields.length > 0) {
+            issues.push(`Entry ${index + 1}: Missing ${missingFields.join(', ')}`);
+          }
+          if (entry.description && entry.description.length < this.MIN_CONTENT_LENGTH) {
+            issues.push(`Entry ${index + 1}: Description too short`);
+          }
+        }
+      });
+    });
+
+    if (totalEntries === 0) {
+      issues.push('No projects added');
+      suggestions.push({
+        id: 'projects-empty',
+        category: 'Projects',
+        severity: 'info',
+        message: 'Add projects to demonstrate your skills',
+      });
+      return {
+        breakdown: {
+          category: 'Projects',
+          score: maxScore * 0.5,
+          maxScore,
+          percentage: 50,
+          issues,
+        },
+        suggestions,
+      };
+    }
+
+    const score = (completeEntries / totalEntries) * maxScore;
+
+    return {
+      breakdown: {
+        category: 'Projects',
+        score,
+        maxScore,
+        percentage: Math.round((score / maxScore) * 100),
+        issues,
+      },
+      suggestions,
+    };
+  }
+
+  /**
+   * Score Skills section
+   */
+  private static scoreSkills(sections: ResumeSection[] = []): {
+    breakdown: ScoreBreakdown;
+    suggestions: ResumeSuggestion[];
+  } {
+    const maxScore = this.WEIGHTS.skills;
+    const issues: string[] = [];
+    const suggestions: ResumeSuggestion[] = [];
+
+    const visibleSections = sections.filter((s) => s.visible);
+
+    if (visibleSections.length === 0) {
+      return {
+        breakdown: {
+          category: 'Skills',
+          score: 0,
+          maxScore,
+          percentage: 0,
+          issues: ['No skills section'],
+        },
+        suggestions: [
+          {
+            id: 'skills-missing',
+            category: 'Skills',
+            severity: 'critical',
+            message: 'Add your skills to highlight your capabilities',
+          },
+        ],
+      };
+    }
+
+    let totalSkills = 0;
+    let totalCategories = 0;
+
+    visibleSections.forEach((section) => {
+      const skills = section.content as Skill[];
+      totalCategories += skills.length;
+
+      skills.forEach((skill) => {
+        if (skill.items && skill.items.length > 0) {
+          totalSkills += skill.items.length;
+        }
+      });
+    });
+
+    if (totalSkills === 0) {
+      issues.push('No skills added');
+      suggestions.push({
+        id: 'skills-empty',
+        category: 'Skills',
+        severity: 'critical',
+        message: 'Add your technical and professional skills',
+      });
+    } else if (totalSkills < 5) {
+      issues.push('Too few skills listed');
+      suggestions.push({
+        id: 'skills-few',
+        category: 'Skills',
+        severity: 'warning',
+        message: 'Add more skills to better showcase your capabilities (aim for at least 5-10)',
+      });
+    }
+
+    // Score based on number of skills (5+ skills = full score)
+    const score = Math.min(totalSkills / 5, 1) * maxScore;
+
+    return {
+      breakdown: {
+        category: 'Skills',
+        score,
+        maxScore,
+        percentage: Math.round((score / maxScore) * 100),
+        issues,
+      },
+      suggestions,
+    };
+  }
+
+  /**
+   * Score Certifications section
+   */
+  private static scoreCertifications(sections: ResumeSection[] = []): {
+    breakdown: ScoreBreakdown;
+    suggestions: ResumeSuggestion[];
+  } {
+    const maxScore = this.WEIGHTS.certifications;
+    const issues: string[] = [];
+    const suggestions: ResumeSuggestion[] = [];
+
+    const visibleSections = sections.filter((s) => s.visible);
+
+    if (visibleSections.length === 0) {
+      return {
+        breakdown: {
+          category: 'Certifications',
+          score: maxScore, // Full score if not present (optional)
+          maxScore,
+          percentage: 100,
+          issues: [],
+        },
+        suggestions: [],
+      };
+    }
+
+    let totalEntries = 0;
+
+    visibleSections.forEach((section) => {
+      const entries = section.content as Certification[];
+      totalEntries += entries.length;
+    });
+
+    if (totalEntries === 0) {
+      return {
+        breakdown: {
+          category: 'Certifications',
+          score: maxScore,
+          maxScore,
+          percentage: 100,
+          issues: [],
+        },
+        suggestions: [],
+      };
+    }
+
+    // If certifications are present, give full score
+    return {
+      breakdown: {
+        category: 'Certifications',
+        score: maxScore,
+        maxScore,
+        percentage: 100,
+        issues: [],
+      },
+      suggestions: [],
+    };
+  }
+
+  /**
+   * Score Awards section
+   */
+  private static scoreAwards(sections: ResumeSection[] = []): {
+    breakdown: ScoreBreakdown;
+    suggestions: ResumeSuggestion[];
+  } {
+    const maxScore = this.WEIGHTS.awards;
+    const issues: string[] = [];
+    const suggestions: ResumeSuggestion[] = [];
+
+    const visibleSections = sections.filter((s) => s.visible);
+
+    if (visibleSections.length === 0) {
+      return {
+        breakdown: {
+          category: 'Awards',
+          score: maxScore, // Full score if not present (optional)
+          maxScore,
+          percentage: 100,
+          issues: [],
+        },
+        suggestions: [],
+      };
+    }
+
+    let totalEntries = 0;
+
+    visibleSections.forEach((section) => {
+      const entries = section.content as Award[];
+      totalEntries += entries.length;
+    });
+
+    if (totalEntries === 0) {
+      return {
+        breakdown: {
+          category: 'Awards',
+          score: maxScore,
+          maxScore,
+          percentage: 100,
+          issues: [],
+        },
+        suggestions: [],
+      };
+    }
+
+    // If awards are present, give full score
+    return {
+      breakdown: {
+        category: 'Awards',
+        score: maxScore,
+        maxScore,
+        percentage: 100,
+        issues: [],
+      },
+      suggestions: [],
+    };
+  }
+
+  /**
+   * Check best practices
+   */
+  private static checkBestPractices(resume: Resume): ResumeSuggestion[] {
+    const suggestions: ResumeSuggestion[] = [];
+
+    // Check resume length
+    if (resume.metadata.page_count > 2) {
+      suggestions.push({
+        id: 'best-practice-length',
+        category: 'Best Practices',
+        severity: 'warning',
+        message: 'Consider keeping your resume to 1-2 pages for better readability',
+      });
+    }
+
+    // Check word count
+    if (resume.metadata.word_count < 200) {
+      suggestions.push({
+        id: 'best-practice-word-count-low',
+        category: 'Best Practices',
+        severity: 'warning',
+        message: 'Your resume seems sparse. Add more details to showcase your experience',
+      });
+    } else if (resume.metadata.word_count > 800) {
+      suggestions.push({
+        id: 'best-practice-word-count-high',
+        category: 'Best Practices',
+        severity: 'info',
+        message: 'Your resume is quite detailed. Consider being more concise',
+      });
+    }
+
+    // Check section order
+    const sectionOrder = resume.sections.map((s) => s.type);
+    if (sectionOrder[0] !== 'personal_info') {
+      suggestions.push({
+        id: 'best-practice-section-order',
+        category: 'Best Practices',
+        severity: 'info',
+        message: 'Consider placing Personal Information at the top of your resume',
+      });
+    }
+
+    return suggestions;
+  }
+
+  /**
+   * Prioritize suggestions by severity
+   */
+  private static prioritizeSuggestions(suggestions: ResumeSuggestion[]): ResumeSuggestion[] {
+    const severityOrder = { critical: 0, warning: 1, info: 2 };
+    return suggestions.sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity]);
+  }
+
+  /**
+   * Get section content length
+   */
+  static getSectionContentLength(section: ResumeSection): number {
+    if (section.type === 'personal_info') {
+      const content = section.content as PersonalInfo;
+      return Object.values(content).join(' ').length;
+    } else if (Array.isArray(section.content)) {
+      return JSON.stringify(section.content).length;
+    } else if (typeof section.content === 'object') {
+      const content = section.content as CustomContent;
+      return content.content?.length || 0;
+    }
+    return 0;
+  }
+
+  /**
+   * Check if section is empty
+   */
+  static isSectionEmpty(section: ResumeSection): boolean {
+    if (section.type === 'personal_info') {
+      const content = section.content as PersonalInfo;
+      return !content.full_name && !content.email && !content.phone;
+    } else if (Array.isArray(section.content)) {
+      return section.content.length === 0;
+    } else if (typeof section.content === 'object') {
+      const content = section.content as CustomContent;
+      return !content.content || content.content.trim().length === 0;
+    }
+    return true;
+  }
+
+  /**
+   * Check if section has minimal content
+   */
+  static hasMinimalContent(section: ResumeSection): boolean {
+    const length = this.getSectionContentLength(section);
+    return length > 0 && length < this.MIN_CONTENT_LENGTH;
+  }
+}
diff --git a/lib/storage/offline-storage.ts b/lib/storage/offline-storage.ts
new file mode 100644
index 000000000..0e7c7d2fb
--- /dev/null
+++ b/lib/storage/offline-storage.ts
@@ -0,0 +1,202 @@
+/**
+ * Offline Storage Utility
+ * Provides local storage fallback for resume data when offline
+ */
+
+import { Resume } from '@/types/resume';
+
+const STORAGE_KEY_PREFIX = 'resume_offline_';
+const PENDING_SAVES_KEY = 'resume_pending_saves';
+
+export interface PendingSave {
+  resumeId: string;
+  timestamp: number;
+  data: Resume;
+}
+
+/**
+ * Save resume to local storage
+ */
+export function saveToLocalStorage(resume: Resume): void {
+  try {
+    const key = `${STORAGE_KEY_PREFIX}${resume.id}`;
+    localStorage.setItem(key, JSON.stringify(resume));
+    
+    // Add to pending saves queue
+    addToPendingSaves(resume);
+  } catch (error) {
+    console.error('Failed to save to local storage:', error);
+  }
+}
+
+/**
+ * Load resume from local storage
+ */
+export function loadFromLocalStorage(resumeId: string): Resume | null {
+  try {
+    const key = `${STORAGE_KEY_PREFIX}${resumeId}`;
+    const data = localStorage.getItem(key);
+    
+    if (!data) return null;
+    
+    return JSON.parse(data) as Resume;
+  } catch (error) {
+    console.error('Failed to load from local storage:', error);
+    return null;
+  }
+}
+
+/**
+ * Remove resume from local storage
+ */
+export function removeFromLocalStorage(resumeId: string): void {
+  try {
+    const key = `${STORAGE_KEY_PREFIX}${resumeId}`;
+    localStorage.removeItem(key);
+    
+    // Remove from pending saves
+    removeFromPendingSaves(resumeId);
+  } catch (error) {
+    console.error('Failed to remove from local storage:', error);
+  }
+}
+
+/**
+ * Add resume to pending saves queue
+ */
+function addToPendingSaves(resume: Resume): void {
+  try {
+    const pendingSaves = getPendingSaves();
+    
+    // Remove existing entry for this resume if any
+    const filtered = pendingSaves.filter((save) => save.resumeId !== resume.id);
+    
+    // Add new entry
+    filtered.push({
+      resumeId: resume.id,
+      timestamp: Date.now(),
+      data: resume,
+    });
+    
+    localStorage.setItem(PENDING_SAVES_KEY, JSON.stringify(filtered));
+  } catch (error) {
+    console.error('Failed to add to pending saves:', error);
+  }
+}
+
+/**
+ * Get all pending saves
+ */
+export function getPendingSaves(): PendingSave[] {
+  try {
+    const data = localStorage.getItem(PENDING_SAVES_KEY);
+    
+    if (!data) return [];
+    
+    return JSON.parse(data) as PendingSave[];
+  } catch (error) {
+    console.error('Failed to get pending saves:', error);
+    return [];
+  }
+}
+
+/**
+ * Remove resume from pending saves
+ */
+function removeFromPendingSaves(resumeId: string): void {
+  try {
+    const pendingSaves = getPendingSaves();
+    const filtered = pendingSaves.filter((save) => save.resumeId !== resumeId);
+    
+    localStorage.setItem(PENDING_SAVES_KEY, JSON.stringify(filtered));
+  } catch (error) {
+    console.error('Failed to remove from pending saves:', error);
+  }
+}
+
+/**
+ * Clear all pending saves
+ */
+export function clearPendingSaves(): void {
+  try {
+    localStorage.removeItem(PENDING_SAVES_KEY);
+  } catch (error) {
+    console.error('Failed to clear pending saves:', error);
+  }
+}
+
+/**
+ * Check if there are pending saves
+ */
+export function hasPendingSaves(): boolean {
+  return getPendingSaves().length > 0;
+}
+
+/**
+ * Get storage usage information
+ */
+export function getStorageInfo(): {
+  used: number;
+  available: number;
+  percentage: number;
+} {
+  try {
+    let used = 0;
+    
+    // Calculate used storage
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key?.startsWith(STORAGE_KEY_PREFIX) || key === PENDING_SAVES_KEY) {
+        const value = localStorage.getItem(key);
+        if (value) {
+          used += key.length + value.length;
+        }
+      }
+    }
+    
+    // Estimate available storage (5MB typical limit)
+    const available = 5 * 1024 * 1024; // 5MB in bytes
+    const percentage = (used / available) * 100;
+    
+    return {
+      used,
+      available,
+      percentage: Math.min(percentage, 100),
+    };
+  } catch (error) {
+    console.error('Failed to get storage info:', error);
+    return {
+      used: 0,
+      available: 0,
+      percentage: 0,
+    };
+  }
+}
+
+/**
+ * Clear old offline data (older than 7 days)
+ */
+export function clearOldOfflineData(): void {
+  try {
+    const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
+    const pendingSaves = getPendingSaves();
+    
+    // Filter out old saves
+    const recentSaves = pendingSaves.filter(
+      (save) => save.timestamp > sevenDaysAgo
+    );
+    
+    // Remove old resume data from local storage
+    pendingSaves.forEach((save) => {
+      if (save.timestamp <= sevenDaysAgo) {
+        const key = `${STORAGE_KEY_PREFIX}${save.resumeId}`;
+        localStorage.removeItem(key);
+      }
+    });
+    
+    // Update pending saves
+    localStorage.setItem(PENDING_SAVES_KEY, JSON.stringify(recentSaves));
+  } catch (error) {
+    console.error('Failed to clear old offline data:', error);
+  }
+}
diff --git a/lib/utils/debounce.ts b/lib/utils/debounce.ts
new file mode 100644
index 000000000..83af9c774
--- /dev/null
+++ b/lib/utils/debounce.ts
@@ -0,0 +1,78 @@
+/**
+ * Debounce utility for performance optimization
+ * Delays function execution until after a specified wait time has elapsed
+ * since the last time it was invoked
+ */
+
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  return function debounced(...args: Parameters<T>) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+}
+
+/**
+ * Debounce with promise support
+ * Returns a promise that resolves when the debounced function executes
+ */
+export function debounceAsync<T extends (...args: any[]) => Promise<any>>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => Promise<ReturnType<T>> {
+  let timeoutId: NodeJS.Timeout | null = null;
+  let pendingPromise: Promise<ReturnType<T>> | null = null;
+
+  return function debouncedAsync(...args: Parameters<T>): Promise<ReturnType<T>> {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    if (!pendingPromise) {
+      pendingPromise = new Promise((resolve, reject) => {
+        timeoutId = setTimeout(async () => {
+          try {
+            const result = await func(...args);
+            resolve(result);
+          } catch (error) {
+            reject(error);
+          } finally {
+            pendingPromise = null;
+          }
+        }, wait);
+      });
+    }
+
+    return pendingPromise;
+  };
+}
+
+/**
+ * Throttle utility for performance optimization
+ * Ensures function is called at most once per specified time period
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean = false;
+
+  return function throttled(...args: Parameters<T>) {
+    if (!inThrottle) {
+      func(...args);
+      inThrottle = true;
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+  };
+}
diff --git a/lib/validation/resume-validation.ts b/lib/validation/resume-validation.ts
new file mode 100644
index 000000000..a7637ebe9
--- /dev/null
+++ b/lib/validation/resume-validation.ts
@@ -0,0 +1,504 @@
+/**
+ * Resume Form Validation Utilities
+ * Provides validation functions for resume fields
+ */
+
+export interface ValidationResult {
+  isValid: boolean;
+  error?: string;
+}
+
+/**
+ * Email validation
+ */
+export function validateEmail(email: string): ValidationResult {
+  if (!email) {
+    return { isValid: true }; // Empty is valid (optional field)
+  }
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  
+  if (!emailRegex.test(email)) {
+    return {
+      isValid: false,
+      error: 'Please enter a valid email address',
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * URL validation
+ */
+export function validateURL(url: string, fieldName = 'URL'): ValidationResult {
+  if (!url) {
+    return { isValid: true }; // Empty is valid (optional field)
+  }
+
+  try {
+    const urlObj = new URL(url);
+    
+    // Check if protocol is http or https
+    if (!['http:', 'https:'].includes(urlObj.protocol)) {
+      return {
+        isValid: false,
+        error: `${fieldName} must start with http:// or https://`,
+      };
+    }
+
+    return { isValid: true };
+  } catch {
+    return {
+      isValid: false,
+      error: `Please enter a valid ${fieldName}`,
+    };
+  }
+}
+
+/**
+ * LinkedIn URL validation
+ */
+export function validateLinkedInURL(url: string): ValidationResult {
+  if (!url) {
+    return { isValid: true }; // Empty is valid (optional field)
+  }
+
+  const basicValidation = validateURL(url, 'LinkedIn URL');
+  if (!basicValidation.isValid) {
+    return basicValidation;
+  }
+
+  // Check if it's a LinkedIn URL
+  if (!url.includes('linkedin.com/')) {
+    return {
+      isValid: false,
+      error: 'Please enter a valid LinkedIn profile URL',
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * GitHub URL validation
+ */
+export function validateGitHubURL(url: string): ValidationResult {
+  if (!url) {
+    return { isValid: true }; // Empty is valid (optional field)
+  }
+
+  const basicValidation = validateURL(url, 'GitHub URL');
+  if (!basicValidation.isValid) {
+    return basicValidation;
+  }
+
+  // Check if it's a GitHub URL
+  if (!url.includes('github.com/')) {
+    return {
+      isValid: false,
+      error: 'Please enter a valid GitHub profile URL',
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Phone number validation (flexible format)
+ */
+export function validatePhoneNumber(phone: string): ValidationResult {
+  if (!phone) {
+    return { isValid: true }; // Empty is valid (optional field)
+  }
+
+  // Remove common formatting characters
+  const cleaned = phone.replace(/[\s\-\(\)\+\.]/g, '');
+
+  // Check if it contains only digits after cleaning
+  if (!/^\d+$/.test(cleaned)) {
+    return {
+      isValid: false,
+      error: 'Phone number should contain only digits and formatting characters',
+    };
+  }
+
+  // Check length (between 7 and 15 digits is reasonable for international numbers)
+  if (cleaned.length < 7 || cleaned.length > 15) {
+    return {
+      isValid: false,
+      error: 'Phone number should be between 7 and 15 digits',
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Date validation
+ */
+export function validateDate(date: string): ValidationResult {
+  if (!date) {
+    return { isValid: true }; // Empty is valid (optional field)
+  }
+
+  const dateObj = new Date(date);
+  
+  if (isNaN(dateObj.getTime())) {
+    return {
+      isValid: false,
+      error: 'Please enter a valid date',
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Date range validation (start date must be before end date)
+ */
+export function validateDateRange(
+  startDate: string,
+  endDate: string | undefined,
+  isCurrent: boolean
+): ValidationResult {
+  // If current position/education, end date is not required
+  if (isCurrent) {
+    return { isValid: true };
+  }
+
+  if (!startDate) {
+    return {
+      isValid: false,
+      error: 'Start date is required',
+    };
+  }
+
+  const startValidation = validateDate(startDate);
+  if (!startValidation.isValid) {
+    return startValidation;
+  }
+
+  if (!endDate) {
+    return {
+      isValid: false,
+      error: 'End date is required (or mark as current)',
+    };
+  }
+
+  const endValidation = validateDate(endDate);
+  if (!endValidation.isValid) {
+    return endValidation;
+  }
+
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  if (start > end) {
+    return {
+      isValid: false,
+      error: 'Start date must be before end date',
+    };
+  }
+
+  // Check if dates are not too far in the future
+  const now = new Date();
+  const oneYearFromNow = new Date();
+  oneYearFromNow.setFullYear(now.getFullYear() + 1);
+
+  if (start > oneYearFromNow) {
+    return {
+      isValid: false,
+      error: 'Start date cannot be more than 1 year in the future',
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Required field validation
+ */
+export function validateRequired(value: string, fieldName = 'This field'): ValidationResult {
+  if (!value || value.trim() === '') {
+    return {
+      isValid: false,
+      error: `${fieldName} is required`,
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Minimum length validation
+ */
+export function validateMinLength(
+  value: string,
+  minLength: number,
+  fieldName = 'This field'
+): ValidationResult {
+  if (!value) {
+    return { isValid: true }; // Empty is valid (use validateRequired separately)
+  }
+
+  if (value.trim().length < minLength) {
+    return {
+      isValid: false,
+      error: `${fieldName} must be at least ${minLength} characters`,
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Maximum length validation
+ */
+export function validateMaxLength(
+  value: string,
+  maxLength: number,
+  fieldName = 'This field'
+): ValidationResult {
+  if (!value) {
+    return { isValid: true };
+  }
+
+  if (value.length > maxLength) {
+    return {
+      isValid: false,
+      error: `${fieldName} must be no more than ${maxLength} characters`,
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Validate all fields in personal info section
+ */
+export function validatePersonalInfo(data: {
+  full_name?: string;
+  email?: string;
+  phone?: string;
+  website?: string;
+  linkedin?: string;
+  github?: string;
+}): Record<string, string> {
+  const errors: Record<string, string> = {};
+
+  // Validate email
+  if (data.email) {
+    const emailValidation = validateEmail(data.email);
+    if (!emailValidation.isValid && emailValidation.error) {
+      errors.email = emailValidation.error;
+    }
+  }
+
+  // Validate phone
+  if (data.phone) {
+    const phoneValidation = validatePhoneNumber(data.phone);
+    if (!phoneValidation.isValid && phoneValidation.error) {
+      errors.phone = phoneValidation.error;
+    }
+  }
+
+  // Validate website
+  if (data.website) {
+    const websiteValidation = validateURL(data.website, 'Website');
+    if (!websiteValidation.isValid && websiteValidation.error) {
+      errors.website = websiteValidation.error;
+    }
+  }
+
+  // Validate LinkedIn
+  if (data.linkedin) {
+    const linkedinValidation = validateLinkedInURL(data.linkedin);
+    if (!linkedinValidation.isValid && linkedinValidation.error) {
+      errors.linkedin = linkedinValidation.error;
+    }
+  }
+
+  // Validate GitHub
+  if (data.github) {
+    const githubValidation = validateGitHubURL(data.github);
+    if (!githubValidation.isValid && githubValidation.error) {
+      errors.github = githubValidation.error;
+    }
+  }
+
+  return errors;
+}
+
+/**
+ * Validate education entry
+ */
+export function validateEducation(data: {
+  institution?: string;
+  degree?: string;
+  field?: string;
+  start_date?: string;
+  end_date?: string;
+  current?: boolean;
+}): Record<string, string> {
+  const errors: Record<string, string> = {};
+
+  // Validate required fields
+  if (!data.institution?.trim()) {
+    errors.institution = 'Institution is required';
+  }
+
+  if (!data.degree?.trim()) {
+    errors.degree = 'Degree is required';
+  }
+
+  // Validate date range
+  if (data.start_date) {
+    const dateRangeValidation = validateDateRange(
+      data.start_date,
+      data.end_date,
+      data.current || false
+    );
+    if (!dateRangeValidation.isValid && dateRangeValidation.error) {
+      errors.dates = dateRangeValidation.error;
+    }
+  }
+
+  return errors;
+}
+
+/**
+ * Validate experience entry
+ */
+export function validateExperience(data: {
+  company?: string;
+  position?: string;
+  start_date?: string;
+  end_date?: string;
+  current?: boolean;
+}): Record<string, string> {
+  const errors: Record<string, string> = {};
+
+  // Validate required fields
+  if (!data.company?.trim()) {
+    errors.company = 'Company is required';
+  }
+
+  if (!data.position?.trim()) {
+    errors.position = 'Position is required';
+  }
+
+  // Validate date range
+  if (data.start_date) {
+    const dateRangeValidation = validateDateRange(
+      data.start_date,
+      data.end_date,
+      data.current || false
+    );
+    if (!dateRangeValidation.isValid && dateRangeValidation.error) {
+      errors.dates = dateRangeValidation.error;
+    }
+  }
+
+  return errors;
+}
+
+/**
+ * Validate project entry
+ */
+export function validateProject(data: {
+  name?: string;
+  url?: string;
+  github?: string;
+  start_date?: string;
+  end_date?: string;
+}): Record<string, string> {
+  const errors: Record<string, string> = {};
+
+  // Validate required fields
+  if (!data.name?.trim()) {
+    errors.name = 'Project name is required';
+  }
+
+  // Validate URLs
+  if (data.url) {
+    const urlValidation = validateURL(data.url, 'Project URL');
+    if (!urlValidation.isValid && urlValidation.error) {
+      errors.url = urlValidation.error;
+    }
+  }
+
+  if (data.github) {
+    const githubValidation = validateGitHubURL(data.github);
+    if (!githubValidation.isValid && githubValidation.error) {
+      errors.github = githubValidation.error;
+    }
+  }
+
+  // Validate date range (optional for projects)
+  if (data.start_date && data.end_date) {
+    const dateRangeValidation = validateDateRange(data.start_date, data.end_date, false);
+    if (!dateRangeValidation.isValid && dateRangeValidation.error) {
+      errors.dates = dateRangeValidation.error;
+    }
+  }
+
+  return errors;
+}
+
+/**
+ * Validate certification entry
+ */
+export function validateCertification(data: {
+  name?: string;
+  issuer?: string;
+  date?: string;
+  expiry_date?: string;
+  url?: string;
+}): Record<string, string> {
+  const errors: Record<string, string> = {};
+
+  // Validate required fields
+  if (!data.name?.trim()) {
+    errors.name = 'Certification name is required';
+  }
+
+  if (!data.issuer?.trim()) {
+    errors.issuer = 'Issuer is required';
+  }
+
+  // Validate dates
+  if (data.date) {
+    const dateValidation = validateDate(data.date);
+    if (!dateValidation.isValid && dateValidation.error) {
+      errors.date = dateValidation.error;
+    }
+  }
+
+  if (data.expiry_date) {
+    const expiryValidation = validateDate(data.expiry_date);
+    if (!expiryValidation.isValid && expiryValidation.error) {
+      errors.expiry_date = expiryValidation.error;
+    }
+
+    // Check if expiry is after issue date
+    if (data.date && expiryValidation.isValid) {
+      const issueDate = new Date(data.date);
+      const expiryDate = new Date(data.expiry_date);
+      
+      if (expiryDate < issueDate) {
+        errors.expiry_date = 'Expiry date must be after issue date';
+      }
+    }
+  }
+
+  // Validate URL
+  if (data.url) {
+    const urlValidation = validateURL(data.url, 'Certification URL');
+    if (!urlValidation.isValid && urlValidation.error) {
+      errors.url = urlValidation.error;
+    }
+  }
+
+  return errors;
+}
diff --git a/package-lock.json b/package-lock.json
index 1b3875325..c9e51992b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,11 @@
   "packages": {
     "": {
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@google/generative-ai": "^0.24.1",
+        "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.1",
         "@radix-ui/react-dialog": "^1.1.14",
@@ -14,6 +18,7 @@
         "@radix-ui/react-progress": "^1.1.7",
         "@radix-ui/react-select": "^2.2.5",
         "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slider": "^1.3.6",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.5",
         "@radix-ui/react-tabs": "^1.1.12",
@@ -37,6 +42,7 @@
         "clsx": "^2.1.1",
         "critters": "^0.0.25",
         "date-fns": "^4.1.0",
+        "docx": "^9.5.1",
         "dompurify": "^3.2.6",
         "dotenv": "^17.2.1",
         "framer-motion": "^12.17.3",
@@ -820,6 +826,59 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.5.tgz",
@@ -2466,6 +2525,40 @@
       "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+      "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -2603,20 +2696,20 @@
       }
     },
     "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
-      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
         "@radix-ui/react-focus-scope": "1.1.7",
         "@radix-ui/react-id": "1.1.1",
         "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-presence": "1.1.5",
         "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-slot": "1.2.3",
         "@radix-ui/react-use-controllable-state": "1.2.2",
@@ -2638,6 +2731,78 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -3054,6 +3219,45 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
+      "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -7300,6 +7504,12 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cosmiconfig": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
@@ -8107,6 +8317,56 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/docx": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/docx/-/docx-9.5.1.tgz",
+      "integrity": "sha512-ABDI7JEirFD2+bHhOBlsGZxaG1UgZb2M/QMKhLSDGgVNhxDesTCDcP+qoDnDGjZ4EOXTRfUjUgwHVuZ6VSTfWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^24.0.1",
+        "hash.js": "^1.1.7",
+        "jszip": "^3.10.1",
+        "nanoid": "^5.1.3",
+        "xml": "^1.0.1",
+        "xml-js": "^1.6.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/docx/node_modules/@types/node": {
+      "version": "24.9.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.9.1.tgz",
+      "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/docx/node_modules/nanoid": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
+      "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/docx/node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
     "node_modules/dom-accessibility-api": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
@@ -9943,6 +10203,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -12629,6 +12899,18 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/kapsule": {
       "version": "1.16.3",
       "resolved": "https://registry.npmjs.org/kapsule/-/kapsule-1.16.3.tgz",
@@ -13598,6 +13880,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "license": "ISC"
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -14770,6 +15058,12 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -15519,6 +15813,42 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/readable-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -15979,6 +16309,12 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "license": "ISC"
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -16132,6 +16468,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/sharp": {
       "version": "0.34.3",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.3.tgz",
@@ -18832,6 +19174,24 @@
         }
       }
     },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
+      "license": "MIT"
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/package.json b/package.json
index 6b0af9594..13f7166fb 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,11 @@
     "sync:reserved-usernames": "node scripts/sync-reserved-usernames.js"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@google/generative-ai": "^0.24.1",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-dialog": "^1.1.14",
@@ -53,6 +57,7 @@
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
@@ -76,6 +81,7 @@
     "clsx": "^2.1.1",
     "critters": "^0.0.25",
     "date-fns": "^4.1.0",
+    "docx": "^9.5.1",
     "dompurify": "^3.2.6",
     "dotenv": "^17.2.1",
     "framer-motion": "^12.17.3",
diff --git a/types/resume.ts b/types/resume.ts
new file mode 100644
index 000000000..4122b987d
--- /dev/null
+++ b/types/resume.ts
@@ -0,0 +1,403 @@
+// Resume Builder Type Definitions
+
+export interface Resume {
+  id: string;
+  user_id: string;
+  title: string;
+  template_id: string;
+  sections: ResumeSection[];
+  styling: ResumeStyling;
+  metadata: ResumeMetadata;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ResumeSection {
+  id: string;
+  type: SectionType;
+  title: string;
+  order: number;
+  visible: boolean;
+  content: SectionContent;
+}
+
+export type SectionType =
+  | 'personal_info'
+  | 'education'
+  | 'experience'
+  | 'projects'
+  | 'skills'
+  | 'certifications'
+  | 'awards'
+  | 'custom';
+
+// Section Content Types
+
+export interface PersonalInfo {
+  full_name: string;
+  email: string;
+  phone: string;
+  location: string;
+  website?: string;
+  linkedin?: string;
+  github?: string;
+  summary?: string;
+}
+
+export interface Education {
+  id: string;
+  institution: string;
+  degree: string;
+  field: string;
+  start_date: string;
+  end_date?: string;
+  current: boolean;
+  gpa?: string;
+  achievements?: string[];
+}
+
+export interface Experience {
+  id: string;
+  company: string;
+  position: string;
+  location: string;
+  start_date: string;
+  end_date?: string;
+  current: boolean;
+  description: string;
+  achievements: string[];
+}
+
+export interface Project {
+  id: string;
+  name: string;
+  description: string;
+  technologies: string[];
+  url?: string;
+  github?: string;
+  start_date?: string;
+  end_date?: string;
+}
+
+export interface Skill {
+  category: string;
+  items: string[];
+}
+
+export interface Certification {
+  id: string;
+  name: string;
+  issuer: string;
+  date: string;
+  expiry_date?: string;
+  credential_id?: string;
+  url?: string;
+}
+
+export interface Award {
+  id: string;
+  title: string;
+  issuer: string;
+  date: string;
+  description?: string;
+}
+
+export interface CustomContent {
+  title: string;
+  content: string;
+}
+
+export type SectionContent =
+  | PersonalInfo
+  | Education[]
+  | Experience[]
+  | Project[]
+  | Skill[]
+  | Certification[]
+  | Award[]
+  | CustomContent;
+
+// Styling Configuration
+
+export interface ResumeStyling {
+  font_family: string;
+  font_size_body: number;
+  font_size_heading: number;
+  color_primary: string;
+  color_text: string;
+  color_accent: string;
+  margin_top: number;
+  margin_bottom: number;
+  margin_left: number;
+  margin_right: number;
+  line_height: number;
+  section_spacing: number;
+}
+
+// Resume Metadata
+
+export interface ResumeMetadata {
+  page_count: number;
+  word_count: number;
+  completeness_score: number;
+  last_exported?: string;
+  export_count: number;
+}
+
+// Database Types (for Supabase queries)
+
+export interface ResumeRow {
+  id: string;
+  user_id: string;
+  title: string;
+  template_id: string;
+  sections: unknown; // JSONB
+  styling: unknown; // JSONB
+  metadata: unknown; // JSONB
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ResumeInsert {
+  user_id: string;
+  title?: string;
+  template_id?: string;
+  sections?: unknown;
+  styling?: unknown;
+  metadata?: unknown;
+}
+
+export interface ResumeUpdate {
+  title?: string;
+  template_id?: string;
+  sections?: unknown;
+  styling?: unknown;
+  metadata?: unknown;
+}
+
+// Helper Types
+
+export interface SectionTypeInfo {
+  type: SectionType;
+  label: string;
+  icon: string;
+  defaultTitle: string;
+  description: string;
+}
+
+export const SECTION_TYPES: Record<SectionType, SectionTypeInfo> = {
+  personal_info: {
+    type: 'personal_info',
+    label: 'Personal Information',
+    icon: 'User',
+    defaultTitle: 'Personal Information',
+    description: 'Your contact details and summary',
+  },
+  education: {
+    type: 'education',
+    label: 'Education',
+    icon: 'GraduationCap',
+    defaultTitle: 'Education',
+    description: 'Your academic background',
+  },
+  experience: {
+    type: 'experience',
+    label: 'Work Experience',
+    icon: 'Briefcase',
+    defaultTitle: 'Work Experience',
+    description: 'Your professional experience',
+  },
+  projects: {
+    type: 'projects',
+    label: 'Projects',
+    icon: 'Code',
+    defaultTitle: 'Projects',
+    description: 'Your personal or professional projects',
+  },
+  skills: {
+    type: 'skills',
+    label: 'Skills',
+    icon: 'Wrench',
+    defaultTitle: 'Skills',
+    description: 'Your technical and soft skills',
+  },
+  certifications: {
+    type: 'certifications',
+    label: 'Certifications',
+    icon: 'Award',
+    defaultTitle: 'Certifications',
+    description: 'Your professional certifications',
+  },
+  awards: {
+    type: 'awards',
+    label: 'Awards & Honors',
+    icon: 'Trophy',
+    defaultTitle: 'Awards & Honors',
+    description: 'Your achievements and recognition',
+  },
+  custom: {
+    type: 'custom',
+    label: 'Custom Section',
+    icon: 'Plus',
+    defaultTitle: 'Custom Section',
+    description: 'Add any custom content',
+  },
+};
+
+// Template Types
+
+export type TemplateId = 'modern' | 'classic' | 'minimal' | 'creative' | 'executive';
+
+export interface TemplateInfo {
+  id: TemplateId;
+  name: string;
+  description: string;
+  thumbnail: string;
+  category: 'professional' | 'creative' | 'minimal';
+}
+
+export const TEMPLATES: Record<TemplateId, TemplateInfo> = {
+  modern: {
+    id: 'modern',
+    name: 'Modern',
+    description: 'Clean, modern layout with purple accents',
+    thumbnail: '/templates/modern.png',
+    category: 'professional',
+  },
+  classic: {
+    id: 'classic',
+    name: 'Classic',
+    description: 'Traditional single-column layout',
+    thumbnail: '/templates/classic.png',
+    category: 'professional',
+  },
+  minimal: {
+    id: 'minimal',
+    name: 'Minimal',
+    description: 'Ultra-clean with maximum whitespace',
+    thumbnail: '/templates/minimal.png',
+    category: 'minimal',
+  },
+  creative: {
+    id: 'creative',
+    name: 'Creative',
+    description: 'Bold, colorful with unique structure',
+    thumbnail: '/templates/creative.png',
+    category: 'creative',
+  },
+  executive: {
+    id: 'executive',
+    name: 'Executive',
+    description: 'Professional layout for senior positions',
+    thumbnail: '/templates/executive.png',
+    category: 'professional',
+  },
+};
+
+// Validation Types
+
+export interface ValidationError {
+  field: string;
+  message: string;
+  type: 'required' | 'format' | 'length' | 'custom';
+}
+
+export interface ValidationResult {
+  valid: boolean;
+  errors: ValidationError[];
+}
+
+// Export Types
+
+export type ExportFormat = 'pdf' | 'docx' | 'json';
+
+export interface ExportOptions {
+  format: ExportFormat;
+  filename?: string;
+  includeMetadata?: boolean;
+}
+
+export interface ExportResult {
+  success: boolean;
+  blob?: Blob;
+  error?: string;
+  filename: string;
+}
+
+// Import Types
+
+export interface ImportOptions {
+  source: 'json' | 'linkedin';
+  data: string | object;
+  mergeStrategy?: 'replace' | 'merge';
+}
+
+export interface ImportResult {
+  success: boolean;
+  resume?: Resume;
+  fieldsPopulated?: number;
+  errors?: string[];
+}
+
+// Error Types
+
+export enum ResumeErrorCode {
+  LOAD_FAILED = 'LOAD_FAILED',
+  SAVE_FAILED = 'SAVE_FAILED',
+  EXPORT_FAILED = 'EXPORT_FAILED',
+  IMPORT_FAILED = 'IMPORT_FAILED',
+  VALIDATION_FAILED = 'VALIDATION_FAILED',
+  NETWORK_ERROR = 'NETWORK_ERROR',
+  UNAUTHORIZED = 'UNAUTHORIZED',
+  NOT_FOUND = 'NOT_FOUND',
+}
+
+export class ResumeError extends Error {
+  constructor(
+    message: string,
+    public code: ResumeErrorCode,
+    public details?: unknown
+  ) {
+    super(message);
+    this.name = 'ResumeError';
+  }
+}
+
+// Utility Types
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+export type RequiredFields<T, K extends keyof T> = T & Required<Pick<T, K>>;
+
+// Default Values
+
+export const DEFAULT_STYLING: ResumeStyling = {
+  font_family: 'Inter',
+  font_size_body: 11,
+  font_size_heading: 16,
+  color_primary: '#8b5cf6',
+  color_text: '#1f2937',
+  color_accent: '#6366f1',
+  margin_top: 0.75,
+  margin_bottom: 0.75,
+  margin_left: 0.75,
+  margin_right: 0.75,
+  line_height: 1.5,
+  section_spacing: 1.25,
+};
+
+export const DEFAULT_METADATA: ResumeMetadata = {
+  page_count: 1,
+  word_count: 0,
+  completeness_score: 0,
+  export_count: 0,
+};
+
+export const DEFAULT_PERSONAL_INFO: PersonalInfo = {
+  full_name: '',
+  email: '',
+  phone: '',
+  location: '',
+};