diff --git a/content/documentation/01-introduction-getting-started.md b/content/documentation/01-introduction-getting-started.md
new file mode 100644
index 0000000..757c813
--- /dev/null
+++ b/content/documentation/01-introduction-getting-started.md
@@ -0,0 +1,131 @@
+# Introduction & Getting Started
+
+## Table of Contents
+
+1. [Introduction](#introduction)
+2. [What is Business Process Management?](#what-is-business-process-management)
+3. [Key Differences from Low-Code Platforms](#key-differences-from-low-code-platforms)
+4. [Core Capabilities](#core-capabilities)
+5. [Getting Started](#getting-started)
+6. [System Access](#system-access)
+7. [First Steps](#first-steps)
+
+---
+
+## Introduction
+
+**Corrad ProcessMaker is a Business Process Management (BPM) platform designed for creating, automating, and managing complex business workflows.** This is NOT a low-code application builder - it's a specialized tool for designing and executing business processes with visual workflow design, form integration, and process automation capabilities.
+
+### What is Business Process Management?
+
+Business Process Management focuses on:
+- **Process Design**: Creating visual workflows that represent business logic
+- **Process Automation**: Automating repetitive tasks and decision points
+- **Process Monitoring**: Tracking process execution and performance
+- **Process Optimization**: Identifying bottlenecks and improving efficiency
+
+### Key Differences from Low-Code Platforms
+
+| 🔄 **BPM Platform (ProcessMaker)** | 🛠️ **Low-Code Builder** |
+|----------------------------------|------------------------|
+| **Focus**: Workflow design and process automation | **Focus**: Application development and UI creation |
+| **Standards**: BPMN (Business Process Model and Notation) | **Standards**: Custom application development patterns |
+| **Core Elements**: Process flow, decision points, task routing | **Core Elements**: UI components, data models, screens |
+| **Target Users**: Business analysts, process designers | **Target Users**: Developers, citizen developers |
+| **Optimization**: Process monitoring, analytics, efficiency | **Optimization**: Rapid application development, deployment |
+| **Output**: Automated business workflows | **Output**: Custom applications and systems |
+
+### Core Capabilities
+
+#### 🎨 **Process Design & Automation**
+- **Visual Workflow Designer**: BPMN-compliant drag-and-drop interface
+- **Smart Decision Points**: Conditional routing and business logic
+- **Role-Based Task Assignment**: User and group management
+- **Data Flow Management**: Process variables and data mapping
+
+#### 📝 **Dynamic Form Integration** 
+- **Intelligent Form Builder**: Create adaptive data collection forms
+- **Seamless Process Integration**: Forms embedded directly in workflows
+- **Conditional Logic**: Show/hide fields based on user input
+- **Multi-Step Workflows**: Complex form sequences with validation
+
+#### 📊 **Real-Time Execution & Monitoring**
+- **Live Process Tracking**: Monitor workflows as they execute
+- **Task Queue Management**: Automated assignment and routing
+- **Performance Analytics**: Detailed metrics and reporting
+- **Exception Handling**: Error management and recovery processes
+
+#### 🔗 **Enterprise Integration**
+- **API Connectivity**: Connect to external systems and databases
+- **Business Rules Engine**: Complex decision-making capabilities
+- **Smart Notifications**: Multi-channel communication system
+- **Compliance & Audit**: Complete trail for regulatory requirements
+
+> **💡 Purpose**: This guide provides comprehensive, step-by-step instructions for mastering ProcessMaker's core BPM features to design, implement, and optimize business processes effectively.
+
+## 🚀 Getting Started
+
+ProcessMaker is a **web-based platform** - no installation required! Access everything through your browser.
+
+### 🔐 System Access
+
+**Quick Login Process:**
+1. **Open Browser** → Use any modern web browser (Chrome, Firefox, Safari, Edge)
+2. **Navigate to URL** → Go to your organization's ProcessMaker instance
+3. **Enter Credentials** → Use your assigned username and password
+4. **Access Dashboard** → Click "Login" to enter the main interface
+
+> **🔒 Security Note**: Contact your system administrator for login credentials and access permissions.
+
+### 🗺️ Your First Tour
+
+**Start with these key areas:**
+
+#### 📊 **Dashboard** - *Your Control Center*
+- View system statistics and recent activity
+- Access quick actions for common tasks  
+- Monitor active processes and pending tasks
+- Get an overview of your work queue
+
+#### 📝 **Form Builder** - *Create Data Collection*
+- Design dynamic, intelligent forms
+- Add conditional logic and validation
+- Preview and test form functionality
+- Manage form templates and versions
+
+#### ⚙️ **Process Builder** - *Design Workflows*
+- Create visual business workflows
+- Configure decision points and routing
+- Integrate forms and external systems
+- Test and publish process definitions
+
+#### 📈 **Process Management** - *Monitor & Optimize*
+- Track active process instances
+- Analyze performance metrics
+- Manage cases and task assignments
+- Generate reports and insights
+
+### 🎯 Recommended Learning Path
+
+**Follow this sequence for optimal learning:**
+
+| Step | Chapter | Focus | Time |
+|------|---------|-------|------|
+| **1** | Current Chapter | BPM concepts & platform overview | 15 min |
+| **2** | [Form Builder](02-form-builder.md) | Create your first form | 30 min |
+| **3** | [Process Builder](04-process-builder.md) | Design your first workflow | 45 min |
+| **4** | [Management](05-process-management.md) | Monitor and optimize | 20 min |
+| **5** | [Advanced Topics](06-faq-advanced-topics.md) | Complex scenarios | As needed |
+
+### ✅ Quick Wins - First 30 Minutes
+
+**New User Checklist:**
+- [ ] Log in and explore the dashboard
+- [ ] Browse existing forms and processes (if available)
+- [ ] Try the Form Builder with a simple contact form
+- [ ] Create a basic approval workflow in Process Builder
+- [ ] Review the help documentation and tooltips
+
+---
+
+**🎯 Next Step**: Ready to build forms? Continue to [**Form Builder Guide →**](02-form-builder.md) 
\ No newline at end of file
diff --git a/documentation/02-form-builder.md b/content/documentation/02-form-builder.md
similarity index 100%
rename from documentation/02-form-builder.md
rename to content/documentation/02-form-builder.md
diff --git a/content/documentation/03-form-management.md b/content/documentation/03-form-management.md
new file mode 100644
index 0000000..4b1d237
--- /dev/null
+++ b/content/documentation/03-form-management.md
@@ -0,0 +1,269 @@
+# Form Management
+
+*Master the organization and administration of your forms with comprehensive management tools.*
+
+## Table of Contents
+
+1. [Accessing Form Management](#accessing-form-management)
+2. [Form Organization & Search](#form-organization--search)
+3. [Form Actions & Operations](#form-actions--operations)
+4. [Form Templates System](#form-templates-system)
+5. [Version Control & History](#version-control--history)
+6. [Form Collaboration](#form-collaboration)
+
+---
+
+## 🎯 Accessing Form Management
+
+**Multiple Access Methods:**
+
+### 📋 **From Form Builder**
+1. Navigate to **Form Builder** from the main menu
+2. Click the **management dropdown** (⋮) in the header
+3. Select **"Manage Forms"**
+
+### 🏠 **From Dashboard**
+1. Go to the main **Dashboard**
+2. Locate the **"Forms"** section
+3. Click **"View All Forms"** or **"Manage"**
+
+### 🔗 **Direct Navigation**
+- Use breadcrumb navigation from any form-related page
+- Access via quick links in the system sidebar
+
+> **💡 Pro Tip**: Bookmark the Form Management page for quick access during daily workflows.
+
+## 📊 Form Organization & Search
+
+### **📋 List View Interface**
+
+**Table Columns:**
+| Column | Information Displayed |
+|--------|----------------------|
+| 📝 **Name** | Form title and identifier |
+| 📄 **Description** | Brief form purpose summary |
+| 🧩 **Components** | Number of form fields/components |
+| 👤 **Creator** | Form author information |
+| 📅 **Created** | Initial creation date |
+| 🔄 **Last Modified** | Most recent update timestamp |
+| 📊 **Status** | Draft, Active, Archived |
+| 📈 **Usage** | Number of submissions/responses |
+
+**Sorting Options:**
+- **Alphabetical**: Sort by form name (A-Z or Z-A)
+- **Chronological**: Sort by creation or modification date
+- **Usage-Based**: Sort by most/least used forms
+- **Status-Based**: Group by draft, active, or archived status
+
+### 🔍 **Advanced Search & Filtering**
+
+**Search Capabilities:**
+- **Text Search**: Search by form name, description, or content
+- **Component Search**: Find forms containing specific field types
+- **Creator Search**: Filter by form author
+- **Tag Search**: Use custom tags for organization
+
+**Filter Options:**
+- **📊 Status Filter**: Draft, Active, Archived, Deleted
+- **📅 Date Range**: Created or modified within specific periods
+- **👥 Creator Filter**: Forms by specific users or teams
+- **🏷️ Category Filter**: Organize by department or purpose
+- **📈 Usage Filter**: High, medium, or low usage forms
+
+**Quick Actions:**
+- **🔄 Refresh**: Update form list with latest changes
+- **⚙️ View Options**: Toggle between list and card views
+- **📤 Export List**: Download form inventory as CSV/Excel
+- **🗑️ Bulk Actions**: Select multiple forms for batch operations
+
+## ⚡ Form Actions & Operations
+
+### **Primary Actions**
+
+**✏️ Edit Form**
+- **Purpose**: Open form in Form Builder for modifications
+- **Access**: Click **"Edit"** button in actions column
+- **Features**: Full editing capabilities with auto-save
+- **Use Case**: Update form fields, logic, or design
+
+**👁️ Preview Form**
+- **Purpose**: Test form functionality as an end user
+- **Access**: Click **"Preview"** button
+- **Features**: Interactive testing with validation
+- **Use Case**: Quality assurance before publishing
+
+**📋 Duplicate Form**
+- **Purpose**: Create an exact copy for modification
+- **Process**: 
+  1. Click **"Duplicate"**
+  2. Enter new form name
+  3. Optionally modify description
+  4. Click **"Create Copy"**
+- **Use Case**: Template-based form creation
+
+### **Management Actions**
+
+**📤 Export Form**
+- **Purpose**: Download form configuration for backup or sharing
+- **Formats**: JSON, PDF documentation, Excel template
+- **Process**: Click **"Export"** → Select format → Download
+- **Use Case**: Backup, migration, or documentation
+
+**🗑️ Delete Form**
+- **Purpose**: Permanently remove form from system
+- **Process**: 
+  1. Click **"Delete"**
+  2. Confirm deletion in popup
+  3. Enter form name for verification
+  4. Click **"Permanently Delete"**
+- **⚠️ Warning**: This action cannot be undone
+
+**📦 Archive Form**
+- **Purpose**: Hide form from active list while preserving data
+- **Benefits**: Reduces clutter, maintains historical records
+- **Restoration**: Archived forms can be restored anytime
+- **Use Case**: Seasonal forms or outdated processes
+
+## 🎨 Form Templates System
+
+### **📚 Template Library**
+
+**Accessing Templates:**
+1. **From Form Builder**: Click dropdown menu → **"Templates"**
+2. **From Form Management**: Click **"Browse Templates"**
+3. **During Creation**: Select **"Start from Template"** when creating new forms
+
+**Template Categories:**
+- **📋 Common Forms**: Contact, Registration, Feedback
+- **💼 Business Forms**: Invoice, Purchase Order, HR Forms
+- **🏛️ Government Forms**: Applications, Permits, Licenses
+- **🎓 Educational Forms**: Enrollment, Assessment, Surveys
+- **🏥 Healthcare Forms**: Patient Intake, Medical Records
+- **🎪 Event Forms**: Registration, RSVP, Feedback
+
+### **🛠️ Using Templates**
+
+**Template Selection Process:**
+1. **Browse Categories**: Navigate through organized template sections
+2. **Preview Template**: Click **"Preview"** to see template structure
+3. **Template Details**: Review component count, features, and use cases
+4. **Select Template**: Click **"Use This Template"**
+5. **Customize**: Modify fields, labels, and logic as needed
+6. **Save**: Give your form a unique name and save
+
+**Template Customization:**
+- **Add/Remove Fields**: Modify template structure
+- **Update Labels**: Change field names and descriptions
+- **Adjust Logic**: Modify conditional logic and validation
+- **Branding**: Apply your organization's styling
+- **Integration**: Connect with your specific systems
+
+### **🏗️ Creating Custom Templates**
+
+**From Existing Forms:**
+1. **Open Successful Form**: Select a well-designed form
+2. **Save as Template**: Click **"Save as Template"** in dropdown
+3. **Template Details**: 
+   - Enter descriptive template name
+   - Add detailed description
+   - Select appropriate category
+   - Add tags for searchability
+4. **Configure Sharing**: Set template visibility (personal, team, organization)
+5. **Publish Template**: Make available for reuse
+
+**Template Best Practices:**
+- **Generic Labels**: Use placeholder text that's easily customizable
+- **Modular Design**: Create templates that are easy to modify
+- **Clear Documentation**: Include usage instructions and examples
+- **Test Thoroughly**: Ensure template functionality before sharing
+- **Regular Updates**: Maintain templates based on user feedback
+
+**Template Management:**
+- **📊 Usage Analytics**: Track how often templates are used
+- **🔄 Version Control**: Maintain template versions and updates
+- **👥 Sharing Settings**: Control template access and permissions
+- **📝 Feedback Collection**: Gather user feedback for improvements
+
+## 🔄 Version Control & History
+
+### **📈 Accessing Form History**
+
+**Navigation Methods:**
+1. **From Form List**: Click **"History"** button in actions column
+2. **From Form Editor**: Click **"Version History"** in toolbar
+3. **From Form Details**: Select **"View History"** in info panel
+
+### **📊 Version History Interface**
+
+**History Timeline Display:**
+| Column | Information |
+|--------|-----------|
+| 🕐 **Timestamp** | Exact date and time of change |
+| 👤 **Author** | User who made the modification |
+| 📝 **Description** | Summary of changes made |
+| 🔢 **Version** | Version number (e.g., v1.2.3) |
+| 📊 **Change Type** | Major, Minor, or Patch changes |
+| 🏷️ **Tags** | Custom labels for version organization |
+
+### **🔍 Version Analysis**
+
+**Change Detection:**
+- **Field Changes**: Added, modified, or removed form fields
+- **Logic Updates**: Conditional logic and validation modifications
+- **Design Changes**: Layout, styling, and visual updates
+- **Settings Updates**: Form configuration and behavior changes
+
+**Comparison Tools:**
+1. **Select Versions**: Choose two versions to compare
+2. **Side-by-Side View**: Visual comparison of differences
+3. **Highlight Changes**: Color-coded additions, modifications, deletions
+4. **Change Summary**: Quantified overview of modifications
+
+### **⚡ Version Management Actions**
+
+**🔄 Restore Previous Version**
+- **Process**: 
+  1. Select version to restore
+  2. Click **"Restore This Version"**
+  3. Confirm restoration in popup
+  4. New version created with restored content
+- **Safety**: Original current version is preserved
+
+**📋 Create Version Branch**
+- **Purpose**: Create alternative version for testing
+- **Use Case**: Experimental changes without affecting main form
+- **Merge**: Combine successful branches back to main version
+
+**🏷️ Version Tagging**
+- **Tag Versions**: Add descriptive labels (e.g., "Production", "Testing")
+- **Quick Access**: Filter versions by tags
+- **Organization**: Group related versions together
+
+## 👥 Form Collaboration
+
+### **🤝 Team Collaboration Features**
+
+**Multi-User Editing:**
+- **Real-time Sync**: Multiple users can view changes simultaneously
+- **Edit Locking**: Prevent conflicts during active editing
+- **Change Notifications**: Alert team members of modifications
+- **Comment System**: Add notes and feedback on form elements
+
+**Permission Management:**
+- **View Only**: Read access to form structure and data
+- **Edit Access**: Modify form fields and configuration
+- **Admin Rights**: Full control including deletion and sharing
+- **Custom Roles**: Define specific permission sets
+
+**Review Workflow:**
+- **Draft Submission**: Submit forms for review before publishing
+- **Approval Process**: Multi-level approval for form changes
+- **Feedback Loop**: Incorporate reviewer comments and suggestions
+- **Publishing Control**: Controlled release of form versions
+
+---
+
+**📚 Related Documentation:**
+- *Previous Chapter: [Form Builder →](02-form-builder.md)*
+- *Next Chapter: [Process Builder →](04-process-builder.md)*
+- *Advanced Topics: [FAQ & Advanced Topics →](06-faq-advanced-topics.md)* 
\ No newline at end of file
diff --git a/content/documentation/04-process-builder.md b/content/documentation/04-process-builder.md
new file mode 100644
index 0000000..cdcad0e
--- /dev/null
+++ b/content/documentation/04-process-builder.md
@@ -0,0 +1,465 @@
+# Process Builder
+
+*Design professional BPMN-compliant workflows with visual drag-and-drop tools for complex business process automation.*
+
+## Table of Contents
+
+1. [Getting Started](#getting-started)
+2. [Process Builder Interface](#process-builder-interface)
+3. [Core Process Components](#core-process-components)
+4. [Advanced Components](#advanced-components)
+5. [Creating Your First Process](#creating-your-first-process)
+6. [Advanced Process Features](#advanced-process-features)
+7. [Best Practices](#best-practices)
+
+---
+
+## 🚀 Getting Started
+
+### **🎯 Accessing Process Builder**
+
+**Multiple Access Methods:**
+
+1. **📱 From Main Menu**:
+   - Click **"Process Builder"** in the navigation sidebar
+   - Select **"Create New Process"** to start fresh
+   - Or **"Manage Processes"** to work with existing workflows
+
+2. **🏠 From Dashboard**:
+   - Navigate to the main dashboard
+   - Locate **"Processes"** section
+   - Click **"Build New Process"** or **"View All Processes"**
+
+3. **⚡ Quick Actions**:
+   - Use keyboard shortcut `Ctrl + N` for new process
+   - Access via **"Recent Processes"** for quick editing
+
+### **🎨 Starting a New Process**
+
+**Process Creation Steps:**
+1. **📝 Process Details**:
+   - Enter descriptive **process name** (e.g., "Zakat Application Workflow")
+   - Add comprehensive **description** explaining the workflow purpose
+   - Select **process category** (HR, Finance, Operations, etc.)
+   - Choose **template** (optional) or start from scratch
+
+2. **⚙️ Initial Configuration**:
+   - Set **process variables** that will be used throughout the workflow
+   - Configure **user roles** and permissions
+   - Define **process triggers** (manual start, scheduled, API-triggered)
+
+3. **✅ Create Process**:
+   - Click **"Create Process"** to open the visual designer
+   - Start building your workflow immediately
+
+> **💡 Pro Tip**: Use descriptive names and detailed descriptions to help team members understand the process purpose at a glance.
+
+## 🖥️ Process Builder Interface
+
+### **🎛️ Interface Layout Overview**
+
+**Three-Panel Design:**
+
+| Panel | Purpose | Key Features |
+|-------|---------|-------------|
+| **📚 Left Panel** | Component Library | Drag-and-drop components, search, categories |
+| **🎨 Center Canvas** | Visual Design Area | Workflow canvas, grid alignment, zoom controls |
+| **⚙️ Right Panel** | Properties & Config | Component settings, variables, connections |
+
+### **📚 Left Panel - Component Library**
+
+**Component Categories:**
+- **🏁 Core Components**: Start/End points, Form tasks, Decision points
+- **🔧 Integration**: API calls, Database queries, Web services
+- **📊 Business Logic**: Business rules, Script tasks, Calculations
+- **📢 Communication**: Notifications, Email, SMS alerts
+- **🎨 Design Elements**: Swimlanes, Annotations, Visual aids
+- **⚡ Advanced**: Sub-processes, Timer events, Error handling
+
+**Search & Organization:**
+- **🔍 Quick Search**: Type component name to find instantly
+- **🏷️ Filter by Category**: Show only specific component types
+- **⭐ Favorites**: Mark frequently used components
+- **📚 Recent**: Access recently used components quickly
+
+### **🎨 Center Canvas - Visual Design Area**
+
+**Canvas Features:**
+- **📐 Grid System**: Snap-to-grid alignment for professional layouts
+- **🔍 Zoom Controls**: Zoom from 25% to 500% for detailed editing
+- **🖱️ Pan Navigation**: Click and drag to navigate large processes
+- **📏 Rulers**: Pixel-perfect positioning guides
+- **🎯 Auto-Layout**: Intelligent component arrangement suggestions
+
+**Canvas Tools:**
+- **↩️ Undo/Redo**: Full history tracking with `Ctrl+Z` / `Ctrl+Y`
+- **📋 Copy/Paste**: Duplicate components and sub-workflows
+- **🗑️ Delete**: Remove components with `Delete` key
+- **🔗 Quick Connect**: Smart connection suggestions between components
+
+### **⚙️ Right Panel - Properties & Configuration**
+
+**Configuration Tabs:**
+- **🏷️ General**: Component name, description, and basic settings
+- **⚙️ Properties**: Component-specific configuration options
+- **🔗 Connections**: Input/output connections and data mapping
+- **📊 Variables**: Process variables and data flow configuration
+- **🎨 Appearance**: Visual styling and display options
+
+### **🔝 Top Toolbar - Process Controls**
+
+**Primary Actions:**
+- **💾 Save**: Auto-save enabled, manual save with `Ctrl+S`
+- **👁️ Preview**: Test process flow in simulation mode
+- **🚀 Publish**: Make process available for execution
+- **📊 Analytics**: View process performance metrics
+- **⚙️ Settings**: Global process configuration
+
+**Navigation Tools:**
+- **📱 Device Preview**: Test on mobile, tablet, desktop views
+- **🔍 Find**: Search for specific components or text
+- **📐 Alignment**: Align and distribute components professionally
+- **📂 Process History**: Access version control and change history
+
+### **⌨️ Keyboard Shortcuts**
+
+**Essential Shortcuts:**
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl + S` | Save process |
+| `Ctrl + Z` | Undo last action |
+| `Ctrl + Y` | Redo action |
+| `Delete` | Delete selected component |
+| `Ctrl + A` | Select all components |
+| `Ctrl + D` | Duplicate selected component |
+| `Ctrl + F` | Find in process |
+| `Space + Drag` | Pan canvas |
+| `Ctrl + 0` | Fit to screen |
+| `Ctrl + +/-` | Zoom in/out |
+
+## 🧩 Core Process Components
+
+*Essential building blocks for creating professional business workflows with BPMN compliance.*
+
+### **🏁 Process Flow Control**
+
+**🟢 Start Point** - *Process Entry Gate*
+- **🎯 Purpose**: Define where your business process begins
+- **📍 How to Add**: Drag **"Start Point"** from Core Components
+- **⚙️ Configuration Options**: 
+  - Set descriptive process name and detailed description
+  - Configure automatic triggers (form submission, schedule, API call)
+  - Define initial process variables and their default values
+  - Set security permissions for process initiation
+- **👁️ Visual**: Green circle with play arrow and "Start" label
+- **📈 Analytics**: Track how often processes are initiated
+- **💼 Business Scenarios**:
+  - **Employee Onboarding**: Trigger when HR submits new hire form
+  - **Purchase Requests**: Start when employee submits purchase request
+  - **Zakat Applications**: Begin when citizen submits Zakat application
+  - **Customer Complaints**: Initiate when complaint form is received
+
+> **🔗 Connection Rule**: Start points can only have outgoing connections, never incoming ones.
+
+**🔴 End Point** - *Process Completion Gate*
+- **🎯 Purpose**: Define successful completion of your business process
+- **📍 How to Add**: Drag **"End Point"** from Core Components
+- **⚙️ Configuration Options**: 
+  - Set completion conditions and success criteria
+  - Configure final actions (notifications, data updates, reports)
+  - Define process outcome variables and their final values
+  - Set cleanup actions for temporary data or resources
+- **👁️ Visual**: Red circle with stop icon and "End" label
+- **📊 Analytics**: Track completion rates and success metrics
+- **💼 Business Scenarios**:
+  - **Approved Applications**: Process completed successfully
+  - **Rejected Requests**: Process ended with rejection outcome
+  - **Cancelled Orders**: Process terminated by user action
+  - **Expired Processes**: Process ended due to timeout
+
+> **⚠️ Best Practice**: Every process should have at least one end point, but can have multiple end points for different outcomes.
+
+**📝 Form Task** - *User Data Collection Point*
+- **🎯 Purpose**: Collect user input through dynamic, intelligent forms
+- **📍 How to Add**: Drag **"Form Task"** from Core Components
+- **⚙️ Configuration Options**: 
+  - **Form Selection**: Choose from existing forms or create new ones
+  - **User Assignment**: Assign to specific users, roles, or groups
+  - **Task Settings**: Set deadlines, priority levels, and instructions
+  - **Data Mapping**: Map form fields to process variables
+  - **Conditional Logic**: Show/hide fields based on previous inputs
+  - **Validation Rules**: Ensure data quality and completeness
+- **👁️ Visual**: Blue rectangle with document icon and form name
+- **📊 Analytics**: Track completion rates, response times, data quality
+- **💼 Business Scenarios**:
+  - **Application Forms**: Collect customer or employee applications
+  - **Approval Forms**: Manager reviews and approval decisions
+  - **Verification Forms**: Document verification by officers
+  - **Feedback Forms**: Collect user feedback and satisfaction ratings
+
+**Advanced Features:**
+- **📱 Mobile Optimization**: Forms automatically adapt to mobile devices
+- **💾 Auto-Save**: Progress saved automatically to prevent data loss
+- **🔄 Version Control**: Track form changes and maintain consistency
+- **🌐 Multi-Language**: Support for multiple languages and localization
+
+**🔗 API Call** - *External System Integration*
+- **🎯 Purpose**: Connect with external services, databases, and third-party systems
+- **📍 How to Add**: Drag **"API Call"** from Integration Components
+- **⚙️ Configuration Options**: 
+  - **HTTP Methods**: GET, POST, PUT, DELETE, PATCH
+  - **URL Configuration**: Dynamic URLs with variable substitution
+  - **Authentication**: API keys, OAuth, Bearer tokens, Basic Auth
+  - **Request Headers**: Custom headers and content types
+  - **Request Body**: JSON, XML, form data with dynamic content
+  - **Response Handling**: Parse JSON/XML responses, error codes
+  - **Retry Logic**: Automatic retries with backoff strategies
+  - **Timeout Settings**: Configure request timeouts and fallbacks
+- **👁️ Visual**: Purple rectangle with connection icon and API name
+- **📊 Analytics**: Monitor success rates, response times, error patterns
+- **💼 Business Scenarios**:
+  - **Identity Verification**: Check IC numbers with government databases
+  - **Payment Processing**: Integration with payment gateways
+  - **Credit Checks**: Verify financial information with banks
+  - **Address Validation**: Confirm addresses with postal services
+  - **SMS/Email Services**: Send notifications via external providers
+
+**Advanced Features:**
+- **🔄 Real-time Sync**: Keep data synchronized across systems
+- **📊 Data Transformation**: Convert between different data formats
+- **🔒 Security**: Encrypt sensitive data in transit
+- **⚡ Caching**: Cache responses to improve performance
+
+**💎 Decision Point** - *Intelligent Process Routing*
+- **🎯 Purpose**: Create smart branching logic based on data conditions and business rules
+- **📍 How to Add**: Drag **"Decision Point"** from Core Components
+- **⚙️ Configuration Options**: 
+  - **Condition Builder**: Visual condition creation with drag-and-drop
+  - **Logic Operators**: AND, OR, NOT for complex condition combinations
+  - **Comparison Types**: Equals, greater than, less than, contains, exists
+  - **Variable References**: Use process variables in conditions
+  - **Default Path**: Fallback route when no conditions are met
+  - **Path Labels**: Descriptive names for each decision branch
+  - **Priority Order**: Set evaluation order for multiple conditions
+- **👁️ Visual**: Diamond shape with branching arrows and condition labels
+- **📊 Analytics**: Track which paths are taken most frequently
+- **💼 Business Scenarios**:
+  - **Approval Workflows**: Route based on amount thresholds
+  - **Risk Assessment**: Different paths for high/medium/low risk
+  - **Category Routing**: Route applications to appropriate departments
+  - **Eligibility Checks**: Determine qualification for services
+
+**Advanced Decision Logic:**
+- **📊 Score-Based Routing**: Calculate scores and route accordingly
+- **🕐 Time-Based Decisions**: Route based on dates, business hours
+- **👥 User-Based Logic**: Route based on user roles, permissions
+- **📈 Data-Driven Decisions**: Use historical data for intelligent routing
+
+**📢 Notification** - *Multi-Channel Communication Hub*
+- **🎯 Purpose**: Send targeted communications via multiple channels with personalized content
+- **📍 How to Add**: Drag **"Notification"** from Communication Components
+- **⚙️ Configuration Options**: 
+  - **Notification Types**: Info, warning, error, success, reminder
+  - **Delivery Channels**: In-app, email, SMS, push notifications, webhooks
+  - **Recipient Configuration**: Users, roles, groups, external emails/phones
+  - **Message Templates**: Rich HTML email templates, SMS templates
+  - **Personalization**: Dynamic content with user data and variables
+  - **Scheduling**: Immediate, delayed, or recurring notifications
+  - **Escalation Rules**: Automatic escalation if no response
+  - **Delivery Tracking**: Read receipts, delivery confirmations
+- **👁️ Visual**: Orange rectangle with bell icon and notification type
+- **📊 Analytics**: Track delivery rates, open rates, response rates
+- **💼 Business Scenarios**:
+  - **Status Updates**: Inform users about application progress
+  - **Deadline Reminders**: Alert about approaching deadlines
+  - **Approval Requests**: Notify approvers of pending tasks
+  - **System Alerts**: Technical notifications and error reporting
+  - **Marketing Communications**: Promotional messages and updates
+
+**Advanced Notification Features:**
+- **🎨 Rich Content**: Images, attachments, formatted text
+- **🌐 Multi-Language**: Automatic language detection and translation
+- **⏰ Smart Timing**: Send at optimal times based on user preferences
+- **📱 Cross-Platform**: Consistent messaging across all devices
+
+**Business Rule**
+- **How to Add**: Drag "Business Rule" from the Core Components category
+- **Configuration**:
+  - Create rule groups with conditions
+  - Set actions for each rule
+  - Configure rule priority
+- **Visual**: Rectangle with rule icon
+- **Use Case**: Data validation, calculations, decision logic
+- **Zakat Scenario**:
+  - **When to Use**: Calculate Zakat eligibility based on multiple criteria
+  - **Example**: "Pengiraan Kelayakan Zakat" business rule
+  - **Configuration**: Rule 1: Income < Had Kifayah, Rule 2: No luxury assets, Rule 3: Malaysian citizen
+
+**Script Task**
+- **How to Add**: Drag "Script Task" from the Core Components category
+- **Configuration**:
+  - Enter JavaScript code
+  - Set input and output variables
+  - Configure error handling
+- **Visual**: Rectangle with code icon
+- **Use Case**: Data manipulation, calculations, custom logic
+- **Zakat Scenario**:
+  - **When to Use**: Calculate monthly expenses or determine Zakat amount
+  - **Example**: "Pengiraan Perbelanjaan Bulanan" script task
+  - **Configuration**: Sum all monthly expenses, calculate average, determine eligibility
+
+**HTML Content**
+- **How to Add**: Drag "HTML Content" from the Core Components category
+- **Configuration**:
+  - Enter HTML code
+  - Add CSS styling if needed
+  - Configure JavaScript for interactivity
+- **Visual**: Rectangle with HTML icon
+- **Use Case**: Rich content, embedded applications, custom UI
+- **Zakat Scenario**:
+  - **When to Use**: Display Zakat calculation results or guidelines
+  - **Example**: "Keputusan Pengiraan Zakat" HTML content
+  - **Configuration**: Display formatted calculation results with charts and explanations
+
+**Sub Process**
+- **How to Add**: Drag "Sub Process" from the Core Components category
+- **Configuration**:
+  - Select another process from the dropdown
+  - Configure data mapping between processes
+  - Set sub-process parameters
+- **Visual**: Rectangle with sub-process icon
+- **Use Case**: Modular process design, reusable workflows
+- **Zakat Scenario**:
+  - **When to Use**: Separate verification process for complex applications
+  - **Example**: "Proses Pengesahan Dokumen" sub-process
+  - **Configuration**: Call document verification process with applicant data
+
+## 🎨 Advanced Components
+
+*Sophisticated tools for complex business logic, integration, and process optimization.*
+
+### **🧠 Business Logic & Automation**
+
+**Horizontal Swimlane**
+- **How to Add**: Drag "Horizontal Swimlane" from the Design Elements category
+- **Configuration**:
+  - Set lane name and description
+  - Assign roles or departments
+  - Configure visual styling
+- **Use Case**: Department separation, role-based organization
+- **Zakat Scenario**:
+  - **When to Use**: Separate different departments in Zakat processing
+  - **Example**: "Bahagian Permohonan" and "Bahagian Pengesahan" swimlanes
+  - **Configuration**: Assign application officers and verification officers to respective lanes
+
+**Vertical Swimlane**
+- **How to Add**: Drag "Vertical Swimlane" from the Design Elements category
+- **Configuration**:
+  - Set lane name and description
+  - Configure time-based organization
+  - Set visual styling
+- **Use Case**: Time-based organization, sequential steps
+- **Zakat Scenario**:
+  - **When to Use**: Organize process by time periods
+  - **Example**: "Minggu 1", "Minggu 2", "Minggu 3" time-based lanes
+  - **Configuration**: Track application processing time across weeks
+
+**Text Annotation**
+- **How to Add**: Drag "Text Annotation" from the Design Elements category
+- **Configuration**:
+  - Enter explanatory text
+  - Position the annotation
+  - Configure text styling
+- **Use Case**: Documentation, instructions, notes
+- **Zakat Scenario**:
+  - **When to Use**: Add explanatory notes to process steps
+  - **Example**: "Nota: Had Kifayah = RM2,208 (2024)" annotation
+  - **Configuration**: Position near decision point, use smaller font for notes
+
+## Creating Your First Process
+
+**Step-by-Step Instructions:**
+
+1. **Start Process Builder**
+   - Navigate to Process Builder
+   - Click "Create New Process"
+   - Enter process name and description
+
+2. **Add Start Point**
+   - Drag "Start Point" to the canvas
+   - Position it at the top of your workflow
+
+3. **Add Form Task**
+   - Drag "Form Task" below the start point
+   - Click the component to configure
+   - Select a form from the dropdown
+   - Assign to appropriate users or roles
+
+4. **Add Decision Point**
+   - Drag "Decision Point" after the form task
+   - Configure conditions (e.g., approval status)
+   - Set paths for different outcomes
+
+5. **Add End Points**
+   - Drag "End Point" for each decision path
+   - Configure completion actions
+
+6. **Connect Components**
+   - Click and drag from component edges to create connections
+   - Ensure all paths lead to end points
+
+7. **Test Your Process**
+   - Click "Preview" to test the workflow
+   - Verify all connections and conditions
+
+8. **Save and Publish**
+   - Click "Save" to save your process
+   - Click "Publish" to make it available for execution
+
+## Process Builder Features
+
+**Visual Canvas**
+- **How to Use**: Drag components from left panel to canvas
+- **Connections**: Click and drag from component edges to create flow
+- **Resizing**: Use handles to resize components
+- **Repositioning**: Drag components to move them
+
+**Component Configuration**
+- **How to Access**: Click any component on the canvas
+- **Settings Panel**: Opens on the right side
+- **Configuration Options**: Properties, labels, behavior, connections
+
+**Variable Management**
+- **How to Access**: Click "Variables" tab in the right panel
+- **Add Variables**: Click "Add Variable" and configure
+- **Variable Types**: Text, number, date, boolean, array
+- **Default Values**: Set initial values for variables
+
+**Conditional Logic**
+- **How to Create**: Use Decision Point components
+- **Condition Builder**: Click "Add Condition" in decision settings
+- **Logic Operators**: Use AND/OR for complex conditions
+- **Default Path**: Set fallback path for unmatched conditions
+
+**Form Integration**
+- **How to Connect**: Use Form Task components
+- **Form Selection**: Choose from your saved forms
+- **User Assignment**: Assign to specific users or roles
+- **Data Mapping**: Configure how form data flows through the process
+
+**API Integration**
+- **How to Configure**: Use API Call components
+- **HTTP Methods**: GET, POST, PUT, DELETE
+- **Request Configuration**: URL, headers, body
+- **Response Handling**: Set output variables and error handling
+
+**Save & Version Control**
+- **Save**: Click "Save" button regularly
+- **History**: Access process history to view previous versions
+- **Publish**: Click "Publish" to make process available for execution
+
+---
+
+*Previous Chapter: [Form Management](03-form-management.md)*
+
+*Next Chapter: [Process Management](05-process-management.md)* 
\ No newline at end of file
diff --git a/documentation/05-process-management.md b/content/documentation/05-process-management.md
similarity index 100%
rename from documentation/05-process-management.md
rename to content/documentation/05-process-management.md
diff --git a/documentation/06-faq-advanced-topics.md b/content/documentation/06-faq-advanced-topics.md
similarity index 100%
rename from documentation/06-faq-advanced-topics.md
rename to content/documentation/06-faq-advanced-topics.md
diff --git a/content/documentation/README.md b/content/documentation/README.md
new file mode 100644
index 0000000..ccd3c4a
--- /dev/null
+++ b/content/documentation/README.md
@@ -0,0 +1,113 @@
+# Corrad ProcessMaker Documentation
+
+Welcome to the comprehensive documentation for Corrad ProcessMaker, a powerful Business Process Management (BPM) platform designed for creating, automating, and managing complex business workflows.
+
+## 📚 Documentation Overview
+
+This documentation is organized into focused chapters, each building upon the previous to provide you with a complete understanding of the platform.
+
+### 🚀 [1. Introduction & Getting Started](01-introduction-getting-started.md)
+**Perfect for new users**
+- System overview and BPM concepts
+- Getting started guide and first steps
+- Key differences from low-code platforms
+- Core capabilities and features
+
+### 📝 [2. Form Builder](02-form-builder.md)
+**Learn to create dynamic forms**
+- Form Builder interface and navigation
+- Complete form component catalog
+- Step-by-step form creation guide
+- Advanced form features and conditional logic
+
+### 📋 [3. Form Management](03-form-management.md)
+**Organize and manage your forms**
+- Form management interface
+- Form templates and version history
+- Search, filter, and organization tools
+- Form sharing and collaboration
+
+### ⚙️ [4. Process Builder](04-process-builder.md)
+**Design powerful business workflows**
+- Process Builder interface and tools
+- Complete process component catalog
+- Step-by-step process creation guide
+- BPMN standards and best practices
+
+### 📊 [5. Process Management](05-process-management.md)
+**Monitor and optimize your processes**
+- Process dashboard and analytics
+- Case management and monitoring
+- Performance metrics and reporting
+- Process optimization techniques
+
+### 💡 [6. FAQ & Advanced Topics](06-faq-advanced-topics.md)
+**Advanced scenarios and solutions**
+- Complex business scenarios
+- Technical implementation guides
+- Best practices and troubleshooting
+- Advanced configuration options
+
+## 🎯 Quick Start Guide
+
+Choose your path based on your experience level:
+
+### 👋 **New to BPM?**
+1. Start with [**Introduction & Getting Started**](01-introduction-getting-started.md)
+2. Learn about [**Form Builder**](02-form-builder.md) basics
+3. Explore [**Process Builder**](04-process-builder.md) fundamentals
+
+### 🔧 **Ready to Build?**
+1. Jump to [**Form Builder**](02-form-builder.md) for form creation
+2. Move to [**Process Builder**](04-process-builder.md) for workflow design
+3. Use [**Management**](05-process-management.md) for monitoring
+
+### 🚀 **Advanced User?**
+1. Check [**FAQ & Advanced Topics**](06-faq-advanced-topics.md) for complex scenarios
+2. Review management chapters for optimization tips
+3. Explore integration and API capabilities
+
+## 🏗️ What is Corrad ProcessMaker?
+
+Corrad ProcessMaker is a **specialized Business Process Management (BPM) platform** that focuses on:
+
+> **🎯 Core Focus**: Designing, automating, and managing complex business workflows with visual tools and BPMN standards.
+
+### ✨ Key Capabilities
+
+| Feature | Description |
+|---------|-------------|
+| 🎨 **Visual Process Design** | Drag-and-drop workflow designer with BPMN compliance |
+| 📝 **Dynamic Form Builder** | Create intelligent forms with conditional logic |
+| ⚡ **Process Automation** | Automated task assignment and workflow execution |
+| 📊 **Real-time Monitoring** | Live analytics and performance tracking |
+| 🔗 **System Integration** | API connectivity for external systems |
+| 👥 **Role Management** | Advanced user roles and permissions |
+
+### 🆚 BPM vs Low-Code Platforms
+
+**Corrad ProcessMaker (BPM)** | **Traditional Low-Code**
+---|---
+Workflow-first design | UI-first development
+BPMN standard compliance | Custom application patterns
+Process optimization focus | Rapid app development
+Business analyst friendly | Developer-oriented
+Process monitoring & analytics | General application features
+
+## 📖 How to Navigate This Documentation
+
+- **📖 Sequential Reading**: Follow chapters 1-6 for comprehensive learning
+- **🎯 Topic-Specific**: Jump directly to relevant sections using the navigation
+- **🔍 Reference Guide**: Use search and bookmarks for quick lookups
+- **💡 Problem-Solving**: Start with FAQ section for specific questions
+
+## 🤝 Getting Help
+
+- **Built-in Help**: Use the help tooltips and guides within the application
+- **Documentation Search**: Use Ctrl+K to quickly find information
+- **Best Practices**: Check the FAQ section for proven approaches
+- **Community**: Share your experiences and learn from others
+
+---
+
+> 💡 **Tip**: Each chapter includes practical examples and step-by-step guides to help you master the platform efficiently. 
\ No newline at end of file
diff --git a/documentation/01-introduction-getting-started.md b/docs/documentation/01-introduction-getting-started.md
similarity index 100%
rename from documentation/01-introduction-getting-started.md
rename to docs/documentation/01-introduction-getting-started.md
diff --git a/docs/documentation/02-form-builder.md b/docs/documentation/02-form-builder.md
new file mode 100644
index 0000000..d70be26
--- /dev/null
+++ b/docs/documentation/02-form-builder.md
@@ -0,0 +1,407 @@
+# Form Builder
+
+## Table of Contents
+
+1. [Accessing Form Builder](#accessing-form-builder)
+2. [Form Builder Interface](#form-builder-interface)
+3. [Form Components](#form-components)
+4. [Creating Your First Form](#creating-your-first-form)
+5. [Form Builder Features](#form-builder-features)
+
+---
+
+## Accessing Form Builder
+
+**Step-by-Step Instructions:**
+1. From the main menu, click **"Form Builder"**
+2. Click **"Create New Form"** button
+3. Enter a form name in the header field
+4. You're now ready to build your form
+
+## Form Builder Interface
+
+**Interface Layout:**
+- **Left Panel**: Component library with all available form components
+- **Center Canvas**: Drag-and-drop area where you build your form
+- **Right Panel**: Component settings and configuration panel
+- **Top Header**: Form name, save button, and preview toggle
+
+**Navigation:**
+- Use the search bar in the component library to find specific components
+- Click components to add them to your form
+- Drag components to reposition them on the canvas
+
+## Form Components
+
+### Text Inputs Category
+
+**Text Field**
+- **How to Add**: Drag "Text Field" from the Text Inputs category
+- **Configuration**: 
+  - Click the component to open settings
+  - Set label, placeholder, and help text
+  - Configure validation rules (required, min/max length)
+- **Use Case**: Names, titles, short descriptions
+- **Zakat Scenario**: 
+  - **When to Use**: Collecting applicant's full name, IC number, or address
+  - **Example**: "Nama Penuh Pemohon" field for Zakat Asnaf application
+  - **Configuration**: Set as required field with validation for Malaysian IC format
+
+**Text Area**
+- **How to Add**: Drag "Text Area" from the Text Inputs category
+- **Configuration**:
+  - Set label and placeholder text
+  - Configure rows and character limits
+  - Enable rich text formatting if needed
+- **Use Case**: Descriptions, comments, long-form content
+- **Zakat Scenario**:
+  - **When to Use**: Collecting detailed reasons for Zakat application
+  - **Example**: "Sebab Permohonan Zakat" field for explaining financial hardship
+  - **Configuration**: Set minimum 50 characters, maximum 500 characters
+
+**Number Field**
+- **How to Add**: Drag "Number Field" from the Text Inputs category
+- **Configuration**:
+  - Set minimum and maximum values
+  - Configure decimal places and step increments
+  - Add validation rules
+- **Use Case**: Quantities, amounts, scores
+- **Zakat Scenario**:
+  - **When to Use**: Collecting monthly income, number of dependents, or property values
+  - **Example**: "Pendapatan Bulanan (RM)" field for income assessment
+  - **Configuration**: Set minimum 0, maximum 50,000, 2 decimal places
+
+**Email Field**
+- **How to Add**: Drag "Email Field" from the Text Inputs category
+- **Configuration**:
+  - Set label and placeholder
+  - Email validation is automatic
+- **Use Case**: Contact information, user registration
+- **Zakat Scenario**:
+  - **When to Use**: Collecting applicant's email for notifications
+  - **Example**: "Emel Pemohon" field for Zakat application updates
+  - **Configuration**: Set as optional field with email format validation
+
+**Password Field**
+- **How to Add**: Drag "Password Field" from the Text Inputs category
+- **Configuration**:
+  - Set label and placeholder
+  - Configure password strength requirements
+- **Use Case**: User authentication, account creation
+- **Zakat Scenario**:
+  - **When to Use**: Creating secure login for Zakat portal
+  - **Example**: "Kata Laluan" field for applicant account creation
+  - **Configuration**: Set minimum 8 characters with strength indicator
+
+**URL Field**
+- **How to Add**: Drag "URL Field" from the Text Inputs category
+- **Configuration**:
+  - Set label and placeholder
+  - URL validation is automatic
+- **Use Case**: Links, references, social media profiles
+- **Zakat Scenario**:
+  - **When to Use**: Collecting social media profiles for verification
+  - **Example**: "Profil Facebook" field for additional contact verification
+  - **Configuration**: Set as optional field with URL validation
+
+**Phone Field**
+- **How to Add**: Drag "Phone Field" from the Text Inputs category
+- **Configuration**:
+  - Set label and placeholder
+  - Configure phone number format
+- **Use Case**: Contact information, customer details
+- **Zakat Scenario**:
+  - **When to Use**: Collecting applicant's contact number
+  - **Example**: "Nombor Telefon" field for Zakat application contact
+  - **Configuration**: Set Malaysian phone format (01X-XXXXXXX)
+
+**Masked Input**
+- **How to Add**: Drag "Masked Input" from the Text Inputs category
+- **Configuration**:
+  - Set custom mask pattern (e.g., ###-###-####)
+  - Configure placeholder and help text
+- **Use Case**: Credit cards, social security numbers, postal codes
+- **Zakat Scenario**:
+  - **When to Use**: Collecting IC number with proper formatting
+  - **Example**: "Nombor IC" field with format 000000-00-0000
+  - **Configuration**: Set mask pattern ###-###-#### for IC format
+
+**Hidden Field**
+- **How to Add**: Drag "Hidden Field" from the Text Inputs category
+- **Configuration**:
+  - Set default value
+  - Note: This field is not visible to users
+- **Use Case**: Default values, system data, calculations
+- **Zakat Scenario**:
+  - **When to Use**: Storing application date or system-generated values
+  - **Example**: "Tarikh Permohonan" field automatically set to current date
+  - **Configuration**: Set default value to current date/time
+
+### Selection & Toggle Category
+
+**Select Dropdown**
+- **How to Add**: Drag "Select Dropdown" from the Selection & Toggle category
+- **Configuration**:
+  - Click component to open settings
+  - Add options in the "Options" section
+  - Set placeholder text
+  - Configure validation
+- **Use Case**: Categories, status options, country selection
+- **Zakat Scenario**:
+  - **When to Use**: Selecting Zakat category or state of residence
+  - **Example**: "Kategori Zakat" dropdown with options: Asnaf, Fakir, Miskin, etc.
+  - **Configuration**: Add options: Asnaf, Fakir, Miskin, Amil, Muallaf, Riqab, Gharimin, Fisabilillah
+
+**Checkbox Group**
+- **How to Add**: Drag "Checkbox Group" from the Selection & Toggle category
+- **Configuration**:
+  - Add multiple options in the settings
+  - Set label and help text
+  - Configure minimum/maximum selections
+- **Use Case**: Interests, skills, preferences
+- **Zakat Scenario**:
+  - **When to Use**: Selecting multiple sources of income or types of assistance needed
+  - **Example**: "Sumber Pendapatan" checkbox group
+  - **Configuration**: Options: Gaji Tetap, Kerja Sampingan, Perniagaan, Sewa, Lain-lain
+
+**Radio Group**
+- **How to Add**: Drag "Radio Group" from the Selection & Toggle category
+- **Configuration**:
+  - Add mutually exclusive options
+  - Set label and help text
+  - Configure validation
+- **Use Case**: Gender, yes/no questions, priority levels
+- **Zakat Scenario**:
+  - **When to Use**: Selecting marital status or employment status
+  - **Example**: "Status Perkahwinan" radio group
+  - **Configuration**: Options: Bujang, Berkahwin, Bercerai, Janda/Duda
+
+**Switch Toggle**
+- **How to Add**: Drag "Switch Toggle" from the Selection & Toggle category
+- **Configuration**:
+  - Set label and help text
+  - Configure default state (on/off)
+- **Use Case**: Settings, feature enablement, consent
+- **Zakat Scenario**:
+  - **When to Use**: Consent for data sharing or agreement to terms
+  - **Example**: "Persetujuan Terma dan Syarat" toggle
+  - **Configuration**: Set default to off, required for form submission
+
+### Date & Pickers Category
+
+**Date Picker**
+- **How to Add**: Drag "Date Picker" from the Date & Pickers category
+- **Configuration**:
+  - Set label and help text
+  - Configure date range limits
+  - Set default date if needed
+- **Use Case**: Birth dates, appointment scheduling, deadlines
+- **Zakat Scenario**:
+  - **When to Use**: Collecting birth date or application submission date
+  - **Example**: "Tarikh Lahir" field for age verification
+  - **Configuration**: Set maximum date to current date, minimum date to 1900
+
+**Time Picker**
+- **How to Add**: Drag "Time Picker" from the Date & Pickers category
+- **Configuration**:
+  - Set label and help text
+  - Choose 12 or 24-hour format
+  - Set time intervals
+- **Use Case**: Meeting times, business hours, schedules
+- **Zakat Scenario**:
+  - **When to Use**: Scheduling Zakat interview appointments
+  - **Example**: "Masa Temuduga" field for interview scheduling
+  - **Configuration**: Set 24-hour format, intervals of 30 minutes
+
+**Date & Time**
+- **How to Add**: Drag "Date & Time" from the Date & Pickers category
+- **Configuration**:
+  - Set label and help text
+  - Configure date and time limits
+- **Use Case**: Event scheduling, deadline tracking
+- **Zakat Scenario**:
+  - **When to Use**: Scheduling Zakat verification appointments
+  - **Example**: "Tarikh dan Masa Temuduga" field for home visits
+  - **Configuration**: Set minimum date to current date, business hours only
+
+**Range Slider**
+- **How to Add**: Drag "Range Slider" from the Date & Pickers category
+- **Configuration**:
+  - Set minimum and maximum values
+  - Configure step increments
+  - Set default value
+- **Use Case**: Ratings, preferences, quantity selection
+- **Zakat Scenario**:
+  - **When to Use**: Indicating monthly household income range
+  - **Example**: "Julat Pendapatan Bulanan (RM)" slider
+  - **Configuration**: Set range 0-10,000 RM, step 500 RM
+
+**Color Picker**
+- **How to Add**: Drag "Color Picker" from the Date & Pickers category
+- **Configuration**:
+  - Set label and help text
+  - Configure default color
+- **Use Case**: Design preferences, theme selection
+- **Zakat Scenario**:
+  - **When to Use**: Selecting preferred notification colors
+  - **Example**: "Warna Notifikasi Pilihan" for personalized alerts
+  - **Configuration**: Set default to blue (#3B82F6)
+
+### Advanced & Upload Category
+
+**File Upload**
+- **How to Add**: Drag "File Upload" from the Advanced & Upload category
+- **Configuration**:
+  - Set accepted file types
+  - Configure file size limits
+  - Set maximum number of files
+- **Use Case**: Documents, images, attachments
+- **Zakat Scenario**:
+  - **When to Use**: Uploading supporting documents for Zakat application
+  - **Example**: "Dokumen Sokongan" field for IC, payslips, bank statements
+  - **Configuration**: Accept PDF, JPG, PNG files, max 5MB per file, max 10 files
+
+**Image Preview**
+- **How to Add**: Drag "Image Preview" from the Advanced & Upload category
+- **Configuration**:
+  - Set image URL or upload image
+  - Configure caption and alt text
+  - Enable/disable zoom capability
+- **Use Case**: Product images, profile pictures, documentation
+- **Zakat Scenario**:
+  - **When to Use**: Displaying Zakat calculation examples or guidelines
+  - **Example**: "Contoh Pengiraan Zakat" image with calculation breakdown
+  - **Configuration**: Show zoom capability, add caption explaining calculation
+
+**Repeating Group**
+- **How to Add**: Drag "Repeating Group" from the Advanced & Upload category
+- **Configuration**:
+  - Set group label and help text
+  - Configure minimum and maximum items
+  - Add fields within the group
+- **Use Case**: Family members, work experience, education history
+- **Zakat Scenario**:
+  - **When to Use**: Collecting information about family members/dependents
+  - **Example**: "Maklumat Ahli Keluarga" group for dependent details
+  - **Configuration**: Min 1, max 10 family members, fields: Name, IC, Age, Relationship
+
+**Dynamic List**
+- **How to Add**: Drag "Dynamic List" from the Advanced & Upload category
+- **Configuration**:
+  - Set label and placeholder text
+  - Configure item type (text, number, etc.)
+  - Enable search, sorting, and bulk operations
+- **Use Case**: Skills, interests, inventory items
+- **Zakat Scenario**:
+  - **When to Use**: Listing monthly expenses or sources of income
+  - **Example**: "Senarai Perbelanjaan Bulanan" for expense tracking
+  - **Configuration**: Text items, enable search, allow duplicates, max 20 items
+
+**Data Table**
+- **How to Add**: Drag "Data Table" from the Advanced & Upload category
+- **Configuration**:
+  - Define table columns and their types
+  - Set validation rules for each column
+  - Configure edit and delete permissions
+- **Use Case**: Employee records, inventory, financial data
+- **Zakat Scenario**:
+  - **When to Use**: Tracking monthly income and expenses in tabular format
+  - **Example**: "Jadual Pendapatan dan Perbelanjaan" table
+  - **Configuration**: Columns: Month, Income (RM), Expenses (RM), Balance (RM), Remarks
+
+**OTP Input**
+- **How to Add**: Drag "OTP Input" from the Advanced & Upload category
+- **Configuration**:
+  - Set number of digits (typically 6)
+  - Configure validation
+- **Use Case**: Two-factor authentication, verification codes
+- **Zakat Scenario**:
+  - **When to Use**: SMS verification for Zakat application submission
+  - **Example**: "Kod Pengesahan SMS" field for application verification
+  - **Configuration**: 6 digits, auto-focus, required validation
+
+**File Dropzone**
+- **How to Add**: Drag "File Dropzone" from the Advanced & Upload category
+- **Configuration**:
+  - Set accepted file types and size limits
+  - Configure drag-and-drop text
+  - Set maximum number of files
+- **Use Case**: Bulk file uploads, document management
+- **Zakat Scenario**:
+  - **When to Use**: Bulk upload of multiple supporting documents
+  - **Example**: "Seret Dokumen ke Sini" dropzone for multiple file uploads
+  - **Configuration**: Accept PDF, JPG files, max 10MB total, drag-and-drop interface
+
+**Button**
+- **How to Add**: Drag "Button" from the Advanced & Upload category
+- **Configuration**:
+  - Set button text and type (submit, reset, button)
+  - Choose button style and size
+  - Configure custom actions if needed
+- **Use Case**: Submit, reset, custom actions
+- **Zakat Scenario**:
+  - **When to Use**: Form submission or calculation triggers
+  - **Example**: "Hantar Permohonan Zakat" submit button
+  - **Configuration**: Primary style, large size, submit type
+
+## Creating Your First Form
+
+**Step-by-Step Instructions:**
+
+1. **Start Form Builder**
+   - Navigate to Form Builder
+   - Click "Create New Form"
+   - Enter a descriptive form name
+
+2. **Add Basic Components**
+   - Drag a "Text Field" for the name
+   - Drag an "Email Field" for contact information
+   - Drag a "Select Dropdown" for category selection
+
+3. **Configure Components**
+   - Click each component to open settings
+   - Set appropriate labels and placeholders
+   - Add validation rules where needed
+
+4. **Add Advanced Components**
+   - Drag a "File Upload" for attachments
+   - Drag a "Text Area" for comments
+   - Add a "Button" for form submission
+
+5. **Test Your Form**
+   - Click "Preview" to test the form
+   - Fill out the form as an end user would
+   - Verify all functionality works correctly
+
+6. **Save Your Form**
+   - Click "Save" button
+   - Enter a descriptive name
+   - Add a description for future reference
+
+## Form Builder Features
+
+**Drag & Drop Interface**
+- **How to Use**: Click and drag components from the left panel to the canvas
+- **Repositioning**: Drag components on the canvas to move them
+- **Resizing**: Use the resize handles to adjust component size
+
+**Component Configuration**
+- **How to Access**: Click any component on the canvas
+- **Settings Panel**: Opens on the right side
+- **Configuration Options**: Labels, validation, conditional logic, styling
+
+**Preview Mode**
+- **How to Access**: Click "Preview" button in the header
+- **Testing**: Fill out the form as an end user
+- **Exit Preview**: Click "Edit" to return to builder mode
+
+**Save & Version Control**
+- **Save**: Click "Save" button regularly
+- **History**: Access form history to view previous versions
+- **Restore**: Click on any previous version to restore it
+
+---
+
+*Previous Chapter: [Introduction & Getting Started](01-introduction-getting-started.md)*
+
+*Next Chapter: [Form Management](03-form-management.md)* 
\ No newline at end of file
diff --git a/documentation/03-form-management.md b/docs/documentation/03-form-management.md
similarity index 100%
rename from documentation/03-form-management.md
rename to docs/documentation/03-form-management.md
diff --git a/documentation/04-process-builder.md b/docs/documentation/04-process-builder.md
similarity index 100%
rename from documentation/04-process-builder.md
rename to docs/documentation/04-process-builder.md
diff --git a/docs/documentation/05-process-management.md b/docs/documentation/05-process-management.md
new file mode 100644
index 0000000..5a43e4c
--- /dev/null
+++ b/docs/documentation/05-process-management.md
@@ -0,0 +1,128 @@
+# Process Management
+
+## Table of Contents
+
+1. [Accessing Process Management](#accessing-process-management)
+2. [Process Dashboard](#process-dashboard)
+3. [Managing Processes](#managing-processes)
+4. [Process Analytics](#process-analytics)
+5. [Case Management](#case-management)
+
+---
+
+## Accessing Process Management
+
+**Step-by-Step Instructions:**
+1. Navigate to **Process Builder**
+2. Click **"Manage Processes"** in the header
+3. Or use the dashboard overview
+
+## Process Dashboard
+
+**Overview Metrics**
+- **Total Processes**: Number of all processes in the system
+- **Published vs Draft**: Count of published and draft processes
+- **Active Cases**: Currently running process instances
+- **Performance Metrics**: Completion rates and average times
+
+**Performance Analytics**
+- **Completion Rates**: Percentage of successful process completions
+- **Average Times**: Time taken to complete processes
+- **Success Rates**: Overall process success metrics
+- **Bottleneck Analysis**: Identify slow or problematic steps
+
+**Recent Activity**
+- **Latest Changes**: Recent process modifications
+- **Recent Executions**: Latest process instances
+- **User Activity**: Most active users and their actions
+
+**Quick Actions**
+- **Create New Process**: Start building a new workflow
+- **View Active Cases**: Monitor currently running processes
+- **Access Analytics**: View detailed performance reports
+
+## Managing Processes
+
+**Process List View**
+- **Search & Filter**: Find processes by name, status, or category
+- **Status Tracking**: Draft, published, archived, deleted
+- **Category Organization**: HR, Finance, IT, Operations, etc.
+- **Sort Options**: By name, creation date, last modified
+
+**Process Actions**
+- **Edit**: Click "Edit" to open process in Process Builder
+- **Duplicate**: Click "Duplicate" to create a copy
+- **Publish**: Click "Publish" to make process available for execution
+- **Archive**: Click "Archive" to move process to archived status
+- **Delete**: Click "Delete" and confirm to remove process
+- **Export**: Click "Export" to download process definition
+
+**Process Templates**
+- **Template Library**: Browse pre-built process templates
+- **Template Categories**: Common business processes
+- **Custom Templates**: Save your processes as templates
+- **Template Import**: Import templates from other sources
+
+**Process History**
+- **Version Control**: Track all process changes
+- **Change Log**: Who made changes and when
+- **Version Comparison**: Compare different versions
+- **Rollback**: Restore previous versions if needed
+
+## Process Analytics
+
+**Execution Metrics**
+- **Number of Cases**: Total process instances created
+- **Completion Rates**: Percentage of completed cases
+- **Average Time**: Time taken to complete processes
+- **Success Rates**: Percentage of successful completions
+
+**Performance Data**
+- **Bottleneck Analysis**: Identify slow steps in processes
+- **User Performance**: Track user task completion rates
+- **Process Efficiency**: Measure process optimization opportunities
+- **Resource Utilization**: Monitor system and user resources
+
+**User Activity**
+- **Most Active Users**: Users with highest task completion rates
+- **Task Completion Rates**: Individual user performance metrics
+- **User Workload**: Distribution of tasks across users
+- **Performance Trends**: Track user performance over time
+
+**Trend Analysis**
+- **Process Usage**: Track which processes are used most
+- **Time Trends**: Analyze process usage over time
+- **Seasonal Patterns**: Identify recurring patterns
+- **Growth Metrics**: Track system adoption and usage
+
+## Case Management
+
+**Active Cases**
+- **View Running Cases**: See currently active process instances
+- **Case Details**: Individual case information and progress
+- **Case Status**: Track current status of each case
+- **Case Timeline**: View chronological case events
+
+**Case Actions**
+- **Assign Tasks**: Reassign tasks to different users
+- **Suspend Cases**: Pause process execution temporarily
+- **Resume Cases**: Restart suspended processes
+- **Cancel Cases**: Terminate process execution
+
+**Task Management**
+- **Pending Tasks**: View tasks waiting for user action
+- **Task Assignment**: Assign tasks to specific users
+- **Task Notifications**: Alert users about new or overdue tasks
+- **Task History**: Track task completion and performance
+
+**Case Monitoring**
+- **Real-time Updates**: Live status updates for active cases
+- **Progress Tracking**: Monitor case progression through steps
+- **Exception Handling**: Identify and handle process exceptions
+- **Performance Monitoring**: Track case completion times
+
+---
+
+*Previous Chapter: [Process Builder](04-process-builder.md)*
+
+*Next Chapter: [FAQ - Advanced Topics](06-faq-advanced-topics.md)* 
\ No newline at end of file
diff --git a/docs/documentation/06-faq-advanced-topics.md b/docs/documentation/06-faq-advanced-topics.md
new file mode 100644
index 0000000..34f2b74
--- /dev/null
+++ b/docs/documentation/06-faq-advanced-topics.md
@@ -0,0 +1,135 @@
+# FAQ - Advanced Topics
+
+## Table of Contents
+
+1. [Complex Business Scenarios](#complex-business-scenarios)
+2. [Technical Implementation](#technical-implementation)
+3. [Best Practices](#best-practices)
+
+---
+
+## Complex Business Scenarios
+
+**Q: How do I implement approval workflows with multiple approvers in a hierarchical structure?**
+
+A: Use Decision Point components to create approval chains. Configure each decision point with conditions based on approval amounts or roles. For Zakat scenarios, you might have: Level 1 (RM1,000-RM5,000) → Officer approval, Level 2 (RM5,001-RM10,000) → Supervisor approval, Level 3 (RM10,001+) → Manager approval. Use Business Rule components to determine approval levels based on application amounts.
+
+**Q: How can I pass user-specific data to dynamically generated forms in subsequent process steps?**
+
+A: Use Process Variables to store user data from initial forms and pass them to subsequent Form Task components. Configure the form to pre-populate fields using the stored variables. For example, in a Zakat application: Store applicant details in variables during initial submission, then use those variables to pre-fill verification forms for officers.
+
+**Q: How do I implement conditional form fields that appear based on previous user selections?**
+
+A: Use the Conditional Logic feature in Form Builder. Select any component, go to the Conditional Logic section, and configure conditions. For Zakat applications: If user selects "Berpencen" in employment status, show "Jumlah Pencen" field; if "Bekerja Sendiri", show "Pendapatan Perniagaan" field.
+
+**Q: How can I integrate external systems (like JPN for IC verification) into my processes?**
+
+A: Use API Call components in Process Builder. Configure the API endpoint, authentication, request/response handling, and error management. For Zakat scenarios: Create API calls to JPN for IC verification, bank systems for account validation, or government databases for income verification.
+
+**Q: How do I implement parallel processing where multiple tasks can be completed simultaneously?**
+
+A: Use multiple Form Task components connected to the same Decision Point. Configure each task to be assigned to different users or roles. For Zakat processing: Simultaneously assign document verification to one officer, income verification to another, and home visit scheduling to a third officer.
+
+**Q: How can I implement dynamic task assignment based on workload or expertise?**
+
+A: Use Business Rule components to determine task assignment logic. Configure rules based on user availability, expertise, or current workload. For Zakat scenarios: Assign complex cases to senior officers, simple cases to junior officers, or route based on applicant location.
+
+**Q: How do I handle process exceptions and create alternative paths when standard procedures fail?**
+
+A: Use Decision Point components with error handling conditions. Configure API Call components with "Continue on Error" options and create alternative paths. For Zakat applications: If IC verification fails, route to manual verification; if income verification fails, request additional documents.
+
+**Q: How can I implement time-based escalations for overdue tasks?**
+
+A: Use Notification components with time-based triggers. Configure escalation rules in Business Rule components. For Zakat processing: If verification task is not completed within 3 days, automatically escalate to supervisor and send reminder notifications.
+
+**Q: How do I implement data validation across multiple process steps?**
+
+A: Use Business Rule components at each critical decision point. Configure validation rules that check data consistency across steps. For Zakat applications: Validate that income declared in initial form matches supporting documents in verification step.
+
+**Q: How can I implement audit trails and compliance tracking for sensitive processes?**
+
+A: Use the built-in audit logging features. Configure process variables to track all changes and decisions. For Zakat processing: Log all approval decisions, document uploads, verification results, and final outcomes for compliance reporting.
+
+**Q: How do I implement role-based access control for different process stages?**
+
+A: Configure user roles and permissions in the system settings. Assign specific roles to Form Task components. For Zakat workflows: Assign application submission to public users, verification to officers, approval to supervisors, and final review to managers.
+
+**Q: How can I implement process analytics and performance monitoring for continuous improvement?**
+
+A: Use the Process Analytics dashboard to track key metrics. Monitor completion times, bottleneck identification, and user performance. For Zakat processing: Track average processing time, approval rates, rejection reasons, and officer productivity for process optimization.
+
+## Technical Implementation
+
+**Q: How do I configure complex business rules with multiple conditions?**
+
+A: Use Business Rule components with rule groups. Create multiple rule groups with different priorities. Configure conditions using AND/OR logic. For Zakat eligibility: Rule Group 1 (Income < Had Kifayah), Rule Group 2 (No luxury assets), Rule Group 3 (Malaysian citizen), with appropriate actions for each group.
+
+**Q: How do I implement custom JavaScript logic in Script Task components?**
+
+A: Write JavaScript code in the Script Task configuration. Use input variables from previous steps and set output variables for subsequent steps. For Zakat calculations: Calculate monthly expenses, determine eligibility percentage, or compute Zakat amount based on income and assets.
+
+**Q: How do I configure API authentication and error handling?**
+
+A: In API Call components, configure authentication headers, request/response mapping, and error handling paths. Set up retry logic and alternative paths for failed API calls. For external integrations: Use API keys, OAuth tokens, or certificate-based authentication as required by the external system.
+
+**Q: How do I implement process variables and data flow between components?**
+
+A: Define process variables in the Variables tab. Use these variables in component configurations and form field mappings. For data flow: Store form data in variables, pass them between components, and use them in decision conditions or API calls.
+
+**Q: How do I configure conditional form logic for dynamic field display?**
+
+A: In Form Builder, select any component and go to Conditional Logic section. Set conditions based on other field values. For complex forms: Use multiple conditions with AND/OR logic to show/hide fields based on user selections.
+
+## Best Practices
+
+**Q: What are the best practices for process design and optimization?**
+
+A: 
+- **Keep processes simple**: Avoid overly complex workflows
+- **Use clear naming**: Name components and variables descriptively
+- **Test thoroughly**: Preview and test processes before publishing
+- **Document decisions**: Use annotations to explain complex logic
+- **Monitor performance**: Regularly review analytics for bottlenecks
+- **Version control**: Save versions before major changes
+
+**Q: How do I ensure data security and compliance in sensitive processes?**
+
+A:
+- **Role-based access**: Assign appropriate permissions to users
+- **Audit logging**: Enable comprehensive audit trails
+- **Data encryption**: Ensure sensitive data is encrypted
+- **Compliance tracking**: Log all decisions and actions
+- **Regular reviews**: Conduct periodic security assessments
+
+**Q: What are the best practices for form design and user experience?**
+
+A:
+- **Logical flow**: Arrange fields in logical order
+- **Clear labels**: Use descriptive field labels and help text
+- **Validation**: Implement appropriate validation rules
+- **Responsive design**: Ensure forms work on all devices
+- **Progress indicators**: Show progress in multi-step forms
+
+**Q: How do I optimize process performance and reduce bottlenecks?**
+
+A:
+- **Parallel processing**: Use parallel tasks where possible
+- **Efficient routing**: Minimize unnecessary decision points
+- **Resource allocation**: Balance workload across users
+- **Monitoring**: Track performance metrics regularly
+- **Continuous improvement**: Use analytics to identify optimization opportunities
+
+**Q: What are the best practices for API integration and external system connectivity?**
+
+A:
+- **Error handling**: Implement robust error handling and retry logic
+- **Authentication**: Use secure authentication methods
+- **Rate limiting**: Respect API rate limits and quotas
+- **Monitoring**: Track API call success rates and response times
+- **Documentation**: Maintain clear documentation of integrations
+
+---
+
+*Previous Chapter: [Process Management](05-process-management.md)*
+
+*Back to [Documentation Home](README.md)* 
\ No newline at end of file
diff --git a/documentation/README.md b/docs/documentation/README.md
similarity index 100%
rename from documentation/README.md
rename to docs/documentation/README.md
diff --git a/navigation/index.js b/navigation/index.js
index 5d8c684..10e4380 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -45,4 +45,15 @@ export default [
       },
     ],
   },
+  {
+    header: "Documentation",
+    description: "Learn how to use the platform",
+    child: [
+      {
+        title: "Documentation",
+        path: "/documentation",
+        icon: "material-symbols:book",
+      },
+    ],
+  },
 ];
diff --git a/nuxt.config.js b/nuxt.config.js
index dd80162..a90f876 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -22,18 +22,18 @@ export default defineNuxtConfig({
   app: {
     pageTransition: { name: "page", mode: "out-in" },
   },
-  vite:{
-    server:{
+  vite: {
+    server: {
       watch: {
         usePolling: true,
         interval: 1000,
       },
     },
     optimizeDeps: {
-      include: ['vue-toastification'],
+      include: ["vue-toastification"],
     },
     ssr: {
-      noExternal: ['vue-toastification'],
+      noExternal: ["vue-toastification"],
     },
   },
   head: {
diff --git a/package.json b/package.json
index 824cc57..31f1cfe 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "jsonwebtoken": "^8.5.1",
     "jspdf": "^3.0.1",
     "luxon": "^3.1.0",
+    "marked": "^16.1.1",
     "maska": "^1.5.0",
     "pinia": "^2.1.6",
     "prettier": "^3.3.3",
@@ -88,5 +89,6 @@
     "vue3-click-away": "^1.2.4",
     "vue3-dropzone": "^2.0.1",
     "vuedraggable": "^4.1.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/pages/documentation/index.vue b/pages/documentation/index.vue
new file mode 100644
index 0000000..f2fce5e
--- /dev/null
+++ b/pages/documentation/index.vue
@@ -0,0 +1,1112 @@
+<script setup>
+import { ref, onMounted, onUnmounted, computed, watch, nextTick } from "vue";
+import { marked } from "marked";
+
+const docs = ref([]);
+const loading = ref(true);
+const error = ref(null);
+const selected = ref(null);
+const searchQuery = ref("");
+const showMobileSidebar = ref(false);
+const scrollProgress = ref(0);
+const currentToc = ref([]);
+const showToc = ref(false);
+const activeSection = ref(null);
+
+// Initialize marked with custom renderer for better HTML
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+  headerIds: true,
+});
+
+definePageMeta({
+  title: "Documentation",
+  layout: "empty",
+});
+
+// Configure custom renderer for TOC extraction
+const renderer = new marked.Renderer();
+const originalHeading = renderer.heading;
+const originalLink = renderer.link;
+renderer.heading = function (text, level, raw) {
+  const safeRaw = String(raw || text || "");
+  const id = safeRaw
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, "")
+    .replace(/[\s]+/g, "-");
+  return `<h${level} id="${id}" class="scroll-mt-20">${text}</h${level}>`;
+};
+// Custom link renderer for internal .md links
+renderer.link = function (href, title, text) {
+  if (href && String(href).endsWith('.md')) {
+    const file = String(href).split('/').pop();
+    // Use a special class for delegation
+    return `<a href="#" class="doc-link" data-doc="${file}">${text}</a>`;
+  }
+  return originalLink.call(this, href, title, text);
+};
+marked.setOptions({ renderer });
+
+onMounted(async () => {
+  try {
+    const files = await $fetch("/api/documentation");
+    const docPromises = files.map(async (file) => {
+      try {
+        const response = await $fetch(`/api/documentation/${file}`);
+        let content = response?.content || "";
+
+        if (!content) {
+          console.warn(`Empty content for file: ${file}`);
+          return null;
+        }
+
+        // Enhanced content cleaning to remove any object serialization issues
+        content = String(content)
+          .replace(/\[object Object\]/g, "")
+          .replace(/\[object\s+Object\]/gi, "")
+          .replace(/\bobject Object\b/gi, "")
+          .replace(/\[Object\]/gi, "")
+          .replace(/Object\s*\{[^}]*\}/gi, "")
+          .replace(/\{\s*\[native code\]\s*\}/gi, "")
+          .replace(/^\s*\[object.*?\]\s*$/gim, "")
+          .trim();
+        
+        let html = marked.parse(content);
+        
+        // Post-process HTML to remove any remaining object references
+        html = html
+          .replace(/\[object Object\]/g, "")
+          .replace(/\[object\s+Object\]/gi, "")
+          .replace(/\bobject Object\b/gi, "")
+          .replace(/<p>\s*\[object.*?\]\s*<\/p>/gi, "")
+          .replace(/<[^>]*>\s*\[object.*?\]\s*<\/[^>]*>/gi, "");
+
+        // Extract metadata from filename
+        const match = file.match(/^(\d+)-(.+)\.md$/);
+        const order = match ? parseInt(match[1]) : 999;
+        const cleanTitle = (match ? match[2] : file.replace(/\.md$/, ""))
+          .replace(/[-_]/g, " ")
+          .replace(/\b\w/g, (l) => l.toUpperCase());
+
+        // Extract table of contents
+        const tocMatch = content.match(
+          /## Table of Contents([\s\S]*?)(?=\n---|\n##[^#]|$)/
+        );
+        const toc = tocMatch ? extractTocFromContent(tocMatch[1]) : [];
+
+        // Estimate reading time (250 words per minute)
+        const wordCount = content
+          .split(/\s+/)
+          .filter((word) => word.length > 0).length;
+        const readingTime = Math.max(1, Math.ceil(wordCount / 250));
+
+        return {
+          file,
+          title: cleanTitle,
+          html,
+          content,
+          order,
+          toc,
+          readingTime,
+          category: getCategoryFromOrder(order),
+        };
+      } catch (error) {
+        console.error(`Error processing file ${file}:`, error);
+        return null;
+      }
+    });
+
+    docs.value = (await Promise.all(docPromises))
+      .filter((doc) => doc !== null)
+      .sort((a, b) => a.order - b.order);
+
+    selected.value = docs.value[0]?.file || null;
+    updateToc();
+
+    // Add keyboard listeners
+    document.addEventListener("keydown", handleKeyNavigation);
+  } catch (e) {
+    error.value = "Failed to load documentation.";
+    console.error("Documentation loading error:", e);
+  } finally {
+    loading.value = false;
+  }
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleKeyNavigation);
+});
+
+// Scrollspy for TOC
+function handleScrollSpy() {
+  const headings = Array.from(document.querySelectorAll('.prose h2, .prose h3'));
+  const scrollY = window.scrollY || document.querySelector('.main-content')?.scrollTop || 0;
+  let current = null;
+  for (const heading of headings) {
+    const rect = heading.getBoundingClientRect();
+    if (rect.top + window.scrollY - 120 <= scrollY) {
+      current = heading.id;
+    }
+  }
+  activeSection.value = current;
+}
+
+onMounted(() => {
+  document.querySelector('.main-content')?.addEventListener('scroll', handleScrollSpy);
+  window.addEventListener('scroll', handleScrollSpy);
+});
+onUnmounted(() => {
+  document.querySelector('.main-content')?.removeEventListener('scroll', handleScrollSpy);
+  window.removeEventListener('scroll', handleScrollSpy);
+});
+
+// Event delegation for .doc-link clicks
+onMounted(() => {
+  const handler = (e) => {
+    const target = e.target.closest('.doc-link');
+    if (target && target.dataset.doc) {
+      e.preventDefault();
+      e.stopPropagation();
+      selectDoc(target.dataset.doc);
+    }
+  };
+  document.addEventListener('click', handler);
+  window.__docLinkHandler = handler;
+});
+onUnmounted(() => {
+  if (window.__docLinkHandler) {
+    document.removeEventListener('click', window.__docLinkHandler);
+    delete window.__docLinkHandler;
+  }
+});
+
+// Extract TOC from markdown content
+function extractTocFromContent(tocContent) {
+  if (!tocContent || typeof tocContent !== "string") {
+    return [];
+  }
+
+  try {
+    const lines = tocContent.split("\n").filter((line) => line.trim());
+    return lines
+      .map((line) => {
+        const match = line.match(/^\s*\d+\.\s*\[([^\]]+)\]\(#([^)]+)\)/);
+        if (match) {
+          return { title: match[1], id: match[2], level: 1 };
+        }
+        return null;
+      })
+      .filter(Boolean);
+  } catch (error) {
+    console.error("Error extracting TOC:", error);
+    return [];
+  }
+}
+
+// Get category based on chapter order
+function getCategoryFromOrder(order) {
+  if (order <= 1) return "Getting Started";
+  if (order <= 3) return "Form Management";
+  if (order <= 5) return "Process Management";
+  return "Advanced Topics";
+}
+
+// Computed properties
+const filteredDocs = computed(() => {
+  if (!searchQuery.value.trim()) return docs.value;
+
+  const query = searchQuery.value.toLowerCase();
+  return docs.value.filter((doc) => {
+    if (!doc || !doc.title || !doc.content) return false;
+    return (
+      doc.title.toLowerCase().includes(query) ||
+      doc.content.toLowerCase().includes(query)
+    );
+  });
+});
+
+const selectedDoc = computed(() => {
+  return docs.value.find((doc) => doc.file === selected.value);
+});
+
+const currentDocIndex = computed(() => {
+  return docs.value.findIndex((doc) => doc.file === selected.value);
+});
+
+const previousDoc = computed(() => {
+  const index = currentDocIndex.value;
+  return index > 0 ? docs.value[index - 1] : null;
+});
+
+const nextDoc = computed(() => {
+  const index = currentDocIndex.value;
+  return index < docs.value.length - 1 ? docs.value[index + 1] : null;
+});
+
+// Functions
+const selectDoc = (file) => {
+  selected.value = file;
+  showMobileSidebar.value = false;
+  scrollProgress.value = 0;
+  searchQuery.value = "";
+  updateToc();
+  scrollToTop();
+};
+
+// Keyboard navigation
+const handleKeyNavigation = (event) => {
+  if (event.ctrlKey || event.metaKey) {
+    switch (event.key) {
+      case "k":
+        event.preventDefault();
+        document.querySelector('input[type="text"]')?.focus();
+        break;
+      case "ArrowLeft":
+        if (previousDoc.value) {
+          event.preventDefault();
+          selectDoc(previousDoc.value.file);
+        }
+        break;
+      case "ArrowRight":
+        if (nextDoc.value) {
+          event.preventDefault();
+          selectDoc(nextDoc.value.file);
+        }
+        break;
+    }
+  }
+
+  if (event.key === "Escape") {
+    searchQuery.value = "";
+    showMobileSidebar.value = false;
+  }
+};
+
+const updateToc = () => {
+  nextTick(() => {
+    const headings = document.querySelectorAll(".prose h2, .prose h3");
+    currentToc.value = Array.from(headings).map((heading) => ({
+      id: heading.id,
+      title: heading.textContent,
+      level: parseInt(heading.tagName.charAt(1)),
+    }));
+    showToc.value = currentToc.value.length > 3;
+  });
+};
+
+const scrollToTop = () => {
+  const mainContent = document.querySelector(".main-content");
+  if (mainContent) {
+    mainContent.scrollTo({ top: 0, behavior: "smooth" });
+  }
+};
+
+const scrollToSection = (id) => {
+  const element = document.getElementById(id);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+};
+
+// Add copy buttons to code blocks after content is loaded
+const addCopyButtons = () => {
+  nextTick(() => {
+    const codeBlocks = document.querySelectorAll(".prose pre");
+    codeBlocks.forEach((block) => {
+      // Skip if button already exists
+      if (block.querySelector(".copy-button")) return;
+
+      const button = document.createElement("button");
+      button.className =
+        "copy-button absolute top-2 right-2 px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors";
+      button.textContent = "Copy";
+      button.onclick = () => {
+        const code = block.querySelector("code");
+        if (code) {
+          navigator.clipboard.writeText(code.textContent).then(() => {
+            button.textContent = "Copied!";
+            button.classList.add("bg-green-500");
+            setTimeout(() => {
+              button.textContent = "Copy";
+              button.classList.remove("bg-green-500");
+            }, 2000);
+          });
+        }
+      };
+
+      block.style.position = "relative";
+      block.appendChild(button);
+    });
+  });
+};
+
+// Watch for scroll progress and add copy buttons
+watch(selected, () => {
+  nextTick(() => {
+    const mainContent = document.querySelector(".main-content");
+    if (mainContent) {
+      const updateProgress = () => {
+        const scrollTop = mainContent.scrollTop;
+        const scrollHeight =
+          mainContent.scrollHeight - mainContent.clientHeight;
+        scrollProgress.value =
+          scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
+      };
+
+      mainContent.addEventListener("scroll", updateProgress);
+      updateProgress();
+    }
+
+    // Add copy buttons to code blocks
+    addCopyButtons();
+  });
+});
+</script>
+
+<template>
+  <div class="flex flex-col h-screen bg-gray-50">
+    <!-- Header Bar ---->
+    <header class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between shadow-sm">
+      <div class="flex items-center gap-4">
+        <NuxtLink to="/" class="cursor-pointer">
+          <Icon
+            name="ph:arrow-circle-left-duotone"
+            class="w-6 h-6 hover:text-gray-600 text-gray-500"
+          />
+        </NuxtLink>
+        <div class="flex items-center gap-3">
+          <img
+            src="@/assets/img/logo/logo-word-black.svg"
+            alt="Corrad Logo"
+            class="h-8"
+          />
+          <div class="border-l border-gray-300 pl-3">
+            <h1 class="text-xl font-semibold text-gray-900">Documentation</h1>
+            <p class="text-sm text-gray-500">System guides and references</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <!-- Search Bar -->
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <Icon name="material-symbols:search" class="h-5 w-5 text-gray-400" />
+          </div>
+          <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="Search documentation... (Ctrl+K)"
+            class="pl-10 pr-4 py-2 w-80 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+        
+        <!-- Mobile menu button -->
+        <button
+          @click="showMobileSidebar = !showMobileSidebar"
+          class="lg:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          <Icon name="material-symbols:menu" class="h-6 w-6" />
+        </button>
+      </div>
+    </header>
+
+    <!-- Main Content Area -->
+    <div class="flex-1 overflow-auto">
+      <div class="p-6">
+        <div class="flex gap-6">
+          <!-- Sidebar -->
+          <aside
+            class="w-80 flex-shrink-0 sticky top-6 h-fit"
+            :class="showMobileSidebar ? 'block' : 'hidden lg:block'"
+          >
+            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+              <h2 class="text-lg font-semibold text-gray-900 mb-6">Contents</h2>
+
+              <!-- Category Filter -->
+              <div class="space-y-1" v-if="!searchQuery">
+                <div
+                  v-for="category in [
+                    'Getting Started',
+                    'Form Management',
+                    'Process Management',
+                    'Advanced Topics',
+                  ]"
+                  :key="category"
+                  class="mb-6"
+                >
+                  <h3 class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-3">
+                    {{ category }}
+                  </h3>
+                  <div class="space-y-1">
+                    <button
+                      v-for="doc in docs.filter((d) => d.category === category && d.order !== 999)"
+                      :key="doc.file"
+                      @click="selectDoc(doc.file)"
+                      class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors group"
+                      :class="
+                        selected === doc.file
+                          ? 'bg-blue-50 text-blue-700 font-medium border border-blue-200'
+                          : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
+                      "
+                    >
+                      <div class="flex items-center justify-between">
+                        <div class="flex items-center space-x-3">
+                          <span
+                            class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600 text-white text-xs font-bold flex items-center justify-center"
+                            >{{ doc.order }}</span
+                          >
+                          <span>{{ doc.title }}</span>
+                        </div>
+                        <div class="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <span class="text-xs text-gray-400">{{ doc.readingTime }} min</span>
+                          <Icon
+                            v-if="selected === doc.file"
+                            name="material-symbols:check-circle"
+                            class="w-4 h-4 text-blue-500"
+                          />
+                        </div>
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Search Results -->
+              <div v-else class="space-y-1">
+                <div
+                  v-if="filteredDocs.filter((doc) => doc.order !== 999).length === 0"
+                  class="text-sm text-gray-500 text-center py-4"
+                >
+                  No results found for "{{ searchQuery }}"
+                </div>
+                <button
+                  v-for="doc in filteredDocs.filter((doc) => doc.order !== 999)"
+                  :key="doc.file"
+                  @click="selectDoc(doc.file)"
+                  class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
+                  :class="
+                    selected === doc.file
+                      ? 'bg-blue-50 text-blue-700 font-medium'
+                      : 'text-gray-700 hover:bg-gray-50'
+                  "
+                >
+                  <div class="flex items-center justify-between">
+                    <span>{{ doc.title }}</span>
+                    <span class="text-xs text-gray-400">{{ doc.readingTime }} min</span>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </aside>
+
+          <!-- Main Content -->
+          <main class="flex-1 min-w-0">
+            <div class="flex gap-6">
+              <!-- Document Content -->
+              <div class="flex-1">
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200">
+                  <!-- Loading State -->
+                  <div v-if="loading" class="p-12 text-center">
+                    <Icon name="material-symbols:progress-activity" class="w-8 h-8 animate-spin text-blue-500 mx-auto mb-4" />
+                    <p class="text-gray-500">Loading documentation...</p>
+                  </div>
+
+                  <!-- Error State -->
+                  <div v-else-if="error" class="p-12 text-center">
+                    <Icon name="material-symbols:error-outline" class="w-16 h-16 text-red-300 mx-auto mb-4" />
+                    <div class="text-red-500 text-lg font-medium mb-2">{{ error }}</div>
+                    <p class="text-gray-500">Please try refreshing the page</p>
+                  </div>
+
+                  <!-- Document Content -->
+                  <div v-else-if="selectedDoc">
+                    <!-- Document Header -->
+                    <div class="px-8 py-4 border-b border-gray-200 bg-gray-50">
+                      <div class="flex items-center justify-between my-4">
+                        <div class="flex items-center space-x-4">
+                          <span class="w-10 h-10 rounded-full bg-blue-600 text-white text-lg font-bold flex items-center justify-center">
+                            {{ selectedDoc.order }}
+                          </span>
+                          <div>
+                            <div class="flex items-center gap-2 mb-2">
+                              <RsBadge variant="secondary" size="sm">
+                                {{ selectedDoc.category }}
+                              </RsBadge>
+                            </div>
+                            <h1 class="text-2xl font-bold text-gray-900">
+                              {{ selectedDoc.title }}
+                            </h1>
+                          </div>
+                        </div>
+                        <div class="text-right text-sm text-gray-500">
+                          <div class="flex items-center gap-1">
+                            <Icon name="material-symbols:schedule" class="w-4 h-4" />
+                            <span>{{ selectedDoc.readingTime }} min read</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Document Body -->
+                    <div class="main-content bg-gradient-to-br from-gray-50 to-white shadow-xl rounded-2xl" style="overflow-y: auto; position:relative;">
+                      <div class="relative">
+                        <!-- Subtle background pattern -->
+                        <div class="absolute inset-0 opacity-10 pointer-events-none">
+                          <div class="absolute inset-0" style="background-image: radial-gradient(circle at 1px 1px, #3b82f6 1px, transparent 0); background-size: 32px 32px;"></div>
+                        </div>
+                        <div class="relative px-8 py-12">
+                          <div class="max-w-4xl mx-auto">
+                            <!-- Divider after TOC and before first heading -->
+                            <div v-if="currentToc.length > 0" class="mb-8">
+                              <hr class="border-t-2 border-blue-100 my-6" />
+                            </div>
+                            <div
+                              class="prose prose-lg max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-headings:scroll-mt-20 prose-h1:text-3xl prose-h1:mt-0 prose-h1:mb-8 prose-h1:text-gray-900 prose-h2:text-xl prose-h2:mt-10 prose-h2:mb-6 prose-h2:text-gray-800 prose-h3:text-lg prose-h3:mt-8 prose-h3:mb-4 prose-h3:text-gray-700 prose-p:mb-6 prose-p:leading-relaxed prose-p:text-gray-600 prose-p:text-base prose-code:bg-blue-50 prose-code:text-blue-700 prose-code:px-2 prose-code:py-1 prose-code:rounded-md prose-code:text-sm prose-code:font-medium prose-code:border prose-code:border-blue-200 prose-pre:bg-slate-900 prose-pre:text-slate-100 prose-pre:rounded-xl prose-pre:p-6 prose-pre:overflow-x-auto prose-pre:my-8 prose-pre:shadow-lg prose-table:rounded-xl prose-table:overflow-hidden prose-table:border-0 prose-table:border-gray-200 prose-table:my-8 prose-table:shadow-sm prose-th:bg-gray-100 prose-th:font-semibold prose-th:p-4 prose-th:text-gray-800 prose-td:p-4 prose-td:border-b prose-td:border-gray-100 prose-a:text-blue-600 prose-a:no-underline prose-a:font-medium hover:prose-a:underline hover:prose-a:text-blue-700 prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:bg-gradient-to-r prose-blockquote:from-blue-50 prose-blockquote:to-indigo-50 prose-blockquote:p-6 prose-blockquote:rounded-r-xl prose-blockquote:my-8 prose-blockquote:shadow-sm prose-ul:my-6 prose-ul:pl-0 prose-ol:my-6 prose-ol:pl-0 prose-li:my-2 prose-li:leading-relaxed prose-li:text-gray-600 prose-strong:font-semibold prose-strong:text-gray-900"
+                              v-html="selectedDoc.html"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Navigation Footer -->
+                    <div class="px-8 py-6 bg-gray-50 border-t border-gray-200 flex justify-between items-center">
+                      <RsButton
+                        v-if="previousDoc"
+                        @click="selectDoc(previousDoc.file)"
+                        variant="secondary"
+                        size="sm"
+                      >
+                        <Icon name="material-symbols:chevron-left" class="mr-1" />
+                        {{ previousDoc.title }}
+                      </RsButton>
+                      <div v-else></div>
+
+                      <RsButton
+                        v-if="nextDoc"
+                        @click="selectDoc(nextDoc.file)"
+                        variant="primary"
+                        size="sm"
+                      >
+                        {{ nextDoc.title }}
+                        <Icon name="material-symbols:chevron-right" class="ml-1" />
+                      </RsButton>
+                      <div v-else></div>
+                    </div>
+                  </div>
+
+                  <!-- Empty State -->
+                  <div v-else class="p-12 text-center">
+                    <Icon name="material-symbols:description-outline" class="w-16 h-16 text-gray-300 mx-auto mb-4" />
+                    <h3 class="text-lg font-medium text-gray-900 mb-2">Select a document</h3>
+                    <p class="text-gray-600">Choose a documentation topic from the sidebar to get started</p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Table of Contents -->
+              <aside
+                v-if="showToc && currentToc.length > 0"
+                class="hidden xl:block w-64 flex-shrink-0 sticky top-24 h-fit"
+              >
+                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                  <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">
+                    On This Page
+                  </h3>
+                  <nav class="space-y-2">
+                    <a
+                      v-for="item in currentToc"
+                      :key="item.id"
+                      @click.prevent="scrollToSection(item.id)"
+                      href="#"
+                      class="block text-sm text-gray-600 hover:text-blue-600 transition-colors py-1 border-l-2 border-transparent hover:border-blue-500 pl-3"
+                      :class="[{'ml-4': item.level === 3}, activeSection === item.id ? 'border-blue-500 text-blue-700 font-semibold bg-blue-50' : '']"
+                    >
+                      {{ item.title }}
+                    </a>
+                  </nav>
+                </div>
+              </aside>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile Sidebar Overlay -->
+    <div
+      v-if="showMobileSidebar"
+      @click="showMobileSidebar = false"
+      class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+/* Enhanced prose styling with visual richness */
+.prose :where(h1):not(:where([class~="not-prose"] *)) {
+  font-size: 2.5rem;
+  margin-top: 0;
+  margin-bottom: 2.5rem;
+  color: #1f2937;
+  font-weight: 800;
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.prose :where(h2):not(:where([class~="not-prose"] *)) {
+  font-size: 1.75rem;
+  margin-top: 3.5rem;
+  margin-bottom: 1.5rem;
+  color: #1f2937;
+  position: relative;
+  font-weight: 700;
+  line-height: 1.3;
+  padding-left: 1.5rem;
+  border-left: 4px solid transparent;
+  background: linear-gradient(white, white) padding-box, 
+              linear-gradient(135deg, #3b82f6, #6366f1) border-box;
+  border-left: 4px solid;
+  background-clip: padding-box, border-box;
+  padding: 0.75rem 0 0.75rem 1.5rem;
+  margin-left: -1.5rem;
+  border-radius: 0 8px 8px 0;
+  background-color: rgba(59, 130, 246, 0.03);
+}
+
+.prose :where(h2):not(:where([class~="not-prose"] *))::after {
+  content: "";
+  position: absolute;
+  right: -1.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+  border-radius: 50%;
+  opacity: 0.6;
+}
+
+.prose :where(h3):not(:where([class~="not-prose"] *)) {
+  font-size: 1.375rem;
+  margin-top: 2.5rem;
+  margin-bottom: 1.25rem;
+  color: #374151;
+  font-weight: 600;
+  line-height: 1.4;
+  position: relative;
+  padding-left: 1rem;
+}
+
+.prose :where(h3):not(:where([class~="not-prose"] *))::before {
+  content: "▶";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #3b82f6;
+  font-size: 0.75rem;
+  transform: rotate(90deg);
+  transition: transform 0.2s ease;
+}
+
+.prose :where(p):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.75rem;
+  line-height: 1.8;
+  color: #4b5563;
+  font-size: 1rem;
+}
+
+.prose :where(p):not(:where([class~="not-prose"] *)):first-child {
+  margin-top: 0;
+  font-size: 1.125rem;
+  color: #374151;
+  font-weight: 500;
+}
+
+.prose :where(ul):not(:where([class~="not-prose"] *)),
+.prose :where(ol):not(:where([class~="not-prose"] *)) {
+  margin: 2rem 0;
+  padding-left: 0;
+}
+
+.prose :where(li):not(:where([class~="not-prose"] *)) {
+  margin: 0.75rem 0;
+  line-height: 1.7;
+  color: #4b5563;
+  position: relative;
+  padding-left: 1.5rem;
+}
+
+.prose :where(ul li):not(:where([class~="not-prose"] *))::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.75rem;
+  width: 6px;
+  height: 6px;
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+
+.prose :where(strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 700;
+  color: #1f2937;
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Enhanced visual elements */
+.prose :where(em):not(:where([class~="not-prose"] *)) {
+  font-style: italic;
+  color: #6366f1;
+  font-weight: 500;
+}
+
+.prose :where(hr):not(:where([class~="not-prose"] *)) {
+  border: none;
+  height: 2px;
+  background: linear-gradient(to right, transparent, #3b82f6, transparent);
+  margin: 3rem 0;
+  border-radius: 1px;
+}
+
+.prose :where(pre):not(:where([class~="not-prose"] *)) {
+  background: #0f172a;
+  color: #f1f5f9;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  border: 1px solid #334155;
+  position: relative;
+  overflow-x: auto;
+}
+
+.prose :where(pre):not(:where([class~="not-prose"] *))::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #3b82f6;
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *)) {
+  background: #f1f5f9;
+  color: #3b82f6;
+  border-radius: 0.375rem;
+  padding: 0.2em 0.5em;
+  font-weight: 500;
+  border: 1px solid #e2e8f0;
+}
+
+.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
+  border: none;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.08));
+  margin: 2.5rem 0;
+  padding: 2rem;
+  border-radius: 1rem;
+  position: relative;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border-left: 4px solid transparent;
+  background-clip: padding-box;
+  overflow: hidden;
+}
+
+.prose :where(blockquote):not(:where([class~="not-prose"] *))::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+}
+
+.prose :where(blockquote):not(:where([class~="not-prose"] *))::after {
+  content: "\201C";
+  position: absolute;
+  top: 0.5rem;
+  right: 1rem;
+  font-size: 4rem;
+  color: rgba(59, 130, 246, 0.15);
+  font-family: Georgia, serif;
+  line-height: 1;
+}
+
+.prose :where(table):not(:where([class~="not-prose"] *)) {
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 1rem;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  background: white;
+  margin: 2.5rem 0;
+}
+
+.prose :where(th):not(:where([class~="not-prose"] *)) {
+  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+  font-weight: 700;
+  color: #1f2937;
+  text-align: left;
+  padding: 1rem 1.5rem;
+  border-bottom: 2px solid #e5e7eb;
+  position: relative;
+}
+
+.prose :where(th):not(:where([class~="not-prose"] *))::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(to right, #3b82f6, #6366f1);
+}
+
+.prose :where(td):not(:where([class~="not-prose"] *)) {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #f3f4f6;
+  transition: background-color 0.2s ease;
+}
+
+.prose :where(tr):not(:where([class~="not-prose"] *)):hover {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(99, 102, 241, 0.02));
+}
+
+/* Add some visual enhancements */
+.prose {
+  position: relative;
+}
+
+.prose::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -2rem;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.3), transparent);
+  border-radius: 1px;
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+.main-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.main-content::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 3px;
+}
+
+.main-content::-webkit-scrollbar-thumb {
+  background: #3b82f6;
+  border-radius: 3px;
+}
+
+.main-content::-webkit-scrollbar-thumb:hover {
+  background: #2563eb;
+}
+
+/* Animation for sidebar toggle */
+@media (max-width: 1024px) {
+  aside {
+    transition: transform 0.3s ease-in-out;
+  }
+}
+
+/* Focus styles */
+.prose :where(a):not(:where([class~="not-prose"] *)):focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+/* Transitions */
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* Print styles */
+@media print {
+  .prose {
+    max-width: none;
+  }
+  
+  .prose :where(pre):not(:where([class~="not-prose"] *)) {
+    background: #f8f9fa !important;
+    color: #212529 !important;
+    border: 1px solid #dee2e6 !important;
+  }
+  
+  .prose :where(code):not(:where([class~="not-prose"] *)) {
+    background: #f8f9fa !important;
+    color: #212529 !important;
+  }
+}
+
+/* Callout styles for markdown notes/warnings/tips */
+.prose blockquote p strong {
+  display: inline-block;
+  margin-right: 0.5em;
+}
+.prose blockquote p strong:contains('Note:') {
+  color: #2563eb;
+}
+.prose blockquote p strong:contains('Warning:') {
+  color: #f59e42;
+}
+.prose blockquote p strong:contains('Tip:') {
+  color: #10b981;
+}
+.prose blockquote {
+  border-left: 6px solid #3b82f6;
+  background: linear-gradient(135deg, #eff6ff 80%, #f0fdfa 100%);
+  padding: 1.5rem 2rem;
+  margin: 2rem 0;
+  border-radius: 0.75rem;
+  box-shadow: 0 2px 8px 0 rgba(59,130,246,0.04);
+}
+/* Responsive tables */
+.prose table {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  border-radius: 0.5rem;
+}
+.prose th, .prose td {
+  white-space: nowrap;
+}
+/* Code block improvements */
+.prose pre {
+  font-size: 1rem;
+  line-height: 1.6;
+  background: #0f172a;
+  color: #f1f5f9;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  border: 1px solid #334155;
+  overflow-x: auto;
+}
+.prose code {
+  font-size: 1em;
+  background: #f1f5f9;
+  color: #3b82f6;
+  border-radius: 0.375rem;
+  padding: 0.2em 0.5em;
+  font-weight: 500;
+  border: 1px solid #e2e8f0;
+}
+/* Spacing tweaks for readability */
+.prose p, .prose ul, .prose ol {
+  margin-bottom: 1.5em;
+}
+.prose h2 {
+  margin-top: 2.5em;
+  margin-bottom: 1.2em;
+}
+.prose h3 {
+  margin-top: 2em;
+  margin-bottom: 1em;
+}
+/* Make first paragraph after h1 larger and more readable */
+.prose h1 + p {
+  font-size: 1.25rem;
+  color: #3730a3;
+  font-weight: 500;
+  margin-bottom: 2.5rem;
+  margin-top: 0.5rem;
+}
+/* Divider after TOC and before first heading */
+hr {
+  border: none;
+  border-top: 2px solid #dbeafe;
+  margin: 2.5rem 0 2rem 0;
+}
+/* Callout styles with icons */
+.prose blockquote {
+  position: relative;
+  padding-left: 3.5rem;
+  border-left: 6px solid #3b82f6;
+  background: linear-gradient(135deg, #eff6ff 80%, #f0fdfa 100%);
+  margin: 2.5rem 0;
+  border-radius: 0.75rem;
+  box-shadow: 0 2px 8px 0 rgba(59,130,246,0.04);
+}
+.prose blockquote p strong {
+  display: inline-block;
+  margin-right: 0.5em;
+}
+.prose blockquote p strong:contains('Note:')::before {
+  content: '\2139'; /* info icon */
+  color: #2563eb;
+  font-size: 1.2em;
+  margin-right: 0.5em;
+}
+.prose blockquote p strong:contains('Warning:')::before {
+  content: '\26A0'; /* warning icon */
+  color: #f59e42;
+  font-size: 1.2em;
+  margin-right: 0.5em;
+}
+.prose blockquote p strong:contains('Tip:')::before {
+  content: '\1F4A1'; /* lightbulb icon */
+  color: #10b981;
+  font-size: 1.2em;
+  margin-right: 0.5em;
+}
+/* Zebra striping for tables */
+.prose tr:nth-child(even) td {
+  background: #f3f4f6;
+}
+/* Custom bullets for lists */
+.prose ul > li::before {
+  content: '\2022';
+  color: #3b82f6;
+  font-size: 1.2em;
+  margin-right: 0.75em;
+  position: absolute;
+  left: 0;
+  top: 0.5em;
+}
+.prose ul > li {
+  position: relative;
+  padding-left: 2em;
+}
+/* Enhance active TOC item */
+.toc a.border-blue-500 {
+  background: linear-gradient(90deg, #dbeafe 60%, transparent);
+  border-left: 4px solid #3b82f6 !important;
+  color: #1d4ed8 !important;
+  font-weight: 600;
+}
+/* Card shadow for main content */
+.main-content {
+  box-shadow: 0 8px 32px 0 rgba(30, 64, 175, 0.10), 0 1.5px 4px 0 rgba(59,130,246,0.04);
+  border-radius: 1.25rem;
+  background: linear-gradient(135deg, #f8fafc 80%, #f0fdfa 100%);
+}
+</style>
\ No newline at end of file
diff --git a/server/api/documentation/[file].get.js b/server/api/documentation/[file].get.js
new file mode 100644
index 0000000..3286dc7
--- /dev/null
+++ b/server/api/documentation/[file].get.js
@@ -0,0 +1,13 @@
+import fs from 'fs'
+import path from 'path'
+
+export default defineEventHandler(async (event) => {
+  const { file } = event.context.params
+  const docsDir = path.resolve(process.cwd(), 'content/documentation')
+  const filePath = path.join(docsDir, file)
+  if (!file.endsWith('.md') || !fs.existsSync(filePath)) {
+    return { error: 'File not found' }
+  }
+  const content = fs.readFileSync(filePath, 'utf-8')
+  return { content }
+}) 
\ No newline at end of file
diff --git a/server/api/documentation/index.get.js b/server/api/documentation/index.get.js
new file mode 100644
index 0000000..0eb1591
--- /dev/null
+++ b/server/api/documentation/index.get.js
@@ -0,0 +1,9 @@
+import fs from 'fs'
+import path from 'path'
+
+export default defineEventHandler(async (event) => {
+  const docsDir = path.resolve(process.cwd(), 'content/documentation')
+  const files = fs.readdirSync(docsDir)
+    .filter(file => file.endsWith('.md'))
+  return files
+}) 
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index d90f982..16e521e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6389,6 +6389,11 @@ make-dir@^3.1.0, make-dir@~3.1.0:
   dependencies:
     semver "^6.0.0"
 
+marked@^16.1.1:
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-16.1.1.tgz#a7839dcf19fa5e349cad12c561f231320690acd4"
+  integrity sha512-ij/2lXfCRT71L6u0M29tJPhP0bM5shLL3u5BePhFwPELj2blMJ6GDtD7PfJhRLhJ/c2UwrK17ySVcDzy2YHjHQ==
+
 maska@^1.5.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/maska/-/maska-1.5.2.tgz#ebc7e5165aab623814828b246b2334077841980e"