chore: add VERSION v0.4.2

Merge pull request #164 from community-scripts/fix/show_modal_during_operation
fix: add loading modal for container operations
2025-10-16 13:53:47 +00:00 · 2025-10-16 15:52:06 +02:00 · 2025-10-16 15:50:33 +02:00 · 2025-10-16 15:46:41 +02:00 · 2025-10-16 15:45:14 +02:00 · 2025-10-16 15:44:36 +02:00
39 changed files with 4743 additions and 850 deletions
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -1,6 +1,6 @@
 # Template for release drafts
-name-template: 'v$NEXT_MINOR_VERSION'   # You can switch to $NEXT_MINOR_VERSION or $NEXT_MAJOR_VERSION
-tag-template: 'v$NEXT_MINOR_VERSION'
+name-template: 'v$NEXT_PATCH_VERSION'   # You can switch to $NEXT_MINOR_VERSION or $NEXT_MAJOR_VERSION
+tag-template: 'v$NEXT_PATCH_VERSION'

 # Exclude PRs with this label from release notes
 exclude-labels:
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,9 @@
 db.sqlite
 data/settings.db

+# ssh keys (sensitive)
+data/ssh-keys/
+
 # next.js
 /.next/
 /out/
--- a/README.md
+++ b/README.md
@@ -210,6 +210,249 @@ The application uses SQLite for storing server configurations:
 - **Backup**: Copy `data/settings.db` to backup your server configurations
 - **Reset**: Delete `data/settings.db` to reset all server configurations

+## 📖 Feature Guide
+
+This section provides detailed information about the application's key features and how to use them effectively.
+
+### Server Settings
+
+Manage your Proxmox VE servers and configure connection settings.
+
+**Adding PVE Servers:**
+- **Server Name**: A friendly name to identify your server
+- **IP Address**: The IP address or hostname of your PVE server
+- **Username**: PVE user account (usually root or a dedicated user)
+- **SSH Port**: Default is 22, change if your server uses a different port
+
+**Authentication Types:**
+- **Password**: Use username and password authentication
+- **SSH Key**: Use SSH key pair for secure authentication
+- **Both**: Try SSH key first, fallback to password if needed
+
+**Server Color Coding:**
+Assign colors to servers for visual distinction throughout the application. This helps identify which server you're working with when managing scripts. This needs to be enabled in the General Settings.
+
+### General Settings
+
+Configure application preferences and behavior.
+
+**Save Filters:**
+When enabled, your script filter preferences (search terms, categories, sorting) will be automatically saved and restored when you return to the application:
+- Search queries are preserved
+- Selected script types are remembered
+- Sort preferences are maintained
+- Category selections are saved
+
+**Server Color Coding:**
+Enable visual color coding for servers throughout the application. This makes it easier to identify which server you're working with.
+
+**GitHub Integration:**
+Add a GitHub Personal Access Token to increase API rate limits and improve performance:
+- Bypasses GitHub's rate limiting for unauthenticated requests
+- Improves script loading and syncing performance
+- Token is stored securely and only used for API calls
+
+**Authentication:**
+Secure your application with username and password authentication:
+- Set up username and password for app access
+- Enable/disable authentication as needed
+- Credentials are stored securely
+
+### Sync Button
+
+Synchronize script metadata from the ProxmoxVE GitHub repository.
+
+**What Does Syncing Do?**
+- **Updates Script Metadata**: Downloads the latest script information (JSON files)
+- **Refreshes Available Scripts**: Updates the list of scripts you can download
+- **Updates Categories**: Refreshes script categories and organization
+- **Checks for Updates**: Identifies which downloaded scripts have newer versions
+
+**Important Notes:**
+- **Metadata Only**: Syncing only updates script information, not the actual script files
+- **No Downloads**: Script files are downloaded separately when you choose to install them
+- **Last Sync Time**: Shows when the last successful sync occurred
+- **Rate Limits**: GitHub API limits may apply without a personal access token
+
+**When to Sync:**
+- When you want to see the latest available scripts
+- To check for updates to your downloaded scripts
+- If you notice scripts are missing or outdated
+- After the ProxmoxVE repository has been updated
+
+### Available Scripts
+
+Browse and discover scripts from the ProxmoxVE repository.
+
+**Browsing Scripts:**
+- **Category Sidebar**: Filter scripts by category (Storage, Network, Security, etc.)
+- **Search**: Find scripts by name or description
+- **View Modes**: Switch between card and list view
+- **Sorting**: Sort by name or creation date
+
+**Filtering Options:**
+- **Script Types**: Filter by CT (Container) or other script types
+- **Update Status**: Show only scripts with available updates
+- **Search Query**: Search within script names and descriptions
+- **Categories**: Filter by specific script categories
+
+**Script Actions:**
+- **View Details**: Click on a script to see full information and documentation
+- **Download**: Download script files to your local system
+- **Install**: Run scripts directly on your PVE servers
+- **Preview**: View script content before downloading
+
+### Downloaded Scripts
+
+Manage scripts that have been downloaded to your local system.
+
+**What Are Downloaded Scripts?**
+These are scripts that you've downloaded from the repository and are stored locally on your system:
+- Script files are stored in your local scripts directory
+- You can run these scripts on your PVE servers
+- Scripts can be updated when newer versions are available
+
+**Update Detection:**
+The system automatically checks if newer versions of your downloaded scripts are available:
+- Scripts with updates available are marked with an update indicator
+- You can filter to show only scripts with available updates
+- Update detection happens when you sync with the repository
+
+**Managing Downloaded Scripts:**
+- **Update Scripts**: Download the latest version of a script
+- **View Details**: See script information and documentation
+- **Install/Run**: Execute scripts on your PVE servers
+- **Filter & Search**: Use the same filtering options as Available Scripts
+
+### Installed Scripts
+
+Track and manage scripts that are installed on your PVE servers.
+
+**Auto-Detection (Primary Feature):**
+The system can automatically detect LXC containers that have community-script tags on your PVE servers:
+- **Automatic Discovery**: Scans your PVE servers for containers with community-script tags
+- **Container Detection**: Identifies LXC containers running Proxmox helper scripts
+- **Server Association**: Links detected scripts to the specific PVE server
+- **Bulk Import**: Automatically creates records for all detected scripts
+
+**How Auto-Detection Works:**
+1. Connects to your configured PVE servers
+2. Scans LXC container configurations
+3. Looks for containers with community-script tags
+4. Creates installed script records automatically
+
+**Manual Script Management:**
+- **Add Scripts Manually**: Create records for scripts not auto-detected
+- **Edit Script Details**: Update script names and container IDs
+- **Delete Scripts**: Remove scripts from tracking
+- **Bulk Operations**: Clean up old or invalid script records
+
+**Script Tracking Features:**
+- **Installation Status**: Track success, failure, or in-progress installations
+- **Server Association**: Know which server each script is installed on
+- **Container ID**: Link scripts to specific LXC containers
+- **Web UI Access**: Track and access Web UI IP addresses and ports
+- **Execution Logs**: View output and logs from script installations
+- **Filtering**: Filter by server, status, or search terms
+
+**Managing Installed Scripts:**
+- **View All Scripts**: See all tracked scripts across all servers
+- **Filter by Server**: Show scripts for a specific PVE server
+- **Filter by Status**: Show successful, failed, or in-progress installations
+- **Sort Options**: Sort by name, container ID, server, status, or date
+- **Update Scripts**: Re-run or update existing script installations
+
+**Web UI Access:**
+Automatically detect and access Web UI interfaces for your installed scripts:
+- **Auto-Detection**: Automatically detects Web UI URLs from script installation output
+- **IP & Port Tracking**: Stores and displays Web UI IP addresses and ports
+- **One-Click Access**: Click IP:port to open Web UI in new tab
+- **Manual Detection**: Re-detect IP using `hostname -I` inside container
+- **Port Detection**: Uses script metadata to get correct port (e.g., actualbudget:5006)
+- **Editable Fields**: Manually edit IP and port values as needed
+
+**Actions Dropdown:**
+Clean interface with all actions organized in a dropdown menu:
+- **Edit Button**: Always visible for quick script editing
+- **Actions Dropdown**: Contains Update, Shell, Open UI, Start/Stop, Destroy, Delete
+- **Smart Visibility**: Dropdown only appears when actions are available
+- **Auto-Close**: Dropdown closes after clicking any action
+- **Disabled States**: Actions are disabled when container is stopped
+
+**Container Control:**
+Directly control LXC containers from the installed scripts page via SSH:
+- **Start/Stop Button**: Control container state with `pct start/stop <ID>`
+- **Container Status**: Real-time status indicator (running/stopped/unknown)
+- **Destroy Button**: Permanently remove LXC container with `pct destroy <ID>`
+- **Confirmation Modals**: Simple OK/Cancel for start/stop, type container ID to confirm destroy
+- **SSH Execution**: All commands executed remotely via configured SSH connections
+
+**Safety Features:**
+- Start/Stop actions require simple confirmation
+- Destroy action requires typing the container ID to confirm
+- All actions show loading states and error handling
+- Only works with SSH scripts that have valid container IDs
+
+### Update System
+
+Keep your PVE Scripts Management application up to date with the latest features and improvements.
+
+**What Does Updating Do?**
+- **Downloads Latest Version**: Fetches the newest release from the GitHub repository
+- **Updates Application Files**: Replaces current files with the latest version
+- **Installs Dependencies**: Updates Node.js packages and dependencies
+- **Rebuilds Application**: Compiles the application with latest changes
+- **Restarts Server**: Automatically restarts the application server
+
+**How to Update:**
+
+**Automatic Update (Recommended):**
+- Click the "Update Now" button when an update is available
+- The system will handle everything automatically
+- You'll see a progress overlay with update logs
+- The page will reload automatically when complete
+
+**Manual Update (Advanced):**
+If automatic update fails, you can update manually:
+```bash
+# Navigate to the application directory
+cd $PVESCRIPTLOCAL_DIR
+
+# Pull latest changes
+git pull
+
+# Install dependencies
+npm install
+
+# Build the application
+npm run build
+
+# Start the application
+npm start
+```
+
+**Update Process:**
+1. **Check for Updates**: System automatically checks GitHub for new releases
+2. **Download Update**: Downloads the latest release files
+3. **Backup Current Version**: Creates backup of current installation
+4. **Install New Version**: Replaces files and updates dependencies
+5. **Build Application**: Compiles the updated code
+6. **Restart Server**: Stops old server and starts new version
+7. **Reload Page**: Automatically refreshes the browser
+
+**Release Notes:**
+Click the external link icon next to the update button to view detailed release notes on GitHub:
+- See what's new in each version
+- Read about bug fixes and improvements
+- Check for any breaking changes
+- View installation requirements
+
+**Important Notes:**
+- **Backup**: Your data and settings are preserved during updates
+- **Downtime**: Brief downtime occurs during the update process
+- **Compatibility**: Updates maintain backward compatibility with your data
+- **Rollback**: If issues occur, you can manually revert to previous version
+
 ## 📁 Project Structure

 ```
--- a/2
+++ b/2
@@ -1 +1 @@
-0.3.0
+0.4.2
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -22,9 +22,11 @@
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-slot": "^1.2.3",
    "@t3-oss/env-nextjs": "^0.13.8",
-    "@tanstack/react-query": "^5.87.4",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/react-query": "^5.90.3",
    "@trpc/client": "^11.6.0",
    "@trpc/react-query": "^11.6.0",
    "@trpc/server": "^11.6.0",
@@ -39,12 +41,14 @@
    "clsx": "^2.1.1",
    "jsonwebtoken": "^9.0.2",
    "lucide-react": "^0.545.0",
-    "next": "^15.5.3",
+    "next": "^15.5.5",
    "node-pty": "^1.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
    "react-syntax-highlighter": "^15.6.6",
    "refractor": "^5.0.0",
+    "remark-gfm": "^4.0.1",
    "server-only": "^0.0.1",
    "strip-ansi": "^7.1.2",
    "superjson": "^2.2.1",
@@ -61,21 +65,21 @@
    "@types/bcryptjs": "^3.0.0",
    "@types/better-sqlite3": "^7.6.8",
    "@types/jsonwebtoken": "^9.0.10",
-    "@types/node": "^24.7.1",
+    "@types/node": "^24.7.2",
    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react-dom": "^19.2.2",
    "@vitejs/plugin-react": "^5.0.2",
    "@vitest/coverage-v8": "^3.2.4",
    "@vitest/ui": "^3.2.4",
    "eslint": "^9.23.0",
-    "eslint-config-next": "^15.5.4",
+    "eslint-config-next": "^15.5.5",
    "jsdom": "^27.0.0",
    "postcss": "^8.5.3",
    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.7.0",
    "tailwindcss": "^4.1.14",
    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.27.0",
+    "typescript-eslint": "^8.46.1",
    "vitest": "^3.2.4"
  },
  "ct3aMetadata": {
--- a/scripts/json/openwrt.json
+++ b/scripts/json/openwrt.json
@@ -1,41 +0,0 @@
-{
-  "name": "OpenWrt",
-  "slug": "openwrt",
-  "categories": [
-    4,
-    2
-  ],
-  "date_created": "2024-05-02",
-  "type": "vm",
-  "updateable": true,
-  "privileged": false,
-  "interface_port": null,
-  "documentation": "https://openwrt.org/docs/start",
-  "website": "https://openwrt.org/",
-  "logo": "https://cdn.jsdelivr.net/gh/selfhst/icons/webp/openwrt.webp",
-  "config_path": "",
-  "description": "OpenWrt is a powerful open-source firmware that can transform a wide range of networking devices into highly customizable and feature-rich routers, providing users with greater control and flexibility over their network infrastructure.",
-  "install_methods": [
-    {
-      "type": "default",
-      "script": "vm/openwrt.sh",
-      "resources": {
-        "cpu": 1,
-        "ram": 256,
-        "hdd": 0.5,
-        "os": null,
-        "version": null
-      }
-    }
-  ],
-  "default_credentials": {
-    "username": null,
-    "password": null
-  },
-  "notes": [
-    {
-      "text": "If you use VLANs (default LAN is set to VLAN 999), make sure the Proxmox Linux Bridge is configured as VLAN-aware, otherwise the VM may fail to start.",
-      "type": "info"
-    }
-  ]
-}
--- a/scripts/json/petio.json
+++ b/scripts/json/petio.json
@@ -1,35 +0,0 @@
-{
-  "name": "Petio",
-  "slug": "petio",
-  "categories": [
-    13
-  ],
-  "date_created": "2024-06-12",
-  "type": "ct",
-  "updateable": true,
-  "privileged": false,
-  "interface_port": 7777,
-  "documentation": "https://docs.petio.tv/",
-  "website": "https://petio.tv/",
-  "logo": "https://cdn.jsdelivr.net/gh/selfhst/icons/webp/petio.webp",
-  "config_path": "",
-  "description": "Petio is a third party companion app available to Plex server owners to allow their users to request, review and discover content.",
-  "install_methods": [
-    {
-      "type": "default",
-      "script": "ct/petio.sh",
-      "resources": {
-        "cpu": 2,
-        "ram": 1024,
-        "hdd": 4,
-        "os": "ubuntu",
-        "version": "20.04"
-      }
-    }
-  ],
-  "default_credentials": {
-    "username": null,
-    "password": null
-  },
-  "notes": []
-}
--- a/server.js
+++ b/server.js
@@ -51,6 +51,7 @@ const handle = app.getRequestHandler();
 * @property {string} [mode]
 * @property {ServerInfo} [server]
 * @property {boolean} [isUpdate]
+ * @property {boolean} [isShell]
 * @property {string} [containerId]
 */

@@ -130,6 +131,55 @@ class ScriptExecutionHandler {
    return null;
  }

+  /**
+   * Parse Web UI URL from terminal output
+   * @param {string} output - Terminal output to parse
+   * @returns {{ip: string, port: number}|null} - Object with ip and port if found, null otherwise
+   */
+  parseWebUIUrl(output) {
+    // First, strip ANSI color codes to make pattern matching more reliable
+    const cleanOutput = output.replace(/\x1b\[[0-9;]*m/g, '');
+    
+    // Look for URL patterns with any valid IP address (private or public)
+    const patterns = [
+      // HTTP/HTTPS URLs with IP and port
+      /https?:\/\/(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}):(\d+)/gi,
+      // URLs without explicit port (assume default ports)
+      /https?:\/\/(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?:\/|$|\s)/gi,
+      // URLs with trailing slash and port
+      /https?:\/\/(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}):(\d+)\//gi,
+      // URLs with just IP and port (no protocol)
+      /(?:^|\s)(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}):(\d+)(?:\s|$)/gi,
+      // URLs with just IP (no protocol, no port)
+      /(?:^|\s)(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?:\s|$)/gi,
+    ];
+
+    // Try patterns on both original and cleaned output
+    const outputsToTry = [output, cleanOutput];
+    
+    for (const testOutput of outputsToTry) {
+      for (const pattern of patterns) {
+        const matches = [...testOutput.matchAll(pattern)];
+        for (const match of matches) {
+          if (match[1]) {
+            const ip = match[1];
+            const port = match[2] || (match[0].startsWith('https') ? '443' : '80');
+            
+            // Validate IP address format
+            if (ip.match(/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/)) {
+              return {
+                ip: ip,
+                port: parseInt(port, 10)
+              };
+            }
+          }
+        }
+      }
+    }
+    
+    return null;
+  }
+
  /**
   * Create installation record
   * @param {string} scriptName - Name of the script
@@ -207,13 +257,15 @@ class ScriptExecutionHandler {
   * @param {WebSocketMessage} message
   */
  async handleMessage(ws, message) {
-    const { action, scriptPath, executionId, input, mode, server, isUpdate, containerId } = message;
+    const { action, scriptPath, executionId, input, mode, server, isUpdate, isShell, containerId } = message;

    switch (action) {
      case 'start':
        if (scriptPath && executionId) {
          if (isUpdate && containerId) {
            await this.startUpdateExecution(ws, containerId, executionId, mode, server);
+          } else if (isShell && containerId) {
+            await this.startShellExecution(ws, containerId, executionId, mode, server);
          } else {
            await this.startScriptExecution(ws, scriptPath, executionId, mode, server);
          }
@@ -361,6 +413,18 @@ class ScriptExecutionHandler {
          this.updateInstallationRecord(installationId, { container_id: containerId });
        }
        
+        // Parse for Web UI URL
+        const webUIUrl = this.parseWebUIUrl(output);
+        if (webUIUrl && installationId) {
+          const { ip, port } = webUIUrl;
+          if (ip && port) {
+            this.updateInstallationRecord(installationId, { 
+              web_ui_ip: ip, 
+              web_ui_port: port 
+            });
+          }
+        }
+        
        this.sendMessage(ws, {
          type: 'output',
          data: output,
@@ -444,6 +508,18 @@ class ScriptExecutionHandler {
            this.updateInstallationRecord(installationId, { container_id: containerId });
          }
          
+          // Parse for Web UI URL
+          const webUIUrl = this.parseWebUIUrl(data);
+          if (webUIUrl && installationId) {
+            const { ip, port } = webUIUrl;
+            if (ip && port) {
+              this.updateInstallationRecord(installationId, { 
+                web_ui_ip: ip, 
+                web_ui_port: port 
+              });
+            }
+          }
+          
          // Handle data output
          this.sendMessage(ws, {
            type: 'output',
@@ -709,6 +785,145 @@ class ScriptExecutionHandler {
      });
    }
  }
+
+  /**
+   * Start shell execution
+   * @param {ExtendedWebSocket} ws
+   * @param {string} containerId
+   * @param {string} executionId
+   * @param {string} mode
+   * @param {ServerInfo|null} server
+   */
+  async startShellExecution(ws, containerId, executionId, mode = 'local', server = null) {
+    try {
+      
+      // Send start message
+      this.sendMessage(ws, {
+        type: 'start',
+        data: `Starting shell session for container ${containerId}...`,
+        timestamp: Date.now()
+      });
+
+      if (mode === 'ssh' && server) {
+        await this.startSSHShellExecution(ws, containerId, executionId, server);
+      } else {
+        await this.startLocalShellExecution(ws, containerId, executionId);
+      }
+
+    } catch (error) {
+      this.sendMessage(ws, {
+        type: 'error',
+        data: `Failed to start shell: ${error instanceof Error ? error.message : String(error)}`,
+        timestamp: Date.now()
+      });
+    }
+  }
+
+  /**
+   * Start local shell execution
+   * @param {ExtendedWebSocket} ws
+   * @param {string} containerId
+   * @param {string} executionId
+   */
+  async startLocalShellExecution(ws, containerId, executionId) {
+    const { spawn } = await import('node-pty');
+    
+    // Create a shell process that will run pct enter
+    const childProcess = spawn('bash', ['-c', `pct enter ${containerId}`], {
+      name: 'xterm-color',
+      cols: 80,
+      rows: 24,
+      cwd: process.cwd(),
+      env: process.env
+    });
+
+    // Store the execution
+    this.activeExecutions.set(executionId, { 
+      process: childProcess, 
+      ws
+    });
+
+    // Handle pty data
+    childProcess.onData((data) => {
+      this.sendMessage(ws, {
+        type: 'output',
+        data: data.toString(),
+        timestamp: Date.now()
+      });
+    });
+
+    // Note: No automatic command is sent - user can type commands interactively
+
+    // Handle process exit
+    childProcess.onExit((e) => {
+      this.sendMessage(ws, {
+        type: 'end',
+        data: `Shell session ended with exit code: ${e.exitCode}`,
+        timestamp: Date.now()
+      });
+      
+      this.activeExecutions.delete(executionId);
+    });
+  }
+
+  /**
+   * Start SSH shell execution
+   * @param {ExtendedWebSocket} ws
+   * @param {string} containerId
+   * @param {string} executionId
+   * @param {ServerInfo} server
+   */
+  async startSSHShellExecution(ws, containerId, executionId, server) {
+    const sshService = getSSHExecutionService();
+    
+    try {
+      const execution = await sshService.executeCommand(
+        server,
+        `pct enter ${containerId}`,
+        /** @param {string} data */
+        (data) => {
+          this.sendMessage(ws, {
+            type: 'output',
+            data: data,
+            timestamp: Date.now()
+          });
+        },
+        /** @param {string} error */
+        (error) => {
+          this.sendMessage(ws, {
+            type: 'error',
+            data: error,
+            timestamp: Date.now()
+          });
+        },
+        /** @param {number} code */
+        (code) => {
+          this.sendMessage(ws, {
+            type: 'end',
+            data: `Shell session ended with exit code: ${code}`,
+            timestamp: Date.now()
+          });
+          
+          this.activeExecutions.delete(executionId);
+        }
+      );
+
+      // Store the execution
+      this.activeExecutions.set(executionId, { 
+        process: /** @type {any} */ (execution).process, 
+        ws
+      });
+
+      // Note: No automatic command is sent - user can type commands interactively
+
+    } catch (error) {
+      this.sendMessage(ws, {
+        type: 'error',
+        data: `SSH shell execution failed: ${error instanceof Error ? error.message : String(error)}`,
+        timestamp: Date.now()
+      });
+    }
+  }
 }

 // TerminalHandler removed - not used by current application
--- a/src/app/_components/ContextualHelpIcon.tsx
+++ b/src/app/_components/ContextualHelpIcon.tsx
@@ -2,7 +2,6 @@

 import { useState } from 'react';
 import { HelpModal } from './HelpModal';
-import { Button } from './ui/button';
 import { HelpCircle } from 'lucide-react';

 interface ContextualHelpIconProps {
@@ -26,15 +25,13 @@ export function ContextualHelpIcon({

  return (
    <>
-      <Button
+      <div
        onClick={() => setIsOpen(true)}
-        variant="ghost"
-        size="icon"
-        className={`${sizeClasses} text-muted-foreground hover:text-foreground hover:bg-muted ${className}`}
+        className={`${sizeClasses} text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer inline-flex items-center justify-center rounded-md transition-colors ${className}`}
        title={tooltip}
      >
        <HelpCircle className="w-4 h-4" />
-      </Button>
+      </div>

      <HelpModal 
        isOpen={isOpen} 
--- a/src/app/_components/DownloadedScriptsTab.tsx
+++ b/src/app/_components/DownloadedScriptsTab.tsx
@@ -385,7 +385,7 @@ export function DownloadedScriptsTab({ onInstallScript }: DownloadedScriptsTabPr
    );
  }

-  if (!downloadedScripts || downloadedScripts.length === 0) {
+  if (!downloadedScripts?.length) {
    return (
      <div className="text-center py-12">
        <div className="text-muted-foreground">
--- a/src/app/_components/FilterBar.tsx
+++ b/src/app/_components/FilterBar.tsx
@@ -93,17 +93,6 @@ export function FilterBar({
        </div>
      )}

-      {/* Filter Persistence Status */}
-      {!isLoadingFilters && saveFiltersEnabled && (
-        <div className="mb-4 flex items-center justify-center py-1">
-          <div className="flex items-center space-x-2 text-xs text-green-600">
-            <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-            </svg>
-            <span>Filters are being saved automatically</span>
-          </div>
-        </div>
-      )}

      {/* Filter Header */}
      {!isLoadingFilters && (
@@ -391,18 +380,30 @@ export function FilterBar({

      {/* Filter Summary and Clear All */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
-        <div className="text-sm text-muted-foreground">
-          {filteredCount === totalScripts ? (
-            <span>Showing all {totalScripts} scripts</span>
-          ) : (
-            <span>
-              {filteredCount} of {totalScripts} scripts{" "}
-              {hasActiveFilters && (
-                <span className="font-medium text-blue-600">
-                  (filtered)
-                </span>
-              )}
-            </span>
+        <div className="flex items-center gap-4">
+          <div className="text-sm text-muted-foreground">
+            {filteredCount === totalScripts ? (
+              <span>Showing all {totalScripts} scripts</span>
+            ) : (
+              <span>
+                {filteredCount} of {totalScripts} scripts{" "}
+                {hasActiveFilters && (
+                  <span className="font-medium text-blue-600">
+                    (filtered)
+                  </span>
+                )}
+              </span>
+            )}
+          </div>
+          
+          {/* Filter Persistence Status */}
+          {!isLoadingFilters && saveFiltersEnabled && (
+            <div className="flex items-center space-x-1 text-xs text-green-600">
+              <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>
+              <span>Filters are being saved automatically</span>
+            </div>
          )}
        </div>

--- a/src/app/_components/Footer.tsx
+++ b/src/app/_components/Footer.tsx
@@ -12,10 +12,10 @@ export function Footer({ onOpenReleaseNotes }: FooterProps) {
  const { data: versionData } = api.version.getCurrentVersion.useQuery();

  return (
-    <footer className="sticky bottom-0 mt-auto border-t border-border bg-muted/30 py-6 backdrop-blur-sm">
+    <footer className="sticky bottom-0 mt-auto border-t border-border bg-muted/30 py-3 backdrop-blur-sm">
      <div className="container mx-auto px-4">
-        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-muted-foreground">
-          <div className="flex items-center gap-4">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
            <span>© 2024 PVE Scripts Local</span>
            {versionData?.success && versionData.version && (
              <Button
@@ -29,7 +29,7 @@ export function Footer({ onOpenReleaseNotes }: FooterProps) {
            )}
          </div>
          
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
            <Button
              variant="ghost"
              size="sm"
--- a/src/app/_components/HelpModal.tsx
+++ b/src/app/_components/HelpModal.tsx
@@ -55,8 +55,15 @@ export function HelpModal({ isOpen, onClose, initialSection = 'server-settings'
                <ul className="text-sm text-muted-foreground space-y-2">
                  <li>• <strong>Password:</strong> Use username and password authentication</li>
                  <li>• <strong>SSH Key:</strong> Use SSH key pair for secure authentication</li>
-                  <li>• <strong>Both:</strong> Try SSH key first, fallback to password if needed</li>
                </ul>
+                <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-950/20 rounded-md">
+                  <h5 className="font-medium text-blue-900 dark:text-blue-100 mb-2">SSH Key Features:</h5>
+                  <ul className="text-xs text-blue-800 dark:text-blue-200 space-y-1">
+                    <li>• <strong>Generate Key Pair:</strong> Create new SSH keys automatically</li>
+                    <li>• <strong>View Public Key:</strong> Copy public key for server setup</li>
+                    <li>• <strong>Persistent Storage:</strong> Keys are stored securely on disk</li>
+                  </ul>
+                </div>
              </div>

              <div className="p-4 border border-border rounded-lg">
@@ -319,6 +326,7 @@ export function HelpModal({ isOpen, onClose, initialSection = 'server-settings'
                  <li>• <strong>Installation Status:</strong> Track success, failure, or in-progress installations</li>
                  <li>• <strong>Server Association:</strong> Know which server each script is installed on</li>
                  <li>• <strong>Container ID:</strong> Link scripts to specific LXC containers</li>
+                  <li>• <strong>Web UI Access:</strong> Track and access Web UI IP addresses and ports</li>
                  <li>• <strong>Execution Logs:</strong> View output and logs from script installations</li>
                  <li>• <strong>Filtering:</strong> Filter by server, status, or search terms</li>
                </ul>
@@ -335,8 +343,47 @@ export function HelpModal({ isOpen, onClose, initialSection = 'server-settings'
                </ul>
              </div>

+              <div className="p-4 border border-border rounded-lg bg-blue-900/20 border-blue-700/50">
+                <h4 className="font-medium text-foreground mb-2">Web UI Access </h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Automatically detect and access Web UI interfaces for your installed scripts.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Auto-Detection:</strong> Automatically detects Web UI URLs from script installation output</li>
+                  <li>• <strong>IP & Port Tracking:</strong> Stores and displays Web UI IP addresses and ports</li>
+                  <li>• <strong>One-Click Access:</strong> Click IP:port to open Web UI in new tab</li>
+                  <li>• <strong>Manual Detection:</strong> Re-detect IP using <code>hostname -I</code> inside container</li>
+                  <li>• <strong>Port Detection:</strong> Uses script metadata to get correct port (e.g., actualbudget:5006)</li>
+                  <li>• <strong>Editable Fields:</strong> Manually edit IP and port values as needed</li>
+                </ul>
+                <div className="mt-3 p-3 bg-blue-900/30 rounded-lg border border-blue-700/30">
+                  <p className="text-sm font-medium text-blue-300">💡 How it works:</p>
+                  <ul className="text-sm text-muted-foreground mt-1 space-y-1">
+                    <li>• Scripts automatically detect URLs like <code>http://10.10.10.1:3000</code> during installation</li>
+                    <li>• Re-detect button runs <code>hostname -I</code> inside the container via SSH</li>
+                    <li>• Port defaults to 80, but uses script metadata when available</li>
+                    <li>• Web UI buttons are disabled when container is stopped</li>
+                  </ul>
+                </div>
+              </div>
+
              <div className="p-4 border border-border rounded-lg bg-accent/50 dark:bg-accent/20">
-                <h4 className="font-medium text-foreground mb-2">Container Control (NEW)</h4>
+                <h4 className="font-medium text-foreground mb-2">Actions Dropdown </h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Clean interface with all actions organized in a dropdown menu.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-2">
+                  <li>• <strong>Edit Button:</strong> Always visible for quick script editing</li>
+                  <li>• <strong>Actions Dropdown:</strong> Contains Update, Shell, Open UI, Start/Stop, Destroy, Delete</li>
+                  <li>• <strong>Smart Visibility:</strong> Dropdown only appears when actions are available</li>
+                  <li>• <strong>Color Coding:</strong> Start (green), Stop (red), Update (cyan), Shell (gray), Open UI (blue)</li>
+                  <li>• <strong>Auto-Close:</strong> Dropdown closes after clicking any action</li>
+                  <li>• <strong>Disabled States:</strong> Actions are disabled when container is stopped</li>
+                </ul>
+              </div>
+
+              <div className="p-4 border border-border rounded-lg bg-accent/50 dark:bg-accent/20">
+                <h4 className="font-medium text-foreground mb-2">Container Control</h4>
                <p className="text-sm text-muted-foreground mb-3">
                  Directly control LXC containers from the installed scripts page via SSH.
                </p>
--- a/src/app/_components/InstalledScriptsTab.tsx
+++ b/src/app/_components/InstalledScriptsTab.tsx
@@ -8,7 +8,15 @@ import { Button } from './ui/button';
 import { ScriptInstallationCard } from './ScriptInstallationCard';
 import { ConfirmationModal } from './ConfirmationModal';
 import { ErrorModal } from './ErrorModal';
+import { LoadingModal } from './LoadingModal';
 import { getContrastColor } from '../../lib/colorUtils';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from './ui/dropdown-menu';

 interface InstalledScript {
  id: number;
@@ -20,12 +28,18 @@ interface InstalledScript {
  server_ip: string | null;
  server_user: string | null;
  server_password: string | null;
+  server_auth_type: string | null;
+  server_ssh_key: string | null;
+  server_ssh_key_passphrase: string | null;
+  server_ssh_port: number | null;
  server_color: string | null;
  installation_date: string;
  status: 'in_progress' | 'success' | 'failed';
  output_log: string | null;
  execution_mode: 'local' | 'ssh';
  container_status?: 'running' | 'stopped' | 'unknown';
+  web_ui_ip: string | null;
+  web_ui_port: number | null;
 }

 export function InstalledScriptsTab() {
@@ -35,8 +49,9 @@ export function InstalledScriptsTab() {
  const [sortField, setSortField] = useState<'script_name' | 'container_id' | 'server_name' | 'status' | 'installation_date'>('server_name');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
  const [updatingScript, setUpdatingScript] = useState<{ id: number; containerId: string; server?: any } | null>(null);
+  const [openingShell, setOpeningShell] = useState<{ id: number; containerId: string; server?: any } | null>(null);
  const [editingScriptId, setEditingScriptId] = useState<number | null>(null);
-  const [editFormData, setEditFormData] = useState<{ script_name: string; container_id: string }>({ script_name: '', container_id: '' });
+  const [editFormData, setEditFormData] = useState<{ script_name: string; container_id: string; web_ui_ip: string; web_ui_port: string }>({ script_name: '', container_id: '', web_ui_ip: '', web_ui_port: '' });
  const [showAddForm, setShowAddForm] = useState(false);
  const [addFormData, setAddFormData] = useState<{ script_name: string; container_id: string; server_id: string }>({ script_name: '', container_id: '', server_id: 'local' });
  const [showAutoDetectForm, setShowAutoDetectForm] = useState(false);
@@ -59,6 +74,7 @@ export function InstalledScriptsTab() {
  } | null>(null);
  const [controllingScriptId, setControllingScriptId] = useState<number | null>(null);
  const scriptsRef = useRef<InstalledScript[]>([]);
+  const statusCheckTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  
  // Error modal state
  const [errorModal, setErrorModal] = useState<{
@@ -69,6 +85,12 @@ export function InstalledScriptsTab() {
    type?: 'error' | 'success';
  } | null>(null);

+  // Loading modal state
+  const [loadingModal, setLoadingModal] = useState<{
+    isOpen: boolean;
+    action: string;
+  } | null>(null);
+
  // Fetch installed scripts
  const { data: scriptsData, refetch: refetchScripts, isLoading } = api.installedScripts.getAllInstalledScripts.useQuery();
  const { data: statsData } = api.installedScripts.getInstallationStats.useQuery();
@@ -86,7 +108,7 @@ export function InstalledScriptsTab() {
    onSuccess: () => {
      void refetchScripts();
      setEditingScriptId(null);
-      setEditFormData({ script_name: '', container_id: '' });
+      setEditFormData({ script_name: '', container_id: '', web_ui_ip: '', web_ui_port: '' });
    },
    onError: (error) => {
      alert(`Error updating script: ${error.message}`);
@@ -200,7 +222,30 @@ export function InstalledScriptsTab() {
        message: error.message ?? 'Cleanup failed. Please try again.' 
      });
      // Clear status after 5 seconds
-      setTimeout(() => setCleanupStatus({ type: null, message: '' }), 5000);
+      setTimeout(() => setCleanupStatus({ type: null, message: '' }), 8000);
+    }
+  });
+
+  // Auto-detect Web UI mutation
+  const autoDetectWebUIMutation = api.installedScripts.autoDetectWebUI.useMutation({
+    onSuccess: (data) => {
+      console.log('✅ Auto-detect WebUI success:', data);
+      void refetchScripts();
+      setAutoDetectStatus({ 
+        type: 'success', 
+        message: data.message ?? 'Web UI IP detected successfully!' 
+      });
+      // Clear status after 5 seconds
+      setTimeout(() => setAutoDetectStatus({ type: null, message: '' }), 5000);
+    },
+    onError: (error) => {
+      console.error('❌ Auto-detect Web UI error:', error);
+      setAutoDetectStatus({ 
+        type: 'error', 
+        message: error.message ?? 'Auto-detect failed. Please try again.' 
+      });
+      // Clear status after 5 seconds
+      setTimeout(() => setAutoDetectStatus({ type: null, message: '' }), 5000);
    }
  });

@@ -209,6 +254,7 @@ export function InstalledScriptsTab() {

  const controlContainerMutation = api.installedScripts.controlContainer.useMutation({
    onSuccess: (data, variables) => {
+      setLoadingModal(null);
      setControllingScriptId(null);
      
      if (data.success) {
@@ -249,6 +295,7 @@ export function InstalledScriptsTab() {
    },
    onError: (error) => {
      console.error('Container control error:', error);
+      setLoadingModal(null);
      setControllingScriptId(null);
      
      // Show detailed error message
@@ -264,6 +311,7 @@ export function InstalledScriptsTab() {

  const destroyContainerMutation = api.installedScripts.destroyContainer.useMutation({
    onSuccess: (data) => {
+      setLoadingModal(null);
      setControllingScriptId(null);
      
      if (data.success) {
@@ -288,6 +336,7 @@ export function InstalledScriptsTab() {
    },
    onError: (error) => {
      console.error('Container destroy error:', error);
+      setLoadingModal(null);
      setControllingScriptId(null);
      
      // Show detailed error message
@@ -312,17 +361,34 @@ export function InstalledScriptsTab() {

  // Function to fetch container statuses - simplified to just check all servers
  const fetchContainerStatuses = useCallback(() => {
-    const currentScripts = scriptsRef.current;
+    console.log('fetchContainerStatuses called, isPending:', containerStatusMutation.isPending);
    
-    // Get unique server IDs from scripts
-    const serverIds = [...new Set(currentScripts
-      .filter(script => script.server_id)
-      .map(script => script.server_id!))];
-
-    if (serverIds.length > 0) {
-      containerStatusMutation.mutate({ serverIds });
+    // Prevent multiple simultaneous status checks
+    if (containerStatusMutation.isPending) {
+      console.log('Status check already pending, skipping');
+      return;
    }
-  }, []); // Empty dependency array to prevent infinite loops
+    
+    // Clear any existing timeout
+    if (statusCheckTimeoutRef.current) {
+      clearTimeout(statusCheckTimeoutRef.current);
+    }
+    
+    // Debounce status checks by 500ms
+    statusCheckTimeoutRef.current = setTimeout(() => {
+      const currentScripts = scriptsRef.current;
+      
+      // Get unique server IDs from scripts
+      const serverIds = [...new Set(currentScripts
+        .filter(script => script.server_id)
+        .map(script => script.server_id!))];
+
+      console.log('Executing status check for server IDs:', serverIds);
+      if (serverIds.length > 0) {
+        containerStatusMutation.mutate({ serverIds });
+      }
+    }, 500);
+  }, []);

  // Run cleanup when component mounts and scripts are loaded (only once)
  useEffect(() => {
@@ -333,17 +399,22 @@ export function InstalledScriptsTab() {
  }, [scripts.length, serversData?.servers, cleanupMutation]);


-
-  // Note: Individual status fetching removed - using bulk fetchContainerStatuses instead
-
-  // Trigger status check when tab becomes active (component mounts)
  useEffect(() => {
    if (scripts.length > 0) {
+      console.log('Status check triggered - scripts length:', scripts.length);
      fetchContainerStatuses();
    }
-  }, [scripts.length]); // Only depend on scripts.length to prevent infinite loops
+  }, [scripts.length, fetchContainerStatuses]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (statusCheckTimeoutRef.current) {
+        clearTimeout(statusCheckTimeoutRef.current);
+      }
+    };
+  }, []);

-  // Update scripts with container statuses
  const scriptsWithStatus = scripts.map(script => ({
    ...script,
    container_status: script.container_id ? containerStatuses.get(script.id) ?? 'unknown' : undefined
@@ -455,6 +526,7 @@ export function InstalledScriptsTab() {
      message: `Are you sure you want to ${action} container ${script.container_id} (${script.script_name})?`,
      onConfirm: () => {
        setControllingScriptId(script.id);
+        setLoadingModal({ isOpen: true, action: `${action === 'start' ? 'Starting' : 'Stopping'} container ${script.container_id}...` });
        void controlContainerMutation.mutate({ id: script.id, action });
        setConfirmationModal(null);
      }
@@ -475,6 +547,7 @@ export function InstalledScriptsTab() {
      confirmText: script.container_id,
      onConfirm: () => {
        setControllingScriptId(script.id);
+        setLoadingModal({ isOpen: true, action: `Destroying container ${script.container_id}...` });
        void destroyContainerMutation.mutate({ id: script.id });
        setConfirmationModal(null);
      }
@@ -503,13 +576,17 @@ export function InstalledScriptsTab() {
      onConfirm: () => {
        // Get server info if it's SSH mode
        let server = null;
-        if (script.server_id && script.server_user && script.server_password) {
+        if (script.server_id && script.server_user) {
          server = {
            id: script.server_id,
            name: script.server_name,
            ip: script.server_ip,
            user: script.server_user,
-            password: script.server_password
+            password: script.server_password,
+            auth_type: script.server_auth_type ?? 'password',
+            ssh_key: script.server_ssh_key,
+            ssh_key_passphrase: script.server_ssh_key_passphrase,
+            ssh_port: script.server_ssh_port ?? 22
          };
        }
        
@@ -527,17 +604,104 @@ export function InstalledScriptsTab() {
    setUpdatingScript(null);
  };

+  const handleOpenShell = (script: InstalledScript) => {
+    if (!script.container_id) {
+      setErrorModal({
+        isOpen: true,
+        title: 'Shell Access Failed',
+        message: 'No Container ID available for this script',
+        details: 'This script does not have a valid container ID and cannot be accessed via shell.'
+      });
+      return;
+    }
+    
+    // Get server info if it's SSH mode
+    let server = null;
+    if (script.server_id && script.server_user) {
+      server = {
+        id: script.server_id,
+        name: script.server_name,
+        ip: script.server_ip,
+        user: script.server_user,
+        password: script.server_password,
+        auth_type: script.server_auth_type ?? 'password',
+        ssh_key: script.server_ssh_key,
+        ssh_key_passphrase: script.server_ssh_key_passphrase,
+        ssh_port: script.server_ssh_port ?? 22
+      };
+    }
+    
+    setOpeningShell({
+      id: script.id,
+      containerId: script.container_id,
+      server: server
+    });
+  };
+
+  const handleCloseShellTerminal = () => {
+    setOpeningShell(null);
+  };
+
+  // Auto-scroll to terminals when they open
+  useEffect(() => {
+    if (openingShell) {
+      // Small delay to ensure the terminal is rendered
+      setTimeout(() => {
+        const terminalElement = document.querySelector('[data-terminal="shell"]');
+        if (terminalElement) {
+          // Scroll to the terminal with smooth animation
+          terminalElement.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'start',
+            inline: 'nearest'
+          });
+          
+          // Add a subtle highlight effect
+          terminalElement.classList.add('animate-pulse');
+          setTimeout(() => {
+            terminalElement.classList.remove('animate-pulse');
+          }, 2000);
+        }
+      }, 200);
+    }
+  }, [openingShell]);
+
+  useEffect(() => {
+    if (updatingScript) {
+      // Small delay to ensure the terminal is rendered
+      setTimeout(() => {
+        const terminalElement = document.querySelector('[data-terminal="update"]');
+        if (terminalElement) {
+          // Scroll to the terminal with smooth animation
+          terminalElement.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'start',
+            inline: 'nearest'
+          });
+          
+          // Add a subtle highlight effect
+          terminalElement.classList.add('animate-pulse');
+          setTimeout(() => {
+            terminalElement.classList.remove('animate-pulse');
+          }, 2000);
+        }
+      }, 200);
+    }
+  }, [updatingScript]);
+
  const handleEditScript = (script: InstalledScript) => {
    setEditingScriptId(script.id);
    setEditFormData({
      script_name: script.script_name,
-      container_id: script.container_id ?? ''
+      container_id: script.container_id ?? '',
+      web_ui_ip: script.web_ui_ip ?? '',
+      web_ui_port: script.web_ui_port?.toString() ?? ''
    });
  };

  const handleCancelEdit = () => {
    setEditingScriptId(null);
-    setEditFormData({ script_name: '', container_id: '' });
+    setEditFormData({ script_name: '', container_id: '', web_ui_ip: '', web_ui_port: '' });
  };

  const handleSaveEdit = () => {
@@ -556,11 +720,13 @@ export function InstalledScriptsTab() {
        id: editingScriptId,
        script_name: editFormData.script_name.trim(),
        container_id: editFormData.container_id.trim() || undefined,
+        web_ui_ip: editFormData.web_ui_ip.trim() || undefined,
+        web_ui_port: editFormData.web_ui_port.trim() ? parseInt(editFormData.web_ui_port, 10) : undefined,
      });
    }
  };

-  const handleInputChange = (field: 'script_name' | 'container_id', value: string) => {
+  const handleInputChange = (field: 'script_name' | 'container_id' | 'web_ui_ip' | 'web_ui_port', value: string) => {
    setEditFormData(prev => ({
      ...prev,
      [field]: value
@@ -622,6 +788,54 @@ export function InstalledScriptsTab() {
    }
  };

+  const handleAutoDetectWebUI = (script: InstalledScript) => {
+    console.log('🔍 Auto-detect WebUI clicked for script:', script);
+    console.log('Script validation:', {
+      hasContainerId: !!script.container_id,
+      isSSHMode: script.execution_mode === 'ssh',
+      containerId: script.container_id,
+      executionMode: script.execution_mode
+    });
+    
+    if (!script.container_id || script.execution_mode !== 'ssh') {
+      console.log('❌ Auto-detect validation failed');
+      setErrorModal({
+        isOpen: true,
+        title: 'Auto-Detect Failed',
+        message: 'Auto-detect only works for SSH mode scripts with container ID',
+        details: 'This script does not have a valid container ID or is not in SSH mode.'
+      });
+      return;
+    }
+
+    console.log('✅ Calling autoDetectWebUIMutation.mutate with id:', script.id);
+    autoDetectWebUIMutation.mutate({ id: script.id });
+  };
+
+  const handleOpenWebUI = (script: InstalledScript) => {
+    if (!script.web_ui_ip) {
+      setErrorModal({
+        isOpen: true,
+        title: 'Web UI Access Failed',
+        message: 'No IP address configured for this script',
+        details: 'Please set the Web UI IP address before opening the interface.'
+      });
+      return;
+    }
+
+    const port = script.web_ui_port ?? 80;
+    const url = `http://${script.web_ui_ip}:${port}`;
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  // Helper function to check if a script has any actions available
+  const hasActions = (script: InstalledScript) => {
+    if (script.container_id && script.execution_mode === 'ssh') return true;
+    if (script.web_ui_ip != null) return true;
+    if (!script.container_id || script.execution_mode !== 'ssh') return true;
+    return false;
+  };
+

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleString();
@@ -639,7 +853,7 @@ export function InstalledScriptsTab() {
    <div className="space-y-6">
      {/* Update Terminal */}
      {updatingScript && (
-        <div className="mb-8">
+        <div className="mb-8" data-terminal="update">
          <Terminal
            scriptPath={`update-${updatingScript.containerId}`}
            onClose={handleCloseUpdateTerminal}
@@ -651,6 +865,20 @@ export function InstalledScriptsTab() {
        </div>
      )}

+      {/* Shell Terminal */}
+      {openingShell && (
+        <div className="mb-8" data-terminal="shell">
+          <Terminal
+            scriptPath={`shell-${openingShell.containerId}`}
+            onClose={handleCloseShellTerminal}
+            mode={openingShell.server ? 'ssh' : 'local'}
+            server={openingShell.server}
+            isShell={true}
+            containerId={openingShell.containerId}
+          />
+        </div>
+      )}
+
      {/* Header with Stats */}
      <div className="bg-card rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold text-foreground mb-4">Installed Scripts</h2>
@@ -972,6 +1200,7 @@ export function InstalledScriptsTab() {
                  onSave={handleSaveEdit}
                  onCancel={handleCancelEdit}
                  onUpdate={() => handleUpdateScript(script)}
+                  onShell={() => handleOpenShell(script)}
                  onDelete={() => handleDeleteScript(Number(script.id))}
                  isUpdating={updateScriptMutation.isPending}
                  isDeleting={deleteScriptMutation.isPending}
@@ -979,6 +1208,9 @@ export function InstalledScriptsTab() {
                  onStartStop={(action) => handleStartStop(script, action)}
                  onDestroy={() => handleDestroy(script)}
                  isControlling={controllingScriptId === script.id}
+                  onOpenWebUI={() => handleOpenWebUI(script)}
+                  onAutoDetectWebUI={() => handleAutoDetectWebUI(script)}
+                  isAutoDetecting={autoDetectWebUIMutation.isPending}
                />
              ))}
            </div>
@@ -1014,6 +1246,9 @@ export function InstalledScriptsTab() {
                        )}
                      </div>
                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      Web UI
+                    </th>
                    <th 
                      className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:bg-muted/80 select-none"
                      onClick={() => handleSort('server_name')}
@@ -1067,15 +1302,14 @@ export function InstalledScriptsTab() {
                    >
                      <td className="px-6 py-4 whitespace-nowrap">
                        {editingScriptId === script.id ? (
-                          <div className="space-y-2">
+                          <div className="flex items-center min-h-[2.5rem]">
                            <input
                              type="text"
                              value={editFormData.script_name}
                              onChange={(e) => handleInputChange('script_name', e.target.value)}
-                              className="w-full px-2 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+                              className="w-full px-3 py-2 text-sm font-medium border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
                              placeholder="Script name"
                            />
-                            <div className="text-xs text-muted-foreground">{script.script_path}</div>
                          </div>
                        ) : (
                          <div>
@@ -1086,13 +1320,15 @@ export function InstalledScriptsTab() {
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        {editingScriptId === script.id ? (
-                          <input
-                            type="text"
-                            value={editFormData.container_id}
-                            onChange={(e) => handleInputChange('container_id', e.target.value)}
-                            className="w-full px-2 py-1 text-sm font-mono border border-border rounded bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-                            placeholder="Container ID"
-                          />
+                          <div className="flex items-center min-h-[2.5rem]">
+                            <input
+                              type="text"
+                              value={editFormData.container_id}
+                              onChange={(e) => handleInputChange('container_id', e.target.value)}
+                              className="w-full px-3 py-2 text-sm font-mono border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
+                              placeholder="Container ID"
+                            />
+                          </div>
                        ) : (
                          script.container_id ? (
                            <div className="flex items-center space-x-2">
@@ -1121,6 +1357,58 @@ export function InstalledScriptsTab() {
                          )
                        )}
                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        {editingScriptId === script.id ? (
+                          <div className="flex items-center space-x-2 min-h-[2.5rem]">
+                            <input
+                              type="text"
+                              value={editFormData.web_ui_ip}
+                              onChange={(e) => handleInputChange('web_ui_ip', e.target.value)}
+                              className="w-32 px-3 py-2 text-sm font-mono border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
+                              placeholder="IP"
+                            />
+                            <span className="text-muted-foreground">:</span>
+                            <input
+                              type="number"
+                              value={editFormData.web_ui_port}
+                              onChange={(e) => handleInputChange('web_ui_port', e.target.value)}
+                              className="w-20 px-3 py-2 text-sm font-mono border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
+                              placeholder="Port"
+                            />
+                          </div>
+                        ) : (
+                          script.web_ui_ip ? (
+                            <div className="flex items-center space-x-3">
+                              <span className="text-sm text-foreground">
+                                {script.web_ui_ip}:{script.web_ui_port ?? 80}
+                              </span>
+                              {containerStatuses.get(script.id) === 'running' && (
+                                <button
+                                  onClick={() => handleOpenWebUI(script)}
+                                  className="text-xs px-2 py-1 bg-blue-900/20 hover:bg-blue-900/30 border border-blue-700/50 text-blue-300 hover:text-blue-200 hover:border-blue-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md rounded disabled:opacity-50 flex-shrink-0"
+                                  title="Open Web UI"
+                                >
+                                  Open UI
+                                </button>
+                              )}
+                            </div>
+                          ) : (
+                            <div className="flex items-center space-x-2">
+                              <span className="text-sm text-muted-foreground">-</span>
+                              {script.container_id && script.execution_mode === 'ssh' && (
+                                <button
+                                  onClick={() => handleAutoDetectWebUI(script)}
+                                  disabled={autoDetectWebUIMutation.isPending}
+                                  className="text-xs px-2 py-1 bg-blue-900 hover:bg-blue-800 text-blue-300 border border-blue-700 rounded disabled:opacity-50 transition-colors"
+                                  title="Re-detect IP and port"
+                                >
+                                  {autoDetectWebUIMutation.isPending ? '...' : 'Re-detect'}
+                                </button>
+                              )}
+                            </div>
+                          )
+                        )}
+                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-left">
                        <span 
                          className="text-sm px-3 py-1 rounded inline-block"
@@ -1169,47 +1457,90 @@ export function InstalledScriptsTab() {
                              >
                                Edit
                              </Button>
-                              {script.container_id && (
-                                <Button
-                                  onClick={() => handleUpdateScript(script)}
-                                  variant="update"
-                                  size="sm"
-                                  disabled={containerStatuses.get(script.id) === 'stopped'}
-                                >
-                                  Update
-                                </Button>
-                              )}
-                              {/* Container Control Buttons - only show for SSH scripts with container_id */}
-                              {script.container_id && script.execution_mode === 'ssh' && (
-                                <>
-                                  <Button
-                                    onClick={() => handleStartStop(script, (containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'stop' : 'start')}
-                                    disabled={controllingScriptId === script.id || (containerStatuses.get(script.id) ?? 'unknown') === 'unknown'}
-                                    variant={(containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'destructive' : 'default'}
-                                    size="sm"
-                                  >
-                                    {controllingScriptId === script.id ? 'Working...' : (containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'Stop' : 'Start'}
-                                  </Button>
-                                  <Button
-                                    onClick={() => handleDestroy(script)}
-                                    disabled={controllingScriptId === script.id}
-                                    variant="destructive"
-                                    size="sm"
-                                  >
-                                    {controllingScriptId === script.id ? 'Working...' : 'Destroy'}
-                                  </Button>
-                                </>
-                              )}
-                              {/* Fallback to old Delete button for non-SSH scripts */}
-                              {(!script.container_id || script.execution_mode !== 'ssh') && (
-                                <Button
-                                  onClick={() => handleDeleteScript(Number(script.id))}
-                                  variant="delete"
-                                  size="sm"
-                                  disabled={deleteScriptMutation.isPending}
-                                >
-                                  {deleteScriptMutation.isPending ? 'Deleting...' : 'Delete'}
-                                </Button>
+                              {hasActions(script) && (
+                                <DropdownMenu>
+                                  <DropdownMenuTrigger asChild>
+                                    <Button
+                                      variant="outline"
+                                      size="sm"
+                                      className="bg-gray-800/20 hover:bg-gray-800/30 border border-gray-600/50 text-gray-300 hover:text-gray-200 hover:border-gray-500/60 transition-all duration-200 hover:scale-105 hover:shadow-md"
+                                    >
+                                      Actions
+                                    </Button>
+                                  </DropdownMenuTrigger>
+                                  <DropdownMenuContent className="w-48 bg-gray-900 border-gray-700">
+                                    {script.container_id && (
+                                      <DropdownMenuItem
+                                        onClick={() => handleUpdateScript(script)}
+                                        disabled={containerStatuses.get(script.id) === 'stopped'}
+                                        className="text-cyan-300 hover:text-cyan-200 hover:bg-cyan-900/20 focus:bg-cyan-900/20"
+                                      >
+                                        Update
+                                      </DropdownMenuItem>
+                                    )}
+                                    {script.container_id && script.execution_mode === 'ssh' && (
+                                      <DropdownMenuItem
+                                        onClick={() => handleOpenShell(script)}
+                                        disabled={containerStatuses.get(script.id) === 'stopped'}
+                                        className="text-gray-300 hover:text-gray-200 hover:bg-gray-800/20 focus:bg-gray-800/20"
+                                      >
+                                        Shell
+                                      </DropdownMenuItem>
+                                    )}
+                                    {script.web_ui_ip && (
+                                      <DropdownMenuItem
+                                        onClick={() => handleOpenWebUI(script)}
+                                        disabled={containerStatuses.get(script.id) === 'stopped'}
+                                        className="text-blue-300 hover:text-blue-200 hover:bg-blue-900/20 focus:bg-blue-900/20"
+                                      >
+                                        Open UI
+                                      </DropdownMenuItem>
+                                    )}
+                                    {script.container_id && script.execution_mode === 'ssh' && script.web_ui_ip && (
+                                      <DropdownMenuItem
+                                        onClick={() => handleAutoDetectWebUI(script)}
+                                        disabled={autoDetectWebUIMutation.isPending || containerStatuses.get(script.id) === 'stopped'}
+                                        className="text-blue-300 hover:text-blue-200 hover:bg-blue-900/20 focus:bg-blue-900/20"
+                                      >
+                                        {autoDetectWebUIMutation.isPending ? 'Re-detect...' : 'Re-detect IP/Port'}
+                                      </DropdownMenuItem>
+                                    )}
+                                    {script.container_id && script.execution_mode === 'ssh' && (
+                                      <>
+                                        <DropdownMenuSeparator className="bg-gray-700" />
+                                        <DropdownMenuItem
+                                          onClick={() => handleStartStop(script, (containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'stop' : 'start')}
+                                          disabled={controllingScriptId === script.id || (containerStatuses.get(script.id) ?? 'unknown') === 'unknown'}
+                                          className={(containerStatuses.get(script.id) ?? 'unknown') === 'running' 
+                                            ? "text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                                            : "text-green-300 hover:text-green-200 hover:bg-green-900/20 focus:bg-green-900/20"
+                                          }
+                                        >
+                                          {controllingScriptId === script.id ? 'Working...' : (containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'Stop' : 'Start'}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                          onClick={() => handleDestroy(script)}
+                                          disabled={controllingScriptId === script.id}
+                                          className="text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                                        >
+                                          {controllingScriptId === script.id ? 'Working...' : 'Destroy'}
+                                        </DropdownMenuItem>
+                                      </>
+                                    )}
+                                    {(!script.container_id || script.execution_mode !== 'ssh') && (
+                                      <>
+                                        <DropdownMenuSeparator className="bg-gray-700" />
+                                        <DropdownMenuItem
+                                          onClick={() => handleDeleteScript(Number(script.id))}
+                                          disabled={deleteScriptMutation.isPending}
+                                          className="text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                                        >
+                                          {deleteScriptMutation.isPending ? 'Deleting...' : 'Delete'}
+                                        </DropdownMenuItem>
+                                      </>
+                                    )}
+                                  </DropdownMenuContent>
+                                </DropdownMenu>
                              )}
                            </>
                          )}
@@ -1248,6 +1579,14 @@ export function InstalledScriptsTab() {
            type={errorModal.type ?? 'error'}
          />
        )}
+
+        {/* Loading Modal */}
+        {loadingModal && (
+          <LoadingModal
+            isOpen={loadingModal.isOpen}
+            action={loadingModal.action}
+          />
+        )}
    </div>
  );
 }
--- a/src/app/_components/LoadingModal.tsx
+++ b/src/app/_components/LoadingModal.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { Loader2 } from 'lucide-react';
+
+interface LoadingModalProps {
+  isOpen: boolean;
+  action: string;
+}
+
+export function LoadingModal({ isOpen, action }: LoadingModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-card rounded-lg shadow-xl max-w-md w-full border border-border p-8">
+        <div className="flex flex-col items-center space-y-4">
+          <div className="relative">
+            <Loader2 className="h-12 w-12 animate-spin text-primary" />
+            <div className="absolute inset-0 rounded-full border-2 border-primary/20 animate-pulse"></div>
+          </div>
+          <div className="text-center">
+            <h3 className="text-lg font-semibold text-card-foreground mb-2">
+              Processing
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              {action}
+            </p>
+            <p className="text-xs text-muted-foreground mt-2">
+              Please wait...
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
--- a/src/app/_components/PublicKeyModal.tsx
+++ b/src/app/_components/PublicKeyModal.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Copy, Check, Server, Globe } from 'lucide-react';
+import { Button } from './ui/button';
+
+interface PublicKeyModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  publicKey: string;
+  serverName: string;
+  serverIp: string;
+}
+
+export function PublicKeyModal({ isOpen, onClose, publicKey, serverName, serverIp }: PublicKeyModalProps) {
+  const [copied, setCopied] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleCopy = async () => {
+    try {
+      // Try modern clipboard API first
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(publicKey);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } else {
+        // Fallback for older browsers or non-HTTPS
+        const textArea = document.createElement('textarea');
+        textArea.value = publicKey;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        
+        try {
+          document.execCommand('copy');
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        } catch (fallbackError) {
+          console.error('Fallback copy failed:', fallbackError);
+          // If all else fails, show the key in an alert
+          alert('Please manually copy this key:\n\n' + publicKey);
+        }
+        
+        document.body.removeChild(textArea);
+      }
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error);
+      // Fallback: show the key in an alert
+      alert('Please manually copy this key:\n\n' + publicKey);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-card rounded-lg shadow-xl max-w-2xl w-full border border-border">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-blue-100 rounded-lg">
+              <Server className="h-6 w-6 text-blue-600" />
+            </div>
+            <div>
+              <h2 className="text-xl font-semibold text-card-foreground">SSH Public Key</h2>
+              <p className="text-sm text-muted-foreground">Add this key to your server&apos;s authorized_keys</p>
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            className="h-8 w-8"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {/* Server Info */}
+          <div className="flex items-center gap-4 p-4 bg-muted/50 rounded-lg">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Server className="h-4 w-4" />
+              <span className="font-medium">{serverName}</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Globe className="h-4 w-4" />
+              <span>{serverIp}</span>
+            </div>
+          </div>
+
+          {/* Instructions */}
+          <div className="space-y-2">
+            <h3 className="font-medium text-foreground">Instructions:</h3>
+            <ol className="text-sm text-muted-foreground space-y-1 list-decimal list-inside">
+              <li>Copy the public key below</li>
+              <li>SSH into your server: <code className="bg-muted px-1 rounded">ssh root@{serverIp}</code></li>
+              <li>Add the key to authorized_keys: <code className="bg-muted px-1 rounded">echo &quot;&lt;paste-key&gt;&quot; &gt;&gt; ~/.ssh/authorized_keys</code></li>
+              <li>Set proper permissions: <code className="bg-muted px-1 rounded">chmod 600 ~/.ssh/authorized_keys</code></li>
+            </ol>
+          </div>
+
+          {/* Public Key */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="text-sm font-medium text-foreground">Public Key:</label>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopy}
+                className="gap-2"
+              >
+                {copied ? (
+                  <>
+                    <Check className="h-4 w-4" />
+                    Copied!
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-4 w-4" />
+                    Copy
+                  </>
+                )}
+              </Button>
+            </div>
+            <textarea
+              value={publicKey}
+              readOnly
+              className="w-full px-3 py-2 border rounded-md shadow-sm bg-card text-foreground font-mono text-xs min-h-[120px] resize-none border-border focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
+              placeholder="Public key will appear here..."
+            />
+          </div>
+
+          {/* Footer */}
+          <div className="flex justify-end gap-3 pt-4 border-t border-border">
+            <Button variant="outline" onClick={onClose}>
+              Close
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/app/_components/ReleaseNotesModal.tsx
+++ b/src/app/_components/ReleaseNotesModal.tsx
@@ -5,6 +5,8 @@ import { api } from '~/trpc/react';
 import { Button } from './ui/button';
 import { Badge } from './ui/badge';
 import { X, ExternalLink, Calendar, Tag, Loader2 } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';

 interface ReleaseNotesModalProps {
  isOpen: boolean;
@@ -170,9 +172,23 @@ export function ReleaseNotesModal({ isOpen, onClose, highlightVersion }: Release
                    {/* Release Body */}
                    {release.body && (
                      <div className="prose prose-sm max-w-none dark:prose-invert">
-                        <div className="whitespace-pre-wrap text-sm text-card-foreground leading-relaxed">
+                        <ReactMarkdown 
+                          remarkPlugins={[remarkGfm]}
+                          components={{
+                            h1: ({children}) => <h1 className="text-2xl font-bold text-card-foreground mb-4 mt-6">{children}</h1>,
+                            h2: ({children}) => <h2 className="text-xl font-semibold text-card-foreground mb-3 mt-5">{children}</h2>,
+                            h3: ({children}) => <h3 className="text-lg font-medium text-card-foreground mb-2 mt-4">{children}</h3>,
+                            p: ({children}) => <p className="text-card-foreground mb-3 leading-relaxed">{children}</p>,
+                            ul: ({children}) => <ul className="list-disc list-inside text-card-foreground mb-3 space-y-1">{children}</ul>,
+                            ol: ({children}) => <ol className="list-decimal list-inside text-card-foreground mb-3 space-y-1">{children}</ol>,
+                            li: ({children}) => <li className="text-card-foreground">{children}</li>,
+                            a: ({href, children}) => <a href={href} className="text-blue-500 hover:text-blue-400 underline" target="_blank" rel="noopener noreferrer">{children}</a>,
+                            strong: ({children}) => <strong className="font-semibold text-card-foreground">{children}</strong>,
+                            em: ({children}) => <em className="italic text-card-foreground">{children}</em>,
+                          }}
+                        >
                          {release.body}
-                        </div>
+                        </ReactMarkdown>
                      </div>
                    )}
                  </div>
--- a/src/app/_components/SSHKeyInput.tsx
+++ b/src/app/_components/SSHKeyInput.tsx
@@ -93,9 +93,22 @@ export function SSHKeyInput({ value, onChange, onError, disabled = false }: SSHK
    );
    
    if (keyLine) {
-      const keyType = keyLine.includes('RSA') ? 'RSA' : 
-                     keyLine.includes('ED25519') ? 'ED25519' : 
-                     keyLine.includes('ECDSA') ? 'ECDSA' : 'Unknown';
+      let keyType = 'Unknown';
+      
+      // Check for traditional PEM format keys
+      if (keyLine.includes('RSA')) {
+        keyType = 'RSA';
+      } else if (keyLine.includes('ED25519')) {
+        keyType = 'ED25519';
+      } else if (keyLine.includes('ECDSA')) {
+        keyType = 'ECDSA';
+      } else if (keyLine.includes('OPENSSH PRIVATE KEY')) {
+        // For OpenSSH format keys, try to detect type from the key content
+        // This is a heuristic - OpenSSH ED25519 keys typically start with specific patterns
+        // We'll default to "OpenSSH" for now since we can't reliably detect the type
+        keyType = 'OpenSSH';
+      }
+      
      return `${keyType} key (${keyContent.length} characters)`;
    }
    
@@ -142,7 +155,7 @@ export function SSHKeyInput({ value, onChange, onError, disabled = false }: SSHK
          <input
            ref={fileInputRef}
            type="file"
-            accept=".pem,.key,.id_rsa,.id_ed25519,.id_ecdsa"
+            accept=".pem,.key,.id_rsa,.id_ed25519,.id_ecdsa,ed25519,id_rsa,id_ed25519,id_ecdsa,*"
            onChange={handleFileSelect}
            className="hidden"
            disabled={disabled}
@@ -153,7 +166,7 @@ export function SSHKeyInput({ value, onChange, onError, disabled = false }: SSHK
              Drag and drop your SSH private key here, or click to browse
            </p>
            <p className="text-xs text-muted-foreground">
-              Supported formats: RSA, ED25519, ECDSA (.pem, .key, .id_rsa, etc.)
+              Supported formats: RSA, ED25519, ECDSA (.pem, .key, .id_rsa, ed25519, etc.)
            </p>
          </div>
        </div>
--- a/src/app/_components/ScriptDetailModal.tsx
+++ b/src/app/_components/ScriptDetailModal.tsx
@@ -359,91 +359,91 @@ export function ScriptDetailModal({
            })()}
        </div>

-        {/* Load Message */}
-        {loadMessage && (
-          <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
-            {loadMessage}
-          </div>
-        )}
-
-        {/* Script Files Status */}
-        {(scriptFilesLoading || comparisonLoading) && (
-          <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
-            <div className="flex items-center space-x-2">
-              <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-600"></div>
-              <span>Loading script status...</span>
-            </div>
-          </div>
-        )}
-
-        {scriptFilesData?.success &&
-          !scriptFilesLoading &&
-          (() => {
-            // Determine script type from the first install method
-            const firstScript = script?.install_methods?.[0]?.script;
-            let scriptType = "Script";
-            if (firstScript?.startsWith("ct/")) {
-              scriptType = "CT Script";
-            } else if (firstScript?.startsWith("tools/")) {
-              scriptType = "Tools Script";
-            } else if (firstScript?.startsWith("vm/")) {
-              scriptType = "VM Script";
-            } else if (firstScript?.startsWith("vw/")) {
-              scriptType = "VW Script";
-            }
-
-            return (
-              <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-muted p-3 text-sm text-muted-foreground">
-                <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
-                  <div className="flex items-center space-x-2">
-                    <div
-                      className={`h-2 w-2 rounded-full ${scriptFilesData.ctExists ? "bg-green-500" : "bg-muted"}`}
-                    ></div>
-                    <span>
-                      {scriptType}:{" "}
-                      {scriptFilesData.ctExists ? "Available" : "Not loaded"}
-                    </span>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <div
-                      className={`h-2 w-2 rounded-full ${scriptFilesData.installExists ? "bg-green-500" : "bg-muted"}`}
-                    ></div>
-                    <span>
-                      Install Script:{" "}
-                      {scriptFilesData.installExists
-                        ? "Available"
-                        : "Not loaded"}
-                    </span>
-                  </div>
-                  {scriptFilesData?.success &&
-                    (scriptFilesData.ctExists ||
-                      scriptFilesData.installExists) &&
-                    comparisonData?.success &&
-                    !comparisonLoading && (
-                      <div className="flex items-center space-x-2">
-                        <div
-                          className={`h-2 w-2 rounded-full ${comparisonData.hasDifferences ? "bg-orange-500" : "bg-green-500"}`}
-                        ></div>
-                        <span>
-                          Status:{" "}
-                          {comparisonData.hasDifferences
-                            ? "Update available"
-                            : "Up to date"}
-                        </span>
-                      </div>
-                    )}
-                </div>
-                {scriptFilesData.files.length > 0 && (
-                  <div className="mt-2 text-xs text-muted-foreground break-words">
-                    Files: {scriptFilesData.files.join(", ")}
-                  </div>
-                )}
-              </div>
-            );
-          })()}
-
        {/* Content */}
        <div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
+          {/* Script Files Status */}
+          {(scriptFilesLoading || comparisonLoading) && (
+            <div className="mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
+              <div className="flex items-center space-x-2">
+                <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                <span>Loading script status...</span>
+              </div>
+            </div>
+          )}
+
+          {scriptFilesData?.success &&
+            !scriptFilesLoading &&
+            (() => {
+              // Determine script type from the first install method
+              const firstScript = script?.install_methods?.[0]?.script;
+              let scriptType = "Script";
+              if (firstScript?.startsWith("ct/")) {
+                scriptType = "CT Script";
+              } else if (firstScript?.startsWith("tools/")) {
+                scriptType = "Tools Script";
+              } else if (firstScript?.startsWith("vm/")) {
+                scriptType = "VM Script";
+              } else if (firstScript?.startsWith("vw/")) {
+                scriptType = "VW Script";
+              }
+
+              return (
+                <div className="mb-4 rounded-lg bg-muted p-3 text-sm text-muted-foreground">
+                  <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
+                    <div className="flex items-center space-x-2">
+                      <div
+                        className={`h-2 w-2 rounded-full ${scriptFilesData.ctExists ? "bg-green-500" : "bg-muted"}`}
+                      ></div>
+                      <span>
+                        {scriptType}:{" "}
+                        {scriptFilesData.ctExists ? "Available" : "Not loaded"}
+                      </span>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <div
+                        className={`h-2 w-2 rounded-full ${scriptFilesData.installExists ? "bg-green-500" : "bg-muted"}`}
+                      ></div>
+                      <span>
+                        Install Script:{" "}
+                        {scriptFilesData.installExists
+                          ? "Available"
+                          : "Not loaded"}
+                      </span>
+                    </div>
+                    {scriptFilesData?.success &&
+                      (scriptFilesData.ctExists ||
+                        scriptFilesData.installExists) &&
+                      comparisonData?.success &&
+                      !comparisonLoading && (
+                        <div className="flex items-center space-x-2">
+                          <div
+                            className={`h-2 w-2 rounded-full ${comparisonData.hasDifferences ? "bg-orange-500" : "bg-green-500"}`}
+                          ></div>
+                          <span>
+                            Status:{" "}
+                            {comparisonData.hasDifferences
+                              ? "Update available"
+                              : "Up to date"}
+                          </span>
+                        </div>
+                      )}
+                  </div>
+                  {scriptFilesData.files.length > 0 && (
+                    <div className="mt-2 text-xs text-muted-foreground break-words">
+                      Files: {scriptFilesData.files.join(", ")}
+                    </div>
+                  )}
+                </div>
+              );
+            })()}
+
+          {/* Load Message */}
+          {loadMessage && (
+            <div className="mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
+              {loadMessage}
+            </div>
+          )}
+
          {/* Description */}
          <div>
            <h3 className="mb-2 text-base sm:text-lg font-semibold text-foreground">
--- a/src/app/_components/ScriptInstallationCard.tsx
+++ b/src/app/_components/ScriptInstallationCard.tsx
@@ -3,6 +3,13 @@
 import { Button } from './ui/button';
 import { StatusBadge } from './Badge';
 import { getContrastColor } from '../../lib/colorUtils';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from './ui/dropdown-menu';

 interface InstalledScript {
  id: number;
@@ -14,23 +21,30 @@ interface InstalledScript {
  server_ip: string | null;
  server_user: string | null;
  server_password: string | null;
+  server_auth_type: string | null;
+  server_ssh_key: string | null;
+  server_ssh_key_passphrase: string | null;
+  server_ssh_port: number | null;
  server_color: string | null;
  installation_date: string;
  status: 'in_progress' | 'success' | 'failed';
  output_log: string | null;
  execution_mode: 'local' | 'ssh';
  container_status?: 'running' | 'stopped' | 'unknown';
+  web_ui_ip: string | null;
+  web_ui_port: number | null;
 }

 interface ScriptInstallationCardProps {
  script: InstalledScript;
  isEditing: boolean;
-  editFormData: { script_name: string; container_id: string };
-  onInputChange: (field: 'script_name' | 'container_id', value: string) => void;
+  editFormData: { script_name: string; container_id: string; web_ui_ip: string; web_ui_port: string };
+  onInputChange: (field: 'script_name' | 'container_id' | 'web_ui_ip' | 'web_ui_port', value: string) => void;
  onEdit: () => void;
  onSave: () => void;
  onCancel: () => void;
  onUpdate: () => void;
+  onShell: () => void;
  onDelete: () => void;
  isUpdating: boolean;
  isDeleting: boolean;
@@ -39,6 +53,10 @@ interface ScriptInstallationCardProps {
  onStartStop: (action: 'start' | 'stop') => void;
  onDestroy: () => void;
  isControlling: boolean;
+  // Web UI props
+  onOpenWebUI: () => void;
+  onAutoDetectWebUI: () => void;
+  isAutoDetecting: boolean;
 }

 export function ScriptInstallationCard({
@@ -50,18 +68,30 @@ export function ScriptInstallationCard({
  onSave,
  onCancel,
  onUpdate,
+  onShell,
  onDelete,
  isUpdating,
  isDeleting,
  containerStatus,
  onStartStop,
  onDestroy,
-  isControlling
+  isControlling,
+  onOpenWebUI,
+  onAutoDetectWebUI,
+  isAutoDetecting
 }: ScriptInstallationCardProps) {
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleString();
  };

+  // Helper function to check if a script has any actions available
+  const hasActions = (script: InstalledScript) => {
+    if (script.container_id && script.execution_mode === 'ssh') return true;
+    if (script.web_ui_ip != null) return true;
+    if (!script.container_id || script.execution_mode !== 'ssh') return true;
+    return false;
+  };
+
  return (
    <div 
      className="bg-card border border-border rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow"
@@ -137,6 +167,70 @@ export function ScriptInstallationCard({
          )}
        </div>

+        {/* Web UI */}
+        <div>
+          <div className="text-xs font-medium text-muted-foreground mb-1">IP:PORT</div>
+          {isEditing ? (
+            <div className="flex items-center space-x-2">
+              <input
+                type="text"
+                value={editFormData.web_ui_ip}
+                onChange={(e) => onInputChange('web_ui_ip', e.target.value)}
+                className="flex-1 px-2 py-1 text-sm font-mono border border-border rounded bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder="IP"
+              />
+              <span className="text-muted-foreground">:</span>
+              <input
+                type="number"
+                value={editFormData.web_ui_port}
+                onChange={(e) => onInputChange('web_ui_port', e.target.value)}
+                className="w-20 px-2 py-1 text-sm font-mono border border-border rounded bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder="Port"
+              />
+            </div>
+          ) : (
+            <div className="text-sm font-mono text-foreground">
+              {script.web_ui_ip ? (
+                <div className="flex items-center justify-between w-full">
+                  <button
+                    onClick={onOpenWebUI}
+                    disabled={containerStatus === 'stopped'}
+                    className={`text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline flex-shrink-0 ${
+                      containerStatus === 'stopped' ? 'opacity-50 cursor-not-allowed' : ''
+                    }`}
+                  >
+                    {script.web_ui_ip}:{script.web_ui_port ?? 80}
+                  </button>
+                  {script.container_id && script.execution_mode === 'ssh' && (
+                    <button
+                      onClick={onAutoDetectWebUI}
+                      disabled={isAutoDetecting}
+                      className="text-xs px-2 py-1 bg-blue-900 hover:bg-blue-800 text-blue-300 border border-blue-700 rounded disabled:opacity-50 transition-colors flex-shrink-0 ml-2"
+                      title="Re-detect IP and port"
+                    >
+                      {isAutoDetecting ? '...' : 'Re-detect'}
+                    </button>
+                  )}
+                </div>
+              ) : (
+                <div className="flex items-center space-x-2">
+                  <span className="text-muted-foreground">-</span>
+                  {script.container_id && script.execution_mode === 'ssh' && (
+                    <button
+                      onClick={onAutoDetectWebUI}
+                      disabled={isAutoDetecting}
+                      className="text-xs px-2 py-1 bg-blue-900 hover:bg-blue-800 text-blue-300 border border-blue-700 rounded disabled:opacity-50 transition-colors"
+                      title="Re-detect IP and port"
+                    >
+                      {isAutoDetecting ? '...' : 'Re-detect'}
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
        {/* Server */}
        <div>
          <div className="text-xs font-medium text-muted-foreground mb-1">Server</div>
@@ -192,51 +286,81 @@ export function ScriptInstallationCard({
            >
              Edit
            </Button>
-            {script.container_id && (
-              <Button
-                onClick={onUpdate}
-                variant="update"
-                size="sm"
-                className="flex-1 min-w-0"
-                disabled={containerStatus === 'stopped'}
-              >
-                Update
-              </Button>
-            )}
-            {/* Container Control Buttons - only show for SSH scripts with container_id */}
-            {script.container_id && script.execution_mode === 'ssh' && (
-              <>
-                <Button
-                  onClick={() => onStartStop(containerStatus === 'running' ? 'stop' : 'start')}
-                  disabled={isControlling || containerStatus === 'unknown'}
-                  variant={containerStatus === 'running' ? 'destructive' : 'default'}
-                  size="sm"
-                  className="flex-1 min-w-0"
-                >
-                  {isControlling ? 'Working...' : containerStatus === 'running' ? 'Stop' : 'Start'}
-                </Button>
-                <Button
-                  onClick={onDestroy}
-                  disabled={isControlling}
-                  variant="destructive"
-                  size="sm"
-                  className="flex-1 min-w-0"
-                >
-                  {isControlling ? 'Working...' : 'Destroy'}
-                </Button>
-              </>
-            )}
-            {/* Fallback to old Delete button for non-SSH scripts */}
-            {(!script.container_id || script.execution_mode !== 'ssh') && (
-              <Button
-                onClick={onDelete}
-                variant="delete"
-                size="sm"
-                disabled={isDeleting}
-                className="flex-1 min-w-0"
-              >
-                {isDeleting ? 'Deleting...' : 'Delete'}
-              </Button>
+            {hasActions(script) && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex-1 min-w-0 bg-gray-800/20 hover:bg-gray-800/30 border border-gray-600/50 text-gray-300 hover:text-gray-200 hover:border-gray-500/60 transition-all duration-200 hover:scale-105 hover:shadow-md"
+                  >
+                    Actions
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-48 bg-gray-900 border-gray-700">
+                  {script.container_id && (
+                    <DropdownMenuItem
+                      onClick={onUpdate}
+                      disabled={containerStatus === 'stopped'}
+                      className="text-cyan-300 hover:text-cyan-200 hover:bg-cyan-900/20 focus:bg-cyan-900/20"
+                    >
+                      Update
+                    </DropdownMenuItem>
+                  )}
+                  {script.container_id && script.execution_mode === 'ssh' && (
+                    <DropdownMenuItem
+                      onClick={onShell}
+                      disabled={containerStatus === 'stopped'}
+                      className="text-gray-300 hover:text-gray-200 hover:bg-gray-800/20 focus:bg-gray-800/20"
+                    >
+                      Shell
+                    </DropdownMenuItem>
+                  )}
+                  {script.web_ui_ip && (
+                    <DropdownMenuItem
+                      onClick={onOpenWebUI}
+                      disabled={containerStatus === 'stopped'}
+                      className="text-blue-300 hover:text-blue-200 hover:bg-blue-900/20 focus:bg-blue-900/20"
+                    >
+                      Open UI
+                    </DropdownMenuItem>
+                  )}
+                  {script.container_id && script.execution_mode === 'ssh' && (
+                    <>
+                      <DropdownMenuSeparator className="bg-gray-700" />
+                      <DropdownMenuItem
+                        onClick={() => onStartStop(containerStatus === 'running' ? 'stop' : 'start')}
+                        disabled={isControlling || containerStatus === 'unknown'}
+                        className={containerStatus === 'running' 
+                          ? "text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                          : "text-green-300 hover:text-green-200 hover:bg-green-900/20 focus:bg-green-900/20"
+                        }
+                      >
+                        {isControlling ? 'Working...' : containerStatus === 'running' ? 'Stop' : 'Start'}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={onDestroy}
+                        disabled={isControlling}
+                        className="text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                      >
+                        {isControlling ? 'Working...' : 'Destroy'}
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                  {(!script.container_id || script.execution_mode !== 'ssh') && (
+                    <>
+                      <DropdownMenuSeparator className="bg-gray-700" />
+                      <DropdownMenuItem
+                        onClick={onDelete}
+                        disabled={isDeleting}
+                        className="text-red-300 hover:text-red-200 hover:bg-red-900/20 focus:bg-red-900/20"
+                      >
+                        {isDeleting ? 'Deleting...' : 'Delete'}
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
            )}
          </>
        )}
--- a/src/app/_components/ScriptsGrid.tsx
+++ b/src/app/_components/ScriptsGrid.tsx
@@ -571,7 +571,7 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
    );
  }

-  if (!scriptsWithStatus || scriptsWithStatus.length === 0) {
+  if (!scriptsWithStatus?.length) {
    return (
      <div className="text-center py-12">
        <div className="text-muted-foreground">
@@ -626,11 +626,13 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
            <Button
              onClick={handleBatchDownload}
              disabled={loadSingleScriptMutation.isPending}
-              className="bg-blue-600 hover:bg-blue-700 text-white"
+              variant="outline"
+              size="sm"
+              className="bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/30 text-blue-300 hover:text-blue-200 hover:border-blue-400/50"
            >
              {loadSingleScriptMutation.isPending ? (
                <>
-                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2"></div>
                  Downloading...
                </>
              ) : (
@@ -642,6 +644,7 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
              onClick={handleDownloadAllFiltered}
              disabled={filteredScripts.length === 0 || loadSingleScriptMutation.isPending}
              variant="outline"
+              size="sm"
            >
              {loadSingleScriptMutation.isPending ? (
                <>
@@ -657,8 +660,8 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
          {selectedSlugs.size > 0 && (
            <Button
              onClick={clearSelection}
-              variant="ghost"
-              size="sm"
+              variant="outline"
+              size="default"
            >
              Clear Selection
            </Button>
@@ -667,8 +670,8 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
          {filteredScripts.length > 0 && (
            <Button
              onClick={selectAllVisible}
-              variant="ghost"
-              size="sm"
+              variant="outline"
+              size="default"
            >
              Select All Visible
            </Button>
--- a/src/app/_components/ServerForm.tsx
+++ b/src/app/_components/ServerForm.tsx
@@ -4,6 +4,8 @@ import { useState, useEffect } from 'react';
 import type { CreateServerData } from '../../types/server';
 import { Button } from './ui/button';
 import { SSHKeyInput } from './SSHKeyInput';
+import { PublicKeyModal } from './PublicKeyModal';
+import { Key } from 'lucide-react';

 interface ServerFormProps {
  onSubmit: (data: CreateServerData) => void;
@@ -30,6 +32,11 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
  const [errors, setErrors] = useState<Partial<Record<keyof CreateServerData, string>>>({});
  const [sshKeyError, setSshKeyError] = useState<string>('');
  const [colorCodingEnabled, setColorCodingEnabled] = useState(false);
+  const [isGeneratingKey, setIsGeneratingKey] = useState(false);
+  const [showPublicKeyModal, setShowPublicKeyModal] = useState(false);
+  const [generatedPublicKey, setGeneratedPublicKey] = useState('');
+  const [, setIsGeneratedKey] = useState(false);
+  const [, setGeneratedServerId] = useState<number | null>(null);

  useEffect(() => {
    const loadColorCodingSetting = async () => {
@@ -75,25 +82,18 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
    // Validate authentication based on auth_type
    const authType = formData.auth_type ?? 'password';
    
-    if (authType === 'password' || authType === 'both') {
+    if (authType === 'password') {
      if (!formData.password?.trim()) {
        newErrors.password = 'Password is required for password authentication';
      }
    }
    
-    if (authType === 'key' || authType === 'both') {
+    if (authType === 'key') {
      if (!formData.ssh_key?.trim()) {
        newErrors.ssh_key = 'SSH key is required for key authentication';
      }
    }

-    // Check if at least one authentication method is provided
-    if (authType === 'both') {
-      if (!formData.password?.trim() && !formData.ssh_key?.trim()) {
-        newErrors.password = 'At least one authentication method (password or SSH key) is required';
-        newErrors.ssh_key = 'At least one authentication method (password or SSH key) is required';
-      }
-    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0 && !sshKeyError;
@@ -127,6 +127,54 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: undefined }));
    }
+    
+    // Reset generated key state when switching auth types
+    if (field === 'auth_type') {
+      setIsGeneratedKey(false);
+      setGeneratedPublicKey('');
+    }
+  };
+
+  const handleGenerateKeyPair = async () => {
+    setIsGeneratingKey(true);
+    try {
+      const response = await fetch('/api/servers/generate-keypair', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to generate key pair');
+      }
+
+      const data = await response.json() as { success: boolean; privateKey?: string; publicKey?: string; serverId?: number; error?: string };
+      
+      if (data.success) {
+        const serverId = data.serverId ?? 0;
+        const keyPath = `data/ssh-keys/server_${serverId}_key`;
+        
+        setFormData(prev => ({ 
+          ...prev, 
+          ssh_key: data.privateKey ?? '',
+          ssh_key_path: keyPath,
+          key_generated: 1
+        }));
+        setGeneratedPublicKey(data.publicKey ?? '');
+        setGeneratedServerId(serverId);
+        setIsGeneratedKey(true);
+        setShowPublicKeyModal(true);
+        setSshKeyError('');
+      } else {
+        throw new Error(data.error ?? 'Failed to generate key pair');
+      }
+    } catch (error) {
+      console.error('Error generating key pair:', error);
+        setSshKeyError(error instanceof Error ? error.message : 'Failed to generate key pair');
+    } finally {
+      setIsGeneratingKey(false);
+    }
  };

  const handleSSHKeyChange = (value: string) => {
@@ -137,6 +185,7 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
  };

  return (
+    <>
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
@@ -221,7 +270,6 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
          >
            <option value="password">Password Only</option>
            <option value="key">SSH Key Only</option>
-            <option value="both">Both Password & SSH Key</option>
          </select>
        </div>

@@ -247,10 +295,10 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
      </div>

      {/* Password Authentication */}
-      {(formData.auth_type === 'password' || formData.auth_type === 'both') && (
+      {formData.auth_type === 'password' && (
        <div>
          <label htmlFor="password" className="block text-sm font-medium text-muted-foreground mb-1">
-            Password {formData.auth_type === 'both' ? '(Optional)' : '*'}
+            Password *
          </label>
          <input
            type="password"
@@ -267,19 +315,55 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
      )}

      {/* SSH Key Authentication */}
-      {(formData.auth_type === 'key' || formData.auth_type === 'both') && (
+      {formData.auth_type === 'key' && (
        <div className="space-y-4">
          <div>
-            <label className="block text-sm font-medium text-muted-foreground mb-1">
-              SSH Private Key {formData.auth_type === 'both' ? '(Optional)' : '*'}
-            </label>
-            <SSHKeyInput
-              value={formData.ssh_key ?? ''}
-              onChange={handleSSHKeyChange}
-              onError={setSshKeyError}
-            />
-            {errors.ssh_key && <p className="mt-1 text-sm text-destructive">{errors.ssh_key}</p>}
-            {sshKeyError && <p className="mt-1 text-sm text-destructive">{sshKeyError}</p>}
+            <div className="flex items-center justify-between mb-1">
+              <label className="block text-sm font-medium text-muted-foreground">
+                SSH Private Key *
+              </label>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleGenerateKeyPair}
+                disabled={isGeneratingKey}
+                className="gap-2"
+              >
+                <Key className="h-4 w-4" />
+                {isGeneratingKey ? 'Generating...' : 'Generate Key Pair'}
+              </Button>
+            </div>
+            
+            {/* Show manual key input only if no key has been generated */}
+            {!formData.key_generated && (
+              <>
+                <SSHKeyInput
+                  value={formData.ssh_key ?? ''}
+                  onChange={handleSSHKeyChange}
+                  onError={setSshKeyError}
+                />
+                {errors.ssh_key && <p className="mt-1 text-sm text-destructive">{errors.ssh_key}</p>}
+                {sshKeyError && <p className="mt-1 text-sm text-destructive">{sshKeyError}</p>}
+              </>
+            )}
+            
+            {/* Show generated key status */}
+            {formData.key_generated && (
+              <div className="p-3 bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800 rounded-md">
+                <div className="flex items-center gap-2">
+                  <svg className="w-4 h-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                  <span className="text-sm font-medium text-green-800 dark:text-green-200">
+                    SSH key pair generated successfully
+                  </span>
+                </div>
+                <p className="text-xs text-green-700 dark:text-green-300 mt-1">
+                  The private key has been generated and will be saved with the server.
+                </p>
+              </div>
+            )}
          </div>

          <div>
@@ -323,6 +407,16 @@ export function ServerForm({ onSubmit, initialData, isEditing = false, onCancel
        </Button>
      </div>
    </form>
+    
+    {/* Public Key Modal */}
+    <PublicKeyModal
+      isOpen={showPublicKeyModal}
+      onClose={() => setShowPublicKeyModal(false)}
+      publicKey={generatedPublicKey}
+      serverName={formData.name || 'New Server'}
+      serverIp={formData.ip}
+    />
+    </>
  );
 }

--- a/src/app/_components/ServerList.tsx
+++ b/src/app/_components/ServerList.tsx
@@ -4,6 +4,9 @@ import { useState } from 'react';
 import type { Server, CreateServerData } from '../../types/server';
 import { ServerForm } from './ServerForm';
 import { Button } from './ui/button';
+import { ConfirmationModal } from './ConfirmationModal';
+import { PublicKeyModal } from './PublicKeyModal';
+import { Key } from 'lucide-react';

 interface ServerListProps {
  servers: Server[];
@@ -15,6 +18,20 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
  const [editingId, setEditingId] = useState<number | null>(null);
  const [testingConnections, setTestingConnections] = useState<Set<number>>(new Set());
  const [connectionResults, setConnectionResults] = useState<Map<number, { success: boolean; message: string }>>(new Map());
+  const [confirmationModal, setConfirmationModal] = useState<{
+    isOpen: boolean;
+    variant: 'danger';
+    title: string;
+    message: string;
+    confirmText: string;
+    onConfirm: () => void;
+  } | null>(null);
+  const [showPublicKeyModal, setShowPublicKeyModal] = useState(false);
+  const [publicKeyData, setPublicKeyData] = useState<{
+    publicKey: string;
+    serverName: string;
+    serverIp: string;
+  } | null>(null);

  const handleEdit = (server: Server) => {
    setEditingId(server.id);
@@ -31,12 +48,49 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
    setEditingId(null);
  };

-  const handleDelete = (id: number) => {
-    if (window.confirm('Are you sure you want to delete this server configuration?')) {
-      onDelete(id);
+  const handleViewPublicKey = async (server: Server) => {
+    try {
+      const response = await fetch(`/api/servers/${server.id}/public-key`);
+      
+      if (!response.ok) {
+        throw new Error('Failed to retrieve public key');
+      }
+
+      const data = await response.json() as { success: boolean; publicKey?: string; serverName?: string; serverIp?: string; error?: string };
+      
+      if (data.success) {
+        setPublicKeyData({
+          publicKey: data.publicKey ?? '',
+          serverName: data.serverName ?? '',
+          serverIp: data.serverIp ?? ''
+        });
+        setShowPublicKeyModal(true);
+      } else {
+        throw new Error(data.error ?? 'Failed to retrieve public key');
+      }
+    } catch (error) {
+      console.error('Error retrieving public key:', error);
+      // You could show a toast notification here
    }
  };

+  const handleDelete = (id: number) => {
+    const server = servers.find(s => s.id === id);
+    if (!server) return;
+
+    setConfirmationModal({
+      isOpen: true,
+      variant: 'danger',
+      title: 'Delete Server',
+      message: `This will permanently delete the server configuration "${server.name}" (${server.ip}) and all associated installed scripts. This action cannot be undone!`,
+      confirmText: server.name,
+      onConfirm: () => {
+        onDelete(id);
+        setConfirmationModal(null);
+      }
+    });
+  };
+
  const handleTestConnection = async (server: Server) => {
    setTestingConnections(prev => new Set(prev).add(server.id));
    setConnectionResults(prev => {
@@ -198,6 +252,19 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
                  )}
                </Button>
                <div className="flex space-x-2">
+                  {/* View Public Key button - only show for generated keys */}
+                  {server.key_generated === 1 && (
+                    <Button
+                      onClick={() => handleViewPublicKey(server)}
+                      variant="outline"
+                      size="sm"
+                      className="flex-1 sm:flex-none border-blue-500/20 text-blue-400 bg-blue-500/10 hover:bg-blue-500/20"
+                    >
+                      <Key className="w-4 h-4 mr-1" />
+                      <span className="hidden sm:inline">View Public Key</span>
+                      <span className="sm:hidden">Key</span>
+                    </Button>
+                  )}
                  <Button
                    onClick={() => handleEdit(server)}
                    variant="outline"
@@ -228,6 +295,35 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
          )}
        </div>
      ))}
+      
+      {/* Confirmation Modal */}
+      {confirmationModal && (
+        <ConfirmationModal
+          isOpen={confirmationModal.isOpen}
+          onClose={() => setConfirmationModal(null)}
+          onConfirm={confirmationModal.onConfirm}
+          title={confirmationModal.title}
+          message={confirmationModal.message}
+          variant={confirmationModal.variant}
+          confirmText={confirmationModal.confirmText}
+          confirmButtonText="Delete Server"
+          cancelButtonText="Cancel"
+        />
+      )}
+      
+      {/* Public Key Modal */}
+      {publicKeyData && (
+        <PublicKeyModal
+          isOpen={showPublicKeyModal}
+          onClose={() => {
+            setShowPublicKeyModal(false);
+            setPublicKeyData(null);
+          }}
+          publicKey={publicKeyData.publicKey}
+          serverName={publicKeyData.serverName}
+          serverIp={publicKeyData.serverIp}
+        />
+      )}
    </div>
  );
 }
--- a/src/app/_components/Terminal.tsx
+++ b/src/app/_components/Terminal.tsx
@@ -11,6 +11,7 @@ interface TerminalProps {
  mode?: 'local' | 'ssh';
  server?: any;
  isUpdate?: boolean;
+  isShell?: boolean;
  containerId?: string;
 }

@@ -20,7 +21,7 @@ interface TerminalMessage {
  timestamp: number;
 }

-export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate = false, containerId }: TerminalProps) {
+export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate = false, isShell = false, containerId }: TerminalProps) {
  const [isConnected, setIsConnected] = useState(false);
  const [isRunning, setIsRunning] = useState(false);
  const [isClient, setIsClient] = useState(false);
@@ -332,6 +333,7 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
            mode,
            server,
            isUpdate,
+            isShell,
            containerId
          };
          ws.send(JSON.stringify(message));
@@ -372,7 +374,7 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
        wsRef.current.close();
      }
    };
-  }, [scriptPath, mode, server, isUpdate, containerId, isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [scriptPath, mode, server, isUpdate, isShell, containerId, isMobile]); // eslint-disable-line react-hooks/exhaustive-deps

  const startScript = () => {
    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN && !isRunning) {
@@ -388,6 +390,7 @@ export function Terminal({ scriptPath, onClose, mode = 'local', server, isUpdate
        mode,
        server,
        isUpdate,
+        isShell,
        containerId
      }));
    }
--- a/src/app/_components/ui/button.tsx
+++ b/src/app/_components/ui/button.tsx
@@ -37,6 +37,10 @@ const buttonVariants = cva(
        // Dark theme action button variants
        edit: "bg-blue-900/20 hover:bg-blue-900/30 border border-blue-700/50 text-blue-300 hover:text-blue-200 hover:border-blue-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
        update: "bg-cyan-900/20 hover:bg-cyan-900/30 border border-cyan-700/50 text-cyan-300 hover:text-cyan-200 hover:border-cyan-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        shell: "bg-gray-800/20 hover:bg-gray-800/30 border border-gray-600/50 text-gray-300 hover:text-gray-200 hover:border-gray-500/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        openui: "bg-blue-900/20 hover:bg-blue-900/30 border border-blue-700/50 text-blue-300 hover:text-blue-200 hover:border-blue-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        start: "bg-green-900/20 hover:bg-green-900/30 border border-green-700/50 text-green-300 hover:text-green-200 hover:border-green-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        stop: "bg-red-900/20 hover:bg-red-900/30 border border-red-700/50 text-red-300 hover:text-red-200 hover:border-red-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
        delete: "bg-red-900/20 hover:bg-red-900/30 border border-red-700/50 text-red-300 hover:text-red-200 hover:border-red-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:hover:scale-100",
        save: "bg-green-900/20 hover:bg-green-900/30 border border-green-700/50 text-green-300 hover:text-green-200 hover:border-green-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:hover:scale-100",
        cancel: "bg-gray-800/20 hover:bg-gray-800/30 border border-gray-600/50 text-gray-300 hover:text-gray-200 hover:border-gray-500/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
--- a/src/app/_components/ui/dropdown-menu.tsx
+++ b/src/app/_components/ui/dropdown-menu.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "~/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
--- a/src/app/api/servers/[id]/public-key/route.ts
+++ b/src/app/api/servers/[id]/public-key/route.ts
@@ -0,0 +1,64 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import { getDatabase } from '../../../../../server/database';
+import { getSSHService } from '../../../../../server/ssh-service';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id: idParam } = await params;
+    const id = parseInt(idParam);
+    if (isNaN(id)) {
+      return NextResponse.json(
+        { error: 'Invalid server ID' },
+        { status: 400 }
+      );
+    }
+
+    const db = getDatabase();
+    const server = db.getServerById(id);
+    
+    if (!server) {
+      return NextResponse.json(
+        { error: 'Server not found' },
+        { status: 404 }
+      );
+    }
+
+    // Only allow viewing public key if it was generated by the system
+    if (!(server as any).key_generated) {
+      return NextResponse.json(
+        { error: 'Public key not available for user-provided keys' },
+        { status: 403 }
+      );
+    }
+
+    if (!(server as any).ssh_key_path) {
+      return NextResponse.json(
+        { error: 'SSH key path not found' },
+        { status: 404 }
+      );
+    }
+
+    const sshService = getSSHService();
+    const publicKey = sshService.getPublicKey((server as any).ssh_key_path as string);
+    
+    return NextResponse.json({
+      success: true,
+      publicKey,
+      serverName: (server as any).name,
+      serverIp: (server as any).ip
+    });
+  } catch (error) {
+    console.error('Error retrieving public key:', error);
+    return NextResponse.json(
+      { 
+        success: false,
+        error: error instanceof Error ? error.message : String(error)
+      },
+      { status: 500 }
+    );
+  }
+}
--- a/src/app/api/servers/[id]/route.ts
+++ b/src/app/api/servers/[id]/route.ts
@@ -52,7 +52,7 @@ export async function PUT(
    }

    const body = await request.json();
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color }: CreateServerData = body;
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color, key_generated, ssh_key_path }: CreateServerData = body;

    // Validate required fields
    if (!name || !ip || !user) {
@@ -73,7 +73,7 @@ export async function PUT(
    // Validate authentication based on auth_type
    const authType = auth_type ?? 'password';
    
-    if (authType === 'password' || authType === 'both') {
+    if (authType === 'password') {
      if (!password?.trim()) {
        return NextResponse.json(
          { error: 'Password is required for password authentication' },
@@ -82,7 +82,7 @@ export async function PUT(
      }
    }
    
-    if (authType === 'key' || authType === 'both') {
+    if (authType === 'key') {
      if (!ssh_key?.trim()) {
        return NextResponse.json(
          { error: 'SSH key is required for key authentication' },
@@ -91,15 +91,6 @@ export async function PUT(
      }
    }

-    // Check if at least one authentication method is provided
-    if (authType === 'both') {
-      if (!password?.trim() && !ssh_key?.trim()) {
-        return NextResponse.json(
-          { error: 'At least one authentication method (password or SSH key) is required' },
-          { status: 400 }
-        );
-      }
-    }

    const db = getDatabase();
    
@@ -121,7 +112,9 @@ export async function PUT(
      ssh_key,
      ssh_key_passphrase,
      ssh_port: ssh_port ?? 22,
-      color
+      color,
+      key_generated: key_generated ?? 0,
+      ssh_key_path
    });
    
    return NextResponse.json(
@@ -173,6 +166,9 @@ export async function DELETE(
      );
    }

+    // Delete all installed scripts associated with this server
+    db.deleteInstalledScriptsByServer(id);
+
    const result = db.deleteServer(id);
    
    return NextResponse.json(
--- a/src/app/api/servers/generate-keypair/route.ts
+++ b/src/app/api/servers/generate-keypair/route.ts
@@ -0,0 +1,32 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import { getSSHService } from '../../../../server/ssh-service';
+import { getDatabase } from '../../../../server/database';
+
+export async function POST(_request: NextRequest) {
+  try {
+    const sshService = getSSHService();
+    const db = getDatabase();
+    
+    // Get the next available server ID for key file naming
+    const serverId = db.getNextServerId();
+    
+    const keyPair = await sshService.generateKeyPair(serverId);
+    
+    return NextResponse.json({
+      success: true,
+      privateKey: keyPair.privateKey,
+      publicKey: keyPair.publicKey,
+      serverId: serverId
+    });
+  } catch (error) {
+    console.error('Error generating SSH key pair:', error);
+    return NextResponse.json(
+      { 
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to generate SSH key pair'
+      },
+      { status: 500 }
+    );
+  }
+}
--- a/src/app/api/servers/route.ts
+++ b/src/app/api/servers/route.ts
@@ -20,7 +20,7 @@ export async function GET() {
 export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color }: CreateServerData = body;
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color, key_generated, ssh_key_path }: CreateServerData = body;

    // Validate required fields
    if (!name || !ip || !user) {
@@ -41,7 +41,7 @@ export async function POST(request: NextRequest) {
    // Validate authentication based on auth_type
    const authType = auth_type ?? 'password';
    
-    if (authType === 'password' || authType === 'both') {
+    if (authType === 'password') {
      if (!password?.trim()) {
        return NextResponse.json(
          { error: 'Password is required for password authentication' },
@@ -50,7 +50,7 @@ export async function POST(request: NextRequest) {
      }
    }
    
-    if (authType === 'key' || authType === 'both') {
+    if (authType === 'key') {
      if (!ssh_key?.trim()) {
        return NextResponse.json(
          { error: 'SSH key is required for key authentication' },
@@ -59,15 +59,6 @@ export async function POST(request: NextRequest) {
      }
    }

-    // Check if at least one authentication method is provided
-    if (authType === 'both') {
-      if (!password?.trim() && !ssh_key?.trim()) {
-        return NextResponse.json(
-          { error: 'At least one authentication method (password or SSH key) is required' },
-          { status: 400 }
-        );
-      }
-    }

    const db = getDatabase();
    const result = db.createServer({ 
@@ -79,7 +70,9 @@ export async function POST(request: NextRequest) {
      ssh_key,
      ssh_key_passphrase,
      ssh_port: ssh_port ?? 22,
-      color
+      color,
+      key_generated: key_generated ?? 0,
+      ssh_key_path
    });
    
    return NextResponse.json(
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -20,7 +20,13 @@ import { api } from '~/trpc/react';

 export default function Home() {
  const [runningScript, setRunningScript] = useState<{ path: string; name: string; mode?: 'local' | 'ssh'; server?: any } | null>(null);
-  const [activeTab, setActiveTab] = useState<'scripts' | 'downloaded' | 'installed'>('scripts');
+  const [activeTab, setActiveTab] = useState<'scripts' | 'downloaded' | 'installed'>(() => {
+    if (typeof window !== 'undefined') {
+      const savedTab = localStorage.getItem('activeTab') as 'scripts' | 'downloaded' | 'installed';
+      return savedTab || 'scripts';
+    }
+    return 'scripts';
+  });
  const [releaseNotesOpen, setReleaseNotesOpen] = useState(false);
  const [highlightVersion, setHighlightVersion] = useState<string | undefined>(undefined);
  const terminalRef = useRef<HTMLDivElement>(null);
@@ -31,6 +37,13 @@ export default function Home() {
  const { data: installedScriptsData } = api.installedScripts.getAllInstalledScripts.useQuery();
  const { data: versionData } = api.version.getCurrentVersion.useQuery();

+  // Save active tab to localStorage whenever it changes
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('activeTab', activeTab);
+    }
+  }, [activeTab]);
+
  // Auto-show release notes modal after update
  useEffect(() => {
    if (versionData?.success && versionData.version) {
@@ -57,15 +70,42 @@ export default function Home() {

  // Calculate script counts
  const scriptCounts = {
-    available: scriptCardsData?.success ? scriptCardsData.cards?.length ?? 0 : 0,
+    available: (() => {
+      if (!scriptCardsData?.success) return 0;
+      
+      // Deduplicate scripts using Map by slug (same logic as ScriptsGrid.tsx)
+      const scriptMap = new Map<string, any>();
+      
+      scriptCardsData.cards?.forEach(script => {
+        if (script?.name && script?.slug) {
+          // Use slug as unique identifier, only keep first occurrence
+          if (!scriptMap.has(script.slug)) {
+            scriptMap.set(script.slug, script);
+          }
+        }
+      });
+      
+      return scriptMap.size;
+    })(),
    downloaded: (() => {
      if (!scriptCardsData?.success || !localScriptsData?.scripts) return 0;
      
-      // Count scripts that are both in GitHub data and have local versions
-      const githubScripts = scriptCardsData.cards ?? [];
+      // First deduplicate GitHub scripts using Map by slug
+      const scriptMap = new Map<string, any>();
+      
+      scriptCardsData.cards?.forEach(script => {
+        if (script?.name && script?.slug) {
+          if (!scriptMap.has(script.slug)) {
+            scriptMap.set(script.slug, script);
+          }
+        }
+      });
+      
+      const deduplicatedGithubScripts = Array.from(scriptMap.values());
      const localScripts = localScriptsData.scripts ?? [];
      
-      return githubScripts.filter(script => {
+      // Count scripts that are both in deduplicated GitHub data and have local versions
+      return deduplicatedGithubScripts.filter(script => {
        if (!script?.name) return false;
        return localScripts.some(local => {
          if (!local?.name) return false;
@@ -107,7 +147,7 @@ export default function Home() {
        {/* Header */}
        <div className="text-center mb-6 sm:mb-8">
          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground mb-2 flex items-center justify-center gap-2 sm:gap-3">
-            <Rocket className="h-6 w-6 sm:h-8 w-8 lg:h-9 lg:w-9" />
+            
            <span className="break-words">PVE Scripts Management</span>
          </h1>
          <p className="text-sm sm:text-base text-muted-foreground mb-4 px-2">
@@ -131,64 +171,58 @@ export default function Home() {
        {/* Tab Navigation */}
        <div className="mb-6 sm:mb-8">
          <div className="border-b border-border">
-            <nav className="-mb-px flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 lg:space-x-8">
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="ghost"
-                  size="null"
-                  onClick={() => setActiveTab('scripts')}
-                  className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
-                    activeTab === 'scripts'
-                      ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
-                      : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
-                  }`}>
-                  <Package className="h-4 w-4" />
-                  <span className="hidden sm:inline">Available Scripts</span>
-                  <span className="sm:hidden">Available</span>
-                  <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
-                    {scriptCounts.available}
-                  </span>
-                </Button>
+            <nav className="-mb-px flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-1">
+              <Button
+                variant="ghost"
+                size="null"
+                onClick={() => setActiveTab('scripts')}
+                className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
+                  activeTab === 'scripts'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
+                }`}>
+                <Package className="h-4 w-4" />
+                <span className="hidden sm:inline">Available Scripts</span>
+                <span className="sm:hidden">Available</span>
+                <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
+                  {scriptCounts.available}
+                </span>
                <ContextualHelpIcon section="available-scripts" tooltip="Help with Available Scripts" />
-              </div>
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="ghost"
-                  size="null"
-                  onClick={() => setActiveTab('downloaded')}
-                  className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
-                    activeTab === 'downloaded'
-                      ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
-                      : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
-                  }`}>
-                  <HardDrive className="h-4 w-4" />
-                  <span className="hidden sm:inline">Downloaded Scripts</span>
-                  <span className="sm:hidden">Downloaded</span>
-                  <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
-                    {scriptCounts.downloaded}
-                  </span>
-                </Button>
+              </Button>
+              <Button
+                variant="ghost"
+                size="null"
+                onClick={() => setActiveTab('downloaded')}
+                className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
+                  activeTab === 'downloaded'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
+                }`}>
+                <HardDrive className="h-4 w-4" />
+                <span className="hidden sm:inline">Downloaded Scripts</span>
+                <span className="sm:hidden">Downloaded</span>
+                <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
+                  {scriptCounts.downloaded}
+                </span>
                <ContextualHelpIcon section="downloaded-scripts" tooltip="Help with Downloaded Scripts" />
-              </div>
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="ghost"
-                  size="null"
-                  onClick={() => setActiveTab('installed')}
-                  className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
-                    activeTab === 'installed'
-                      ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
-                      : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
-                  }`}>
-                  <FolderOpen className="h-4 w-4" />
-                  <span className="hidden sm:inline">Installed Scripts</span>
-                  <span className="sm:hidden">Installed</span>
-                  <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
-                    {scriptCounts.installed}
-                  </span>
-                </Button>
+              </Button>
+              <Button
+                variant="ghost"
+                size="null"
+                onClick={() => setActiveTab('installed')}
+                className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
+                  activeTab === 'installed'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
+                }`}>
+                <FolderOpen className="h-4 w-4" />
+                <span className="hidden sm:inline">Installed Scripts</span>
+                <span className="sm:hidden">Installed</span>
+                <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
+                  {scriptCounts.installed}
+                </span>
                <ContextualHelpIcon section="installed-scripts" tooltip="Help with Installed Scripts" />
-              </div>
+              </Button>
            </nav>
          </div>
        </div>
--- a/src/lib/colorUtils.ts
+++ b/src/lib/colorUtils.ts
@@ -3,7 +3,7 @@
 * to ensure optimal readability based on luminance
 */
 export function getContrastColor(hexColor: string): 'black' | 'white' {
-  if (!hexColor || hexColor.length !== 7 || !hexColor.startsWith('#')) {
+  if (!hexColor?.length || hexColor.length !== 7 || !hexColor.startsWith('#')) {
    return 'black'; // Default to black for invalid colors
  }

--- a/src/server/api/routers/installedScripts.ts
+++ b/src/server/api/routers/installedScripts.ts
@@ -83,7 +83,9 @@ export const installedScriptsRouter = createTRPCRouter({
      server_id: z.number().optional(),
      execution_mode: z.enum(['local', 'ssh']),
      status: z.enum(['in_progress', 'success', 'failed']),
-      output_log: z.string().optional()
+      output_log: z.string().optional(),
+      web_ui_ip: z.string().optional(),
+      web_ui_port: z.number().optional()
    }))
    .mutation(async ({ input }) => {
      try {
@@ -110,7 +112,9 @@ export const installedScriptsRouter = createTRPCRouter({
      script_name: z.string().optional(),
      container_id: z.string().optional(),
      status: z.enum(['in_progress', 'success', 'failed']).optional(),
-      output_log: z.string().optional()
+      output_log: z.string().optional(),
+      web_ui_ip: z.string().optional(),
+      web_ui_port: z.number().optional()
    }))
    .mutation(async ({ input }) => {
      try {
@@ -551,23 +555,31 @@ export const installedScriptsRouter = createTRPCRouter({
            const listCommand = 'pct list';
            let listOutput = '';
            
-            await new Promise<void>((resolve, reject) => {
-              void sshExecutionService.executeCommand(
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                server as any,
-                listCommand,
-                (data: string) => {
-                  listOutput += data;
-                },
-                (error: string) => {
-                  console.error(`pct list error on server ${(server as any).name}:`, error);
-                  reject(new Error(error));
-                },
-                (_exitCode: number) => {
-                  resolve();
-                }
-              );
+            // Add timeout to prevent hanging connections
+            const timeoutPromise = new Promise<never>((_, reject) => {
+              setTimeout(() => reject(new Error('SSH command timeout after 30 seconds')), 30000);
            });
+            
+            await Promise.race([
+              new Promise<void>((resolve, reject) => {
+                void sshExecutionService.executeCommand(
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                  server as any,
+                  listCommand,
+                  (data: string) => {
+                    listOutput += data;
+                  },
+                  (error: string) => {
+                    console.error(`pct list error on server ${(server as any).name}:`, error);
+                    reject(new Error(error));
+                  },
+                  (_exitCode: number) => {
+                    resolve();
+                  }
+                );
+              }),
+              timeoutPromise
+            ]);

            // Parse pct list output
            const lines = listOutput.split('\n').filter(line => line.trim());
@@ -906,9 +918,8 @@ export const installedScriptsRouter = createTRPCRouter({
              );
            });
          }
-        } catch (_error) {
-          // If status check fails, continue with destroy attempt
-          // The destroy command will handle the error appropriately
+        } catch {
+
        }

        // Execute destroy command
@@ -965,5 +976,179 @@ export const installedScriptsRouter = createTRPCRouter({
          error: error instanceof Error ? error.message : 'Failed to destroy container'
        };
      }
+    }),
+
+  // Auto-detect Web UI IP and port
+  autoDetectWebUI: publicProcedure
+    .input(z.object({ id: z.number() }))
+    .mutation(async ({ input }) => {
+      try {
+        console.log('🔍 Auto-detect WebUI called with id:', input.id);
+        const db = getDatabase();
+        const script = db.getInstalledScriptById(input.id);
+        
+        if (!script) {
+          console.log('❌ Script not found for id:', input.id);
+          return {
+            success: false,
+            error: 'Script not found'
+          };
+        }
+
+        const scriptData = script as any;
+        console.log('📋 Script data:', {
+          id: scriptData.id,
+          execution_mode: scriptData.execution_mode,
+          server_id: scriptData.server_id,
+          container_id: scriptData.container_id
+        });
+        
+        // Only works for SSH mode scripts with container_id
+        if (scriptData.execution_mode !== 'ssh' || !scriptData.server_id || !scriptData.container_id) {
+          console.log('❌ Validation failed - not SSH mode or missing server/container ID');
+          return {
+            success: false,
+            error: 'Auto-detect only works for SSH mode scripts with container ID'
+          };
+        }
+
+        // Get server info
+        const server = db.getServerById(Number(scriptData.server_id));
+        if (!server) {
+          console.log('❌ Server not found for id:', scriptData.server_id);
+          return {
+            success: false,
+            error: 'Server not found'
+          };
+        }
+
+        console.log('🖥️ Server found:', { id: (server as any).id, name: (server as any).name, ip: (server as any).ip });
+
+        // Import SSH services
+        const { default: SSHService } = await import('~/server/ssh-service');
+        const { default: SSHExecutionService } = await import('~/server/ssh-execution-service');
+        const sshService = new SSHService();
+        const sshExecutionService = new SSHExecutionService();
+
+        // Test SSH connection first
+        console.log('🔌 Testing SSH connection...');
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        const connectionTest = await sshService.testSSHConnection(server as any);
+        if (!(connectionTest as any).success) {
+          console.log('❌ SSH connection failed:', (connectionTest as any).error);
+          return {
+            success: false,
+            error: `SSH connection failed: ${(connectionTest as any).error ?? 'Unknown error'}`
+          };
+        }
+
+        console.log('✅ SSH connection successful');
+
+        // Run hostname -I inside the container
+        // Use pct exec instead of pct enter -c (which doesn't exist)
+        const hostnameCommand = `pct exec ${scriptData.container_id} -- hostname -I`;
+        console.log('🚀 Running command:', hostnameCommand);
+        let commandOutput = '';
+        
+        await new Promise<void>((resolve, reject) => {
+          void sshExecutionService.executeCommand(
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            server as any,
+            hostnameCommand,
+            (data: string) => {
+              console.log('📤 Command output chunk:', data);
+              commandOutput += data;
+            },
+            (error: string) => {
+              console.log('❌ Command error:', error);
+              reject(new Error(error));
+            },
+            (exitCode: number) => {
+              console.log('🏁 Command finished with exit code:', exitCode);
+              if (exitCode !== 0) {
+                reject(new Error(`Command failed with exit code ${exitCode}`));
+              } else {
+                resolve();
+              }
+            }
+          );
+        });
+
+        // Parse output to get first IP address
+        console.log('📝 Full command output:', commandOutput);
+        const ips = commandOutput.trim().split(/\s+/);
+        const detectedIp = ips[0];
+        console.log('🔍 Parsed IPs:', ips);
+        console.log('🎯 Detected IP:', detectedIp);
+        
+        if (!detectedIp || !/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.exec(detectedIp)) {
+          console.log('❌ Invalid IP address detected:', detectedIp);
+          return {
+            success: false,
+            error: 'Could not detect valid IP address from container'
+          };
+        }
+
+        // Get the script's interface_port from metadata (prioritize metadata over existing database values)
+        let detectedPort = 80; // Default fallback
+        
+        try {
+          // Import localScriptsService to get script metadata
+          const { localScriptsService } = await import('~/server/services/localScripts');
+          
+          // Get all scripts and find the one matching our script name
+          const allScripts = await localScriptsService.getAllScripts();
+          
+          // Extract script slug from script_name (remove .sh extension)
+          const scriptSlug = scriptData.script_name.replace(/\.sh$/, '');
+          console.log('🔍 Looking for script with slug:', scriptSlug);
+          
+          const scriptMetadata = allScripts.find(script => script.slug === scriptSlug);
+          
+          if (scriptMetadata?.interface_port) {
+            detectedPort = scriptMetadata.interface_port;
+            console.log('📋 Found interface_port in metadata:', detectedPort);
+          } else {
+            console.log('📋 No interface_port found in metadata, using default port 80');
+            detectedPort = 80; // Default to port 80 if no metadata port found
+          }
+        } catch (error) {
+          console.log('⚠️ Error getting script metadata, using default port 80:', error);
+          detectedPort = 80; // Default to port 80 if metadata lookup fails
+        }
+        
+        console.log('🎯 Final detected port:', detectedPort);
+        
+        // Update the database with detected IP and port
+        console.log('💾 Updating database with IP:', detectedIp, 'Port:', detectedPort);
+        const updateResult = db.updateInstalledScript(input.id, {
+          web_ui_ip: detectedIp,
+          web_ui_port: detectedPort
+        });
+
+        if (updateResult.changes === 0) {
+          console.log('❌ Database update failed - no changes made');
+          return {
+            success: false,
+            error: 'Failed to update database with detected IP'
+          };
+        }
+
+        console.log('✅ Successfully updated database');
+        return {
+          success: true,
+          message: `Successfully detected IP: ${detectedIp}:${detectedPort} for LXC ${scriptData.container_id} on ${(server as any).name}`,
+          detectedIp,
+          detectedPort: detectedPort,
+          containerId: scriptData.container_id,
+          serverName: (server as any).name
+        };
+      } catch (error) {
+        console.error('Error in autoDetectWebUI:', error);
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : 'Failed to auto-detect Web UI IP'
+        };
+      }
    })
 });
--- a/src/server/database.js
+++ b/src/server/database.js
@@ -1,5 +1,7 @@
 import Database from 'better-sqlite3';
 import { join } from 'path';
+import { writeFileSync, unlinkSync, chmodSync, mkdirSync } from 'fs';
+import { existsSync } from 'fs';

 class DatabaseService {
  constructor() {
@@ -9,6 +11,12 @@ class DatabaseService {
  }

  init() {
+    // Ensure data/ssh-keys directory exists
+    const sshKeysDir = join(process.cwd(), 'data', 'ssh-keys');
+    if (!existsSync(sshKeysDir)) {
+      mkdirSync(sshKeysDir, { mode: 0o700 });
+    }
+
    // Create servers table if it doesn't exist
    this.db.exec(`
      CREATE TABLE IF NOT EXISTS servers (
@@ -17,10 +25,12 @@ class DatabaseService {
        ip TEXT NOT NULL,
        user TEXT NOT NULL,
        password TEXT,
-        auth_type TEXT DEFAULT 'password' CHECK(auth_type IN ('password', 'key', 'both')),
+        auth_type TEXT DEFAULT 'password' CHECK(auth_type IN ('password', 'key')),
        ssh_key TEXT,
        ssh_key_passphrase TEXT,
        ssh_port INTEGER DEFAULT 22,
+        ssh_key_path TEXT,
+        key_generated INTEGER DEFAULT 0,
        color TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
@@ -30,7 +40,7 @@ class DatabaseService {
    // Migration: Add new columns to existing servers table
    try {
      this.db.exec(`
-        ALTER TABLE servers ADD COLUMN auth_type TEXT DEFAULT 'password' CHECK(auth_type IN ('password', 'key', 'both'))
+        ALTER TABLE servers ADD COLUMN auth_type TEXT DEFAULT 'password' CHECK(auth_type IN ('password', 'key'))
      `);
    } catch (e) {
      // Column already exists, ignore error
@@ -68,6 +78,22 @@ class DatabaseService {
      // Column already exists, ignore error
    }

+    try {
+      this.db.exec(`
+        ALTER TABLE servers ADD COLUMN ssh_key_path TEXT
+      `);
+    } catch (e) {
+      // Column already exists, ignore error
+    }
+
+    try {
+      this.db.exec(`
+        ALTER TABLE servers ADD COLUMN key_generated INTEGER DEFAULT 0
+      `);
+    } catch (e) {
+      // Column already exists, ignore error
+    }
+
    // Update existing servers to have auth_type='password' if not set
    this.db.exec(`
      UPDATE servers SET auth_type = 'password' WHERE auth_type IS NULL
@@ -78,6 +104,34 @@ class DatabaseService {
      UPDATE servers SET ssh_port = 22 WHERE ssh_port IS NULL
    `);

+    // Migration: Convert 'both' auth_type to 'key'
+    this.db.exec(`
+      UPDATE servers SET auth_type = 'key' WHERE auth_type = 'both'
+    `);
+
+    // Update existing servers to have key_generated=0 if not set
+    this.db.exec(`
+      UPDATE servers SET key_generated = 0 WHERE key_generated IS NULL
+    `);
+
+    // Migration: Add web_ui_ip column to existing installed_scripts table
+    try {
+      this.db.exec(`
+        ALTER TABLE installed_scripts ADD COLUMN web_ui_ip TEXT
+      `);
+    } catch (e) {
+      // Column already exists, ignore error
+    }
+
+    // Migration: Add web_ui_port column to existing installed_scripts table
+    try {
+      this.db.exec(`
+        ALTER TABLE installed_scripts ADD COLUMN web_ui_port INTEGER
+      `);
+    } catch (e) {
+      // Column already exists, ignore error
+    }
+
    // Create installed_scripts table if it doesn't exist
    this.db.exec(`
      CREATE TABLE IF NOT EXISTS installed_scripts (
@@ -90,6 +144,8 @@ class DatabaseService {
        installation_date DATETIME DEFAULT CURRENT_TIMESTAMP,
        status TEXT NOT NULL CHECK(status IN ('in_progress', 'success', 'failed')),
        output_log TEXT,
+        web_ui_ip TEXT,
+        web_ui_port INTEGER,
        FOREIGN KEY (server_id) REFERENCES servers(id) ON DELETE SET NULL
      )
    `);
@@ -109,12 +165,21 @@ class DatabaseService {
   * @param {import('../types/server').CreateServerData} serverData
   */
  createServer(serverData) {
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color } = serverData;
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color, key_generated } = serverData;
+    
+    let ssh_key_path = null;
+    
+    // If using SSH key authentication, create persistent key file
+    if (auth_type === 'key' && ssh_key) {
+      const serverId = this.getNextServerId();
+      ssh_key_path = this.createSSHKeyFile(serverId, ssh_key);
+    }
+    
    const stmt = this.db.prepare(`
-      INSERT INTO servers (name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color) 
-      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+      INSERT INTO servers (name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, ssh_key_path, key_generated, color) 
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
    `);
-    return stmt.run(name, ip, user, password, auth_type || 'password', ssh_key, ssh_key_passphrase, ssh_port || 22, color);
+    return stmt.run(name, ip, user, password, auth_type || 'password', ssh_key, ssh_key_passphrase, ssh_port || 22, ssh_key_path, key_generated || 0, color);
  }

  getAllServers() {
@@ -135,19 +200,85 @@ class DatabaseService {
   * @param {import('../types/server').CreateServerData} serverData
   */
  updateServer(id, serverData) {
-    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color } = serverData;
+    const { name, ip, user, password, auth_type, ssh_key, ssh_key_passphrase, ssh_port, color, key_generated } = serverData;
+    
+    // Get existing server to check for key changes
+    const existingServer = this.getServerById(id);
+    // @ts-ignore - Database migration adds this column
+    let ssh_key_path = existingServer?.ssh_key_path;
+    
+    // Handle SSH key changes
+    if (auth_type === 'key' && ssh_key) {
+      // Delete old key file if it exists
+      // @ts-ignore - Database migration adds this column
+      if (existingServer?.ssh_key_path && existsSync(existingServer.ssh_key_path)) {
+        try {
+          // @ts-ignore - Database migration adds this column
+          unlinkSync(existingServer.ssh_key_path);
+          // Also delete public key file if it exists
+          // @ts-ignore - Database migration adds this column
+          const pubKeyPath = existingServer.ssh_key_path + '.pub';
+          if (existsSync(pubKeyPath)) {
+            unlinkSync(pubKeyPath);
+          }
+        } catch (error) {
+          console.warn('Failed to delete old SSH key file:', error);
+        }
+      }
+      
+      // Create new key file
+      ssh_key_path = this.createSSHKeyFile(id, ssh_key);
+    } else if (auth_type !== 'key') {
+      // If switching away from key auth, delete key files
+      // @ts-ignore - Database migration adds this column
+      if (existingServer?.ssh_key_path && existsSync(existingServer.ssh_key_path)) {
+        try {
+          // @ts-ignore - Database migration adds this column
+          unlinkSync(existingServer.ssh_key_path);
+          // @ts-ignore - Database migration adds this column
+          const pubKeyPath = existingServer.ssh_key_path + '.pub';
+          if (existsSync(pubKeyPath)) {
+            unlinkSync(pubKeyPath);
+          }
+        } catch (error) {
+          console.warn('Failed to delete SSH key file:', error);
+        }
+      }
+      ssh_key_path = null;
+    }
+    
    const stmt = this.db.prepare(`
      UPDATE servers 
-      SET name = ?, ip = ?, user = ?, password = ?, auth_type = ?, ssh_key = ?, ssh_key_passphrase = ?, ssh_port = ?, color = ?
+      SET name = ?, ip = ?, user = ?, password = ?, auth_type = ?, ssh_key = ?, ssh_key_passphrase = ?, ssh_port = ?, ssh_key_path = ?, key_generated = ?, color = ?
      WHERE id = ?
    `);
-    return stmt.run(name, ip, user, password, auth_type || 'password', ssh_key, ssh_key_passphrase, ssh_port || 22, color, id);
+    // @ts-ignore - Database migration adds this column
+    return stmt.run(name, ip, user, password, auth_type || 'password', ssh_key, ssh_key_passphrase, ssh_port || 22, ssh_key_path, key_generated !== undefined ? key_generated : (existingServer?.key_generated || 0), color, id);
  }

  /**
   * @param {number} id
   */
  deleteServer(id) {
+    // Get server info before deletion to clean up key files
+    const server = this.getServerById(id);
+    
+    // Delete SSH key files if they exist
+    // @ts-ignore - Database migration adds this column
+    if (server?.ssh_key_path && existsSync(server.ssh_key_path)) {
+      try {
+        // @ts-ignore - Database migration adds this column
+        unlinkSync(server.ssh_key_path);
+        // @ts-ignore - Database migration adds this column
+        const pubKeyPath = server.ssh_key_path + '.pub';
+        if (existsSync(pubKeyPath)) {
+          unlinkSync(pubKeyPath);
+        }
+      } catch (error) {
+        console.warn('Failed to delete SSH key file:', error);
+      }
+    }
+    
    const stmt = this.db.prepare('DELETE FROM servers WHERE id = ?');
    return stmt.run(id);
  }
@@ -162,14 +293,16 @@ class DatabaseService {
   * @param {string} scriptData.execution_mode
   * @param {string} scriptData.status
   * @param {string} [scriptData.output_log]
+   * @param {string} [scriptData.web_ui_ip]
+   * @param {number} [scriptData.web_ui_port]
   */
  createInstalledScript(scriptData) {
-    const { script_name, script_path, container_id, server_id, execution_mode, status, output_log } = scriptData;
+    const { script_name, script_path, container_id, server_id, execution_mode, status, output_log, web_ui_ip, web_ui_port } = scriptData;
    const stmt = this.db.prepare(`
-      INSERT INTO installed_scripts (script_name, script_path, container_id, server_id, execution_mode, status, output_log) 
-      VALUES (?, ?, ?, ?, ?, ?, ?)
+      INSERT INTO installed_scripts (script_name, script_path, container_id, server_id, execution_mode, status, output_log, web_ui_ip, web_ui_port) 
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
    `);
-    return stmt.run(script_name, script_path, container_id || null, server_id || null, execution_mode, status, output_log || null);
+    return stmt.run(script_name, script_path, container_id || null, server_id || null, execution_mode, status, output_log || null, web_ui_ip || null, web_ui_port || null);
  }

  getAllInstalledScripts() {
@@ -180,6 +313,10 @@ class DatabaseService {
        s.ip as server_ip,
        s.user as server_user,
        s.password as server_password,
+        s.auth_type as server_auth_type,
+        s.ssh_key as server_ssh_key,
+        s.ssh_key_passphrase as server_ssh_key_passphrase,
+        s.ssh_port as server_ssh_port,
        s.color as server_color
      FROM installed_scripts inst
      LEFT JOIN servers s ON inst.server_id = s.id
@@ -228,9 +365,11 @@ class DatabaseService {
   * @param {string} [updateData.container_id]
   * @param {string} [updateData.status]
   * @param {string} [updateData.output_log]
+   * @param {string} [updateData.web_ui_ip]
+   * @param {number} [updateData.web_ui_port]
   */
  updateInstalledScript(id, updateData) {
-    const { script_name, container_id, status, output_log } = updateData;
+    const { script_name, container_id, status, output_log, web_ui_ip, web_ui_port } = updateData;
    const updates = [];
    const values = [];

@@ -250,6 +389,14 @@ class DatabaseService {
      updates.push('output_log = ?');
      values.push(output_log);
    }
+    if (web_ui_ip !== undefined) {
+      updates.push('web_ui_ip = ?');
+      values.push(web_ui_ip);
+    }
+    if (web_ui_port !== undefined) {
+      updates.push('web_ui_port = ?');
+      values.push(web_ui_port);
+    }

    if (updates.length === 0) {
      return { changes: 0 };
@@ -272,6 +419,43 @@ class DatabaseService {
    return stmt.run(id);
  }

+  /**
+   * @param {number} server_id
+   */
+  deleteInstalledScriptsByServer(server_id) {
+    const stmt = this.db.prepare('DELETE FROM installed_scripts WHERE server_id = ?');
+    return stmt.run(server_id);
+  }
+
+  /**
+   * Get the next available server ID for key file naming
+   * @returns {number}
+   */
+  getNextServerId() {
+    const stmt = this.db.prepare('SELECT MAX(id) as maxId FROM servers');
+    const result = stmt.get();
+    // @ts-ignore - SQL query result type
+    return (result?.maxId || 0) + 1;
+  }
+
+  /**
+   * Create SSH key file and return the path
+   * @param {number} serverId 
+   * @param {string} sshKey 
+   * @returns {string}
+   */
+  createSSHKeyFile(serverId, sshKey) {
+    const sshKeysDir = join(process.cwd(), 'data', 'ssh-keys');
+    const keyPath = join(sshKeysDir, `server_${serverId}_key`);
+    
+    // Normalize the key: trim any trailing whitespace and ensure exactly one newline at the end
+    const normalizedKey = sshKey.trimEnd() + '\n';
+    writeFileSync(keyPath, normalizedKey);
+    chmodSync(keyPath, 0o600); // Set proper permissions
+    
+    return keyPath;
+  }
+
  close() {
    this.db.close();
  }
--- a/src/server/ssh-execution-service.js
+++ b/src/server/ssh-execution-service.js
@@ -1,8 +1,6 @@
 import { spawn } from 'child_process';
 import { spawn as ptySpawn } from 'node-pty';
-import { writeFileSync, unlinkSync, chmodSync, mkdtempSync, rmdirSync } from 'fs';
-import { join } from 'path';
-import { tmpdir } from 'os';
+import { existsSync } from 'fs';


 /**
@@ -11,41 +9,22 @@ import { tmpdir } from 'os';
 * @property {string} user - Username
 * @property {string} [password] - Password (optional)
 * @property {string} name - Server name
- * @property {string} [auth_type] - Authentication type ('password', 'key', 'both')
+ * @property {string} [auth_type] - Authentication type ('password', 'key')
 * @property {string} [ssh_key] - SSH private key content
 * @property {string} [ssh_key_passphrase] - SSH key passphrase
+ * @property {string} [ssh_key_path] - Path to persistent SSH key file
 * @property {number} [ssh_port] - SSH port (default: 22)
 */

 class SSHExecutionService {
-  /**
-   * Create a temporary SSH key file for authentication
-   * @param {Server} server - Server configuration
-   * @returns {string} Path to temporary key file
-   */
-  createTempKeyFile(server) {
-    const { ssh_key } = server;
-    if (!ssh_key) {
-      throw new Error('SSH key not provided');
-    }
-    
-    const tempDir = mkdtempSync(join(tmpdir(), 'ssh-key-'));
-    const tempKeyPath = join(tempDir, 'private_key');
-    
-    writeFileSync(tempKeyPath, ssh_key);
-    chmodSync(tempKeyPath, 0o600); // Set proper permissions
-    
-    return tempKeyPath;
-  }

  /**
   * Build SSH command arguments based on authentication type
   * @param {Server} server - Server configuration
-   * @param {string|null} [tempKeyPath=null] - Path to temporary key file (if using key auth)
   * @returns {{command: string, args: string[]}} Command and arguments for SSH
   */
-  buildSSHCommand(server, tempKeyPath = null) {
-    const { ip, user, password, auth_type = 'password', ssh_key_passphrase, ssh_port = 22 } = server;
+  buildSSHCommand(server) {
+    const { ip, user, password, auth_type = 'password', ssh_key_passphrase, ssh_key_path, ssh_port = 22 } = server;
    
    const baseArgs = [
      '-t',
@@ -67,12 +46,14 @@ class SSHExecutionService {

    if (auth_type === 'key') {
      // SSH key authentication
-      if (tempKeyPath) {
-        baseArgs.push('-i', tempKeyPath);
-        baseArgs.push('-o', 'PasswordAuthentication=no');
-        baseArgs.push('-o', 'PubkeyAuthentication=yes');
+      if (!ssh_key_path || !existsSync(ssh_key_path)) {
+        throw new Error('SSH key file not found');
      }
      
+      baseArgs.push('-i', ssh_key_path);
+      baseArgs.push('-o', 'PasswordAuthentication=no');
+      baseArgs.push('-o', 'PubkeyAuthentication=yes');
+      
      if (ssh_key_passphrase) {
        return {
          command: 'sshpass',
@@ -84,35 +65,6 @@ class SSHExecutionService {
          args: [...baseArgs, `${user}@${ip}`]
        };
      }
-    } else if (auth_type === 'both') {
-      // Try SSH key first, then password
-      if (tempKeyPath) {
-        baseArgs.push('-i', tempKeyPath);
-        baseArgs.push('-o', 'PasswordAuthentication=yes');
-        baseArgs.push('-o', 'PubkeyAuthentication=yes');
-        
-        if (ssh_key_passphrase) {
-          return {
-            command: 'sshpass',
-            args: ['-P', 'passphrase', '-p', ssh_key_passphrase, 'ssh', ...baseArgs, `${user}@${ip}`]
-          };
-        } else {
-          return {
-            command: 'ssh',
-            args: [...baseArgs, `${user}@${ip}`]
-          };
-        }
-      } else {
-        // Fallback to password
-        if (password) {
-          return {
-            command: 'sshpass',
-            args: ['-p', password, 'ssh', ...baseArgs, '-o', 'PasswordAuthentication=yes', '-o', 'PubkeyAuthentication=no', `${user}@${ip}`]
-          };
-        } else {
-          throw new Error('Password is required for password authentication');
-        }
-      }
    } else {
      // Password authentication (default)
      if (password) {
@@ -136,9 +88,6 @@ class SSHExecutionService {
   * @returns {Promise<Object>} Process information
   */
  async executeScript(server, scriptPath, onData, onError, onExit) {
-    /** @type {string|null} */
-    let tempKeyPath = null;
-    
    try {
      await this.transferScriptsFolder(server, onData, onError);
      
@@ -146,13 +95,8 @@ class SSHExecutionService {
        const relativeScriptPath = scriptPath.startsWith('scripts/') ? scriptPath.substring(8) : scriptPath;
        
        try {
-          // Create temporary key file if using key authentication
-          if (server.auth_type === 'key' || server.auth_type === 'both') {
-            tempKeyPath = this.createTempKeyFile(server);
-          }
-          
          // Build SSH command based on authentication type
-          const { command, args } = this.buildSSHCommand(server, tempKeyPath);
+          const { command, args } = this.buildSSHCommand(server);
          
          // Add the script execution command to the args
          args.push(`cd /tmp/scripts && chmod +x ${relativeScriptPath} && export TERM=xterm-256color && export COLUMNS=120 && export LINES=30 && export COLORTERM=truecolor && export FORCE_COLOR=1 && export NO_COLOR=0 && export CLICOLOR=1 && export CLICOLOR_FORCE=1 && bash ${relativeScriptPath}`);
@@ -191,30 +135,10 @@ class SSHExecutionService {
          process: sshCommand,
          kill: () => {
            sshCommand.kill('SIGTERM');
-            // Clean up temporary key file
-            if (tempKeyPath) {
-              try {
-                unlinkSync(tempKeyPath);
-                const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-                rmdirSync(tempDir);
-              } catch (cleanupError) {
-                console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-              }
-            }
          }
        });
        
        } catch (error) {
-          // Clean up temporary key file on error
-          if (tempKeyPath) {
-            try {
-              unlinkSync(tempKeyPath);
-              const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-              rmdirSync(tempDir);
-            } catch (cleanupError) {
-              console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-            }
-          }
          reject(error);
        }
      });
@@ -233,35 +157,24 @@ class SSHExecutionService {
   * @returns {Promise<void>}
   */
  async transferScriptsFolder(server, onData, onError) {
-    const { ip, user, password, auth_type = 'password', ssh_key, ssh_key_passphrase, ssh_port = 22 } = server;
-    /** @type {string|null} */
-    let tempKeyPath = null;
+    const { ip, user, password, auth_type = 'password', ssh_key_passphrase, ssh_key_path, ssh_port = 22 } = server;
    
    return new Promise((resolve, reject) => {
      try {
-        // Create temporary key file if using key authentication
-        if (auth_type === 'key' || auth_type === 'both') {
-          if (ssh_key) {
-            tempKeyPath = this.createTempKeyFile(server);
-          }
-        }
-        
        // Build rsync command based on authentication type
        let rshCommand;
-        if (auth_type === 'key' && tempKeyPath) {
-          if (ssh_key_passphrase) {
-            rshCommand = `sshpass -P passphrase -p ${ssh_key_passphrase} ssh -i ${tempKeyPath} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
-          } else {
-            rshCommand = `ssh -i ${tempKeyPath} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
+        if (auth_type === 'key') {
+          if (!ssh_key_path || !existsSync(ssh_key_path)) {
+            throw new Error('SSH key file not found');
          }
-        } else if (auth_type === 'both' && tempKeyPath) {
+          
          if (ssh_key_passphrase) {
-            rshCommand = `sshpass -P passphrase -p ${ssh_key_passphrase} ssh -i ${tempKeyPath} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
+            rshCommand = `sshpass -P passphrase -p ${ssh_key_passphrase} ssh -i ${ssh_key_path} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
          } else {
-            rshCommand = `ssh -i ${tempKeyPath} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
+            rshCommand = `ssh -i ${ssh_key_path} -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
          }
        } else {
-          // Fallback to password authentication
+          // Password authentication
          rshCommand = `sshpass -p ${password} ssh -p ${ssh_port} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
        }
        
@@ -290,17 +203,6 @@ class SSHExecutionService {
      });

      rsyncCommand.on('close', (code) => {
-        // Clean up temporary key file
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            unlinkSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
-        
        if (code === 0) {
          resolve();
        } else {
@@ -309,30 +211,10 @@ class SSHExecutionService {
      });

      rsyncCommand.on('error', (error) => {
-        // Clean up temporary key file on error
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            unlinkSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
        reject(error);
      });
      
      } catch (error) {
-        // Clean up temporary key file on error
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            unlinkSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
        reject(error);
      }
    });
@@ -348,18 +230,10 @@ class SSHExecutionService {
   * @returns {Promise<Object>} Process information
   */
  async executeCommand(server, command, onData, onError, onExit) {
-    /** @type {string|null} */
-    let tempKeyPath = null;
-    
    return new Promise((resolve, reject) => {
      try {
-        // Create temporary key file if using key authentication
-        if (server.auth_type === 'key' || server.auth_type === 'both') {
-          tempKeyPath = this.createTempKeyFile(server);
-        }
-        
        // Build SSH command based on authentication type
-        const { command: sshCommandName, args } = this.buildSSHCommand(server, tempKeyPath);
+        const { command: sshCommandName, args } = this.buildSSHCommand(server);
        
        // Add the command to execute to the args
        args.push(command);
@@ -378,16 +252,6 @@ class SSHExecutionService {
      });

      sshCommand.onExit((e) => {
-        // Clean up temporary key file
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            unlinkSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
        onExit(e.exitCode);
      });

@@ -395,30 +259,10 @@ class SSHExecutionService {
        process: sshCommand,
        kill: () => {
          sshCommand.kill('SIGTERM');
-          // Clean up temporary key file
-          if (tempKeyPath) {
-            try {
-              unlinkSync(tempKeyPath);
-              const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-              rmdirSync(tempDir);
-            } catch (cleanupError) {
-              console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-            }
-          }
        }
      });
      
      } catch (error) {
-        // Clean up temporary key file on error
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            unlinkSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
        reject(error);
      }
    });
--- a/src/server/ssh-service.js
+++ b/src/server/ssh-service.js
@@ -1,5 +1,5 @@
 import { spawn } from 'child_process';
-import { writeFileSync, unlinkSync, chmodSync, mkdtempSync, rmdirSync } from 'fs';
+import { writeFileSync, unlinkSync, chmodSync, mkdtempSync, rmdirSync, readFileSync, existsSync } from 'fs';
 import { join } from 'path';
 import { tmpdir } from 'os';

@@ -21,9 +21,6 @@ class SSHService {
      let authPromise;
      if (auth_type === 'key') {
        authPromise = this.testWithSSHKey(server);
-      } else if (auth_type === 'both') {
-        // Try SSH key first, then password
-        authPromise = this.testWithSSHKey(server).catch(() => this.testWithSshpass(server));
      } else {
        // Default to password authentication
        authPromise = this.testWithSshpass(server).catch(() => this.testWithExpect(server));
@@ -540,29 +537,20 @@ expect {
   * @returns {Promise<Object>} Connection test result
   */
  async testWithSSHKey(server) {
-    const { ip, user, ssh_key, ssh_key_passphrase, ssh_port = 22 } = server;
+    const { ip, user, ssh_key_path, ssh_key_passphrase, ssh_port = 22 } = server;
    
-    if (!ssh_key) {
-      throw new Error('SSH key not provided');
+    if (!ssh_key_path || !existsSync(ssh_key_path)) {
+      throw new Error('SSH key file not found');
    }

    return new Promise((resolve, reject) => {
      const timeout = 10000;
      let resolved = false;
-      let tempKeyPath = null;
      
      try {
-        // Create temporary key file
-        const tempDir = mkdtempSync(join(tmpdir(), 'ssh-key-'));
-        tempKeyPath = join(tempDir, 'private_key');
-        
-        // Write the private key to temporary file
-        writeFileSync(tempKeyPath, ssh_key);
-        chmodSync(tempKeyPath, 0o600); // Set proper permissions
-        
        // Build SSH command
        const sshArgs = [
-          '-i', tempKeyPath,
+          '-i', ssh_key_path,
          '-p', ssh_port.toString(),
          '-o', 'ConnectTimeout=10',
          '-o', 'StrictHostKeyChecking=no',
@@ -660,22 +648,82 @@ expect {
          resolved = true;
          reject(error);
        }
-      } finally {
-        // Clean up temporary key file
-        if (tempKeyPath) {
-          try {
-            unlinkSync(tempKeyPath);
-            // Also remove the temp directory
-            const tempDir = tempKeyPath.substring(0, tempKeyPath.lastIndexOf('/'));
-            rmdirSync(tempDir);
-          } catch (cleanupError) {
-            console.warn('Failed to clean up temporary SSH key file:', cleanupError);
-          }
-        }
      }
    });
  }

+  /**
+   * Generate SSH key pair for a server
+   * @param {number} serverId - Server ID for key file naming
+   * @returns {Promise<{privateKey: string, publicKey: string}>}
+   */
+  async generateKeyPair(serverId) {
+    const sshKeysDir = join(process.cwd(), 'data', 'ssh-keys');
+    const keyPath = join(sshKeysDir, `server_${serverId}_key`);
+    
+    return new Promise((resolve, reject) => {
+      const sshKeygen = spawn('ssh-keygen', [
+        '-t', 'ed25519',
+        '-f', keyPath,
+        '-N', '', // No passphrase
+        '-C', 'pve-scripts-local'
+      ], {
+        stdio: ['pipe', 'pipe', 'pipe']
+      });
+
+      let errorOutput = '';
+      
+      sshKeygen.stderr.on('data', (data) => {
+        errorOutput += data.toString();
+      });
+
+      sshKeygen.on('close', (code) => {
+        if (code === 0) {
+          try {
+            // Read the generated private key
+            const privateKey = readFileSync(keyPath, 'utf8');
+            
+            // Read the generated public key
+            const publicKeyPath = keyPath + '.pub';
+            const publicKey = readFileSync(publicKeyPath, 'utf8');
+            
+            // Set proper permissions
+            chmodSync(keyPath, 0o600);
+            chmodSync(publicKeyPath, 0o644);
+            
+            resolve({
+              privateKey,
+              publicKey: publicKey.trim()
+            });
+          } catch (error) {
+            reject(new Error(`Failed to read generated key files: ${error instanceof Error ? error.message : String(error)}`));
+          }
+        } else {
+          reject(new Error(`ssh-keygen failed: ${errorOutput}`));
+        }
+      });
+
+      sshKeygen.on('error', (error) => {
+        reject(new Error(`Failed to run ssh-keygen: ${error.message}`));
+      });
+    });
+  }
+
+  /**
+   * Get public key from private key file
+   * @param {string} keyPath - Path to private key file
+   * @returns {string} Public key content
+   */
+  getPublicKey(keyPath) {
+    const publicKeyPath = keyPath + '.pub';
+    
+    if (!existsSync(publicKeyPath)) {
+      throw new Error('Public key file not found');
+    }
+    
+    return readFileSync(publicKeyPath, 'utf8').trim();
+  }
+
 }

 // Singleton instance
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,4 +1,5 @@
@import "tailwindcss";
+@plugin "@tailwindcss/typography";

@layer base {
  :root {
--- a/src/types/server.ts
+++ b/src/types/server.ts
@@ -4,9 +4,11 @@ export interface Server {
  ip: string;
  user: string;
  password?: string;
-  auth_type?: 'password' | 'key' | 'both';
+  auth_type?: 'password' | 'key';
  ssh_key?: string;
  ssh_key_passphrase?: string;
+  ssh_key_path?: string;
+  key_generated?: number;
  ssh_port?: number;
  color?: string;
  created_at: string;
@@ -18,9 +20,11 @@ export interface CreateServerData {
  ip: string;
  user: string;
  password?: string;
-  auth_type?: 'password' | 'key' | 'both';
+  auth_type?: 'password' | 'key';
  ssh_key?: string;
  ssh_key_passphrase?: string;
+  ssh_key_path?: string;
+  key_generated?: number;
  ssh_port?: number;
  color?: string;
 }
@@ -1 +1 @@
 .3.0
 .4.2