diff --git a/check-links.js b/check-links.js
index 6d9d8fe..34a3a17 100644
--- a/check-links.js
+++ b/check-links.js
@@ -58,8 +58,30 @@ const checkLocalFile = (linkPath, filePath) => {
     return null; // not a local file
 };
 
+// Check if URL is a localhost URL
+const isLocalhostUrl = (url) => {
+    try {
+        const urlObj = new URL(url);
+        const hostname = urlObj.hostname.toLowerCase();
+        
+        // Check for localhost patterns
+        return hostname === 'localhost' || 
+               hostname === '127.0.0.1' || 
+               hostname === '0.0.0.0' ||
+               hostname.endsWith('.localhost');
+    } catch (error) {
+        return false;
+    }
+};
+
 // Check external URL
 const checkExternalUrl = async (url) => {
+    // Check if it's a localhost URL and skip validation
+    if (isLocalhostUrl(url)) {
+        console.log(`  ➡️  ${url} (localhost - skipped)`);
+        return true;
+    }
+    
     try {
         const response = await fetch(url, {
             method: 'HEAD',
diff --git a/docs/deploystack/development/backend/environment-variables.mdx b/docs/deploystack/development/backend/environment-variables.mdx
new file mode 100644
index 0000000..080fef6
--- /dev/null
+++ b/docs/deploystack/development/backend/environment-variables.mdx
@@ -0,0 +1,478 @@
+---
+title: Environment Variables
+description: Complete guide to configuring and using environment variables in the DeployStack backend application for both development and production environments.
+sidebar: Environment Variables
+---
+
+# Backend Environment Variables
+
+The DeployStack backend uses Node.js environment variables that work seamlessly across development and production environments. This system supports both local `.env` files for development and Docker environment variable injection for production deployments.
+
+## Overview
+
+The backend environment system consists of two main approaches:
+
+1. **Development Environment**: Uses `.env` files loaded via Node.js `--env-file` flag with nodemon
+2. **Production Environment**: Uses Docker environment variables injected at container runtime
+
+This approach ensures that:
+- Developers can work with standard `.env` files during development using `npm run dev`
+- Production deployments can inject variables at runtime without rebuilding the application
+- Environment variables are directly accessible via `process.env` throughout the Node.js application
+- The same codebase works seamlessly in both environments
+
+## Environment Variable Types
+
+### Development Environment Variables
+
+During development, the backend loads environment variables from `.env` files using Node.js's built-in `--env-file` support:
+
+```bash
+# .env
+PORT=3000
+NODE_ENV=development
+DEPLOYSTACK_FRONTEND_URL=http://localhost:5173
+COOKIE_SECRET=your-secure-cookie-secret-here
+```
+
+### Production Environment Variables
+
+In production Docker containers, variables are injected at runtime via Docker's environment variable system:
+
+```bash
+# Docker run example
+docker run -e PORT=3000 \
+           -e NODE_ENV=production \
+           -e DEPLOYSTACK_FRONTEND_URL="https://app.deploystack.com" \
+           -e COOKIE_SECRET="your-production-cookie-secret" \
+           deploystack/backend:latest
+```
+
+## Development Setup
+
+### Environment Files
+
+Create environment files in the `services/backend` directory:
+
+#### `.env` (Base Configuration)
+```bash
+# Server Configuration
+PORT=3000
+NODE_ENV=development
+HOST=localhost
+
+# Frontend Integration
+DEPLOYSTACK_FRONTEND_URL=http://localhost:5173
+
+# Security
+COOKIE_SECRET=a-very-secret-and-strong-secret-for-cookies
+DEPLOYSTACK_ENCRYPTION_SECRET=your-encryption-secret-here
+
+# Logging
+LOG_LEVEL=debug
+
+# OAuth Configuration (optional for development)
+GITHUB_CLIENT_ID=your-github-client-id
+GITHUB_CLIENT_SECRET=your-github-client-secret
+GITHUB_REDIRECT_URI=http://localhost:3000/api/auth/github/callback
+
+# Application
+DEPLOYSTACK_BACKEND_VERSION=0.20.5
+```
+
+#### `.env.local` (Local Overrides)
+```bash
+# Local development environment variables
+# This file is gitignored and used for local customization
+PORT=3001
+DEPLOYSTACK_FRONTEND_URL=http://localhost:5174
+LOG_LEVEL=info
+```
+
+### Environment File Priority
+
+Node.js with `--env-file` loads environment variables in this order:
+
+1. System environment variables (highest priority)
+2. `.env` file variables
+3. Default values in code (lowest priority)
+
+**Note**: Unlike some frameworks, Node.js `--env-file` doesn't support multiple env files by default. Use `.env.local` by renaming it to `.env` for local development.
+
+### Development Example
+
+```bash
+# Navigate to backend directory
+cd services/backend
+
+# Create your local environment file
+cp .env .env.local
+
+# Edit .env.local with your local settings
+echo "PORT=3001" >> .env.local
+echo "LOG_LEVEL=info" >> .env.local
+
+# Rename for development (or modify .env directly)
+mv .env.local .env
+
+# Start development server
+npm run dev
+```
+
+### Nodemon Configuration
+
+The development server uses nodemon with the following configuration (from `nodemon.json`):
+
+```json
+{
+  "watch": ["src"],
+  "ext": "ts,js,json",
+  "ignore": ["src/**/*.test.ts", "src/**/*.spec.ts", "tests/**/*"],
+  "exec": "node --env-file=.env --require ts-node/register src/index.ts",
+  "env": {
+    "NODE_ENV": "development"
+  },
+  "delay": 1000
+}
+```
+
+This configuration:
+- Loads environment variables from `.env` using `--env-file=.env`
+- Sets `NODE_ENV=development` by default
+- Watches TypeScript files for changes
+- Uses ts-node for TypeScript compilation
+
+## Production Deployment
+
+### Docker Environment Variables
+
+The production Docker container accepts environment variables at runtime:
+
+```bash
+# Production deployment
+docker run -d -p 3000:3000 \
+  -e NODE_ENV=production \
+  -e PORT=3000 \
+  -e DEPLOYSTACK_FRONTEND_URL="https://app.deploystack.com" \
+  -e COOKIE_SECRET="your-production-secret" \
+  -e DEPLOYSTACK_ENCRYPTION_SECRET="your-encryption-secret" \
+  deploystack/backend:latest
+```
+
+### Docker Compose Example
+
+```yaml
+version: '3.8'
+services:
+  backend:
+    image: deploystack/backend:latest
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+      - DEPLOYSTACK_FRONTEND_URL=https://app.deploystack.com
+      - COOKIE_SECRET=your-production-cookie-secret
+      - DEPLOYSTACK_ENCRYPTION_SECRET=your-encryption-secret
+      - GITHUB_CLIENT_ID=your-github-client-id
+      - GITHUB_CLIENT_SECRET=your-github-client-secret
+      - GITHUB_REDIRECT_URI=https://api.deploystack.com/api/auth/github/callback
+    volumes:
+      - ./data:/app/data  # For SQLite database persistence
+```
+
+### Dockerfile Environment Handling
+
+The production Dockerfile creates a default `.env` file with basic settings:
+
+```dockerfile
+# Create a default .env file
+RUN echo "NODE_ENV=production" > .env && \
+    echo "PORT=3000" >> .env && \
+    echo "DEPLOYSTACK_BACKEND_VERSION=${DEPLOYSTACK_BACKEND_VERSION:-$(node -e "console.log(require('./package.json').version)")}" >> .env
+
+# Start with env file
+CMD ["node", "--env-file=.env", "dist/index.js"]
+```
+
+Runtime environment variables will override these defaults.
+
+## Using Environment Variables in Code
+
+### Accessing Variables
+
+Environment variables are directly accessible via `process.env` in Node.js:
+
+```typescript
+// Direct access
+const port = process.env.PORT || '3000'
+const nodeEnv = process.env.NODE_ENV || 'development'
+const frontendUrl = process.env.DEPLOYSTACK_FRONTEND_URL
+
+// Type-safe access with validation
+function getRequiredEnv(key: string): string {
+  const value = process.env[key]
+  if (!value) {
+    throw new Error(`Required environment variable ${key} is not set`)
+  }
+  return value
+}
+
+const cookieSecret = getRequiredEnv('COOKIE_SECRET')
+```
+
+### Server Configuration Example
+
+```typescript
+// src/server.ts
+import fastify from 'fastify'
+
+export const createServer = async () => {
+  const server = fastify({
+    logger: {
+      level: process.env.LOG_LEVEL || 'info'
+    }
+  })
+
+  // Cookie configuration
+  await server.register(fastifyCookie, {
+    secret: process.env.COOKIE_SECRET || 'fallback-secret',
+    parseOptions: {}
+  })
+
+  // CORS configuration
+  const frontendUrl = process.env.DEPLOYSTACK_FRONTEND_URL
+  if (frontendUrl) {
+    await server.register(fastifyCors, {
+      origin: frontendUrl,
+      credentials: true
+    })
+  }
+
+  return server
+}
+```
+
+### Database Configuration Example
+
+```typescript
+// src/db/setup.ts
+const setupDatabase = () => {
+  const isTestEnv = process.env.NODE_ENV === 'test'
+  const sqliteDbFileName = isTestEnv ? 'deploystack.test.db' : 'deploystack.db'
+  
+  const dbPath = path.join(process.cwd(), 'data', sqliteDbFileName)
+  
+  return new Database(dbPath)
+}
+```
+
+### Plugin System Configuration
+
+```typescript
+// src/server.ts
+const isDevelopment = process.env.NODE_ENV !== 'production'
+const pluginManager = new PluginManager({
+  paths: [
+    process.env.PLUGINS_PATH || (isDevelopment 
+      ? path.join(process.cwd(), 'src', 'plugins')
+      : path.join(__dirname, 'plugins')),
+  ],
+  plugins: {}
+})
+```
+
+## Adding New Environment Variables
+
+### Step 1: Add to Environment Files
+
+Add the new variable to your `.env` file:
+
+```bash
+# .env
+PORT=3000
+NODE_ENV=development
+DEPLOYSTACK_FRONTEND_URL=http://localhost:5173
+NEW_FEATURE_ENABLED=true
+NEW_API_ENDPOINT=https://api.example.com
+```
+
+### Step 2: Use in Code
+
+Access the variable in your TypeScript code:
+
+```typescript
+// src/config/features.ts
+export const isNewFeatureEnabled = (): boolean => {
+  const value = process.env.NEW_FEATURE_ENABLED
+  return value === 'true' || value === '1'
+}
+
+export const getApiEndpoint = (): string => {
+  return process.env.NEW_API_ENDPOINT || 'https://api.default.com'
+}
+```
+
+### Step 3: Update Production Configuration
+
+Add the variable to your production deployment configuration:
+
+```bash
+# Docker
+docker run -e NEW_FEATURE_ENABLED=true \
+           -e NEW_API_ENDPOINT=https://prod-api.example.com \
+           deploystack/backend:latest
+```
+
+```yaml
+# Docker Compose
+environment:
+  - NEW_FEATURE_ENABLED=true
+  - NEW_API_ENDPOINT=https://prod-api.example.com
+```
+
+### Step 4: Create Type-Safe Helpers (Optional)
+
+For better type safety and validation:
+
+```typescript
+// src/utils/env.ts
+interface EnvironmentConfig {
+  port: number
+  nodeEnv: string
+  frontendUrl: string
+  newFeatureEnabled: boolean
+  newApiEndpoint: string
+}
+
+export function getEnvironmentConfig(): EnvironmentConfig {
+  return {
+    port: parseInt(process.env.PORT || '3000', 10),
+    nodeEnv: process.env.NODE_ENV || 'development',
+    frontendUrl: process.env.DEPLOYSTACK_FRONTEND_URL || 'http://localhost:5173',
+    newFeatureEnabled: process.env.NEW_FEATURE_ENABLED === 'true',
+    newApiEndpoint: process.env.NEW_API_ENDPOINT || 'https://api.default.com'
+  }
+}
+
+// Usage
+import { getEnvironmentConfig } from '@/utils/env'
+
+const config = getEnvironmentConfig()
+if (config.newFeatureEnabled) {
+  // Use new feature
+}
+```
+
+## Environment Variable Naming Conventions
+
+### Backend Environment Variables
+
+- Use `SCREAMING_SNAKE_CASE` format
+- Be descriptive and specific
+- Group related variables with prefixes
+
+```bash
+✅ Good
+PORT=3000
+NODE_ENV=development
+DEPLOYSTACK_FRONTEND_URL=http://localhost:5173
+DEPLOYSTACK_ENCRYPTION_SECRET=secret
+GITHUB_CLIENT_ID=client-id
+GITHUB_CLIENT_SECRET=client-secret
+
+❌ Bad
+port=3000                    # Wrong case
+URL=http://localhost:5173    # Not descriptive
+SECRET=secret               # Too generic
+```
+
+### Common Patterns
+
+```bash
+# Server Configuration
+PORT=3000
+HOST=localhost
+NODE_ENV=development
+
+# Application Specific (use DEPLOYSTACK_ prefix)
+DEPLOYSTACK_FRONTEND_URL=http://localhost:5173
+DEPLOYSTACK_BACKEND_VERSION=0.20.5
+DEPLOYSTACK_ENCRYPTION_SECRET=secret
+
+# Third-party Services (use service name prefix)
+GITHUB_CLIENT_ID=client-id
+GITHUB_CLIENT_SECRET=client-secret
+SMTP_HOST=smtp.example.com
+SMTP_PORT=587
+
+# Feature Flags
+ENABLE_SWAGGER_DOCS=true
+ENABLE_DEBUG_MODE=false
+```
+
+## Debugging Environment Variables
+
+### Development Debugging
+
+```typescript
+// Add to your server startup
+console.log('Environment Variables:')
+console.log('PORT:', process.env.PORT)
+console.log('NODE_ENV:', process.env.NODE_ENV)
+console.log('FRONTEND_URL:', process.env.DEPLOYSTACK_FRONTEND_URL)
+
+// Or create a debug endpoint (development only)
+if (process.env.NODE_ENV === 'development') {
+  server.get('/debug/env', async (request, reply) => {
+    const safeEnvVars = {
+      PORT: process.env.PORT,
+      NODE_ENV: process.env.NODE_ENV,
+      DEPLOYSTACK_FRONTEND_URL: process.env.DEPLOYSTACK_FRONTEND_URL,
+      LOG_LEVEL: process.env.LOG_LEVEL,
+      // Don't expose secrets!
+    }
+    return safeEnvVars
+  })
+}
+```
+
+### Production Debugging
+
+```bash
+# Check environment variables in Docker container
+docker exec -it container-name env | grep DEPLOYSTACK
+
+# Or check specific variables
+docker exec -it container-name printenv PORT
+docker exec -it container-name printenv NODE_ENV
+```
+
+### Startup Banner
+
+The backend displays a startup banner with key environment information:
+
+```typescript
+// src/utils/banner.ts
+export const displayStartupBanner = (port: number): void => {
+  const version = process.env.DEPLOYSTACK_BACKEND_VERSION || '0.1.0'
+  const environment = process.env.NODE_ENV || 'development'
+  
+  console.log(`
+  ╔══════════════════════════════════════════════════════════════════════════════╗
+  ║                            🚀 DeployStack Backend                            ║
+  ║                                                                              ║
+  ║         Running on port ${port}                                              ║
+  ║         Environment: ${environment}                                          ║
+  ║         Version: ${version}                                                  ║
+  ╚══════════════════════════════════════════════════════════════════════════════╝
+  `)
+}
+```
+
+## Related Documentation
+
+- [Backend Development Guide](/deploystack/development/backend) - Main backend development guide
+- [Database Configuration](/deploystack/development/backend/database) - Database setup and configuration
+- [API Documentation](/deploystack/development/backend/api) - API development guide
+- [Deploy DeployStack](/deploystack/self-hosted/docker-compose) - Deploy DeployStack with Docker Compose
diff --git a/docs/deploystack/development/frontend/environment-variables.mdx b/docs/deploystack/development/frontend/environment-variables.mdx
new file mode 100644
index 0000000..2ffa941
--- /dev/null
+++ b/docs/deploystack/development/frontend/environment-variables.mdx
@@ -0,0 +1,386 @@
+---
+title: Environment Variables
+description: Complete guide to configuring and using environment variables in the DeployStack frontend application for both development and production environments.
+sidebar: Environment Variables
+---
+
+# Frontend Environment Variables
+
+The DeployStack frontend uses a sophisticated environment variable system that seamlessly works across development and production environments. This system supports both Vite's build-time variables and Docker runtime variables for maximum flexibility.
+
+## Overview
+
+The frontend environment system consists of two layers:
+
+1. **Development Environment**: Uses Vite's built-in environment variable support with `.env` files
+2. **Production Environment**: Uses Docker runtime variables that are injected at container startup
+
+This dual approach ensures that:
+- Developers can work with standard `.env` files during development
+- Production deployments can inject variables at runtime without rebuilding the application
+- The same codebase works seamlessly in both environments
+
+## Environment Variable Types
+
+### Vite Environment Variables (Development)
+
+During development, Vite processes environment variables that start with `VITE_` prefix:
+
+```bash
+# .env
+VITE_DEPLOYSTACK_BACKEND_URL=http://localhost:3000
+VITE_APP_TITLE=DeployStack
+```
+
+### Runtime Environment Variables (Production)
+
+In production Docker containers, variables are injected at runtime via the `env-config.sh` script:
+
+```bash
+# Docker run example
+docker run -e VITE_DEPLOYSTACK_BACKEND_URL="https://api.deploystack.io" \
+           -e VITE_APP_TITLE="DeployStack Production" \
+           deploystack/frontend:latest
+```
+
+## Current Environment Variables
+
+### Core Application Variables
+
+| Variable | Description | Default Value | Required |
+|----------|-------------|---------------|----------|
+| `VITE_DEPLOYSTACK_BACKEND_URL` | Backend API base URL | `http://localhost:3000` | Yes |
+| `VITE_APP_TITLE` | Application title displayed in UI | `DeployStack` | Yes |
+
+## Development Setup
+
+### Environment Files
+
+Create environment files in the `services/frontend` directory:
+
+#### `.env` (Base Configuration)
+```bash
+# Base environment variables
+VITE_DEPLOYSTACK_BACKEND_URL=http://localhost:3000
+VITE_APP_TITLE=DeployStack
+```
+
+#### `.env.local` (Local Overrides)
+```bash
+# Local development environment variables
+# This file is gitignored and used for local customization
+VITE_DEPLOYSTACK_BACKEND_URL=http://localhost:3000
+VITE_APP_TITLE=DeployStack (Development)
+```
+
+### Environment File Priority
+
+Vite loads environment files in this order (higher priority overrides lower):
+
+1. `.env.local` (highest priority, gitignored)
+2. `.env.development.local`
+3. `.env.development`
+4. `.env` (lowest priority)
+
+### Development Example
+
+```bash
+# Navigate to frontend directory
+cd services/frontend
+
+# Create your local environment file
+cp .env .env.local
+
+# Edit .env.local with your local settings
+echo "VITE_APP_TITLE=DeployStack (My Local Dev)" >> .env.local
+
+# Start development server
+npm run dev
+```
+
+## Production Deployment
+
+### Docker Environment Variables
+
+The production Docker container uses the `env-config.sh` script to generate runtime environment variables:
+
+```bash
+# Production deployment
+docker run -d -p 8080:80 \
+  -e VITE_DEPLOYSTACK_BACKEND_URL="https://api.deploystack.io" \
+  -e VITE_APP_TITLE="DeployStack Production" \
+  deploystack/frontend:latest
+```
+
+### Docker Compose Example
+
+```yaml
+version: '3.8'
+services:
+  frontend:
+    image: deploystack/frontend:latest
+    ports:
+      - "8080:80"
+    environment:
+      - VITE_DEPLOYSTACK_BACKEND_URL=https://api.deploystack.io
+      - VITE_APP_TITLE=DeployStack Production
+```
+
+## Using Environment Variables in Code
+
+### Accessing Variables
+
+Use the utility functions from `@/utils/env` for consistent access:
+
+```typescript
+import { getEnv, getAllEnv } from '@/utils/env'
+
+// Get a specific environment variable
+const backendUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL')
+const appTitle = getEnv('VITE_APP_TITLE')
+
+// Get all environment variables (useful for debugging)
+const allEnvVars = getAllEnv()
+console.log('All environment variables:', allEnvVars)
+```
+
+### Component Usage Example
+
+```vue
+<script setup lang="ts">
+import { getEnv } from '@/utils/env'
+
+// Access environment variables
+const backendUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL')
+const appTitle = getEnv('VITE_APP_TITLE')
+
+// Use in API calls
+const apiClient = new ApiClient(backendUrl)
+</script>
+
+<template>
+  <div>
+    <h1>{{ appTitle }}</h1>
+    <p>Connected to: {{ backendUrl }}</p>
+  </div>
+</template>
+```
+
+### Service Layer Example
+
+```typescript
+// services/apiService.ts
+import { getEnv } from '@/utils/env'
+
+export class ApiService {
+  private static baseUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL')
+
+  static async get(endpoint: string) {
+    const response = await fetch(`${this.baseUrl}${endpoint}`)
+    return response.json()
+  }
+
+  static async post(endpoint: string, data: any) {
+    const response = await fetch(`${this.baseUrl}${endpoint}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+    return response.json()
+  }
+}
+```
+
+## Adding New Environment Variables
+
+### Step 1: Update TypeScript Definitions
+
+Add the new variable to `env.d.ts`:
+
+```typescript
+interface ImportMetaEnv {
+  readonly VITE_DEPLOYSTACK_BACKEND_URL: string
+  readonly VITE_APP_TITLE: string
+  readonly VITE_NEW_VARIABLE: string // Add your new variable
+}
+```
+
+### Step 2: Add to Environment Files
+
+Add to your `.env` file:
+
+```bash
+# .env
+VITE_DEPLOYSTACK_BACKEND_URL=http://localhost:3000
+VITE_APP_TITLE=DeployStack
+VITE_NEW_VARIABLE=default_value
+```
+
+### Step 3: Update Docker Configuration (if needed)
+
+For non-VITE_ prefixed variables, update `env-config.sh`:
+
+```bash
+# Add specific non-VITE_ variables you want to expose
+for var in CUSTOM_VAR OTHER_VAR NEW_CUSTOM_VAR; do
+  if [ ! -z "$(eval echo \$$var)" ]; then
+    echo "  \"$var\": \"$(eval echo \$$var | sed 's/"/\\"/g')\"," >> /usr/share/nginx/html/runtime-env.js
+  fi
+done
+```
+
+### Step 4: Use in Code
+
+```typescript
+import { getEnv } from '@/utils/env'
+
+const newValue = getEnv('VITE_NEW_VARIABLE')
+```
+
+## Environment Variable Naming Conventions
+
+### Development (Vite) Variables
+
+- **Must** start with `VITE_` prefix to be accessible in the browser
+- Use `SCREAMING_SNAKE_CASE` format
+- Be descriptive and specific
+
+```bash
+✅ Good
+VITE_DEPLOYSTACK_BACKEND_URL=http://localhost:3000
+VITE_APP_TITLE=DeployStack
+VITE_ENABLE_DEBUG_MODE=true
+
+❌ Bad
+API_URL=http://localhost:3000          # Missing VITE_ prefix
+vite_app_title=DeployStack            # Wrong case
+VITE_URL=http://localhost:3000        # Not descriptive
+```
+
+### Production Runtime Variables
+
+- Can include both `VITE_` prefixed and custom variables
+- `VITE_` variables are automatically processed
+- Custom variables need to be explicitly added to `env-config.sh`
+
+## Best Practices
+
+### Security
+
+1. **Never expose sensitive data** in environment variables accessible to the browser
+2. **Use backend proxy** for sensitive API keys and secrets
+3. **Validate environment variables** before using them
+
+```typescript
+// Good: Validate environment variables
+const backendUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL')
+if (!backendUrl) {
+  throw new Error('VITE_DEPLOYSTACK_BACKEND_URL is required')
+}
+```
+
+### Performance
+
+1. **Cache environment variables** instead of calling `getEnv()` repeatedly
+2. **Use computed properties** in Vue components for reactive environment values
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getEnv } from '@/utils/env'
+
+// Cache the value
+const appTitle = computed(() => getEnv('VITE_APP_TITLE'))
+</script>
+```
+
+### Development
+
+1. **Use `.env.local`** for personal development settings
+2. **Document all environment variables** in this guide
+3. **Provide sensible defaults** in `.env` file
+4. **Test both development and production** environment setups
+
+## Troubleshooting
+
+### Common Issues
+
+#### Variable Not Accessible in Browser
+
+**Problem**: Environment variable is undefined in the browser
+
+**Solution**: Ensure the variable name starts with `VITE_`
+
+```bash
+# ❌ Won't work
+API_URL=http://localhost:3000
+
+# ✅ Will work
+VITE_API_URL=http://localhost:3000
+```
+
+#### Variable Not Updated in Production
+
+**Problem**: Environment variable changes don't reflect in production
+
+**Solutions**:
+1. Restart the Docker container
+2. Check if the variable is properly passed to the container
+3. Verify `env-config.sh` processes the variable correctly
+
+#### TypeScript Errors
+
+**Problem**: TypeScript complains about unknown environment variables
+
+**Solution**: Update `env.d.ts` with the new variable definition
+
+```typescript
+interface ImportMetaEnv {
+  readonly VITE_DEPLOYSTACK_BACKEND_URL: string
+  readonly VITE_APP_TITLE: string
+  readonly VITE_YOUR_NEW_VARIABLE: string // Add this
+}
+```
+
+#### Development vs Production Differences
+
+**Problem**: Different behavior between development and production
+
+**Solutions**:
+1. Use the same variable names in both environments
+2. Test with Docker locally: `docker build -t test . && docker run -e VITE_VAR=value test`
+3. Use `getAllEnv()` to debug variable values
+
+### Validation Utility
+
+Create a validation utility for critical environment variables:
+
+```typescript
+// utils/envValidation.ts
+import { getEnv } from './env'
+
+export function validateEnvironment() {
+  const required = [
+    'VITE_DEPLOYSTACK_BACKEND_URL',
+    'VITE_APP_TITLE'
+  ]
+
+  const missing = required.filter(key => !getEnv(key))
+  
+  if (missing.length > 0) {
+    throw new Error(`Missing required environment variables: ${missing.join(', ')}`)
+  }
+}
+
+// Use in main.ts
+import { validateEnvironment } from '@/utils/envValidation'
+
+validateEnvironment()
+```
+
+## Related Documentation
+
+- [Frontend Development Guide](/deploystack/development/frontend) - Main frontend development guide
+- [Deploy DeployStack](/deploystack/self-hosted/docker-compose) - Deploy DeployStack with Docker Compose
diff --git a/docs/deploystack/development/frontend/index.mdx b/docs/deploystack/development/frontend/index.mdx
index bc78aa1..8a26c12 100644
--- a/docs/deploystack/development/frontend/index.mdx
+++ b/docs/deploystack/development/frontend/index.mdx
@@ -197,74 +197,33 @@ import { Mail, Lock, User, Settings, Play, Stop } from 'lucide-vue-next'
 
 ## Environment Configuration
 
-The frontend supports environment variables for both development and production environments.
+The frontend uses a sophisticated environment variable system that works seamlessly across development and production environments. For complete details on configuring and using environment variables, see the dedicated [Environment Variables Guide](/deploystack/development/frontend/environment-variables).
 
-### Development Environment
+### Quick Start
 
-Create a `.env` file in the `services/frontend` directory:
+Create environment files in the `services/frontend` directory:
 
 ```bash
-VITE_API_URL=http://localhost:3000
-VITE_APP_TITLE=DeployStack (Development)
-VITE_ENABLE_DEBUG=true
-```
-
-### Production Environment
+# .env (base configuration)
+VITE_DEPLOYSTACK_BACKEND_URL=http://localhost:3000
+VITE_APP_TITLE=DeployStack
 
-Environment variables can be passed to the Docker container:
-
-```bash
-docker run -it -p 80:80 \
-  -e VITE_API_URL="https://api.deploystack.io" \
-  -e VITE_APP_TITLE="DeployStack" \
-  -e VITE_ENABLE_DEBUG="false" \
-  deploystack/frontend:latest
+# .env.local (local overrides, gitignored)
+VITE_DEPLOYSTACK_BACKEND_URL=http://localhost:3000
+VITE_APP_TITLE=DeployStack (Development)
 ```
 
-### Accessing Environment Variables
-
-Use the `getEnv` utility function for consistent access:
+### Accessing Variables in Code
 
 ```typescript
-import { getEnv } from '@/utils/env'
+import { getEnv, getAllEnv } from '@/utils/env'
 
-// In your components
-const apiUrl = getEnv('VITE_API_URL')
+// Get specific variables
+const backendUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL')
 const appTitle = getEnv('VITE_APP_TITLE')
-const debugMode = getEnv('VITE_ENABLE_DEBUG') === 'true'
-```
-
-### Adding New Environment Variables
 
-1. **Add type definitions** in `env.d.ts`:
-
-```typescript
-interface ImportMetaEnv {
-  readonly VITE_API_URL: string
-  readonly VITE_APP_TITLE: string
-  readonly VITE_ENABLE_DEBUG: string
-  readonly VITE_NEW_VARIABLE: string
-}
-
-interface Window {
-  RUNTIME_ENV?: {
-    VITE_API_URL?: string
-    VITE_APP_TITLE?: string
-    VITE_ENABLE_DEBUG?: string
-    VITE_NEW_VARIABLE?: string
-    // Non-VITE variables
-    CUSTOM_VAR?: string
-  }
-}
-```
-
-2. **For non-VITE variables** in Docker, update `env-config.sh`:
-
-```bash
-# Add specific non-VITE_ variables you want to expose
-for var in CUSTOM_VAR OTHER_VAR; do
-  # Script logic here
-done
+// Get all variables (useful for debugging)
+const allEnvVars = getAllEnv()
 ```
 
 ## API Integration
@@ -340,6 +299,7 @@ onMounted(() => {
 
 Continue reading the detailed guides:
 
+- [Environment Variables](/deploystack/development/frontend/environment-variables) - Complete environment configuration guide
 - [Global Event Bus](/deploystack/development/frontend/event-bus) - Cross-component communication system
 - [Internationalization (i18n)](/deploystack/development/frontend/internationalization) - Multi-language support
 - [Plugin System](/deploystack/development/frontend/plugins) - Extending functionality
diff --git a/docs/deploystack/development/frontend/plugins.mdx b/docs/deploystack/development/frontend/plugins.mdx
index ae5891a..ba8d407 100644
--- a/docs/deploystack/development/frontend/plugins.mdx
+++ b/docs/deploystack/development/frontend/plugins.mdx
@@ -44,8 +44,8 @@ Every plugin must implement the `Plugin` interface:
 ```typescript
 interface Plugin {
   meta: PluginMeta
-  initialize(app: App, router: Router, pinia: Pinia, pluginManager?: PluginManager): Promise<void>
-  cleanup(): Promise<void>
+  initialize(app: App, router: Router, pinia: Pinia): Promise<void> | void
+  cleanup?(): Promise<void> | void
 }
 
 interface PluginMeta {
@@ -53,8 +53,7 @@ interface PluginMeta {
   name: string         // Human-readable plugin name
   version: string      // Plugin version (semver)
   description: string  // Plugin description
-  author: string       // Plugin author
-  dependencies?: string[]  // Other plugin IDs this plugin depends on
+  author?: string      // Plugin author (optional)
 }
 ```
 
@@ -65,8 +64,8 @@ interface PluginMeta {
 Create a new directory for your plugin:
 
 ```bash
-mkdir -p src/plugins/mcp-metrics-plugin
-cd src/plugins/mcp-metrics-plugin
+mkdir -p src/plugins/my-custom-plugin
+cd src/plugins/my-custom-plugin
 ```
 
 ### 2. Create a Component
@@ -74,80 +73,80 @@ cd src/plugins/mcp-metrics-plugin
 Start with a simple Vue component:
 
 ```vue
-<!-- src/plugins/mcp-metrics-plugin/components/MetricsWidget.vue -->
-<script setup lang=\"ts\">
+<!-- src/plugins/my-custom-plugin/components/CustomWidget.vue -->
+<script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { BarChart, TrendingUp, Server } from 'lucide-vue-next'
 
-const metrics = ref({
-  totalServers: 0,
-  activeDeployments: 0,
+const data = ref({
+  totalItems: 0,
+  activeItems: 0,
   totalRequests: 0
 })
 
 const isLoading = ref(true)
 
-async function fetchMetrics() {
+async function fetchData() {
   isLoading.value = true
   try {
     // Simulate API call
     await new Promise(resolve => setTimeout(resolve, 1000))
-    metrics.value = {
-      totalServers: 12,
-      activeDeployments: 8,
+    data.value = {
+      totalItems: 12,
+      activeItems: 8,
       totalRequests: 1542
     }
   } catch (error) {
-    console.error('Failed to fetch metrics:', error)
+    console.error('Failed to fetch data:', error)
   } finally {
     isLoading.value = false
   }
 }
 
 onMounted(() => {
-  fetchMetrics()
+  fetchData()
 })
 </script>
 
 <template>
-  <div class=\"metrics-widget p-6 bg-white rounded-lg shadow-md border\">
-    <div class=\"flex items-center justify-between mb-4\">
-      <h3 class=\"text-lg font-semibold text-gray-900 flex items-center\">
-        <BarChart class=\"h-5 w-5 mr-2 text-indigo-600\" />
-        MCP Server Metrics
+  <div class="custom-widget p-6 bg-white rounded-lg shadow-md border">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-lg font-semibold text-gray-900 flex items-center">
+        <BarChart class="h-5 w-5 mr-2 text-indigo-600" />
+        Custom Plugin Widget
       </h3>
       <button 
-        @click=\"fetchMetrics\" 
-        class=\"text-sm text-indigo-600 hover:text-indigo-800\"
-        :disabled=\"isLoading\"
+        @click="fetchData" 
+        class="text-sm text-indigo-600 hover:text-indigo-800"
+        :disabled="isLoading"
       >
         {{ isLoading ? 'Loading...' : 'Refresh' }}
       </button>
     </div>
     
-    <div v-if=\"isLoading\" class=\"animate-pulse\">
-      <div class=\"grid grid-cols-3 gap-4\">
-        <div v-for=\"i in 3\" :key=\"i\" class=\"h-16 bg-gray-200 rounded\"></div>
+    <div v-if="isLoading" class="animate-pulse">
+      <div class="grid grid-cols-3 gap-4">
+        <div v-for="i in 3" :key="i" class="h-16 bg-gray-200 rounded"></div>
       </div>
     </div>
     
-    <div v-else class=\"grid grid-cols-3 gap-4\">
-      <div class=\"text-center p-4 bg-blue-50 rounded-lg\">
-        <Server class=\"h-6 w-6 mx-auto mb-2 text-blue-600\" />
-        <div class=\"text-2xl font-bold text-blue-700\">{{ metrics.totalServers }}</div>
-        <div class=\"text-sm text-blue-600\">Total Servers</div>
+    <div v-else class="grid grid-cols-3 gap-4">
+      <div class="text-center p-4 bg-blue-50 rounded-lg">
+        <Server class="h-6 w-6 mx-auto mb-2 text-blue-600" />
+        <div class="text-2xl font-bold text-blue-700">{{ data.totalItems }}</div>
+        <div class="text-sm text-blue-600">Total Items</div>
       </div>
       
-      <div class=\"text-center p-4 bg-green-50 rounded-lg\">
-        <TrendingUp class=\"h-6 w-6 mx-auto mb-2 text-green-600\" />
-        <div class=\"text-2xl font-bold text-green-700\">{{ metrics.activeDeployments }}</div>
-        <div class=\"text-sm text-green-600\">Active Deployments</div>
+      <div class="text-center p-4 bg-green-50 rounded-lg">
+        <TrendingUp class="h-6 w-6 mx-auto mb-2 text-green-600" />
+        <div class="text-2xl font-bold text-green-700">{{ data.activeItems }}</div>
+        <div class="text-sm text-green-600">Active Items</div>
       </div>
       
-      <div class=\"text-center p-4 bg-purple-50 rounded-lg\">
-        <BarChart class=\"h-6 w-6 mx-auto mb-2 text-purple-600\" />
-        <div class=\"text-2xl font-bold text-purple-700\">{{ metrics.totalRequests.toLocaleString() }}</div>
-        <div class=\"text-sm text-purple-600\">Total Requests</div>
+      <div class="text-center p-4 bg-purple-50 rounded-lg">
+        <BarChart class="h-6 w-6 mx-auto mb-2 text-purple-600" />
+        <div class="text-2xl font-bold text-purple-700">{{ data.totalRequests.toLocaleString() }}</div>
+        <div class="text-sm text-purple-600">Total Requests</div>
       </div>
     </div>
   </div>
@@ -159,71 +158,56 @@ onMounted(() => {
 Create the main plugin file:
 
 ```typescript
-// src/plugins/mcp-metrics-plugin/index.ts
+// src/plugins/my-custom-plugin/index.ts
 import type { Plugin } from '@/plugin-system/types'
 import type { App } from 'vue'
 import type { Router } from 'vue-router'
 import type { Pinia } from 'pinia'
 import { registerExtensionPoint } from '@/plugin-system/extension-points'
-import MetricsWidget from './components/MetricsWidget.vue'
-import MetricsPage from './views/MetricsPage.vue'
+import CustomWidget from './components/CustomWidget.vue'
+import CustomPage from './views/CustomPage.vue'
 
-class McpMetricsPlugin implements Plugin {
+class MyCustomPlugin implements Plugin {
   meta = {
-    id: 'mcp-metrics-plugin',
-    name: 'MCP Metrics Plugin',
+    id: 'my-custom-plugin',
+    name: 'My Custom Plugin',
     version: '1.0.0',
-    description: 'Provides comprehensive metrics and analytics for MCP server deployments',
-    author: 'DeployStack Team'
+    description: 'Provides custom functionality and widgets for the application',
+    author: 'Your Name'
   }
   
-  async initialize(app: App, router: Router, pinia: Pinia) {
-    console.log('Initializing MCP Metrics Plugin...')
+  initialize(app: App, router: Router, pinia: Pinia) {
+    console.log('Initializing My Custom Plugin...')
     
-    // Register the metrics widget in the dashboard
-    registerExtensionPoint('dashboard-widgets', MetricsWidget, this.meta.id, {
+    // Register the widget at an extension point
+    registerExtensionPoint('dashboard-widgets', CustomWidget, this.meta.id, {
       order: 10, // Show early in the dashboard
       props: {
         refreshInterval: 30000 // Refresh every 30 seconds
       }
     })
     
-    // Register a dedicated metrics page
+    // Register a dedicated page route
     router.addRoute({
-      path: '/metrics',
-      name: 'Metrics',
-      component: MetricsPage,
+      path: '/custom',
+      name: 'Custom',
+      component: CustomPage,
       meta: {
-        title: 'MCP Metrics',
+        title: 'Custom Plugin',
         requiresAuth: true
       }
     })
     
-    // Add navigation item (if supported by your app)
-    registerExtensionPoint('main-navigation', {
-      template: `
-        <router-link 
-          to=\"/metrics\" 
-          class=\"nav-link flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-100\"
-        >
-          <BarChart class=\"h-5 w-5\" />
-          <span>Metrics</span>
-        </router-link>
-      `,
-      components: { BarChart: () => import('lucide-vue-next').then(m => m.BarChart) }
-    }, this.meta.id)
-    
-    console.log('MCP Metrics Plugin initialized successfully')
+    console.log('My Custom Plugin initialized successfully')
   }
   
-  async cleanup() {
-    console.log('Cleaning up MCP Metrics Plugin...')
-    // Perform any necessary cleanup
+  cleanup() {
+    console.log('Cleaning up My Custom Plugin...')
     // Extension points are automatically cleaned up by the plugin manager
   }
 }
 
-export default McpMetricsPlugin
+export default MyCustomPlugin
 ```
 
 ### 4. Create a Dedicated Page
@@ -231,126 +215,44 @@ export default McpMetricsPlugin
 Create a full page view for your plugin:
 
 ```vue
-<!-- src/plugins/mcp-metrics-plugin/views/MetricsPage.vue -->
-<script setup lang=\"ts\">
+<!-- src/plugins/my-custom-plugin/views/CustomPage.vue -->
+<script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { BarChart, TrendingUp, Activity, Clock } from 'lucide-vue-next'
-import MetricsWidget from '../components/MetricsWidget.vue'
-
-const detailedMetrics = ref({
-  responseTime: '125ms',
-  uptime: '99.9%',
-  errorRate: '0.1%',
-  throughput: '1.2k req/min'
-})
-
-const chartData = ref([])
-const isLoading = ref(true)
+import { BarChart, Settings } from 'lucide-vue-next'
+import CustomWidget from '../components/CustomWidget.vue'
 
-async function fetchDetailedMetrics() {
-  isLoading.value = true
-  try {
-    // Simulate API call for detailed metrics
-    await new Promise(resolve => setTimeout(resolve, 1500))
-    
-    // Mock chart data
-    chartData.value = Array.from({ length: 24 }, (_, i) => ({
-      hour: i,
-      requests: Math.floor(Math.random() * 100) + 50,
-      errors: Math.floor(Math.random() * 5)
-    }))
-  } catch (error) {
-    console.error('Failed to fetch detailed metrics:', error)
-  } finally {
-    isLoading.value = false
-  }
-}
-
-onMounted(() => {
-  fetchDetailedMetrics()
+const pageData = ref({
+  title: 'Custom Plugin Dashboard',
+  description: 'This page is provided by the custom plugin'
 })
 </script>
 
 <template>
-  <div class=\"metrics-page max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">
-    <div class=\"mb-8\">
-      <h1 class=\"text-3xl font-bold text-gray-900 flex items-center\">
-        <BarChart class=\"h-8 w-8 mr-3 text-indigo-600\" />
-        MCP Server Metrics
+  <div class="custom-page max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="mb-8">
+      <h1 class="text-3xl font-bold text-gray-900 flex items-center">
+        <BarChart class="h-8 w-8 mr-3 text-indigo-600" />
+        {{ pageData.title }}
       </h1>
-      <p class=\"mt-2 text-gray-600\">
-        Comprehensive analytics and performance metrics for your MCP server deployments
+      <p class="mt-2 text-gray-600">
+        {{ pageData.description }}
       </p>
     </div>
     
-    <!-- Overview Widget -->
-    <div class=\"mb-8\">
-      <MetricsWidget />
-    </div>
-    
-    <!-- Detailed Metrics -->
-    <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8\">
-      <div class=\"bg-white p-6 rounded-lg shadow-md border\">
-        <div class=\"flex items-center\">
-          <Clock class=\"h-8 w-8 text-blue-600\" />
-          <div class=\"ml-4\">
-            <div class=\"text-2xl font-bold text-gray-900\">{{ detailedMetrics.responseTime }}</div>
-            <div class=\"text-sm text-gray-600\">Avg Response Time</div>
-          </div>
-        </div>
-      </div>
-      
-      <div class=\"bg-white p-6 rounded-lg shadow-md border\">
-        <div class=\"flex items-center\">
-          <TrendingUp class=\"h-8 w-8 text-green-600\" />
-          <div class=\"ml-4\">
-            <div class=\"text-2xl font-bold text-gray-900\">{{ detailedMetrics.uptime }}</div>
-            <div class=\"text-sm text-gray-600\">Uptime</div>
-          </div>
-        </div>
-      </div>
-      
-      <div class=\"bg-white p-6 rounded-lg shadow-md border\">
-        <div class=\"flex items-center\">
-          <Activity class=\"h-8 w-8 text-red-600\" />
-          <div class=\"ml-4\">
-            <div class=\"text-2xl font-bold text-gray-900\">{{ detailedMetrics.errorRate }}</div>
-            <div class=\"text-sm text-gray-600\">Error Rate</div>
-          </div>
-        </div>
-      </div>
-      
-      <div class=\"bg-white p-6 rounded-lg shadow-md border\">
-        <div class=\"flex items-center\">
-          <BarChart class=\"h-8 w-8 text-purple-600\" />
-          <div class=\"ml-4\">
-            <div class=\"text-2xl font-bold text-gray-900\">{{ detailedMetrics.throughput }}</div>
-            <div class=\"text-sm text-gray-600\">Throughput</div>
-          </div>
-        </div>
-      </div>
+    <!-- Include the widget component -->
+    <div class="mb-8">
+      <CustomWidget />
     </div>
     
-    <!-- Charts Section -->
-    <div class=\"bg-white p-6 rounded-lg shadow-md border\">
-      <h2 class=\"text-xl font-semibold mb-4\">24-Hour Request Pattern</h2>
-      
-      <div v-if=\"isLoading\" class=\"animate-pulse\">
-        <div class=\"h-64 bg-gray-200 rounded\"></div>
-      </div>
-      
-      <div v-else class=\"h-64\">
-        <!-- Simple chart representation -->
-        <div class=\"flex items-end justify-between h-full space-x-1\">
-          <div 
-            v-for=\"(data, index) in chartData\" 
-            :key=\"index\"
-            class=\"bg-indigo-500 min-w-[1rem] rounded-t transition-all hover:bg-indigo-600\"
-            :style=\"{ height: `${(data.requests / 150) * 100}%` }\"
-            :title=\"`Hour ${data.hour}: ${data.requests} requests`\"
-          ></div>
-        </div>
-      </div>
+    <!-- Additional page content -->
+    <div class="bg-white p-6 rounded-lg shadow-md border">
+      <h2 class="text-xl font-semibold mb-4 flex items-center">
+        <Settings class="h-6 w-6 mr-2 text-gray-600" />
+        Plugin Settings
+      </h2>
+      <p class="text-gray-600">
+        This is where you could add plugin-specific settings and configuration options.
+      </p>
     </div>
   </div>
 </template>
@@ -361,115 +263,69 @@ onMounted(() => {
 Create a Pinia store for your plugin:
 
 ```typescript
-// src/plugins/mcp-metrics-plugin/store.ts
+// src/plugins/my-custom-plugin/store.ts
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 
-export interface MetricsData {
-  totalServers: number
-  activeDeployments: number
+export interface CustomData {
+  totalItems: number
+  activeItems: number
   totalRequests: number
-  responseTime: string
-  uptime: string
-  errorRate: string
-  throughput: string
-}
-
-export interface ChartDataPoint {
-  hour: number
-  requests: number
-  errors: number
 }
 
-export const useMetricsStore = defineStore('mcp-metrics', () => {
+export const useCustomStore = defineStore('my-custom-plugin', () => {
   // State
-  const metrics = ref<MetricsData>({
-    totalServers: 0,
-    activeDeployments: 0,
-    totalRequests: 0,
-    responseTime: '0ms',
-    uptime: '0%',
-    errorRate: '0%',
-    throughput: '0 req/min'
+  const data = ref<CustomData>({
+    totalItems: 0,
+    activeItems: 0,
+    totalRequests: 0
   })
   
-  const chartData = ref<ChartDataPoint[]>([])
   const isLoading = ref(false)
   const lastUpdated = ref<Date | null>(null)
   
   // Getters
-  const healthScore = computed(() => {
-    const uptimePercent = parseFloat(metrics.value.uptime.replace('%', ''))
-    const errorPercent = parseFloat(metrics.value.errorRate.replace('%', ''))
-    return Math.max(0, 100 - errorPercent * 10) * (uptimePercent / 100)
+  const activePercentage = computed(() => {
+    if (data.value.totalItems === 0) return 0
+    return Math.round((data.value.activeItems / data.value.totalItems) * 100)
   })
   
-  const isHealthy = computed(() => healthScore.value > 80)
+  const isHealthy = computed(() => activePercentage.value > 80)
   
   // Actions
-  async function fetchMetrics() {
+  async function fetchData() {
     isLoading.value = true
     try {
       // Simulate API call
       await new Promise(resolve => setTimeout(resolve, 1000))
       
-      metrics.value = {
-        totalServers: Math.floor(Math.random() * 20) + 10,
-        activeDeployments: Math.floor(Math.random() * 15) + 5,
-        totalRequests: Math.floor(Math.random() * 5000) + 1000,
-        responseTime: `${Math.floor(Math.random() * 200) + 50}ms`,
-        uptime: `${(99 + Math.random()).toFixed(1)}%`,
-        errorRate: `${(Math.random() * 2).toFixed(1)}%`,
-        throughput: `${(Math.random() * 2 + 0.5).toFixed(1)}k req/min`
+      data.value = {
+        totalItems: Math.floor(Math.random() * 20) + 10,
+        activeItems: Math.floor(Math.random() * 15) + 5,
+        totalRequests: Math.floor(Math.random() * 5000) + 1000
       }
       
       lastUpdated.value = new Date()
     } catch (error) {
-      console.error('Failed to fetch metrics:', error)
+      console.error('Failed to fetch data:', error)
       throw error
     } finally {
       isLoading.value = false
     }
   }
   
-  async function fetchChartData() {
-    try {
-      // Simulate API call for chart data
-      await new Promise(resolve => setTimeout(resolve, 800))
-      
-      chartData.value = Array.from({ length: 24 }, (_, i) => ({
-        hour: i,
-        requests: Math.floor(Math.random() * 100) + 50,
-        errors: Math.floor(Math.random() * 5)
-      }))
-    } catch (error) {
-      console.error('Failed to fetch chart data:', error)
-      throw error
-    }
-  }
-  
-  function refreshAllData() {
-    return Promise.all([
-      fetchMetrics(),
-      fetchChartData()
-    ])
-  }
-  
   return {
     // State
-    metrics,
-    chartData,
+    data,
     isLoading,
     lastUpdated,
     
     // Getters
-    healthScore,
+    activePercentage,
     isHealthy,
     
     // Actions
-    fetchMetrics,
-    fetchChartData,
-    refreshAllData
+    fetchData
   }
 })
 ```
@@ -485,22 +341,22 @@ Add extension points to your main application components:
 ```vue
 <!-- In your Dashboard.vue or other main components -->
 <template>
-  <div class=\"dashboard\">
+  <div class="dashboard">
     <h1>Dashboard</h1>
     
     <!-- Extension point for dashboard widgets -->
-    <div class=\"widgets-grid\">
-      <ExtensionPoint pointId=\"dashboard-widgets\" />
+    <div class="widgets-grid">
+      <ExtensionPoint pointId="dashboard-widgets" />
     </div>
     
     <!-- Extension point for sidebar items -->
-    <aside class=\"sidebar\">
-      <ExtensionPoint pointId=\"sidebar-items\" />
+    <aside class="sidebar">
+      <ExtensionPoint pointId="sidebar-items" />
     </aside>
     
     <!-- Extension point for action buttons -->
-    <div class=\"actions\">
-      <ExtensionPoint pointId=\"action-buttons\" />
+    <div class="actions">
+      <ExtensionPoint pointId="action-buttons" />
     </div>
   </div>
 </template>
@@ -514,7 +370,7 @@ In your plugin's initialize method:
 // Register a single component
 registerExtensionPoint(
   'dashboard-widgets',    // Extension point ID
-  MetricsWidget,         // Vue component
+  CustomWidget,          // Vue component
   this.meta.id,          // Plugin ID
   {
     order: 10,           // Display order (optional)
@@ -536,160 +392,13 @@ Show specific plugin components based on conditions:
 ```vue
 <template>
   <!-- Show only specific plugin -->
-  <ExtensionPoint pointId=\"dashboard-widgets\" pluginName=\"mcp-metrics-plugin\" />
+  <ExtensionPoint pointId="dashboard-widgets" pluginName="my-custom-plugin" />
   
-  <!-- Show all except specific plugin -->
-  <ExtensionPoint pointId=\"dashboard-widgets\" :exclude=\"['debug-plugin']\" />
-  
-  <!-- Show based on user permissions -->
-  <ExtensionPoint 
-    pointId=\"admin-actions\" 
-    v-if=\"userHasAdminRole\"
-  />
+  <!-- Show all plugins at this extension point -->
+  <ExtensionPoint pointId="dashboard-widgets" />
 </template>
 ```
 
-## Advanced Plugin Features
-
-### Plugin Dependencies
-
-Specify dependencies in your plugin metadata:
-
-```typescript
-class AdvancedPlugin implements Plugin {
-  meta = {
-    id: 'advanced-plugin',
-    name: 'Advanced Plugin',
-    version: '1.0.0',
-    description: 'Advanced functionality that requires metrics plugin',
-    author: 'You',
-    dependencies: ['mcp-metrics-plugin']  // Require metrics plugin
-  }
-  
-  async initialize(app: App, router: Router, pinia: Pinia, pluginManager?: PluginManager) {
-    // Check if required plugins are available
-    const metricsPlugin = pluginManager?.getPlugin('mcp-metrics-plugin')
-    if (!metricsPlugin) {
-      throw new Error('MCP Metrics Plugin is required but not available')
-    }
-    
-    // Use functionality from the metrics plugin
-    console.log('Metrics plugin available:', metricsPlugin.meta.name)
-  }
-}
-```
-
-### Plugin Configuration
-
-Support configuration through the plugin manager:
-
-```typescript
-interface PluginConfig {
-  refreshInterval?: number
-  enableNotifications?: boolean
-  theme?: 'light' | 'dark'
-}
-
-class ConfigurablePlugin implements Plugin {
-  private config: PluginConfig = {}
-  
-  async initialize(app: App, router: Router, pinia: Pinia, pluginManager?: PluginManager) {
-    // Get plugin configuration
-    this.config = pluginManager?.getPluginConfig(this.meta.id) || {}
-    
-    // Use configuration
-    const refreshInterval = this.config.refreshInterval || 30000
-    const enableNotifications = this.config.enableNotifications !== false
-    
-    console.log('Plugin config:', this.config)
-  }
-}
-```
-
-### Inter-Plugin Communication
-
-Plugins can communicate through events or shared stores:
-
-```typescript
-// Event-based communication
-class PublisherPlugin implements Plugin {
-  async initialize(app: App) {
-    // Emit events
-    app.config.globalProperties.$pluginEventBus.emit('metrics-updated', data)
-  }
-}
-
-class SubscriberPlugin implements Plugin {
-  async initialize(app: App) {
-    // Listen to events
-    app.config.globalProperties.$pluginEventBus.on('metrics-updated', (data) => {
-      console.log('Received metrics update:', data)
-    })
-  }
-}
-```
-
-### Plugin Composables
-
-Create reusable composition functions:
-
-```typescript
-// src/plugins/mcp-metrics-plugin/composables/useMetrics.ts
-import { ref, onMounted, onUnmounted } from 'vue'
-import { useMetricsStore } from '../store'
-
-export function useMetrics(refreshInterval = 30000) {
-  const store = useMetricsStore()
-  const isAutoRefreshEnabled = ref(true)
-  let intervalId: number | null = null
-  
-  function startAutoRefresh() {
-    if (intervalId) clearInterval(intervalId)
-    
-    intervalId = setInterval(() => {
-      if (isAutoRefreshEnabled.value) {
-        store.fetchMetrics()
-      }
-    }, refreshInterval)
-  }
-  
-  function stopAutoRefresh() {
-    if (intervalId) {
-      clearInterval(intervalId)
-      intervalId = null
-    }
-  }
-  
-  function toggleAutoRefresh() {
-    isAutoRefreshEnabled.value = !isAutoRefreshEnabled.value
-    if (isAutoRefreshEnabled.value) {
-      startAutoRefresh()
-    } else {
-      stopAutoRefresh()
-    }
-  }
-  
-  onMounted(() => {
-    store.fetchMetrics()
-    startAutoRefresh()
-  })
-  
-  onUnmounted(() => {
-    stopAutoRefresh()
-  })
-  
-  return {
-    metrics: store.metrics,
-    isLoading: store.isLoading,
-    healthScore: store.healthScore,
-    isHealthy: store.isHealthy,
-    isAutoRefreshEnabled,
-    refreshMetrics: store.fetchMetrics,
-    toggleAutoRefresh
-  }
-}
-```
-
 ## Registering Plugins
 
 Add your plugin to the plugin loader:
@@ -698,163 +407,30 @@ Add your plugin to the plugin loader:
 // src/plugins/index.ts
 import type { Plugin } from '../plugin-system/types'
 import HelloWorldPlugin from './hello-world'
-import McpMetricsPlugin from './mcp-metrics-plugin'
-import AdvancedPlugin from './advanced-plugin'
+import MyCustomPlugin from './my-custom-plugin'
 
 export async function loadPlugins(): Promise<Plugin[]> {
   return [
     new HelloWorldPlugin(),
-    new McpMetricsPlugin(),
-    new AdvancedPlugin(),
+    new MyCustomPlugin(),
     // Add more plugins here
   ]
 }
 ```
 
-## Testing Plugins
-
-### Unit Testing Plugin Components
-
-```typescript
-// tests/plugins/mcp-metrics-plugin/MetricsWidget.test.ts
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import MetricsWidget from '@/plugins/mcp-metrics-plugin/components/MetricsWidget.vue'
-
-describe('MetricsWidget', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia())
-  })
-  
-  it('should render metrics correctly', async () => {
-    const wrapper = mount(MetricsWidget)
-    
-    // Wait for component to load
-    await wrapper.vm.$nextTick()
-    
-    expect(wrapper.find('.metrics-widget').exists()).toBe(true)
-    expect(wrapper.text()).toContain('MCP Server Metrics')
-  })
-  
-  it('should show loading state initially', () => {
-    const wrapper = mount(MetricsWidget)
-    expect(wrapper.find('.animate-pulse').exists()).toBe(true)
-  })
-  
-  it('should handle refresh button click', async () => {
-    const wrapper = mount(MetricsWidget)
-    const refreshButton = wrapper.find('button')
-    
-    await refreshButton.trigger('click')
-    expect(wrapper.vm.isLoading).toBe(true)
-  })
-})
-```
-
-### Integration Testing
-
-```typescript
-// tests/plugins/mcp-metrics-plugin/integration.test.ts
-import { mount } from '@vue/test-utils'
-import { createRouter, createWebHistory } from 'vue-router'
-import { createPinia } from 'pinia'
-import McpMetricsPlugin from '@/plugins/mcp-metrics-plugin'
-import { PluginManager } from '@/plugin-system/PluginManager'
-
-describe('MCP Metrics Plugin Integration', () => {
-  let pluginManager: PluginManager
-  let router: any
-  let pinia: any
-  
-  beforeEach(() => {
-    router = createRouter({
-      history: createWebHistory(),
-      routes: []
-    })
-    pinia = createPinia()
-    pluginManager = new PluginManager()
-  })
-  
-  it('should initialize plugin successfully', async () => {
-    const plugin = new McpMetricsPlugin()
-    
-    await expect(
-      plugin.initialize(null as any, router, pinia, pluginManager)
-    ).resolves.not.toThrow()
-    
-    // Check if routes were added
-    const routes = router.getRoutes()
-    expect(routes.some((route: any) => route.name === 'Metrics')).toBe(true)
-  })
-  
-  it('should register extension points', async () => {
-    const plugin = new McpMetricsPlugin()
-    await plugin.initialize(null as any, router, pinia, pluginManager)
-    
-    // Verify extension points were registered
-    const dashboardExtensions = pluginManager.getExtensionPoints('dashboard-widgets')
-    expect(dashboardExtensions).toHaveLength(1)
-    expect(dashboardExtensions[0].pluginId).toBe(plugin.meta.id)
-  })
-})
-```
-
-### Plugin Store Testing
-
-```typescript
-// tests/plugins/mcp-metrics-plugin/store.test.ts
-import { createPinia, setActivePinia } from 'pinia'
-import { useMetricsStore } from '@/plugins/mcp-metrics-plugin/store'
-
-describe('Metrics Store', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia())
-  })
-  
-  it('should initialize with default values', () => {
-    const store = useMetricsStore()
-    
-    expect(store.metrics.totalServers).toBe(0)
-    expect(store.metrics.activeDeployments).toBe(0)
-    expect(store.isLoading).toBe(false)
-    expect(store.lastUpdated).toBeNull()
-  })
-  
-  it('should update metrics after fetching', async () => {
-    const store = useMetricsStore()
-    
-    await store.fetchMetrics()
-    
-    expect(store.metrics.totalServers).toBeGreaterThan(0)
-    expect(store.lastUpdated).toBeInstanceOf(Date)
-  })
-  
-  it('should calculate health score correctly', async () => {
-    const store = useMetricsStore()
-    
-    // Set known values for testing
-    store.metrics.uptime = '99.5%'
-    store.metrics.errorRate = '0.1%'
-    
-    expect(store.healthScore).toBeCloseTo(98.5)
-    expect(store.isHealthy).toBe(true)
-  })
-})
-```
-
 ## Plugin Development Best Practices
 
 ### 1. Plugin Naming and Structure
 
 ```typescript
 // Good plugin naming
-class McpServerMonitoringPlugin implements Plugin {
+class ServerMonitoringPlugin implements Plugin {
   meta = {
-    id: 'mcp-server-monitoring',           // kebab-case
-    name: 'MCP Server Monitoring',         // Human readable
+    id: 'server-monitoring',               // kebab-case
+    name: 'Server Monitoring',             // Human readable
     version: '1.2.3',                     // Semantic versioning
-    description: 'Real-time monitoring for MCP servers', // Clear description
-    author: 'DeployStack Team'
+    description: 'Real-time server monitoring', // Clear description
+    author: 'Your Team'
   }
 }
 
@@ -868,9 +444,9 @@ class McpServerMonitoringPlugin implements Plugin {
 
 ```vue
 <!-- Good: Prefix with plugin name -->
-<!-- MetricsWidget.vue -->
-<!-- MetricsDashboard.vue -->
-<!-- MetricsChart.vue -->
+<!-- MonitoringWidget.vue -->
+<!-- MonitoringDashboard.vue -->
+<!-- MonitoringChart.vue -->
 
 <!-- Avoid generic names that might conflict -->
 <!-- ❌ Widget.vue -->
@@ -882,22 +458,19 @@ class McpServerMonitoringPlugin implements Plugin {
 
 ```typescript
 class RobustPlugin implements Plugin {
-  async initialize(app: App, router: Router, pinia: Pinia) {
+  initialize(app: App, router: Router, pinia: Pinia) {
     try {
       // Plugin initialization logic
-      await this.setupComponents()
-      await this.registerRoutes(router)
-      await this.initializeStore(pinia)
+      this.setupComponents()
+      this.registerRoutes(router)
+      this.initializeStore(pinia)
       
       console.log(`${this.meta.name} initialized successfully`)
     } catch (error) {
       console.error(`Failed to initialize ${this.meta.name}:`, error)
       
-      // Graceful degradation
+      // Graceful degradation - don't throw unless critical
       this.handleInitializationError(error)
-      
-      // Don't throw unless it's critical
-      // throw error
     }
   }
   
@@ -909,10 +482,6 @@ class RobustPlugin implements Plugin {
       error: error.message,
       stack: error.stack
     })
-    
-    // Maybe show a user notification
-    // Maybe disable certain features
-    // Maybe use fallback functionality
   }
 }
 ```
@@ -924,7 +493,7 @@ class CleanPlugin implements Plugin {
   private intervals: number[] = []
   private eventListeners: Array<{ element: EventTarget, type: string, listener: EventListener }> = []
   
-  async initialize(app: App, router: Router, pinia: Pinia) {
+  initialize(app: App, router: Router, pinia: Pinia) {
     // Set up intervals
     const intervalId = setInterval(() => {
       this.refreshData()
@@ -932,8 +501,7 @@ class CleanPlugin implements Plugin {
     this.intervals.push(intervalId)
     
     // Set up event listeners
-    const listener = (event: Event`
-}) => this.handleEvent(event)
+    const listener = (event: Event) => this.handleEvent(event)
     document.addEventListener('visibilitychange', listener)
     this.eventListeners.push({
       element: document,
@@ -942,7 +510,7 @@ class CleanPlugin implements Plugin {
     })
   }
   
-  async cleanup() {
+  cleanup() {
     // Clean up intervals
     this.intervals.forEach(id => clearInterval(id))
     this.intervals = []
@@ -962,14 +530,10 @@ class CleanPlugin implements Plugin {
 
 ```typescript
 // Define clear interfaces for your plugin data
-interface MetricsData {
-  totalServers: number
-  activeDeployments: number
-  totalRequests: number
-  responseTime: string
-  uptime: string
-  errorRate: string
-  throughput: string
+interface PluginData {
+  totalItems: number
+  activeItems: number
+  status: 'active' | 'inactive' | 'error'
 }
 
 interface PluginConfig {
@@ -980,7 +544,7 @@ interface PluginConfig {
 
 // Use proper typing in components
 interface Props {
-  data: MetricsData
+  data: PluginData
   config?: PluginConfig
   onRefresh?: () => void
 }
@@ -991,203 +555,143 @@ const props = withDefaults(defineProps<Props>(), {
 })
 ```
 
-### 6. Performance Considerations
+## Plugin Composables
+
+Create reusable composition functions:
 
 ```typescript
-class PerformantPlugin implements Plugin {
-  private cache = new Map<string, { data: any, timestamp: number }>()
-  private readonly CACHE_DURATION = 30000 // 30 seconds
+// src/plugins/my-custom-plugin/composables/useCustomFeature.ts
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useCustomStore } from '../store'
+
+export function useCustomFeature(refreshInterval = 30000) {
+  const store = useCustomStore()
+  const isAutoRefreshEnabled = ref(true)
+  let intervalId: number | null = null
   
-  async fetchData(key: string): Promise<any> {
-    // Check cache first
-    const cached = this.cache.get(key)
-    if (cached && Date.now() - cached.timestamp < this.CACHE_DURATION) {
-      return cached.data
-    }
-    
-    // Fetch fresh data
-    const data = await this.performApiCall(key)
-    
-    // Update cache
-    this.cache.set(key, {
-      data,
-      timestamp: Date.now()
-    })
+  function startAutoRefresh() {
+    if (intervalId) clearInterval(intervalId)
     
-    return data
+    intervalId = setInterval(() => {
+      if (isAutoRefreshEnabled.value) {
+        store.fetchData()
+      }
+    }, refreshInterval)
   }
   
-  private async performApiCall(key: string): Promise<any> {
-    // Actual API call implementation
-    const response = await fetch(`/api/plugin-data/${key}`)
-    return response.json()
+  function stopAutoRefresh() {
+    if (intervalId) {
+      clearInterval(intervalId)
+      intervalId = null
+    }
+  }
+  
+  function toggleAutoRefresh() {
+    isAutoRefreshEnabled.value = !isAutoRefreshEnabled.value
+    if (isAutoRefreshEnabled.value) {
+      startAutoRefresh()
+    } else {
+      stopAutoRefresh()
+    }
+  }
+  
+  onMounted(() => {
+    store.fetchData()
+    startAutoRefresh()
+  })
+  
+  onUnmounted(() => {
+    stopAutoRefresh()
+  })
+  
+  return {
+    data: store.data,
+    isLoading: store.isLoading,
+    activePercentage: store.activePercentage,
+    isHealthy: store.isHealthy,
+    isAutoRefreshEnabled,
+    refreshData: store.fetchData,
+    toggleAutoRefresh
   }
 }
 ```
 
-## Plugin Lifecycle Management
-
-### Initialization Order
+## Testing Plugins
 
-Plugins are initialized in the order they're listed in the plugin loader, but you can control dependencies:
+### Unit Testing Plugin Components
 
 ```typescript
-// In your plugin loader
-export async function loadPlugins(): Promise<Plugin[]> {
-  const plugins = [
-    new CorePlugin(),        // Initialize first (no dependencies)
-    new MetricsPlugin(),     // Depends on core
-    new AdvancedPlugin(),    // Depends on metrics
-  ]
-  
-  // Sort by dependencies if needed
-  return sortPluginsByDependencies(plugins)
-}
-
-function sortPluginsByDependencies(plugins: Plugin[]): Plugin[] {
-  // Implementation to sort plugins based on their dependencies
-  // This ensures plugins are initialized in the correct order
-  return plugins // simplified for example
-}
-```
-
-### Runtime Plugin Management
+// tests/plugins/my-custom-plugin/CustomWidget.test.ts
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import CustomWidget from '@/plugins/my-custom-plugin/components/CustomWidget.vue'
 
-```typescript
-// Enable/disable plugins at runtime
-class PluginManager {
-  private activePlugins = new Map<string, Plugin>()
+describe('CustomWidget', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
   
-  async enablePlugin(pluginId: string): Promise<void> {
-    const plugin = this.getAvailablePlugin(pluginId)
-    if (!plugin) {
-      throw new Error(`Plugin ${pluginId} not found`)
-    }
-    
-    if (this.activePlugins.has(pluginId)) {
-      console.warn(`Plugin ${pluginId} is already enabled`)
-      return
-    }
+  it('should render widget correctly', async () => {
+    const wrapper = mount(CustomWidget)
     
-    await plugin.initialize(this.app, this.router, this.pinia, this)
-    this.activePlugins.set(pluginId, plugin)
+    // Wait for component to load
+    await wrapper.vm.$nextTick()
     
-    console.log(`Plugin ${pluginId} enabled successfully`)
-  }
+    expect(wrapper.find('.custom-widget').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Custom Plugin Widget')
+  })
   
-  async disablePlugin(pluginId: string): Promise<void> {
-    const plugin = this.activePlugins.get(pluginId)
-    if (!plugin) {
-      console.warn(`Plugin ${pluginId} is not currently enabled`)
-      return
-    }
-    
-    await plugin.cleanup()
-    this.activePlugins.delete(pluginId)
-    
-    // Remove extension points
-    this.removePluginExtensionPoints(pluginId)
+  it('should show loading state initially', () => {
+    const wrapper = mount(CustomWidget)
+    expect(wrapper.find('.animate-pulse').exists()).toBe(true)
+  })
+  
+  it('should handle refresh button click', async () => {
+    const wrapper = mount(CustomWidget)
+    const refreshButton = wrapper.find('button')
     
-    console.log(`Plugin ${pluginId} disabled successfully`)
-  }
-}
-```
-
-## Plugin Distribution
-
-### Plugin Packaging
-
-Create a proper plugin package structure:
-
-```bash
-my-plugin-package/
-├── package.json          # NPM package configuration
-├── README.md            # Plugin documentation
-├── CHANGELOG.md         # Version history
-├── LICENSE              # License file
-├── src/
-│   ├── index.ts         # Main plugin export
-│   ├── components/      # Plugin components
-│   ├── stores/          # Plugin stores
-│   └── types/           # Plugin types
-├── dist/                # Compiled plugin (generated)
-├── docs/                # Additional documentation
-└── examples/            # Usage examples
-```
-
-### Package.json for Plugin
-
-```json
-{
-  "name": "@deploystack/mcp-metrics-plugin",
-  "version": "1.0.0",
-  "description": "MCP server metrics and analytics plugin for DeployStack",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "lint": "eslint src/**/*.ts",
-    "test": "vitest"
-  },
-  "keywords": [
-    "deploystack",
-    "plugin",
-    "mcp",
-    "metrics",
-    "analytics"
-  ],
-  "peerDependencies": {
-    "vue": "^3.3.0",
-    "vue-router": "^4.2.0",
-    "pinia": "^2.1.0"
-  },
-  "devDependencies": {
-    "@types/vue": "^3.3.0",
-    "typescript": "^5.0.0",
-    "vite": "^4.3.0"
-  }
-}
+    await refreshButton.trigger('click')
+    expect(wrapper.vm.isLoading).toBe(true)
+  })
+})
 ```
 
-### Plugin Registry
-
-For team-wide plugin sharing:
+### Integration Testing
 
 ```typescript
-// Plugin registry service
-export class PluginRegistry {
-  private static instance: PluginRegistry
-  private plugins = new Map<string, Plugin>()
+// tests/plugins/my-custom-plugin/integration.test.ts
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { createPinia } from 'pinia'
+import MyCustomPlugin from '@/plugins/my-custom-plugin'
+import { PluginManager } from '@/plugin-system/plugin-manager'
+
+describe('My Custom Plugin Integration', () => {
+  let pluginManager: PluginManager
+  let router: any
+  let pinia: any
   
-  static getInstance(): PluginRegistry {
-    if (!this.instance) {
-      this.instance = new PluginRegistry()
-    }
-    return this.instance
-  }
+  beforeEach(() => {
+    router = createRouter({
+      history: createWebHistory(),
+      routes: []
+    })
+    pinia = createPinia()
+    pluginManager = new PluginManager()
+  })
   
-  register(plugin: Plugin): void {
-    if (this.plugins.has(plugin.meta.id)) {
-      throw new Error(`Plugin ${plugin.meta.id} is already registered`)
-    }
+  it('should initialize plugin successfully', async () => {
+    const plugin = new MyCustomPlugin()
     
-    this.plugins.set(plugin.meta.id, plugin)
-    console.log(`Plugin ${plugin.meta.id} registered successfully`)
-  }
-  
-  getPlugin(id: string): Plugin | undefined {
-    return this.plugins.get(id)
-  }
-  
-  getAllPlugins(): Plugin[] {
-    return Array.from(this.plugins.values())
-  }
-  
-  getPluginsByAuthor(author: string): Plugin[] {
-    return this.getAllPlugins().filter(plugin => plugin.meta.author === author)
-  }
-}
+    await expect(
+      plugin.initialize(null as any, router, pinia)
+    ).resolves.not.toThrow()
+    
+    // Check if routes were added
+    const routes = router.getRoutes()
+    expect(routes.some((route: any) => route.name === 'Custom')).toBe(true)
+  })
+})
 ```
 
 ## Troubleshooting
@@ -1210,11 +714,11 @@ export async function loadPlugins(): Promise<Plugin[]> {
   }
   
   try {
-    const MetricsPlugin = (await import('./mcp-metrics-plugin')).default
-    plugins.push(new MetricsPlugin())
-    console.log('✅ MetricsPlugin loaded')
+    const CustomPlugin = (await import('./my-custom-plugin')).default
+    plugins.push(new CustomPlugin())
+    console.log('✅ CustomPlugin loaded')
   } catch (error) {
-    console.error('❌ Failed to load MetricsPlugin:', error)
+    console.error('❌ Failed to load CustomPlugin:', error)
   }
   
   return plugins
@@ -1223,35 +727,17 @@ export async function loadPlugins(): Promise<Plugin[]> {
 
 #### Extension Points Not Rendering
 
-```vue
-<!-- Debug extension points -->
-<template>
-  <div>
-    <h3>Debug Extension Points</h3>
-    <div v-for="(point, id) in extensionPoints" :key="id">
-      <strong>{{ id }}:</strong> {{ point.length }} components
-      <ul>
-        <li v-for="ext in point" :key="ext.pluginId">
-          {{ ext.pluginId }} (order: {{ ext.options?.order || 0 }})
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from 'vue'
-
-const extensionPoints = inject('extensionPoints', {})
-</script>
-```
+1. **Check Extension Point Placement**: Ensure `<ExtensionPoint pointId="your-point-id" />` is placed in your application views
+2. **Verify Point ID**: Make sure the extension point ID matches between registration and usage
+3. **Component Import**: Check that components are correctly imported and registered
+4. **Console Errors**: Look for JavaScript errors that might prevent component rendering
 
 #### Plugin State Issues
 
 ```typescript
 // Debug plugin state
 class DebuggablePlugin implements Plugin {
-  async initialize(app: App, router: Router, pinia: Pinia) {
+  initialize(app: App, router: Router, pinia: Pinia) {
     // Add global debug method
     app.config.globalProperties.$debugPlugin = (pluginId: string) => {
       console.log('Plugin Debug Info:', {
@@ -1275,11 +761,11 @@ class DebuggablePlugin implements Plugin {
 ```typescript
 // Performance monitoring for plugins
 class PerformanceMonitoredPlugin implements Plugin {
-  async initialize(app: App, router: Router, pinia: Pinia) {
+  initialize(app: App, router: Router, pinia: Pinia) {
     const startTime = performance.now()
     
     try {
-      await this.doInitialization()
+      this.doInitialization()
       
       const endTime = performance.now()
       console.log(`${this.meta.id} initialization took ${endTime - startTime}ms`)
@@ -1290,10 +776,10 @@ class PerformanceMonitoredPlugin implements Plugin {
     }
   }
   
-  private async doInitialization() {
+  private doInitialization() {
     // Your plugin initialization logic
   }
 }
 ```
 
-This comprehensive plugin system documentation provides everything needed to create powerful, maintainable, and well-tested plugins for the DeployStack frontend. The modular architecture ensures that functionality can be extended cleanly while maintaining the core application's stability and performance.
+This plugin system documentation provides everything needed to create maintainable and well-tested plugins for the DeployStack frontend. The modular architecture ensures that functionality can be extended cleanly while maintaining the core application's stability and performance.
\ No newline at end of file
diff --git a/docs/deploystack/local-setup.mdx b/docs/deploystack/local-setup.mdx
new file mode 100644
index 0000000..3527bb0
--- /dev/null
+++ b/docs/deploystack/local-setup.mdx
@@ -0,0 +1,459 @@
+---
+title: Local Development Setup
+description: Set up DeployStack for local development with npm scripts and hot reloading.
+sidebar: Local Setup
+icon: Code2
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
+import { Steps, Step } from 'fumadocs-ui/components/steps';
+
+# Local Development Setup
+
+This guide is for contributors and developers who want to run DeployStack locally for development purposes. If you want to deploy DeployStack for production use, see our [Self-Hosted Documentation](/deploystack/self-hosted).
+
+<Callout type="info">
+  For production deployments, use our [Docker Compose setup](/deploystack/self-hosted/docker-compose) instead.
+</Callout>
+
+## Prerequisites
+
+<Tabs items={['Linux/macOS', 'Windows (WSL)']}>
+  <Tab value="Linux/macOS">
+    Before you can install and use DeployStack locally, make sure you have the following installed:
+    
+    - **[Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)**: Version control system
+    - **[Node.js v18+](https://nodejs.org/en/download)**: JavaScript runtime (v18 or higher required)
+    - **[npm v8+](https://www.npmjs.com/get-npm)**: Package manager (comes with Node.js)
+    - **[Docker](https://docs.docker.com/get-docker/)**: For running databases (optional but recommended)
+    
+    ### Verify Installation
+    
+    ```bash
+    # Check versions
+    git --version
+    node --version  # Should be v18 or higher
+    npm --version   # Should be v8 or higher
+    docker --version
+    ```
+  </Tab>
+  
+  <Tab value="Windows (WSL)">
+    For Windows development, we recommend using Windows Subsystem for Linux (WSL2):
+    
+    1. **Install WSL2**: Follow [Microsoft's WSL installation guide](https://docs.microsoft.com/en-us/windows/wsl/install)
+    2. **Install Ubuntu**: From Microsoft Store or command line
+    3. **Install development tools in WSL**:
+    
+    ```bash
+    # Update package list
+    sudo apt update
+    
+    # Install Git
+    sudo apt install git
+    
+    # Install Node.js v18 via NodeSource
+    curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
+    sudo apt-get install -y nodejs
+    
+    # Install Docker
+    curl -fsSL https://get.docker.com -o get-docker.sh
+    sudo sh get-docker.sh
+    sudo usermod -aG docker $USER
+    ```
+    
+    ### Verify Installation
+    
+    ```bash
+    # Check versions
+    git --version
+    node --version  # Should be v18 or higher
+    npm --version   # Should be v8 or higher
+    docker --version
+    ```
+    
+    <Callout type="warn">
+      After installing Docker, you may need to restart your WSL session or run `newgrp docker` to use Docker without sudo.
+    </Callout>
+  </Tab>
+</Tabs>
+
+## Step 1: Clone the Repository
+
+<Tabs items={['SSH (Recommended)', 'HTTPS']}>
+  <Tab value="SSH (Recommended)">
+    If you haven't set up SSH keys, learn how [here](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
+    
+    ```bash
+    git clone git@github.com:deploystackio/deploystack.git
+    cd deploystack
+    ```
+  </Tab>
+  
+  <Tab value="HTTPS">
+    ```bash
+    git clone https://github.com/deploystackio/deploystack.git
+    cd deploystack
+    ```
+  </Tab>
+</Tabs>
+
+## Step 2: Install Dependencies
+
+Install all project dependencies using npm workspaces:
+
+```bash
+# Install dependencies for all services
+npm install
+```
+
+<Callout type="info">
+  DeployStack uses npm workspaces to manage dependencies across frontend and backend services. The root `npm install` will install dependencies for all services.
+</Callout>
+
+## Step 3: Set Up Environment Variables
+
+### Backend Environment
+
+Create the backend environment file:
+
+```bash
+# Create backend .env file
+cp services/backend/.env.example services/backend/.env
+```
+
+Edit `services/backend/.env` with your configuration:
+
+```bash
+# Required: Generate a secure encryption secret
+DEPLOYSTACK_ENCRYPTION_SECRET=your-32-character-secret-here
+
+# Frontend URL (for CORS and redirects)
+DEPLOYSTACK_FRONTEND_URL=http://localhost:5173
+
+# Development settings
+NODE_ENV=development
+PORT=3000
+LOG_LEVEL=debug
+```
+
+### Frontend Environment
+
+Create the frontend environment file:
+
+```bash
+# Create frontend .env file
+cp services/frontend/.env.example services/frontend/.env
+```
+
+Edit `services/frontend/.env` with your configuration:
+
+```bash
+# Backend API URL
+VITE_DEPLOYSTACK_BACKEND_URL=http://localhost:3000
+
+# App configuration
+VITE_APP_TITLE=DeployStack (Dev)
+```
+
+### Generate Encryption Secret
+
+<Tabs items={['Linux/macOS', 'Windows']}>
+  <Tab value="Linux/macOS">
+    Generate a secure 32-character secret:
+    
+    ```bash
+    # Using OpenSSL (recommended)
+    openssl rand -hex 16
+    
+    # Alternative using Node.js
+    node -e "console.log(require('crypto').randomBytes(16).toString('hex'))"
+    ```
+  </Tab>
+  
+  <Tab value="Windows">
+    Generate a secure secret using PowerShell or Node.js:
+    
+    ```powershell
+    # Using PowerShell
+    -join ((1..32) | ForEach {'{0:X}' -f (Get-Random -Max 16)})
+    
+    # Using Node.js (if available)
+    node -e "console.log(require('crypto').randomBytes(16).toString('hex'))"
+    ```
+  </Tab>
+</Tabs>
+
+## Step 4: Set Up Database (Optional)
+
+DeployStack uses SQLite by default for development, but you can optionally set up PostgreSQL:
+
+<Tabs items={['SQLite (Default)', 'PostgreSQL (Optional)']}>
+  <Tab value="SQLite (Default)">
+    No additional setup required. DeployStack will create a SQLite database automatically in `services/backend/persistent_data/`.
+    
+    The database file will be created on first run:
+    ```
+    services/backend/persistent_data/database/deploystack.db
+    ```
+  </Tab>
+  
+  <Tab value="PostgreSQL (Optional)">
+    If you prefer PostgreSQL for development:
+    
+    ```bash
+    # Start PostgreSQL with Docker
+    docker run -d \
+      --name deploystack-postgres \
+      -e POSTGRES_DB=deploystack \
+      -e POSTGRES_USER=deploystack \
+      -e POSTGRES_PASSWORD=deploystack \
+      -p 5432:5432 \
+      postgres:16
+    ```
+    
+    Update your `services/backend/.env`:
+    ```bash
+    # Add PostgreSQL configuration
+    DATABASE_URL=postgresql://deploystack:deploystack@localhost:5432/deploystack
+    ```
+  </Tab>
+</Tabs>
+
+## Step 5: Running the Development Servers
+
+DeployStack requires both frontend and backend services to run simultaneously.
+
+### Option 1: Separate Terminals (Recommended)
+
+Run each service in its own terminal for better log visibility:
+
+```bash
+# Terminal 1: Start backend server
+npm run dev:backend
+
+# Terminal 2: Start frontend server (in a new terminal)
+npm run dev:frontend
+```
+
+### Option 2: Background Processes
+
+Run both services from a single terminal:
+
+<Tabs items={['Linux/macOS', 'Windows']}>
+  <Tab value="Linux/macOS">
+    ```bash
+    # Start backend in background
+    npm run dev:backend &
+    
+    # Start frontend
+    npm run dev:frontend
+    
+    # To stop background processes later:
+    # pkill -f "npm run dev:backend"
+    ```
+  </Tab>
+  
+  <Tab value="Windows">
+    ```powershell
+    # Start backend in new window
+    Start-Process powershell -ArgumentList "-NoExit", "-Command", "npm run dev:backend"
+    
+    # Start frontend in current window
+    npm run dev:frontend
+    ```
+  </Tab>
+</Tabs>
+
+### Development URLs
+
+Once both services are running:
+
+- **Frontend**: [http://localhost:5173](http://localhost:5173) (Vite dev server)
+- **Backend API**: [http://localhost:3000](http://localhost:3000) (Fastify server)
+- **API Documentation**: [http://localhost:3000/documentation](http://localhost:3000/documentation) (Swagger UI)
+
+## Step 6: Verify Installation
+
+<Steps>
+  <Step>
+    **Check Service Status**
+    
+    Verify both services are running:
+    ```bash
+    # Check if ports are listening
+    curl http://localhost:3000/health  # Backend health check
+    curl http://localhost:5173         # Frontend dev server
+    ```
+  </Step>
+  
+  <Step>
+    **Access the Application**
+    
+    Open [http://localhost:5173](http://localhost:5173) in your browser. You should see the DeployStack interface.
+  </Step>
+  
+  <Step>
+    **Create First User**
+    
+    Follow the on-screen setup wizard to create your first admin user and configure basic settings.
+  </Step>
+</Steps>
+
+## Development Workflow
+
+### Hot Reloading
+
+Both services support hot reloading:
+
+- **Frontend**: Vite automatically reloads on file changes
+- **Backend**: Nodemon restarts the server on file changes
+
+### Available Scripts
+
+From the project root:
+
+```bash
+# Development
+npm run dev:frontend          # Start frontend dev server
+npm run dev:backend           # Start backend dev server
+
+# Building
+npm run build:frontend        # Build frontend for production
+npm run build:backend         # Build backend TypeScript
+
+# Linting
+npm run lint:frontend         # Lint frontend code
+npm run lint:backend          # Lint backend code
+npm run lint:md               # Lint markdown files
+
+# Testing
+npm run test:backend:unit     # Run backend unit tests
+npm run test:backend:e2e      # Run backend e2e tests
+npm run test:backend:unit:coverage  # Run tests with coverage
+
+# Releases
+npm run release:frontend      # Create frontend release
+npm run release:backend       # Create backend release
+```
+
+### Project Structure
+
+```bash
+deploystack/
+├── services/
+│   ├── frontend/           # Vue.js frontend application
+│   │   ├── src/           # Source code
+│   │   ├── public/        # Static assets
+│   │   ├── package.json   # Frontend dependencies
+│   │   └── vite.config.ts # Vite configuration
+│   ├── backend/           # Fastify backend API
+│   │   ├── src/          # Source code
+│   │   ├── tests/        # Test files
+│   │   ├── persistent_data/ # SQLite database and uploads
+│   │   ├── package.json  # Backend dependencies
+│   │   └── tsconfig.json # TypeScript configuration
+│   └── shared/           # Shared utilities and types
+├── scripts/              # Build and deployment scripts
+├── package.json          # Root package.json (workspaces)
+└── docker-compose.yml    # Production deployment
+```
+
+## Troubleshooting
+
+### Common Issues
+
+#### Port Already in Use
+
+```bash
+# Check what's using the port
+lsof -i :3000  # Backend port
+lsof -i :5173  # Frontend port
+
+# Kill process using the port
+kill -9 <PID>
+```
+
+#### Node Version Issues
+
+```bash
+# Check Node version
+node --version
+
+# If using nvm, switch to correct version
+nvm install 18
+nvm use 18
+```
+
+#### Permission Errors
+
+<Tabs items={['Linux/macOS', 'Windows']}>
+  <Tab value="Linux/macOS">
+    ```bash
+    # Fix npm permissions
+    sudo chown -R $(whoami) ~/.npm
+    
+    # Fix project permissions
+    sudo chown -R $(whoami) .
+    ```
+  </Tab>
+  
+  <Tab value="Windows">
+    Run your terminal as Administrator or ensure you have write permissions to the project directory.
+  </Tab>
+</Tabs>
+
+#### Database Connection Issues
+
+```bash
+# Check if database directory exists
+ls -la services/backend/persistent_data/
+
+# Create directory if missing
+mkdir -p services/backend/persistent_data/database
+
+# Check database file permissions
+ls -la services/backend/persistent_data/database/
+```
+
+#### Environment Variable Issues
+
+```bash
+# Verify environment files exist
+ls -la services/backend/.env
+ls -la services/frontend/.env
+
+# Check if encryption secret is set
+grep DEPLOYSTACK_ENCRYPTION_SECRET services/backend/.env
+```
+
+### Getting Help
+
+If you encounter issues not covered here:
+
+1. **Check Logs**: Look at the console output from both frontend and backend servers
+2. **Search Issues**: Look for similar problems in [GitHub Issues](https://github.com/deploystackio/deploystack/issues)
+3. **Community Support**: Ask for help in our [Discord](https://discord.gg/UjFWwByB)
+4. **Create Issue**: Report bugs with detailed logs and system information
+
+## Contributing
+
+Once you have DeployStack running locally:
+
+1. **Read Contributing Guidelines**: Check [CONTRIBUTING.md](https://github.com/deploystackio/deploystack/blob/main/CONTRIBUTING.md)
+2. **Create Feature Branch**: `git checkout -b feature/amazing-feature`
+3. **Make Changes**: Implement your feature or bug fix
+4. **Test Changes**: Run tests and verify functionality
+5. **Submit Pull Request**: Create a PR with detailed description
+
+## Next Steps
+
+- **Explore the Codebase**: Familiarize yourself with the project structure
+- **Read API Documentation**: Check the backend API docs at [http://localhost:3000/documentation](http://localhost:3000/documentation)
+- **Join Development Discussions**: Participate in our [Discord](https://discord.gg/UjFWwByB) development channels
+- **Check Open Issues**: Find issues to work on in our [GitHub repository](https://github.com/deploystackio/deploystack/issues)
+
+---
+
+**Ready to contribute?** Check our [Contributing Guidelines](https://github.com/deploystackio/deploystack/blob/main/CONTRIBUTING.md) to get started!
\ No newline at end of file
diff --git a/docs/deploystack/meta.json b/docs/deploystack/meta.json
index 6807cea..c22a970 100644
--- a/docs/deploystack/meta.json
+++ b/docs/deploystack/meta.json
@@ -1,14 +1,18 @@
 {
-  "title": "Docker Deployment",
+  "title": "DeployStack",
   "description": "Documentation for DeployStack",
   "icon": "DeployStackLogo",
   "root": true,
   "pages": [
     "index.mdx",
+    "quick-start.mdx",
     "---General---",
     "global-settings.mdx",
     "roles.mdx",
     "security.mdx",
+    "---Deployment---",
+    "local-setup.mdx",
+    "self-hosted/",
     "---Development---",
     "development/index.mdx",
     "---Frontend Development---",
diff --git a/docs/deploystack/quick-start.mdx b/docs/deploystack/quick-start.mdx
new file mode 100644
index 0000000..71ef5fd
--- /dev/null
+++ b/docs/deploystack/quick-start.mdx
@@ -0,0 +1,326 @@
+---
+title: Quick Start
+description: Get DeployStack running in minutes with Docker Compose or individual Docker containers.
+sidebar: Quick Start
+icon: Zap
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
+import { Steps, Step } from 'fumadocs-ui/components/steps';
+
+# Quick Start
+
+Get DeployStack up and running in minutes. Choose between our recommended Docker Compose setup or individual Docker containers for maximum flexibility.
+
+## Prerequisites
+
+- **Docker**: [Install Docker](https://docs.docker.com/get-docker/)
+- **Docker Compose**: [Install Docker Compose](https://docs.docker.com/compose/install/)
+- **System Requirements**: 4GB RAM, 20GB disk space
+
+## Method 1: Docker Compose (Recommended)
+
+The fastest way to get DeployStack running with proper networking and persistence.
+
+<Steps>
+  <Step>
+    **Download and Start**
+    
+    Run these two commands to get DeployStack running:
+    
+    ```bash
+    curl -o docker-compose.yml https://raw.githubusercontent.com/deploystackio/deploystack/main/docker-compose.yml
+    DEPLOYSTACK_ENCRYPTION_SECRET=$(openssl rand -hex 16) docker-compose up -d
+    ```
+  </Step>
+  
+  <Step>
+    **Access DeployStack**
+    
+    Open your browser and navigate to:
+    - **DeployStack Interface**: [http://localhost:8080](http://localhost:8080)
+    - **Backend API**: [http://localhost:3000](http://localhost:3000)
+  </Step>
+  
+  <Step>
+    **Complete Setup**
+    
+    Follow the on-screen setup wizard to:
+    - Create your admin account
+    - Configure basic settings
+    - Set up your first MCP Server
+  </Step>
+</Steps>
+
+### Managing Your Installation
+
+```bash
+# View running services
+docker-compose ps
+
+# View logs
+docker-compose logs
+
+# Stop services
+docker-compose down
+
+# Start services
+docker-compose up -d
+
+# Update to latest version
+docker-compose pull && docker-compose up -d
+```
+
+## Method 2: Individual Docker Containers
+
+For more control over the deployment, run frontend and backend containers separately.
+
+### Step 1: Generate Encryption Secret
+
+<Tabs items={['Linux/macOS', 'Windows']}>
+  <Tab value="Linux/macOS">
+    ```bash
+    # Generate a secure secret
+    export DEPLOYSTACK_ENCRYPTION_SECRET=$(openssl rand -hex 16)
+    echo "Your encryption secret: $DEPLOYSTACK_ENCRYPTION_SECRET"
+    ```
+  </Tab>
+  
+  <Tab value="Windows">
+    ```powershell
+    # Generate a secure secret
+    $env:DEPLOYSTACK_ENCRYPTION_SECRET = -join ((1..32) | ForEach {'{0:X}' -f (Get-Random -Max 16)})
+    Write-Host "Your encryption secret: $env:DEPLOYSTACK_ENCRYPTION_SECRET"
+    ```
+  </Tab>
+</Tabs>
+
+<Callout type="warn">
+  **Save this secret!** You'll need it for upgrades and configuration changes.
+</Callout>
+
+### Step 2: Start Backend Service
+
+```bash
+docker run -d \
+  --name deploystack-backend \
+  -p 3000:3000 \
+  -e DEPLOYSTACK_FRONTEND_URL="http://localhost:8080" \
+  -e DEPLOYSTACK_ENCRYPTION_SECRET="$DEPLOYSTACK_ENCRYPTION_SECRET" \
+  -v deploystack_backend_persistent:/app/persistent_data \
+  deploystack/backend:latest
+```
+
+### Step 3: Start Frontend Service
+
+```bash
+docker run -d \
+  --name deploystack-frontend \
+  -p 8080:80 \
+  -e VITE_DEPLOYSTACK_BACKEND_URL="http://localhost:3000" \
+  -e VITE_APP_TITLE="DeployStack" \
+  deploystack/frontend:latest
+```
+
+### Step 4: Verify Installation
+
+```bash
+# Check if containers are running
+docker ps
+
+# Check backend health
+curl http://localhost:3000/
+
+# Access the interface
+open http://localhost:8080  # macOS
+# or visit http://localhost:8080 in your browser
+```
+
+## Production Deployment
+
+For production deployments on a server or VPS:
+
+### Update Environment Variables
+
+Replace `localhost` with your server's IP address or domain:
+
+<Tabs items={['Docker Compose', 'Individual Containers']}>
+  <Tab value="Docker Compose">
+    Create a `.env` file:
+    
+    ```bash
+    # .env file
+    DEPLOYSTACK_ENCRYPTION_SECRET=your-generated-secret-here
+    DEPLOYSTACK_FRONTEND_URL=http://YOUR_SERVER_IP:8080
+    VITE_DEPLOYSTACK_BACKEND_URL=http://YOUR_SERVER_IP:3000
+    ```
+    
+    Then start with:
+    ```bash
+    docker-compose up -d
+    ```
+  </Tab>
+  
+  <Tab value="Individual Containers">
+    Update the Docker run commands:
+    
+    ```bash
+    # Backend
+    docker run -d \
+      --name deploystack-backend \
+      -p 3000:3000 \
+      -e DEPLOYSTACK_FRONTEND_URL="http://YOUR_SERVER_IP:8080" \
+      -e DEPLOYSTACK_ENCRYPTION_SECRET="your-secret-here" \
+      -v deploystack_backend_persistent:/app/persistent_data \
+      deploystack/backend:latest
+    
+    # Frontend
+    docker run -d \
+      --name deploystack-frontend \
+      -p 8080:80 \
+      -e VITE_DEPLOYSTACK_BACKEND_URL="http://YOUR_SERVER_IP:3000" \
+      -e VITE_APP_TITLE="DeployStack Production" \
+      deploystack/frontend:latest
+    ```
+  </Tab>
+</Tabs>
+
+### Firewall Configuration
+
+Ensure your firewall allows traffic on the required ports:
+
+```bash
+# Ubuntu/Debian
+sudo ufw allow 3000  # Backend API
+sudo ufw allow 8080  # Frontend
+
+# CentOS/RHEL
+sudo firewall-cmd --permanent --add-port=3000/tcp
+sudo firewall-cmd --permanent --add-port=8080/tcp
+sudo firewall-cmd --reload
+```
+
+## Environment Variables Reference
+
+### Required Variables
+
+| Variable | Description | Example |
+|----------|-------------|----------|
+| `DEPLOYSTACK_ENCRYPTION_SECRET` | 32-character secret for encrypting sensitive data | `a1b2c3d4e5f6789...` |
+
+### Optional Variables
+
+| Variable | Description | Default | Example |
+|----------|-------------|---------|----------|
+| `DEPLOYSTACK_FRONTEND_URL` | URL where frontend is accessible | `http://localhost:8080` | `https://deploystack.company.com` |
+| `VITE_DEPLOYSTACK_BACKEND_URL` | Backend API URL for frontend | `http://localhost:3000` | `https://api.deploystack.company.com` |
+| `VITE_APP_TITLE` | Custom application title | `DeployStack` | `Company DeployStack` |
+
+## Next Steps
+
+Once DeployStack is running:
+
+<Steps>
+  <Step>
+    **Complete Initial Setup**
+    
+    - Create your admin account
+    - Configure global settings (email, authentication)
+    - Set up user roles and permissions
+  </Step>
+  
+  <Step>
+    **Deploy Your First MCP Server**
+    
+    - Browse the MCP server catalog
+    - Configure credentials and settings
+    - Deploy to your preferred cloud provider
+  </Step>
+  
+  <Step>
+    **Explore Advanced Features**
+    
+    - Set up team collaboration
+    - Create private MCP server catalogs
+    - Configure CI/CD integrations
+  </Step>
+</Steps>
+
+## Troubleshooting
+
+### Common Issues
+
+#### Port Conflicts
+
+If ports 3000 or 8080 are already in use:
+
+```bash
+# Check what's using the ports
+lsof -i :3000
+lsof -i :8080
+
+# Use different ports
+docker run -p 3001:3000 ...  # Backend on port 3001
+docker run -p 8081:80 ...    # Frontend on port 8081
+```
+
+#### Services Won't Start
+
+```bash
+# Check container logs
+docker logs deploystack-backend
+docker logs deploystack-frontend
+
+# Check system resources
+docker stats
+df -h  # Check disk space
+free -h  # Check memory
+```
+
+#### Can't Access the Interface
+
+1. **Check if services are running**:
+   ```bash
+   docker ps
+   curl http://localhost:3000/
+   ```
+
+2. **Check firewall settings**:
+   ```bash
+   # Test local connectivity
+   telnet localhost 8080
+   telnet localhost 3000
+   ```
+
+3. **Check environment variables**:
+   ```bash
+   docker inspect deploystack-frontend | grep -A 10 Env
+   docker inspect deploystack-backend | grep -A 10 Env
+   ```
+
+### Getting Help
+
+If you need assistance:
+
+- **Documentation**: Check our [comprehensive guides](/deploystack)
+- **Community**: Join our [Discord](https://discord.gg/UjFWwByB)
+- **Issues**: Report problems on [GitHub](https://github.com/deploystackio/deploystack/issues)
+- **Support**: Contact us for enterprise support options
+
+## What's Next?
+
+### Learn More
+
+- **[Self-Hosted Documentation](/deploystack/self-hosted)**: Comprehensive deployment guides
+- **[Local Development](/deploystack/local-setup)**: Set up development environment
+- **[Global Settings](/deploystack/global-settings)**: Configure email, auth, and more
+- **[User Roles](/deploystack/roles)**: Manage team permissions
+
+### Deploy MCP Servers
+
+- **[MCP Server Catalog](https://deploystack.io/mcp)**: Browse available servers
+
+---
+
+**🎉 Congratulations!** You now have DeployStack running. Start deploying MCP servers and streamline your AI agent infrastructure!
diff --git a/docs/deploystack/self-hosted/docker-compose.mdx b/docs/deploystack/self-hosted/docker-compose.mdx
new file mode 100644
index 0000000..7dd9c68
--- /dev/null
+++ b/docs/deploystack/self-hosted/docker-compose.mdx
@@ -0,0 +1,312 @@
+---
+title: Docker Compose Setup
+description: Deploy DeployStack using Docker Compose for a quick and reliable self-hosted installation.
+sidebar: Docker Compose
+icon: Docker
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
+
+# Docker Compose Setup
+
+Deploy DeployStack using Docker Compose for a production-ready, self-hosted installation. This method is recommended for most users as it provides a reliable, scalable setup with minimal configuration.
+
+<Callout type="info">
+  Docker containers are for production hosting or self-hosting. For development contributions, check the [Local Setup](/deploystack/local-setup) guide.
+</Callout>
+
+## Overview
+
+This guide provides step-by-step instructions to install and configure DeployStack using Docker Compose. The setup includes both frontend and backend services with persistent data storage and proper networking.
+
+**Important:** Only modify settings explicitly mentioned in this guide. Altering other configurations may lead to issues.
+
+## System Requirements
+
+- **RAM**: Ensure your environment has at least 4GB of RAM. Insufficient memory can cause processes to crash.
+- **Docker & Docker Compose**: Make sure both are installed and up-to-date.
+- **Storage**: At least 20GB of available disk space for images and persistent data.
+- **Network**: Stable internet connection for pulling Docker images.
+
+## Option 1: One-line Setup
+
+Deploy DeployStack with a single command:
+
+```bash
+curl -sSL https://raw.githubusercontent.com/deploystackio/deploystack/main/scripts/install.sh | bash
+```
+
+This script will:
+1. Download the docker-compose.yml file
+2. Generate a secure encryption secret
+3. Start all services
+4. Display access information
+
+## Option 2: Manual Setup
+
+Follow these steps for a manual setup with full control.
+
+### Step 1: Download Docker Compose File
+
+Download the `docker-compose.yml` file to your working directory:
+
+```bash
+curl -o docker-compose.yml https://raw.githubusercontent.com/deploystackio/deploystack/main/docker-compose.yml
+```
+
+### Step 2: Generate Encryption Secret
+
+DeployStack requires a secure encryption secret for protecting sensitive data like API keys and credentials.
+
+<Tabs items={['Linux/macOS', 'Windows']}>
+  <Tab value="Linux/macOS">
+    Generate a secure 32-character secret:
+    
+    ```bash
+    # Using OpenSSL (recommended)
+    openssl rand -hex 16
+    
+    # Alternative using Node.js
+    node -e "console.log(require('crypto').randomBytes(16).toString('hex'))"
+    ```
+  </Tab>
+  
+  <Tab value="Windows">
+    Generate a secure secret using PowerShell:
+    
+    ```powershell
+    # Using PowerShell
+    -join ((1..32) | ForEach {'{0:X}' -f (Get-Random -Max 16)})
+    
+    # Alternative using Node.js (if installed)
+    node -e "console.log(require('crypto').randomBytes(16).toString('hex'))"
+    ```
+  </Tab>
+</Tabs>
+
+<Callout type="warn">
+  **Important:** Keep this secret secure and do not share it. Store it safely as you'll need it for upgrades.
+</Callout>
+
+### Step 3: Set Environment Variables
+
+Create a `.env` file in the same directory as your `docker-compose.yml`:
+
+```bash
+# Create .env file
+cat > .env << EOF
+# DeployStack Configuration
+DEPLOYSTACK_ENCRYPTION_SECRET=your-generated-secret-here
+
+# Optional: Customize ports (default: frontend=8080, backend=3000)
+# FRONTEND_PORT=8080
+# BACKEND_PORT=3000
+
+# Optional: Custom app title
+# VITE_APP_TITLE=My DeployStack Instance
+EOF
+```
+
+Replace `your-generated-secret-here` with the secret you generated in Step 2.
+
+### Step 4: Launch DeployStack
+
+Start the Docker containers:
+
+```bash
+docker-compose up -d
+```
+
+This command will:
+- Pull the latest DeployStack images
+- Create necessary volumes for persistent data
+- Start both frontend and backend services
+- Set up networking between services
+
+### Step 5: Verify Installation
+
+Check that all services are running:
+
+```bash
+docker-compose ps
+```
+
+You should see both `deploystack-frontend` and `deploystack-backend` containers in "Up" status.
+
+### Step 6: Access DeployStack
+
+Open your browser and navigate to:
+- **Frontend**: [http://localhost:8080](http://localhost:8080)
+- **Backend API**: [http://localhost:3000](http://localhost:3000)
+
+## Configuration
+
+### External Access
+
+By default, DeployStack runs on `localhost`. To access it via an external domain or IP address, you need to configure the environment variables.
+
+#### Understanding URLs
+
+- **Protocol**: Use `http` or `https` depending on your setup
+- **Domain/IP**: The domain name or IP address where your application is accessible
+- **Port**: Include the port number if not using standard ports (80 for http, 443 for https)
+
+#### Configuring for External Access
+
+1. **Update your `.env` file**:
+
+```bash
+# For direct access without reverse proxy
+DEPLOYSTACK_FRONTEND_URL=http://your-domain-or-ip:8080
+VITE_DEPLOYSTACK_BACKEND_URL=http://your-domain-or-ip:3000
+
+# For access via reverse proxy with SSL
+DEPLOYSTACK_FRONTEND_URL=https://your-domain
+VITE_DEPLOYSTACK_BACKEND_URL=https://your-domain/api
+```
+
+2. **Restart the services**:
+
+```bash
+docker-compose down
+docker-compose up -d
+```
+
+### SSL/HTTPS Setup
+
+<Callout type="info">
+  HTTPS is recommended for production deployments to ensure secure communication and enable all browser features.
+</Callout>
+
+For HTTPS setup, we recommend using a reverse proxy like Nginx or Traefik:
+
+```nginx
+# Example Nginx configuration
+server {
+    listen 443 ssl;
+    server_name your-domain.com;
+    
+    # SSL configuration
+    ssl_certificate /path/to/certificate.crt;
+    ssl_certificate_key /path/to/private.key;
+    
+    # Frontend
+    location / {
+        proxy_pass http://localhost:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+    
+    # Backend API
+    location /api/ {
+        proxy_pass http://localhost:3000/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}
+```
+
+### Data Persistence
+
+DeployStack uses Docker volumes to persist data:
+
+- **deploystack_backend_persistent**: Application database, configuration, and user uploads
+
+#### Backup Your Data
+
+Regularly backup your persistent data:
+
+```bash
+# Create backup directory
+mkdir -p backups/$(date +%Y%m%d)
+
+# Backup volume
+docker run --rm -v deploystack_backend_persistent:/data -v $(pwd)/backups/$(date +%Y%m%d):/backup alpine tar czf /backup/backend_persistent.tar.gz -C /data .
+```
+
+## Environment Variables Reference
+
+### Required Variables
+
+| Variable | Description | Example |
+|----------|-------------|----------|
+| `DEPLOYSTACK_ENCRYPTION_SECRET` | 32-character secret for encrypting sensitive data | `a1b2c3d4e5f6...` |
+
+### Optional Variables
+
+| Variable | Description | Default | Example |
+|----------|-------------|---------|----------|
+| `DEPLOYSTACK_FRONTEND_URL` | URL where frontend is accessible | `http://localhost:8080` | `https://deploystack.company.com` |
+| `VITE_DEPLOYSTACK_BACKEND_URL` | Backend API URL for frontend | `http://localhost:3000` | `https://api.deploystack.company.com` |
+| `VITE_APP_TITLE` | Custom application title | `DeployStack` | `Company DeployStack` |
+| `FRONTEND_PORT` | Frontend port mapping | `8080` | `80` |
+| `BACKEND_PORT` | Backend port mapping | `3000` | `3001` |
+
+## Troubleshooting
+
+### Common Issues
+
+#### Services Won't Start
+
+```bash
+# Check logs
+docker-compose logs
+
+# Check specific service
+docker-compose logs backend
+docker-compose logs frontend
+```
+
+#### Port Conflicts
+
+If ports 3000 or 8080 are already in use:
+
+```bash
+# Update .env file
+FRONTEND_PORT=8081
+BACKEND_PORT=3001
+
+# Restart services
+docker-compose down
+docker-compose up -d
+```
+
+#### Permission Issues
+
+```bash
+# Fix volume permissions
+sudo chown -R $USER:$USER $(docker volume inspect deploystack_backend_persistent --format '{{ .Mountpoint }}')
+```
+
+#### Memory Issues
+
+```bash
+# Check available memory
+free -h
+
+# Monitor container resource usage
+docker stats
+```
+
+### Getting Help
+
+If you encounter issues not covered here:
+
+1. Check the [Troubleshooting](/deploystack/troubleshooting) guide
+2. Search existing [GitHub Issues](https://github.com/deploystackio/deploystack/issues)
+3. Join our [Discord community](https://discord.gg/UjFWwByB)
+4. Create a new issue with detailed logs and system information
+
+## Next Steps
+
+Once DeployStack is running:
+
+1. **Create your first workspace** through the web interface
+2. **Configure global settings** for email and authentication
+3. **Set up user roles** and team permissions
+4. **Deploy your first MCP server** from the catalog
+
+---
+
+**Need to upgrade?** Check our [Upgrade Guide](/deploystack/self-hosted/upgrade-guide) for step-by-step instructions.
diff --git a/docs/deploystack/self-hosted/index.mdx b/docs/deploystack/self-hosted/index.mdx
new file mode 100644
index 0000000..c5a7dbb
--- /dev/null
+++ b/docs/deploystack/self-hosted/index.mdx
@@ -0,0 +1,103 @@
+---
+title: Self-Hosted DeployStack
+description: Deploy and manage DeployStack on your own infrastructure with complete control and customization.
+sidebar: Self-Hosted
+icon: Server
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import { Server, Settings, ArrowUp, Wrench } from 'lucide-react';
+
+# Self-Hosted DeployStack
+
+Run DeployStack on your own infrastructure for maximum control, security, and customization. Perfect for organizations that need to keep their MCP server deployments within their own environment.
+
+## Deployment Options
+
+<Cards>
+  <Card 
+    icon={<Server />} 
+    href="/deploystack/self-hosted/docker-compose" 
+    title="Docker Compose Setup"
+  >
+    Quick and easy deployment using Docker Compose - recommended for most users
+  </Card>
+  
+  <Card 
+    icon={<Settings />} 
+    href="/deploystack/self-hosted/setup" 
+    title="Advanced Setup"
+  >
+    Manual installation and configuration for custom environments
+  </Card>
+</Cards>
+
+## Management & Maintenance
+
+<Cards>
+  <Card 
+    icon={<ArrowUp />} 
+    href="/deploystack/self-hosted/upgrade-guide" 
+    title="Upgrade Guide"
+  >
+    Keep your DeployStack instance up-to-date with the latest features and security patches
+  </Card>
+  
+  <Card 
+    icon={<Wrench />} 
+    href="/deploystack/troubleshooting" 
+    title="Troubleshooting"
+  >
+    Common issues and solutions for self-hosted deployments
+  </Card>
+</Cards>
+
+## Why Self-Host DeployStack?
+
+### Complete Control
+- **Data Sovereignty**: Keep all your MCP server configurations and deployment data within your infrastructure
+- **Custom Integrations**: Integrate with your existing CI/CD pipelines and infrastructure tools
+- **Network Security**: Deploy within your private network with custom firewall rules
+
+### Enterprise Features
+- **Single Sign-On**: Integrate with your organization's authentication systems
+- **Audit Logging**: Complete visibility into all deployment activities
+- **Resource Management**: Control compute resources and scaling policies
+
+### Cost Optimization
+- **No Usage Limits**: Deploy unlimited MCP servers without per-deployment costs
+- **Resource Efficiency**: Optimize resource allocation based on your specific needs
+- **Long-term Savings**: Reduce operational costs for high-volume deployments
+
+## System Requirements
+
+### Minimum Requirements
+- **CPU**: 2 cores
+- **RAM**: 4GB
+- **Storage**: 20GB available space
+- **OS**: Linux, macOS, or Windows with Docker support
+
+### Recommended for Production
+- **CPU**: 4+ cores
+- **RAM**: 8GB+
+- **Storage**: 100GB+ SSD
+- **Network**: Stable internet connection for pulling MCP server images
+
+## Getting Started
+
+1. **Choose Your Deployment Method**: Start with [Docker Compose](/deploystack/self-hosted/docker-compose) for the quickest setup
+2. **Configure Environment**: Set up your environment variables and secrets
+3. **Deploy Services**: Launch your DeployStack instance
+4. **Access Interface**: Connect to your self-hosted DeployStack at your configured URL
+
+## Support
+
+Need help with your self-hosted deployment?
+
+- **Documentation**: Comprehensive guides for all deployment scenarios
+- **Community**: Join our [Discord](https://discord.gg/UjFWwByB) for community support
+- **Enterprise Support**: Contact us for dedicated support options
+
+---
+
+**Ready to deploy?** Start with our [Docker Compose guide](/deploystack/self-hosted/docker-compose) for the fastest setup experience.
diff --git a/docs/deploystack/self-hosted/setup.mdx b/docs/deploystack/self-hosted/setup.mdx
new file mode 100644
index 0000000..06fb18a
--- /dev/null
+++ b/docs/deploystack/self-hosted/setup.mdx
@@ -0,0 +1,321 @@
+---
+title: Platform Setup
+description: Configure your self-hosted DeployStack instance with global settings, email functionality, and platform features.
+sidebar: Platform Setup
+icon: Settings
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
+import { Steps, Step } from 'fumadocs-ui/components/steps';
+
+# Platform Setup
+
+Configure your self-hosted DeployStack instance with essential settings to customize functionality, enable features, and optimize the platform for your organization.
+
+<Callout type="info">
+  Platform setup is performed through the web interface after your DeployStack instance is running. All settings are optional but recommended for production deployments.
+</Callout>
+
+## Accessing Platform Settings
+
+<Steps>
+  <Step>
+    **Log in as Administrator**
+    
+    Access your DeployStack instance and log in with an administrator account.
+  </Step>
+  
+  <Step>
+    **Navigate to Settings**
+    
+    Go to **Settings** → **Global Settings** to access all configuration options.
+  </Step>
+  
+  <Step>
+    **Configure Settings**
+    
+    Use the tabs to configure different aspects of your DeployStack instance.
+  </Step>
+</Steps>
+
+## Global Platform Settings
+
+Configure core platform functionality and features.
+
+### Application Configuration
+
+| Setting | Description | Default | Recommended |
+|---------|-------------|---------|-------------|
+| **Frontend URL** | Base URL where your DeployStack frontend is accessible | `http://localhost:5173` | Your actual domain (e.g., `https://deploystack.company.com`) |
+| **Enable Login** | Allow users to log in to the platform | `Yes` | `Yes` (disable only for maintenance) |
+| **Enable Email Registration** | Allow new users to register with email | `Yes` | `Yes` (or `No` for invite-only) |
+| **Enable API Documentation** | Show Swagger API docs at `/documentation` | `Yes` | `No` for production (security) |
+
+### Feature Toggles
+
+| Setting | Description | Default | Use Case |
+|---------|-------------|---------|----------|
+| **Send Mail** | Enable email sending functionality | `No` | `Yes` after SMTP configuration |
+
+## Email Configuration (SMTP)
+
+Configure email functionality to enable notifications, password resets, and user communications.
+
+<Callout type="info">
+  Email configuration is **optional** but highly recommended for production deployments. Without email, users cannot reset passwords or receive notifications.
+</Callout>
+
+### Why Configure Email?
+
+With email configured, DeployStack can:
+
+- **Send password reset emails** when users forget their passwords
+- **Send user invitations** to join teams and workspaces
+- **Notify users** about deployment status and important events
+- **Send welcome emails** to new users
+- **Provide account verification** for enhanced security
+
+### SMTP Configuration
+
+Navigate to **Settings** → **Global Settings** → **SMTP Mail Settings** tab.
+
+#### Required Settings
+
+| Setting | Description | Example |
+|---------|-------------|---------|
+| **SMTP Host** | Your email provider's SMTP server | `smtp.gmail.com` |
+| **SMTP Port** | Port number for SMTP connection | `587` (TLS) or `465` (SSL) |
+| **Username** | Your email account username | `your-email@gmail.com` |
+| **Password** | Your email account password or app password | `your-app-password` |
+
+#### Optional Settings
+
+| Setting | Description | Default | Example |
+|---------|-------------|---------|---------|
+| **Use SSL/TLS** | Enable secure connection | `Yes` | Recommended: `Yes` |
+| **From Name** | Display name for sent emails | `DeployStack` | `Your Company Name` |
+| **From Email** | Email address for sent emails | (uses username) | `noreply@yourcompany.com` |
+
+### Email Provider Setup
+
+<Tabs items={['Gmail', 'Outlook', 'SendGrid', 'Custom SMTP']}>
+  <Tab value="Gmail">
+    **Gmail Configuration:**
+    
+    1. **Enable 2-Factor Authentication** at [Google Account Security](https://myaccount.google.com/security)
+    2. **Generate App Password** at [App Passwords](https://myaccount.google.com/apppasswords)
+    3. **Configure in DeployStack:**
+    
+    ```
+    SMTP Host: smtp.gmail.com
+    SMTP Port: 587
+    Username: your-email@gmail.com
+    Password: [16-character app password]
+    Use SSL/TLS: Yes
+    ```
+    
+    <Callout type="warn">
+      Use the app password, not your regular Gmail password.
+    </Callout>
+  </Tab>
+  
+  <Tab value="Outlook">
+    **Outlook/Office 365 Configuration:**
+    
+    ```
+    SMTP Host: smtp-mail.outlook.com (or smtp.office365.com)
+    SMTP Port: 587
+    Username: your-email@outlook.com
+    Password: [your password or app password]
+    Use SSL/TLS: Yes
+    ```
+  </Tab>
+  
+  <Tab value="SendGrid">
+    **SendGrid Configuration:**
+    
+    1. **Create API Key** in SendGrid dashboard
+    2. **Configure in DeployStack:**
+    
+    ```
+    SMTP Host: smtp.sendgrid.net
+    SMTP Port: 587
+    Username: apikey
+    Password: [your SendGrid API key]
+    Use SSL/TLS: Yes
+    ```
+    
+    <Callout type="info">
+      The username is literally "apikey" for SendGrid.
+    </Callout>
+  </Tab>
+  
+  <Tab value="Custom SMTP">
+    **Other Providers:**
+    
+    **Mailgun:**
+    ```
+    SMTP Host: smtp.mailgun.org
+    SMTP Port: 587
+    Username: [Mailgun SMTP username]
+    Password: [Mailgun SMTP password]
+    Use SSL/TLS: Yes
+    ```
+    
+    **Amazon SES:**
+    ```
+    SMTP Host: email-smtp.[region].amazonaws.com
+    SMTP Port: 587
+    Username: [SES SMTP username]
+    Password: [SES SMTP password]
+    Use SSL/TLS: Yes
+    ```
+  </Tab>
+</Tabs>
+
+### Testing Email Configuration
+
+After configuring SMTP settings:
+
+1. **Save Configuration** - Click "Save" to store your SMTP settings
+2. **Test Email Sending** - Use the "Send Test Email" button if available
+3. **Check Email Delivery** - Verify the test email arrives (check spam folder)
+4. **Enable Email Sending** - Set "Send Mail" to `Yes` in Global Settings
+
+## Setup Workflow
+
+Follow this recommended setup workflow for new DeployStack instances:
+
+<Steps>
+  <Step>
+    **Initial Access**
+    
+    - Complete the initial setup wizard
+    - Create your admin account
+    - Log in to the platform
+  </Step>
+  
+  <Step>
+    **Configure Global Settings**
+    
+    - Set the correct Frontend URL for your domain
+    - Configure login and registration preferences
+    - Disable API documentation for production
+  </Step>
+  
+  <Step>
+    **Set Up Email (Recommended)**
+    
+    - Configure SMTP settings for your email provider
+    - Test email delivery
+    - Enable email sending in Global Settings
+  </Step>
+  
+  <Step>
+    **Verify Configuration**
+    
+    - Test user registration (if enabled)
+    - Test password reset functionality
+    - Verify email notifications work
+  </Step>
+  
+  <Step>
+    **Create Users and Teams**
+    
+    - Invite team members
+    - Set up user roles and permissions
+    - Configure team workspaces
+  </Step>
+</Steps>
+
+## Security Considerations
+
+### Production Security
+
+- **Disable API Documentation** (`Enable API Documentation: No`) in production
+- **Use HTTPS** for Frontend URL in production environments
+- **Restrict Registration** (`Enable Email Registration: No`) for private deployments
+- **Use Strong SMTP Passwords** and enable 2FA on email accounts
+
+### Email Security
+
+- **Use App Passwords** for Gmail and Outlook when 2FA is enabled
+- **Enable TLS/SSL** for SMTP connections
+- **Monitor Email Activity** through your email provider's dashboard
+- **Set Up Domain Authentication** (SPF, DKIM, DMARC) for better delivery
+
+## Troubleshooting
+
+### Common Setup Issues
+
+#### Cannot Access Settings
+
+**Problem**: Settings page not accessible or returns errors
+
+**Solutions**:
+- Ensure you're logged in as an administrator
+- Check that your user has the `global_admin` role
+- Verify the backend service is running properly
+
+#### Email Not Working
+
+**Problem**: SMTP configuration fails or emails not delivered
+
+**Solutions**:
+- **Check credentials**: Verify username and password are correct
+- **Test connectivity**: Ensure your server can reach SMTP ports (587, 465)
+- **Check spam folders**: Emails might be marked as spam
+- **Verify provider settings**: Confirm SMTP host and port are correct
+
+#### Frontend URL Issues
+
+**Problem**: Redirects or links point to wrong URLs
+
+**Solutions**:
+- **Update Frontend URL**: Set the correct domain in Global Settings
+- **Check environment variables**: Ensure Docker containers have correct URLs
+- **Restart services**: Restart after changing URL settings
+
+### Getting Help
+
+If you encounter issues during setup:
+
+- **Check logs**: Review Docker container logs for error messages
+- **Documentation**: Consult our [troubleshooting guide](/deploystack/troubleshooting)
+- **Community**: Join our [Discord](https://discord.gg/UjFWwByB) for support
+- **GitHub**: Report issues on our [GitHub repository](https://github.com/deploystackio/deploystack/issues)
+
+## Advanced Configuration
+
+### Environment-Specific Settings
+
+Configure different settings for different environments:
+
+**Development:**
+- Enable API documentation for testing
+- Use localhost URLs
+- Optional email configuration
+
+**Staging:**
+- Mirror production settings
+- Use staging domain URLs
+- Enable email for testing
+
+**Production:**
+- Disable API documentation
+- Use production domain URLs
+- Enable all email functionality
+- Restrict registration if needed
+
+### Backup Configuration
+
+Your platform settings are stored in the database. Ensure you:
+
+- **Backup the database** regularly (included in persistent volume)
+- **Document custom settings** for disaster recovery
+- **Test restore procedures** in non-production environments
+
+---
+
+**Next Steps**: After completing platform setup, configure [user roles and permissions](/deploystack/roles) and set up your first [team workspaces](/deploystack/teams).
diff --git a/docs/deploystack/self-hosted/upgrade-guide.mdx b/docs/deploystack/self-hosted/upgrade-guide.mdx
new file mode 100644
index 0000000..223930d
--- /dev/null
+++ b/docs/deploystack/self-hosted/upgrade-guide.mdx
@@ -0,0 +1,396 @@
+---
+title: Upgrade Guide
+description: Keep your self-hosted DeployStack instance up-to-date with the latest features and security patches.
+sidebar: Upgrade Guide
+icon: ArrowUp
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Steps, Step } from 'fumadocs-ui/components/steps';
+
+# Upgrade Guide
+
+Keep your self-hosted DeployStack instance secure and up-to-date with the latest features, bug fixes, and security patches.
+
+## General Guidelines
+
+<Callout type="warn">
+  **Always backup your data before starting the upgrade process.** This ensures you can restore your instance if anything goes wrong during the upgrade.
+</Callout>
+
+### Backup Your Data
+
+Before upgrading, create a complete backup of your DeployStack data:
+
+```bash
+# Create backup directory with timestamp
+mkdir -p backups/$(date +%Y%m%d_%H%M%S)
+
+# Backup Docker volume
+docker run --rm \
+  -v deploystack_backend_persistent:/data \
+  -v $(pwd)/backups/$(date +%Y%m%d_%H%M%S):/backup \
+  alpine tar czf /backup/backend_persistent.tar.gz -C /data .
+
+# Backup your configuration
+cp .env backups/$(date +%Y%m%d_%H%M%S)/
+cp docker-compose.yml backups/$(date +%Y%m%d_%H%M%S)/
+```
+
+### Restore from Backup
+
+If you need to restore from a backup:
+
+```bash
+# Stop services
+docker-compose down
+
+# Remove existing volume (CAUTION: This will delete current data)
+docker volume rm deploystack_backend_persistent
+
+# Restore from backup
+docker run --rm \
+  -v deploystack_backend_persistent:/data \
+  -v $(pwd)/backups/BACKUP_DATE:/backup \
+  alpine tar xzf /backup/backend_persistent.tar.gz -C /data
+
+# Restore configuration
+cp backups/BACKUP_DATE/.env .
+cp backups/BACKUP_DATE/docker-compose.yml .
+
+# Start services
+docker-compose up -d
+```
+
+## Standard Upgrade Process
+
+For most upgrades, follow this simple process:
+
+<Steps>
+  <Step>
+    **Stop DeployStack Services**
+    
+    ```bash
+    docker-compose down
+    ```
+  </Step>
+  
+  <Step>
+    **Pull Latest Images**
+    
+    ```bash
+    docker-compose pull
+    ```
+    
+    This downloads the latest versions of both frontend and backend images.
+  </Step>
+  
+  <Step>
+    **Start Updated Services**
+    
+    ```bash
+    docker-compose up -d
+    ```
+  </Step>
+  
+  <Step>
+    **Verify Upgrade**
+    
+    Check that services are running properly:
+    
+    ```bash
+    # Check service status
+    docker-compose ps
+    
+    # Check logs for any errors
+    docker-compose logs
+    
+    # Access the web interface to verify functionality
+    ```
+  </Step>
+</Steps>
+
+## Upgrading to Specific Versions
+
+To upgrade to a specific version instead of the latest:
+
+### Method 1: Update Docker Compose File
+
+1. **Edit your `docker-compose.yml`**:
+
+```yaml
+services:
+  backend:
+    image: deploystack/backend:v1.2.0  # Specify version
+    # ... rest of configuration
+    
+  frontend:
+    image: deploystack/frontend:v1.2.0  # Specify version
+    # ... rest of configuration
+```
+
+2. **Apply the changes**:
+
+```bash
+docker-compose down
+docker-compose up -d
+```
+
+### Method 2: Use Environment Variables
+
+1. **Add version to your `.env` file**:
+
+```bash
+# Add to .env
+DEPLOYSTACK_VERSION=v1.2.0
+```
+
+2. **Update docker-compose.yml to use the variable**:
+
+```yaml
+services:
+  backend:
+    image: deploystack/backend:${DEPLOYSTACK_VERSION:-latest}
+    # ... rest of configuration
+    
+  frontend:
+    image: deploystack/frontend:${DEPLOYSTACK_VERSION:-latest}
+    # ... rest of configuration
+```
+
+## Version-Specific Upgrade Notes
+
+### v1.0.0 and Later
+
+Starting from v1.0.0, DeployStack follows semantic versioning and includes automatic database migrations.
+
+<Callout type="info">
+  No manual intervention required for standard upgrades. The application handles database migrations automatically on startup.
+</Callout>
+
+### Pre-v1.0.0 Versions
+
+For versions before v1.0.0, some manual steps may be required. Check the specific release notes for your version.
+
+## Upgrading Across Multiple Versions
+
+<Callout type="warn">
+  When upgrading across multiple major versions (e.g., from v0.8.x to v1.2.x), upgrade sequentially through each major version to ensure proper data migration.
+</Callout>
+
+### Sequential Upgrade Process
+
+1. **Identify your current version**:
+
+```bash
+# Check current version in logs
+docker-compose logs backend | grep -i version
+
+# Or check the web interface footer
+```
+
+2. **Plan your upgrade path**:
+   - v0.8.x → v0.9.x → v1.0.x → v1.1.x → v1.2.x
+
+3. **Upgrade step by step**:
+
+```bash
+# Example: Upgrading from v0.8.5 to v1.2.0
+
+# Step 1: Upgrade to v0.9.0
+docker-compose down
+# Update images to v0.9.0 in docker-compose.yml
+docker-compose up -d
+# Verify functionality
+
+# Step 2: Upgrade to v1.0.0
+docker-compose down
+# Update images to v1.0.0
+docker-compose up -d
+# Verify functionality
+
+# Continue until reaching target version
+```
+
+## Configuration Updates
+
+Some upgrades may require configuration changes:
+
+### Environment Variables
+
+Check release notes for new or changed environment variables:
+
+```bash
+# Download latest .env.example
+curl -o .env.example https://raw.githubusercontent.com/deploystackio/deploystack/main/.env.example
+
+# Compare with your current .env
+diff .env .env.example
+```
+
+### Docker Compose Changes
+
+Compare your docker-compose.yml with the latest version:
+
+```bash
+# Download latest docker-compose.yml
+curl -o docker-compose.yml.new https://raw.githubusercontent.com/deploystackio/deploystack/main/docker-compose.yml
+
+# Compare files
+diff docker-compose.yml docker-compose.yml.new
+```
+
+## Rollback Procedure
+
+If an upgrade fails or causes issues:
+
+<Steps>
+  <Step>
+    **Stop Current Services**
+    
+    ```bash
+    docker-compose down
+    ```
+  </Step>
+  
+  <Step>
+    **Restore Previous Configuration**
+    
+    ```bash
+    # Restore from backup
+    cp backups/BACKUP_DATE/.env .
+    cp backups/BACKUP_DATE/docker-compose.yml .
+    ```
+  </Step>
+  
+  <Step>
+    **Restore Data (if needed)**
+    
+    ```bash
+    # Only if data corruption occurred
+    docker volume rm deploystack_backend_persistent
+    
+    # Restore volume from backup
+    docker run --rm \
+      -v deploystack_backend_persistent:/data \
+      -v $(pwd)/backups/BACKUP_DATE:/backup \
+      alpine tar xzf /backup/backend_persistent.tar.gz -C /data
+    ```
+  </Step>
+  
+  <Step>
+    **Start Previous Version**
+    
+    ```bash
+    docker-compose up -d
+    ```
+  </Step>
+</Steps>
+
+## Automated Upgrade Scripts
+
+For regular maintenance, you can create an automated upgrade script:
+
+```bash
+#!/bin/bash
+# upgrade-deploystack.sh
+
+set -e
+
+echo "Starting DeployStack upgrade..."
+
+# Create backup
+echo "Creating backup..."
+BACKUP_DIR="backups/$(date +%Y%m%d_%H%M%S)"
+mkdir -p "$BACKUP_DIR"
+
+# Backup volume
+docker run --rm \
+  -v deploystack_backend_persistent:/data \
+  -v "$(pwd)/$BACKUP_DIR":/backup \
+  alpine tar czf /backup/backend_persistent.tar.gz -C /data .
+
+# Backup configuration
+cp .env "$BACKUP_DIR/"
+cp docker-compose.yml "$BACKUP_DIR/"
+
+echo "Backup created in $BACKUP_DIR"
+
+# Perform upgrade
+echo "Stopping services..."
+docker-compose down
+
+echo "Pulling latest images..."
+docker-compose pull
+
+echo "Starting updated services..."
+docker-compose up -d
+
+echo "Waiting for services to start..."
+sleep 30
+
+# Verify upgrade
+if docker-compose ps | grep -q "Up"; then
+    echo "✅ Upgrade completed successfully!"
+    echo "DeployStack is available at: http://localhost:8080"
+else
+    echo "❌ Upgrade failed. Check logs with: docker-compose logs"
+    exit 1
+fi
+```
+
+Make it executable and run:
+
+```bash
+chmod +x upgrade-deploystack.sh
+./upgrade-deploystack.sh
+```
+
+## Monitoring Upgrades
+
+### Health Checks
+
+After upgrading, verify system health:
+
+```bash
+# Check service health
+curl -f http://localhost:3000/ || echo "Backend health check failed"
+curl -f http://localhost:8080 || echo "Frontend health check failed"
+
+# Check logs for errors
+docker-compose logs --tail=50 | grep -i error
+```
+
+### Performance Monitoring
+
+Monitor resource usage after upgrades:
+
+```bash
+# Monitor container resources
+docker stats --no-stream
+
+# Check disk usage
+df -h
+docker system df
+```
+
+## Getting Help
+
+If you encounter issues during upgrades:
+
+1. **Check Release Notes**: Review the specific version's release notes for known issues
+2. **Search Issues**: Look for similar problems in [GitHub Issues](https://github.com/deploystackio/deploystack/issues)
+3. **Community Support**: Ask for help in our [Discord](https://discord.gg/UjFWwByB)
+4. **Create Issue**: Report bugs with detailed logs and system information
+
+## Best Practices
+
+- **Regular Updates**: Update monthly or when security patches are released
+- **Test Environment**: Test upgrades in a staging environment first
+- **Maintenance Windows**: Schedule upgrades during low-usage periods
+- **Documentation**: Keep notes of any custom configurations or modifications
+- **Monitoring**: Set up alerts for service failures or performance issues
+
+---
+
+**Stay Updated**: Subscribe to our [releases](https://github.com/deploystackio/deploystack/releases) to get notified of new versions and security updates.
diff --git a/docs/deploystack/teams.mdx b/docs/deploystack/teams.mdx
index b4a67b1..58ae02b 100644
--- a/docs/deploystack/teams.mdx
+++ b/docs/deploystack/teams.mdx
@@ -268,6 +268,12 @@ When you delete a team, you lose **everything** associated with it:
 
 Your team permissions determine what actions you can perform:
 
+### Global Administrator Access
+
+Global administrators have enhanced visibility into all teams across the system:
+- Can view all teams created by any user through the admin user management interface
+- Have read-only access to team information for administrative oversight and support purposes
+
 ### Global vs Team Permissions
 
 - **Global Permissions**: Control system-wide access (user management, global settings)
diff --git a/docs/index.mdx b/docs/index.mdx
index 25f75f8..e51ec17 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -17,7 +17,7 @@ DeployStack simplifies MCP server deployment through three key steps: browse our
 ### Core Concepts
 
 <Cards>
-<Card icon={<Rocket className="text-purple-500" />} title="Quick-Start Guide" href="/deploystack">
+<Card icon={<Rocket className="text-purple-500" />} title="Quick-Start Guide" href="/deploystack/quick-start">
 Deploy Model Context Protocol (MCP) servers to selected cloud provider with a single click, eliminating the need for complex setup.
 </Card>
 <Card icon={<CloudUpload className="text-purple-500" />} title="MCP Server Catalog" href="https://deploystack.io/mcp">