+```
+
+Clicking the image opens the viewer. If multiple images have this class, they form a gallery.
+
+### Markdown Integration
+
+For markdown-rendered content, images are automatically tagged. If you need to manually apply the viewer class:
+
+```tsx
+import { ensureImageViewerClass } from '@/utils/imageViewerRenderers';
+import { useRef, useEffect } from 'react';
+
+export function MarkdownPage() {
+ const contentRef = useRef{/* rendered markdown */}
;
+}
+```
+
+### Manual Component Usage
+
+Use the `ImageViewer` component directly for custom image galleries:
+
+```tsx
+import { ImageViewer, type ImageViewerImage } from '@/components/ImageViewer/ImageViewer';
+import { useState } from 'react';
+
+export function GalleryPage() {
+ const [isOpen, setIsOpen] = useState(false);
+ const [currentIndex, setCurrentIndex] = useState(0);
+
+ const images: ImageViewerImage[] = [
+ {
+ src: '/photo1.jpg',
+ alt: 'Photo 1',
+ title: 'First Photo',
+ caption: 'This is the first photo in the gallery',
+ },
+ {
+ src: '/photo2.jpg',
+ alt: 'Photo 2',
+ caption: 'Second photo',
+ },
+ ];
+
+ return (
+ <>
+
+
+ {/* content with images */}
;
+}
+```
+
+## Styling & Customization
+
+The ImageViewer uses CSS Modules for scoped styling. To customize:
+
+1. Edit `ImageViewer.module.css` directly
+2. Or extend by passing additional classes via CSS class modifications
+
+Key CSS classes:
+- `.overlay` - Dark background overlay
+- `.container` - Main viewer container
+- `.image` - Image element
+- `.controls` - Zoom control toolbar
+- `.navButton` - Navigation arrow buttons
+- `.closeButton` - Close button
+- `.caption` - Caption container
+- `.counter` - Image counter (X / Y)
+
+## Accessibility Features
+
+- **ARIA Labels**: All buttons have descriptive `aria-label` attributes
+- **Keyboard Navigation**: Full keyboard support via shortcuts
+- **Focus Management**: Focus returns to clicked image on close
+- **Screen Readers**: Semantic HTML with proper roles
+- **Touch Accessible**: Large touch targets on mobile (2rem minimum)
+
+## Performance Considerations
+
+- Uses CSS transforms for smooth animations
+- Debounces zoom and pan operations
+- Lazy loads images only when viewer opens
+- Minimal re-renders via React hooks
+- Responsive breakpoints (768px, 480px) for mobile optimization
+
+## Browser Support
+
+- Chrome/Edge: Latest versions
+- Firefox: Latest versions
+- Safari: Latest versions (including iOS Safari)
+- Mobile browsers: iOS Safari, Chrome Mobile, Firefox Mobile
+
+## Examples
+
+### Gallery with Mixed Media
+
+```tsx
+const galleryImages: ImageViewerImage[] = [
+ {
+ src: '/images/screenshot1.png',
+ title: 'Application Overview',
+ caption: 'Main dashboard showing key metrics',
+ },
+ {
+ src: '/images/diagram.svg',
+ title: 'Architecture Diagram',
+ caption: 'System components and their relationships',
+ },
+ {
+ src: '/images/results.jpg',
+ title: 'Results',
+ caption: 'Final output visualization',
+ },
+];
+```
+
+### Documentation Page with Images
+
+```tsx
+export function DocPage() {
+ const contentRef = useRef
+ 
+
+ );
+}
+```
+
+## Troubleshooting
+
+### Images not opening viewer
+- Ensure `image-viewer-trigger` class is added to img elements
+- Check that ImageViewerProvider wraps the app
+- Verify images have proper `src` attributes
+
+### Zoom/pan not working
+- Make sure you're using a supported browser
+- Try disabling browser extensions
+- Check console for JavaScript errors
+
+### Images appear blurry when zoomed
+- Use high-resolution source images (300+ DPI)
+- Avoid excessive zoom levels (max 5x)
+- Check image optimization settings
+
+## Architecture
+
+The component uses a Provider pattern for seamless integration:
+
+```
+ImageViewerProvider
+ ↓ wraps entire app
+ ↓ provides ImageViewer modal + useImageViewer hook
+ ↓ auto-detects images with 'image-viewer-trigger' class
+ ↓ renders modally above other content
+```
+
+This ensures the viewer works globally without prop drilling.
diff --git a/documentation/IMAGE_VIEWER_QUICKREF.md b/documentation/IMAGE_VIEWER_QUICKREF.md
new file mode 100644
index 0000000..6038201
--- /dev/null
+++ b/documentation/IMAGE_VIEWER_QUICKREF.md
@@ -0,0 +1,175 @@
+# Image Viewer Quick Reference
+
+## Quick Start
+
+### 1. Mark Images
+Add class to any image:
+```html
+Product Guide
+
+ Follow the steps shown above...
+
+```
+
+### 2. Done!
+Clicking opens the viewer. That's it!
+
+---
+
+## Keyboard Controls
+
+| Key | Action |
+|-----|--------|
+| `ESC` | Close |
+| `←` / `→` | Navigate |
+| `+` / `-` | Zoom |
+
+---
+
+## Mouse Controls
+
+| Action | Result |
+|--------|--------|
+| Click image | Open viewer |
+| Scroll wheel | Zoom |
+| Drag (zoomed) | Pan |
+| Click previous/next | Navigate |
+| Click close button | Close |
+
+---
+
+## Touch Controls
+
+| Gesture | Result |
+|---------|--------|
+| Tap image | Open viewer |
+| Pinch | Zoom |
+| Tap previous/next | Navigate |
+| Tap close button | Close |
+
+---
+
+## Component API
+
+### React Component Usage
+```tsx
+import { ImageViewer } from '@/components/ImageViewer/ImageViewer';
+
+{/* content */}
;
+}
+```
+
+---
+
+## CSS Customization
+
+Main CSS file: `ImageViewer.module.css`
+
+Key classes to override:
+- `.overlay` - Dark background
+- `.controls` - Zoom toolbar
+- `.image` - Image element
+- `.navButton` - Navigation arrows
+- `.closeButton` - Close button
+
+---
+
+## Troubleshooting
+
+**Images not opening?**
+- Ensure `image-viewer-trigger` class exists
+- Check ImageViewerProvider wraps the app
+
+**Zoom not working?**
+- Make sure you're using a supported browser
+- Check console for errors
+
+**Blurry images?**
+- Use higher resolution source images (300+ DPI)
+- Don't zoom beyond 5x
+
+---
+
+## Integration Status
+
+✅ **CVWebpageTemplate** - Ready to use
+✅ **ERP_System Frontend** - Ready to use
+
+Both projects have the viewer integrated and building successfully.
+
+---
+
+## Full Documentation
+
+See [IMAGE_VIEWER_GUIDE.md](./IMAGE_VIEWER_GUIDE.md) for comprehensive documentation.
+
+See [IMPLEMENTATION_SUMMARY.md](./IMPLEMENTATION_SUMMARY.md) for technical details.
diff --git a/index.html b/index.html
index e25f4d2..4d61b53 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,8 @@