diff --git a/docs/Technical_Guide.md b/docs/Technical_Guide.md
new file mode 100644
index 0000000..31ed5a0
--- /dev/null
+++ b/docs/Technical_Guide.md
@@ -0,0 +1,818 @@
+# Electronic Document Management System (EDMS) - Technical Guide
+
+## Table of Contents
+1. [System Overview](#system-overview)
+2. [Architecture](#architecture)
+3. [Technology Stack](#technology-stack)
+4. [Database Schema](#database-schema)
+5. [Installation & Setup](#installation--setup)
+6. [Development Environment](#development-environment)
+7. [Component Structure](#component-structure)
+8. [API & Data Management](#api--data-management)
+9. [Security & Authentication](#security--authentication)
+10. [Deployment](#deployment)
+11. [Maintenance & Monitoring](#maintenance--monitoring)
+12. [Extension & Customization](#extension--customization)
+
+## System Overview
+
+The Electronic Document Management System (EDMS) is a modern web application built with Nuxt.js 3 and Vue.js 3, designed to provide a comprehensive document management solution for organizations. The system implements a hierarchical document organization structure with role-based access control (RBAC) and supports integration with external authentication providers like Authentik.
+
+### Key Technical Features
+- **Modern Frontend**: Vue.js 3 with Composition API and script setup syntax
+- **SSR/SPA Support**: Nuxt.js 3 for optimal performance and SEO
+- **Database**: Prisma ORM with MySQL/PostgreSQL support and migrations
+- **Styling**: TailwindCSS with custom component system
+- **State Management**: Pinia for reactive state management with persistence
+- **Authentication**: Flexible authentication with JWT tokens and RBAC
+- **File Management**: Server-side file handling with metadata and versioning
+- **Real-time Features**: Vue reactivity for live updates and notifications
+- **Responsive Design**: Mobile-first approach with adaptive layouts
+
+## Architecture
+
+### System Architecture
+```
+┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
+│   Frontend      │    │   Backend       │    │   Database      │
+│   (Nuxt.js)     │◄──►│   (Server API)  │◄──►│   (MySQL/PG)    │
+│                 │    │                 │    │                 │
+│ • Vue.js 3      │    │ • Prisma ORM    │    │ • User Data     │
+│ • TailwindCSS   │    │ • File System   │    │ • Documents     │
+│ • Pinia Store   │    │ • Authentication│    │ • Permissions   │
+│ • Components    │    │ • API Routes    │    │ • Audit Logs    │
+└─────────────────┘    └─────────────────┘    └─────────────────┘
+        │                       │                       │
+        │              ┌─────────────────┐             │
+        │              │ File Storage    │             │
+        └──────────────►│ • Documents     │◄────────────┘
+                       │ • Versions      │
+                       │ • Thumbnails    │
+                       │ • Temp Files    │
+                       └─────────────────┘
+```
+
+### Application Flow
+1. **Authentication**: User authenticates via configured authentication provider
+2. **Authorization**: System validates user permissions against RBAC rules
+3. **Navigation**: User navigates document hierarchy with tree-based structure
+4. **Data Fetching**: Pinia store manages API calls with caching and error handling
+5. **Rendering**: Vue components render UI with reactive updates
+6. **File Operations**: Server handles secure file upload/download/preview
+7. **Access Control**: System enforces granular document permissions
+8. **Audit Trail**: All actions are logged for compliance and security
+
+## Technology Stack
+
+### Frontend Dependencies
+```json
+{
+  "core": {
+    "nuxt": "^3.6.5",
+    "vue": "^3.x",
+    "@pinia/nuxt": "^0.4.11",
+    "@pinia-plugin-persistedstate/nuxt": "^1.1.1"
+  },
+  "styling": {
+    "@nuxtjs/tailwindcss": "^6.8.0",
+    "sass": "^1.62.0",
+    "postcss-import": "^15.1.0"
+  },
+  "forms": {
+    "@formkit/nuxt": "^1.0.0",
+    "@formkit/themes": "^1.0.0",
+    "@formkit/addons": "^1.0.0",
+    "@formkit/pro": "^0.115.3"
+  },
+  "ui": {
+    "apexcharts": "^3.36.0",
+    "vue3-apexcharts": "^1.4.1",
+    "@vueuse/core": "^9.5.0",
+    "@vueuse/nuxt": "^9.5.0",
+    "floating-vue": "^2.0.0-beta.24",
+    "vue3-dropzone": "^2.0.1"
+  },
+  "utilities": {
+    "luxon": "^3.1.0",
+    "uuid": "^10.0.0",
+    "crypto-js": "^4.1.1",
+    "@shimyshack/uid": "^0.1.7"
+  }
+}
+```
+
+### Backend Dependencies
+```json
+{
+  "database": {
+    "@prisma/client": "^5.1.1",
+    "prisma": "^5.1.1"
+  },
+  "authentication": {
+    "jsonwebtoken": "^8.5.1"
+  },
+  "file-handling": {
+    "jspdf": "^2.5.1"
+  },
+  "security": {
+    "nuxt-security": "^0.13.0"
+  }
+}
+```
+
+### Development Tools
+- **ESLint**: Code linting with Vue.js specific rules
+- **TypeScript**: Type safety with Nuxt TypeScript integration
+- **Prettier**: Consistent code formatting
+- **Vite**: Lightning-fast build tool and HMR
+- **PostCSS**: Advanced CSS processing with plugins
+
+## Database Schema
+
+### Core Models
+
+#### User Management
+```prisma
+model user {
+  userID           Int                @id @default(autoincrement())
+  userSecretKey    String?            @db.VarChar(255)
+  userUsername     String?            @unique @db.VarChar(255)
+  userPassword     String?            @db.VarChar(255)
+  userFullName     String?            @db.VarChar(255)
+  userEmail        String?            @unique @db.VarChar(255)
+  userPhone        String?            @db.VarChar(255)
+  userStatus       String?            @db.VarChar(255)
+  userCreatedDate  DateTime?          @default(now()) @db.DateTime(0)
+  userModifiedDate DateTime?          @updatedAt @db.DateTime(0)
+  
+  // Relationships
+  userrole         userrole[]
+  accessRequests   AccessRequest[]
+  permissions      AccessPermission[]
+  documents        Document[]         @relation("DocumentCreator")
+  cabinets         Cabinet[]          @relation("CabinetCreator")
+  drawers          Drawer[]           @relation("DrawerCreator")
+  folders          Folder[]           @relation("FolderCreator")
+  subfolders       Subfolder[]        @relation("SubfolderCreator")
+}
+
+model role {
+  roleID              Int                @id @default(autoincrement())
+  roleName            String             @unique @db.VarChar(255)
+  roleDescription     String?            @db.Text
+  rolePermissions     Json?              // Flexible permissions structure
+  roleCreatedDate     DateTime           @default(now()) @db.DateTime(0)
+  roleModifiedDate    DateTime           @updatedAt @db.DateTime(0)
+  
+  userrole            userrole[]
+  permissions         AccessPermission[]
+}
+```
+
+#### Document Hierarchy
+```prisma
+// Cabinet → Drawer → Folder → Subfolder → Document
+
+model Cabinet {
+  id          Int        @id @default(autoincrement())
+  name        String     @db.VarChar(255)
+  description String?    @db.Text
+  metadata    Json?      // Flexible metadata storage
+  createdAt   DateTime   @default(now()) @db.DateTime(0)
+  updatedAt   DateTime   @updatedAt @db.DateTime(0)
+  createdBy   Int
+  status      String     @default("active") @db.VarChar(50)
+  
+  user        user       @relation("CabinetCreator", fields: [createdBy], references: [userID])
+  drawers     Drawer[]
+  permissions AccessPermission[]
+  
+  @@index([createdBy])
+  @@index([status])
+}
+
+model Document {
+  id              Int        @id @default(autoincrement())
+  name            String     @db.VarChar(255)
+  description     String?    @db.Text
+  fileSize        Int        @default(0)
+  fileType        String     @db.VarChar(100)
+  fileExtension   String     @db.VarChar(20)
+  filePath        String     @db.VarChar(500)
+  thumbnailPath   String?    @db.VarChar(500)
+  checksum        String?    @db.VarChar(64)
+  version         Int        @default(1)
+  isTemplate      Boolean    @default(false)
+  isPublic        Boolean    @default(false)
+  metadata        Json?      // Custom metadata fields
+  tags            String?    @db.Text
+  folderId        Int?
+  subfolderId     Int?
+  createdAt       DateTime   @default(now()) @db.DateTime(0)
+  updatedAt       DateTime   @updatedAt @db.DateTime(0)
+  createdBy       Int
+  status          String     @default("active") @db.VarChar(50)
+  
+  folder          Folder?    @relation("FolderDocuments", fields: [folderId], references: [id], onDelete: SetNull)
+  subfolder       Subfolder? @relation("SubfolderDocuments", fields: [subfolderId], references: [id], onDelete: SetNull)
+  user            user       @relation("DocumentCreator", fields: [createdBy], references: [userID])
+  accessRequests  AccessRequest[]
+  permissions     AccessPermission[]
+  versions        DocumentVersion[]
+  
+  @@index([folderId])
+  @@index([subfolderId])
+  @@index([createdBy])
+  @@index([fileType])
+  @@index([status])
+  @@fulltext([name, description, tags])
+}
+```
+
+#### Access Control & Workflow
+```prisma
+model AccessPermission {
+  id              Int       @id @default(autoincrement())
+  userId          Int?
+  roleId          Int?
+  documentId      Int?
+  cabinetId       Int?
+  drawerId        Int?
+  folderId        Int?
+  subfolderId     Int?
+  permissionLevel String    @db.VarChar(50) // view, download, print, edit, full, admin
+  conditions      Json?     // Additional permission conditions
+  createdAt       DateTime  @default(now()) @db.DateTime(0)
+  updatedAt       DateTime  @updatedAt @db.DateTime(0)
+  expiresAt       DateTime? @db.DateTime(0)
+  createdBy       Int?
+  
+  user            user?     @relation(fields: [userId], references: [userID], onDelete: SetNull)
+  role            role?     @relation(fields: [roleId], references: [roleID], onDelete: SetNull)
+  document        Document? @relation(fields: [documentId], references: [id], onDelete: Cascade)
+  cabinet         Cabinet?  @relation(fields: [cabinetId], references: [id], onDelete: Cascade)
+  drawer          Drawer?   @relation(fields: [drawerId], references: [id], onDelete: Cascade)
+  folder          Folder?   @relation(fields: [folderId], references: [id], onDelete: Cascade)
+  subfolder       Subfolder? @relation(fields: [subfolderId], references: [id], onDelete: Cascade)
+  
+  @@index([userId])
+  @@index([roleId])
+  @@index([documentId])
+  @@index([expiresAt])
+}
+
+model AccessRequest {
+  id              Int       @id @default(autoincrement())
+  documentId      Int
+  userId          Int
+  requestedLevel  String    @db.VarChar(50) // view, download, print, edit, full
+  duration        String?   @db.VarChar(50) // 7d, 14d, 30d, 60d, 90d, permanent
+  justification   String?   @db.Text
+  status          String    @default("pending") @db.VarChar(50) // pending, approved, rejected, expired
+  responseNote    String?   @db.Text
+  requestedAt     DateTime  @default(now()) @db.DateTime(0)
+  respondedAt     DateTime? @db.DateTime(0)
+  respondedBy     Int?
+  expiresAt       DateTime? @db.DateTime(0)
+  
+  document        Document  @relation(fields: [documentId], references: [id], onDelete: Cascade)
+  user            user      @relation(fields: [userId], references: [userID])
+  
+  @@index([documentId])
+  @@index([userId])
+  @@index([status])
+}
+```
+
+## Installation & Setup
+
+### Prerequisites
+- Node.js 18+ and npm/yarn/pnpm
+- MySQL 8.0+ or PostgreSQL 13+
+- Git for version control
+- Optional: Docker for containerized deployment
+
+### Installation Steps
+
+1. **Clone Repository**
+```bash
+git clone <repository-url>
+cd edms
+```
+
+2. **Install Dependencies**
+```bash
+# Using npm
+npm install
+
+# Using yarn
+yarn install
+
+# Using pnpm
+pnpm install
+```
+
+3. **Environment Configuration**
+Create `.env` file:
+```env
+# Database Configuration
+DATABASE_URL="mysql://username:password@localhost:3306/edms_db"
+# For PostgreSQL: DATABASE_URL="postgresql://username:password@localhost:5432/edms_db"
+
+# Authentication
+JWT_SECRET="your-jwt-secret-key-min-256-bits"
+SESSION_SECRET="your-session-secret-key"
+
+# External Authentication (Optional)
+AUTHENTIK_BASE_URL="https://auth.yourdomain.com"
+AUTHENTIK_CLIENT_ID="your-client-id"
+AUTHENTIK_CLIENT_SECRET="your-client-secret"
+
+# File Storage
+UPLOAD_PATH="/var/uploads/edms"
+TEMP_PATH="/var/tmp/edms"
+MAX_FILE_SIZE="104857600" # 100MB in bytes
+ALLOWED_FILE_TYPES="pdf,doc,docx,xls,xlsx,ppt,pptx,txt,jpg,jpeg,png,gif"
+
+# Application Configuration
+NUXT_SECRET_KEY="your-nuxt-app-secret"
+BASE_URL="http://localhost:3000"
+NODE_ENV="development"
+
+# Security
+CORS_ORIGIN="http://localhost:3000"
+RATE_LIMIT_MAX="100" # requests per window
+RATE_LIMIT_WINDOW="15" # minutes
+
+# Monitoring & Logging
+LOG_LEVEL="info"
+LOG_FILE="/var/log/edms/app.log"
+```
+
+4. **Database Setup**
+```bash
+# Generate Prisma client
+npx prisma generate
+
+# Run database migrations
+npx prisma db push
+
+# Seed initial data (optional)
+npx prisma db seed
+
+# View database in Prisma Studio (optional)
+npx prisma studio
+```
+
+5. **Development Server**
+```bash
+# Start development server
+npm run dev
+
+# Access application at http://localhost:3000
+```
+
+## Development Environment
+
+### Project Structure
+```
+edms/
+├── components/          # Vue components
+│   ├── dms/            # DMS-specific components
+│   │   ├── explorer/   # Document explorer interface
+│   │   ├── dialogs/    # Modal dialogs and forms
+│   │   ├── viewers/    # Document preview components
+│   │   └── navigation/ # Tree and breadcrumb navigation
+│   ├── layouts/        # Layout components
+│   ├── formkit/        # FormKit custom components
+│   └── [Rs*].vue       # Reusable UI components (RsButton, RsCard, etc.)
+├── pages/              # Nuxt pages (file-based routing)
+│   ├── dms/           # DMS-related pages
+│   ├── dashboard/     # Dashboard and analytics
+│   ├── login/         # Authentication pages
+│   └── index.vue      # Homepage
+├── stores/            # Pinia state stores
+│   ├── dms.js         # Document management store
+│   ├── auth.js        # Authentication store
+│   └── app.js         # Global application store
+├── middleware/        # Route middleware
+│   ├── auth.js        # Authentication middleware
+│   └── rbac.js        # Role-based access control
+├── layouts/           # Nuxt layouts
+│   ├── default.vue    # Default application layout
+│   └── auth.vue       # Authentication layout
+├── server/            # Server-side code
+│   ├── api/           # API routes
+│   └── middleware/    # Server middleware
+├── prisma/            # Database configuration
+│   ├── schema.prisma  # Database schema
+│   └── migrations/    # Database migrations
+├── public/            # Static assets
+├── assets/            # Build-time assets
+├── plugins/           # Nuxt plugins
+├── composables/       # Vue composables
+└── utils/             # Utility functions
+```
+
+### Component Architecture
+
+#### Core EDMS Components
+1. **DMSExplorer.vue**: Main document browser with tree navigation, content views, and details panel
+2. **DMSTreeView.vue**: Recursive tree navigation for hierarchical structure
+3. **DMSDocumentViewer.vue**: Multi-format document viewer with zoom and controls
+4. **DMSAccessRequestDialog.vue**: Access request form with approval workflow
+5. **DMSUploadDialog.vue**: File upload interface with metadata assignment
+
+#### Custom UI Components (Rs Prefix)
+- **RsButton.vue**: Standardized button component with variants
+- **RsCard.vue**: Container component with consistent styling
+- **RsModal.vue**: Modal dialog base component
+- **RsTable.vue**: Data table with sorting and filtering
+- **RsDropdown.vue**: Dropdown menu component
+
+### State Management (Pinia)
+
+#### DMS Store (`stores/dms.js`)
+```javascript
+export const useDmsStore = defineStore('dms', {
+  state: () => ({
+    // Navigation state
+    currentPath: '/',
+    pathHistory: [],
+    currentItems: [],
+    selectedItem: null,
+    
+    // UI state
+    treeExpanded: {},
+    searchQuery: '',
+    viewMode: 'list', // list, grid, details
+    sortOrder: 'asc',
+    sortField: 'name',
+    activeTab: 'all', // all, public, private, personal
+    
+    // Loading states
+    isLoading: false,
+    isUploading: false,
+    uploadProgress: 0,
+    
+    // Dialog states
+    showUploadDialog: false,
+    showAccessRequestDialog: false,
+    accessRequestItem: null
+  }),
+  
+  actions: {
+    // Navigation actions
+    async navigateTo(path) {
+      this.isLoading = true
+      try {
+        this.pathHistory.push(this.currentPath)
+        this.currentPath = path
+        await this.loadItems()
+      } finally {
+        this.isLoading = false
+      }
+    },
+    
+    async loadItems() {
+      const response = await $fetch('/api/dms/items', {
+        query: {
+          path: this.currentPath,
+          search: this.searchQuery,
+          tab: this.activeTab
+        }
+      })
+      this.currentItems = response.items
+    },
+    
+    // File operations
+    async uploadFile(file, metadata) {
+      this.isUploading = true
+      try {
+        const formData = new FormData()
+        formData.append('file', file)
+        formData.append('metadata', JSON.stringify(metadata))
+        formData.append('path', this.currentPath)
+        
+        const response = await $fetch('/api/dms/upload', {
+          method: 'POST',
+          body: formData,
+          onUploadProgress: (progress) => {
+            this.uploadProgress = Math.round((progress.loaded / progress.total) * 100)
+          }
+        })
+        
+        await this.loadItems()
+        return response
+      } finally {
+        this.isUploading = false
+        this.uploadProgress = 0
+      }
+    },
+    
+    async requestAccess(item, requestData) {
+      return await $fetch('/api/dms/access-request', {
+        method: 'POST',
+        body: {
+          documentId: item.id,
+          requestedLevel: requestData.accessType,
+          duration: requestData.duration,
+          justification: requestData.justification
+        }
+      })
+    },
+    
+    async searchDocuments(query) {
+      this.searchQuery = query
+      await this.loadItems()
+    }
+  },
+  
+  getters: {
+    filteredItems: (state) => {
+      let items = state.currentItems
+      
+      // Apply tab filter
+      if (state.activeTab !== 'all') {
+        items = items.filter(item => item.accessType === state.activeTab)
+      }
+      
+      // Apply search filter
+      if (state.searchQuery) {
+        items = items.filter(item => 
+          item.name.toLowerCase().includes(state.searchQuery.toLowerCase()) ||
+          item.description?.toLowerCase().includes(state.searchQuery.toLowerCase())
+        )
+      }
+      
+      // Apply sorting
+      items.sort((a, b) => {
+        const aVal = a[state.sortField]
+        const bVal = b[state.sortField]
+        const modifier = state.sortOrder === 'asc' ? 1 : -1
+        return aVal < bVal ? -modifier : aVal > bVal ? modifier : 0
+      })
+      
+      return items
+    },
+    
+    currentBreadcrumbs: (state) => {
+      const parts = state.currentPath.split('/').filter(Boolean)
+      return parts.map((part, index) => ({
+        name: part,
+        path: '/' + parts.slice(0, index + 1).join('/')
+      }))
+    },
+    
+    canNavigateBack: (state) => state.pathHistory.length > 0
+  },
+  
+  persist: {
+    storage: persistedState.localStorage,
+    pick: ['treeExpanded', 'viewMode', 'sortOrder', 'sortField']
+  }
+})
+```
+
+## API & Data Management
+
+### Server API Routes
+
+#### Document Management
+```javascript
+// server/api/dms/documents/[id].get.js
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+  // Fetch document with access control
+})
+
+// server/api/dms/upload.post.js
+export default defineEventHandler(async (event) => {
+  // Handle file upload with validation
+})
+
+// server/api/dms/search.get.js
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event)
+  // Perform document search
+})
+```
+
+#### Access Control
+```javascript
+// server/api/dms/access-request.post.js
+export default defineEventHandler(async (event) => {
+  // Process access requests
+})
+
+// server/api/dms/permissions/[id].get.js
+export default defineEventHandler(async (event) => {
+  // Get user permissions for item
+})
+```
+
+### Data Validation
+
+#### Prisma Schema Validation
+- Field constraints and types
+- Relationship integrity
+- Index optimization
+
+#### Frontend Validation
+```javascript
+// FormKit validation rules
+const documentValidation = {
+  title: 'required|length:3,255',
+  description: 'length:0,1000',
+  fileType: 'required|in:pdf,doc,docx,xls,xlsx,jpg,png',
+  accessLevel: 'required|in:public,private,personal'
+}
+```
+
+## Security & Authentication
+
+### Authentication Flow
+1. **User Login**: Redirect to Authentik
+2. **Token Exchange**: Receive JWT token
+3. **Token Validation**: Verify on each request
+4. **Session Management**: Store in secure cookie
+5. **Token Refresh**: Automatic renewal
+
+### Authorization Levels
+- **System Admin**: Full system access
+- **Department Admin**: Department-wide permissions
+- **Document Owner**: Full access to owned documents
+- **User**: Access based on granted permissions
+
+### File Security
+- **Path Traversal Protection**: Validate file paths
+- **File Type Validation**: Whitelist allowed formats
+- **Size Limits**: Prevent large file uploads
+- **Virus Scanning**: Optional integration
+- **Access Logging**: Track file access
+
+### Data Protection
+- **SQL Injection Prevention**: Parameterized queries via Prisma
+- **XSS Protection**: Input sanitization
+- **CSRF Protection**: Token validation
+- **Secure Headers**: Security-focused HTTP headers
+
+## Deployment
+
+### Production Build
+```bash
+# Build for production
+npm run build
+
+# Generate static files (if needed)
+npm run generate
+
+# Preview production build
+npm run preview
+```
+
+### Environment Configuration
+
+#### Production Environment Variables
+```env
+NODE_ENV=production
+DATABASE_URL="mysql://prod_user:password@db.server:3306/edms_prod"
+NUXT_SECRET_KEY="production-secret-key"
+BASE_URL="https://dms.jkr-kotabharu.gov.my"
+```
+
+#### Docker Deployment
+```dockerfile
+FROM node:18-alpine
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production
+
+COPY . .
+RUN npm run build
+
+EXPOSE 3000
+CMD ["npm", "run", "start"]
+```
+
+### Nginx Configuration
+```nginx
+server {
+    listen 80;
+    server_name dms.jkr-kotabharu.gov.my;
+    
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+    
+    location /uploads/ {
+        alias /var/www/uploads/;
+        expires 1y;
+    }
+}
+```
+
+## Maintenance & Monitoring
+
+### Database Maintenance
+```sql
+-- Regular maintenance queries
+OPTIMIZE TABLE document;
+ANALYZE TABLE access_permission;
+
+-- Cleanup old access requests
+DELETE FROM access_request 
+WHERE status = 'rejected' 
+AND requested_at < DATE_SUB(NOW(), INTERVAL 30 DAY);
+```
+
+### Backup Strategy
+- **Database Backups**: Daily automated backups
+- **File Storage Backups**: Incremental file backups
+- **Configuration Backups**: Version control for configs
+
+### Monitoring
+- **Application Performance**: Response times, error rates
+- **Database Performance**: Query performance, connection counts
+- **File Storage**: Disk usage, file integrity
+- **Security Events**: Failed logins, access violations
+
+### Logging
+```javascript
+// Server-side logging
+import { createLogger } from 'winston'
+
+const logger = createLogger({
+  level: 'info',
+  format: winston.format.json(),
+  transports: [
+    new winston.transports.File({ filename: 'error.log', level: 'error' }),
+    new winston.transports.File({ filename: 'combined.log' })
+  ]
+})
+```
+
+## Extension & Customization
+
+### Adding New Document Types
+1. Update Prisma schema with new file types
+2. Add validation rules for the file type
+3. Implement viewer component for the format
+4. Update upload dialog to support the type
+
+### Custom Access Control
+1. Extend AccessPermission model
+2. Implement custom permission logic
+3. Update UI to reflect new permissions
+4. Add admin interface for permission management
+
+### Integration Points
+- **External Authentication**: LDAP/Active Directory
+- **Document Processing**: OCR, text extraction
+- **Workflow Systems**: Approval workflows
+- **Notification Systems**: Email/SMS notifications
+- **Analytics**: Document usage analytics
+
+### API Extensions
+```javascript
+// Custom API endpoint example
+// server/api/custom/analytics.get.js
+export default defineEventHandler(async (event) => {
+  // Custom analytics logic
+  return {
+    totalDocuments: count,
+    storageUsed: size,
+    activeUsers: userCount
+  }
+})
+```
+
+### Theme Customization
+```javascript
+// tailwind.config.js extensions
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          500: '#3b82f6',
+          900: '#1e3a8a'
+        }
+      }
+    }
+  }
+}
+```
+
+---
+
+**Document Version**: 2.0  
+**Last Updated**: December 2024  
+**System Version**: EDMS v1.0  
+**Technology Stack**: Nuxt.js 3, Vue.js 3, Prisma, TailwindCSS  
+**Database**: MySQL/PostgreSQL  
+**Authentication**: JWT with optional external providers 
\ No newline at end of file
diff --git a/docs/User_Guide.md b/docs/User_Guide.md
new file mode 100644
index 0000000..a7afbb0
--- /dev/null
+++ b/docs/User_Guide.md
@@ -0,0 +1,348 @@
+# Electronic Document Management System (EDMS) - User Guide
+
+## Table of Contents
+1. [Introduction](#introduction)
+2. [Getting Started](#getting-started)
+3. [Navigation](#navigation)
+4. [Document Organization](#document-organization)
+5. [Working with Documents](#working-with-documents)
+6. [Access Control](#access-control)
+7. [Search and Filtering](#search-and-filtering)
+8. [Document Viewer](#document-viewer)
+9. [My Documents](#my-documents)
+10. [Troubleshooting](#troubleshooting)
+
+## Introduction
+
+The Electronic Document Management System (EDMS) is a modern web-based platform designed to efficiently organize, store, and manage digital documents in organizational environments. The system provides a secure, hierarchical structure for document storage with comprehensive role-based access control and advanced document management capabilities.
+
+### Key Features
+- **Hierarchical Organization**: Documents are organized in a Cabinet → Drawer → Folder → Subfolder structure
+- **Multiple View Modes**: List, Grid, and Details views for browsing documents
+- **Access Control**: Public, Private, and Personal document categories with granular permission management
+- **Document Viewer**: Built-in viewer supporting multiple file formats (PDF, images, text files, spreadsheets)
+- **Search Functionality**: Advanced search across document titles, descriptions, and metadata
+- **Upload Management**: Drag-and-drop file upload with comprehensive metadata assignment
+- **Access Request System**: Workflow-based access request system for private documents
+- **Version Control**: Document versioning and change tracking
+- **Responsive Design**: Works seamlessly across desktop, tablet, and mobile devices
+
+## Getting Started
+
+### System Requirements
+- Modern web browser (Chrome, Firefox, Safari, Edge)
+- Stable internet connection
+- Valid user account with appropriate permissions
+- JavaScript enabled in browser
+
+### Logging In
+1. Navigate to the EDMS application URL provided by your administrator
+2. Enter your username and password
+3. Click "Login" to access the system
+4. You'll be redirected to the main dashboard upon successful authentication
+
+### Dashboard Overview
+The main dashboard provides:
+- Quick access to recent documents and activities
+- System notifications and announcements
+- Navigation menu to EDMS modules
+- User profile and account settings
+- System status and storage information
+
+## Navigation
+
+### Main Navigation Menu
+Access the EDMS through the main navigation menu:
+- **Dashboard**: System overview and quick access to recent items
+- **DMS**: Main document management interface
+- **My Documents**: Personal document collection and workspace
+- **Upload Document**: Dedicated document upload interface
+
+### EDMS Interface Layout
+The EDMS interface consists of three main areas:
+
+1. **Tree Navigation (Left Panel)**
+   - Hierarchical view of cabinets, drawers, and folders
+   - Expandable/collapsible folder structure
+   - Color-coded access indicators for different permission levels
+   - Lock icons for restricted items requiring special access
+
+2. **Content Area (Center)**
+   - Document listing with multiple view modes (List, Grid, Details)
+   - Breadcrumb navigation showing current location
+   - Search and filter tools for finding documents
+   - View mode controls and sorting options
+   - Document tabs for filtering by access type
+
+3. **Details Panel (Optional Right Panel)**
+   - Document properties and metadata information
+   - Quick actions and document tools
+   - Access control information and permissions
+   - Document history and version information
+
+### Breadcrumb Navigation
+- Shows your current location in the document hierarchy
+- Click any level to navigate back to parent folders
+- Helps maintain orientation in deep folder structures
+- Displays full path from root to current location
+
+## Document Organization
+
+### Hierarchical Structure
+Documents are organized in a four-level hierarchy designed for maximum flexibility:
+
+1. **Cabinet**: Top-level organizational unit (e.g., "Human Resources", "Finance", "Projects")
+2. **Drawer**: Major category within a cabinet (e.g., "Employee Records", "Budget 2024", "Active Projects")
+3. **Folder**: Specific project or topic (e.g., "Recruitment", "Q1 Reports", "Project Alpha")
+4. **Subfolder**: Detailed categorization (e.g., "Applications", "Monthly Reports", "Phase 1 Documents")
+
+### Document Categories
+- **Public**: Accessible to all system users without restrictions
+- **Private**: Restricted access requiring specific permissions or approval
+- **Personal**: Individual user documents with private access by default
+- **Templates**: Reusable document templates for standardization
+
+### Visual Indicators
+The system uses color coding and icons to indicate access levels:
+- **Green**: Public documents (open access for all users)
+- **Blue**: Personal documents (owned by you)
+- **Red**: Private documents (restricted access)
+- **Lock Icon**: Documents you cannot currently access
+- **Template Icon**: Document templates available for use
+
+## Working with Documents
+
+### Uploading Documents
+
+#### Single File Upload
+1. Navigate to the desired location in the hierarchy
+2. Click the "Upload" button or use the dedicated "Upload Document" page
+3. Select file(s) using the file picker or drag-and-drop interface
+4. Fill in comprehensive document metadata:
+   - Document title and description
+   - Keywords for enhanced searchability
+   - Category and current status
+   - Access level and specific permissions
+   - Department or responsible party
+   - Retention period and compliance information
+5. Review and click "Upload" to save the document
+
+#### Bulk Upload
+1. Select multiple files using Ctrl+Click (Windows) or Cmd+Click (Mac)
+2. Assign metadata to individual files or apply common metadata to all
+3. Set default properties for batch processing efficiency
+4. Monitor upload progress with real-time status updates
+5. Review and confirm successful uploads
+
+### Document Metadata
+For each document, you can specify comprehensive metadata:
+- **Title**: Descriptive document name/title
+- **Description**: Brief summary of document content and purpose
+- **Keywords**: Search terms for improved discoverability (comma-separated)
+- **Category**: Document type (Technical Specification, Contract, Report, Policy, etc.)
+- **Status**: Current state (Draft, Under Review, Approved, Archived, etc.)
+- **Department**: Responsible department or team
+- **Access Level**: Determines who can view and interact with the document
+- **Retention Period**: How long the document should be retained
+- **Version**: Document version number and change notes
+
+### Viewing Documents
+1. Click on any document to view its details and metadata
+2. Double-click to open in the built-in document viewer
+3. Use the preview panel for quick viewing without opening
+4. Download documents for offline access and external editing
+
+### Managing Documents
+- **Edit Properties**: Modify document metadata and settings
+- **Move Documents**: Drag and drop to reorganize into different locations
+- **Delete Documents**: Remove documents with confirmation and audit trail
+- **Copy Documents**: Duplicate documents to multiple locations
+- **Version Control**: Track document versions and view change history
+- **Share Documents**: Generate sharing links and manage access permissions
+
+## Access Control
+
+### Understanding Access Levels
+
+#### Public Documents
+- Visible and accessible to all system users
+- No special permissions or approvals required
+- Green color indicator for easy identification
+- Suitable for general information and policies
+
+#### Private Documents
+- Restricted access requiring specific permissions
+- Red color indicator with lock icon
+- May require access request and approval workflow
+- Ideal for sensitive or confidential information
+
+#### Personal Documents
+- Documents owned and controlled by individual users
+- Blue color indicator showing ownership
+- Full control over sharing and permissions
+- Private workspace for individual document management
+
+### Requesting Access
+When you encounter a private document you cannot access:
+
+1. **Identify Restricted Item**: Look for red color coding and lock icon
+2. **Initiate Access Request**: Click the "Request Access" button
+3. **Complete Request Form**:
+   - **Document Information**: Pre-filled with document title and file details
+   - **Access Type**: Choose appropriate permission level:
+     - View Only: Read-only access to document content
+     - Download: View and download permissions for offline access
+     - Print: View and print permissions for physical copies
+     - Full Access: Complete access rights including editing
+   - **Access Duration**: Select appropriate timeframe:
+     - 7 days, 14 days, 30 days, 60 days, 90 days, or Permanent
+   - **Justification**: Detailed explanation of why access is needed (required field)
+4. **Submit Request**: Click "Submit Request" to send for approval
+5. **Monitor Status**: Track request status and wait for approval from document owner or administrator
+
+### Access Request Status
+- **Pending**: Request submitted and awaiting review by approvers
+- **Approved**: Access granted for specified duration and permission level
+- **Rejected**: Request denied with explanation from approver
+- **Expired**: Previously approved access has reached its expiration date
+
+## Search and Filtering
+
+### Basic Search
+1. Use the search box in the top navigation bar
+2. Enter keywords, document titles, or content descriptions
+3. Press Enter or click the search icon to execute search
+4. Results display with matching documents and highlighted search terms
+5. Refine results using additional filters and sorting options
+
+### Advanced Search Options
+- **Filter by Type**: Documents, folders, cabinets, or specific file formats
+- **Filter by Category**: Technical, Administrative, Financial, HR, etc.
+- **Filter by Date Range**: Creation date, modification date, or access date
+- **Filter by Owner**: Documents by specific users or departments
+- **Filter by Access Level**: Public, private, personal, or template documents
+- **Filter by Status**: Draft, approved, archived, or under review
+- **Filter by File Format**: PDF, Word, Excel, images, etc.
+
+### Search Tips for Better Results
+- Use quotation marks for exact phrase matching
+- Combine multiple keywords with spaces for broader results
+- Search includes document titles, descriptions, metadata, and content (where supported)
+- Use wildcards (*) for partial word matching
+- Utilize Boolean operators (AND, OR, NOT) for complex searches
+
+### Document Tabs for Quick Filtering
+Filter documents by category using convenient tabs:
+- **All**: Display all accessible documents in current location
+- **Public**: Show only public documents available to all users
+- **Private**: Display private documents you have access to
+- **Personal**: Show your personal documents and workspace items
+
+## Document Viewer
+
+### Supported File Formats
+The built-in document viewer supports multiple formats:
+- **PDF Documents**: Full preview with zoom, navigation, and text selection
+- **Images**: JPG, PNG, GIF, BMP with zoom and pan functionality
+- **Text Files**: TXT, RTF with formatted preview and search
+- **Microsoft Office**: DOC, DOCX, XLS, XLSX, PPT, PPTX (basic preview)
+- **Other Formats**: Download option provided for unsupported formats
+
+### Viewer Features and Controls
+- **Zoom Controls**: Zoom in/out from 25% to 400% for optimal readability
+- **Page Navigation**: Navigate through multi-page documents with thumbnails
+- **Full Screen Mode**: Maximize viewer for immersive document experience
+- **Download Function**: Save document locally for offline access
+- **Print Support**: Print document directly from viewer interface
+- **Search in Document**: Find specific text within document content
+- **Rotation Controls**: Rotate document pages for better viewing
+
+### Viewer Interface Controls
+- **Zoom Options**: 25%, 50%, 75%, 100%, 125%, 150%, 200%, Fit to Width, Fit to Page
+- **Navigation**: Previous/Next page buttons, page number input, thumbnail sidebar
+- **View Options**: Single page, continuous scroll, two-page spread
+- **Tools**: Text selection, annotation tools (if enabled), measurement tools
+- **Close**: Return to document list or previous view
+
+## My Documents
+
+### Personal Document Workspace
+The "My Documents" section provides a personalized workspace showing:
+- Documents you've created and own
+- Documents you've recently accessed or modified
+- Documents shared with you by other users
+- Recent document activity and version history
+- Personal folders and organizational structure
+
+### Organization and Management Features
+- **Quick Search**: Search specifically within your personal documents
+- **Sort Options**: Sort by name, date created, date modified, file type, or size
+- **View Modes**: Switch between list, grid, or detailed view layouts
+- **Bulk Actions**: Select and manage multiple documents simultaneously
+- **Folder Creation**: Create personal folders for document organization
+- **Favorites**: Mark frequently used documents for quick access
+
+### Personal Document Statistics and Insights
+View comprehensive information about your document usage:
+- Total number of documents owned and accessible
+- Storage space used and available quota
+- Recent upload activity and document creation trends
+- Document categories and type distribution
+- Most accessed documents and usage patterns
+
+## Troubleshooting
+
+### Common Issues and Solutions
+
+#### Cannot Access Document
+- **Check Access Level**: Verify document permissions and look for lock icons
+- **Request Access**: Use the access request feature for private documents
+- **Contact Administrator**: Reach out for urgent access needs or system issues
+- **Verify Account Status**: Ensure your user account is active and properly configured
+
+#### Upload Problems
+- **File Size Limits**: Check maximum file size restrictions (typically 50MB)
+- **File Format Support**: Ensure file format is supported by the system
+- **Network Connection**: Verify stable internet connection for large uploads
+- **Upload Permissions**: Confirm you have upload permissions for the target location
+- **Browser Issues**: Try clearing cache or using a different browser
+
+#### Search Not Working Properly
+- **Check Spelling**: Verify search terms are spelled correctly
+- **Try Alternative Keywords**: Use different or broader search terms
+- **Clear Active Filters**: Remove any filters that might be limiting results
+- **Refresh Application**: Reload the page to reset search functionality
+- **Check Indexing Status**: Some documents may take time to be indexed for search
+
+#### Document Viewer Issues
+- **Browser Compatibility**: Ensure you're using a supported modern browser
+- **Enable JavaScript**: Verify JavaScript is enabled in browser settings
+- **Clear Browser Cache**: Clear cache and cookies to resolve display issues
+- **Plugin Requirements**: Install any required browser plugins for specific file types
+- **Download Alternative**: Use download option if viewer is not functioning
+
+### Getting Help and Support
+- **Contact IT Support**: Reach out to technical support for system issues
+- **Check System Status**: Verify overall system availability and maintenance schedules
+- **User Training**: Request additional training sessions for advanced features
+- **Documentation**: Refer to technical guide for detailed system information
+- **Community Resources**: Access user forums and knowledge bases if available
+
+### Best Practices for Optimal System Use
+1. **Systematic Organization**: Create and maintain clear, logical folder structures
+2. **Descriptive Naming**: Use meaningful, descriptive document titles and filenames
+3. **Regular Maintenance**: Periodically review and clean up outdated documents
+4. **Backup Strategy**: Keep local copies of critical documents as backup
+5. **Consistent Conventions**: Follow organizational naming and filing conventions
+6. **Metadata Accuracy**: Keep document metadata current and accurate
+7. **Access Control Respect**: Follow organizational policies for document sharing and access
+8. **Version Management**: Use version control features to track document changes
+9. **Security Awareness**: Be mindful of document sensitivity and appropriate access levels
+10. **Regular Updates**: Stay informed about system updates and new features
+
+---
+
+**Document Version**: 2.0  
+**Last Updated**: December 2024  
+**System Version**: EDMS v1.0  
+**Platform**: Electronic Document Management System 
\ No newline at end of file