diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..dd8ca7a
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(grep:*)"
+    ],
+    "deny": []
+  }
+}
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index af3b460..0000000
--- a/.eslintignore
+++ /dev/null
@@ -1,2 +0,0 @@
-tailwind.config.js
-vite.config.js
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 6c95b94..0000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-	extends: ['plugin:prettier/recommended'],
-	parserOptions: {
-		ecmaVersion: 'latest',
-		sourceType: 'module'
-	}
-};
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..fc8b2e7
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,112 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Larabase is an Electron desktop application specifically designed for Laravel developers. It's an opinionated database GUI tool with seamless Laravel integration, providing specialized features for Laravel project development workflows.
+
+## Key Commands
+
+### Development
+
+```bash
+# Start development server
+npm run dev
+
+# Build for current platform
+npm run build
+
+# Platform-specific builds
+npm run build:mac-apple   # macOS (Apple Silicon)
+npm run build:mac-intel   # macOS (Intel)
+npm run build:win         # Windows
+npm run build:linux       # Linux
+
+# Code Quality
+npm run lint              # Run ESLint with auto-fix
+npm run format            # Run Prettier formatter
+```
+
+## Architecture Overview
+
+Larabase follows the standard Electron architecture with main and renderer processes:
+
+### Main Process (`electron/`)
+
+- **Main Entry:** `electron/main/index.ts` - Application initialization, window management
+- **Modules:** `electron/modules/` - Backend functionality implemented as service modules
+    - Database operations (`mysql.ts`, `tables.ts`, `sql-executor.ts`)
+    - SSH tunneling (`ssh.ts`)
+    - Redis integration (`redis.ts`)
+    - Project management (`projects.ts`)
+    - Terminal emulation (`terminal.ts`)
+- **Helpers:** `electron/helpers/` - Utility functions for various operations
+
+### Renderer Process (`src/`)
+
+- **Components:** `src/components/` - Vue.js UI components organized by functionality
+- **State Management:** `src/store/` - Pinia stores for application state
+- **Services:** `src/services/` - API communication and frontend services
+- **Types:** `src/types/` - TypeScript interfaces and type definitions
+
+### Communication Pattern
+
+The application follows a communication pattern using Electron's IPC:
+
+1. Front-end requests through `window.electron.ipcRenderer.invoke(channel, ...args)`
+2. Backend handles via IPC handlers registered in modules
+3. Results returned to front-end asynchronously
+
+## Key Features & Implementation
+
+### Database Connections
+
+- Supports direct MySQL connections and SSH tunneling
+- Connection details stored securely via electron-store
+- SSH tunneling implemented using ssh2 library and dynamic port forwarding
+
+### Query Management
+
+- Monaco editor for SQL editing with syntax highlighting
+- SQL execution handled through mysql2 library
+- Results displayed in Vue data table components with sorting/filtering
+
+### Laravel Integration
+
+- Specialized views for Laravel-specific database operations
+- Migration management interface
+- .env file editor
+- Terminal integration for running Artisan commands
+
+### Redis Support
+
+- Redis database browsing and management
+- Key-value storage interaction
+- Cache management operations
+
+## Data Flow
+
+1. User interacts with Vue UI components
+2. Actions trigger state changes in Pinia stores
+3. Stores dispatch IPC calls to Electron backend
+4. Backend modules execute operations and return results
+5. UI updates based on returned data
+6. Always use preload file to expose necessary APIs to the renderer process
+7. Do not comment on the code unless extremely necessary to avoid polluting the codebase
+8. Always create a module in the electron/modules for grouped functionality (e.g., database, SSH, Redis) to maintain organization
+
+## Technology Stack
+
+- **Electron**: Cross-platform desktop framework
+- **Vue.js 3**: Frontend framework with TypeScript
+- **Pinia**: State management
+- **Tailwind CSS & DaisyUI**: Styling
+- **Monaco Editor**: Code editor component
+- **MySQL2**: Database connectivity
+- **SSH2**: SSH tunneling support
+- **IoRedis**: Redis client functionality
+
+## Code Tips and Tricks
+
+- Always use toRaw for reactive objects to avoid errors like "An object could not be cloned."
diff --git a/README.md b/README.md
index 50577f5..899baf4 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,48 @@ npm run build:win         # Windows
 npm run build:linux       # Linux
 ```
 
+## SSH Tunneling Support
+
+Larabase now supports connecting to MySQL databases through SSH tunnels. This feature allows you to:
+
+1. Connect to remote database servers securely via SSH
+2. Work with databases that are not directly accessible from your machine
+3. Maintain the same workflow and functionality as with local database connections
+
+### How SSH Tunneling Works
+
+SSH tunneling creates a secure encrypted channel between your local machine and the remote server:
+
+1. An SSH connection is established to the remote server
+2. A local port is forwarded to the remote database server port
+3. Your connection uses this local port, which securely tunnels traffic to the remote server
+4. All database operations work transparently through this tunnel
+
+### Implementation Details
+
+The SSH tunneling implementation uses:
+
+- The `ssh2` library for SSH connections and port forwarding
+- The `portfinder` library to dynamically find available local ports
+- The existing MySQL connection module, modified to work through SSH tunnels
+
+### Setup
+
+To use SSH tunneling, you need:
+
+1. SSH access to the remote server (user/password or key-based authentication)
+2. The remote server needs access to the MySQL database
+3. Create a connection in Larabase with SSH tunneling enabled
+
+### Usage
+
+When creating a new connection, select the SSH option and provide:
+
+1. SSH server details (host, port, user, password/private key)
+2. Remote database details (host, port, user, password, database name)
+
+Once connected, you can use all Larabase features as you would with a local database.
+
 ## License
 
 This project is licensed under the MIT License - see the LICENSE file for details.
diff --git a/docs/postgresql-implementation.md b/docs/postgresql-implementation.md
deleted file mode 100644
index 21e201b..0000000
--- a/docs/postgresql-implementation.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# PostgreSQL Implementation Guide
-
-This guide provides a step-by-step process for adding PostgreSQL support to Larabase. Each step includes detailed instructions and code examples.
-
-## Implementation Overview
-
-Larabase currently only supports MySQL databases. This implementation will add support for PostgreSQL while maintaining all current MySQL functionality.
-
-## Implementation Steps
-
-1. [Create PostgreSQL Types](./postgresql-implementation/01-types.md)
-2. [Set Up PostgreSQL Helper Module](./postgresql-implementation/02-helper-module.md)
-3. [Create IPC Handlers](./postgresql-implementation/03-ipc-handlers.md)
-4. [Update Database Schema Services](./postgresql-implementation/04-schema-services.md)
-5. [Update SQL Executor](./postgresql-implementation/05-sql-executor.md)
-6. [Update UI Components](./postgresql-implementation/06-ui-components.md)
-7. [Install Dependencies](./postgresql-implementation/07-dependencies.md)
-8. [Testing & Verification](./postgresql-implementation/08-testing.md)
-
-## Implementation Tracking
-
-Use this section to track your progress through the implementation steps:
-
-- [ ] Create PostgreSQL Types
-- [ ] Set Up PostgreSQL Helper Module
-- [ ] Create IPC Handlers
-- [ ] Update Database Schema Services
-- [ ] Update SQL Executor
-- [ ] Update UI Components
-- [ ] Install Dependencies
-- [ ] Testing & Verification
-
-## Notes
-
-- Each markdown file contains detailed instructions and code snippets for the specific implementation step.
-- Code samples include file paths indicating where changes should be made.
-- Some steps may require additional configuration depending on your development environment.
diff --git a/docs/postgresql-implementation/01-types.md b/docs/postgresql-implementation/01-types.md
deleted file mode 100644
index c278739..0000000
--- a/docs/postgresql-implementation/01-types.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# Step 1: Create PostgreSQL Types
-
-In this step, we'll create the necessary TypeScript type definitions for PostgreSQL connections.
-
-## Tasks
-
-- [ ] Create PostgreSQL connection type definition
-- [ ] Update project connection type to support PostgreSQL
-
-## Implementation Details
-
-### 1. Create PostgreSQL Connection Type
-
-Create a new file `src/types/postgresql-connection.d.ts` with the following content:
-
-```typescript
-export interface PostgresqlConnection {
-	database: string;
-	host: string;
-	port: number;
-	user: string;
-	password: string;
-	schema?: string; // PostgreSQL has schema concept
-	ssl?: boolean; // SSL connection option
-	connectTimeout?: number;
-}
-```
-
-### 2. Update Project Connection Type
-
-Modify the `src/types/project.d.ts` file to support PostgreSQL connections:
-
-```typescript
-import { MysqlConnection } from './mysql-connection';
-import { PostgresqlConnection } from './postgresql-connection'; // Add this import
-import { RedisConnection } from './redis';
-import { DockerInfo } from './docker-info';
-
-export interface ProjectConnection {
-	id?: string | null;
-	name: string;
-	projectPath: string;
-	type: string; // Now can be 'mysql' or 'postgresql'
-	icon: string | undefined | null;
-	db_config: MysqlConnection | PostgresqlConnection; // Update this line
-	redis_config: RedisConnection;
-	usingSail: boolean;
-	status: string;
-	isValid: boolean;
-	dockerInfo?: DockerInfo | undefined | null;
-}
-
-// Rest of the file remains unchanged
-```
-
-## Verification
-
-- Confirm both files have been created/updated correctly
-- Ensure there are no TypeScript errors when building the project
-- Verify imports resolve correctly
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 2: Set Up PostgreSQL Helper Module](./02-helper-module.md).
diff --git a/docs/postgresql-implementation/02-helper-module.md b/docs/postgresql-implementation/02-helper-module.md
deleted file mode 100644
index aa749d3..0000000
--- a/docs/postgresql-implementation/02-helper-module.md
+++ /dev/null
@@ -1,209 +0,0 @@
-# Step 2: Set Up PostgreSQL Helper Module
-
-In this step, we'll create a helper module for PostgreSQL similar to the existing MySQL helper module. This will handle connection pooling, testing connections, and other database operations.
-
-## Tasks
-
-- [ ] Install PostgreSQL client library
-- [ ] Create PostgreSQL helper module
-- [ ] Implement connection pool management
-- [ ] Implement connection testing functions
-
-## Implementation Details
-
-### 1. Install PostgreSQL Client Library
-
-First, install the required PostgreSQL client library:
-
-```bash
-npm install pg
-npm install @types/pg --save-dev
-```
-
-### 2. Create PostgreSQL Helper Module
-
-Create a new file `electron/helpers/postgresql.ts` with the following content:
-
-```typescript
-import { Pool, PoolClient, ClientConfig } from 'pg';
-import { PostgresqlConnection } from '../../src/types/postgresql-connection';
-
-const ERROR_MESSAGES = {
-	'28P01': 'Authentication failed with the provided credentials',
-	ECONNREFUSED: 'Connection refused - check host and port',
-	'3D000': (db: string) => `Database '${db}' does not exist`
-};
-
-const SELECT_TEST_SQL = 'SELECT 1 AS connection_test';
-
-const connectionPools = new Map<string, Pool>();
-
-function validateParams({ host, port, user, database }: PostgresqlConnection) {
-	if (!host || !port || !user || !database) {
-		throw new Error('Missing required connection parameters');
-	}
-}
-
-function getPoolKey(
-	config: PostgresqlConnection,
-	useConnectionDb: boolean,
-	targetDatabase: string
-): string {
-	const dbName = useConnectionDb ? config.database : targetDatabase;
-	return `${config.host}:${config.port}:${config.user}:${dbName}:${config.schema || 'public'}`;
-}
-
-function getConnectionOptions(
-	config: PostgresqlConnection,
-	{ useConnectionDb = true, targetDatabase = '' } = {}
-): ClientConfig {
-	return {
-		host: config.host,
-		port: Number(config.port),
-		user: config.user,
-		password: config.password || '',
-		database: useConnectionDb ? config.database : targetDatabase,
-		schema: config.schema || 'public',
-		ssl: config.ssl ? { rejectUnauthorized: false } : undefined,
-		connectionTimeoutMillis: config.connectTimeout || 10000
-	};
-}
-
-function getConnectionPool(
-	config: PostgresqlConnection,
-	{ useConnectionDb = true, targetDatabase = '' } = {}
-): Pool {
-	const poolKey = getPoolKey(config, useConnectionDb, targetDatabase);
-
-	if (!connectionPools.has(poolKey)) {
-		const poolConfig = getConnectionOptions(config, {
-			useConnectionDb,
-			targetDatabase
-		});
-
-		connectionPools.set(poolKey, new Pool(poolConfig));
-	}
-
-	return connectionPools.get(poolKey) as Pool;
-}
-
-async function createConnection(
-	config: PostgresqlConnection,
-	{ useConnectionDb = true, targetDatabase = '' } = {}
-): Promise<PoolClient> {
-	validateParams(config);
-
-	const pool = getConnectionPool(config, { useConnectionDb, targetDatabase });
-
-	return pool.connect();
-}
-
-async function releaseConnection(client: PoolClient) {
-	if (client) {
-		client.release();
-	}
-}
-
-async function safeEndConnection(client: PoolClient) {
-	try {
-		if (client) {
-			client.release();
-		}
-	} catch (error) {
-		console.error('Error releasing PostgreSQL connection:', error);
-	}
-}
-
-async function closeAllPools() {
-	const promises: Promise<void>[] = [];
-
-	for (const pool of connectionPools.values()) {
-		promises.push(pool.end());
-	}
-
-	connectionPools.clear();
-
-	return Promise.all(promises);
-}
-
-async function ping(
-	config: PostgresqlConnection,
-	options: { useConnectionDb?: boolean; targetDatabase?: string } = {}
-) {
-	const client = await createConnection(config, options);
-
-	try {
-		const res = await client.query(SELECT_TEST_SQL);
-
-		if (!Array.isArray(res.rows) || res.rows.length === 0) {
-			throw new Error('Connection established but query failed');
-		}
-	} finally {
-		await releaseConnection(client);
-	}
-}
-
-async function testConnection(config: PostgresqlConnection) {
-	try {
-		await ping(config, { useConnectionDb: true });
-
-		return { success: true, message: 'Connection successful' };
-	} catch (err) {
-		console.error('Error testing PostgreSQL connection:', err);
-
-		const custom = ERROR_MESSAGES[err.code];
-		const message =
-			typeof custom === 'function'
-				? custom(config.database)
-				: custom || err.message;
-
-		return { success: false, message };
-	}
-}
-
-export {
-	createConnection,
-	releaseConnection,
-	safeEndConnection,
-	testConnection,
-	ping,
-	closeAllPools
-};
-```
-
-### 3. Update Main Module Cleanup
-
-In `electron/main/index.ts`, update the cleanup function to close PostgreSQL pools too:
-
-```typescript
-// Import PostgreSQL helper
-import { closeAllPools as closeMysqlPools } from '../helpers/mysql';
-import { closeAllPools as closePostgresPools } from '../helpers/postgresql';
-
-// In app.on('window-all-closed') handler:
-app.on('window-all-closed', () => {
-	win = null;
-
-	cleanup();
-
-	// Close all database connection pools
-	Promise.all([closeMysqlPools(), closePostgresPools()])
-		.catch((err) => {
-			console.error('Error closing database pools:', err);
-		})
-		.finally(() => {
-			if (process.platform === 'darwin') app.quit();
-		});
-});
-```
-
-## Verification
-
-- Ensure PostgreSQL client libraries are installed correctly
-- Verify the helper module is created with all required functions
-- Check that connection pooling works correctly
-- Test the connection functions with valid and invalid credentials
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 3: Create IPC Handlers](./03-ipc-handlers.md).
diff --git a/docs/postgresql-implementation/03-ipc-handlers.md b/docs/postgresql-implementation/03-ipc-handlers.md
deleted file mode 100644
index db7632d..0000000
--- a/docs/postgresql-implementation/03-ipc-handlers.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# Step 3: Create IPC Handlers
-
-In this step, we'll create IPC handlers for PostgreSQL operations, allowing the renderer process (UI) to communicate with the main process for database operations.
-
-## Tasks
-
-- [ ] Create PostgreSQL module for IPC handlers
-- [ ] Update main process to register PostgreSQL handlers
-- [ ] Update preload script to expose PostgreSQL functions
-
-## Implementation Details
-
-### 1. Create PostgreSQL IPC Handlers Module
-
-Create a new file `electron/modules/postgresql.ts` with the following content:
-
-```typescript
-import { ipcMain } from 'electron';
-import {
-	testConnection,
-	createConnection,
-	safeEndConnection
-} from '../helpers/postgresql';
-import { PostgresqlConnection } from '../../src/types/postgresql-connection';
-
-function registerPostgresqlHandlers() {
-	ipcMain.handle(
-		'test-postgresql-connection',
-		async (_, config: PostgresqlConnection) => {
-			return await testConnection(config);
-		}
-	);
-
-	ipcMain.handle(
-		'create-postgresql-database',
-		async (_, config: PostgresqlConnection, databaseName: string) => {
-			if (
-				!config.host ||
-				!config.port ||
-				!config.user ||
-				!config.database
-			) {
-				return {
-					success: false,
-					message: 'Missing connection parameters'
-				};
-			}
-
-			let client: any;
-
-			try {
-				// Connect to the 'postgres' database to create a new database
-				const tempConfig = { ...config };
-				tempConfig.database = 'postgres';
-				client = await createConnection(tempConfig);
-
-				// PostgreSQL requires quoted identifiers for database names with special characters
-				await client.query(`CREATE DATABASE "${databaseName}"`);
-
-				return {
-					success: true,
-					message: `Database ${databaseName} created successfully`
-				};
-			} catch (err) {
-				console.error('Error creating PostgreSQL database:', err);
-				let msg = err.message;
-				if (err.code === '28P01') {
-					msg = 'Authentication failed with the provided credentials';
-				} else if (err.code === 'ECONNREFUSED') {
-					msg = 'Connection refused - check host and port';
-				} else if (err.code === '42P04') {
-					msg = `Database ${databaseName} already exists`;
-				}
-				return {
-					success: false,
-					message: msg
-				};
-			} finally {
-				await safeEndConnection(client);
-			}
-		}
-	);
-
-	ipcMain.handle(
-		'list-postgresql-databases',
-		async (_, config: PostgresqlConnection) => {
-			if (!config.host || !config.port || !config.user) {
-				return {
-					success: false,
-					message: 'Missing connection parameters',
-					databases: []
-				};
-			}
-
-			let client: any;
-
-			try {
-				// Connect to the 'postgres' database to list all databases
-				const tempConfig = { ...config };
-				tempConfig.database = 'postgres';
-				client = await createConnection(tempConfig);
-
-				const result = await client.query(
-					"SELECT datname FROM pg_database WHERE datistemplate = false AND datname NOT IN ('postgres', 'template0', 'template1')"
-				);
-
-				const databases = result.rows.map((row: any) => row.datname);
-
-				return { success: true, databases };
-			} catch (err) {
-				let msg = err.message;
-				if (err.code === '28P01') {
-					msg = 'Authentication failed with the provided credentials';
-				} else if (err.code === 'ECONNREFUSED') {
-					msg = 'Connection refused - check host and port';
-				}
-				return {
-					success: false,
-					message: msg,
-					databases: []
-				};
-			} finally {
-				await safeEndConnection(client);
-			}
-		}
-	);
-}
-
-export { registerPostgresqlHandlers };
-```
-
-### 2. Update Main Process to Register PostgreSQL Handlers
-
-Update `electron/main/index.ts` to register the PostgreSQL handlers:
-
-```typescript
-// Add this import
-import { registerPostgresqlHandlers } from '../modules/postgresql';
-
-// In the registerHandlers function
-function registerHandlers(win: BrowserWindow) {
-	if (handlersRegistered) return;
-
-	registerDatabaseRestoreHandlers(win);
-	registerMonitoringHandlers(win);
-	registerProjectHandlers(win);
-	registerSettingsHandlers(store);
-	registerTablesHandlers();
-	registerMysqlHandlers();
-	registerPostgresqlHandlers(); // Add this line
-	registerRedisHandlers();
-	registerPasswordHandlers();
-	registerTerminalHandlers();
-	registerMigrationHandlers();
-	registerSqlExecutorHandlers();
-	registerUpdaterHandlers(win);
-
-	handlersRegistered = true;
-}
-```
-
-### 3. Update Preload Script to Expose PostgreSQL Functions
-
-Update `electron/preload/index.ts` to expose PostgreSQL functions to the renderer process:
-
-```typescript
-// Add new handlers to the exposed IPC functions
-contextBridge.exposeInMainWorld('ipcRenderer', {
-	// Existing handlers...
-
-	// PostgreSQL handlers
-	testPostgreSQLConnection: (config: any) => {
-		return ipcRenderer.invoke('test-postgresql-connection', config);
-	},
-	createPostgreSQLDatabase: (config: any, dbName: string) => {
-		return ipcRenderer.invoke('create-postgresql-database', config, dbName);
-	},
-	listPostgreSQLDatabases: (config: any) => {
-		return ipcRenderer.invoke('list-postgresql-databases', config);
-	}
-
-	// Other handlers...
-});
-```
-
-## Verification
-
-- Ensure all IPC handlers are properly registered
-- Test the PostgreSQL connection function from the UI
-- Verify database listing works correctly
-- Check error handling for invalid connection parameters
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 4: Update Database Schema Services](./04-schema-services.md).
diff --git a/docs/postgresql-implementation/04-schema-services.md b/docs/postgresql-implementation/04-schema-services.md
deleted file mode 100644
index 6b39917..0000000
--- a/docs/postgresql-implementation/04-schema-services.md
+++ /dev/null
@@ -1,316 +0,0 @@
-# Step 4: Update Database Schema Services
-
-In this step, we'll extend the database schema services to support PostgreSQL. This includes creating functions to retrieve the database schema, tables, columns, and relationships.
-
-## Tasks
-
-- [ ] Add PostgreSQL schema retrieval functions to tables module
-- [ ] Update database schema service to support PostgreSQL
-- [ ] Add IPC handlers for PostgreSQL schema operations
-
-## Implementation Details
-
-### 1. Add PostgreSQL Schema Retrieval Functions
-
-Add the following code to `electron/modules/tables.ts`:
-
-```typescript
-// Import additional required modules
-import {
-	createConnection as createPgConnection,
-	safeEndConnection as safePgEndConnection
-} from '../helpers/postgresql';
-import { PostgresqlConnection } from '../../src/types/postgresql-connection';
-
-// Add this function to retrieve PostgreSQL database schema
-async function getPostgresqlDatabaseSchemaForAIHandler(
-	_: any,
-	config: PostgresqlConnection
-) {
-	let client: any;
-
-	try {
-		client = await createPgConnection(config);
-
-		// Get all tables in the database and schema
-		const schema = config.schema || 'public';
-		const tablesQuery = `
-            SELECT table_name as name
-            FROM information_schema.tables
-            WHERE table_schema = $1
-            AND table_type = 'BASE TABLE'
-        `;
-
-		const tablesResult = await client.query(tablesQuery, [schema]);
-		const tables = tablesResult.rows;
-
-		if (tables.length === 0) {
-			return { success: true, databaseSchema: { tables: [] } };
-		}
-
-		const databaseSchema: { tables: any[] } = { tables: [] };
-
-		for (const table of tables) {
-			const tableName = table.name;
-
-			// Get column information
-			const columnsQuery = `
-                SELECT 
-                    column_name as name,
-                    data_type as type,
-                    is_nullable = 'YES' as nullable,
-                    column_default as default,
-                    '' as extra,
-                    EXISTS (
-                        SELECT 1 FROM information_schema.table_constraints tc
-                        JOIN information_schema.key_column_usage kcu 
-                            ON tc.constraint_name = kcu.constraint_name
-                        WHERE tc.constraint_type = 'PRIMARY KEY'
-                        AND tc.table_schema = $1
-                        AND tc.table_name = $2
-                        AND kcu.column_name = columns.column_name
-                    ) as primary_key,
-                    EXISTS (
-                        SELECT 1 FROM information_schema.table_constraints tc
-                        JOIN information_schema.key_column_usage kcu 
-                            ON tc.constraint_name = kcu.constraint_name
-                        WHERE tc.constraint_type = 'FOREIGN KEY'
-                        AND tc.table_schema = $1
-                        AND tc.table_name = $2
-                        AND kcu.column_name = columns.column_name
-                    ) as foreign_key
-                FROM information_schema.columns
-                WHERE table_schema = $1
-                AND table_name = $2
-                ORDER BY ordinal_position
-            `;
-
-			const columnsResult = await client.query(columnsQuery, [
-				schema,
-				tableName
-			]);
-			const structure = columnsResult.rows;
-
-			// Get foreign key information
-			const foreignKeysQuery = `
-                SELECT
-                    tc.constraint_name as name,
-                    kcu.column_name as column,
-                    ccu.table_name as referenced_table,
-                    ccu.column_name as referenced_column,
-                    'outgoing' as type
-                FROM
-                    information_schema.table_constraints tc
-                JOIN information_schema.key_column_usage kcu
-                    ON tc.constraint_name = kcu.constraint_name
-                JOIN information_schema.constraint_column_usage ccu
-                    ON ccu.constraint_name = tc.constraint_name
-                WHERE
-                    tc.constraint_type = 'FOREIGN KEY'
-                    AND tc.table_schema = $1
-                    AND tc.table_name = $2
-            `;
-
-			const incomingFKQuery = `
-                SELECT
-                    tc.constraint_name as name,
-                    kcu.column_name as column,
-                    kcu.table_name as referenced_table,
-                    ccu.column_name as referenced_column,
-                    'incoming' as type
-                FROM
-                    information_schema.table_constraints tc
-                JOIN information_schema.key_column_usage kcu
-                    ON tc.constraint_name = kcu.constraint_name
-                JOIN information_schema.constraint_column_usage ccu
-                    ON ccu.constraint_name = tc.constraint_name
-                WHERE
-                    tc.constraint_type = 'FOREIGN KEY'
-                    AND tc.table_schema = $1
-                    AND ccu.table_name = $2
-            `;
-
-			const outgoingResult = await client.query(foreignKeysQuery, [
-				schema,
-				tableName
-			]);
-			const incomingResult = await client.query(incomingFKQuery, [
-				schema,
-				tableName
-			]);
-
-			const foreignKeys = [
-				...outgoingResult.rows,
-				...incomingResult.rows
-			];
-
-			// Get index information
-			const indexesQuery = `
-                SELECT
-                    i.relname as name,
-                    CASE
-                        WHEN ix.indisprimary THEN 'PRIMARY'
-                        WHEN ix.indisunique THEN 'UNIQUE'
-                        ELSE 'INDEX'
-                    END as type,
-                    array_to_string(array_agg(a.attname), ',') as columns
-                FROM
-                    pg_class t,
-                    pg_class i,
-                    pg_index ix,
-                    pg_attribute a,
-                    pg_namespace n
-                WHERE
-                    t.oid = ix.indrelid
-                    AND i.oid = ix.indexrelid
-                    AND a.attrelid = t.oid
-                    AND a.attnum = ANY(ix.indkey)
-                    AND t.relkind = 'r'
-                    AND t.relname = $2
-                    AND n.nspname = $1
-                    AND t.relnamespace = n.oid
-                GROUP BY
-                    i.relname, ix.indisprimary, ix.indisunique
-            `;
-
-			const indexesResult = await client.query(indexesQuery, [
-				schema,
-				tableName
-			]);
-			const indexes = indexesResult.rows.map((idx: any) => {
-				return {
-					...idx,
-					columns: idx.columns.split(',')
-				};
-			});
-
-			databaseSchema.tables.push({
-				name: tableName,
-				columns: structure,
-				foreignKeys,
-				indexes
-			});
-		}
-
-		return {
-			success: true,
-			databaseSchema
-		};
-	} catch (err: any) {
-		return {
-			success: false,
-			message: err.message || 'Error fetching PostgreSQL database schema',
-			databaseSchema: { tables: [] }
-		};
-	} finally {
-		await safePgEndConnection(client);
-	}
-}
-
-// At the end of the registerTablesHandlers function, add this handler
-export function registerTablesHandlers() {
-	// Existing handlers...
-
-	// Add PostgreSQL schema handler
-	ipcMain.handle(
-		'get-postgresql-database-schema-for-ai',
-		getPostgresqlDatabaseSchemaForAIHandler
-	);
-}
-```
-
-### 2. Update Database Schema Service
-
-Update `src/services/databaseSchema.ts` to support PostgreSQL:
-
-```typescript
-// Add type imports if needed
-import { PostgresqlConnection } from '@/types/postgresql-connection';
-
-// In the fetchDatabaseSchema function, modify it to handle PostgreSQL:
-const fetchDatabaseSchema = async (
-	force = false
-): Promise<DatabaseSchema | null> => {
-	if (databaseSchema.value && !force) {
-		return databaseSchema.value;
-	}
-
-	const selectedProject = connectionsStore.getSelectedProject;
-	if (!selectedProject) {
-		error.value = 'No project selected';
-		return null;
-	}
-
-	isLoading.value = true;
-	error.value = null;
-
-	try {
-		let result;
-
-		if (selectedProject.type === 'postgresql') {
-			result = await window.ipcRenderer.getPostgresqlDatabaseSchemaForAI(
-				toRaw(selectedProject.db_config)
-			);
-		} else {
-			// Default to MySQL
-			result = await window.ipcRenderer.getDatabaseSchemaForAI(
-				toRaw(selectedProject.db_config)
-			);
-		}
-
-		if (result.success) {
-			const modelsResult =
-				await projectStore.getModelsForTables(selectedProject);
-			const models = modelsResult?.models || [];
-
-			if (result.databaseSchema && result.databaseSchema.tables) {
-				result.databaseSchema.tables.forEach((table: TableSchema) => {
-					const model = models.find((m) => m.table === table.name);
-					if (model) {
-						table.model = {
-							name: model.name,
-							namespace: model.namespace,
-							fullName: model.fullName
-						};
-					}
-				});
-			}
-
-			databaseSchema.value = result.databaseSchema;
-			return databaseSchema.value;
-		} else {
-			error.value = result.message || 'Failed to get database schema';
-			console.error('Failed to get database schema:', result.message);
-			return null;
-		}
-	} catch (err) {
-		error.value = err instanceof Error ? err.message : String(err);
-		console.error('Error fetching database schema:', err);
-		return null;
-	} finally {
-		isLoading.value = false;
-	}
-};
-```
-
-### 3. Update Preload Script for Schema Functions
-
-Add this to the preload script (`electron/preload/index.ts`):
-
-```typescript
-// Add this to the existing handlers
-getPostgresqlDatabaseSchemaForAI: (config: any) => {
-    return ipcRenderer.invoke('get-postgresql-database-schema-for-ai', config);
-},
-```
-
-## Verification
-
-- Ensure PostgreSQL schema retrieval functions work correctly
-- Test schema retrieval with both MySQL and PostgreSQL databases
-- Verify foreign key relationships are properly detected
-- Check that indexes are correctly displayed
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 5: Update SQL Executor](./05-sql-executor.md).
diff --git a/docs/postgresql-implementation/05-sql-executor.md b/docs/postgresql-implementation/05-sql-executor.md
deleted file mode 100644
index 7eecd67..0000000
--- a/docs/postgresql-implementation/05-sql-executor.md
+++ /dev/null
@@ -1,175 +0,0 @@
-# Step 5: Update SQL Executor
-
-In this step, we'll update the SQL execution functionality to support PostgreSQL queries. This involves adding PostgreSQL-specific query execution functions and updating the UI components to use the appropriate functions based on the database type.
-
-## Tasks
-
-- [ ] Update SQL Executor module to handle PostgreSQL queries
-- [ ] Add IPC handlers for PostgreSQL query execution
-- [ ] Update UI components to use PostgreSQL query handlers
-
-## Implementation Details
-
-### 1. Update SQL Executor Module
-
-Update the `electron/modules/sql-executor.ts` file to support PostgreSQL queries:
-
-```typescript
-import { ipcMain } from 'electron';
-import {
-	createConnection as createMysqlConnection,
-	releaseConnection as releaseMysqlConnection
-} from '../helpers/mysql';
-import {
-	createConnection as createPgConnection,
-	releaseConnection as releasePgConnection
-} from '../helpers/postgresql';
-import { MysqlConnection } from '../../src/types/mysql-connection';
-import { PostgresqlConnection } from '../../src/types/postgresql-connection';
-
-// Rename the existing function to be MySQL-specific
-async function executeMysqlQueryHandler(
-	_: any,
-	config: MysqlConnection,
-	query: string
-) {
-	let connection: any;
-
-	try {
-		connection = await createMysqlConnection(config);
-
-		try {
-			const [results] = await connection.query(query);
-
-			return { success: true, results };
-		} catch (error) {
-			console.error('Error executing MySQL query:', error.message);
-			return { success: false, error: error.message };
-		}
-	} catch (error) {
-		console.error('Error connecting to MySQL database:', error.message);
-		return { success: false, error: error.message };
-	} finally {
-		if (connection) {
-			await releaseMysqlConnection(connection);
-		}
-	}
-}
-
-// Add a PostgreSQL query executor
-async function executePostgresqlQueryHandler(
-	_: any,
-	config: PostgresqlConnection,
-	query: string
-) {
-	let client: any;
-
-	try {
-		client = await createPgConnection(config);
-
-		try {
-			const results = await client.query(query);
-			return { success: true, results: results.rows };
-		} catch (error) {
-			console.error('Error executing PostgreSQL query:', error.message);
-			return { success: false, error: error.message };
-		}
-	} catch (error) {
-		console.error(
-			'Error connecting to PostgreSQL database:',
-			error.message
-		);
-		return { success: false, error: error.message };
-	} finally {
-		if (client) {
-			await releasePgConnection(client);
-		}
-	}
-}
-
-// Update the register function to include both handlers
-function registerSqlExecutorHandlers() {
-	// Rename this to be MySQL-specific
-	ipcMain.handle('execute-mysql-query', executeMysqlQueryHandler);
-
-	// Add PostgreSQL handler
-	ipcMain.handle('execute-postgresql-query', executePostgresqlQueryHandler);
-}
-
-export { registerSqlExecutorHandlers };
-```
-
-### 2. Update Preload Script
-
-In `electron/preload/index.ts`, add the PostgreSQL SQL execution function:
-
-```typescript
-// Add new handler for PostgreSQL query execution
-executePostgresqlQuery: (config: any, query: string) => {
-    return ipcRenderer.invoke('execute-postgresql-query', config, query);
-},
-```
-
-### 3. Update SQLEditorView Component
-
-Modify the `src/views/SQLEditorView.vue` file to handle PostgreSQL queries:
-
-```typescript
-// In the executeQuery function:
-async function executeQuery() {
-	// ...existing code...
-
-	try {
-		isExecuting.value = true;
-		errorMessage.value = '';
-
-		let result;
-
-		// Choose the appropriate handler based on database type
-		if (project.value.type === 'postgresql') {
-			result = await window.ipcRenderer.executePostgresqlQuery(
-				toRaw(project.value.db_config),
-				query
-			);
-		} else {
-			// Default to MySQL
-			result = await window.ipcRenderer.executeMysqlQuery(
-				toRaw(project.value.db_config),
-				query
-			);
-		}
-
-		// Process results...
-		if (result.success) {
-			// ...existing success handling...
-		} else {
-			// ...existing error handling...
-		}
-	} catch (error) {
-		// ...existing error handling...
-	} finally {
-		// ...existing cleanup...
-	}
-}
-```
-
-### 4. Update Any Other Components that Execute SQL
-
-Look for any other components that directly execute SQL queries and update them similarly. For example, check:
-
-- Components that display table data
-- Components for database operations
-- Components for running schema migrations
-
-For each of these, add conditional logic to use the appropriate handler based on the connection type.
-
-## Verification
-
-- Test SQL query execution with both MySQL and PostgreSQL databases
-- Verify that query results are properly displayed
-- Check that error handling works correctly for both database types
-- Test complex queries with joins, aggregations, etc.
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 6: Update UI Components](./06-ui-components.md).
diff --git a/docs/postgresql-implementation/06-ui-components.md b/docs/postgresql-implementation/06-ui-components.md
deleted file mode 100644
index 442543f..0000000
--- a/docs/postgresql-implementation/06-ui-components.md
+++ /dev/null
@@ -1,348 +0,0 @@
-# Step 6: Update UI Components
-
-In this step, we'll update the UI components to support PostgreSQL connections and databases. This includes modifying the connection management UI, database view, and other components.
-
-## Tasks
-
-- [ ] Update database connection UI to support PostgreSQL
-- [ ] Update connection store to handle PostgreSQL connections
-- [ ] Add PostgreSQL-specific UI elements and icons
-- [ ] Update environment file detection for PostgreSQL
-
-## Implementation Details
-
-### 1. Update Connection Management UI
-
-Modify the `src/components/home/ManageConnection.vue` file to allow selecting PostgreSQL:
-
-```vue
-<!-- Update the database type select to include PostgreSQL -->
-<fieldset class="fieldset w-full">
-    <label class="label">
-        <span class="label-text">Database Type</span>
-    </label>
-    <select
-        v-model="newConnection.type"
-        class="select select-bordered w-full"
-    >
-        <option value="mysql">MySQL</option>
-        <option value="postgresql">PostgreSQL</option>
-    </select>
-</fieldset>
-
-<!-- Update port input with dynamic default based on type -->
-<fieldset class="fieldset w-full">
-    <label class="label">
-        <span class="label-text">Port</span>
-    </label>
-    <input
-        v-model="newConnection.db_config.port"
-        type="text"
-        :placeholder="newConnection.type === 'postgresql' ? '5432' : '3306'"
-        class="input w-full"
-        required
-    />
-</fieldset>
-
-<!-- Add PostgreSQL-specific fields when PostgreSQL is selected -->
-<fieldset v-if="newConnection.type === 'postgresql'" class="fieldset w-full">
-    <label class="label">
-        <span class="label-text">Schema</span>
-    </label>
-    <input
-        v-model="newConnection.db_config.schema"
-        type="text"
-        placeholder="public"
-        class="input w-full"
-    />
-    <label class="label">
-        <span class="label-text-alt">Default is 'public'</span>
-    </label>
-</fieldset>
-
-<!-- Add SSL option for PostgreSQL -->
-<fieldset v-if="newConnection.type === 'postgresql'" class="fieldset w-full">
-    <label class="label cursor-pointer">
-        <span class="label-text">Use SSL Connection?</span>
-        <input
-            v-model="newConnection.db_config.ssl"
-            type="checkbox"
-            class="toggle toggle-primary"
-        />
-    </label>
-</fieldset>
-```
-
-### 2. Update the saveNewConnection Method
-
-Update the `saveNewConnection` method in `src/components/home/ManageConnection.vue`:
-
-```typescript
-async function saveNewConnection() {
-	try {
-		// Existing validation code...
-
-		isSaving.value = true;
-
-		showAlert('Testing database connection...', 'info');
-
-		let testResult;
-
-		if (newConnection.value.type === 'postgresql') {
-			// Use PostgreSQL connection test
-			testResult = await window.ipcRenderer.testPostgreSQLConnection({
-				host: newConnection.value.db_config.host,
-				port: newConnection.value.db_config.port,
-				user: newConnection.value.db_config.user,
-				password: newConnection.value.db_config.password,
-				database: newConnection.value.db_config.database,
-				schema: newConnection.value.db_config.schema || 'public',
-				ssl: newConnection.value.db_config.ssl || false
-			});
-		} else {
-			// Use MySQL connection test
-			testResult = await window.ipcRenderer.testMySQLConnection({
-				host: newConnection.value.db_config.host,
-				port: newConnection.value.db_config.port,
-				user: newConnection.value.db_config.user,
-				password: newConnection.value.db_config.password,
-				database: newConnection.value.db_config.database
-			});
-		}
-
-		if (!testResult.success) {
-			showAlert(`Connection failed: ${testResult.message}`, 'error');
-			isSaving.value = false;
-			return;
-		}
-
-		showAlert('Connection successful! Saving configuration...', 'success');
-
-		// Create the db_config object based on the database type
-		let dbConfig;
-		if (newConnection.value.type === 'postgresql') {
-			dbConfig = {
-				database: newConnection.value.db_config.database,
-				host: newConnection.value.db_config.host,
-				port: newConnection.value.db_config.port,
-				user: newConnection.value.db_config.user,
-				password: newConnection.value.db_config.password,
-				schema: newConnection.value.db_config.schema || 'public',
-				ssl: newConnection.value.db_config.ssl || false,
-				connectTimeout: 10000
-			};
-		} else {
-			dbConfig = {
-				database: newConnection.value.db_config.database,
-				host: newConnection.value.db_config.host,
-				port: newConnection.value.db_config.port,
-				user: newConnection.value.db_config.user,
-				password: newConnection.value.db_config.password,
-				connectTimeout: 10000
-			};
-		}
-
-		const connectionData = {
-			id: isEditMode.value ? editConnectionId.value : uuid(),
-			projectPath: newConnection.value.projectPath,
-			name: newConnection.value.name,
-			type: newConnection.value.type,
-			icon: newConnection.value.type.charAt(0).toUpperCase(),
-			db_config: dbConfig,
-			redis_config: {
-				port: newConnection.value.redis_config.port,
-				host: newConnection.value.redis_config.host,
-				password: newConnection.value.redis_config.password
-			},
-			usingSail: newConnection.value.usingSail,
-			status: 'ready',
-			isValid: true,
-			dockerInfo: dockerInfo.value || null
-		};
-
-		// Existing save logic...
-	} catch (error: any) {
-		console.error('Error saving connection:', error);
-		showAlert(`Error saving connection: ${error.message}`, 'error');
-	} finally {
-		isSaving.value = false;
-	}
-}
-```
-
-### 3. Update the Connections Store
-
-Modify `src/store/connections.ts` to handle PostgreSQL connections:
-
-```typescript
-async function loadConnections(id: string | null = null) {
-    isLoading.value = true;
-
-    // ...existing code...
-
-    try {
-        if (window.ipcRenderer) {
-            try {
-                const savedProjects: ProjectConnection[] = JSON.parse(
-                    localStorage.getItem('connections') || '[]'
-                );
-
-                if (
-                    savedProjects &&
-                    Array.isArray(savedProjects) &&
-                    savedProjects.length > 0
-                ) {
-                    for (const project of savedProjects) {
-                        let check;
-
-                        if (project.type === 'postgresql') {
-                            check = await window.ipcRenderer.testPostgreSQLConnection(
-                                toRaw(project.db_config)
-                            );
-                        } else {
-                            check = await window.ipcRenderer.testMySQLConnection(
-                                toRaw(project.db_config)
-                            );
-                        }
-
-                        project.isValid = check.success;
-                        project.status = check.success
-                            ? 'connected'
-                            : 'disconnected';
-                    }
-
-                    connections.value = savedProjects;
-                } else {
-                    connections.value = [];
-                }
-            } catch (err) {
-                // ...error handling...
-            }
-        }
-        // ...rest of the function...
-    }
-}
-```
-
-### 4. Update Database Connection Colors
-
-Update the connection color function in `src/views/Home.vue` and `src/components/BaseHeader.vue`:
-
-```typescript
-function getConnectionColor(type: string) {
-	switch (type) {
-		case 'mysql':
-			return 'bg-orange-500';
-		case 'postgresql':
-			return 'bg-blue-600';
-		default:
-			return 'bg-gray-600';
-	}
-}
-```
-
-### 5. Update Environment File Detection
-
-Modify the `selectProjectDirectory` function in `src/components/home/ManageConnection.vue` to detect PostgreSQL connections from the Laravel .env file:
-
-```typescript
-async function selectProjectDirectory() {
-	try {
-		// ...existing code...
-
-		const envConfig: Env =
-			await window.ipcRenderer.readEnvFile(selectedPath);
-
-		if (envConfig) {
-			// Set connection type based on DB_CONNECTION
-			if (envConfig.DB_CONNECTION) {
-				if (
-					envConfig.DB_CONNECTION.toLowerCase() === 'pgsql' ||
-					envConfig.DB_CONNECTION.toLowerCase() === 'postgres' ||
-					envConfig.DB_CONNECTION.toLowerCase() === 'postgresql'
-				) {
-					newConnection.value.type = 'postgresql';
-					// Set default PostgreSQL port
-					if (!newConnection.value.db_config.port) {
-						newConnection.value.db_config.port = 5432;
-					}
-				} else {
-					newConnection.value.type = 'mysql';
-					// Set default MySQL port
-					if (!newConnection.value.db_config.port) {
-						newConnection.value.db_config.port = 3306;
-					}
-				}
-			}
-
-			// ...existing code for setting other connection properties...
-		}
-	} catch (error) {
-		console.error(error);
-		showAlert('Error selecting project directory', 'error');
-	}
-}
-```
-
-### 6. Add PostgreSQL Default Values
-
-Update the default connection values in `src/components/home/ManageConnection.vue`:
-
-```typescript
-// Update this based on the selected type
-const getDefaultValues = (type = 'mysql') => ({
-	id: '',
-	projectPath: '',
-	name: '',
-	type: type,
-	icon: '',
-	db_config: {
-		database: '',
-		host: 'localhost',
-		port: type === 'postgresql' ? 5432 : 3306,
-		user: '',
-		password: '',
-		schema: type === 'postgresql' ? 'public' : undefined,
-		ssl: type === 'postgresql' ? false : undefined,
-		connectTimeout: 10000
-	},
-	redis_config: {
-		port: 6379,
-		host: 'localhost',
-		password: ''
-	},
-	usingSail: false,
-	status: 'ready',
-	isValid: true,
-	dockerInfo: null
-});
-
-// Update when type changes
-watch(
-	() => newConnection.value.type,
-	(newType) => {
-		// Update default port when database type changes
-		if (newType === 'postgresql') {
-			newConnection.value.db_config.port = 5432;
-			newConnection.value.db_config.schema = 'public';
-			newConnection.value.db_config.ssl = false;
-		} else {
-			newConnection.value.db_config.port = 3306;
-			delete newConnection.value.db_config.schema;
-			delete newConnection.value.db_config.ssl;
-		}
-	}
-);
-```
-
-## Verification
-
-- Test creating new PostgreSQL connections with different settings
-- Verify that connection test works correctly with PostgreSQL
-- Test loading connections from environment files
-- Check that PostgreSQL-specific fields appear and disappear appropriately
-- Verify that the UI displays PostgreSQL connections with the correct color
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 7: Install Dependencies](./07-dependencies.md).
diff --git a/docs/postgresql-implementation/07-dependencies.md b/docs/postgresql-implementation/07-dependencies.md
deleted file mode 100644
index 29aee4e..0000000
--- a/docs/postgresql-implementation/07-dependencies.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Step 7: Install Dependencies
-
-In this step, we'll install the required PostgreSQL dependencies to enable PostgreSQL support in the application.
-
-## Tasks
-
-- [ ] Install PostgreSQL client library
-- [ ] Install PostgreSQL type definitions
-- [ ] Update package.json with new dependencies
-
-## Implementation Details
-
-### 1. Install PostgreSQL Client Library
-
-The primary dependency for PostgreSQL support is the `pg` package, which is the official PostgreSQL client for Node.js. Install it by running the following command in your project directory:
-
-```bash
-npm install pg
-```
-
-### 2. Install PostgreSQL Type Definitions
-
-For TypeScript support, install the type definitions for the PostgreSQL client:
-
-```bash
-npm install @types/pg --save-dev
-```
-
-### 3. Update package.json
-
-Verify that the dependencies were added to your `package.json` file. The relevant sections should now include:
-
-```json
-{
-	"dependencies": {
-		// Existing dependencies...
-		"pg": "^8.11.0" // Version may vary
-		// Other dependencies...
-	},
-	"devDependencies": {
-		// Existing dev dependencies...
-		"@types/pg": "^8.10.0" // Version may vary
-		// Other dev dependencies...
-	}
-}
-```
-
-### 4. Rebuild the Application
-
-After installing the dependencies, rebuild the application to ensure everything is properly integrated:
-
-```bash
-npm run build
-```
-
-## Verification
-
-- Check that the PostgreSQL dependencies are correctly installed
-- Verify that there are no compilation errors related to PostgreSQL
-- Ensure that the application can import PostgreSQL modules without errors
-- Test a basic PostgreSQL connection to verify the library is working
-
-## Troubleshooting
-
-If you encounter any issues installing or using the PostgreSQL client library:
-
-1. Check for compatibility issues between the `pg` package and your Node.js version
-2. Ensure that the TypeScript types are correctly recognized by the compiler
-3. Verify that the import statements for PostgreSQL modules are correct
-
-For native module compilation issues (especially on Windows):
-
-1. Make sure you have the necessary build tools installed
-2. Consider using binary distributions if available
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 8: Testing & Verification](./08-testing.md).
diff --git a/docs/postgresql-implementation/08-testing.md b/docs/postgresql-implementation/08-testing.md
deleted file mode 100644
index 67ae20e..0000000
--- a/docs/postgresql-implementation/08-testing.md
+++ /dev/null
@@ -1,186 +0,0 @@
-# Step 8: Testing & Verification
-
-In this step, we'll test and verify the PostgreSQL integration to ensure it works correctly with the application. This includes testing connections, queries, schema retrieval, and UI components.
-
-## Tasks
-
-- [ ] Set up a PostgreSQL database for testing
-- [ ] Test connection functionality
-- [ ] Test SQL query execution
-- [ ] Test schema retrieval
-- [ ] Test UI components
-- [ ] Verify integration with Laravel
-
-## Implementation Details
-
-### 1. Set Up a PostgreSQL Database for Testing
-
-First, you need a PostgreSQL database to test with. You can:
-
-- Install PostgreSQL locally
-- Use a Docker container
-- Use a cloud-hosted PostgreSQL instance
-
-#### Local Installation
-
-If you prefer to install PostgreSQL locally:
-
-1. Download and install PostgreSQL from the [official website](https://www.postgresql.org/download/)
-2. Create a new database for testing:
-    ```sql
-    CREATE DATABASE larabase_test;
-    ```
-3. Create a test user:
-    ```sql
-    CREATE USER larabase WITH PASSWORD 'password';
-    GRANT ALL PRIVILEGES ON DATABASE larabase_test TO larabase;
-    ```
-
-#### Docker Setup
-
-If you prefer using Docker:
-
-```bash
-docker run --name postgres-test -e POSTGRES_PASSWORD=password -e POSTGRES_USER=larabase -e POSTGRES_DB=larabase_test -p 5432:5432 -d postgres
-```
-
-### 2. Test Connection Functionality
-
-Test PostgreSQL connection by:
-
-1. Start the Larabase application in development mode:
-
-    ```bash
-    npm run dev
-    ```
-
-2. Open the application and create a new PostgreSQL connection with the following details:
-
-    - Type: PostgreSQL
-    - Host: localhost (or your server address)
-    - Port: 5432
-    - Database: larabase_test
-    - Username: larabase
-    - Password: password
-    - Schema: public
-
-3. Test the connection to verify it works correctly.
-
-### 3. Test SQL Query Execution
-
-Test PostgreSQL query execution functionality:
-
-1. Open the SQL Editor for your PostgreSQL connection
-2. Create a test table:
-    ```sql
-    CREATE TABLE test_users (
-      id SERIAL PRIMARY KEY,
-      name VARCHAR(100) NOT NULL,
-      email VARCHAR(100) UNIQUE NOT NULL,
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    );
-    ```
-3. Insert some test data:
-    ```sql
-    INSERT INTO test_users (name, email) VALUES
-    ('Test User 1', 'test1@example.com'),
-    ('Test User 2', 'test2@example.com'),
-    ('Test User 3', 'test3@example.com');
-    ```
-4. Run a SELECT query:
-    ```sql
-    SELECT * FROM test_users;
-    ```
-5. Verify that results are displayed correctly
-
-### 4. Test Schema Retrieval
-
-Test the database schema retrieval:
-
-1. Open the database view for your PostgreSQL connection
-2. Create test tables with relationships:
-
-    ```sql
-    CREATE TABLE test_categories (
-      id SERIAL PRIMARY KEY,
-      name VARCHAR(100) NOT NULL
-    );
-
-    CREATE TABLE test_posts (
-      id SERIAL PRIMARY KEY,
-      title VARCHAR(200) NOT NULL,
-      content TEXT,
-      category_id INTEGER REFERENCES test_categories(id),
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE test_comments (
-      id SERIAL PRIMARY KEY,
-      content TEXT NOT NULL,
-      post_id INTEGER REFERENCES test_posts(id),
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    );
-    ```
-
-3. Verify that the tables appear in the schema browser
-4. Check that foreign key relationships are correctly displayed
-5. Test the ERD visualization to ensure relationships are shown correctly
-
-### 5. Test UI Components
-
-Test all UI components with PostgreSQL:
-
-1. Test table list and content browsing
-2. Test data modification (insert, update, delete)
-3. Verify that PostgreSQL-specific UI elements (schema selection, etc.) work correctly
-4. Test connection editing and updating
-5. Verify that PostgreSQL connections are displayed with the correct color and icon
-
-### 6. Verify Integration with Laravel
-
-Test integration with a Laravel project that uses PostgreSQL:
-
-1. Create a new Laravel project or use an existing one
-2. Configure it to use PostgreSQL in the `.env` file:
-    ```
-    DB_CONNECTION=pgsql
-    DB_HOST=127.0.0.1
-    DB_PORT=5432
-    DB_DATABASE=larabase_test
-    DB_USERNAME=larabase
-    DB_PASSWORD=password
-    ```
-3. Create and run some migrations
-4. Connect Larabase to this Laravel project
-5. Verify that the migrations and tables are correctly detected
-6. Test running Laravel commands through Larabase
-
-## Additional Testing
-
-1. **Error Handling**: Test various error scenarios (incorrect credentials, server unavailable, etc.)
-2. **Large Datasets**: Test performance with large tables and datasets
-3. **Complex Queries**: Test with complex queries, joins, subqueries, etc.
-4. **PostgreSQL-Specific Features**: Test PostgreSQL-specific features (JSON fields, arrays, etc.)
-
-## Troubleshooting Common Issues
-
-1. **Connection Issues**:
-
-    - Verify PostgreSQL server is running
-    - Check firewall settings
-    - Ensure correct hostname/port
-
-2. **Authentication Issues**:
-
-    - Verify credentials
-    - Check PostgreSQL authentication configuration (`pg_hba.conf`)
-
-3. **Schema Issues**:
-    - Verify schema name is correct
-    - Check user has permissions to access schema
-
-## Completing the Implementation
-
-Once all tests pass and everything works correctly, you have successfully integrated PostgreSQL support into Larabase!
-
-Update the implementation tracking in the main `postgresql-implementation.md` file to mark all tasks as completed.
diff --git a/docs/ssh-implementation.md b/docs/ssh-implementation.md
deleted file mode 100644
index fc33c75..0000000
--- a/docs/ssh-implementation.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# SSH Remote Connection Implementation Guide
-
-This guide provides a step-by-step process for adding SSH remote connection support to Larabase. SSH connections will be treated as a distinct connection type rather than an optional feature for local connections.
-
-## Implementation Overview
-
-Larabase currently supports MySQL and PostgreSQL database connections. This implementation will add support for remote connections via SSH as a completely separate connection type. Remote connections will be clearly differentiated from local connections with badges in the UI.
-
-## Key Features
-
-- Connect to remote Laravel projects via SSH
-- Browse and edit remote files
-- Execute artisan and composer commands remotely
-- Connect to remote databases through SSH tunnels
-- Clearly distinguish remote connections in the UI
-
-## Implementation Steps
-
-1. [Create SSH Connection Types](./ssh-implementation/01-types.md)
-2. [Set Up SSH Helper Module](./ssh-implementation/02-helper-module.md)
-3. [Create IPC Handlers for SSH](./ssh-implementation/03-ipc-handlers.md)
-4. [Implement SSH Tunneling](./ssh-implementation/04-ssh-tunneling.md)
-5. [Update UI Components for SSH](./ssh-implementation/05-ui-components.md)
-6. [Add Remote Indication Badges](./ssh-implementation/06-remote-badges.md)
-7. [Handle Remote File Operations](./ssh-implementation/07-remote-files.md)
-8. [Execute Remote Commands](./ssh-implementation/08-remote-commands.md)
-9. [Install Dependencies](./ssh-implementation/09-dependencies.md)
-10. [Testing & Verification](./ssh-implementation/10-testing.md)
-
-## Implementation Summary
-
-### Types and Interfaces
-
-We'll define new TypeScript interfaces for SSH connections, differentiating them clearly from local database connections. SSH connections will have a separate connection type and will always be marked as remote connections.
-
-### SSH Functionality
-
-The implementation includes a comprehensive SSH module using the `ssh2` library to handle connections, file transfers, and command execution. We'll also implement SSH tunneling to allow secure connections to remote databases.
-
-### UI Components
-
-The UI will be updated with new components for SSH-specific functionality, including a remote file browser and command executor. We'll also add badges to clearly indicate which connections are remote.
-
-### Database Integration
-
-Remote connections will be able to interact with databases through SSH tunnels, allowing all existing database functionality to work with remote connections as well.
-
-## Development Approach
-
-This implementation follows a modular, step-by-step approach:
-
-1. First, we establish the core SSH functionality for connecting to remote servers
-2. Then, we implement file operations and command execution
-3. Next, we add SSH tunneling for database connections
-4. Finally, we update the UI to provide a seamless user experience
-
-Each step builds on the previous ones, ensuring that the implementation is robust and well-structured.
-
-## Compatibility Considerations
-
-The SSH implementation is designed to work with:
-
-- Both MySQL and PostgreSQL databases
-- Various authentication methods (password, private key)
-- Different server configurations and environments
-
-## Resources
-
-- [SSH2 Library Documentation](https://github.com/mscdex/ssh2)
-- [Laravel Documentation](https://laravel.com/docs)
-- [Electron Documentation for IPC](https://www.electronjs.org/docs/latest/tutorial/ipc)
-
-## Implementation Tracking
-
-Use this section to track your progress through the implementation steps:
-
-- [ ] Create SSH Connection Types
-- [ ] Set Up SSH Helper Module
-- [ ] Create IPC Handlers for SSH
-- [ ] Implement SSH Tunneling
-- [ ] Update UI Components for SSH
-- [ ] Add Remote Indication Badges
-- [ ] Handle Remote File Operations
-- [ ] Execute Remote Commands
-- [ ] Install Dependencies
-- [ ] Testing & Verification
-
-## Notes
-
-- Each markdown file contains detailed instructions and code snippets for the specific implementation step.
-- Code samples include file paths indicating where changes should be made.
-- Some steps may require additional configuration depending on your development environment.
-- SSH connections are treated as a separate connection type, not as an add-on to local connections.
diff --git a/docs/ssh-implementation/01-types.md b/docs/ssh-implementation/01-types.md
deleted file mode 100644
index d7140d9..0000000
--- a/docs/ssh-implementation/01-types.md
+++ /dev/null
@@ -1,135 +0,0 @@
-# Step 1: Create SSH Connection Types
-
-In this step, we'll create the necessary TypeScript type definitions for SSH remote connections.
-
-## Tasks
-
-- [ ] Create SSH connection type definition
-- [ ] Update project connection type to include SSH as a distinct connection type
-- [ ] Define connection type enum for clear type identification
-
-## Implementation Details
-
-### 1. Create SSH Connection Type
-
-Create a new file `src/types/ssh-connection.d.ts` with the following content:
-
-```typescript
-export interface SshConnection {
-	host: string;
-	port: number;
-	username: string;
-	password?: string;
-	privateKey?: string;
-	passphrase?: string;
-	remotePath: string;
-	remoteDbType: 'mysql' | 'postgresql';
-	remoteDbConfig: {
-		host: string;
-		port: number;
-		database: string;
-		username: string;
-		password?: string;
-		schema?: string; // For PostgreSQL
-	};
-}
-```
-
-### 2. Create Connection Type Enum
-
-Create a new file `src/types/connection-types.ts` to define the connection types:
-
-```typescript
-export enum ConnectionType {
-	MySQL = 'mysql',
-	PostgreSQL = 'postgresql',
-	SSH = 'ssh'
-}
-
-export function getConnectionTypeIcon(type: ConnectionType): string {
-	switch (type) {
-		case ConnectionType.MySQL:
-			return 'M';
-		case ConnectionType.PostgreSQL:
-			return 'P';
-		case ConnectionType.SSH:
-			return 'S';
-		default:
-			return '';
-	}
-}
-
-export function getConnectionTypeColor(type: ConnectionType): string {
-	switch (type) {
-		case ConnectionType.MySQL:
-			return 'bg-orange-500';
-		case ConnectionType.PostgreSQL:
-			return 'bg-blue-600';
-		case ConnectionType.SSH:
-			return 'bg-green-600';
-		default:
-			return 'bg-gray-600';
-	}
-}
-
-export function getConnectionTypeLabel(type: ConnectionType): string {
-	switch (type) {
-		case ConnectionType.MySQL:
-			return 'MySQL';
-		case ConnectionType.PostgreSQL:
-			return 'PostgreSQL';
-		case ConnectionType.SSH:
-			return 'SSH Remote';
-		default:
-			return 'Unknown';
-	}
-}
-
-export function isRemoteConnection(type: ConnectionType): boolean {
-	return type === ConnectionType.SSH;
-}
-```
-
-### 3. Update Project Connection Type
-
-Modify the `src/types/project.d.ts` file to integrate the SSH connection type:
-
-```typescript
-import { MysqlConnection } from './mysql-connection';
-import { PostgresqlConnection } from './postgresql-connection';
-import { SshConnection } from './ssh-connection';
-import { RedisConnection } from './redis';
-import { DockerInfo } from './docker-info';
-import { ConnectionType } from './connection-types';
-
-export interface ProjectConnection {
-	id?: string | null;
-	name: string;
-	projectPath: string;
-	type: ConnectionType; // Change to enum type
-	icon: string | undefined | null;
-	isRemote: boolean; // Flag to indicate if the connection is remote
-
-	// One of these will be used depending on the connection type
-	db_config?: MysqlConnection | PostgresqlConnection;
-	ssh_config?: SshConnection;
-
-	redis_config: RedisConnection;
-	usingSail: boolean;
-	status: string;
-	isValid: boolean;
-	dockerInfo?: DockerInfo | undefined | null;
-}
-
-// Rest of the file remains unchanged
-```
-
-## Verification
-
-- Confirm all type definition files have been created/updated correctly
-- Ensure there are no TypeScript errors when building the project
-- Verify imports resolve correctly
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 2: Set Up SSH Helper Module](./02-helper-module.md).
diff --git a/docs/ssh-implementation/02-helper-module.md b/docs/ssh-implementation/02-helper-module.md
deleted file mode 100644
index 8037c24..0000000
--- a/docs/ssh-implementation/02-helper-module.md
+++ /dev/null
@@ -1,330 +0,0 @@
-# Step 2: Set Up SSH Helper Module
-
-In this step, we'll create a helper module to manage SSH connections. This will handle establishing SSH connections, executing commands, and transferring files via SFTP.
-
-## Tasks
-
-- [ ] Install SSH2 client library
-- [ ] Create SSH connection helper module
-- [ ] Implement connection management functions
-- [ ] Implement remote command execution
-- [ ] Implement SFTP file operations
-
-## Implementation Details
-
-### 1. Install SSH2 Client Library
-
-First, install the required SSH client library:
-
-```bash
-npm install ssh2
-npm install @types/ssh2 --save-dev
-```
-
-### 2. Create SSH Helper Module
-
-Create a new file `electron/helpers/ssh.ts` with the following content:
-
-```typescript
-import { Client, SFTPWrapper, ClientChannel } from 'ssh2';
-import * as fs from 'fs';
-import * as path from 'path';
-import { SshConnection } from '../../src/types/ssh-connection';
-
-// Map to store active SSH connections
-const sshConnections = new Map<string, Client>();
-
-// Get a unique key for a connection
-function getConnectionKey(config: SshConnection): string {
-	return `${config.username}@${config.host}:${config.port}:${config.remotePath}`;
-}
-
-// Create a new SSH connection
-async function createConnection(config: SshConnection): Promise<Client> {
-	return new Promise((resolve, reject) => {
-		const conn = new Client();
-
-		// Configure SSH connection
-		const connectConfig: any = {
-			host: config.host,
-			port: config.port,
-			username: config.username
-		};
-
-		// Use private key or password for authentication
-		if (config.privateKey) {
-			connectConfig.privateKey = fs.readFileSync(config.privateKey);
-			if (config.passphrase) {
-				connectConfig.passphrase = config.passphrase;
-			}
-		} else if (config.password) {
-			connectConfig.password = config.password;
-		}
-
-		// Set up connection events
-		conn.on('ready', () => {
-			// Store connection in the pool
-			const key = getConnectionKey(config);
-			sshConnections.set(key, conn);
-			resolve(conn);
-		});
-
-		conn.on('error', (err) => {
-			reject(err);
-		});
-
-		// Connect to SSH server
-		conn.connect(connectConfig);
-	});
-}
-
-// Get an existing connection or create a new one
-async function getConnection(config: SshConnection): Promise<Client> {
-	const key = getConnectionKey(config);
-
-	if (sshConnections.has(key)) {
-		const conn = sshConnections.get(key)!;
-
-		// Check if connection is still active
-		if (conn.state === 'authenticated') {
-			return conn;
-		} else {
-			// Close the stale connection
-			sshConnections.delete(key);
-			try {
-				conn.end();
-			} catch (e) {
-				/* ignore */
-			}
-		}
-	}
-
-	// Create a new connection
-	return await createConnection(config);
-}
-
-// Get an SFTP session
-async function getSftpSession(client: Client): Promise<SFTPWrapper> {
-	return new Promise((resolve, reject) => {
-		client.sftp((err, sftp) => {
-			if (err) reject(err);
-			else resolve(sftp);
-		});
-	});
-}
-
-// Execute a command on the remote server
-async function executeCommand(
-	config: SshConnection,
-	command: string
-): Promise<{ stdout: string; stderr: string; code: number | null }> {
-	const client = await getConnection(config);
-
-	return new Promise((resolve, reject) => {
-		client.exec(command, (err, stream) => {
-			if (err) {
-				reject(err);
-				return;
-			}
-
-			let stdout = '';
-			let stderr = '';
-
-			stream.on('data', (data) => {
-				stdout += data.toString();
-			});
-
-			stream.stderr.on('data', (data) => {
-				stderr += data.toString();
-			});
-
-			stream.on('close', (code) => {
-				resolve({ stdout, stderr, code });
-			});
-
-			stream.on('error', (err) => {
-				reject(err);
-			});
-		});
-	});
-}
-
-// Read a file from the remote server
-async function readRemoteFile(
-	config: SshConnection,
-	filePath: string
-): Promise<Buffer> {
-	const client = await getConnection(config);
-	const sftp = await getSftpSession(client);
-
-	return new Promise((resolve, reject) => {
-		sftp.readFile(filePath, (err, data) => {
-			if (err) reject(err);
-			else resolve(data);
-		});
-	});
-}
-
-// Write a file to the remote server
-async function writeRemoteFile(
-	config: SshConnection,
-	filePath: string,
-	data: Buffer | string
-): Promise<void> {
-	const client = await getConnection(config);
-	const sftp = await getSftpSession(client);
-
-	return new Promise((resolve, reject) => {
-		sftp.writeFile(filePath, data, (err) => {
-			if (err) reject(err);
-			else resolve();
-		});
-	});
-}
-
-// List files in a remote directory
-async function listRemoteFiles(
-	config: SshConnection,
-	dirPath: string
-): Promise<any[]> {
-	const client = await getConnection(config);
-	const sftp = await getSftpSession(client);
-
-	return new Promise((resolve, reject) => {
-		sftp.readdir(dirPath, (err, list) => {
-			if (err) reject(err);
-			else resolve(list);
-		});
-	});
-}
-
-// Close an SSH connection
-function closeConnection(config: SshConnection): void {
-	const key = getConnectionKey(config);
-
-	if (sshConnections.has(key)) {
-		const conn = sshConnections.get(key)!;
-		conn.end();
-		sshConnections.delete(key);
-	}
-}
-
-// Close all SSH connections
-function closeAllConnections(): void {
-	for (const conn of sshConnections.values()) {
-		try {
-			conn.end();
-		} catch (e) {
-			/* ignore */
-		}
-	}
-	sshConnections.clear();
-}
-
-// Test SSH connection
-async function testConnection(
-	config: SshConnection
-): Promise<{ success: boolean; message: string }> {
-	let client: Client | null = null;
-
-	try {
-		client = await createConnection(config);
-
-		// Verify we can access the remote path
-		const testResult = await executeCommand(
-			config,
-			`cd ${config.remotePath} && ls -la`
-		);
-
-		if (testResult.code !== 0) {
-			return {
-				success: false,
-				message: `Error accessing remote path: ${testResult.stderr}`
-			};
-		}
-
-		// Check if it's a Laravel project
-		const laravelCheckResult = await executeCommand(
-			config,
-			`cd ${config.remotePath} && [ -f artisan ] && echo "Laravel" || echo "Not Laravel"`
-		);
-
-		if (laravelCheckResult.stdout.trim() !== 'Laravel') {
-			return {
-				success: false,
-				message:
-					'The remote path does not appear to be a Laravel project (no artisan file found)'
-			};
-		}
-
-		return {
-			success: true,
-			message: 'Successfully connected to remote Laravel project'
-		};
-	} catch (error) {
-		return {
-			success: false,
-			message:
-				error instanceof Error
-					? error.message
-					: 'Unknown error connecting to SSH server'
-		};
-	} finally {
-		if (client) {
-			closeConnection(config);
-		}
-	}
-}
-
-export {
-	createConnection,
-	getConnection,
-	getSftpSession,
-	executeCommand,
-	readRemoteFile,
-	writeRemoteFile,
-	listRemoteFiles,
-	closeConnection,
-	closeAllConnections,
-	testConnection
-};
-```
-
-### 3. Update Electron's Main Process Cleanup
-
-In `electron/main/index.ts`, update the cleanup function to close SSH connections:
-
-```typescript
-// Import SSH helper
-import { closeAllConnections } from '../helpers/ssh';
-
-// In app.on('window-all-closed') handler:
-app.on('window-all-closed', () => {
-	win = null;
-
-	cleanup();
-
-	// Close all database connection pools
-	closeAllPools()
-		.catch((err) => {
-			console.error('Error closing database pools:', err);
-		})
-		.finally(() => {
-			// Close all SSH connections
-			closeAllConnections();
-
-			if (process.platform === 'darwin') app.quit();
-		});
-});
-```
-
-## Verification
-
-- Ensure SSH2 client library is installed correctly
-- Verify the helper module compiles without errors
-- Check that the connection management functions work as expected
-- Verify that command execution and file operations are properly implemented
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 3: Create IPC Handlers for SSH](./03-ipc-handlers.md).
diff --git a/docs/ssh-implementation/03-ipc-handlers.md b/docs/ssh-implementation/03-ipc-handlers.md
deleted file mode 100644
index 13e548f..0000000
--- a/docs/ssh-implementation/03-ipc-handlers.md
+++ /dev/null
@@ -1,272 +0,0 @@
-# Step 3: Create IPC Handlers for SSH
-
-In this step, we'll create IPC handlers to allow the renderer process (UI) to interact with the SSH functionality in the main process. These handlers will expose SSH-related operations to the frontend.
-
-## Tasks
-
-- [ ] Create SSH module for IPC handlers
-- [ ] Register SSH IPC handlers in the main process
-- [ ] Update preload script to expose SSH API
-- [ ] Add type definitions for the SSH API
-
-## Implementation Details
-
-### 1. Create SSH IPC Handlers Module
-
-Create a new file `electron/modules/ssh.ts` with the following content:
-
-```typescript
-import { ipcMain } from 'electron';
-import * as path from 'path';
-import {
-	testConnection,
-	createConnection,
-	closeConnection,
-	executeCommand,
-	readRemoteFile,
-	writeRemoteFile,
-	listRemoteFiles
-} from '../helpers/ssh';
-import { SshConnection } from '../../src/types/ssh-connection';
-
-function registerSshHandlers() {
-	// Test SSH connection
-	ipcMain.handle('ssh:test-connection', async (_, config: SshConnection) => {
-		return await testConnection(config);
-	});
-
-	// Execute a command on the remote server
-	ipcMain.handle(
-		'ssh:execute-command',
-		async (_, config: SshConnection, command: string) => {
-			return await executeCommand(config, command);
-		}
-	);
-
-	// Read a file from the remote server
-	ipcMain.handle(
-		'ssh:read-file',
-		async (_, config: SshConnection, filePath: string) => {
-			try {
-				const content = await readRemoteFile(config, filePath);
-				return { success: true, content: content.toString('utf-8') };
-			} catch (error) {
-				return {
-					success: false,
-					error:
-						error instanceof Error
-							? error.message
-							: 'Unknown error reading file'
-				};
-			}
-		}
-	);
-
-	// Write a file to the remote server
-	ipcMain.handle(
-		'ssh:write-file',
-		async (_, config: SshConnection, filePath: string, content: string) => {
-			try {
-				await writeRemoteFile(config, filePath, content);
-				return { success: true };
-			} catch (error) {
-				return {
-					success: false,
-					error:
-						error instanceof Error
-							? error.message
-							: 'Unknown error writing file'
-				};
-			}
-		}
-	);
-
-	// List files in a directory on the remote server
-	ipcMain.handle(
-		'ssh:list-files',
-		async (_, config: SshConnection, dirPath: string) => {
-			try {
-				const files = await listRemoteFiles(config, dirPath);
-				return { success: true, files };
-			} catch (error) {
-				return {
-					success: false,
-					error:
-						error instanceof Error
-							? error.message
-							: 'Unknown error listing files'
-				};
-			}
-		}
-	);
-
-	// Get Laravel environment variables
-	ipcMain.handle('ssh:get-env', async (_, config: SshConnection) => {
-		try {
-			const envPath = path.join(config.remotePath, '.env');
-			const content = await readRemoteFile(config, envPath);
-
-			return { success: true, content: content.toString('utf-8') };
-		} catch (error) {
-			return {
-				success: false,
-				error:
-					error instanceof Error
-						? error.message
-						: 'Unknown error reading .env file'
-			};
-		}
-	});
-
-	// Update Laravel environment variables
-	ipcMain.handle(
-		'ssh:update-env',
-		async (_, config: SshConnection, content: string) => {
-			try {
-				const envPath = path.join(config.remotePath, '.env');
-				await writeRemoteFile(config, envPath, content);
-
-				return { success: true };
-			} catch (error) {
-				return {
-					success: false,
-					error:
-						error instanceof Error
-							? error.message
-							: 'Unknown error updating .env file'
-				};
-			}
-		}
-	);
-
-	// Close SSH connection
-	ipcMain.handle('ssh:close-connection', (_, config: SshConnection) => {
-		closeConnection(config);
-		return { success: true };
-	});
-}
-
-export { registerSshHandlers };
-```
-
-### 2. Update Main Process to Register SSH Handlers
-
-Update `electron/main/index.ts` to register the SSH handlers:
-
-```typescript
-import { registerSshHandlers } from '../modules/ssh';
-
-// Inside createWindow function, after registering other handlers:
-registerSshHandlers();
-```
-
-### 3. Update Preload Script
-
-Update the preload script at `electron/preload/index.ts` to expose the SSH API:
-
-```typescript
-// Add SSH API to contextBridge
-contextBridge.exposeInMainWorld('electronAPI', {
-	// ... existing API
-
-	ssh: {
-		testConnection: (config: any) =>
-			ipcRenderer.invoke('ssh:test-connection', config),
-		executeCommand: (config: any, command: string) =>
-			ipcRenderer.invoke('ssh:execute-command', config, command),
-		readFile: (config: any, filePath: string) =>
-			ipcRenderer.invoke('ssh:read-file', config, filePath),
-		writeFile: (config: any, filePath: string, content: string) =>
-			ipcRenderer.invoke('ssh:write-file', config, filePath, content),
-		listFiles: (config: any, dirPath: string) =>
-			ipcRenderer.invoke('ssh:list-files', config, dirPath),
-		getEnv: (config: any) => ipcRenderer.invoke('ssh:get-env', config),
-		updateEnv: (config: any, content: string) =>
-			ipcRenderer.invoke('ssh:update-env', config, content),
-		closeConnection: (config: any) =>
-			ipcRenderer.invoke('ssh:close-connection', config)
-	}
-});
-```
-
-### 4. Add Type Definitions for the SSH API
-
-Update the renderer process type definitions in `src/types/electron-api.d.ts` (create if it doesn't exist):
-
-```typescript
-import { SshConnection } from './ssh-connection';
-
-interface ElectronAPI {
-	// ... existing API types
-
-	ssh: {
-		testConnection: (
-			config: SshConnection
-		) => Promise<{ success: boolean; message: string }>;
-		executeCommand: (
-			config: SshConnection,
-			command: string
-		) => Promise<{
-			stdout: string;
-			stderr: string;
-			code: number | null;
-		}>;
-		readFile: (
-			config: SshConnection,
-			filePath: string
-		) => Promise<{
-			success: boolean;
-			content?: string;
-			error?: string;
-		}>;
-		writeFile: (
-			config: SshConnection,
-			filePath: string,
-			content: string
-		) => Promise<{
-			success: boolean;
-			error?: string;
-		}>;
-		listFiles: (
-			config: SshConnection,
-			dirPath: string
-		) => Promise<{
-			success: boolean;
-			files?: any[];
-			error?: string;
-		}>;
-		getEnv: (config: SshConnection) => Promise<{
-			success: boolean;
-			content?: string;
-			error?: string;
-		}>;
-		updateEnv: (
-			config: SshConnection,
-			content: string
-		) => Promise<{
-			success: boolean;
-			error?: string;
-		}>;
-		closeConnection: (
-			config: SshConnection
-		) => Promise<{ success: boolean }>;
-	};
-}
-
-declare global {
-	interface Window {
-		electronAPI: ElectronAPI;
-	}
-}
-```
-
-## Verification
-
-- Ensure all IPC handlers are correctly registered
-- Verify that the preload script exposes the SSH API correctly
-- Check that the type definitions are accurate and provide good intellisense
-- Confirm there are no TypeScript errors
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 4: Implement SSH Tunneling](./04-ssh-tunneling.md).
diff --git a/docs/ssh-implementation/04-ssh-tunneling.md b/docs/ssh-implementation/04-ssh-tunneling.md
deleted file mode 100644
index a346a55..0000000
--- a/docs/ssh-implementation/04-ssh-tunneling.md
+++ /dev/null
@@ -1,414 +0,0 @@
-# Step 4: Implement SSH Tunneling
-
-In this step, we'll implement SSH tunneling to allow the application to connect to database servers on the remote machine. This is essential for accessing remote database servers through the SSH connection.
-
-## Tasks
-
-- [ ] Extend SSH helper module with tunneling functions
-- [ ] Create tunnel management system
-- [ ] Add IPC handlers for tunnel operations
-- [ ] Implement database connection through SSH tunnels
-
-## Implementation Details
-
-### 1. Extend SSH Helper Module
-
-Update the `electron/helpers/ssh.ts` file to add tunneling functionality:
-
-```typescript
-import { Client, SFTPWrapper, ClientChannel, ForwardedTcpip } from 'ssh2';
-import * as net from 'net';
-import * as crypto from 'crypto';
-
-// Add to existing imports and code
-
-// Map to keep track of active tunnels
-const activeTunnels = new Map<
-	string,
-	{
-		server: net.Server;
-		localPort: number;
-		remoteHost: string;
-		remotePort: number;
-		sshClient: Client;
-	}
->();
-
-// Generate a unique ID for each tunnel
-function generateTunnelId(): string {
-	return crypto.randomBytes(16).toString('hex');
-}
-
-// Create an SSH tunnel
-async function createTunnel(
-	config: SshConnection,
-	remoteHost: string,
-	remotePort: number,
-	localPort: number = 0 // 0 means use a random available port
-): Promise<{ tunnelId: string; localPort: number }> {
-	const sshClient = await getConnection(config);
-
-	return new Promise((resolve, reject) => {
-		// Create a local server
-		const server = net.createServer((socket) => {
-			// When a connection is made to the local server
-			sshClient.forwardOut(
-				'127.0.0.1', // srcIP
-				socket.localPort || 0, // srcPort
-				remoteHost, // dstIP
-				remotePort, // dstPort
-				(err, stream) => {
-					if (err) {
-						socket.end();
-						console.error('SSH tunnel error:', err);
-						return;
-					}
-
-					// Pipe the SSH stream to the local socket and vice versa
-					socket.pipe(stream);
-					stream.pipe(socket);
-
-					stream.on('close', () => {
-						socket.end();
-					});
-
-					socket.on('close', () => {
-						stream.end();
-					});
-				}
-			);
-		});
-
-		// Handle server errors
-		server.on('error', (err) => {
-			reject(err);
-		});
-
-		// Listen on the specified local port or a random available port
-		server.listen(localPort, '127.0.0.1', () => {
-			const serverAddress = server.address() as net.AddressInfo;
-			const tunnelId = generateTunnelId();
-
-			// Store the tunnel information
-			activeTunnels.set(tunnelId, {
-				server,
-				localPort: serverAddress.port,
-				remoteHost,
-				remotePort,
-				sshClient
-			});
-
-			// Resolve with the tunnel ID and local port
-			resolve({
-				tunnelId,
-				localPort: serverAddress.port
-			});
-		});
-	});
-}
-
-// Close an SSH tunnel
-function closeTunnel(tunnelId: string): boolean {
-	if (activeTunnels.has(tunnelId)) {
-		const tunnel = activeTunnels.get(tunnelId)!;
-
-		// Close the local server
-		tunnel.server.close();
-		activeTunnels.delete(tunnelId);
-
-		return true;
-	}
-
-	return false;
-}
-
-// Close all SSH tunnels
-function closeAllTunnels(): void {
-	for (const tunnel of activeTunnels.values()) {
-		tunnel.server.close();
-	}
-
-	activeTunnels.clear();
-}
-
-// Update the cleanup function
-function closeAllConnections(): void {
-	// Close all tunnels first
-	closeAllTunnels();
-
-	// Then close all SSH connections
-	for (const conn of sshConnections.values()) {
-		try {
-			conn.end();
-		} catch (e) {
-			/* ignore */
-		}
-	}
-
-	sshConnections.clear();
-}
-
-// Export the new functions
-export {
-	// Existing exports
-	createConnection,
-	getConnection,
-	getSftpSession,
-	executeCommand,
-	readRemoteFile,
-	writeRemoteFile,
-	listRemoteFiles,
-	closeConnection,
-	closeAllConnections,
-	testConnection,
-
-	// New tunnel functions
-	createTunnel,
-	closeTunnel,
-	closeAllTunnels
-};
-```
-
-### 2. Add IPC Handlers for Tunnel Operations
-
-Update the `electron/modules/ssh.ts` file to add handlers for tunnel operations:
-
-```typescript
-import {
-	// Existing imports
-	testConnection,
-	createConnection,
-	closeConnection,
-	executeCommand,
-	readRemoteFile,
-	writeRemoteFile,
-	listRemoteFiles,
-
-	// New tunnel functions
-	createTunnel,
-	closeTunnel
-} from '../helpers/ssh';
-
-// Inside the registerSshHandlers function, add these handlers:
-
-// Create an SSH tunnel
-ipcMain.handle(
-	'ssh:create-tunnel',
-	async (
-		_,
-		config: SshConnection,
-		remoteHost: string,
-		remotePort: number,
-		localPort?: number
-	) => {
-		try {
-			const result = await createTunnel(
-				config,
-				remoteHost,
-				remotePort,
-				localPort
-			);
-			return {
-				success: true,
-				tunnelId: result.tunnelId,
-				localPort: result.localPort
-			};
-		} catch (error) {
-			return {
-				success: false,
-				error:
-					error instanceof Error
-						? error.message
-						: 'Unknown error creating tunnel'
-			};
-		}
-	}
-);
-
-// Close an SSH tunnel
-ipcMain.handle('ssh:close-tunnel', (_, tunnelId: string) => {
-	const success = closeTunnel(tunnelId);
-	return { success };
-});
-```
-
-### 3. Update Preload Script
-
-Update the preload script at `electron/preload/index.ts` to expose the tunnel API:
-
-```typescript
-// Inside the ssh object in contextBridge.exposeInMainWorld
-ssh: {
-    // Existing functions
-    testConnection: (config: any) => ipcRenderer.invoke('ssh:test-connection', config),
-    executeCommand: (config: any, command: string) => ipcRenderer.invoke('ssh:execute-command', config, command),
-    // ... other existing functions
-
-    // New tunnel functions
-    createTunnel: (config: any, remoteHost: string, remotePort: number, localPort?: number) =>
-        ipcRenderer.invoke('ssh:create-tunnel', config, remoteHost, remotePort, localPort),
-    closeTunnel: (tunnelId: string) => ipcRenderer.invoke('ssh:close-tunnel', tunnelId)
-}
-```
-
-### 4. Update Type Definitions
-
-Update the type definitions in `src/types/electron-api.d.ts`:
-
-```typescript
-// Inside the ssh object in the ElectronAPI interface
-ssh: {
-	// Existing function types
-	testConnection: (config: SshConnection) =>
-		Promise<{ success: boolean; message: string }>;
-	// ... other existing function types
-
-	// New tunnel function types
-	createTunnel: (
-		config: SshConnection,
-		remoteHost: string,
-		remotePort: number,
-		localPort?: number
-	) =>
-		Promise<{
-			success: boolean;
-			tunnelId?: string;
-			localPort?: number;
-			error?: string;
-		}>;
-	closeTunnel: (tunnelId: string) => Promise<{ success: boolean }>;
-}
-```
-
-### 5. Create a Tunnel Service
-
-Create a new file `src/services/tunnel-service.ts` to manage SSH tunnels:
-
-```typescript
-import { SshConnection } from '../types/ssh-connection';
-
-// Store active tunnels
-const activeTunnels = new Map<
-	string,
-	{
-		tunnelId: string;
-		localPort: number;
-		remoteHost: string;
-		remotePort: number;
-		connectionId: string;
-	}
->();
-
-/**
- * Create an SSH tunnel to a remote database server
- */
-export async function createDatabaseTunnel(
-	connectionId: string,
-	sshConfig: SshConnection,
-	remoteHost: string,
-	remotePort: number
-): Promise<{ tunnelId: string; localPort: number }> {
-	// Check if a tunnel already exists for this connection
-	for (const tunnel of activeTunnels.values()) {
-		if (
-			tunnel.connectionId === connectionId &&
-			tunnel.remoteHost === remoteHost &&
-			tunnel.remotePort === remotePort
-		) {
-			return {
-				tunnelId: tunnel.tunnelId,
-				localPort: tunnel.localPort
-			};
-		}
-	}
-
-	// Create a new tunnel
-	const result = await window.electronAPI.ssh.createTunnel(
-		sshConfig,
-		remoteHost,
-		remotePort
-	);
-
-	if (!result.success) {
-		throw new Error(result.error || 'Failed to create SSH tunnel');
-	}
-
-	// Store the tunnel information
-	const tunnelKey = `${connectionId}:${remoteHost}:${remotePort}`;
-	activeTunnels.set(tunnelKey, {
-		tunnelId: result.tunnelId!,
-		localPort: result.localPort!,
-		remoteHost,
-		remotePort,
-		connectionId
-	});
-
-	return {
-		tunnelId: result.tunnelId!,
-		localPort: result.localPort!
-	};
-}
-
-/**
- * Close an SSH tunnel
- */
-export async function closeDatabaseTunnel(
-	connectionId: string,
-	remoteHost: string,
-	remotePort: number
-): Promise<boolean> {
-	const tunnelKey = `${connectionId}:${remoteHost}:${remotePort}`;
-
-	if (activeTunnels.has(tunnelKey)) {
-		const tunnel = activeTunnels.get(tunnelKey)!;
-		const result = await window.electronAPI.ssh.closeTunnel(
-			tunnel.tunnelId
-		);
-
-		if (result.success) {
-			activeTunnels.delete(tunnelKey);
-		}
-
-		return result.success;
-	}
-
-	return false;
-}
-
-/**
- * Close all SSH tunnels for a specific connection
- */
-export async function closeAllConnectionTunnels(
-	connectionId: string
-): Promise<void> {
-	// Find all tunnels for this connection
-	for (const [key, tunnel] of activeTunnels.entries()) {
-		if (tunnel.connectionId === connectionId) {
-			await window.electronAPI.ssh.closeTunnel(tunnel.tunnelId);
-			activeTunnels.delete(key);
-		}
-	}
-}
-
-/**
- * Close all active SSH tunnels
- */
-export async function closeAllTunnels(): Promise<void> {
-	for (const tunnel of activeTunnels.values()) {
-		await window.electronAPI.ssh.closeTunnel(tunnel.tunnelId);
-	}
-
-	activeTunnels.clear();
-}
-```
-
-## Verification
-
-- Ensure the SSH tunneling functions work correctly
-- Test creating tunnels to remote database servers
-- Verify that tunnels are properly cleaned up when no longer needed
-- Confirm that connections through tunnels work as expected
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 5: Update UI Components for SSH](./05-ui-components.md).
diff --git a/docs/ssh-implementation/05-ui-components.md b/docs/ssh-implementation/05-ui-components.md
deleted file mode 100644
index 52c132b..0000000
--- a/docs/ssh-implementation/05-ui-components.md
+++ /dev/null
@@ -1,603 +0,0 @@
-# Step 5: Update UI Components for SSH
-
-In this step, we'll update the UI components to support SSH remote connections. This includes modifying the connection management UI to allow creating and editing SSH connections.
-
-## Tasks
-
-- [ ] Update connection management UI for SSH
-- [ ] Create a dedicated SSH connection form
-- [ ] Update connection store to handle SSH connections
-- [ ] Add connection type selector
-- [ ] Update project connection list to display SSH connections
-
-## Implementation Details
-
-### 1. Update Connection Type Selector
-
-First, update the connection type selector in `src/components/home/ManageConnection.vue` to include SSH as an option:
-
-```vue
-<template>
-	<!-- ... existing code ... -->
-	<div class="form-control">
-		<label class="label">
-			<span class="label-text">Connection Type</span>
-		</label>
-		<select
-			v-model="connection.type"
-			class="select select-bordered w-full"
-			@change="handleConnectionTypeChange"
-		>
-			<option :value="ConnectionType.MySQL">MySQL</option>
-			<option :value="ConnectionType.PostgreSQL">PostgreSQL</option>
-			<option :value="ConnectionType.SSH">SSH Remote</option>
-		</select>
-	</div>
-	<!-- ... existing code ... -->
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { ConnectionType } from '../../types/connection-types';
-import type { ProjectConnection } from '../../types/project';
-import type { SshConnection } from '../../types/ssh-connection';
-
-// ... existing code ...
-
-// Connection type handling
-function handleConnectionTypeChange() {
-	if (connection.value.type === ConnectionType.SSH) {
-		// Initialize SSH connection if not already set
-		if (!connection.value.ssh_config) {
-			connection.value.ssh_config = {
-				host: '',
-				port: 22,
-				username: '',
-				remotePath: '',
-				remoteDbType: 'mysql',
-				remoteDbConfig: {
-					host: 'localhost',
-					port: 3306,
-					database: '',
-					username: '',
-					password: ''
-				}
-			};
-		}
-
-		// Set isRemote flag
-		connection.value.isRemote = true;
-	} else {
-		// Clear SSH connection settings when switching to local
-		connection.value.ssh_config = undefined;
-
-		// Set isRemote flag
-		connection.value.isRemote = false;
-	}
-}
-
-// ... existing code ...
-</script>
-```
-
-### 2. Create SSH Connection Form
-
-Create a new file `src/components/home/SshConnectionForm.vue` with the following content:
-
-```vue
-<template>
-	<div class="w-full grid gap-4">
-		<h3 class="text-lg font-semibold mb-2">SSH Connection Settings</h3>
-
-		<!-- SSH Server Details -->
-		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-			<div class="form-control">
-				<label class="label">
-					<span class="label-text">SSH Host</span>
-				</label>
-				<input
-					v-model="sshConfig.host"
-					type="text"
-					placeholder="e.g., example.com or 192.168.1.100"
-					class="input input-bordered w-full"
-				/>
-			</div>
-
-			<div class="form-control">
-				<label class="label">
-					<span class="label-text">SSH Port</span>
-				</label>
-				<input
-					v-model.number="sshConfig.port"
-					type="number"
-					placeholder="22"
-					class="input input-bordered w-full"
-				/>
-			</div>
-		</div>
-
-		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-			<div class="form-control">
-				<label class="label">
-					<span class="label-text">Username</span>
-				</label>
-				<input
-					v-model="sshConfig.username"
-					type="text"
-					placeholder="SSH username"
-					class="input input-bordered w-full"
-				/>
-			</div>
-
-			<div class="form-control">
-				<label class="label">
-					<span class="label-text">Authentication Method</span>
-				</label>
-				<select
-					v-model="authMethod"
-					class="select select-bordered w-full"
-				>
-					<option value="password">Password</option>
-					<option value="privateKey">Private Key</option>
-				</select>
-			</div>
-		</div>
-
-		<!-- Authentication Method Specific Fields -->
-		<div
-			v-if="authMethod === 'password'"
-			class="form-control"
-		>
-			<label class="label">
-				<span class="label-text">Password</span>
-			</label>
-			<input
-				v-model="sshConfig.password"
-				type="password"
-				placeholder="SSH password"
-				class="input input-bordered w-full"
-			/>
-		</div>
-
-		<div
-			v-if="authMethod === 'privateKey'"
-			class="space-y-4"
-		>
-			<div class="form-control">
-				<label class="label">
-					<span class="label-text">Private Key Path</span>
-				</label>
-				<div class="join w-full">
-					<input
-						v-model="sshConfig.privateKey"
-						type="text"
-						placeholder="/path/to/private_key"
-						class="input input-bordered join-item flex-1"
-					/>
-					<button
-						@click="selectPrivateKeyFile"
-						class="btn join-item"
-					>
-						Browse
-					</button>
-				</div>
-			</div>
-
-			<div class="form-control">
-				<label class="label">
-					<span class="label-text">Passphrase (if needed)</span>
-				</label>
-				<input
-					v-model="sshConfig.passphrase"
-					type="password"
-					placeholder="Private key passphrase"
-					class="input input-bordered w-full"
-				/>
-			</div>
-		</div>
-
-		<!-- Project Path on Remote Server -->
-		<div class="form-control">
-			<label class="label">
-				<span class="label-text"
-					>Laravel Project Path on Remote Server</span
-				>
-			</label>
-			<input
-				v-model="sshConfig.remotePath"
-				type="text"
-				placeholder="/path/to/laravel/project"
-				class="input input-bordered w-full"
-			/>
-		</div>
-
-		<div class="divider">Remote Database Configuration</div>
-
-		<!-- Remote Database Type -->
-		<div class="form-control">
-			<label class="label">
-				<span class="label-text">Remote Database Type</span>
-			</label>
-			<select
-				v-model="sshConfig.remoteDbType"
-				class="select select-bordered w-full"
-			>
-				<option value="mysql">MySQL</option>
-				<option value="postgresql">PostgreSQL</option>
-			</select>
-		</div>
-
-		<!-- Remote Database Configuration -->
-		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-			<div class="form-control">
-				<label class="label">
-					<span class="label-text">Database Host</span>
-				</label>
-				<input
-					v-model="sshConfig.remoteDbConfig.host"
-					type="text"
-					placeholder="localhost"
-					class="input input-bordered w-full"
-				/>
-			</div>
-
-			<div class="form-control">
-				<label class="label">
-					<span class="label-text">Database Port</span>
-				</label>
-				<input
-					v-model.number="sshConfig.remoteDbConfig.port"
-					type="number"
-					:placeholder="
-						sshConfig.remoteDbType === 'mysql' ? '3306' : '5432'
-					"
-					class="input input-bordered w-full"
-				/>
-			</div>
-		</div>
-
-		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-			<div class="form-control">
-				<label class="label">
-					<span class="label-text">Database Name</span>
-				</label>
-				<input
-					v-model="sshConfig.remoteDbConfig.database"
-					type="text"
-					placeholder="database_name"
-					class="input input-bordered w-full"
-				/>
-			</div>
-
-			<div class="form-control">
-				<label class="label">
-					<span class="label-text">Username</span>
-				</label>
-				<input
-					v-model="sshConfig.remoteDbConfig.username"
-					type="text"
-					placeholder="database_user"
-					class="input input-bordered w-full"
-				/>
-			</div>
-		</div>
-
-		<div class="form-control">
-			<label class="label">
-				<span class="label-text">Password</span>
-			</label>
-			<input
-				v-model="sshConfig.remoteDbConfig.password"
-				type="password"
-				placeholder="database_password"
-				class="input input-bordered w-full"
-			/>
-		</div>
-
-		<!-- PostgreSQL Schema -->
-		<div
-			v-if="sshConfig.remoteDbType === 'postgresql'"
-			class="form-control"
-		>
-			<label class="label">
-				<span class="label-text">Schema (PostgreSQL Only)</span>
-			</label>
-			<input
-				v-model="sshConfig.remoteDbConfig.schema"
-				type="text"
-				placeholder="public"
-				class="input input-bordered w-full"
-			/>
-		</div>
-
-		<!-- Test Connection Button -->
-		<div class="mt-4">
-			<button
-				@click="testSshConnection"
-				class="btn btn-primary"
-				:disabled="isTestingConnection"
-			>
-				<span
-					v-if="isTestingConnection"
-					class="loading loading-spinner"
-				></span>
-				{{ isTestingConnection ? 'Testing...' : 'Test SSH Connection' }}
-			</button>
-			<div
-				v-if="testResult"
-				class="mt-2"
-			>
-				<div
-					v-if="testResult.success"
-					class="alert alert-success"
-				>
-					{{ testResult.message }}
-				</div>
-				<div
-					v-else
-					class="alert alert-error"
-				>
-					{{ testResult.message }}
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import type { SshConnection } from '../../types/ssh-connection';
-
-const props = defineProps<{
-	modelValue: SshConnection;
-}>();
-
-const emit = defineEmits<{
-	(e: 'update:modelValue', value: SshConnection): void;
-}>();
-
-// Local copy of SSH config
-const sshConfig = ref<SshConnection>({ ...props.modelValue });
-
-// Authentication method
-const authMethod = ref<'password' | 'privateKey'>(
-	props.modelValue.privateKey ? 'privateKey' : 'password'
-);
-
-// Testing connection state
-const isTestingConnection = ref(false);
-const testResult = ref<{ success: boolean; message: string } | null>(null);
-
-// Watch for changes and emit updates
-watch(
-	sshConfig,
-	(newValue) => {
-		emit('update:modelValue', { ...newValue });
-	},
-	{ deep: true }
-);
-
-// Watch for auth method changes
-watch(authMethod, (newValue) => {
-	if (newValue === 'password') {
-		// Clear private key settings
-		sshConfig.value.privateKey = undefined;
-		sshConfig.value.passphrase = undefined;
-	} else {
-		// Clear password
-		sshConfig.value.password = undefined;
-	}
-});
-
-// Update local config when props change
-watch(
-	() => props.modelValue,
-	(newValue) => {
-		sshConfig.value = { ...newValue };
-		authMethod.value = newValue.privateKey ? 'privateKey' : 'password';
-	},
-	{ deep: true }
-);
-
-// Select private key file
-async function selectPrivateKeyFile() {
-	try {
-		const result = await window.electronAPI.dialog.openFile({
-			title: 'Select Private Key File',
-			defaultPath: sshConfig.value.privateKey || undefined,
-			filters: [
-				{ name: 'All Files', extensions: ['*'] },
-				{ name: 'Private Key', extensions: ['pem', 'key', 'ppk'] }
-			],
-			properties: ['openFile']
-		});
-
-		if (result && result.filePaths && result.filePaths.length > 0) {
-			sshConfig.value.privateKey = result.filePaths[0];
-		}
-	} catch (error) {
-		console.error('Error selecting private key file:', error);
-	}
-}
-
-// Test SSH connection
-async function testSshConnection() {
-	isTestingConnection.value = true;
-	testResult.value = null;
-
-	try {
-		const result = await window.electronAPI.ssh.testConnection(
-			sshConfig.value
-		);
-		testResult.value = result;
-	} catch (error) {
-		testResult.value = {
-			success: false,
-			message:
-				error instanceof Error
-					? error.message
-					: 'Unknown error testing connection'
-		};
-	} finally {
-		isTestingConnection.value = false;
-	}
-}
-</script>
-```
-
-### 3. Update ManageConnection.vue to Include SSH Form
-
-Update the main connection form in `src/components/home/ManageConnection.vue` to conditionally show the SSH form:
-
-```vue
-<template>
-	<!-- ... existing code ... -->
-
-	<!-- Database Connection Form -->
-	<div
-		v-if="connection.type !== ConnectionType.SSH"
-		class="w-full"
-	>
-		<!-- MySQL or PostgreSQL form (existing code) -->
-		<MySQLConnectionForm
-			v-if="connection.type === ConnectionType.MySQL"
-			v-model="connection.db_config"
-		/>
-		<PostgreSQLConnectionForm
-			v-if="connection.type === ConnectionType.PostgreSQL"
-			v-model="connection.db_config"
-		/>
-	</div>
-
-	<!-- SSH Connection Form -->
-	<div
-		v-else
-		class="w-full"
-	>
-		<SshConnectionForm v-model="connection.ssh_config" />
-	</div>
-
-	<!-- ... existing code ... -->
-</template>
-
-<script lang="ts" setup>
-// ... existing imports ...
-import SshConnectionForm from './SshConnectionForm.vue';
-
-// ... rest of the existing code ...
-</script>
-```
-
-### 4. Update Project List Item to Show Connection Type Badge
-
-Modify the `src/components/home/ProjectItem.vue` component to show a badge indicating the connection type:
-
-```vue
-<template>
-	<div
-		class="card card-compact bg-base-100 shadow-md hover:shadow-lg transition-shadow duration-300 h-full"
-	>
-		<div class="card-body">
-			<div class="flex justify-between items-start">
-				<h2 class="card-title text-lg truncate">
-					{{ project.name }}
-
-					<!-- Connection Type Badge -->
-					<div class="flex items-center ml-2">
-						<div
-							class="badge badge-sm"
-							:class="getConnectionTypeBadgeClass(project.type)"
-						>
-							{{ getConnectionTypeLabel(project.type) }}
-						</div>
-
-						<!-- Remote Badge -->
-						<div
-							v-if="project.isRemote"
-							class="badge badge-sm bg-green-600 text-white ml-1"
-						>
-							REMOTE
-						</div>
-					</div>
-				</h2>
-
-				<!-- ... rest of template ... -->
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import {
-	ConnectionType,
-	getConnectionTypeLabel,
-	getConnectionTypeColor
-} from '../../types/connection-types';
-
-// ... existing code ...
-
-// Return the appropriate badge class for the connection type
-function getConnectionTypeBadgeClass(type: ConnectionType): string {
-	return `${getConnectionTypeColor(type)} text-white`;
-}
-</script>
-```
-
-### 5. Update Connection Store
-
-Update the connection store at `src/store/connections.ts` to handle SSH connections:
-
-```typescript
-// ... existing imports ...
-import { ConnectionType } from '../types/connection-types';
-import type { SshConnection } from '../types/ssh-connection';
-
-// ... existing code ...
-
-// Save a connection to IndexedDB
-export async function saveConnection(
-	connection: ProjectConnection
-): Promise<void> {
-	try {
-		connection.status = 'saved';
-
-		// Handle special cases for SSH connections
-		if (connection.type === ConnectionType.SSH) {
-			// Ensure isRemote is set
-			connection.isRemote = true;
-
-			// Validate SSH config
-			if (!connection.ssh_config) {
-				throw new Error(
-					'SSH configuration is required for SSH connections'
-				);
-			}
-		} else {
-			// Non-SSH connections should not have SSH config
-			connection.ssh_config = undefined;
-
-			// Ensure isRemote is false for non-SSH connections
-			connection.isRemote = false;
-		}
-
-		// ... rest of existing code ...
-	} catch (error) {
-		console.error('Error saving connection:', error);
-		throw error;
-	}
-}
-
-// ... rest of existing code ...
-```
-
-## Verification
-
-- Ensure the SSH connection form displays all necessary fields
-- Verify that the connection type selector works correctly
-- Test creating and editing SSH connections
-- Confirm that the connection badge displays correctly
-- Check that the connection type is properly stored and retrieved
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 6: Add Remote Indication Badges](./06-remote-badges.md).
diff --git a/docs/ssh-implementation/06-remote-badges.md b/docs/ssh-implementation/06-remote-badges.md
deleted file mode 100644
index 3baa10f..0000000
--- a/docs/ssh-implementation/06-remote-badges.md
+++ /dev/null
@@ -1,441 +0,0 @@
-# Step 6: Add Remote Indication Badges
-
-In this step, we'll enhance the UI to clearly indicate which projects or database connections are remote versus local. This will be implemented using badges and visual indicators throughout the application.
-
-## Tasks
-
-- [ ] Create a reusable remote badge component
-- [ ] Update project list to display remote badges
-- [ ] Add remote indicators to database tables view
-- [ ] Add remote indicators to database connection details
-- [ ] Update the project dashboard to show remote status
-
-## Implementation Details
-
-### 1. Create a Reusable Remote Badge Component
-
-Create a new file `src/components/ui/RemoteBadge.vue` with the following content:
-
-```vue
-<template>
-	<div
-		class="badge badge-sm"
-		:class="[size === 'lg' ? 'badge-lg' : '', getColorClass()]"
-	>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 24 24"
-			fill="currentColor"
-			class="w-3 h-3 mr-1"
-		>
-			<path
-				fill-rule="evenodd"
-				d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
-				clip-rule="evenodd"
-			/>
-		</svg>
-		{{ label }}
-	</div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-	type?: 'remote' | 'local';
-	size?: 'sm' | 'lg';
-	label?: string;
-}>();
-
-// Default values
-const type = props.type || 'remote';
-const label = props.label || (type === 'remote' ? 'REMOTE' : 'LOCAL');
-
-function getColorClass(): string {
-	return type === 'remote'
-		? 'bg-green-600 text-white'
-		: 'bg-blue-600 text-white';
-}
-</script>
-```
-
-### 2. Update Project List Component
-
-Update the project list item in `src/components/home/ProjectItem.vue` to use the new remote badge component:
-
-```vue
-<template>
-	<!-- ... existing code ... -->
-	<div class="flex justify-between items-start">
-		<h2 class="card-title text-lg truncate">
-			{{ project.name }}
-
-			<!-- Connection Type and Remote Badges -->
-			<div class="flex items-center ml-2">
-				<div
-					class="badge badge-sm"
-					:class="getConnectionTypeBadgeClass(project.type)"
-				>
-					{{ getConnectionTypeLabel(project.type) }}
-				</div>
-
-				<!-- Use the new RemoteBadge component -->
-				<RemoteBadge
-					v-if="project.isRemote"
-					class="ml-1"
-				/>
-			</div>
-		</h2>
-		<!-- ... rest of template ... -->
-	</div>
-	<!-- ... existing code ... -->
-</template>
-
-<script lang="ts" setup>
-import {
-	ConnectionType,
-	getConnectionTypeLabel,
-	getConnectionTypeColor
-} from '../../types/connection-types';
-import RemoteBadge from '../ui/RemoteBadge.vue';
-
-// ... existing code ...
-</script>
-```
-
-### 3. Update Database Tables View
-
-Update the database tables view in `src/views/database/Tables.vue` to show remote indicators:
-
-```vue
-<template>
-	<!-- ... existing code ... -->
-	<div class="flex justify-between items-center mb-4">
-		<div class="flex items-center">
-			<h1 class="text-2xl font-bold">Database Tables</h1>
-
-			<!-- Add remote badge if connection is remote -->
-			<RemoteBadge
-				v-if="isRemoteConnection"
-				class="ml-2"
-				size="lg"
-			/>
-		</div>
-		<!-- ... rest of template ... -->
-	</div>
-	<!-- ... existing code ... -->
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { getConnection } from '../../store/connections';
-import { ConnectionType } from '../../types/connection-types';
-import RemoteBadge from '../../components/ui/RemoteBadge.vue';
-
-// ... existing code ...
-
-// Compute whether the connection is remote
-const isRemoteConnection = computed(() => {
-	return currentConnection.value?.isRemote || false;
-});
-
-// ... rest of existing code ...
-</script>
-```
-
-### 4. Update Database Connection Details
-
-Update the database connection details view in `src/components/database/ConnectionInfo.vue` to show remote status:
-
-```vue
-<template>
-	<div class="card bg-base-100 shadow-md">
-		<div class="card-body">
-			<div class="flex items-center">
-				<h2 class="card-title">Connection Details</h2>
-
-				<!-- Add remote badge -->
-				<RemoteBadge
-					v-if="connection?.isRemote"
-					class="ml-2"
-				/>
-			</div>
-
-			<!-- ... rest of template ... -->
-
-			<!-- Add SSH Information Section for Remote Connections -->
-			<div
-				v-if="connection?.isRemote && connection?.ssh_config"
-				class="mt-4"
-			>
-				<div class="divider">SSH Information</div>
-				<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-					<div>
-						<span class="font-semibold">SSH Host:</span>
-						<span class="ml-2"
-							>{{ connection.ssh_config.host }}:{{
-								connection.ssh_config.port
-							}}</span
-						>
-					</div>
-					<div>
-						<span class="font-semibold">SSH User:</span>
-						<span class="ml-2">{{
-							connection.ssh_config.username
-						}}</span>
-					</div>
-					<div>
-						<span class="font-semibold">Remote Path:</span>
-						<span class="ml-2">{{
-							connection.ssh_config.remotePath
-						}}</span>
-					</div>
-					<div>
-						<span class="font-semibold">Remote DB Type:</span>
-						<span class="ml-2">{{
-							connection.ssh_config.remoteDbType
-						}}</span>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import type { ProjectConnection } from '../../types/project';
-import RemoteBadge from '../ui/RemoteBadge.vue';
-
-defineProps({
-	connection: {
-		type: Object as PropType<ProjectConnection>,
-		required: true
-	}
-});
-</script>
-```
-
-### 5. Update Project Dashboard
-
-Update the project dashboard in `src/views/project/Dashboard.vue` to display remote status:
-
-```vue
-<template>
-	<div class="container mx-auto p-4">
-		<div class="flex justify-between items-center mb-6">
-			<div class="flex items-center">
-				<h1 class="text-2xl font-bold">{{ project?.name }}</h1>
-
-				<!-- Add connection type badge -->
-				<div class="ml-3 flex items-center space-x-2">
-					<div
-						v-if="project?.type"
-						class="badge"
-						:class="getConnectionTypeBadgeClass(project.type)"
-					>
-						{{ getConnectionTypeLabel(project.type) }}
-					</div>
-
-					<!-- Add remote badge -->
-					<RemoteBadge v-if="project?.isRemote" />
-				</div>
-			</div>
-
-			<!-- ... rest of template ... -->
-		</div>
-
-		<!-- ... rest of template ... -->
-
-		<!-- Add Remote Connection Info Card -->
-		<div
-			v-if="project?.isRemote && project?.ssh_config"
-			class="card bg-base-100 shadow-md mb-6"
-		>
-			<div class="card-body">
-				<h2 class="card-title">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="w-6 h-6 mr-2"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z"
-						/>
-					</svg>
-					Remote Connection
-				</h2>
-				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<div>
-						<p>
-							<span class="font-semibold">SSH Host:</span>
-							{{ project.ssh_config.host }}:{{
-								project.ssh_config.port
-							}}
-						</p>
-						<p>
-							<span class="font-semibold">SSH User:</span>
-							{{ project.ssh_config.username }}
-						</p>
-						<p>
-							<span class="font-semibold">Project Path:</span>
-							{{ project.ssh_config.remotePath }}
-						</p>
-					</div>
-					<div>
-						<p>
-							<span class="font-semibold">Remote DB Type:</span>
-							{{ project.ssh_config.remoteDbType }}
-						</p>
-						<p>
-							<span class="font-semibold">Remote DB Host:</span>
-							{{ project.ssh_config.remoteDbConfig.host }}:{{
-								project.ssh_config.remoteDbConfig.port
-							}}
-						</p>
-						<p>
-							<span class="font-semibold">Remote DB Name:</span>
-							{{ project.ssh_config.remoteDbConfig.database }}
-						</p>
-					</div>
-				</div>
-				<div class="card-actions justify-end mt-4">
-					<button
-						@click="testRemoteConnection"
-						class="btn btn-primary btn-sm"
-					>
-						Test Connection
-					</button>
-					<button
-						@click="executeRemoteCommand"
-						class="btn btn-secondary btn-sm"
-					>
-						Run Artisan Command
-					</button>
-				</div>
-			</div>
-		</div>
-
-		<!-- ... rest of template ... -->
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { getConnection } from '../../store/connections';
-import {
-	ConnectionType,
-	getConnectionTypeLabel,
-	getConnectionTypeColor
-} from '../../types/connection-types';
-import RemoteBadge from '../../components/ui/RemoteBadge.vue';
-
-// ... existing code ...
-
-// Badge helper
-function getConnectionTypeBadgeClass(type: ConnectionType): string {
-	return `${getConnectionTypeColor(type)} text-white`;
-}
-
-// Remote connection functions
-async function testRemoteConnection() {
-	if (!project.value?.ssh_config) return;
-
-	try {
-		const result = await window.electronAPI.ssh.testConnection(
-			project.value.ssh_config
-		);
-		// Show result in a toast or alert
-	} catch (error) {
-		// Handle error
-		console.error('Error testing connection:', error);
-	}
-}
-
-async function executeRemoteCommand() {
-	if (!project.value?.ssh_config) return;
-
-	// This could open a modal to input and execute a command
-	// Implementation would depend on your UI framework and approach
-
-	// Example implementation using a simple prompt:
-	const command = prompt(
-		'Enter artisan command to execute (without php artisan):'
-	);
-	if (!command) return;
-
-	try {
-		const fullCommand = `cd ${project.value.ssh_config.remotePath} && php artisan ${command}`;
-		const result = await window.electronAPI.ssh.executeCommand(
-			project.value.ssh_config,
-			fullCommand
-		);
-		// Show result in a modal or alert
-		alert(
-			`Command output:\n${result.stdout || 'No output'}\n\nErrors:\n${result.stderr || 'No errors'}`
-		);
-	} catch (error) {
-		// Handle error
-		console.error('Error executing command:', error);
-	}
-}
-
-// ... rest of existing code ...
-</script>
-```
-
-### 6. Update Navigation Component
-
-Update the application sidebar or navigation component to indicate remote connections:
-
-```vue
-<template>
-	<!-- ... existing code ... -->
-	<ul class="menu bg-base-200 w-56 p-2">
-		<!-- ... existing nav items ... -->
-
-		<!-- Update project links to show remote badge -->
-		<template
-			v-for="project in projects"
-			:key="project.id"
-		>
-			<li>
-				<router-link
-					:to="`/project/${project.id}`"
-					class="flex items-center"
-				>
-					<span class="flex-1">{{ project.name }}</span>
-					<RemoteBadge v-if="project.isRemote" />
-				</router-link>
-			</li>
-		</template>
-	</ul>
-	<!-- ... existing code ... -->
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-import { listConnections } from '../../store/connections';
-import type { ProjectConnection } from '../../types/project';
-import RemoteBadge from '../ui/RemoteBadge.vue';
-
-// ... existing code ...
-</script>
-```
-
-## Verification
-
-- Ensure the remote badge component is created and works correctly
-- Verify that remote badges appear on all relevant screens
-- Confirm that the project list shows remote badges correctly
-- Check that the database views properly indicate remote connections
-- Test that all remote connection details are displayed correctly
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 7: Handle Remote File Operations](./07-remote-files.md).
diff --git a/docs/ssh-implementation/07-remote-files.md b/docs/ssh-implementation/07-remote-files.md
deleted file mode 100644
index 549f674..0000000
--- a/docs/ssh-implementation/07-remote-files.md
+++ /dev/null
@@ -1,865 +0,0 @@
-# Step 7: Handle Remote File Operations
-
-In this step, we'll implement functionality to handle file operations on remote servers via SSH. This will allow users to view, edit, and manage files in their remote Laravel projects.
-
-## Tasks
-
-- [ ] Create a file service for remote operations
-- [ ] Implement file listing functionality
-- [ ] Implement file reading and writing
-- [ ] Update environment file editor to work with remote files
-- [ ] Create a remote file browser component
-
-## Implementation Details
-
-### 1. Create a Remote File Service
-
-Create a new file `src/services/remote-file-service.ts` to handle remote file operations:
-
-```typescript
-import { SshConnection } from '../types/ssh-connection';
-
-/**
- * List files in a directory on the remote server
- */
-export async function listRemoteFiles(
-	sshConfig: SshConnection,
-	directoryPath: string
-): Promise<
-	Array<{
-		name: string;
-		type: 'file' | 'directory';
-		size: number;
-		modifyTime: Date;
-	}>
-> {
-	try {
-		const result = await window.electronAPI.ssh.listFiles(
-			sshConfig,
-			directoryPath
-		);
-
-		if (!result.success) {
-			throw new Error(result.error || 'Failed to list remote files');
-		}
-
-		return result.files.map((file: any) => ({
-			name: file.filename,
-			type: file.longname.startsWith('d') ? 'directory' : 'file',
-			size: parseInt(file.attrs.size),
-			modifyTime: new Date(file.attrs.mtime * 1000)
-		}));
-	} catch (error) {
-		console.error('Error listing remote files:', error);
-		throw error;
-	}
-}
-
-/**
- * Read a file from the remote server
- */
-export async function readRemoteFile(
-	sshConfig: SshConnection,
-	filePath: string
-): Promise<string> {
-	try {
-		const result = await window.electronAPI.ssh.readFile(
-			sshConfig,
-			filePath
-		);
-
-		if (!result.success) {
-			throw new Error(result.error || 'Failed to read remote file');
-		}
-
-		return result.content;
-	} catch (error) {
-		console.error('Error reading remote file:', error);
-		throw error;
-	}
-}
-
-/**
- * Write to a file on the remote server
- */
-export async function writeRemoteFile(
-	sshConfig: SshConnection,
-	filePath: string,
-	content: string
-): Promise<void> {
-	try {
-		const result = await window.electronAPI.ssh.writeFile(
-			sshConfig,
-			filePath,
-			content
-		);
-
-		if (!result.success) {
-			throw new Error(result.error || 'Failed to write remote file');
-		}
-	} catch (error) {
-		console.error('Error writing remote file:', error);
-		throw error;
-	}
-}
-
-/**
- * Check if a file exists on the remote server
- */
-export async function checkRemoteFileExists(
-	sshConfig: SshConnection,
-	filePath: string
-): Promise<boolean> {
-	try {
-		const command = `test -f "${filePath}" && echo "exists" || echo "not exists"`;
-		const result = await window.electronAPI.ssh.executeCommand(
-			sshConfig,
-			command
-		);
-
-		return result.stdout.trim() === 'exists';
-	} catch (error) {
-		console.error('Error checking if remote file exists:', error);
-		return false;
-	}
-}
-
-/**
- * Get Laravel environment variables from a remote server
- */
-export async function getRemoteEnvVariables(
-	sshConfig: SshConnection
-): Promise<string> {
-	try {
-		const envPath = `${sshConfig.remotePath}/.env`;
-		return await readRemoteFile(sshConfig, envPath);
-	} catch (error) {
-		console.error('Error getting remote env variables:', error);
-		throw error;
-	}
-}
-
-/**
- * Update Laravel environment variables on a remote server
- */
-export async function updateRemoteEnvVariables(
-	sshConfig: SshConnection,
-	content: string
-): Promise<void> {
-	try {
-		const envPath = `${sshConfig.remotePath}/.env`;
-		await writeRemoteFile(sshConfig, envPath, content);
-	} catch (error) {
-		console.error('Error updating remote env variables:', error);
-		throw error;
-	}
-}
-```
-
-### 2. Create a Remote File Browser Component
-
-Create a new file `src/components/project/RemoteFileBrowser.vue` to provide a UI for browsing remote files:
-
-```vue
-<template>
-	<div class="card bg-base-100 shadow-md">
-		<div class="card-body">
-			<div class="flex justify-between items-center mb-4">
-				<h2 class="card-title">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="w-6 h-6 mr-2"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
-						/>
-					</svg>
-					Remote Files
-				</h2>
-				<div>
-					<button
-						@click="refreshFiles"
-						class="btn btn-sm btn-ghost"
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							class="w-5 h-5"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-							/>
-						</svg>
-					</button>
-				</div>
-			</div>
-
-			<!-- Current Path -->
-			<div class="flex items-center mb-4 overflow-x-auto">
-				<button
-					@click="navigateToPath('')"
-					class="btn btn-sm btn-ghost"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="w-5 h-5"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-						/>
-					</svg>
-				</button>
-
-				<div class="breadcrumbs text-sm">
-					<ul>
-						<li
-							v-for="(part, index) in pathParts"
-							:key="index"
-						>
-							<button
-								@click="navigateToPathPart(index)"
-								class="hover:underline"
-							>
-								{{ part || 'root' }}
-							</button>
-						</li>
-					</ul>
-				</div>
-			</div>
-
-			<!-- Loading State -->
-			<div
-				v-if="loading"
-				class="py-12 flex justify-center"
-			>
-				<span class="loading loading-spinner loading-lg"></span>
-			</div>
-
-			<!-- Error State -->
-			<div
-				v-else-if="error"
-				class="alert alert-error"
-			>
-				{{ error }}
-			</div>
-
-			<!-- Empty Directory -->
-			<div
-				v-else-if="files.length === 0"
-				class="py-12 text-center text-gray-500"
-			>
-				This directory is empty
-			</div>
-
-			<!-- File List -->
-			<div
-				v-else
-				class="overflow-x-auto"
-			>
-				<table class="table table-zebra w-full">
-					<thead>
-						<tr>
-							<th>Name</th>
-							<th>Type</th>
-							<th>Size</th>
-							<th>Modified</th>
-							<th>Actions</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr
-							v-for="file in files"
-							:key="file.name"
-						>
-							<td>
-								<!-- If it's a directory, make it clickable -->
-								<button
-									v-if="file.type === 'directory'"
-									@click="navigateToDirectory(file.name)"
-									class="flex items-center text-left hover:underline"
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="w-5 h-5 mr-2 text-yellow-500"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
-										/>
-									</svg>
-									{{ file.name }}
-								</button>
-
-								<!-- If it's a file, show it normally -->
-								<div
-									v-else
-									class="flex items-center"
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="w-5 h-5 mr-2 text-blue-500"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
-										/>
-									</svg>
-									{{ file.name }}
-								</div>
-							</td>
-							<td>{{ file.type }}</td>
-							<td>{{ formatFileSize(file.size) }}</td>
-							<td>{{ formatDate(file.modifyTime) }}</td>
-							<td>
-								<div class="flex space-x-2">
-									<button
-										v-if="file.type === 'file'"
-										@click="viewFile(file.name)"
-										class="btn btn-xs btn-ghost"
-										title="View file"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-											/>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-											/>
-										</svg>
-									</button>
-									<button
-										v-if="
-											file.type === 'file' &&
-											isEditable(file.name)
-										"
-										@click="editFile(file.name)"
-										class="btn btn-xs btn-ghost"
-										title="Edit file"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21h-9.5A2.25 2.25 0 014 18.75V8.25A2.25 2.25 0 016.25 6H11"
-											/>
-										</svg>
-									</button>
-								</div>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-
-	<!-- File View Modal -->
-	<dialog
-		:open="!!viewingFile"
-		class="modal"
-	>
-		<div class="modal-box w-11/12 max-w-5xl">
-			<div class="flex justify-between items-center mb-4">
-				<h3 class="font-bold text-lg">{{ viewingFile }}</h3>
-				<button
-					@click="closeFileViewer"
-					class="btn btn-sm btn-circle"
-				>
-					✕
-				</button>
-			</div>
-
-			<div
-				v-if="fileLoading"
-				class="py-4 flex justify-center"
-			>
-				<span class="loading loading-spinner loading-md"></span>
-			</div>
-
-			<div
-				v-else-if="fileError"
-				class="alert alert-error"
-			>
-				{{ fileError }}
-			</div>
-
-			<div
-				v-else
-				class="overflow-auto bg-base-300 p-4 rounded"
-			>
-				<pre class="whitespace-pre-wrap">{{ fileContent }}</pre>
-			</div>
-
-			<div class="modal-action">
-				<button
-					@click="closeFileViewer"
-					class="btn"
-				>
-					Close
-				</button>
-			</div>
-		</div>
-	</dialog>
-
-	<!-- File Edit Modal -->
-	<dialog
-		:open="!!editingFile"
-		class="modal"
-	>
-		<div class="modal-box w-11/12 max-w-5xl">
-			<div class="flex justify-between items-center mb-4">
-				<h3 class="font-bold text-lg">Edit: {{ editingFile }}</h3>
-				<button
-					@click="closeFileEditor"
-					class="btn btn-sm btn-circle"
-				>
-					✕
-				</button>
-			</div>
-
-			<div
-				v-if="fileLoading"
-				class="py-4 flex justify-center"
-			>
-				<span class="loading loading-spinner loading-md"></span>
-			</div>
-
-			<div
-				v-else-if="fileError"
-				class="alert alert-error"
-			>
-				{{ fileError }}
-			</div>
-
-			<div
-				v-else
-				class="form-control mb-4"
-			>
-				<textarea
-					v-model="fileContent"
-					class="textarea textarea-bordered h-96 font-mono"
-					placeholder="File content"
-				></textarea>
-			</div>
-
-			<div class="modal-action">
-				<button
-					@click="saveFile"
-					class="btn btn-primary"
-					:disabled="fileSaving"
-				>
-					<span
-						v-if="fileSaving"
-						class="loading loading-spinner loading-sm"
-					></span>
-					Save
-				</button>
-				<button
-					@click="closeFileEditor"
-					class="btn"
-				>
-					Cancel
-				</button>
-			</div>
-		</div>
-	</dialog>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, computed, watch } from 'vue';
-import { SshConnection } from '../../types/ssh-connection';
-import {
-	listRemoteFiles,
-	readRemoteFile,
-	writeRemoteFile
-} from '../../services/remote-file-service';
-
-const props = defineProps<{
-	sshConfig: SshConnection;
-}>();
-
-// File browser state
-const currentPath = ref('');
-const files = ref<
-	Array<{
-		name: string;
-		type: 'file' | 'directory';
-		size: number;
-		modifyTime: Date;
-	}>
->([]);
-const loading = ref(false);
-const error = ref<string | null>(null);
-
-// File viewer/editor state
-const viewingFile = ref<string | null>(null);
-const editingFile = ref<string | null>(null);
-const fileContent = ref('');
-const fileLoading = ref(false);
-const fileError = ref<string | null>(null);
-const fileSaving = ref(false);
-
-// Computed path parts for breadcrumbs
-const pathParts = computed(() => {
-	if (!currentPath.value) return [];
-	return currentPath.value.split('/').filter(Boolean);
-});
-
-// Watch for changes in SSH config
-watch(
-	() => props.sshConfig,
-	() => {
-		if (props.sshConfig) {
-			loadFiles();
-		}
-	},
-	{ immediate: true }
-);
-
-// Format file size for display
-function formatFileSize(bytes: number): string {
-	if (bytes === 0) return '0 B';
-
-	const k = 1024;
-	const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
-	const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-}
-
-// Format date for display
-function formatDate(date: Date): string {
-	return date.toLocaleString();
-}
-
-// Check if a file is editable based on extension
-function isEditable(filename: string): boolean {
-	const editableExtensions = [
-		'.php',
-		'.js',
-		'.ts',
-		'.vue',
-		'.css',
-		'.scss',
-		'.html',
-		'.blade.php',
-		'.json',
-		'.md',
-		'.txt',
-		'.env',
-		'.gitignore',
-		'.yml',
-		'.yaml',
-		'.sh'
-	];
-
-	return editableExtensions.some((ext) => filename.endsWith(ext));
-}
-
-// Load files from the current directory
-async function loadFiles() {
-	loading.value = true;
-	error.value = null;
-
-	try {
-		const path = currentPath.value
-			? `${props.sshConfig.remotePath}/${currentPath.value}`
-			: props.sshConfig.remotePath;
-		files.value = await listRemoteFiles(props.sshConfig, path);
-	} catch (err) {
-		error.value =
-			err instanceof Error ? err.message : 'Error loading files';
-		console.error('Error loading files:', err);
-	} finally {
-		loading.value = false;
-	}
-}
-
-// Navigate to a specific directory
-function navigateToDirectory(dirName: string) {
-	currentPath.value = currentPath.value
-		? `${currentPath.value}/${dirName}`
-		: dirName;
-	loadFiles();
-}
-
-// Navigate to a specific path
-function navigateToPath(path: string) {
-	currentPath.value = path;
-	loadFiles();
-}
-
-// Navigate to a specific part of the current path
-function navigateToPathPart(index: number) {
-	currentPath.value = pathParts.value.slice(0, index + 1).join('/');
-	loadFiles();
-}
-
-// Refresh the current directory
-function refreshFiles() {
-	loadFiles();
-}
-
-// View a file
-async function viewFile(fileName: string) {
-	viewingFile.value = fileName;
-	fileLoading.value = true;
-	fileError.value = null;
-
-	try {
-		const filePath = currentPath.value
-			? `${props.sshConfig.remotePath}/${currentPath.value}/${fileName}`
-			: `${props.sshConfig.remotePath}/${fileName}`;
-
-		fileContent.value = await readRemoteFile(props.sshConfig, filePath);
-	} catch (err) {
-		fileError.value =
-			err instanceof Error ? err.message : 'Error loading file';
-		console.error('Error loading file:', err);
-	} finally {
-		fileLoading.value = false;
-	}
-}
-
-// Edit a file
-async function editFile(fileName: string) {
-	editingFile.value = fileName;
-	fileLoading.value = true;
-	fileError.value = null;
-
-	try {
-		const filePath = currentPath.value
-			? `${props.sshConfig.remotePath}/${currentPath.value}/${fileName}`
-			: `${props.sshConfig.remotePath}/${fileName}`;
-
-		fileContent.value = await readRemoteFile(props.sshConfig, filePath);
-	} catch (err) {
-		fileError.value =
-			err instanceof Error ? err.message : 'Error loading file';
-		console.error('Error loading file:', err);
-	} finally {
-		fileLoading.value = false;
-	}
-}
-
-// Save edited file
-async function saveFile() {
-	if (!editingFile.value) return;
-
-	fileSaving.value = true;
-	fileError.value = null;
-
-	try {
-		const filePath = currentPath.value
-			? `${props.sshConfig.remotePath}/${currentPath.value}/${editingFile.value}`
-			: `${props.sshConfig.remotePath}/${editingFile.value}`;
-
-		await writeRemoteFile(props.sshConfig, filePath, fileContent.value);
-		closeFileEditor();
-	} catch (err) {
-		fileError.value =
-			err instanceof Error ? err.message : 'Error saving file';
-		console.error('Error saving file:', err);
-	} finally {
-		fileSaving.value = false;
-	}
-}
-
-// Close file viewer
-function closeFileViewer() {
-	viewingFile.value = null;
-	fileContent.value = '';
-	fileError.value = null;
-}
-
-// Close file editor
-function closeFileEditor() {
-	editingFile.value = null;
-	fileContent.value = '';
-	fileError.value = null;
-}
-</script>
-```
-
-### 3. Update Environment File Editor for Remote Files
-
-Update the environment file editor in `src/components/environment/EnvEditor.vue` to support remote environment files:
-
-```vue
-<template>
-	<!-- ... existing template ... -->
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { getConnection } from '../../store/connections';
-import { readEnvFile, writeEnvFile } from '../../services/env-service';
-import {
-	getRemoteEnvVariables,
-	updateRemoteEnvVariables
-} from '../../services/remote-file-service';
-
-// ... existing setup code ...
-
-// Modified loadEnvFile function to handle remote files
-async function loadEnvFile() {
-	loading.value = true;
-	error.value = null;
-
-	try {
-		if (!connection.value) {
-			throw new Error('No connection selected');
-		}
-
-		// Check if it's a remote connection
-		if (connection.value.isRemote && connection.value.ssh_config) {
-			// Load environment variables from remote server
-			env.value = await getRemoteEnvVariables(
-				connection.value.ssh_config
-			);
-		} else {
-			// Load environment variables from local file
-			env.value = await readEnvFile(connection.value.projectPath);
-		}
-
-		// Process environment variables into key-value pairs
-		// ... existing code ...
-	} catch (err) {
-		error.value =
-			err instanceof Error
-				? err.message
-				: 'Unknown error loading environment file';
-		console.error('Error loading environment file:', err);
-	} finally {
-		loading.value = false;
-	}
-}
-
-// Modified saveEnvFile function to handle remote files
-async function saveEnvFile() {
-	saving.value = true;
-	saveError.value = null;
-
-	try {
-		if (!connection.value) {
-			throw new Error('No connection selected');
-		}
-
-		// Convert environment variables back to file format
-		// ... existing code ...
-
-		// Check if it's a remote connection
-		if (connection.value.isRemote && connection.value.ssh_config) {
-			// Update environment variables on remote server
-			await updateRemoteEnvVariables(
-				connection.value.ssh_config,
-				envFileContent
-			);
-		} else {
-			// Update environment variables in local file
-			await writeEnvFile(connection.value.projectPath, envFileContent);
-		}
-
-		saveSuccess.value = true;
-		setTimeout(() => {
-			saveSuccess.value = false;
-		}, 3000);
-	} catch (err) {
-		saveError.value =
-			err instanceof Error
-				? err.message
-				: 'Unknown error saving environment file';
-		console.error('Error saving environment file:', err);
-	} finally {
-		saving.value = false;
-	}
-}
-
-// ... rest of existing code ...
-</script>
-```
-
-### 4. Add Remote File Browser to Project Dashboard
-
-Update the project dashboard in `src/views/project/Dashboard.vue` to include the remote file browser component:
-
-```vue
-<template>
-	<!-- ... existing template ... -->
-
-	<!-- Add Remote File Browser for SSH connections -->
-	<div
-		v-if="project?.isRemote && project?.ssh_config"
-		class="mb-6"
-	>
-		<RemoteFileBrowser :ssh-config="project.ssh_config" />
-	</div>
-
-	<!-- ... rest of template ... -->
-</template>
-
-<script lang="ts" setup>
-// ... existing imports ...
-import RemoteFileBrowser from '../../components/project/RemoteFileBrowser.vue';
-
-// ... rest of existing code ...
-</script>
-```
-
-## Verification
-
-- Ensure remote file operations work correctly
-- Test listing files from remote servers
-- Verify reading and writing files works reliably
-- Check that the environment file editor properly handles remote files
-- Test the remote file browser component functionality
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 8: Execute Remote Commands](./08-remote-commands.md).
diff --git a/docs/ssh-implementation/08-remote-commands.md b/docs/ssh-implementation/08-remote-commands.md
deleted file mode 100644
index 3c7b086..0000000
--- a/docs/ssh-implementation/08-remote-commands.md
+++ /dev/null
@@ -1,732 +0,0 @@
-# Step 8: Execute Remote Commands
-
-In this step, we'll implement the ability to execute commands on the remote server. This will allow users to run Laravel artisan commands, migrations, and other CLI tasks on the remote project.
-
-## Tasks
-
-- [ ] Create a remote command service
-- [ ] Implement artisan command execution
-- [ ] Create a command execution UI component
-- [ ] Add composer package management
-- [ ] Integrate remote commands with database migrations
-
-## Implementation Details
-
-### 1. Create a Remote Command Service
-
-Create a new file `src/services/remote-command-service.ts` to handle command execution:
-
-```typescript
-import { SshConnection } from '../types/ssh-connection';
-
-/**
- * Execute a command on the remote server
- */
-export async function executeRemoteCommand(
-	sshConfig: SshConnection,
-	command: string
-): Promise<{
-	stdout: string;
-	stderr: string;
-	code: number | null;
-}> {
-	try {
-		return await window.electronAPI.ssh.executeCommand(sshConfig, command);
-	} catch (error) {
-		console.error('Error executing remote command:', error);
-		throw error;
-	}
-}
-
-/**
- * Execute an artisan command on the remote server
- */
-export async function executeArtisanCommand(
-	sshConfig: SshConnection,
-	command: string
-): Promise<{
-	stdout: string;
-	stderr: string;
-	code: number | null;
-}> {
-	const fullCommand = `cd ${sshConfig.remotePath} && php artisan ${command}`;
-	return await executeRemoteCommand(sshConfig, fullCommand);
-}
-
-/**
- * Execute a composer command on the remote server
- */
-export async function executeComposerCommand(
-	sshConfig: SshConnection,
-	command: string
-): Promise<{
-	stdout: string;
-	stderr: string;
-	code: number | null;
-}> {
-	const fullCommand = `cd ${sshConfig.remotePath} && composer ${command}`;
-	return await executeRemoteCommand(sshConfig, fullCommand);
-}
-
-/**
- * Get a list of available artisan commands
- */
-export async function getArtisanCommandList(
-	sshConfig: SshConnection
-): Promise<string[]> {
-	try {
-		const result = await executeArtisanCommand(sshConfig, 'list --raw');
-
-		if (result.code !== 0) {
-			throw new Error(
-				`Error getting artisan command list: ${result.stderr}`
-			);
-		}
-
-		// Parse the command list
-		return result.stdout
-			.split('\n')
-			.map((line) => line.trim())
-			.filter(Boolean);
-	} catch (error) {
-		console.error('Error getting artisan command list:', error);
-		throw error;
-	}
-}
-
-/**
- * Run migrations on the remote server
- */
-export async function runMigrations(
-	sshConfig: SshConnection,
-	options: {
-		fresh?: boolean;
-		seed?: boolean;
-		force?: boolean;
-		step?: number;
-	} = {}
-): Promise<{
-	stdout: string;
-	stderr: string;
-	code: number | null;
-}> {
-	let command = 'migrate';
-
-	if (options.fresh) {
-		command = 'migrate:fresh';
-	}
-
-	if (options.seed) {
-		command += ' --seed';
-	}
-
-	if (options.force) {
-		command += ' --force';
-	}
-
-	if (options.step && options.step > 0) {
-		command += ` --step=${options.step}`;
-	}
-
-	return await executeArtisanCommand(sshConfig, command);
-}
-
-/**
- * Get the status of migrations
- */
-export async function getMigrationStatus(sshConfig: SshConnection): Promise<{
-	stdout: string;
-	stderr: string;
-	code: number | null;
-}> {
-	return await executeArtisanCommand(sshConfig, 'migrate:status');
-}
-```
-
-### 2. Create a Remote Command Execution Component
-
-Create a new file `src/components/project/RemoteCommandExecutor.vue` for the UI to execute commands:
-
-```vue
-<template>
-	<div class="card bg-base-100 shadow-md">
-		<div class="card-body">
-			<div class="flex justify-between items-center mb-4">
-				<h2 class="card-title">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="w-6 h-6 mr-2"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
-						/>
-					</svg>
-					Remote Commands
-				</h2>
-			</div>
-
-			<!-- Command Type Tabs -->
-			<div class="tabs tabs-boxed mb-4">
-				<button
-					class="tab"
-					:class="{ 'tab-active': activeTab === 'artisan' }"
-					@click="activeTab = 'artisan'"
-				>
-					Artisan
-				</button>
-				<button
-					class="tab"
-					:class="{ 'tab-active': activeTab === 'composer' }"
-					@click="activeTab = 'composer'"
-				>
-					Composer
-				</button>
-				<button
-					class="tab"
-					:class="{ 'tab-active': activeTab === 'custom' }"
-					@click="activeTab = 'custom'"
-				>
-					Custom Command
-				</button>
-			</div>
-
-			<!-- Artisan Command Tab -->
-			<div
-				v-if="activeTab === 'artisan'"
-				class="space-y-4"
-			>
-				<div class="space-y-2">
-					<h3 class="font-medium">Common Commands</h3>
-					<div class="flex flex-wrap gap-2">
-						<button
-							v-for="cmd in commonArtisanCommands"
-							:key="cmd.command"
-							@click="runCommand('artisan', cmd.command)"
-							class="btn btn-sm"
-						>
-							{{ cmd.label }}
-						</button>
-					</div>
-				</div>
-
-				<div class="form-control">
-					<label class="label">
-						<span class="label-text">Artisan Command</span>
-					</label>
-					<div class="join w-full">
-						<span
-							class="join-item input input-bordered flex items-center px-3 bg-base-200"
-							>php artisan</span
-						>
-						<input
-							v-model="artisanCommand"
-							type="text"
-							placeholder="command:name [options]"
-							class="input input-bordered join-item flex-1"
-							@keyup.enter="runCommand('artisan', artisanCommand)"
-						/>
-						<button
-							@click="runCommand('artisan', artisanCommand)"
-							class="btn join-item"
-							:disabled="!artisanCommand.trim() || isExecuting"
-						>
-							<span
-								v-if="
-									isExecuting &&
-									activeCommandType === 'artisan'
-								"
-								class="loading loading-spinner loading-sm"
-							></span>
-							Execute
-						</button>
-					</div>
-				</div>
-
-				<div
-					v-if="artisanCommands.length > 0"
-					class="space-y-2"
-				>
-					<h3 class="font-medium">Available Commands</h3>
-					<div
-						class="flex flex-wrap gap-2 max-h-40 overflow-y-auto p-2 border border-base-300 rounded"
-					>
-						<button
-							v-for="cmd in artisanCommands"
-							:key="cmd"
-							@click="selectArtisanCommand(cmd)"
-							class="btn btn-xs btn-ghost"
-						>
-							{{ cmd }}
-						</button>
-					</div>
-				</div>
-			</div>
-
-			<!-- Composer Command Tab -->
-			<div
-				v-if="activeTab === 'composer'"
-				class="space-y-4"
-			>
-				<div class="space-y-2">
-					<h3 class="font-medium">Common Commands</h3>
-					<div class="flex flex-wrap gap-2">
-						<button
-							v-for="cmd in commonComposerCommands"
-							:key="cmd.command"
-							@click="runCommand('composer', cmd.command)"
-							class="btn btn-sm"
-						>
-							{{ cmd.label }}
-						</button>
-					</div>
-				</div>
-
-				<div class="form-control">
-					<label class="label">
-						<span class="label-text">Composer Command</span>
-					</label>
-					<div class="join w-full">
-						<span
-							class="join-item input input-bordered flex items-center px-3 bg-base-200"
-							>composer</span
-						>
-						<input
-							v-model="composerCommand"
-							type="text"
-							placeholder="require package/name"
-							class="input input-bordered join-item flex-1"
-							@keyup.enter="
-								runCommand('composer', composerCommand)
-							"
-						/>
-						<button
-							@click="runCommand('composer', composerCommand)"
-							class="btn join-item"
-							:disabled="!composerCommand.trim() || isExecuting"
-						>
-							<span
-								v-if="
-									isExecuting &&
-									activeCommandType === 'composer'
-								"
-								class="loading loading-spinner loading-sm"
-							></span>
-							Execute
-						</button>
-					</div>
-				</div>
-			</div>
-
-			<!-- Custom Command Tab -->
-			<div
-				v-if="activeTab === 'custom'"
-				class="space-y-4"
-			>
-				<div class="form-control">
-					<label class="label">
-						<span class="label-text">Custom Shell Command</span>
-					</label>
-					<div class="join w-full">
-						<input
-							v-model="customCommand"
-							type="text"
-							placeholder="ls -la"
-							class="input input-bordered join-item flex-1"
-							@keyup.enter="runCommand('custom', customCommand)"
-						/>
-						<button
-							@click="runCommand('custom', customCommand)"
-							class="btn join-item"
-							:disabled="!customCommand.trim() || isExecuting"
-						>
-							<span
-								v-if="
-									isExecuting &&
-									activeCommandType === 'custom'
-								"
-								class="loading loading-spinner loading-sm"
-							></span>
-							Execute
-						</button>
-					</div>
-				</div>
-			</div>
-
-			<!-- Command Output -->
-			<div
-				v-if="commandOutput"
-				class="mt-4"
-			>
-				<div class="collapse collapse-arrow bg-base-200">
-					<input
-						type="checkbox"
-						:checked="true"
-					/>
-					<div class="collapse-title font-medium">Command Output</div>
-					<div class="collapse-content">
-						<div class="tabs tabs-boxed mb-2">
-							<button
-								class="tab"
-								:class="{
-									'tab-active': outputTab === 'stdout'
-								}"
-								@click="outputTab = 'stdout'"
-							>
-								Standard Output
-							</button>
-							<button
-								class="tab"
-								:class="{
-									'tab-active': outputTab === 'stderr'
-								}"
-								@click="outputTab = 'stderr'"
-							>
-								Standard Error
-							</button>
-						</div>
-
-						<div
-							v-if="outputTab === 'stdout'"
-							class="bg-base-300 p-4 rounded"
-						>
-							<pre class="whitespace-pre-wrap text-sm">{{
-								commandOutput.stdout || 'No output'
-							}}</pre>
-						</div>
-
-						<div
-							v-if="outputTab === 'stderr'"
-							class="bg-base-300 p-4 rounded"
-						>
-							<pre
-								class="whitespace-pre-wrap text-sm text-error"
-								>{{ commandOutput.stderr || 'No errors' }}</pre
-							>
-						</div>
-
-						<div class="mt-2">
-							<span class="font-semibold">Exit Code:</span>
-							<span
-								:class="
-									commandOutput.code === 0
-										? 'text-success'
-										: 'text-error'
-								"
-							>
-								{{ commandOutput.code }}
-							</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, watch } from 'vue';
-import { SshConnection } from '../../types/ssh-connection';
-import {
-	executeArtisanCommand,
-	executeComposerCommand,
-	executeRemoteCommand,
-	getArtisanCommandList
-} from '../../services/remote-command-service';
-
-const props = defineProps<{
-	sshConfig: SshConnection;
-}>();
-
-// Command state
-const activeTab = ref<'artisan' | 'composer' | 'custom'>('artisan');
-const artisanCommand = ref('');
-const composerCommand = ref('');
-const customCommand = ref('');
-const isExecuting = ref(false);
-const activeCommandType = ref<'artisan' | 'composer' | 'custom' | null>(null);
-
-// Output state
-const commandOutput = ref<{
-	stdout: string;
-	stderr: string;
-	code: number | null;
-} | null>(null);
-const outputTab = ref<'stdout' | 'stderr'>('stdout');
-
-// Available commands
-const artisanCommands = ref<string[]>([]);
-
-// Common commands for quick access
-const commonArtisanCommands = [
-	{ label: 'List Routes', command: 'route:list' },
-	{ label: 'Clear Cache', command: 'cache:clear' },
-	{ label: 'Clear Config', command: 'config:clear' },
-	{ label: 'Clear Views', command: 'view:clear' },
-	{ label: 'Run Migrations', command: 'migrate' },
-	{ label: 'Migration Status', command: 'migrate:status' },
-	{ label: 'Seeds List', command: 'db:seed --list' }
-];
-
-const commonComposerCommands = [
-	{ label: 'Install', command: 'install' },
-	{ label: 'Update', command: 'update' },
-	{ label: 'Dump Autoload', command: 'dump-autoload' },
-	{ label: 'Show Outdated', command: 'outdated' },
-	{ label: 'Validate', command: 'validate' }
-];
-
-// Watch for changes in SSH config
-watch(
-	() => props.sshConfig,
-	() => {
-		if (props.sshConfig) {
-			loadArtisanCommands();
-		}
-	},
-	{ immediate: true }
-);
-
-// Load available artisan commands
-async function loadArtisanCommands() {
-	try {
-		artisanCommands.value = await getArtisanCommandList(props.sshConfig);
-	} catch (error) {
-		console.error('Error loading artisan commands:', error);
-		artisanCommands.value = [];
-	}
-}
-
-// Select an artisan command
-function selectArtisanCommand(command: string) {
-	artisanCommand.value = command;
-}
-
-// Run a command based on the active tab
-async function runCommand(
-	type: 'artisan' | 'composer' | 'custom',
-	command: string
-) {
-	if (!command.trim() || isExecuting.value) return;
-
-	isExecuting.value = true;
-	activeCommandType.value = type;
-	commandOutput.value = null;
-
-	try {
-		let result;
-
-		switch (type) {
-			case 'artisan':
-				result = await executeArtisanCommand(props.sshConfig, command);
-				break;
-			case 'composer':
-				result = await executeComposerCommand(props.sshConfig, command);
-				break;
-			case 'custom':
-				result = await executeRemoteCommand(props.sshConfig, command);
-				break;
-		}
-
-		commandOutput.value = result;
-
-		// Clear command if successful
-		if (result.code === 0) {
-			if (type === 'artisan') {
-				// Reload artisan commands if we might have changed them
-				if (
-					command.includes('make:') ||
-					command.includes('install') ||
-					command.includes('app:name')
-				) {
-					loadArtisanCommands();
-				}
-			}
-		}
-	} catch (error) {
-		console.error(`Error executing ${type} command:`, error);
-		commandOutput.value = {
-			stdout: '',
-			stderr:
-				error instanceof Error
-					? error.message
-					: 'Unknown error executing command',
-			code: 1
-		};
-	} finally {
-		isExecuting.value = false;
-		activeCommandType.value = null;
-	}
-}
-</script>
-```
-
-### 3. Update Project Dashboard for Remote Commands
-
-Update the project dashboard in `src/views/project/Dashboard.vue` to include the remote command executor:
-
-```vue
-<template>
-	<!-- ... existing template ... -->
-
-	<!-- Add Remote Command Executor for SSH connections -->
-	<div
-		v-if="project?.isRemote && project?.ssh_config"
-		class="mb-6"
-	>
-		<RemoteCommandExecutor :ssh-config="project.ssh_config" />
-	</div>
-
-	<!-- ... rest of template ... -->
-</template>
-
-<script lang="ts" setup>
-// ... existing imports ...
-import RemoteFileBrowser from '../../components/project/RemoteFileBrowser.vue';
-import RemoteCommandExecutor from '../../components/project/RemoteCommandExecutor.vue';
-
-// ... rest of existing code ...
-</script>
-```
-
-### 4. Integrate with Database Migration UI
-
-If you have an existing migration management UI, update it to handle remote migrations. For example, in `src/components/database/MigrationManager.vue`:
-
-```vue
-<template>
-	<!-- ... existing template ... -->
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { getConnection } from '../../store/connections';
-import {
-	runMigration,
-	getMigrationStatus
-} from '../../services/migration-service';
-import {
-	runMigrations as runRemoteMigrations,
-	getMigrationStatus as getRemoteMigrationStatus
-} from '../../services/remote-command-service';
-
-// ... existing setup code ...
-
-// Modified runMigration function to handle remote migrations
-async function runMigration(options = {}) {
-	loading.value = true;
-	error.value = null;
-
-	try {
-		if (!connection.value) {
-			throw new Error('No connection selected');
-		}
-
-		let result;
-
-		// Check if it's a remote connection
-		if (connection.value.isRemote && connection.value.ssh_config) {
-			// Run migrations on remote server
-			result = await runRemoteMigrations(
-				connection.value.ssh_config,
-				options
-			);
-
-			// Check for errors
-			if (result.code !== 0) {
-				throw new Error(`Migration failed: ${result.stderr}`);
-			}
-
-			// Parse output - implementation depends on how you want to display
-			// migration results to the user
-		} else {
-			// Run migrations locally
-			result = await runLocalMigration(
-				connection.value.projectPath,
-				options
-			);
-		}
-
-		// Success message or refresh migration status
-		await loadMigrationStatus();
-	} catch (err) {
-		error.value =
-			err instanceof Error
-				? err.message
-				: 'Unknown error running migrations';
-		console.error('Error running migrations:', err);
-	} finally {
-		loading.value = false;
-	}
-}
-
-// Modified loadMigrationStatus function to handle remote status
-async function loadMigrationStatus() {
-	statusLoading.value = true;
-	statusError.value = null;
-
-	try {
-		if (!connection.value) {
-			throw new Error('No connection selected');
-		}
-
-		let result;
-
-		// Check if it's a remote connection
-		if (connection.value.isRemote && connection.value.ssh_config) {
-			// Get migration status from remote server
-			result = await getRemoteMigrationStatus(
-				connection.value.ssh_config
-			);
-
-			// Check for errors
-			if (result.code !== 0) {
-				throw new Error(
-					`Failed to get migration status: ${result.stderr}`
-				);
-			}
-
-			// Parse the output to extract migration status
-			// This depends on how Laravel formats the migration status output
-			// and how you want to display it to the user
-		} else {
-			// Get migration status locally
-			result = await getLocalMigrationStatus(
-				connection.value.projectPath
-			);
-		}
-
-		// Update status in the UI
-		// ... existing code ...
-	} catch (err) {
-		statusError.value =
-			err instanceof Error
-				? err.message
-				: 'Unknown error loading migration status';
-		console.error('Error loading migration status:', err);
-	} finally {
-		statusLoading.value = false;
-	}
-}
-
-// ... rest of existing code ...
-</script>
-```
-
-## Verification
-
-- Ensure remote commands execute correctly
-- Test running artisan commands on the remote server
-- Verify composer commands work properly
-- Test handling of command outputs and error states
-- Confirm that migrations can be run on the remote server
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 9: Install Dependencies](./09-dependencies.md).
diff --git a/docs/ssh-implementation/09-dependencies.md b/docs/ssh-implementation/09-dependencies.md
deleted file mode 100644
index e63a603..0000000
--- a/docs/ssh-implementation/09-dependencies.md
+++ /dev/null
@@ -1,156 +0,0 @@
-# Step 9: Install Dependencies
-
-In this step, we'll install and configure all the necessary dependencies for the SSH functionality in the application.
-
-## Tasks
-
-- [ ] Install SSH2 client library
-- [ ] Install type definitions for SSH2
-- [ ] Update package.json with new dependencies
-- [ ] Configure build tools for native modules
-
-## Implementation Details
-
-### 1. Install SSH2 Client Library
-
-The primary dependency for SSH support is the `ssh2` package, which is a pure JavaScript implementation of the SSH2 protocol. It provides all the functionality needed for SSH connections, tunneling, and file transfers.
-
-Run the following command to install the package:
-
-```bash
-npm install ssh2
-```
-
-### 2. Install Type Definitions for SSH2
-
-For proper TypeScript support, we need to install the type definitions for the SSH2 library:
-
-```bash
-npm install @types/ssh2 --save-dev
-```
-
-### 3. Update package.json
-
-After installing the dependencies, verify that they're correctly added to your `package.json` file. It should contain the following entries:
-
-```json
-{
-	"dependencies": {
-		// ... existing dependencies
-		"ssh2": "^1.11.0"
-	},
-	"devDependencies": {
-		// ... existing dev dependencies
-		"@types/ssh2": "^1.11.6"
-	}
-}
-```
-
-The version numbers may be different depending on the current releases of the packages.
-
-### 4. Configure Electron for Native Modules
-
-If you're using Electron Builder for packaging your application, you need to ensure it correctly handles the native modules used by SSH2. Add the following to your `electron-builder.yml` or equivalent configuration:
-
-```yaml
-npmRebuild: true
-files:
-    - '!node_modules/ssh2/**/*'
-    - 'node_modules/ssh2/lib/**/*'
-asar: true
-asarUnpack:
-    - 'node_modules/ssh2/**/*'
-```
-
-Or if you're using the configuration in `package.json`:
-
-```json
-{
-	"build": {
-		"npmRebuild": true,
-		"files": ["!node_modules/ssh2/**/*", "node_modules/ssh2/lib/**/*"],
-		"asar": true,
-		"asarUnpack": ["node_modules/ssh2/**/*"]
-	}
-}
-```
-
-This ensures that Electron Builder correctly packages the SSH2 module and its dependencies.
-
-### 5. Install Optional Dependencies for Enhanced Functionality
-
-For enhanced SSH functionality, you may want to install the following optional dependencies:
-
-#### 5.1. Install bcrypt for Improved Password Handling
-
-```bash
-npm install bcrypt
-npm install @types/bcrypt --save-dev
-```
-
-This can be used for securely handling passwords when storing SSH credentials.
-
-#### 5.2. Install node-forge for Key Management
-
-```bash
-npm install node-forge
-npm install @types/node-forge --save-dev
-```
-
-This can be used for handling SSH key formats and conversions.
-
-### 6. Verify Installation
-
-After installing all dependencies, verify that everything is working correctly by building your application:
-
-```bash
-npm run build
-```
-
-If there are any errors related to the SSH2 package or its dependencies, you may need to install additional build tools or resolve conflicts.
-
-## Troubleshooting Common Issues
-
-### SSH2 Installation Issues
-
-If you encounter issues installing the SSH2 package, it might be due to its native dependencies. Try the following:
-
-1. Ensure you have the necessary build tools installed on your system:
-
-    - On Windows: Install Visual Studio Build Tools with C++ support
-    - On macOS: Install Xcode Command Line Tools
-    - On Linux: Install the appropriate build tools (`build-essential` on Ubuntu/Debian)
-
-2. If you're behind a proxy or have network issues, try:
-
-    ```bash
-    npm config set registry https://registry.npmjs.org/
-    npm install ssh2 --no-proxy
-    ```
-
-3. If you're still having issues, you can try using a pre-built binary:
-    ```bash
-    npm install ssh2-prebuilt
-    ```
-
-### Electron Packaging Issues
-
-If you encounter issues packaging the application with Electron Builder, try these solutions:
-
-1. Make sure you're using a compatible version of Electron with the SSH2 package
-2. Try rebuilding native modules for your Electron version:
-    ```bash
-    npx electron-rebuild -f -m ./node_modules/ssh2
-    ```
-3. Check if any other dependencies conflict with SSH2 and resolve those conflicts
-
-## Verification
-
-- Ensure all dependencies are correctly installed
-- Verify that the application builds without errors
-- Check that the SSH2 module is correctly packaged with Electron Builder
-- Test basic SSH functionality to confirm everything is working
-
-## Next Steps
-
-After completing these tasks, proceed to [Step 10: Testing & Verification](./10-testing.md).
diff --git a/docs/ssh-implementation/10-testing.md b/docs/ssh-implementation/10-testing.md
deleted file mode 100644
index 8655752..0000000
--- a/docs/ssh-implementation/10-testing.md
+++ /dev/null
@@ -1,295 +0,0 @@
-# Step 10: Testing & Verification
-
-In this step, we'll perform comprehensive testing and verification of the SSH implementation to ensure all functionality works correctly.
-
-## Tasks
-
-- [ ] Set up a test environment
-- [ ] Test SSH connection establishment
-- [ ] Test remote file operations
-- [ ] Test remote command execution
-- [ ] Test database operations through SSH tunnel
-- [ ] Verify UI components and badges
-- [ ] Document any issues and fixes
-
-## Implementation Details
-
-### 1. Set Up a Test Environment
-
-Before testing the SSH functionality, you'll need to set up a suitable test environment:
-
-#### 1.1. Test SSH Server
-
-You have several options for setting up a test SSH server:
-
-**Option 1: Use a remote server you already have access to**
-
-- Make sure it has PHP and Laravel installed
-- Ensure you have SSH access with a valid username/password or key
-
-**Option 2: Set up a local virtual machine**
-
-- Install VirtualBox or another virtualization software
-- Set up a Linux VM (Ubuntu Server is a good choice)
-- Install SSH server, PHP, and set up a Laravel project
-- Configure the VM network to allow SSH access from your host machine
-
-**Option 3: Use Docker**
-
-- Create a Docker container with SSH, PHP, and Laravel
-- Example Dockerfile:
-
-```dockerfile
-FROM php:8.1-fpm
-
-# Install dependencies
-RUN apt-get update && apt-get install -y \
-    openssh-server \
-    git \
-    unzip \
-    libzip-dev \
-    && docker-php-ext-install zip pdo pdo_mysql
-
-# Configure SSH
-RUN mkdir /var/run/sshd
-RUN echo 'root:password' | chpasswd
-RUN sed -i 's/#PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config
-
-# Install Composer
-RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
-
-# Set up Laravel project
-WORKDIR /var/www
-RUN composer create-project laravel/laravel test-project
-
-EXPOSE 22 80
-CMD ["/usr/sbin/sshd", "-D"]
-```
-
-Build and run the container:
-
-```bash
-docker build -t ssh-laravel-test .
-docker run -d -p 2222:22 -p 8000:80 ssh-laravel-test
-```
-
-### 2. Test SSH Connection Establishment
-
-Test the basic SSH connection functionality:
-
-#### 2.1. Create a new SSH connection
-
-1. Open the application
-2. Go to the connection management screen
-3. Click "Add Connection"
-4. Select "SSH Remote" as the connection type
-5. Fill in the connection details:
-    - Name: "Test SSH Connection"
-    - SSH Host: Your test server address
-    - SSH Port: 22 (or your custom port)
-    - Username: Your SSH username
-    - Authentication: Use either password or private key
-    - Remote Path: Path to your Laravel project
-    - Remote DB Type: Select MySQL or PostgreSQL
-    - Remote DB Config: Configure based on your test server
-6. Click "Test Connection" to verify
-7. Save the connection
-
-#### 2.2. Verify in Connection List
-
-1. Check that the connection appears in the list
-2. Verify that it has the SSH/Remote badge
-3. Check that the connection type is displayed correctly
-
-### 3. Test Remote File Operations
-
-Test the remote file browser and file operations:
-
-#### 3.1. Browse remote files
-
-1. Open the remote project
-2. Navigate to the remote file browser
-3. Check that the root directory of the Laravel project is displayed
-4. Navigate through directories to verify browsing works
-5. Check that file details (size, modification time) are displayed correctly
-
-#### 3.2. View and edit files
-
-1. Select a text file (e.g., `.env`) to view
-2. Verify that the file content is displayed correctly
-3. Try editing the file and saving changes
-4. Refresh to confirm changes were saved
-5. Try editing different file types (PHP, JavaScript, etc.)
-
-#### 3.3. Test error handling
-
-1. Try accessing a non-existent file
-2. Try editing a file without write permissions
-3. Verify that appropriate error messages are displayed
-
-### 4. Test Remote Command Execution
-
-Test the remote command execution functionality:
-
-#### 4.1. Artisan commands
-
-1. Navigate to the remote command execution interface
-2. Select the "Artisan" tab
-3. Try running basic commands:
-    - `php artisan --version`
-    - `php artisan list`
-    - `php artisan route:list`
-4. Check that command output is displayed correctly
-5. Verify that error messages are displayed for invalid commands
-
-#### 4.2. Composer commands
-
-1. Select the "Composer" tab
-2. Try running basic commands:
-    - `composer --version`
-    - `composer show`
-    - `composer dump-autoload`
-3. Check that output is displayed correctly
-
-#### 4.3. Custom commands
-
-1. Select the "Custom Command" tab
-2. Try running basic shell commands:
-    - `ls -la`
-    - `pwd`
-    - `whoami`
-3. Verify that output is displayed correctly
-
-### 5. Test Database Operations Through SSH Tunnel
-
-Test connecting to the remote database through an SSH tunnel:
-
-#### 5.1. Test database connection
-
-1. Open the database view for the remote connection
-2. Verify that the connection is established
-3. Check that the database tables are listed correctly
-
-#### 5.2. Test queries
-
-1. Open the SQL executor
-2. Run a simple query (e.g., `SELECT 1`)
-3. Run a query to list tables
-4. Execute a query on one of the tables
-5. Verify that results are displayed correctly
-
-#### 5.3. Test migrations
-
-1. Navigate to the migration management interface
-2. Check the migration status
-3. Try running a migration
-4. Verify that the migration is executed correctly
-
-### 6. Verify UI Components and Badges
-
-Verify that all UI elements related to SSH connections work correctly:
-
-#### 6.1. Check remote badges
-
-1. Verify that remote badges are displayed in the project list
-2. Check that connection type badges are correct
-3. Verify that remote badges appear in all relevant views
-
-#### 6.2. Check SSH-specific UI elements
-
-1. Verify that SSH connection details are displayed correctly
-2. Check that the remote file browser is only shown for SSH connections
-3. Verify that the remote command executor is only shown for SSH connections
-
-### 7. Test Edge Cases and Error Handling
-
-Test various edge cases to ensure robust error handling:
-
-#### 7.1. Connection issues
-
-1. Test with incorrect SSH credentials
-2. Test with an invalid SSH host
-3. Test with an unreachable server
-4. Verify that appropriate error messages are displayed
-
-#### 7.2. Permission issues
-
-1. Test accessing files without read permissions
-2. Test editing files without write permissions
-3. Test executing commands without execute permissions
-4. Verify that appropriate error messages are displayed
-
-#### 7.3. Resource limitations
-
-1. Test with large files (>10MB)
-2. Test with commands that produce large amounts of output
-3. Test with long-running commands
-4. Verify that the application handles these cases gracefully
-
-### 8. Documentation and Fixes
-
-Document any issues encountered during testing and implement fixes:
-
-#### 8.1. Document known issues
-
-Create a document listing any known issues or limitations of the SSH implementation, such as:
-
-- Maximum file size restrictions
-- Command execution timeouts
-- Unsupported SSH features
-
-#### 8.2. Fix issues
-
-Address any issues identified during testing:
-
-1. Fix bugs in the code
-2. Improve error handling
-3. Enhance user feedback for long-running operations
-
-#### 8.3. Update documentation
-
-Update any documentation to reflect changes made during testing:
-
-1. Update README or user guide
-2. Update code comments
-3. Add troubleshooting tips
-
-## Final Verification Checklist
-
-Use this checklist for final verification of the SSH implementation:
-
-- [ ] SSH connections can be created and saved successfully
-- [ ] Connection badges correctly indicate remote connections
-- [ ] Remote file browser displays files and directories correctly
-- [ ] Files can be viewed and edited remotely
-- [ ] Artisan commands execute successfully
-- [ ] Composer commands execute successfully
-- [ ] Custom shell commands execute successfully
-- [ ] Database connections through SSH tunnels work correctly
-- [ ] Migrations can be run on the remote server
-- [ ] Error handling works as expected
-- [ ] UI elements are displayed correctly
-- [ ] Performance is acceptable for all operations
-- [ ] Edge cases are handled gracefully
-
-## Next Steps
-
-After completing testing and verification, the SSH implementation should be ready for production use. Some potential future enhancements to consider:
-
-1. **Performance optimizations**:
-
-    - Connection pooling for SSH connections
-    - Caching of remote file information
-    - Asynchronous command execution for long-running commands
-
-2. **Feature enhancements**:
-
-    - Multi-server SSH management
-    - Script storage for frequently used commands
-    - Scheduled command execution
-    - File synchronization between local and remote projects
-
-3. **Security enhancements**:
-    - Better password/key storage
-    - Session timeout handling
-    - Connection activity logging
diff --git a/electron/helpers/docker.ts b/electron/helpers/docker.ts
index d0822ad..f91cb09 100644
--- a/electron/helpers/docker.ts
+++ b/electron/helpers/docker.ts
@@ -3,15 +3,6 @@ import fs from 'fs';
 import * as zlib from 'node:zlib';
 import { RestorationProgressConfig } from '../../src/types/project';
 
-declare module 'dockerode' {
-	interface Container {
-		getExec(id: string): Docker.Exec;
-	}
-	interface Exec {
-		stop(): Promise<any>;
-	}
-}
-
 interface DockerExecStream extends NodeJS.ReadWriteStream {
 	dockerExecId?: string;
 	dockerContainer?: string;
@@ -49,42 +40,6 @@ async function isDockerAvailable() {
 	}
 }
 
-async function isDockerRunning() {
-	try {
-		return await isDockerAvailable();
-	} catch (error) {
-		return false;
-	}
-}
-
-async function getDockerContainers() {
-	try {
-		const docker = createDockerClient();
-		const containers = await docker.listContainers({ all: false });
-
-		return containers.map((container) => {
-			const name = container.Names[0].replace(/^\//, '');
-
-			let ports = '';
-			if (container.Ports && container.Ports.length > 0) {
-				ports = container.Ports.map((port) => {
-					if (port.PublicPort && port.PrivatePort) {
-						return `${port.PublicPort}->${port.PrivatePort}/${port.Type}`;
-					} else if (port.PrivatePort) {
-						return `${port.PrivatePort}/${port.Type}`;
-					}
-					return '';
-				}).join(', ');
-			}
-
-			return `${name} ${ports}`;
-		});
-	} catch (error) {
-		console.error('Error listing Docker containers:', error.message);
-		return [];
-	}
-}
-
 async function detectDockerMysql(port: number) {
 	const result = {
 		dockerAvailable: false,
@@ -138,21 +93,6 @@ async function detectDockerMysql(port: number) {
 	}
 }
 
-async function checkDockerRedis() {
-	try {
-		const docker = createDockerClient();
-		const containers = await docker.listContainers();
-
-		return containers.some((container) => {
-			const name = container.Names[0].replace(/^\//, '');
-			return name.toLowerCase().includes('redis');
-		});
-	} catch (error) {
-		console.error('Error checking Docker Redis:', error.message);
-		return false;
-	}
-}
-
 async function executeMysqlFileInContainer(
 	restorationConfig: RestorationProgressConfig,
 	progressCallback: Function,
@@ -239,12 +179,12 @@ async function executeMysqlFileInContainer(
 		execStream.dockerExecId = exec.id;
 		execStream.dockerContainer = containerName;
 
-		let output = '';
+		let _output = '';
 
 		execStream.on('data', (chunk) => {
 			if (isCancelled) return;
 
-			output += chunk.toString();
+			_output += chunk.toString();
 		});
 
 		let totalSize = fs.statSync(sqlFilePath).size;
@@ -505,9 +445,6 @@ async function executeMysqlFileInContainer(
 export {
 	createDockerClient,
 	isDockerAvailable,
-	isDockerRunning,
-	getDockerContainers,
 	detectDockerMysql,
-	checkDockerRedis,
 	executeMysqlFileInContainer
 };
diff --git a/electron/helpers/mysql.ts b/electron/helpers/mysql.ts
index 031dba7..21857e0 100644
--- a/electron/helpers/mysql.ts
+++ b/electron/helpers/mysql.ts
@@ -1,7 +1,13 @@
-import mysql, { ConnectionOptions, Pool } from 'mysql2/promise';
-import { MysqlConnection } from '../../src/types/mysql-connection';
+import mysql, {
+	ConnectionOptions,
+	Pool,
+	PoolConnection,
+	RowDataPacket
+} from 'mysql2/promise';
+import { createTunnel, closeTunnel } from './ssh';
+import { AppConnection } from '../../src/types/ssh-connection';
 
-const ERROR_MESSAGES = {
+const ERROR_MESSAGES: Record<string, string | ((db: string) => string)> = {
 	ER_ACCESS_DENIED_ERROR: 'Access denied with the provided credentials',
 	ECONNREFUSED: 'Connection refused - check host and port',
 	ER_BAD_DB_ERROR: (db: string) => `Database '${db}' does not exist`
@@ -10,47 +16,140 @@ const ERROR_MESSAGES = {
 const SELECT_TEST_SQL = 'SELECT 1 AS connection_test';
 
 const connectionPools = new Map<string, Pool>();
+const sshTunnels = new Map<string, { localPort: number; tunnelId: string }>();
 
-function validateParams({ host, port, user, database }: MysqlConnection) {
-	if (!host || !port || !user || !database) {
+function validateParams(config: AppConnection): void {
+	if (!config) {
+		throw new Error('Connection configuration is missing');
+	}
+
+	if (config.remote) {
+		const remoteConfig = config.remote.remoteDbConfig;
+
+		if (!remoteConfig) {
+			throw new Error('SSH remote database configuration is missing');
+		}
+
+		if (!remoteConfig.host) {
+			throw new Error('SSH remote database host is missing');
+		}
+
+		if (!remoteConfig.port) {
+			throw new Error('SSH remote database port is missing');
+		}
+
+		if (!remoteConfig.database) {
+			throw new Error('SSH remote database name is missing');
+		}
+
+		if (!remoteConfig.user) {
+			throw new Error('SSH remote database user is missing');
+		}
+
+		return;
+	}
+
+	const local = config.localDbConfig;
+
+	if (!local.host || !local.port || !local.user || !local.database) {
 		throw new Error('Missing required connection parameters');
 	}
 }
 
-function getConnectionOptions(
-	config: MysqlConnection,
+async function getConnectionOptions(
+	config: AppConnection,
 	{ useConnectionDb = true, targetDatabase = '' } = {}
-): ConnectionOptions {
+): Promise<ConnectionOptions> {
+	if (config.remote) {
+		const tunnelKey = `${config.remote.host}:${config.remote.port}:${config.remote.user}`;
+
+		let localPort: number;
+
+		if (sshTunnels.has(tunnelKey)) {
+			localPort = sshTunnels.get(tunnelKey)!.localPort;
+		} else {
+			try {
+				const tunnel = await createTunnel(
+					config.remote,
+					config.remote.remoteDbConfig.host,
+					config.remote.remoteDbConfig.port
+				);
+
+				localPort = tunnel.localPort;
+
+				sshTunnels.set(tunnelKey, {
+					localPort,
+					tunnelId: tunnel.tunnelId
+				});
+			} catch (error) {
+				throw new Error(
+					`Failed to create SSH tunnel: ${error instanceof Error ? error.message : String(error)}`
+				);
+			}
+		}
+
+		return {
+			host: 'localhost',
+			port: localPort,
+			user: config.remote.remoteDbConfig.user,
+			password: config.remote.remoteDbConfig.password,
+			database: useConnectionDb
+				? config.remote.remoteDbConfig.database
+				: targetDatabase,
+			connectTimeout: 10000
+		};
+	}
+
 	return {
-		host: config.host,
-		port: Number(config.port),
-		user: config.user,
-		password: config.password || '',
-		database: useConnectionDb ? config.database : targetDatabase,
+		host: config.localDbConfig.host,
+		port: Number(config.localDbConfig.port),
+		user: config.localDbConfig.user,
+		password: config.localDbConfig.password || '',
+		database: useConnectionDb
+			? config.localDbConfig.database
+			: targetDatabase,
 		connectTimeout: 10000
 	};
 }
 
 function getPoolKey(
-	config: MysqlConnection,
+	config: AppConnection,
 	useConnectionDb: boolean,
 	targetDatabase: string
 ): string {
-	return `${config.host}:${config.port}:${config.user}:${useConnectionDb ? config.database : targetDatabase}`;
+	const hostPart = config.remote ? 'localhost' : config.localDbConfig.host;
+	const portPart = config.remote
+		? sshTunnels.get(
+				`${config.remote.host}:${config.remote.port}:${config.remote.user}`
+			)?.localPort
+		: config.localDbConfig.port;
+
+	// Para conexões remotas, use as informações do remoteDbConfig
+	const userPart = config.remote
+		? config.remote.remoteDbConfig.user
+		: config.localDbConfig.user;
+
+	const dbPart = useConnectionDb
+		? config.remote
+			? config.remote.remoteDbConfig.database
+			: config.localDbConfig.database
+		: targetDatabase;
+
+	return `${hostPart}:${portPart}:${userPart}:${dbPart}`;
 }
 
-function getConnectionPool(
-	config: MysqlConnection,
+async function getConnectionPool(
+	config: AppConnection,
 	{ useConnectionDb = true, targetDatabase = '' } = {}
-): Pool {
+): Promise<Pool> {
 	const poolKey = getPoolKey(config, useConnectionDb, targetDatabase);
 
 	if (!connectionPools.has(poolKey)) {
 		const poolConfig = {
-			...getConnectionOptions(config, {
+			...(await getConnectionOptions(config, {
 				useConnectionDb,
 				targetDatabase
-			}),
+			})),
 			connectionLimit: 10,
 			waitForConnections: true,
 			queueLimit: 0
@@ -63,30 +162,38 @@ function getConnectionPool(
 }
 
 async function createConnection(
-	config: MysqlConnection,
+	config: AppConnection,
 	{ useConnectionDb = true, targetDatabase = '' } = {}
-) {
+): Promise<PoolConnection> {
 	validateParams(config);
 
-	const pool = getConnectionPool(config, { useConnectionDb, targetDatabase });
+	const pool = await getConnectionPool(config, {
+		useConnectionDb,
+		targetDatabase
+	});
 
 	return pool.getConnection();
 }
 
-async function releaseConnection(connection: any) {
+async function releaseConnection(connection: PoolConnection): Promise<void> {
 	if (connection && typeof connection.release === 'function') {
 		connection.release();
 	}
 }
 
 async function ping(
-	config: MysqlConnection,
+	config: AppConnection,
 	options: { useConnectionDb?: boolean; targetDatabase?: string } = {}
-) {
+): Promise<void> {
 	const conn = await createConnection(config, options);
 
 	try {
-		const [rows] = await conn.query(SELECT_TEST_SQL);
+		// Define a interface para o resultado da consulta de teste
+		interface ConnectionTestRow extends RowDataPacket {
+			connection_test: number;
+		}
+
+		const [rows] = await conn.query<ConnectionTestRow[]>(SELECT_TEST_SQL);
 
 		if (!Array.isArray(rows) || rows.length === 0) {
 			throw new Error('Connection established but query failed');
@@ -96,7 +203,13 @@ async function ping(
 	}
 }
 
-async function testConnection(config: MysqlConnection) {
+interface MysqlError extends Error {
+	code?: string;
+}
+
+async function testConnection(
+	config: AppConnection
+): Promise<{ success: boolean; message: string }> {
 	try {
 		await ping(config, { useConnectionDb: true });
 
@@ -104,23 +217,31 @@ async function testConnection(config: MysqlConnection) {
 	} catch (err) {
 		console.error('Error testing MySQL connection:', err);
 
-		const custom = ERROR_MESSAGES[err.code];
+		const mysqlErr = err as MysqlError;
+		const errorCode = mysqlErr.code || '';
+
+		const custom = ERROR_MESSAGES[errorCode];
 		const message =
 			typeof custom === 'function'
-				? custom(config.database)
-				: custom || err.message;
+				? custom(config.localDbConfig?.database || '')
+				: custom || mysqlErr.message || String(err);
 
 		return { success: false, message };
 	}
 }
 
-function closeAllPools() {
-	return Promise.all(
+async function closeAllPools(): Promise<void> {
+	await Promise.all(
 		Array.from(connectionPools.values()).map((pool) => pool.end())
 	);
+
+	for (const [key, tunnel] of Array.from(sshTunnels.entries())) {
+		closeTunnel(tunnel.tunnelId);
+		sshTunnels.delete(key);
+	}
 }
 
-async function safeEndConnection(connection?: any) {
+async function safeEndConnection(connection?: PoolConnection): Promise<void> {
 	if (connection && typeof connection.end === 'function') {
 		try {
 			await releaseConnection(connection);
diff --git a/electron/helpers/ssh.ts b/electron/helpers/ssh.ts
new file mode 100644
index 0000000..868c714
--- /dev/null
+++ b/electron/helpers/ssh.ts
@@ -0,0 +1,594 @@
+import { Client, SFTPWrapper, ConnectConfig } from 'ssh2';
+import * as fs from 'fs';
+import * as net from 'net';
+import * as crypto from 'crypto';
+import { SshConnection } from '../../src/types/ssh-connection';
+
+interface SshError extends Error {
+	code?: string;
+}
+
+interface SftpFile {
+	filename: string;
+	longname: string;
+	attrs: {
+		size: number;
+		mtime: number;
+		atime: number;
+		uid: number;
+		gid: number;
+		mode: number;
+		[key: string]: number | string | boolean | undefined;
+	};
+}
+
+interface FileExplorerItem {
+	name: string;
+	type: 'file' | 'directory';
+	size: number;
+	modTime: number;
+	path: string;
+}
+
+const sshConnections = new Map<string, Client>();
+
+const activeTunnels = new Map<
+	string,
+	{
+		server: net.Server;
+		localPort: number;
+		remoteHost: string;
+		remotePort: number;
+		sshClient: Client;
+	}
+>();
+
+function getConnectionKey(config: SshConnection): string {
+	return `${config.user}@${config.host}:${config.port}:${config.remotePath}`;
+}
+
+function generateTunnelId(): string {
+	return crypto.randomBytes(16).toString('hex');
+}
+
+async function createConnection(config: SshConnection): Promise<Client> {
+	return new Promise((resolve, reject) => {
+		const conn = new Client();
+
+		const connectConfig: ConnectConfig = {
+			host: config.host,
+			port: config.port,
+			username: config.user, // ssh2 uses username, not user
+			debug: (message: string) => console.log(`SSH Debug: ${message}`),
+			readyTimeout: 10000
+		};
+
+		if (config.privateKey) {
+			try {
+				console.log(`Reading private key from: ${config.privateKey}`);
+				const keyData = fs.readFileSync(config.privateKey, 'utf8');
+
+				if (keyData.includes('BEGIN')) {
+					connectConfig.privateKey = keyData;
+				} else {
+					connectConfig.privateKey = fs.readFileSync(
+						config.privateKey
+					);
+				}
+
+				if (config.passphrase) {
+					connectConfig.passphrase = config.passphrase;
+				}
+			} catch (error) {
+				console.error('Error reading private key:', error);
+				reject(
+					new Error(
+						`Failed to read private key: ${
+							error instanceof Error
+								? error.message
+								: String(error)
+						}`
+					)
+				);
+				return;
+			}
+		} else if (config.password) {
+			connectConfig.password = config.password;
+		} else {
+			reject(new Error('No authentication method provided'));
+			return;
+		}
+
+		conn.on('ready', () => {
+			console.log(`SSH connection established to ${config.host}`);
+			resolve(conn);
+		});
+
+		conn.on('error', (err) => {
+			console.error(`SSH connection error to ${config.host}:`, err);
+			reject(err);
+		});
+
+		console.log(
+			`Connecting to SSH server ${config.host}:${config.port} as ${config.user}`
+		);
+		conn.connect(connectConfig);
+	});
+}
+
+async function getConnection(config: SshConnection): Promise<Client> {
+	return createConnection(config);
+}
+
+async function getSftpSession(client: Client): Promise<SFTPWrapper> {
+	return new Promise((resolve, reject) => {
+		client.sftp((err, sftp) => {
+			if (err) reject(err);
+			else resolve(sftp);
+		});
+	});
+}
+
+async function executeCommand(
+	config: SshConnection,
+	command: string
+): Promise<{ stdout: string; stderr: string; code: number | null }> {
+	const client = await createConnection(config);
+
+	return new Promise((resolve, reject) => {
+		client.exec(command, (err, stream) => {
+			if (err) {
+				client.end();
+				reject(err);
+				return;
+			}
+
+			let stdout = '';
+			let stderr = '';
+
+			stream.on('data', (data: Buffer) => {
+				stdout += data.toString();
+			});
+
+			stream.stderr.on('data', (data: Buffer) => {
+				stderr += data.toString();
+			});
+
+			stream.on('close', (code: number | null) => {
+				client.end();
+				resolve({ stdout, stderr, code });
+			});
+
+			stream.on('error', (err: Error) => {
+				client.end();
+				reject(err);
+			});
+		});
+	});
+}
+
+async function readRemoteFile(
+	config: SshConnection,
+	filePath: string
+): Promise<Buffer> {
+	const client = await createConnection(config);
+
+	try {
+		const sftp = await getSftpSession(client);
+
+		return new Promise((resolve, reject) => {
+			sftp.readFile(filePath, (err, data) => {
+				if (err) {
+					reject(err);
+				} else {
+					resolve(data);
+				}
+
+				client.end();
+			});
+		});
+	} catch (error) {
+		client.end();
+		throw error;
+	}
+}
+
+async function writeRemoteFile(
+	config: SshConnection,
+	filePath: string,
+	data: Buffer | string
+): Promise<void> {
+	const client = await createConnection(config);
+
+	try {
+		const sftp = await getSftpSession(client);
+
+		return new Promise((resolve, reject) => {
+			sftp.writeFile(filePath, data, (err) => {
+				if (err) {
+					reject(err);
+				} else {
+					resolve();
+				}
+
+				client.end();
+			});
+		});
+	} catch (error) {
+		client.end();
+		throw error;
+	}
+}
+
+async function listRemoteFiles(
+	config: SshConnection,
+	dirPath: string
+): Promise<FileExplorerItem[]> {
+	const client = await createConnection(config);
+
+	// Safety check to make sure we don't go outside the project directory
+	if (!dirPath.startsWith(config.remotePath)) {
+		// If dirPath is outside remotePath, default to remotePath
+		dirPath = config.remotePath;
+	}
+
+	try {
+		console.log('SSH connection established, getting SFTP session');
+		const sftp = await getSftpSession(client);
+		console.log('SFTP session created, attempting to read directory');
+
+		return new Promise((resolve, reject) => {
+			sftp.readdir(dirPath, (err, list) => {
+				const closeAndReturn = (value: any, isError = false) => {
+					try {
+						client.end();
+						console.log(
+							`SSH connection closed after listing files in ${dirPath}`
+						);
+					} catch (e) {
+						console.error('Error closing SSH connection:', e);
+					}
+
+					if (isError) {
+						reject(value);
+					} else {
+						resolve(value);
+					}
+				};
+
+				if (err) {
+					console.error(`Error listing files in ${dirPath}:`, err);
+
+					const sshErr = err as SshError;
+					if (sshErr.code === 'ENOENT') {
+						closeAndReturn(
+							new Error(`Directory does not exist: ${dirPath}`),
+							true
+						);
+					} else if (sshErr.code === 'EACCES') {
+						closeAndReturn(
+							new Error(
+								`Permission denied for directory: ${dirPath}`
+							),
+							true
+						);
+					} else {
+						closeAndReturn(
+							new Error(`Failed to list files: ${err.message}`),
+							true
+						);
+					}
+				} else {
+					console.log(`Listed ${list.length} files in ${dirPath}`);
+
+					const fileExplorerItems = list
+						.filter(
+							(item) =>
+								item.filename !== '.' && item.filename !== '..'
+						)
+						.map((item) => {
+							const isDirectory =
+								(item.attrs.mode & 0o40000) !== 0;
+							return {
+								name: item.filename,
+								type: isDirectory ? 'directory' : 'file',
+								size: item.attrs.size,
+								modTime: item.attrs.mtime * 1000, // Convert to JavaScript timestamp
+								path: `${dirPath}/${item.filename}`
+							} as FileExplorerItem;
+						});
+
+					closeAndReturn(fileExplorerItems);
+				}
+			});
+		});
+	} catch (error) {
+		console.error('SSH connection error in listRemoteFiles:', error);
+		client.end();
+		throw error;
+	}
+}
+
+function closeConnection(config: SshConnection): void {
+	const key = getConnectionKey(config);
+
+	if (sshConnections.has(key)) {
+		const conn = sshConnections.get(key)!;
+		conn.end();
+		sshConnections.delete(key);
+	}
+}
+
+function closeAllConnections(): void {
+	closeAllTunnels();
+
+	for (const conn of Array.from(sshConnections.values())) {
+		try {
+			conn.end();
+		} catch (e: unknown) {
+			console.error(
+				`Failed to close SSH connection: ${
+					e instanceof Error ? e.message : String(e)
+				}`
+			);
+		}
+	}
+
+	sshConnections.clear();
+}
+
+async function testConnection(
+	config: SshConnection
+): Promise<{ success: boolean; message: string }> {
+	let client: Client | null = null;
+
+	try {
+		console.log('Testing SSH connection to:', config.host);
+
+		const connectConfig: ConnectConfig = {
+			host: config.host,
+			port: config.port,
+			username: config.user, // ssh2 uses username, not user
+			debug: (message: string) => console.log(`SSH Debug: ${message}`),
+			readyTimeout: 10000,
+			tryKeyboard: true
+		};
+
+		if (config.privateKey) {
+			try {
+				console.log(
+					'Using private key authentication:',
+					config.privateKey
+				);
+				connectConfig.privateKey = fs.readFileSync(config.privateKey);
+
+				if (config.passphrase) {
+					connectConfig.passphrase = config.passphrase;
+				}
+			} catch (error) {
+				return {
+					success: false,
+					message: `Error reading private key file: ${
+						error instanceof Error ? error.message : String(error)
+					}`
+				};
+			}
+		} else if (config.password) {
+			console.log('Using password authentication');
+			connectConfig.password = config.password;
+		} else {
+			return {
+				success: false,
+				message:
+					'No authentication method provided. Please provide either a password or a private key.'
+			};
+		}
+
+		client = new Client();
+
+		return new Promise((resolve) => {
+			client.on('error', (err) => {
+				console.error('SSH connection error:', err);
+				resolve({
+					success: false,
+					message: `Connection error: ${err.message}`
+				});
+			});
+
+			client.on(
+				'keyboard-interactive',
+				(_name, _instructions, _lang, prompts, finish) => {
+					console.log('Keyboard interactive auth requested');
+					if (config.password && prompts.length > 0) {
+						finish([config.password]);
+					} else {
+						finish([]);
+					}
+				}
+			);
+
+			client.on('ready', async () => {
+				console.log(
+					'SSH connection established, testing remote path access'
+				);
+				try {
+					const testResult = await executeCommand(
+						config,
+						`cd ${config.remotePath} && ls -la`
+					);
+
+					if (testResult.code !== 0) {
+						resolve({
+							success: false,
+							message: `Error accessing remote path: ${
+								testResult.stderr || testResult.stdout
+							}`
+						});
+						return;
+					}
+
+					const laravelCheckResult = await executeCommand(
+						config,
+						`cd ${config.remotePath} && [ -f artisan ] && echo "Laravel" || echo "Not Laravel"`
+					);
+
+					if (laravelCheckResult.stdout.trim() !== 'Laravel') {
+						resolve({
+							success: false,
+							message:
+								'The remote path does not appear to be a Laravel project (no artisan file found)'
+						});
+						return;
+					}
+
+					resolve({
+						success: true,
+						message:
+							'Successfully connected to remote Laravel project'
+					});
+				} catch (innerError) {
+					resolve({
+						success: false,
+						message: `Connected to SSH server but failed to verify Laravel project: ${
+							innerError instanceof Error
+								? innerError.message
+								: String(innerError)
+						}`
+					});
+				} finally {
+					client.end();
+				}
+			});
+
+			setTimeout(() => {
+				if (client) {
+					client.end();
+					resolve({
+						success: false,
+						message: 'Connection timed out'
+					});
+				}
+			}, 15000);
+
+			console.log('Attempting to connect to SSH server');
+			client.connect(connectConfig);
+		});
+	} catch (error) {
+		console.error('SSH test connection error:', error);
+		return {
+			success: false,
+			message:
+				error instanceof Error
+					? `SSH connection error: ${error.message}`
+					: 'Unknown error connecting to SSH server'
+		};
+	} finally {
+		if (client) {
+			const clientState = (client as unknown as { _state?: string })
+				._state;
+			if (clientState === 'authenticated') {
+				client.end();
+			}
+		}
+	}
+}
+
+async function createTunnel(
+	config: SshConnection,
+	remoteHost: string,
+	remotePort: number,
+	localPort: number = 0
+): Promise<{ tunnelId: string; localPort: number }> {
+	// This is the critical fix - always create a fresh connection for tunneling
+	// This ensures we don't reuse a connection that might be in a bad state
+	// from other operations like SFTP
+	const sshClient = await createConnection(config);
+
+	return new Promise((resolve, reject) => {
+		const server = net.createServer((socket) => {
+			sshClient.forwardOut(
+				'127.0.0.1',
+				socket.localPort || 0,
+				remoteHost,
+				remotePort,
+				(err, stream) => {
+					if (err) {
+						socket.end();
+						console.error('SSH tunnel error:', err);
+						return;
+					}
+
+					socket.pipe(stream);
+					stream.pipe(socket);
+
+					stream.on('close', () => {
+						socket.end();
+					});
+
+					socket.on('close', () => {
+						stream.end();
+					});
+				}
+			);
+		});
+
+		server.on('error', (err) => {
+			reject(err);
+		});
+
+		server.listen(localPort, '127.0.0.1', () => {
+			const serverAddress = server.address() as net.AddressInfo;
+			const tunnelId = generateTunnelId();
+
+			activeTunnels.set(tunnelId, {
+				server,
+				localPort: serverAddress.port,
+				remoteHost,
+				remotePort,
+				sshClient
+			});
+
+			resolve({
+				tunnelId,
+				localPort: serverAddress.port
+			});
+		});
+	});
+}
+
+function closeTunnel(tunnelId: string): boolean {
+	if (activeTunnels.has(tunnelId)) {
+		const tunnel = activeTunnels.get(tunnelId)!;
+
+		tunnel.server.close();
+		activeTunnels.delete(tunnelId);
+
+		return true;
+	}
+
+	return false;
+}
+
+function closeAllTunnels(): void {
+	for (const tunnel of Array.from(activeTunnels.values())) {
+		tunnel.server.close();
+	}
+
+	activeTunnels.clear();
+}
+
+export {
+	createConnection,
+	getConnection,
+	getSftpSession,
+	executeCommand,
+	readRemoteFile,
+	writeRemoteFile,
+	listRemoteFiles,
+	closeConnection,
+	closeAllConnections,
+	testConnection,
+	createTunnel,
+	closeTunnel,
+	closeAllTunnels
+};
diff --git a/electron/main/index.ts b/electron/main/index.ts
index b445d97..ea07b3c 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -1,4 +1,4 @@
-import { app, BrowserWindow, shell } from 'electron';
+import { app, BrowserWindow, shell, ipcMain } from 'electron';
 import Store from 'electron-store';
 import { fileURLToPath } from 'node:url';
 import enhancePath from '../helpers/enhance-path';
@@ -16,7 +16,9 @@ import { registerMonitoringHandlers } from '../modules/monitoring';
 import { registerMigrationHandlers } from '../modules/migrations';
 import { registerSqlExecutorHandlers } from '../modules/sql-executor';
 import { registerUpdaterHandlers, cleanup } from '../modules/updater';
+import { registerSshHandlers } from '../modules/ssh';
 import { closeAllPools } from '../helpers/mysql';
+import { closeAllConnections, closeAllTunnels } from '../helpers/ssh';
 
 let handlersRegistered = false;
 
@@ -42,17 +44,21 @@ if (!app.requestSingleInstanceLock()) {
 	process.exit(0);
 }
 
-const openDevToolsOnInit: boolean = true;
+const openDevToolsOnInit: boolean = false;
 
-let win: BrowserWindow | null = null;
+let homeWindow: BrowserWindow | null = null;
+
+const connectionWindows = new Map<string, BrowserWindow>();
+
+const sqlEditorWindows = new Map<string, BrowserWindow[]>();
 
 const preload = path.join(__dirname, '../preload/index.mjs');
 const indexHtml = path.join(RENDERER_DIST, 'index.html');
 
-async function createWindow() {
+async function createHomeWindow() {
 	enhancePath();
 
-	win = new BrowserWindow({
+	homeWindow = new BrowserWindow({
 		title: 'Larabase',
 		icon: path.join(process.env.VITE_PUBLIC, 'favicon.ico'),
 		width: 1200,
@@ -60,7 +66,6 @@ async function createWindow() {
 		minWidth: 1200,
 		minHeight: 500,
 		resizable: true,
-		alwaysOnTop: false,
 		center: true,
 		titleBarStyle: 'hiddenInset',
 		webPreferences: {
@@ -70,35 +75,255 @@ async function createWindow() {
 		}
 	});
 
-	registerHandlers(win);
+	registerHandlers(homeWindow);
 
 	if (VITE_DEV_SERVER_URL) {
-		await win.loadURL(VITE_DEV_SERVER_URL);
+		await homeWindow.loadURL(VITE_DEV_SERVER_URL);
 
 		if (openDevToolsOnInit) {
-			win.webContents.openDevTools();
+			homeWindow.webContents.openDevTools();
 		}
 	} else {
-		await win.loadFile(indexHtml);
+		await homeWindow.loadFile(indexHtml);
 	}
 
-	win.webContents.on('did-finish-load', () => {
-		win?.webContents.send(
+	homeWindow.webContents.on('did-finish-load', () => {
+		homeWindow?.webContents.send(
 			'main-process-message',
 			new Date().toLocaleString()
 		);
 	});
 
-	win.webContents.setWindowOpenHandler(({ url }) => {
+	homeWindow.webContents.setWindowOpenHandler(({ url }) => {
+		if (url.startsWith('https:')) shell.openExternal(url);
+		return { action: 'deny' };
+	});
+
+	homeWindow.on('closed', () => {
+		homeWindow = null;
+	});
+}
+
+async function createConnectionWindow(connectionId: string, isRemote: boolean) {
+	for (const [id, window] of Array.from(connectionWindows.entries())) {
+		closeAllSqlEditorsForConnection(id);
+
+		window.close();
+		connectionWindows.delete(id);
+	}
+
+	const connectionWindow = new BrowserWindow({
+		title: `Larabase - Connection ${connectionId}`,
+		icon: path.join(process.env.VITE_PUBLIC, 'favicon.ico'),
+		width: 1280,
+		height: 900,
+		minWidth: 1200,
+		minHeight: 600,
+		resizable: true,
+		center: true,
+		titleBarStyle: 'hiddenInset',
+		webPreferences: {
+			preload,
+			nodeIntegration: true,
+			contextIsolation: true
+		},
+		show: false
+	});
+
+	registerHandlers(connectionWindow);
+
+	let url = VITE_DEV_SERVER_URL
+		? `${VITE_DEV_SERVER_URL}#/database/${connectionId}/${isRemote}`
+		: `file://${indexHtml}#/database/${connectionId}/${isRemote}`;
+
+	await connectionWindow.loadURL(url);
+
+	connectionWindow.show();
+
+	if (openDevToolsOnInit) {
+		connectionWindow.webContents.openDevTools();
+	}
+
+	connectionWindow.webContents.setWindowOpenHandler(({ url }) => {
 		if (url.startsWith('https:')) shell.openExternal(url);
 		return { action: 'deny' };
 	});
+
+	connectionWindow.on('closed', () => {
+		closeAllSqlEditorsForConnection(connectionId);
+
+		connectionWindows.delete(connectionId);
+
+		if (!homeWindow) {
+			createHomeWindow();
+		} else {
+			homeWindow.show();
+		}
+	});
+
+	connectionWindows.set(connectionId, connectionWindow);
+
+	connectionWindow.on('close', (_e) => {
+		if (
+			process.platform !== 'darwin' &&
+			!homeWindow &&
+			connectionWindows.size === 1
+		) {
+			app.quit();
+		}
+	});
+
+	return connectionWindow;
 }
 
-app.whenReady().then(createWindow);
+async function createSqlEditorWindow(connectionId: string, isRemote: boolean) {
+	const sqlEditorWindow = new BrowserWindow({
+		title: `Larabase - SQL Editor ${connectionId}`,
+		icon: path.join(process.env.VITE_PUBLIC, 'favicon.ico'),
+		width: 1280,
+		height: 900,
+		minWidth: 1200,
+		minHeight: 600,
+		resizable: true,
+		center: true,
+		titleBarStyle: 'hiddenInset',
+		webPreferences: {
+			preload,
+			nodeIntegration: true,
+			contextIsolation: true
+		},
+		show: false
+	});
+
+	registerHandlers(sqlEditorWindow);
+
+	let url = VITE_DEV_SERVER_URL
+		? `${VITE_DEV_SERVER_URL}#/sql-editor/${connectionId}/${isRemote}`
+		: `file://${indexHtml}#/sql-editor/${connectionId}/${isRemote}`;
+
+	await sqlEditorWindow.loadURL(url);
+
+	sqlEditorWindow.show();
+
+	if (openDevToolsOnInit) {
+		sqlEditorWindow.webContents.openDevTools();
+	}
+
+	sqlEditorWindow.webContents.setWindowOpenHandler(({ url }) => {
+		if (url.startsWith('https:')) shell.openExternal(url);
+		return { action: 'deny' };
+	});
+
+	if (!sqlEditorWindows.has(connectionId)) {
+		sqlEditorWindows.set(connectionId, []);
+	}
+
+	sqlEditorWindows.get(connectionId)?.push(sqlEditorWindow);
+
+	sqlEditorWindow.on('closed', () => {
+		const windows = sqlEditorWindows.get(connectionId) || [];
+		const index = windows.indexOf(sqlEditorWindow);
+		if (index !== -1) {
+			windows.splice(index, 1);
+		}
+
+		if (windows.length === 0) {
+			sqlEditorWindows.delete(connectionId);
+		}
+	});
+
+	return sqlEditorWindow;
+}
+
+function updatePendingMigrationsBadge(count: number) {
+	if (process.platform === 'darwin') {
+		const displayCount =
+			count > 0 ? (count >= 100 ? '99' : count.toString()) : '';
+		app.dock.setBadge(displayCount);
+	} else if (process.platform === 'win32' || process.platform === 'linux') {
+		const displayCount = count > 0 ? (count >= 100 ? 99 : count) : 0;
+		app.setBadgeCount(displayCount);
+	}
+}
+
+function registerWindowHandlers() {
+	ipcMain.handle('update-migrations-badge', (_, count) => {
+		updatePendingMigrationsBadge(count);
+		return true;
+	});
+
+	ipcMain.handle(
+		'open-connection-window',
+		async (_, connectionId, isRemote) => {
+			const window = await createConnectionWindow(connectionId, isRemote);
+
+			if (homeWindow) {
+				homeWindow.hide();
+			}
+
+			return !!window;
+		}
+	);
+
+	ipcMain.handle('close-connection-window', (_, connectionId) => {
+		const window = connectionWindows.get(connectionId);
+		if (window) {
+			window.close();
+			return true;
+		}
+		return false;
+	});
+
+	ipcMain.handle(
+		'open-sql-editor-window',
+		async (_, connectionId, isRemote) => {
+			const window = await createSqlEditorWindow(connectionId, isRemote);
+			return !!window;
+		}
+	);
+
+	ipcMain.handle('show-home-window', async () => {
+		for (const [id, window] of Array.from(connectionWindows.entries())) {
+			closeAllSqlEditorsForConnection(id);
+
+			if (!window.isDestroyed()) {
+				window.close();
+			}
+			connectionWindows.delete(id);
+		}
+
+		if (!homeWindow) {
+			await createHomeWindow();
+		} else {
+			if (homeWindow.isMinimized()) {
+				homeWindow.restore();
+			}
+			homeWindow.show();
+			homeWindow.focus();
+		}
+		return true;
+	});
+
+	ipcMain.handle('get-window-id', (event) => {
+		const win = BrowserWindow.fromWebContents(event.sender);
+		if (win === homeWindow) return 'home';
+
+		for (const [id, window] of Array.from(connectionWindows.entries())) {
+			if (window === win) return id;
+		}
+
+		return null;
+	});
+}
+
+app.whenReady().then(async () => {
+	await createHomeWindow();
+	registerWindowHandlers();
+});
 
 app.on('window-all-closed', () => {
-	win = null;
+	homeWindow = null;
+	connectionWindows.clear();
 
 	cleanup();
 
@@ -108,23 +333,36 @@ app.on('window-all-closed', () => {
 			console.error('Error closing all pools:', err);
 		})
 		.finally(() => {
-			if (process.platform === 'darwin') app.quit();
+			closeAllConnections();
+			closeAllTunnels();
+
+			if (process.platform !== 'darwin') app.quit();
 		});
 });
 
 app.on('second-instance', () => {
-	if (win) {
-		if (win.isMinimized()) win.restore();
-		win.focus();
+	if (homeWindow) {
+		if (homeWindow.isMinimized()) homeWindow.restore();
+		homeWindow.focus();
+	} else if (connectionWindows.size > 0) {
+		const firstWindow = connectionWindows.values().next().value;
+		if (firstWindow) {
+			if (firstWindow.isMinimized()) firstWindow.restore();
+			firstWindow.focus();
+		}
 	}
 });
 
 app.on('activate', async () => {
-	const allWindows = BrowserWindow.getAllWindows();
-	if (allWindows.length) {
-		allWindows[0].focus();
+	if (homeWindow) {
+		homeWindow.focus();
+	} else if (connectionWindows.size > 0) {
+		const firstWindow = connectionWindows.values().next().value;
+		if (firstWindow) {
+			firstWindow.focus();
+		}
 	} else {
-		await createWindow();
+		await createHomeWindow();
 	}
 });
 
@@ -143,6 +381,21 @@ function registerHandlers(win: BrowserWindow) {
 	registerMigrationHandlers();
 	registerSqlExecutorHandlers();
 	registerUpdaterHandlers(win);
+	registerSshHandlers();
 
 	handlersRegistered = true;
 }
+
+function closeAllSqlEditorsForConnection(connectionId: string) {
+	const editorWindows = sqlEditorWindows.get(connectionId) || [];
+
+	const windowsToClose = [...editorWindows];
+
+	for (const window of windowsToClose) {
+		if (window && !window.isDestroyed()) {
+			window.close();
+		}
+	}
+
+	sqlEditorWindows.delete(connectionId);
+}
diff --git a/electron/modules/database-restore.ts b/electron/modules/database-restore.ts
index c05f0cf..3dc42f6 100644
--- a/electron/modules/database-restore.ts
+++ b/electron/modules/database-restore.ts
@@ -20,6 +20,10 @@ import {
 	createDockerClient
 } from '../helpers/docker';
 import { exec } from 'child_process';
+import { toRaw } from 'vue';
+import { AppConnection } from '../../src/types/ssh-connection';
+import { MysqlConnection } from '../../src/types/mysql-connection';
+import { PoolConnection } from 'mysql2/promise';
 
 let activeRestoreProcess = null;
 
@@ -54,11 +58,12 @@ function buildBaseCommand(
 	return `set -o pipefail && ${command}`;
 }
 
-function buildCredentialFlags({ user, password, host, port }) {
-	let flags = ` -u${user || 'root'}`;
-	if (password) flags += ` -p${password}`;
-	if (host && host !== 'localhost') flags += ` -h${host}`;
-	if (port) flags += ` -P${port}`;
+function buildCredentialFlags(mysqlConnection: MysqlConnection) {
+	let flags = ` -u${mysqlConnection.user || 'root'}`;
+	if (mysqlConnection.password) flags += ` -p${mysqlConnection.password}`;
+	if (mysqlConnection.host && mysqlConnection.host !== 'localhost')
+		flags += ` -h${mysqlConnection.host}`;
+	if (mysqlConnection.port) flags += ` -P${mysqlConnection.port}`;
 	return flags;
 }
 
@@ -83,10 +88,10 @@ function getFileSizeOrThrow(filePath: string) {
 function ensureConfig(projectConnection: ProjectConnection, type: string) {
 	if (
 		!projectConnection ||
-		!projectConnection.db_config.host ||
-		!projectConnection.db_config.port ||
-		!projectConnection.db_config.user ||
-		!projectConnection.db_config.database
+		!projectConnection.dbConfig.host ||
+		!projectConnection.dbConfig.port ||
+		!projectConnection.dbConfig.user ||
+		!projectConnection.dbConfig.database
 	) {
 		throw new Error(
 			`Missing connection configuration for ${type} restore command`
@@ -95,17 +100,21 @@ function ensureConfig(projectConnection: ProjectConnection, type: string) {
 }
 
 async function validateDatabaseHasContent(restorationObject: RestoreConfig) {
-	let dbConnection: any;
+	let dbConnection: PoolConnection;
 
 	try {
 		try {
-			dbConnection = await createConnection(
-				restorationObject.project.db_config,
-				{
-					useConnectionDb: false,
-					targetDatabase: restorationObject.targetDatabase
-				}
-			);
+			const project = restorationObject.project;
+
+			const AppConnection = {
+				localDbConfig: toRaw(project.dbConfig),
+				remote: toRaw(project.sshConfig)
+			} as AppConnection;
+
+			dbConnection = await createConnection(AppConnection, {
+				useConnectionDb: false,
+				targetDatabase: restorationObject.targetDatabase
+			});
 
 			const [rows] = await dbConnection.query(`SHOW TABLES`);
 
@@ -142,7 +151,7 @@ function buildLocalRestoreCommand(restorationObject: RestoreConfig) {
 	let command = buildBaseCommand(filePath, sedFilters, useGunzip, true);
 
 	command += ' | mysql';
-	command += buildCredentialFlags(restorationObject.project.db_config);
+	command += buildCredentialFlags(restorationObject.project.dbConfig);
 	command += ' --binary-mode=1 --force';
 	command += ` --init-command="DROP DATABASE IF EXISTS \\\`${targetDatabase}\\\`; CREATE DATABASE \\\`${targetDatabase}\\\`; USE \\\`${targetDatabase}\\\`;"`;
 	command += ` --database=\`${targetDatabase}\``;
@@ -152,7 +161,7 @@ function buildLocalRestoreCommand(restorationObject: RestoreConfig) {
 	return {
 		command: command,
 		container: null,
-		connection: restorationObject.project.db_config,
+		connection: restorationObject.project.dbConfig,
 		sqlFilePath: restorationObject.filePath,
 		ignoredTables: restorationObject.ignoredTables || [],
 		useDockerApi: false,
@@ -177,7 +186,7 @@ function buildDockerRestoreCommand(restorationObject: RestoreConfig) {
 	return {
 		command: null,
 		container: restorationObject.project.dockerInfo.dockerContainerName,
-		connection: restorationObject.project.db_config,
+		connection: restorationObject.project.dbConfig,
 		sqlFilePath: restorationObject.filePath,
 		ignoredTables: restorationObject.ignoredTables || [],
 		useDockerApi: true,
@@ -214,7 +223,12 @@ async function restoreDatabase(
 	sendProgress('starting', 0, 'Starting database restoration process');
 
 	try {
-		await testConnection(restorationObject.project.db_config);
+		const AppConnection = {
+			localDbConfig: toRaw(restorationObject.project.dbConfig),
+			remote: toRaw(restorationObject.project.sshConfig)
+		} as AppConnection;
+
+		await testConnection(AppConnection);
 
 		sendProgress('validating', 10, 'Database connection validated');
 	} catch (err) {
@@ -698,7 +712,7 @@ async function extractTables(filePath: string, isGzipped: boolean) {
 				}
 
 				tableStats.set(currentTable, stats);
-			} catch (e) {
+			} catch (e: unknown) {
 				const stats = tableStats.get(currentTable) || {
 					estimatedRows: 0
 				};
@@ -711,6 +725,11 @@ async function extractTables(filePath: string, isGzipped: boolean) {
 				}
 
 				tableStats.set(currentTable, stats);
+
+				console.error(
+					`Error processing insert for table ${currentTable}:`,
+					e
+				);
 			}
 
 			currentTable = null;
@@ -879,7 +898,7 @@ function registerDatabaseRestoreHandlers(mainWindow: BrowserWindow) {
 			try {
 				if (
 					!restorationConfig ||
-					!restorationConfig.project.db_config ||
+					!restorationConfig.project.dbConfig ||
 					!restorationConfig.filePath
 				) {
 					return {
@@ -898,7 +917,7 @@ function registerDatabaseRestoreHandlers(mainWindow: BrowserWindow) {
 
 				const targetDatabase =
 					restorationConfig.targetDatabase ||
-					restorationConfig.project.db_config.database;
+					restorationConfig.project.dbConfig.database;
 
 				if (!targetDatabase) {
 					return {
@@ -928,7 +947,7 @@ function registerDatabaseRestoreHandlers(mainWindow: BrowserWindow) {
 
 					console.log(`Restoring database: ${targetDatabase}`);
 					console.log(
-						`Original connection database: ${project.db_config.database}`
+						`Original connection database: ${project.dbConfig.database}`
 					);
 					console.log(`Docker mode: ${useDocker ? 'Yes' : 'No'}`);
 					console.log(`Gzipped file: ${isGzipped ? 'Yes' : 'No'}`);
diff --git a/electron/modules/migrations.ts b/electron/modules/migrations.ts
index 294092d..6c9d759 100644
--- a/electron/modules/migrations.ts
+++ b/electron/modules/migrations.ts
@@ -4,6 +4,7 @@ import path from 'path';
 import { spawn } from 'child_process';
 import { RowDataPacket } from 'mysql2';
 import { createConnection, safeEndConnection } from '../helpers/mysql';
+import { PoolConnection } from 'mysql2/promise';
 
 interface MigrationRow extends RowDataPacket {
 	id: number;
@@ -23,7 +24,7 @@ function registerMigrationHandlers() {
 				};
 			}
 
-			if (!config.db_config) {
+			if (!config.appConnection) {
 				return {
 					success: false,
 					message: 'Database configuration is required',
@@ -144,10 +145,12 @@ function registerMigrationHandlers() {
 			}
 
 			if (migrationsHistory.length === 0) {
-				let connection;
+				let connection: PoolConnection;
+
 				try {
-					connection = await createConnection(config.db_config);
+					connection = await createConnection(config.appConnection);
 
+					// noinspection SqlResolve
 					const [rows] = await connection.query(
 						'SELECT * FROM migrations ORDER BY batch DESC, id DESC'
 					);
diff --git a/electron/modules/monitoring.ts b/electron/modules/monitoring.ts
index 08422e6..72becc8 100644
--- a/electron/modules/monitoring.ts
+++ b/electron/modules/monitoring.ts
@@ -1,7 +1,7 @@
 import { BrowserWindow, ipcMain } from 'electron';
-import { MysqlConnection } from '../../src/types/mysql-connection';
 import { createConnection, safeEndConnection } from '../helpers/mysql';
 import { RowDataPacket, PoolConnection } from 'mysql2/promise';
+import { AppConnection } from '../../src/types/ssh-connection';
 
 interface ColumnRow extends RowDataPacket {
 	column_name: string;
@@ -13,6 +13,11 @@ interface TableRow extends RowDataPacket {
 	TABLE_NAME: string;
 }
 
+interface TriggerRow extends RowDataPacket {
+	trigger_name?: string;
+	TRIGGER_NAME?: string;
+}
+
 interface ActivityLogRow extends RowDataPacket {
 	id: number;
 	action_type: string;
@@ -33,6 +38,7 @@ const state = {
 	monitoredDatabases: new Map<string, string>()
 };
 
+// noinspection SqlResolve
 const SQL = {
 	CREATE_ACTIVITY_LOG: `
     CREATE TABLE IF NOT EXISTS ${ACTIVITY_LOG_TABLE} (
@@ -94,10 +100,11 @@ const SQL = {
     LIMIT ?
   `,
 	GET_NEW_ACTIVITY: `
-    SELECT * FROM ${ACTIVITY_LOG_TABLE}
-    WHERE id > ?
-    ORDER BY id ASC
-  `,
+		SELECT *
+		FROM ${ACTIVITY_LOG_TABLE}
+		WHERE id > ?
+		ORDER BY id
+	`,
 	TRUNCATE_ACTIVITY_LOG: `TRUNCATE TABLE ${ACTIVITY_LOG_TABLE}`,
 	CHECK_TABLE_EXISTS: `
     SELECT 1 
@@ -121,8 +128,11 @@ async function dropTableTriggers(
 	for (const trigger of triggers) {
 		try {
 			await connection.query(`DROP TRIGGER IF EXISTS ${trigger}`);
-		} catch (error) {
-			console.error(`Error dropping trigger ${trigger}`);
+		} catch (error: unknown) {
+			console.error(
+				`Error dropping trigger ${trigger}`,
+				error instanceof Error ? error.message : ''
+			);
 		}
 	}
 }
@@ -138,7 +148,7 @@ async function findAndDropAllTriggers(
 		);
 
 		if (triggersResult && Array.isArray(triggersResult)) {
-			for (const row of triggersResult as any[]) {
+			for (const row of triggersResult as TriggerRow[]) {
 				const triggerName = row.trigger_name || row.TRIGGER_NAME;
 				await connection.query(`DROP TRIGGER IF EXISTS ${triggerName}`);
 			}
@@ -151,21 +161,27 @@ async function findAndDropAllTriggers(
 			);
 
 			if (refTriggers && Array.isArray(refTriggers)) {
-				for (const row of refTriggers as any[]) {
+				for (const row of refTriggers as TriggerRow[]) {
 					const triggerName = row.TRIGGER_NAME || row.trigger_name;
 					await connection.query(
 						`DROP TRIGGER IF EXISTS ${triggerName}`
 					);
 				}
 			}
-		} catch (error) {
+		} catch (error: unknown) {
 			console.error(
-				`Error dropping triggers referencing ${ACTIVITY_LOG_TABLE}`
+				`Error dropping triggers referencing ${ACTIVITY_LOG_TABLE}`,
+				error instanceof Error ? error.message : ''
 			);
 		}
 
 		return true;
-	} catch (error) {
+	} catch (error: unknown) {
+		console.error(
+			`Error dropping triggers for ${database}`,
+			error instanceof Error ? error.message : ''
+		);
+
 		return false;
 	}
 }
@@ -195,8 +211,11 @@ async function createTableTriggers(
 				const firstColumn = firstColumnResult[0] as ColumnRow;
 				idColumn = firstColumn.column_name || firstColumn.COLUMN_NAME;
 			}
-		} catch (error) {
-			console.error(`Error getting first column for ${tableName}`);
+		} catch (error: unknown) {
+			console.error(
+				`Error getting first column for ${tableName}`,
+				error instanceof Error ? error.message : ''
+			);
 		}
 	}
 
@@ -293,8 +312,11 @@ async function createTableTriggers(
 		}
 
 		return true;
-	} catch (error) {
-		console.error(`Error creating triggers for ${tableName}`);
+	} catch (error: unknown) {
+		console.error(
+			`Error creating triggers for ${tableName}`,
+			error instanceof Error ? error.message : ''
+		);
 		return false;
 	}
 }
@@ -303,7 +325,12 @@ async function dropMonitoringTable(connection: PoolConnection) {
 	try {
 		await connection.query(SQL.DROP_ACTIVITY_LOG);
 		return true;
-	} catch (error) {
+	} catch (error: unknown) {
+		console.error(
+			'Error dropping monitoring table',
+			error instanceof Error ? error.message : ''
+		);
+
 		return false;
 	}
 }
@@ -312,7 +339,12 @@ async function clearActivityLog(connection: PoolConnection) {
 	try {
 		await connection.query(SQL.TRUNCATE_ACTIVITY_LOG);
 		return true;
-	} catch (error) {
+	} catch (error: unknown) {
+		console.error(
+			'Error clearing activity log',
+			error instanceof Error ? error.message : ''
+		);
+
 		return false;
 	}
 }
@@ -328,6 +360,14 @@ function startPolling(
 
 	const interval = setInterval(async () => {
 		try {
+			if (mainWindow.isDestroyed()) {
+				console.log(
+					`Window for connection ${connectionId} is destroyed, stopping polling`
+				);
+				stopPolling(connectionId);
+				return;
+			}
+
 			const [tableExists] = await connection.query(
 				SQL.CHECK_TABLE_EXISTS,
 				[connection.config.database, ACTIVITY_LOG_TABLE]
@@ -360,16 +400,33 @@ function startPolling(
 					].id
 				);
 
-				for (const activity of newActivities as ActivityLogRow[]) {
-					mainWindow.webContents.send(
-						`db-operation-${connectionId}`,
-						activity
-					);
+				if (!mainWindow.isDestroyed()) {
+					for (const activity of newActivities as ActivityLogRow[]) {
+						mainWindow.webContents.send(
+							`db-operation-${connectionId}`,
+							activity
+						);
+					}
 				}
 			}
-		} catch (error) {
-			console.error(`Error polling for new activities: ${error}`);
+		} catch (error: unknown) {
+			const errorMessage =
+				error instanceof Error ? error.message : String(error);
+			console.error(`Error polling for new activities: ${errorMessage}`);
+
+			if (
+				errorMessage.includes('destroyed') ||
+				errorMessage.includes('invalid')
+			) {
+				console.log(
+					`Reference to destroyed object detected for connection ${connectionId}, stopping polling`
+				);
+				stopPolling(connectionId);
+				return;
+			}
+
 			state.lastSeenIds.set(connectionId, 0);
+
 			stopPolling(connectionId);
 		}
 	}, 2000);
@@ -391,22 +448,37 @@ async function cleanupMonitoring(connectionId: string) {
 			const connection = state.connections.get(connectionId);
 			const database = state.monitoredDatabases.get(connectionId);
 
+			stopPolling(connectionId);
+
 			if (database) {
-				await findAndDropAllTriggers(connection, database);
+				try {
+					await findAndDropAllTriggers(connection, database);
 
-				const tables = state.monitoredTables.get(database) || [];
-				for (const tableName of tables) {
-					await dropTableTriggers(connection, tableName);
-				}
-				state.monitoredTables.delete(database);
+					const tables = state.monitoredTables.get(database) || [];
+					for (const tableName of tables) {
+						await dropTableTriggers(connection, tableName);
+					}
+					state.monitoredTables.delete(database);
 
-				await dropMonitoringTable(connection);
+					await dropMonitoringTable(connection);
+				} catch (err) {
+					console.error(
+						'Error cleaning up tables/triggers:',
+						err instanceof Error ? err.message : String(err)
+					);
+				}
 			}
 
-			await safeEndConnection(connection);
+			try {
+				await safeEndConnection(connection);
+			} catch (err) {
+				console.error(
+					'Error ending connection:',
+					err instanceof Error ? err.message : String(err)
+				);
+			}
 
 			state.connections.delete(connectionId);
-			stopPolling(connectionId);
 			state.monitoredDatabases.delete(connectionId);
 
 			const windowEntries = Array.from(
@@ -419,7 +491,16 @@ async function cleanupMonitoring(connectionId: string) {
 			}
 
 			return true;
-		} catch (error) {
+		} catch (error: unknown) {
+			console.error(
+				`Error cleaning up monitoring for ${connectionId}`,
+				error instanceof Error ? error.message : String(error)
+			);
+
+			state.connections.delete(connectionId);
+			stopPolling(connectionId);
+			state.monitoredDatabases.delete(connectionId);
+
 			return false;
 		}
 	}
@@ -444,43 +525,42 @@ function registerConnectionWithWindow(windowId: number, connectionId: string) {
 }
 
 export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
-	const windowId = mainWindow.id;
-
-	mainWindow.on('closed', async () => {
-		await closeAllWindowConnections(windowId);
-	});
-
-	mainWindow.webContents.on('did-start-navigation', async (_, url) => {
-		const currentURL = mainWindow.webContents.getURL();
-		if (url === currentURL) {
-			await closeAllWindowConnections(windowId);
-		}
-	});
-
 	ipcMain.handle(
 		'start-live-db-updates',
 		async (
-			_,
+			event,
 			config: {
 				connectionId: string;
-				dbConnection: MysqlConnection;
+				appConnection: AppConnection;
 				clearHistory: boolean;
 			}
 		) => {
-			const { connectionId, dbConnection, clearHistory = false } = config;
+			const {
+				connectionId,
+				appConnection,
+				clearHistory = false
+			} = config;
+
+			const senderWindow = BrowserWindow.fromWebContents(event.sender);
+			if (!senderWindow || senderWindow.isDestroyed()) {
+				return {
+					success: false,
+					message: 'Window is invalid or destroyed'
+				};
+			}
 
 			if (state.connections.has(connectionId)) {
 				await cleanupMonitoring(connectionId);
 			}
 
 			try {
-				const connection = await createConnection(dbConnection);
+				const connection = await createConnection(appConnection);
 				state.connections.set(connectionId, connection);
 				state.monitoredDatabases.set(
 					connectionId,
-					dbConnection.database
+					appConnection.localDbConfig.database
 				);
-				registerConnectionWithWindow(mainWindow.id, connectionId);
+				registerConnectionWithWindow(senderWindow.id, connectionId);
 
 				await connection.query(SQL.CREATE_ACTIVITY_LOG);
 				if (clearHistory) {
@@ -488,7 +568,7 @@ export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
 				}
 
 				const [tablesResult] = await connection.query(SQL.GET_TABLES, [
-					dbConnection.database,
+					appConnection.localDbConfig.database,
 					ACTIVITY_LOG_TABLE
 				]);
 
@@ -497,7 +577,7 @@ export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
 						const tableName = table.table_name || table.TABLE_NAME;
 						const [primaryKeyResult] = await connection.query(
 							SQL.CHECK_PRIMARY_KEY,
-							[dbConnection.database, tableName]
+							[appConnection.localDbConfig.database, tableName]
 						);
 
 						const primaryKeyColumn =
@@ -511,7 +591,7 @@ export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
 
 						await createTableTriggers(
 							connection,
-							dbConnection.database,
+							appConnection.localDbConfig.database,
 							tableName,
 							primaryKeyColumn
 						);
@@ -521,7 +601,10 @@ export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
 				try {
 					const [tableExists] = await connection.query(
 						SQL.CHECK_TABLE_EXISTS,
-						[dbConnection.database, ACTIVITY_LOG_TABLE]
+						[
+							appConnection.localDbConfig.database,
+							ACTIVITY_LOG_TABLE
+						]
 					);
 
 					if (Array.isArray(tableExists) && tableExists.length > 0) {
@@ -534,11 +617,13 @@ export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
 							Array.isArray(recentActivities) &&
 							recentActivities.length > 0
 						) {
-							for (const activity of recentActivities as ActivityLogRow[]) {
-								mainWindow.webContents.send(
-									`db-operation-${connectionId}`,
-									activity
-								);
+							if (!senderWindow.isDestroyed()) {
+								for (const activity of recentActivities as ActivityLogRow[]) {
+									senderWindow.webContents.send(
+										`db-operation-${connectionId}`,
+										activity
+									);
+								}
 							}
 							state.lastSeenIds.set(
 								connectionId,
@@ -550,19 +635,27 @@ export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
 					} else {
 						state.lastSeenIds.set(connectionId, 0);
 					}
-				} catch (error) {
+				} catch (error: unknown) {
+					console.error(
+						`Error checking if ${ACTIVITY_LOG_TABLE} exists`,
+						error instanceof Error ? error.message : String(error)
+					);
+
 					state.lastSeenIds.set(connectionId, 0);
 				}
 
-				startPolling(connectionId, connection, mainWindow);
+				startPolling(connectionId, connection, senderWindow);
 				return {
 					success: true,
 					message: 'Monitoring started successfully'
 				};
-			} catch (error: any) {
+			} catch (error: unknown) {
 				return {
 					success: false,
-					message: error.message || 'Failed to start monitoring'
+					message:
+						error instanceof Error
+							? error.message
+							: 'Failed to start monitoring'
 				};
 			}
 		}
@@ -572,15 +665,26 @@ export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
 		try {
 			await cleanupMonitoring(connectionId);
 			return { success: true, message: 'Monitoring stopped' };
-		} catch (error: any) {
+		} catch (error: unknown) {
 			return {
 				success: false,
-				message: error.message || 'Failed to stop monitoring'
+				message:
+					error instanceof Error
+						? error.message
+						: 'Failed to stop monitoring'
 			};
 		}
 	});
 
-	ipcMain.handle('clear-db-history', async (_, connectionId: string) => {
+	ipcMain.handle('clear-db-history', async (event, connectionId: string) => {
+		const senderWindow = BrowserWindow.fromWebContents(event.sender);
+		if (!senderWindow || senderWindow.isDestroyed()) {
+			return {
+				success: false,
+				message: 'Window is invalid or destroyed'
+			};
+		}
+
 		try {
 			if (!state.connections.has(connectionId)) {
 				return {
@@ -593,7 +697,12 @@ export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
 
 			try {
 				await connection.query('SELECT 1');
-			} catch (pingError) {
+			} catch (error: unknown) {
+				console.error(
+					`Error checking connection status for ${connectionId}`,
+					error instanceof Error ? error.message : String(error)
+				);
+
 				state.connections.delete(connectionId);
 				return {
 					success: false,
@@ -606,9 +715,13 @@ export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
 			const success = await clearActivityLog(connection);
 			if (success) {
 				state.lastSeenIds.set(connectionId, 0);
-				mainWindow.webContents.send(
-					`db-operation-clear-${connectionId}`
-				);
+
+				if (!senderWindow.isDestroyed()) {
+					senderWindow.webContents.send(
+						`db-operation-clear-${connectionId}`
+					);
+				}
+
 				return { success: true, message: 'Activity history cleared' };
 			} else {
 				return {
@@ -616,10 +729,13 @@ export function registerMonitoringHandlers(mainWindow: BrowserWindow) {
 					message: 'Failed to clear activity history'
 				};
 			}
-		} catch (error: any) {
+		} catch (error: unknown) {
 			return {
 				success: false,
-				message: error.message || 'Failed to clear history'
+				message:
+					error instanceof Error
+						? error.message
+						: 'Failed to clear activity history'
 			};
 		}
 	});
diff --git a/electron/modules/mysql.ts b/electron/modules/mysql.ts
index f97bfd9..8e1f521 100644
--- a/electron/modules/mysql.ts
+++ b/electron/modules/mysql.ts
@@ -4,32 +4,26 @@ import {
 	createConnection,
 	safeEndConnection
 } from '../helpers/mysql';
-import { MysqlConnection } from '../../src/types/mysql-connection';
+import { AppConnection } from '../../src/types/ssh-connection';
+import { PoolConnection, RowDataPacket } from 'mysql2/promise';
+
+interface DatabaseRow extends RowDataPacket {
+	Database?: string;
+	database?: string;
+}
 
 function registerMysqlHandlers() {
 	ipcMain.handle(
 		'test-mysql-connection',
-		async (_, config: MysqlConnection) => {
+		async (_, config: AppConnection) => {
 			return await testConnection(config);
 		}
 	);
 
 	ipcMain.handle(
 		'create-database',
-		async (_, config: MysqlConnection, databaseName: string) => {
-			if (
-				!config.host ||
-				!config.port ||
-				!config.user ||
-				!config.database
-			) {
-				return {
-					success: false,
-					message: 'Missing connection parameters'
-				};
-			}
-
-			let connection: any;
+		async (_, config: AppConnection, databaseName: string) => {
+			let connection: PoolConnection;
 
 			try {
 				connection = await createConnection(config);
@@ -42,7 +36,7 @@ function registerMysqlHandlers() {
 
 				return {
 					success: true,
-					message: `Database ${config.database} created successfully`
+					message: `Database ${config.localDbConfig} created successfully`
 				};
 			} catch (err) {
 				console.error('Error creating database:', err);
@@ -52,7 +46,7 @@ function registerMysqlHandlers() {
 				} else if (err.code === 'ECONNREFUSED') {
 					msg = 'Connection refused - check host and port';
 				} else if (err.code === 'ER_DB_CREATE_EXISTS') {
-					msg = `Database ${config.database} already exists`;
+					msg = `Database already exists`;
 				}
 				return {
 					success: false,
@@ -64,26 +58,16 @@ function registerMysqlHandlers() {
 		}
 	);
 
-	ipcMain.handle('list-databases', async (_, config: MysqlConnection) => {
-		if (!config.host || !config.port || !config.user) {
-			return {
-				success: false,
-				message: 'Missing connection parameters',
-				databases: []
-			};
-		}
-
-		let connection: any;
+	ipcMain.handle('list-databases', async (_, config: AppConnection) => {
+		let connection: PoolConnection;
 
 		try {
 			connection = await createConnection(config);
 
-			const [rows] = await connection.query('SHOW DATABASES');
+			const [rows] =
+				await connection.query<DatabaseRow[]>('SHOW DATABASES');
 			const databases = rows
-				.map(
-					(r: { Database?: string; database?: string }) =>
-						r.Database || r.database
-				)
+				.map((r: DatabaseRow) => r.Database || r.database)
 				.filter(
 					(db: string) =>
 						![
@@ -114,20 +98,8 @@ function registerMysqlHandlers() {
 
 	ipcMain.handle(
 		'drop-database',
-		async (_, config: MysqlConnection, databaseName: string) => {
-			if (
-				!config.host ||
-				!config.port ||
-				!config.user ||
-				!config.database
-			) {
-				return {
-					success: false,
-					message: 'Missing connection parameters'
-				};
-			}
-
-			let connection: any;
+		async (_, config: AppConnection, databaseName: string) => {
+			let connection: PoolConnection;
 
 			try {
 				connection = await createConnection(config);
@@ -148,7 +120,7 @@ function registerMysqlHandlers() {
 				} else if (err.code === 'ECONNREFUSED') {
 					msg = 'Connection refused - check host and port';
 				} else if (err.code === 'ER_DB_DROP_EXISTS') {
-					msg = `Database ${config.database} does not exist`;
+					msg = `Database ${config.localDbConfig.database || config.remote.remoteDbConfig.database} does not exist`;
 				}
 				return {
 					success: false,
diff --git a/electron/modules/projects.ts b/electron/modules/projects.ts
index 75c2535..ab54035 100644
--- a/electron/modules/projects.ts
+++ b/electron/modules/projects.ts
@@ -31,6 +31,15 @@ function registerProjectHandlers(mainWindow: Electron.BrowserWindow) {
 		}
 	});
 
+	ipcMain.handle('select-file', async (_, options) => {
+		try {
+			return await dialog.showOpenDialog(mainWindow, options);
+		} catch (error) {
+			console.error('Error selecting file:', error);
+			throw error;
+		}
+	});
+
 	ipcMain.handle('validate-laravel-project', async (_, projectPath) => {
 		try {
 			const hasEnv = fs.existsSync(path.join(projectPath, '.env'));
diff --git a/electron/modules/sql-executor.ts b/electron/modules/sql-executor.ts
index 4e7da08..ac3b91f 100644
--- a/electron/modules/sql-executor.ts
+++ b/electron/modules/sql-executor.ts
@@ -1,10 +1,10 @@
 import { ipcMain } from 'electron';
 import { createConnection, releaseConnection } from '../helpers/mysql';
-import { MysqlConnection } from '../../src/types/mysql-connection';
+import { AppConnection } from '../../src/types/ssh-connection';
 
 async function executeSqlQueryHandler(
 	_: any,
-	config: MysqlConnection,
+	config: AppConnection,
 	query: string
 ) {
 	let connection: any;
@@ -32,7 +32,7 @@ async function executeSqlQueryHandler(
 
 async function executeExplainSqlHandler(
 	_: any,
-	config: MysqlConnection,
+	config: AppConnection,
 	query: string
 ) {
 	let connection: any;
@@ -96,6 +96,6 @@ async function executeExplainSqlHandler(
 }
 
 export function registerSqlExecutorHandlers() {
-	ipcMain.handle('executeSqlQuery', executeSqlQueryHandler);
-	ipcMain.handle('executeExplainSql', executeExplainSqlHandler);
+	ipcMain.handle('execute-sql-query', executeSqlQueryHandler);
+	ipcMain.handle('execute-explain-sql', executeExplainSqlHandler);
 }
diff --git a/electron/modules/ssh.ts b/electron/modules/ssh.ts
new file mode 100644
index 0000000..57ba20f
--- /dev/null
+++ b/electron/modules/ssh.ts
@@ -0,0 +1,162 @@
+import { ipcMain } from 'electron';
+import * as path from 'path';
+import {
+	testConnection,
+	closeConnection,
+	executeCommand,
+	readRemoteFile,
+	writeRemoteFile,
+	listRemoteFiles,
+	createTunnel,
+	closeTunnel
+} from '../helpers/ssh';
+import { SshConnection } from '../../src/types/ssh-connection';
+
+function registerSshHandlers() {
+	ipcMain.handle('ssh:test-connection', async (_, config: SshConnection) => {
+		return await testConnection(config);
+	});
+
+	ipcMain.handle(
+		'ssh:execute-command',
+		async (_, config: SshConnection, command: string) => {
+			return await executeCommand(config, command);
+		}
+	);
+
+	ipcMain.handle(
+		'ssh:read-file',
+		async (_, config: SshConnection, filePath: string) => {
+			try {
+				const content = await readRemoteFile(config, filePath);
+				return { success: true, content: content.toString('utf-8') };
+			} catch (error) {
+				return {
+					success: false,
+					error:
+						error instanceof Error
+							? error.message
+							: 'Unknown error reading file'
+				};
+			}
+		}
+	);
+
+	ipcMain.handle(
+		'ssh:write-file',
+		async (_, config: SshConnection, filePath: string, content: string) => {
+			try {
+				await writeRemoteFile(config, filePath, content);
+				return { success: true };
+			} catch (error) {
+				return {
+					success: false,
+					error:
+						error instanceof Error
+							? error.message
+							: 'Unknown error writing file'
+				};
+			}
+		}
+	);
+
+	ipcMain.handle(
+		'ssh:list-files',
+		async (_, config: SshConnection, dirPath: string) => {
+			try {
+				const files = await listRemoteFiles(config, dirPath);
+				return { success: true, files };
+			} catch (error) {
+				return {
+					success: false,
+					error:
+						error instanceof Error
+							? error.message
+							: 'Unknown error listing files'
+				};
+			}
+		}
+	);
+
+	ipcMain.handle('ssh:get-env', async (_, config: SshConnection) => {
+		try {
+			const envPath = path.join(config.remotePath, '.env');
+			const content = await readRemoteFile(config, envPath);
+
+			return { success: true, content: content.toString('utf-8') };
+		} catch (error) {
+			return {
+				success: false,
+				error:
+					error instanceof Error
+						? error.message
+						: 'Unknown error reading .env file'
+			};
+		}
+	});
+
+	ipcMain.handle(
+		'ssh:update-env',
+		async (_, config: SshConnection, content: string) => {
+			try {
+				const envPath = path.join(config.remotePath, '.env');
+				await writeRemoteFile(config, envPath, content);
+
+				return { success: true };
+			} catch (error) {
+				return {
+					success: false,
+					error:
+						error instanceof Error
+							? error.message
+							: 'Unknown error updating .env file'
+				};
+			}
+		}
+	);
+
+	ipcMain.handle('ssh:close-connection', (_, config: SshConnection) => {
+		closeConnection(config);
+		return { success: true };
+	});
+
+	ipcMain.handle(
+		'ssh:create-tunnel',
+		async (
+			_,
+			config: SshConnection,
+			remoteHost: string,
+			remotePort: number,
+			localPort?: number
+		) => {
+			try {
+				const result = await createTunnel(
+					config,
+					remoteHost,
+					remotePort,
+					localPort
+				);
+				return {
+					success: true,
+					tunnelId: result.tunnelId,
+					localPort: result.localPort
+				};
+			} catch (error) {
+				return {
+					success: false,
+					error:
+						error instanceof Error
+							? error.message
+							: 'Unknown error creating tunnel'
+				};
+			}
+		}
+	);
+
+	ipcMain.handle('ssh:close-tunnel', (_, tunnelId: string) => {
+		const success = closeTunnel(tunnelId);
+		return { success };
+	});
+}
+
+export { registerSshHandlers };
diff --git a/electron/modules/tables.ts b/electron/modules/tables.ts
index 6e5a374..1e27dcc 100644
--- a/electron/modules/tables.ts
+++ b/electron/modules/tables.ts
@@ -1,5 +1,4 @@
 import { ipcMain } from 'electron';
-import { MysqlConnection } from '../../src/types/mysql-connection';
 import { createConnection, safeEndConnection } from '../helpers/mysql';
 import {
 	BASE_COUNT_SQL,
@@ -19,6 +18,40 @@ import {
 	TableRecord,
 	UpdateTableRecord
 } from '../../src/types/table';
+import { AppConnection } from '../../src/types/ssh-connection';
+import { PoolConnection, RowDataPacket, ResultSetHeader } from 'mysql2/promise';
+
+interface TableRow extends RowDataPacket {
+	name: string;
+	rowCount?: number;
+	isApproximate?: boolean;
+}
+
+interface TableCountRow extends RowDataPacket {
+	name: string;
+	rowCount: number;
+}
+
+interface CountResult extends RowDataPacket {
+	count: number;
+}
+
+interface TableColumn extends RowDataPacket {
+	name: string;
+	type?: string;
+	foreign_key?: boolean;
+}
+
+interface ForeignKeyRow extends RowDataPacket {
+	type?: 'outgoing' | 'incoming';
+}
+
+interface IndexRow extends RowDataPacket {
+	name: string;
+	columns?: string | string[];
+	is_unique?: number;
+	type: string;
+}
 
 function error(type: string, message: string) {
 	const base = { success: false, message };
@@ -33,15 +66,58 @@ function error(type: string, message: string) {
 	return (map[type] || map.default)();
 }
 
-async function toggleForeignKeyChecks(connection: any, enable: boolean) {
+function getDatabaseName(config: AppConnection): string {
+	return config.remote
+		? config.remote.remoteDbConfig.database
+		: config.localDbConfig.database;
+}
+
+async function toggleForeignKeyChecks(
+	connection: PoolConnection,
+	enable: boolean
+): Promise<void> {
 	await connection.query(`SET FOREIGN_KEY_CHECKS = ${enable ? 1 : 0}`);
 }
 
+async function withTransaction<T>(
+	connection: PoolConnection,
+	callback: () => Promise<T>,
+	disableForeignKeys = false
+): Promise<T> {
+	let fkDisabled = false;
+
+	try {
+		await connection.beginTransaction();
+
+		if (disableForeignKeys) {
+			await toggleForeignKeyChecks(connection, false);
+			fkDisabled = true;
+		}
+
+		const result = await callback();
+
+		if (fkDisabled) {
+			await toggleForeignKeyChecks(connection, true);
+		}
+
+		await connection.commit();
+		return result;
+	} catch (err) {
+		await connection.rollback().catch(() => {});
+
+		if (fkDisabled) {
+			await toggleForeignKeyChecks(connection, true).catch(() => {});
+		}
+
+		throw err;
+	}
+}
+
 function applySortingAndPagination(
 	baseSql: string,
-	connection: any,
+	connection: PoolConnection,
 	config: TableRecord
-) {
+): string {
 	let sql = baseSql;
 
 	if (config.sortColumn) {
@@ -55,29 +131,102 @@ function applySortingAndPagination(
 }
 
 async function getTableStructure(
-	connection: any,
+	connection: PoolConnection,
 	database: string,
 	tableName: string
-) {
-	const [cols] = await connection.query(COLUMN_SQL, [database, tableName]);
-	const [fks] = await connection.query(FK_SQL, [database, tableName]);
-	const fkSet = new Set(fks.map((f: any) => f.column_name));
+): Promise<TableColumn[]> {
+	const [cols] = await connection.query<RowDataPacket[]>(COLUMN_SQL, [
+		database,
+		tableName
+	]);
+	const [fks] = await connection.query<RowDataPacket[]>(FK_SQL, [
+		database,
+		tableName
+	]);
+	const fkSet = new Set(fks.map((f) => f.column_name));
+
+	return cols.map((c) => {
+		return {
+			...(c as unknown as Record<string, unknown>),
+			name: c.name as string,
+			type: c.type as string,
+			foreign_key: fkSet.has(c.name as string)
+		} as TableColumn;
+	});
+}
+
+async function getTableForeignKeys(
+	connection: PoolConnection,
+	database: string,
+	tableName: string
+): Promise<ForeignKeyRow[]> {
+	const [out] = await connection.query<ForeignKeyRow[]>(OUTGOING_SQL, [
+		database,
+		tableName
+	]);
+	const [inc] = await connection.query<ForeignKeyRow[]>(INCOMING_SQL, [
+		database,
+		tableName
+	]);
+
+	return [
+		...out.map((fk) => ({ ...fk, type: 'outgoing' as const })),
+		...inc.map((fk) => ({ ...fk, type: 'incoming' as const }))
+	];
+}
+
+function processIndexes(indexes: IndexRow[]): IndexRow[] {
+	return indexes.map((index) => {
+		const result = { ...index };
 
-	return cols.map((c: any) => ({ ...c, foreign_key: fkSet.has(c.name) }));
+		if (result.columns && typeof result.columns === 'string') {
+			(result.columns as unknown) = (result.columns as string).split(',');
+		} else if (!result.columns) {
+			(result.columns as unknown) = [];
+		}
+
+		if (result.name === 'PRIMARY') {
+			result.type = 'PRIMARY';
+		} else if (result.is_unique === 0) {
+			result.type = 'UNIQUE';
+		} else if (result.type === 'FULLTEXT') {
+			result.type = 'FULLTEXT';
+		} else if (result.type === 'SPATIAL') {
+			result.type = 'SPATIAL';
+		} else {
+			result.type = 'INDEX';
+		}
+
+		delete result.is_unique;
+		return result;
+	});
+}
+
+async function getTableIndexes(
+	connection: PoolConnection,
+	database: string,
+	tableName: string
+): Promise<IndexRow[]> {
+	const [indexes] = await connection.query<IndexRow[]>(TABLE_INDEXES_SQL, [
+		database,
+		tableName
+	]);
+
+	return processIndexes(indexes);
 }
 
 async function findRestrictingIds(
-	connection: any,
+	connection: PoolConnection,
 	tableName: string,
 	ids: (string | number)[]
 ): Promise<(string | number)[]> {
-	const [constraints]: any[] = await connection.query(
+	const [constraints] = await connection.query<RowDataPacket[]>(
 		REFERENCE_CONSTRAINTS_SQL,
-		[tableName, connection.database]
+		[tableName, connection.config.database]
 	);
 
-	const restricts = constraints.filter((c: any) =>
-		['RESTRICT', 'NO ACTION'].includes(c.on_delete)
+	const restricts = constraints.filter((c: RowDataPacket) =>
+		['RESTRICT', 'NO ACTION'].includes(c.on_delete as string)
 	);
 
 	const problematic: (string | number)[] = [];
@@ -90,7 +239,7 @@ async function findRestrictingIds(
          WHERE ${connection.escapeId(child_column)} = ?
          LIMIT 1
       `;
-			const [rows]: any[] = await connection.query(sql, [id]);
+			const [rows] = await connection.query<RowDataPacket[]>(sql, [id]);
 			if (rows.length) {
 				problematic.push(id);
 				break;
@@ -102,29 +251,42 @@ async function findRestrictingIds(
 }
 
 async function deleteRecords(
-	connection: any,
+	connection: PoolConnection,
 	tableName: string,
 	ids: (string | number)[]
 ): Promise<{ affectedRows: number }> {
 	const placeholders = ids.map(() => '?').join(',');
+
+	// noinspection SqlResolve
 	const sql = `
     DELETE
       FROM ${connection.escapeId(tableName)}
      WHERE id IN (${placeholders})
   `;
-	const [result]: any[] = await connection.execute(sql, ids);
+	const [result] = await connection.execute<ResultSetHeader>(sql, ids);
 
 	return { affectedRows: result.affectedRows };
 }
 
-async function listTablesHandler(_: any, config: MysqlConnection) {
-	let connection: any;
+async function listTablesHandler(_: unknown, config: AppConnection) {
+	let connection: PoolConnection | null = null;
+
+	const db =
+		config.localDbConfig || (config.remote && config.remote.remoteDbConfig);
+
+	if (!db) {
+		return {
+			success: false,
+			message: 'No valid database configuration found',
+			tables: []
+		};
+	}
 
 	try {
 		connection = await createConnection(config);
 
-		const [tables] = await connection.query(LIST_TABLES_SQL, [
-			config.database
+		const [tables] = await connection.query<TableRow[]>(LIST_TABLES_SQL, [
+			db.database
 		]);
 
 		if (tables.length === 0) {
@@ -132,118 +294,107 @@ async function listTablesHandler(_: any, config: MysqlConnection) {
 		}
 
 		try {
-			const [info] = await connection.query(BASE_COUNT_SQL, [
-				config.database
-			]);
+			const [info] = await connection.query<TableCountRow[]>(
+				BASE_COUNT_SQL,
+				[db.database]
+			);
 			const counts = Object.fromEntries(
-				info.map(({ name, rowCount }: any) => [name, +rowCount || 0])
+				info.map(({ name, rowCount }) => [name, +rowCount || 0])
 			);
-			tables.forEach((t: any) => {
+			tables.forEach((t) => {
 				t.rowCount = counts[t.name] || 0;
 				t.isApproximate = true;
 			});
 		} catch (e) {
 			console.error('Error fetching counts:', e);
-			tables.forEach((t: any) => {
+			tables.forEach((t) => {
 				t.rowCount = 0;
 				t.isApproximate = true;
 			});
 		}
 
 		return { success: true, tables };
-	} catch (err: any) {
-		return error('tables', err.message);
+	} catch (err) {
+		const errorMessage = err instanceof Error ? err.message : String(err);
+		return error('tables', errorMessage);
 	} finally {
 		await safeEndConnection(connection);
 	}
 }
 
 async function getTableRecordCountHandler(
-	_: any,
-	config: MysqlConnection,
+	_: unknown,
+	config: AppConnection,
 	table: Table
 ) {
-	let connection: any;
+	let connection: PoolConnection | null = null;
 
 	try {
 		connection = await createConnection(config);
 		const escaped = connection.escapeId(table.name);
-		const [rows] = await connection.query(
+		const [rows] = await connection.query<CountResult[]>(
 			`SELECT COUNT(*) AS count FROM ${escaped}`
 		);
 
 		return rows.length
 			? { success: true, count: rows[0].count || 0, isApproximate: false }
 			: error('count', 'Failed to count records');
-	} catch (err: any) {
-		return error('count', err.message);
+	} catch (err) {
+		const errorMessage = err instanceof Error ? err.message : String(err);
+		return error('count', errorMessage);
 	} finally {
 		await safeEndConnection(connection);
 	}
 }
 
-async function dropTablesHandler(_: any, params: DropTableParams) {
-	let connection: any;
+async function dropTablesHandler(_: unknown, params: DropTableParams) {
+	let connection: PoolConnection | null = null;
 
 	try {
-		connection = await createConnection(params.dbConnection);
-		await connection.query('START TRANSACTION');
-
-		if (params.ignoreForeignKeys) {
-			await toggleForeignKeyChecks(connection, false);
-		}
-
-		const failed: string[] = [];
-
-		let successCount = 0;
-
-		for (const name of params.tables) {
-			try {
-				const esc = connection.escapeId(name);
-				const cascade = params.cascade ? ' CASCADE' : '';
-
-				await connection.query(`DROP TABLE${cascade} ${esc}`);
-				successCount++;
-			} catch (e: any) {
-				console.error(`Drop failed for ${name}:`, e.message);
-				failed.push(name);
+		connection = await createConnection(params.appConnection);
+
+		const dropTables = async () => {
+			const failed: string[] = [];
+			let successCount = 0;
+
+			for (const name of params.tables) {
+				try {
+					const esc = connection.escapeId(name);
+					const cascade = params.cascade ? ' CASCADE' : '';
+
+					await connection.query(`DROP TABLE${cascade} ${esc}`);
+					successCount++;
+				} catch (e) {
+					const errorMessage =
+						e instanceof Error ? e.message : String(e);
+					console.error(`Drop failed for ${name}:`, errorMessage);
+					failed.push(name);
+				}
 			}
-		}
 
-		if (params.ignoreForeignKeys) {
-			await toggleForeignKeyChecks(connection, true);
-		}
+			if (failed.length > 0) {
+				throw new Error(`Failed to drop tables: ${failed.join(', ')}`);
+			}
 
-		if (failed.length === 0) {
-			await connection.query('COMMIT');
+			return { successCount };
+		};
 
-			return {
-				success: true,
-				message: `Dropped ${successCount} tables successfully`
-			};
-		} else {
-			await connection.query('ROLLBACK');
+		const { successCount } = await withTransaction(
+			connection,
+			dropTables,
+			params.ignoreForeignKeys
+		);
 
-			return {
-				success: false,
-				message: `Failed to drop tables: ${failed.join(', ')}`
-			};
-		}
-	} catch (err: any) {
+		return {
+			success: true,
+			message: `Dropped ${successCount} tables successfully`
+		};
+	} catch (err) {
 		console.error('Error in dropTablesHandler:', err);
-
-		if (connection) {
-			try {
-				await connection.query('ROLLBACK');
-				if (params.ignoreForeignKeys) {
-					await toggleForeignKeyChecks(connection, true);
-				}
-			} catch {}
-		}
-
+		const errorMessage = err instanceof Error ? err.message : String(err);
 		return {
 			success: false,
-			message: err.message || 'Error dropping tables'
+			message: errorMessage || 'Error dropping tables'
 		};
 	} finally {
 		await safeEndConnection(connection);
@@ -251,70 +402,60 @@ async function dropTablesHandler(_: any, params: DropTableParams) {
 }
 
 async function truncateTableHandler(
-	_: any,
-	config: MysqlConnection,
+	_: unknown,
+	config: AppConnection,
 	tableName: string
 ) {
-	let connection: any;
-	let fkDisabled = false;
+	let connection: PoolConnection | null = null;
 
 	try {
 		connection = await createConnection(config);
+		const database = getDatabaseName(config);
 
-		const [fkRes] = await connection.query(HAS_FK_USAGE_SQL, [
-			tableName,
-			config.database
-		]);
-
-		fkDisabled = fkRes.length > 0;
+		const [fkRes] = await connection.query<RowDataPacket[]>(
+			HAS_FK_USAGE_SQL,
+			[tableName, database]
+		);
 
-		await connection.beginTransaction();
+		const hasFkReferences = fkRes.length > 0;
 
-		if (fkDisabled) {
-			await toggleForeignKeyChecks(connection, false);
-		}
-		await connection.query(
-			`TRUNCATE TABLE ${connection.escapeId(tableName)}`
+		await withTransaction(
+			connection,
+			async () => {
+				await connection.query(
+					`TRUNCATE TABLE ${connection.escapeId(tableName)}`
+				);
+				return true;
+			},
+			hasFkReferences
 		);
-		if (fkDisabled) {
-			await toggleForeignKeyChecks(connection, true);
-		}
-
-		await connection.commit();
 
 		return {
 			success: true,
 			message: `Table ${tableName} truncated successfully`
 		};
-	} catch (err: any) {
+	} catch (err) {
 		console.error(`Error truncating ${tableName}:`, err);
-
-		if (connection) {
-			await connection.rollback().catch(() => {});
-
-			if (fkDisabled) {
-				await toggleForeignKeyChecks(connection, true).catch(() => {});
-			}
-		}
-
+		const errorMessage = err instanceof Error ? err.message : String(err);
 		return {
 			success: false,
-			message: err.message || 'Error truncating table'
+			message: errorMessage || 'Error truncating table'
 		};
 	} finally {
 		await safeEndConnection(connection);
 	}
 }
 
-async function getTableRecordsHandler(_: any, config: TableRecord) {
-	let connection: any;
+async function getTableRecordsHandler(_: unknown, config: TableRecord) {
+	let connection: PoolConnection | null = null;
 
 	try {
-		connection = await createConnection(config.dbConnection);
+		connection = await createConnection(config.appConnection);
+		const database = getDatabaseName(config.appConnection);
 
 		const structure = await getTableStructure(
 			connection,
-			config.dbConnection.database,
+			database,
 			config.tableName
 		);
 
@@ -334,13 +475,21 @@ async function getTableRecordsHandler(_: any, config: TableRecord) {
 		const countQuery = `SELECT COUNT(*) AS totalRecords FROM ${tableNameEsc}${where}`;
 
 		try {
-			const [countRows] = await connection.query(countQuery);
+			interface TotalRecordsRow extends RowDataPacket {
+				totalRecords: number;
+			}
+
+			const [countRows] =
+				await connection.query<TotalRecordsRow[]>(countQuery);
 			const totalRecords = countRows[0]?.totalRecords || 0;
 
 			const baseSql = `SELECT * FROM ${tableNameEsc}${where}`;
 			const sql = applySortingAndPagination(baseSql, connection, config);
 
-			const [rows] = await connection.query(sql, [limit, offset]);
+			const [rows] = await connection.query<RowDataPacket[]>(sql, [
+				limit,
+				offset
+			]);
 
 			return {
 				success: true,
@@ -350,12 +499,19 @@ async function getTableRecordsHandler(_: any, config: TableRecord) {
 				limit,
 				structure
 			};
-		} catch (queryError: any) {
+		} catch (queryError) {
 			console.error('SQL Error:', queryError);
 
+			interface SqlError extends Error {
+				code?: string;
+				sqlMessage?: string;
+			}
+
+			const sqlError = queryError as SqlError;
+
 			if (
-				queryError.code === 'ER_PARSE_ERROR' &&
-				queryError.sqlMessage.includes('order')
+				sqlError.code === 'ER_PARSE_ERROR' &&
+				sqlError.sqlMessage?.includes('order')
 			) {
 				return {
 					success: false,
@@ -368,10 +524,11 @@ async function getTableRecordsHandler(_: any, config: TableRecord) {
 
 			throw queryError;
 		}
-	} catch (err: any) {
+	} catch (err) {
+		const errorMessage = err instanceof Error ? err.message : String(err);
 		return {
 			success: false,
-			message: err.message || 'Error fetching records',
+			message: errorMessage || 'Error fetching records',
 			data: [],
 			totalRecords: 0
 		};
@@ -381,18 +538,18 @@ async function getTableRecordsHandler(_: any, config: TableRecord) {
 }
 
 async function getTableStructureHandler(
-	_: any,
-	config: MysqlConnection,
+	_: unknown,
+	config: AppConnection,
 	tableName: string
 ) {
-	let connection: any;
+	let connection: PoolConnection | null = null;
 
 	try {
 		connection = await createConnection(config);
-
+		const database = getDatabaseName(config);
 		const structure = await getTableStructure(
 			connection,
-			config.database,
+			database,
 			tableName
 		);
 
@@ -400,10 +557,11 @@ async function getTableStructureHandler(
 			success: true,
 			structure
 		};
-	} catch (err: any) {
+	} catch (err) {
+		const errorMessage = err instanceof Error ? err.message : String(err);
 		return {
 			success: false,
-			message: err.message || 'Error fetching records'
+			message: errorMessage || 'Error fetching records'
 		};
 	} finally {
 		await safeEndConnection(connection);
@@ -411,42 +569,38 @@ async function getTableStructureHandler(
 }
 
 async function getTableForeignKeysHandler(
-	_: any,
-	config: MysqlConnection,
+	_: unknown,
+	config: AppConnection,
 	tableName: string
 ) {
-	let connection: any;
+	let connection: PoolConnection | null = null;
 
 	try {
 		connection = await createConnection(config);
+		const database = getDatabaseName(config);
 
-		const [out] = await connection.query(OUTGOING_SQL, [
-			config.database,
-			tableName
-		]);
-		const [inc] = await connection.query(INCOMING_SQL, [
-			config.database,
+		const foreignKeys = await getTableForeignKeys(
+			connection,
+			database,
 			tableName
-		]);
+		);
 
 		return {
 			success: true,
-			foreignKeys: [
-				...out.map((fk: any) => ({ ...fk, type: 'outgoing' })),
-				...inc.map((fk: any) => ({ ...fk, type: 'incoming' }))
-			]
+			foreignKeys
 		};
 	} catch (err) {
-		return error('foreign', err.message || 'Failed to fetch foreign keys');
+		const errorMessage = err instanceof Error ? err.message : String(err);
+		return error('foreign', errorMessage || 'Failed to fetch foreign keys');
 	} finally {
 		await safeEndConnection(connection);
 	}
 }
 
 async function deleteTableRecordsHandler(
-	_: any,
+	_: unknown,
 	{
-		dbConnection: config,
+		appConnection: config,
 		tableName,
 		ids,
 		ignoreForeignKeys
@@ -456,7 +610,7 @@ async function deleteTableRecordsHandler(
 		throw new Error('At least one record ID is required');
 	}
 
-	let connection: any;
+	let connection: PoolConnection | null = null;
 
 	try {
 		connection = await createConnection(config);
@@ -498,8 +652,14 @@ async function deleteTableRecordsHandler(
 			message: `${affectedRows} record(s) deleted successfully`,
 			affectedRows
 		};
-	} catch (err: any) {
-		if (err.code === 'ER_ROW_IS_REFERENCED_2') {
+	} catch (err) {
+		interface SqlError extends Error {
+			code?: string;
+		}
+
+		const sqlError = err as SqlError;
+
+		if (sqlError.code === 'ER_ROW_IS_REFERENCED_2') {
 			return {
 				success: false,
 				message:
@@ -508,11 +668,12 @@ async function deleteTableRecordsHandler(
 			};
 		}
 
-		return { success: false, message: err.message };
+		const errorMessage = err instanceof Error ? err.message : String(err);
+		return { success: false, message: errorMessage };
 	} finally {
 		if (connection) {
 			if (ignoreForeignKeys) {
-				await toggleForeignKeyChecks(connection, true).catch((e: any) =>
+				await toggleForeignKeyChecks(connection, true).catch((e) =>
 					console.error('Error re-enabling foreign key checks:', e)
 				);
 			}
@@ -522,12 +683,12 @@ async function deleteTableRecordsHandler(
 	}
 }
 
-async function updateRecordHandler(_: any, config: UpdateTableRecord) {
-	let connection: any;
+async function updateRecordHandler(_: unknown, config: UpdateTableRecord) {
+	let connection: PoolConnection | null = null;
 
 	try {
-		connection = await createConnection(config.dbConnection);
-
+		connection = await createConnection(config.appConnection);
+		const database = getDatabaseName(config.appConnection);
 		const { tableName, data, id } = config;
 
 		if (!tableName || !data || !id) {
@@ -544,12 +705,12 @@ async function updateRecordHandler(_: any, config: UpdateTableRecord) {
 
 		const structure = await getTableStructure(
 			connection,
-			config.dbConnection.database,
+			database,
 			tableName
 		);
 		const jsonColumns = structure
-			.filter((col: any) => col.type?.toLowerCase().includes('json'))
-			.map((col: any) => col.name);
+			.filter((col) => col.type?.toLowerCase().includes('json'))
+			.map((col) => col.name);
 
 		const processedData = Object.fromEntries(
 			Object.entries(updateData).map(([key, value]) => {
@@ -557,7 +718,13 @@ async function updateRecordHandler(_: any, config: UpdateTableRecord) {
 					try {
 						JSON.parse(value);
 						return [key, value];
-					} catch (e) {
+					} catch (e: unknown) {
+						console.error(
+							`Invalid JSON for column ${key}:`,
+							e,
+							value
+						);
+
 						return [key, value];
 					}
 				}
@@ -569,22 +736,24 @@ async function updateRecordHandler(_: any, config: UpdateTableRecord) {
 			.map(([key, _]) => `${connection.escapeId(key)} = ?`)
 			.join(', ');
 
+		// noinspection SqlResolve
 		const sql = `UPDATE ${tableNameEsc} SET ${setClause} WHERE id = ?`;
 
 		const values = [...Object.values(processedData), id];
 
-		const [result] = await connection.execute(sql, values);
+		const [result] = await connection.execute<ResultSetHeader>(sql, values);
 
 		return {
 			success: true,
 			message: `Record updated successfully`,
 			affectedRows: result.affectedRows
 		};
-	} catch (err: any) {
+	} catch (err) {
 		console.error('Error updating record:', err);
+		const errorMessage = err instanceof Error ? err.message : String(err);
 		return {
 			success: false,
-			message: err.message || 'Error updating record'
+			message: errorMessage || 'Error updating record'
 		};
 	} finally {
 		await safeEndConnection(connection);
@@ -592,50 +761,27 @@ async function updateRecordHandler(_: any, config: UpdateTableRecord) {
 }
 
 async function getTableIndexesHandler(
-	_: any,
-	config: MysqlConnection,
+	_: unknown,
+	config: AppConnection,
 	tableName: string
 ) {
-	let connection: any;
+	let connection: PoolConnection | null = null;
 
 	try {
 		connection = await createConnection(config);
+		const database = getDatabaseName(config);
 
-		const [indexes] = await connection.query(TABLE_INDEXES_SQL, [
-			config.database,
-			tableName
-		]);
-
-		indexes.forEach((index: any) => {
-			if (index.columns && typeof index.columns === 'string') {
-				index.columns = index.columns.split(',');
-			} else {
-				index.columns = [];
-			}
-
-			if (index.name === 'PRIMARY') {
-				index.type = 'PRIMARY';
-			} else if (index.is_unique === 0) {
-				index.type = 'UNIQUE';
-			} else if (index.type === 'FULLTEXT') {
-				index.type = 'FULLTEXT';
-			} else if (index.type === 'SPATIAL') {
-				index.type = 'SPATIAL';
-			} else {
-				index.type = 'INDEX';
-			}
-
-			delete index.is_unique;
-		});
+		const indexes = await getTableIndexes(connection, database, tableName);
 
 		return {
 			success: true,
 			indexes
 		};
-	} catch (err: any) {
+	} catch (err) {
+		const errorMessage = err instanceof Error ? err.message : String(err);
 		return {
 			success: false,
-			message: err.message || 'Error fetching table indexes',
+			message: errorMessage || 'Error fetching table indexes',
 			indexes: []
 		};
 	} finally {
@@ -643,14 +789,18 @@ async function getTableIndexesHandler(
 	}
 }
 
-async function getDatabaseSchemaForAIHandler(_: any, config: MysqlConnection) {
-	let connection: any;
+async function getDatabaseSchemaForAIHandler(
+	_: unknown,
+	config: AppConnection
+) {
+	let connection: PoolConnection | null = null;
 
 	try {
 		connection = await createConnection(config);
+		const database = getDatabaseName(config);
 
-		const [tables] = await connection.query(LIST_TABLES_SQL, [
-			config.database
+		const [tables] = await connection.query<TableRow[]>(LIST_TABLES_SQL, [
+			database
 		]);
 
 		if (tables.length === 0) {
@@ -664,50 +814,21 @@ async function getDatabaseSchemaForAIHandler(_: any, config: MysqlConnection) {
 
 			const structure = await getTableStructure(
 				connection,
-				config.database,
+				database,
 				tableName
 			);
 
-			const [outgoing] = await connection.query(OUTGOING_SQL, [
-				config.database,
-				tableName
-			]);
-			const [incoming] = await connection.query(INCOMING_SQL, [
-				config.database,
+			const foreignKeys = await getTableForeignKeys(
+				connection,
+				database,
 				tableName
-			]);
-
-			const foreignKeys = [
-				...outgoing.map((fk: any) => ({ ...fk, type: 'outgoing' })),
-				...incoming.map((fk: any) => ({ ...fk, type: 'incoming' }))
-			];
+			);
 
-			const [indexes] = await connection.query(TABLE_INDEXES_SQL, [
-				config.database,
+			const indexes = await getTableIndexes(
+				connection,
+				database,
 				tableName
-			]);
-
-			indexes.forEach((index: any) => {
-				if (index.columns && typeof index.columns === 'string') {
-					index.columns = index.columns.split(',');
-				} else {
-					index.columns = [];
-				}
-
-				if (index.name === 'PRIMARY') {
-					index.type = 'PRIMARY';
-				} else if (index.is_unique === 0) {
-					index.type = 'UNIQUE';
-				} else if (index.type === 'FULLTEXT') {
-					index.type = 'FULLTEXT';
-				} else if (index.type === 'SPATIAL') {
-					index.type = 'SPATIAL';
-				} else {
-					index.type = 'INDEX';
-				}
-
-				delete index.is_unique;
-			});
+			);
 
 			databaseSchema.tables.push({
 				name: tableName,
@@ -721,10 +842,11 @@ async function getDatabaseSchemaForAIHandler(_: any, config: MysqlConnection) {
 			success: true,
 			databaseSchema
 		};
-	} catch (err: any) {
+	} catch (err) {
+		const errorMessage = err instanceof Error ? err.message : String(err);
 		return {
 			success: false,
-			message: err.message || 'Error fetching database schema',
+			message: errorMessage || 'Error fetching database schema',
 			databaseSchema: { tables: [] }
 		};
 	} finally {
@@ -732,7 +854,7 @@ async function getDatabaseSchemaForAIHandler(_: any, config: MysqlConnection) {
 	}
 }
 
-function registerTablesHandlers() {
+function registerTablesHandlers(): void {
 	ipcMain.handle('list-tables', listTablesHandler);
 	ipcMain.handle('get-table-record-count', getTableRecordCountHandler);
 	ipcMain.handle('drop-tables', dropTablesHandler);
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
index ad60a49..1431eb4 100644
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -1,6 +1,5 @@
 import { ipcRenderer, contextBridge } from 'electron';
 import { Settings } from '../../src/types/settings';
-import { MysqlConnection } from '../../src/types/mysql-connection';
 import { RestoreConfig } from '../../src/types/project';
 import { RedisConnection } from '../../src/types/redis';
 import {
@@ -10,6 +9,7 @@ import {
 	TableRecord,
 	UpdateTableRecord
 } from '../../src/types/table';
+import { AppConnection, SshConnection } from '../../src/types/ssh-connection';
 
 contextBridge.exposeInMainWorld('ipcRenderer', {
 	on(...args: Parameters<typeof ipcRenderer.on>) {
@@ -36,12 +36,23 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
 		const [channel] = args;
 		return ipcRenderer.removeAllListeners(channel);
 	},
+	/**
+	 * Window Management
+	 */
+	openConnectionWindow: (connectionId: string, isRemote: boolean) =>
+		ipcRenderer.invoke('open-connection-window', connectionId, isRemote),
+	closeConnectionWindow: (connectionId: string) =>
+		ipcRenderer.invoke('close-connection-window', connectionId),
+	openSqlEditorWindow: (connectionId: string, isRemote: boolean) =>
+		ipcRenderer.invoke('open-sql-editor-window', connectionId, isRemote),
+	showHomeWindow: () => ipcRenderer.invoke('show-home-window'),
+	getWindowId: () => ipcRenderer.invoke('get-window-id'),
 	/**
 	 * DB monitoring
 	 */
 	startLiveDbUpdate: (config: {
 		connectionId: string;
-		dbConnection: MysqlConnection;
+		appConnection: AppConnection;
 		clearHistory?: boolean;
 	}) => ipcRenderer.invoke('start-live-db-updates', config),
 	stopDbMonitoring: (connectionId: string) =>
@@ -90,36 +101,36 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
 	/**
 	 * MySQL
 	 */
-	testMySQLConnection: (config: MysqlConnection) =>
+	testMySQLConnection: (config: AppConnection) =>
 		ipcRenderer.invoke('test-mysql-connection', config),
-	listDatabases: (config: MysqlConnection) =>
+	listDatabases: (config: AppConnection) =>
 		ipcRenderer.invoke('list-databases', config),
-	dropDatabase: (config: MysqlConnection, databaseName: string) =>
+	dropDatabase: (config: AppConnection, databaseName: string) =>
 		ipcRenderer.invoke('drop-database', config, databaseName),
-	createDatabase: (config: MysqlConnection, databaseName: string) =>
+	createDatabase: (config: AppConnection, databaseName: string) =>
 		ipcRenderer.invoke('create-database', config, databaseName),
 	/**
 	 * Tables
 	 */
 	dropTables: (params: DropTableParams) =>
 		ipcRenderer.invoke('drop-tables', params),
-	listTables: (config: MysqlConnection) =>
+	listTables: (config: AppConnection) =>
 		ipcRenderer.invoke('list-tables', config),
-	getTableRecordCount: (config: MysqlConnection, table: Table) =>
+	getTableRecordCount: (config: AppConnection, table: Table) =>
 		ipcRenderer.invoke('get-table-record-count', config, table),
-	truncateTable: (config: MysqlConnection, tableName: string) =>
+	truncateTable: (config: AppConnection, tableName: string) =>
 		ipcRenderer.invoke('truncate-table', config, tableName),
 	getTableRecords: (config: TableRecord) =>
 		ipcRenderer.invoke('get-table-records', config),
 	deleteRecords: (config: DeleteRowsConfig) =>
 		ipcRenderer.invoke('delete-table-records', config),
-	getTableStructure: (config: MysqlConnection, tableName: string) =>
+	getTableStructure: (config: AppConnection, tableName: string) =>
 		ipcRenderer.invoke('get-table-structure', config, tableName),
-	getTableForeignKeys: (config: MysqlConnection, tableName: string) =>
+	getTableForeignKeys: (config: AppConnection, tableName: string) =>
 		ipcRenderer.invoke('get-table-foreign-keys', config, tableName),
-	getTableIndexes: (config: MysqlConnection, tableName: string) =>
+	getTableIndexes: (config: AppConnection, tableName: string) =>
 		ipcRenderer.invoke('get-table-indexes', config, tableName),
-	getDatabaseSchemaForAI: (config: MysqlConnection) =>
+	getDatabaseSchemaForAI: (config: AppConnection) =>
 		ipcRenderer.invoke('get-database-schema-for-ai', config),
 	updateTableRecord: (config: UpdateTableRecord) =>
 		ipcRenderer.invoke('update-table-record', config),
@@ -131,13 +142,13 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
 	getMigrationStatus: (config: {
 		projectPath: string;
 		usingSail: boolean;
-		db_config: MysqlConnection;
+		appConnection: AppConnection;
 	}) => ipcRenderer.invoke('get-migration-status', config),
 	/**
 	 * Files
 	 */
 	readFile: (filePath: string) => ipcRenderer.invoke('read-file', filePath),
-	saveFile: (filePath: string, content: any) =>
+	saveFile: (filePath: string, content: string) =>
 		ipcRenderer.invoke('save-file', filePath, content),
 	/**
 	 * Project
@@ -154,6 +165,7 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
 	findModelsForTables: (projectPath: string) =>
 		ipcRenderer.invoke('find-models-for-tables', projectPath),
 	selectDirectory: () => ipcRenderer.invoke('select-directory'),
+	selectFile: (options: object) => ipcRenderer.invoke('select-file', options),
 	validateLaravelProject: (projectPath: string) =>
 		ipcRenderer.invoke('validate-laravel-project', projectPath),
 	readEnvFile: (projectPath: string) =>
@@ -196,15 +208,18 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
 	/**
 	 * SQL Executor
 	 */
-	executeSqlQuery: (config: MysqlConnection, query: string) =>
-		ipcRenderer.invoke('executeSqlQuery', config, query),
-	executeExplainSql: (config: MysqlConnection, query: string) =>
-		ipcRenderer.invoke('executeExplainSql', config, query),
+	executeSqlQuery: (config: AppConnection, query: string) =>
+		ipcRenderer.invoke('execute-sql-query', config, query),
+	executeExplainSql: (config: AppConnection, query: string) =>
+		ipcRenderer.invoke('execute-explain-sql', config, query),
 	/**
 	 * Auto-updater
 	 */
 	onUpdateStatus: (callback: Function) => {
-		const subscription = (_event: any, ...args: any[]) => callback(...args);
+		const subscription = (
+			_event: Electron.IpcRendererEvent,
+			...args: unknown[]
+		) => callback(...args);
 		ipcRenderer.on('update-status', subscription);
 		return () => {
 			ipcRenderer.removeListener('update-status', subscription);
@@ -214,7 +229,64 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
 	downloadUpdate: () => ipcRenderer.invoke('download-update'),
 	quitAndInstall: () => ipcRenderer.invoke('quit-and-install'),
 	getCurrentVersion: () => ipcRenderer.invoke('get-current-version'),
-	openExternal: (url: string) => ipcRenderer.invoke('open-external', url)
+	openExternal: (url: string) => ipcRenderer.invoke('open-external', url),
+
+	/**
+	 * SSH Operations
+	 */
+	ssh: {
+		testConnection: (config: SshConnection) =>
+			ipcRenderer.invoke('ssh:test-connection', config),
+		executeCommand: (config: SshConnection, command: string) =>
+			ipcRenderer.invoke('ssh:execute-command', config, command),
+		readFile: (config: SshConnection, filePath: string) =>
+			ipcRenderer.invoke('ssh:read-file', config, filePath),
+		writeFile: (config: SshConnection, filePath: string, content: string) =>
+			ipcRenderer.invoke('ssh:write-file', config, filePath, content),
+		listFiles: (config: SshConnection, dirPath: string) =>
+			ipcRenderer.invoke('ssh:list-files', config, dirPath),
+		getEnv: (config: SshConnection) =>
+			ipcRenderer.invoke('ssh:get-env', config),
+		updateEnv: (config: SshConnection, content: string) =>
+			ipcRenderer.invoke('ssh:update-env', config, content),
+		closeConnection: (config: SshConnection) =>
+			ipcRenderer.invoke('ssh:close-connection', config),
+		createTunnel: (
+			config: SshConnection,
+			remoteHost: string,
+			remotePort: number,
+			localPort?: number
+		) =>
+			ipcRenderer.invoke(
+				'ssh:create-tunnel',
+				config,
+				remoteHost,
+				remotePort,
+				localPort
+			),
+		closeTunnel: (tunnelId: string) =>
+			ipcRenderer.invoke('ssh:close-tunnel', tunnelId)
+	},
+
+	/**
+	 * SSH Tunneling
+	 */
+	findAvailablePort: (min: number, max: number) =>
+		ipcRenderer.invoke('find-available-port', { min, max }),
+	createSSHTunnel: (config: {
+		sshConfig: SshConnection;
+		localPort: number;
+		remoteHost: string;
+		remotePort: number;
+	}) => ipcRenderer.invoke('create-ssh-tunnel', config),
+	closeSSHTunnel: (tunnel: { server: unknown; connection: unknown }) =>
+		ipcRenderer.invoke('close-ssh-tunnel', tunnel),
+
+	/**
+	 * App Icon Badge
+	 */
+	updateMigrationsBadge: (count: number) =>
+		ipcRenderer.invoke('update-migrations-badge', count)
 });
 
 function domReady(
@@ -298,7 +370,7 @@ function useLoading() {
 const { appendLoading, removeLoading } = useLoading();
 domReady().then(appendLoading);
 
-window.onmessage = (ev) => {
+window.onmessage = (ev: MessageEvent<{ payload: string }>) => {
 	ev.data.payload === 'removeLoading' && removeLoading();
 };
 
diff --git a/eslint.config.js b/eslint.config.js
index 6a6596f..49a9c97 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -3,39 +3,82 @@ import globals from 'globals';
 import typescript from '@typescript-eslint/eslint-plugin';
 import typescriptParser from '@typescript-eslint/parser';
 import vue from 'eslint-plugin-vue';
+import unusedImports from 'eslint-plugin-unused-imports';
 
 export default [
-	// Base JS config
-	js.configs.recommended,
-
-	// Global settings for all files
 	{
-		languageOptions: {
-			ecmaVersion: 'latest',
-			sourceType: 'module',
-			globals: {
-				...globals.node,
-				...globals.browser
-			}
-		},
 		ignores: [
 			'dist/**',
 			'dist-electron/**',
+			'dist-electron/main/**',
+			'dist-electron/preload/**',
 			'node_modules/**',
 			'.vscode/**',
 			'.idea/**',
 			'coverage/**',
 			'build/**',
-			'*.min.js'
+			'*.min.js',
+			'release/**',
+			'src/components/**/*.vue',
+			'src/views/**/*.vue',
+			'src/App.vue'
+			// '*.vue', // Uncomment to lint .vue files after fixing template parsing
 		]
 	},
 
-	// Vue and TS config for .vue files
+	js.configs.recommended,
+
+	// Plugin to remove unused imports/vars in JS files
 	{
-		files: ['**/*.vue'],
 		plugins: {
-			vue
+			'unused-imports': unusedImports
 		},
+		rules: {
+			// disable core rule to allow plugin to handle it
+			'no-unused-vars': 'off',
+			'no-throw-literal': 'off',
+			'unused-imports/no-unused-imports': 'error',
+			'unused-imports/no-unused-vars': [
+				'warn',
+				{
+					vars: 'all',
+					varsIgnorePattern: '^_',
+					args: 'after-used',
+					argsIgnorePattern: '^_'
+				}
+			]
+		}
+	},
+
+	{
+		languageOptions: {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			globals: {
+				...globals.node,
+				...globals.browser,
+				console: true,
+				setTimeout: true,
+				clearTimeout: true,
+				setInterval: true,
+				clearInterval: true,
+				process: true,
+				global: true,
+				setImmediate: true,
+				window: true,
+				document: true,
+				require: true,
+				Buffer: true,
+				AbortController: true,
+				AbortSignal: true,
+				performance: true
+			}
+		}
+	},
+
+	{
+		files: ['**/*.vue'],
+		plugins: { vue },
 		languageOptions: {
 			parser: vue.configs['vue3-recommended'].parser,
 			parserOptions: {
@@ -43,9 +86,7 @@ export default [
 				ecmaVersion: 'latest',
 				sourceType: 'module',
 				extraFileExtensions: ['.vue'],
-				ecmaFeatures: {
-					jsx: true
-				}
+				ecmaFeatures: { jsx: true }
 			}
 		},
 		processor: vue.processors['.vue'],
@@ -53,55 +94,71 @@ export default [
 			...vue.configs['vue3-recommended'].rules,
 			'vue/multi-word-component-names': 'off',
 			'vue/require-default-prop': 'off',
-			'vue/no-v-html': 'off'
+			'vue/no-v-html': 'off',
+			'vue/attributes-order': 'off',
+			'vue/no-lone-template': 'off',
+			'vue/this-in-template': 'off'
 		}
 	},
 
-	// TypeScript config for .ts and .tsx files
 	{
 		files: ['**/*.ts', '**/*.tsx'],
 		plugins: {
-			'@typescript-eslint': typescript
+			'@typescript-eslint': typescript,
+			'unused-imports': unusedImports
 		},
 		languageOptions: {
 			parser: typescriptParser,
 			parserOptions: {
 				ecmaVersion: 'latest',
 				sourceType: 'module',
-				ecmaFeatures: {
-					jsx: true
-				}
+				ecmaFeatures: { jsx: true }
 			}
 		},
 		rules: {
 			...typescript.configs.recommended.rules,
 			'@typescript-eslint/no-explicit-any': 'warn',
-			'@typescript-eslint/no-unused-vars': [
+			// disable core and TS unused-vars rules
+			'no-unused-vars': 'off',
+			'@typescript-eslint/no-unused-vars': 'off',
+			'unused-imports/no-unused-imports': 'error',
+			'unused-imports/no-unused-vars': [
 				'warn',
-				{
-					argsIgnorePattern: '^_',
-					varsIgnorePattern: '^_'
-				}
+				{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' }
 			],
-			'no-undef': 'off' // TypeScript already checks this
+			'no-undef': 'off',
+			'@typescript-eslint/no-unsafe-function-type': 'off',
+			'@typescript-eslint/no-empty-object-type': 'off',
+			'@typescript-eslint/no-unused-expressions': 'off'
 		}
 	},
 
-	// Special rules for electron files
 	{
-		files: ['electron/**/*.ts'],
+		files: ['electron/**/*.ts', 'dist-electron/**/*.{js,mjs}'],
 		rules: {
-			'no-console': 'off'
+			'no-console': 'off',
+			'no-undef': 'off'
 		}
 	},
 
-	// General rules for all files
 	{
 		rules: {
 			'no-console':
 				process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 			'no-debugger':
-				process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+				process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+			'no-empty': 'warn',
+			'no-case-declarations': 'off',
+			'no-cond-assign': 'warn',
+			'no-useless-escape': 'warn',
+			// remove no-unused-vars to avoid duplicate warnings
+			// 'no-unused-vars': 'warn',
+			'no-prototype-builtins': 'warn',
+			'no-control-regex': 'off',
+			'no-redeclare': 'warn',
+			'no-fallthrough': 'warn',
+			'no-misleading-character-class': 'warn',
+			'no-unreachable': 'warn'
 		}
 	}
 ];
diff --git a/package-lock.json b/package-lock.json
index ecd08e3..2f62183 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "larabase",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "larabase",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -28,10 +28,13 @@
         "monaco-editor": "^0.52.2",
         "mysql2": "^3.14.1",
         "openai": "^4.98.0",
+        "path-browserify": "^1.0.1",
         "pinia": "^3.0.2",
         "pluralize": "^8.0.0",
+        "portfinder": "^1.0.37",
         "redis": "^5.0.0",
         "sql-formatter": "^15.6.1",
+        "ssh2": "^1.16.0",
         "tailwindcss": "^4.1.4",
         "uuid": "^11.1.0",
         "vue-router": "^4.5.1"
@@ -41,16 +44,18 @@
         "@types/bcrypt": "^5.0.2",
         "@types/dockerode": "^3.3.38",
         "@types/lodash": "^4.17.16",
+        "@types/path-browserify": "^1.0.3",
         "@types/pluralize": "^0.0.33",
+        "@types/ssh2": "^1.15.0",
         "@typescript-eslint/eslint-plugin": "^8.31.1",
         "@typescript-eslint/parser": "^8.31.1",
         "@vitejs/plugin-vue": "^5.0.4",
         "daisyui": "^5.0.28",
         "electron": "^35.2.2",
         "electron-builder": "^26.0.14",
-        "electron-rebuild": "^3.2.9",
         "eslint": "^9.25.1",
         "eslint-config-prettier": "^10.1.2",
+        "eslint-plugin-unused-imports": "^4.1.4",
         "eslint-plugin-vue": "^9.33.0",
         "eslint-plugin-vue-pug": "^0.6.2",
         "globals": "^16.1.0",
@@ -64,6 +69,10 @@
         "vue": "^3.5.13",
         "vue-eslint-parser": "^9.4.3",
         "vue-tsc": "^2.2.10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-darwin-arm64": "^4.1.7",
+        "@tailwindcss/oxide-darwin-x64": "^4.1.7"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1241,9 +1250,9 @@
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.13.0.tgz",
-      "integrity": "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.14.0.tgz",
+      "integrity": "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -1325,13 +1334,16 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.26.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.26.0.tgz",
-      "integrity": "sha512-I9XlJawFdSMvWjDt6wksMCrgns5ggLNfFwFvnShsleWruvXM514Qxk8V246efTw+eo9JABvVz+u3q2RiAowKxQ==",
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.27.0.tgz",
+      "integrity": "sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
       }
     },
     "node_modules/@eslint/object-schema": {
@@ -1345,13 +1357,13 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.8.tgz",
-      "integrity": "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
+      "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.13.0",
+        "@eslint/core": "^0.14.0",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -1824,28 +1836,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@modelcontextprotocol/sdk": {
-      "version": "1.11.2",
-      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.11.2.tgz",
-      "integrity": "sha512-H9vwztj5OAqHg9GockCQC06k1natgcxWQSRpQcPJf6i5+MWBzfKkRtxGbjQf0X2ihii0ffLZCRGbYV2f2bjNCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "content-type": "^1.0.5",
-        "cors": "^2.8.5",
-        "cross-spawn": "^7.0.3",
-        "eventsource": "^3.0.2",
-        "express": "^5.0.1",
-        "express-rate-limit": "^7.5.0",
-        "pkce-challenge": "^5.0.0",
-        "raw-body": "^3.0.0",
-        "zod": "^3.23.8",
-        "zod-to-json-schema": "^3.24.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2355,24 +2345,24 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.6.tgz",
-      "integrity": "sha512-ed6zQbgmKsjsVvodAS1q1Ld2BolEuxJOSyyNc+vhkjdmfNUDCmQnlXBfQkHrlzNmslxHsQU/bFmzcEbv4xXsLg==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.7.tgz",
+      "integrity": "sha512-9rsOpdY9idRI2NH6CL4wORFY0+Q6fnx9XP9Ju+iq/0wJwGD5IByIgFmwVbyy4ymuyprj8Qh4ErxMKTUL4uNh3g==",
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
         "enhanced-resolve": "^5.18.1",
         "jiti": "^2.4.2",
-        "lightningcss": "1.29.2",
+        "lightningcss": "1.30.1",
         "magic-string": "^0.30.17",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.6"
+        "tailwindcss": "4.1.7"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.6.tgz",
-      "integrity": "sha512-0bpEBQiGx+227fW4G0fLQ8vuvyy5rsB1YIYNapTq3aRsJ9taF3f5cCaovDjN5pUGKKzcpMrZst/mhNaKAPOHOA==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.7.tgz",
+      "integrity": "sha512-5SF95Ctm9DFiUyjUPnDGkoKItPX/k+xifcQhcqX5RA85m50jw1pT/KzjdvlqxRja45Y52nR4MR9fD1JYd7f8NQ==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -2383,24 +2373,24 @@
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.6",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.6",
-        "@tailwindcss/oxide-darwin-x64": "4.1.6",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.6",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.6",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.6",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.6",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.6",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.6",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.6",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.6",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.6"
+        "@tailwindcss/oxide-android-arm64": "4.1.7",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.7",
+        "@tailwindcss/oxide-darwin-x64": "4.1.7",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.7",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.7",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.7",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.7",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.7",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.7",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.7",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.7",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.7"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.6.tgz",
-      "integrity": "sha512-VHwwPiwXtdIvOvqT/0/FLH/pizTVu78FOnI9jQo64kSAikFSZT7K4pjyzoDpSMaveJTGyAKvDjuhxJxKfmvjiQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.7.tgz",
+      "integrity": "sha512-IWA410JZ8fF7kACus6BrUwY2Z1t1hm0+ZWNEzykKmMNM09wQooOcN/VXr0p/WJdtHZ90PvJf2AIBS/Ceqx1emg==",
       "cpu": [
         "arm64"
       ],
@@ -2414,9 +2404,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.6.tgz",
-      "integrity": "sha512-weINOCcqv1HVBIGptNrk7c6lWgSFFiQMcCpKM4tnVi5x8OY2v1FrV76jwLukfT6pL1hyajc06tyVmZFYXoxvhQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.7.tgz",
+      "integrity": "sha512-81jUw9To7fimGGkuJ2W5h3/oGonTOZKZ8C2ghm/TTxbwvfSiFSDPd6/A/KE2N7Jp4mv3Ps9OFqg2fEKgZFfsvg==",
       "cpu": [
         "arm64"
       ],
@@ -2430,9 +2420,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.6.tgz",
-      "integrity": "sha512-3FzekhHG0ww1zQjQ1lPoq0wPrAIVXAbUkWdWM8u5BnYFZgb9ja5ejBqyTgjpo5mfy0hFOoMnMuVDI+7CXhXZaQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.7.tgz",
+      "integrity": "sha512-q77rWjEyGHV4PdDBtrzO0tgBBPlQWKY7wZK0cUok/HaGgbNKecegNxCGikuPJn5wFAlIywC3v+WMBt0PEBtwGw==",
       "cpu": [
         "x64"
       ],
@@ -2446,9 +2436,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.6.tgz",
-      "integrity": "sha512-4m5F5lpkBZhVQJq53oe5XgJ+aFYWdrgkMwViHjRsES3KEu2m1udR21B1I77RUqie0ZYNscFzY1v9aDssMBZ/1w==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.7.tgz",
+      "integrity": "sha512-RfmdbbK6G6ptgF4qqbzoxmH+PKfP4KSVs7SRlTwcbRgBwezJkAO3Qta/7gDy10Q2DcUVkKxFLXUQO6J3CRvBGw==",
       "cpu": [
         "x64"
       ],
@@ -2462,9 +2452,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.6.tgz",
-      "integrity": "sha512-qU0rHnA9P/ZoaDKouU1oGPxPWzDKtIfX7eOGi5jOWJKdxieUJdVV+CxWZOpDWlYTd4N3sFQvcnVLJWJ1cLP5TA==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.7.tgz",
+      "integrity": "sha512-OZqsGvpwOa13lVd1z6JVwQXadEobmesxQ4AxhrwRiPuE04quvZHWn/LnihMg7/XkN+dTioXp/VMu/p6A5eZP3g==",
       "cpu": [
         "arm"
       ],
@@ -2478,9 +2468,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.6.tgz",
-      "integrity": "sha512-jXy3TSTrbfgyd3UxPQeXC3wm8DAgmigzar99Km9Sf6L2OFfn/k+u3VqmpgHQw5QNfCpPe43em6Q7V76Wx7ogIQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.7.tgz",
+      "integrity": "sha512-voMvBTnJSfKecJxGkoeAyW/2XRToLZ227LxswLAwKY7YslG/Xkw9/tJNH+3IVh5bdYzYE7DfiaPbRkSHFxY1xA==",
       "cpu": [
         "arm64"
       ],
@@ -2494,9 +2484,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.6.tgz",
-      "integrity": "sha512-8kjivE5xW0qAQ9HX9reVFmZj3t+VmljDLVRJpVBEoTR+3bKMnvC7iLcoSGNIUJGOZy1mLVq7x/gerVg0T+IsYw==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.7.tgz",
+      "integrity": "sha512-PjGuNNmJeKHnP58M7XyjJyla8LPo+RmwHQpBI+W/OxqrwojyuCQ+GUtygu7jUqTEexejZHr/z3nBc/gTiXBj4A==",
       "cpu": [
         "arm64"
       ],
@@ -2510,9 +2500,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.6.tgz",
-      "integrity": "sha512-A4spQhwnWVpjWDLXnOW9PSinO2PTKJQNRmL/aIl2U/O+RARls8doDfs6R41+DAXK0ccacvRyDpR46aVQJJCoCg==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.7.tgz",
+      "integrity": "sha512-HMs+Va+ZR3gC3mLZE00gXxtBo3JoSQxtu9lobbZd+DmfkIxR54NO7Z+UQNPsa0P/ITn1TevtFxXTpsRU7qEvWg==",
       "cpu": [
         "x64"
       ],
@@ -2526,9 +2516,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.6.tgz",
-      "integrity": "sha512-YRee+6ZqdzgiQAHVSLfl3RYmqeeaWVCk796MhXhLQu2kJu2COHBkqlqsqKYx3p8Hmk5pGCQd2jTAoMWWFeyG2A==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.7.tgz",
+      "integrity": "sha512-MHZ6jyNlutdHH8rd+YTdr3QbXrHXqwIhHw9e7yXEBcQdluGwhpQY2Eku8UZK6ReLaWtQ4gijIv5QoM5eE+qlsA==",
       "cpu": [
         "x64"
       ],
@@ -2542,9 +2532,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.6.tgz",
-      "integrity": "sha512-qAp4ooTYrBQ5pk5jgg54/U1rCJ/9FLYOkkQ/nTE+bVMseMfB6O7J8zb19YTpWuu4UdfRf5zzOrNKfl6T64MNrQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.7.tgz",
+      "integrity": "sha512-ANaSKt74ZRzE2TvJmUcbFQ8zS201cIPxUDm5qez5rLEwWkie2SkGtA4P+GPTj+u8N6JbPrC8MtY8RmJA35Oo+A==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -2571,9 +2561,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.6.tgz",
-      "integrity": "sha512-nqpDWk0Xr8ELO/nfRUDjk1pc9wDJ3ObeDdNMHLaymc4PJBWj11gdPCWZFKSK2AVKjJQC7J2EfmSmf47GN7OuLg==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.7.tgz",
+      "integrity": "sha512-HUiSiXQ9gLJBAPCMVRk2RT1ZrBjto7WvqsPBwUrNK2BcdSxMnk19h4pjZjI7zgPhDxlAbJSumTC4ljeA9y0tEw==",
       "cpu": [
         "arm64"
       ],
@@ -2587,9 +2577,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.6.tgz",
-      "integrity": "sha512-5k9xF33xkfKpo9wCvYcegQ21VwIBU1/qEbYlVukfEIyQbEA47uK8AAwS7NVjNE3vHzcmxMYwd0l6L4pPjjm1rQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.7.tgz",
+      "integrity": "sha512-rYHGmvoHiLJ8hWucSfSOEmdCBIGZIq7SpkPRSqLsH2Ab2YUNgKeAPT1Fi2cx3+hnYOrAb0jp9cRyode3bBW4mQ==",
       "cpu": [
         "x64"
       ],
@@ -2603,16 +2593,16 @@
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.6.tgz",
-      "integrity": "sha512-ELq+gDMBuRXPJlpE3PEen+1MhnHAQQrh2zF0dI1NXOlEWfr2qWf2CQdr5jl9yANv8RErQaQ2l6nIFO9OSCVq/g==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.7.tgz",
+      "integrity": "sha512-88g3qmNZn7jDgrrcp3ZXEQfp9CVox7xjP1HN2TFKI03CltPVd/c61ydn5qJJL8FYunn0OqBaW5HNUga0kmPVvw==",
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.6",
-        "@tailwindcss/oxide": "4.1.6",
+        "@tailwindcss/node": "4.1.7",
+        "@tailwindcss/oxide": "4.1.7",
         "postcss": "^8.4.41",
-        "tailwindcss": "4.1.6"
+        "tailwindcss": "4.1.7"
       }
     },
     "node_modules/@tootallnate/once": {
@@ -2737,9 +2727,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.15.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.17.tgz",
-      "integrity": "sha512-wIX2aSZL5FE+MR0JlvF87BNVrtFWf6AE6rxSE9X7OwnVvoyCQjpzSRJ+M87se/4QCkCiebQAqrJ0y6fwIyi7nw==",
+      "version": "22.15.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.18.tgz",
+      "integrity": "sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -2755,6 +2745,13 @@
         "form-data": "^4.0.0"
       }
     },
+    "node_modules/@types/path-browserify": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/path-browserify/-/path-browserify-1.0.3.tgz",
+      "integrity": "sha512-ZmHivEbNCBtAfcrFeBCiTjdIc2dey0l7oCGNGpSuRTy8jP6UVND7oUowlvDujBy8r2Hoa8bfFUOCiPWfmtkfxw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/plist": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/plist/-/plist-3.0.5.tgz",
@@ -3038,82 +3035,82 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.4.13",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.13.tgz",
-      "integrity": "sha512-MnQJ7eKchJx5Oz+YdbqyFUk8BN6jasdJv31n/7r6/WwlOOv7qzvot6B66887l2ST3bUW4Mewml54euzpJWA6bg==",
+      "version": "2.4.14",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.14.tgz",
+      "integrity": "sha512-X6beusV0DvuVseaOEy7GoagS4rYHgDHnTrdOj5jeUb49fW5ceQyP9Ej5rBhqgz2wJggl+2fDbbojq1XKaxDi6w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/source-map": "2.4.13"
+        "@volar/source-map": "2.4.14"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.4.13",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.13.tgz",
-      "integrity": "sha512-l/EBcc2FkvHgz2ZxV+OZK3kMSroMr7nN3sZLF2/f6kWW66q8+tEL4giiYyFjt0BcubqJhBt6soYIrAPhg/Yr+Q==",
+      "version": "2.4.14",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.14.tgz",
+      "integrity": "sha512-5TeKKMh7Sfxo8021cJfmBzcjfY1SsXsPMMjMvjY7ivesdnybqqS+GxGAoXHAOUawQTwtdUxgP65Im+dEmvWtYQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@volar/typescript": {
-      "version": "2.4.13",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.13.tgz",
-      "integrity": "sha512-Ukz4xv84swJPupZeoFsQoeJEOm7U9pqsEnaGGgt5ni3SCTa22m8oJP5Nng3Wed7Uw5RBELdLxxORX8YhJPyOgQ==",
+      "version": "2.4.14",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.14.tgz",
+      "integrity": "sha512-p8Z6f/bZM3/HyCdRNFZOEEzts51uV8WHeN8Tnfnm2EBv6FDB2TQLzfVx7aJvnl8ofKAOnS64B2O8bImBFaauRw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "2.4.13",
+        "@volar/language-core": "2.4.14",
         "path-browserify": "^1.0.1",
         "vscode-uri": "^3.0.8"
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
-      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.14.tgz",
+      "integrity": "sha512-k7qMHMbKvoCXIxPhquKQVw3Twid3Kg4s7+oYURxLGRd56LiuHJVrvFKI4fm2AM3c8apqODPfVJGoh8nePbXMRA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.13",
+        "@babel/parser": "^7.27.2",
+        "@vue/shared": "3.5.14",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
+        "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
-      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.14.tgz",
+      "integrity": "sha512-1aOCSqxGOea5I80U2hQJvXYpPm/aXo95xL/m/mMhgyPUsKe9jhjwWpziNAw7tYRnbz1I61rd9Mld4W9KmmRoug==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.13",
-        "@vue/shared": "3.5.13"
+        "@vue/compiler-core": "3.5.14",
+        "@vue/shared": "3.5.14"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
-      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.14.tgz",
+      "integrity": "sha512-9T6m/9mMr81Lj58JpzsiSIjBgv2LiVoWjIVa7kuXHICUi8LiDSIotMpPRXYJsXKqyARrzjT24NAwttrMnMaCXA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.13",
-        "@vue/compiler-dom": "3.5.13",
-        "@vue/compiler-ssr": "3.5.13",
-        "@vue/shared": "3.5.13",
+        "@babel/parser": "^7.27.2",
+        "@vue/compiler-core": "3.5.14",
+        "@vue/compiler-dom": "3.5.14",
+        "@vue/compiler-ssr": "3.5.14",
+        "@vue/shared": "3.5.14",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.11",
-        "postcss": "^8.4.48",
-        "source-map-js": "^1.2.0"
+        "magic-string": "^0.30.17",
+        "postcss": "^8.5.3",
+        "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
-      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.14.tgz",
+      "integrity": "sha512-Y0G7PcBxr1yllnHuS/NxNCSPWnRGH4Ogrp0tsLA5QemDZuJLs99YjAKQ7KqkHE0vCg4QTKlQzXLKCMF7WPSl7Q==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.13",
-        "@vue/shared": "3.5.13"
+        "@vue/compiler-dom": "3.5.14",
+        "@vue/shared": "3.5.14"
       }
     },
     "node_modules/@vue/compiler-vue2": {
@@ -3186,53 +3183,53 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
-      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.14.tgz",
+      "integrity": "sha512-7cK1Hp343Fu/SUCCO52vCabjvsYu7ZkOqyYu7bXV9P2yyfjUMUXHZafEbq244sP7gf+EZEz+77QixBTuEqkQQw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.13"
+        "@vue/shared": "3.5.14"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
-      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.14.tgz",
+      "integrity": "sha512-w9JWEANwHXNgieAhxPpEpJa+0V5G0hz3NmjAZwlOebtfKyp2hKxKF0+qSh0Xs6/PhfGihuSdqMprMVcQU/E6ag==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.13",
-        "@vue/shared": "3.5.13"
+        "@vue/reactivity": "3.5.14",
+        "@vue/shared": "3.5.14"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
-      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.14.tgz",
+      "integrity": "sha512-lCfR++IakeI35TVR80QgOelsUIdcKjd65rWAMfdSlCYnaEY5t3hYwru7vvcWaqmrK+LpI7ZDDYiGU5V3xjMacw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.13",
-        "@vue/runtime-core": "3.5.13",
-        "@vue/shared": "3.5.13",
+        "@vue/reactivity": "3.5.14",
+        "@vue/runtime-core": "3.5.14",
+        "@vue/shared": "3.5.14",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
-      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.14.tgz",
+      "integrity": "sha512-Rf/ISLqokIvcySIYnv3tNWq40PLpNLDLSJwwVWzG6MNtyIhfbcrAxo5ZL9nARJhqjZyWWa40oRb2IDuejeuv6w==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.13",
-        "@vue/shared": "3.5.13"
+        "@vue/compiler-ssr": "3.5.14",
+        "@vue/shared": "3.5.14"
       },
       "peerDependencies": {
-        "vue": "3.5.13"
+        "vue": "3.5.14"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
-      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.14.tgz",
+      "integrity": "sha512-oXTwNxVfc9EtP1zzXAlSlgARLXNC84frFYkS0HHz0h3E4WZSP9sywqjqzGCP9Y34M8ipNmd380pVgmMuwELDyQ==",
       "license": "MIT"
     },
     "node_modules/@xmldom/xmldom": {
@@ -3285,20 +3282,6 @@
         "node": ">=6.5"
       }
     },
-    "node_modules/accepts": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
-      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mime-types": "^3.0.0",
-        "negotiator": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/acorn": {
       "version": "8.14.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -3866,27 +3849,6 @@
       "integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==",
       "license": "MIT"
     },
-    "node_modules/body-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
-      "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "^3.1.2",
-        "content-type": "^1.0.5",
-        "debug": "^4.4.0",
-        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.6.3",
-        "on-finished": "^2.4.1",
-        "qs": "^6.14.0",
-        "raw-body": "^3.0.0",
-        "type-is": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -4083,16 +4045,6 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/cacache": {
       "version": "16.1.3",
       "resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz",
@@ -4620,49 +4572,6 @@
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
       "license": "ISC"
     },
-    "node_modules/content-disposition": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.0.tgz",
-      "integrity": "sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
-      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie-signature": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
-      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.6.0"
-      }
-    },
     "node_modules/copy-anything": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
@@ -4684,20 +4593,6 @@
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
       "license": "MIT"
     },
-    "node_modules/cors": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
-      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "object-assign": "^4",
-        "vary": "^1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/cose-base": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
@@ -4860,9 +4755,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -4997,16 +4892,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/detect-libc": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
@@ -5298,13 +5183,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/ejs": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
@@ -5322,9 +5200,9 @@
       }
     },
     "node_modules/electron": {
-      "version": "35.3.0",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-35.3.0.tgz",
-      "integrity": "sha512-6dLslJrQYB1qvqVPYRv1PhAA/uytC66nUeiTcq2JXiBzrmTWCHppqtGUjZhvnSRVatBCT5/SFdizdzcBiEiYUg==",
+      "version": "35.4.0",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-35.4.0.tgz",
+      "integrity": "sha512-VIPSNcUnic00aaE83w6BW4Dj1kE8A5DU0nVbvwqotN3+gseGunbP4WyHp/kfKXVKQj1S3No3HnYxU5LJmYbAtw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -5489,112 +5367,6 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/electron-rebuild": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/electron-rebuild/-/electron-rebuild-3.2.9.tgz",
-      "integrity": "sha512-FkEZNFViUem3P0RLYbZkUjC8LUFIK+wKq09GHoOITSJjfDAVQv964hwaNseTTWt58sITQX3/5fHNYcTefqaCWw==",
-      "deprecated": "Please use @electron/rebuild moving forward.  There is no API change, just a package name change",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@malept/cross-spawn-promise": "^2.0.0",
-        "chalk": "^4.0.0",
-        "debug": "^4.1.1",
-        "detect-libc": "^2.0.1",
-        "fs-extra": "^10.0.0",
-        "got": "^11.7.0",
-        "lzma-native": "^8.0.5",
-        "node-abi": "^3.0.0",
-        "node-api-version": "^0.1.4",
-        "node-gyp": "^9.0.0",
-        "ora": "^5.1.0",
-        "semver": "^7.3.5",
-        "tar": "^6.0.5",
-        "yargs": "^17.0.1"
-      },
-      "bin": {
-        "electron-rebuild": "lib/src/cli.js"
-      },
-      "engines": {
-        "node": ">=12.13.0"
-      }
-    },
-    "node_modules/electron-rebuild/node_modules/fs-extra": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/electron-rebuild/node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/electron-rebuild/node_modules/minipass": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/electron-rebuild/node_modules/node-api-version": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/node-api-version/-/node-api-version-0.1.4.tgz",
-      "integrity": "sha512-KGXihXdUChwJAOHO53bv9/vXcLmdUsZ6jIptbvYvkpKfth+r7jw44JkVxQFA3kX5nQjzjmGu1uAu/xNNLNlI5g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "semver": "^7.3.5"
-      }
-    },
-    "node_modules/electron-rebuild/node_modules/tar": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
-      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^5.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/electron-rebuild/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/electron-store": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/electron-store/-/electron-store-10.0.1.tgz",
@@ -5719,16 +5491,6 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "license": "MIT"
     },
-    "node_modules/encodeurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/encoding": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
@@ -5905,13 +5667,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -5926,9 +5681,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.26.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.26.0.tgz",
-      "integrity": "sha512-Hx0MOjPh6uK9oq9nVsATZKE/Wlbai7KFjfCuw9UHaguDW3x+HF0O5nIi3ud39TWgrTjTO5nHxmL3R1eANinWHQ==",
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.27.0.tgz",
+      "integrity": "sha512-ixRawFQuMB9DZ7fjU3iGGganFDp3+45bPOdaRurcFHSXO1e/sYwUX/FtQZpLZJR6SjMoJH8hR2pPEAfDyCoU2Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5936,14 +5691,13 @@
         "@eslint-community/regexpp": "^4.12.1",
         "@eslint/config-array": "^0.20.0",
         "@eslint/config-helpers": "^0.2.1",
-        "@eslint/core": "^0.13.0",
+        "@eslint/core": "^0.14.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.26.0",
-        "@eslint/plugin-kit": "^0.2.8",
+        "@eslint/js": "9.27.0",
+        "@eslint/plugin-kit": "^0.3.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
-        "@modelcontextprotocol/sdk": "^1.8.0",
         "@types/estree": "^1.0.6",
         "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
@@ -5967,8 +5721,7 @@
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "zod": "^3.24.2"
+        "optionator": "^0.9.3"
       },
       "bin": {
         "eslint": "bin/eslint.js"
@@ -6004,6 +5757,22 @@
         "eslint": ">=7.0.0"
       }
     },
+    "node_modules/eslint-plugin-unused-imports": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-4.1.4.tgz",
+      "integrity": "sha512-YptD6IzQjDardkl0POxnnRBhU1OEePMV0nd6siHaRBbd+lyh6NAhFEobiznKU7kTsSsDeSD62Pe7kAM1b7dAZQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0",
+        "eslint": "^9.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-vue": {
       "version": "9.33.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.33.0.tgz",
@@ -6229,16 +5998,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/event-target-shim": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
@@ -6248,29 +6007,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/eventsource": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
-      "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eventsource-parser": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/eventsource-parser": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.1.tgz",
-      "integrity": "sha512-VARTJ9CYeuQYb0pZEPbzi740OWFgpHe7AYJ2WFZVnUDUQp5Dk2yJUgF36YsZ81cOyxT0QxmXD2EQpapAouzWVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/exceljs": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/exceljs/-/exceljs-4.4.0.tgz",
@@ -6307,65 +6043,6 @@
       "dev": true,
       "license": "Apache-2.0"
     },
-    "node_modules/express": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/express/-/express-5.1.0.tgz",
-      "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "accepts": "^2.0.0",
-        "body-parser": "^2.2.0",
-        "content-disposition": "^1.0.0",
-        "content-type": "^1.0.5",
-        "cookie": "^0.7.1",
-        "cookie-signature": "^1.2.1",
-        "debug": "^4.4.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "finalhandler": "^2.1.0",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.0",
-        "merge-descriptors": "^2.0.0",
-        "mime-types": "^3.0.0",
-        "on-finished": "^2.4.1",
-        "once": "^1.4.0",
-        "parseurl": "^1.3.3",
-        "proxy-addr": "^2.0.7",
-        "qs": "^6.14.0",
-        "range-parser": "^1.2.1",
-        "router": "^2.2.0",
-        "send": "^1.1.0",
-        "serve-static": "^2.2.0",
-        "statuses": "^2.0.1",
-        "type-is": "^2.0.1",
-        "vary": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/express-rate-limit": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.5.0.tgz",
-      "integrity": "sha512-eB5zbQh5h+VenMPM3fh+nw1YExi5nMr6HUCR62ELSP11huvxm/Uir1H1QEyTkk5QX6A58pX6NmaTMceKZ0Eodg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/express-rate-limit"
-      },
-      "peerDependencies": {
-        "express": "^4.11 || 5 || ^5.0.0-beta.1"
-      }
-    },
     "node_modules/ext-list": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
@@ -6571,24 +6248,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/finalhandler": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.0.tgz",
-      "integrity": "sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "on-finished": "^2.4.1",
-        "parseurl": "^1.3.3",
-        "statuses": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -6678,27 +6337,6 @@
       "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==",
       "license": "MIT"
     },
-    "node_modules/form-data/node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/form-data/node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/formdata-node": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
@@ -6712,26 +6350,6 @@
         "node": ">= 12.20"
       }
     },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fresh": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
-      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -7199,23 +6817,6 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
-    "node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -7451,16 +7052,6 @@
         "node": ">= 12"
       }
     },
-    "node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/is-ci": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
@@ -7566,13 +7157,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-promise": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
-      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/is-property": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
@@ -7924,9 +7508,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
-      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
       "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
@@ -7939,22 +7523,22 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.29.2",
-        "lightningcss-darwin-x64": "1.29.2",
-        "lightningcss-freebsd-x64": "1.29.2",
-        "lightningcss-linux-arm-gnueabihf": "1.29.2",
-        "lightningcss-linux-arm64-gnu": "1.29.2",
-        "lightningcss-linux-arm64-musl": "1.29.2",
-        "lightningcss-linux-x64-gnu": "1.29.2",
-        "lightningcss-linux-x64-musl": "1.29.2",
-        "lightningcss-win32-arm64-msvc": "1.29.2",
-        "lightningcss-win32-x64-msvc": "1.29.2"
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
-      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
       "cpu": [
         "arm64"
       ],
@@ -7972,9 +7556,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
-      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
       "cpu": [
         "x64"
       ],
@@ -7992,9 +7576,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
-      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
       "cpu": [
         "x64"
       ],
@@ -8012,9 +7596,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
-      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
       "cpu": [
         "arm"
       ],
@@ -8032,9 +7616,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
-      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
       "cpu": [
         "arm64"
       ],
@@ -8052,9 +7636,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
-      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
       "cpu": [
         "arm64"
       ],
@@ -8072,9 +7656,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
-      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
       "cpu": [
         "x64"
       ],
@@ -8092,9 +7676,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
-      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
       "cpu": [
         "x64"
       ],
@@ -8112,9 +7696,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
-      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
       "cpu": [
         "arm64"
       ],
@@ -8132,9 +7716,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
-      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
       "cpu": [
         "x64"
       ],
@@ -8338,32 +7922,6 @@
         "url": "https://github.com/sponsors/wellwelwel"
       }
     },
-    "node_modules/lzma-native": {
-      "version": "8.0.6",
-      "resolved": "https://registry.npmjs.org/lzma-native/-/lzma-native-8.0.6.tgz",
-      "integrity": "sha512-09xfg67mkL2Lz20PrrDeNYZxzeW7ADtpYFbwSQh9U8+76RIzx5QsJBMy8qikv3hbUPfpy6hqwxt6FcGK81g9AA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "node-addon-api": "^3.1.0",
-        "node-gyp-build": "^4.2.1",
-        "readable-stream": "^3.6.0"
-      },
-      "bin": {
-        "lzmajs": "bin/lzmajs"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/lzma-native/node_modules/node-addon-api": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
-      "integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -8463,16 +8021,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/make-fetch-happen/node_modules/negotiator": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
-      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/matcher": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
@@ -8496,29 +8044,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/media-typer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
-      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/merge-descriptors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
-      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -8566,18 +8091,26 @@
       }
     },
     "node_modules/mime-types": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
-      "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
-      "dev": true,
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "license": "MIT",
       "dependencies": {
-        "mime-db": "^1.54.0"
+        "mime-db": "1.52.0"
       },
       "engines": {
         "node": ">= 0.6"
       }
     },
+    "node_modules/mime-types/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -8881,9 +8414,9 @@
       "license": "MIT"
     },
     "node_modules/negotiator": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
-      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
+      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8959,141 +8492,6 @@
         }
       }
     },
-    "node_modules/node-gyp": {
-      "version": "9.4.1",
-      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-9.4.1.tgz",
-      "integrity": "sha512-OQkWKbjQKbGkMf/xqI1jjy3oCTgMKJac58G2+bjZb3fza6gW2YrCSdMQYaoTb70crvE//Gngr4f0AgVHmqHvBQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "env-paths": "^2.2.0",
-        "exponential-backoff": "^3.1.1",
-        "glob": "^7.1.4",
-        "graceful-fs": "^4.2.6",
-        "make-fetch-happen": "^10.0.3",
-        "nopt": "^6.0.0",
-        "npmlog": "^6.0.0",
-        "rimraf": "^3.0.2",
-        "semver": "^7.3.5",
-        "tar": "^6.1.2",
-        "which": "^2.0.2"
-      },
-      "bin": {
-        "node-gyp": "bin/node-gyp.js"
-      },
-      "engines": {
-        "node": "^12.13 || ^14.13 || >=16"
-      }
-    },
-    "node_modules/node-gyp-build": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
-      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "node-gyp-build": "bin.js",
-        "node-gyp-build-optional": "optional.js",
-        "node-gyp-build-test": "build-test.js"
-      }
-    },
-    "node_modules/node-gyp/node_modules/are-we-there-yet": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz",
-      "integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==",
-      "deprecated": "This package is no longer supported.",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^3.6.0"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-      }
-    },
-    "node_modules/node-gyp/node_modules/gauge": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
-      "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
-      "deprecated": "This package is no longer supported.",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "aproba": "^1.0.3 || ^2.0.0",
-        "color-support": "^1.1.3",
-        "console-control-strings": "^1.1.0",
-        "has-unicode": "^2.0.1",
-        "signal-exit": "^3.0.7",
-        "string-width": "^4.2.3",
-        "strip-ansi": "^6.0.1",
-        "wide-align": "^1.1.5"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-      }
-    },
-    "node_modules/node-gyp/node_modules/minipass": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/node-gyp/node_modules/nopt": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
-      "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "abbrev": "^1.0.0"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-      }
-    },
-    "node_modules/node-gyp/node_modules/npmlog": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
-      "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
-      "deprecated": "This package is no longer supported.",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "are-we-there-yet": "^3.0.0",
-        "console-control-strings": "^1.1.0",
-        "gauge": "^4.0.3",
-        "set-blocking": "^2.0.0"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-      }
-    },
-    "node_modules/node-gyp/node_modules/tar": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
-      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^5.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/nopt": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
@@ -9166,19 +8564,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-inspect": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
-      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -9190,19 +8575,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -9229,9 +8601,9 @@
       }
     },
     "node_modules/openai": {
-      "version": "4.98.0",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.98.0.tgz",
-      "integrity": "sha512-TmDKur1WjxxMPQAtLG5sgBSCJmX7ynTsGmewKzoDwl1fRxtbLOsiR0FA/AOAAtYUmP6azal+MYQuOENfdU+7yg==",
+      "version": "4.100.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-4.100.0.tgz",
+      "integrity": "sha512-9soq/wukv3utxcuD7TWFqKdKp0INWdeyhUCvxwrne5KwnxaCp4eHL4GdT/tMFhYolxgNhxFzg5GFwM331Z5CZg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/node": "^18.11.18",
@@ -9399,21 +8771,10 @@
         "node": ">=6"
       }
     },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-exists": {
@@ -9479,16 +8840,6 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/path-to-regexp": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz",
-      "integrity": "sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=16"
-      }
-    },
     "node_modules/pe-library": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/pe-library/-/pe-library-0.4.1.tgz",
@@ -9557,16 +8908,6 @@
         }
       }
     },
-    "node_modules/pkce-challenge": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.0.tgz",
-      "integrity": "sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=16.20.0"
-      }
-    },
     "node_modules/plist": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
@@ -9591,6 +8932,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/portfinder": {
+      "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.37.tgz",
+      "integrity": "sha512-yuGIEjDAYnnOex9ddMnKZEMFE0CcGo6zbfzDklkmT1m5z734ss6JMzN9rNB3+RR7iS+F10D4/BVIaXOyh8PQKw==",
+      "license": "MIT",
+      "dependencies": {
+        "async": "^3.2.6",
+        "debug": "^4.3.6"
+      },
+      "engines": {
+        "node": ">= 10.12"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -9816,9 +9170,9 @@
       }
     },
     "node_modules/protobufjs": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.1.tgz",
-      "integrity": "sha512-3qx3IRjR9WPQKagdwrKjO3Gu8RgQR2qqw+1KnigWhoVjFqegIj1K3bP11sGqhxrO46/XL7lekuG4jmjL+4cLsw==",
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.2.tgz",
+      "integrity": "sha512-f2ls6rpO6G153Cy+o2XQ+Y0sARLOZ17+OGVLHrc3VUKcLHYKEKWbkSujdBWQXM7gKn5NTfp0XnRPZn1MIu8n9w==",
       "hasInstallScript": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -9839,20 +9193,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/pug-error": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz",
@@ -9907,22 +9247,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/qs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
-      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "side-channel": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -9976,32 +9300,6 @@
         "node": ">=0.12"
       }
     },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.0.tgz",
-      "integrity": "sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.6.3",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/read-binary-file-arch": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/read-binary-file-arch/-/read-binary-file-arch-1.0.6.tgz",
@@ -10278,23 +9576,6 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/router": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
-      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.0",
-        "depd": "^2.0.0",
-        "is-promise": "^4.0.0",
-        "parseurl": "^1.3.3",
-        "path-to-regexp": "^8.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -10393,29 +9674,6 @@
       "license": "MIT",
       "optional": true
     },
-    "node_modules/send": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-1.2.0.tgz",
-      "integrity": "sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.3.5",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.0",
-        "mime-types": "^3.0.1",
-        "ms": "^2.1.3",
-        "on-finished": "^2.4.1",
-        "range-parser": "^1.2.1",
-        "statuses": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/seq-queue": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
@@ -10452,22 +9710,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/serve-static": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.0.tgz",
-      "integrity": "sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "parseurl": "^1.3.3",
-        "send": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -10480,13 +9722,6 @@
       "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
       "license": "MIT"
     },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10510,82 +9745,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
-        "side-channel-map": "^1.0.1",
-        "side-channel-weakmap": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-map": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
-      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-weakmap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
-      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3",
-        "side-channel-map": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -10819,16 +9978,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -10951,9 +10100,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.6.tgz",
-      "integrity": "sha512-j0cGLTreM6u4OWzBeLBpycK0WIh8w7kSwcUsQZoGLHZ7xDTdM69lN64AgoIEEwFi0tnhs4wSykUa5YWxAzgFYg==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.7.tgz",
+      "integrity": "sha512-kr1o/ErIdNhTz8uzAYL7TpaUuzKIE6QPQ4qmSdxnoX/lo+5wmUHQA6h3L5yIqEImSRnAAURDirLu/BgiXGPAhg==",
       "license": "MIT"
     },
     "node_modules/tapable": {
@@ -11266,16 +10415,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -11345,21 +10484,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/type-is": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
-      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "content-type": "^1.0.5",
-        "media-typer": "^1.1.0",
-        "mime-types": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/typescript": {
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
@@ -11428,16 +10552,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/unused-filename": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/unused-filename/-/unused-filename-4.0.1.tgz",
@@ -11559,16 +10673,6 @@
         "uuid": "dist/esm/bin/uuid"
       }
     },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/verror": {
       "version": "1.10.1",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.1.tgz",
@@ -11718,16 +10822,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
-      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.14.tgz",
+      "integrity": "sha512-LbOm50/vZFG6Mhy6KscQYXZMQ0LMCC/y40HDJPPvGFQ+i/lUH+PJHR6C3assgOQiXdl6tAfsXHbXYVBZZu65ew==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.13",
-        "@vue/compiler-sfc": "3.5.13",
-        "@vue/runtime-dom": "3.5.13",
-        "@vue/server-renderer": "3.5.13",
-        "@vue/shared": "3.5.13"
+        "@vue/compiler-dom": "3.5.14",
+        "@vue/compiler-sfc": "3.5.14",
+        "@vue/runtime-dom": "3.5.14",
+        "@vue/server-renderer": "3.5.14",
+        "@vue/shared": "3.5.14"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -12093,26 +11197,6 @@
       "engines": {
         "node": ">= 10"
       }
-    },
-    "node_modules/zod": {
-      "version": "3.24.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.4.tgz",
-      "integrity": "sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==",
-      "devOptional": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
-    "node_modules/zod-to-json-schema": {
-      "version": "3.24.5",
-      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.5.tgz",
-      "integrity": "sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g==",
-      "dev": true,
-      "license": "ISC",
-      "peerDependencies": {
-        "zod": "^3.24.1"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index c77e6b1..6e01dd2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "larabase",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "main": "dist-electron/main/index.js",
   "description": "An Opined Database GUI for Laravel Developers",
   "author": "Tiago Padilha <tiagospem@gmail.com>",
@@ -31,7 +31,9 @@
     "publish:mac-intel": "vue-tsc --noEmit && vite build && electron-builder --publish always --mac --x64",
     "publish:mac-apple": "vue-tsc --noEmit && vite build && electron-builder --publish always --mac --arm64",
     "postinstall": "electron-builder install-app-deps",
-    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
+    "rebuild": "electron-builder install-app-deps",
+    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix --max-warnings 1000",
+    "lint:ci": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix --max-warnings 1000 || true",
     "format": "prettier --write \"**/*.{js,ts,vue,jsx,tsx,css,md}\""
   },
   "dependencies": {
@@ -53,10 +55,13 @@
     "monaco-editor": "^0.52.2",
     "mysql2": "^3.14.1",
     "openai": "^4.98.0",
+    "path-browserify": "^1.0.1",
     "pinia": "^3.0.2",
     "pluralize": "^8.0.0",
+    "portfinder": "^1.0.37",
     "redis": "^5.0.0",
     "sql-formatter": "^15.6.1",
+    "ssh2": "^1.16.0",
     "tailwindcss": "^4.1.4",
     "uuid": "^11.1.0",
     "vue-router": "^4.5.1"
@@ -66,7 +71,9 @@
     "@types/bcrypt": "^5.0.2",
     "@types/dockerode": "^3.3.38",
     "@types/lodash": "^4.17.16",
+    "@types/path-browserify": "^1.0.3",
     "@types/pluralize": "^0.0.33",
+    "@types/ssh2": "^1.15.0",
     "@typescript-eslint/eslint-plugin": "^8.31.1",
     "@typescript-eslint/parser": "^8.31.1",
     "@vitejs/plugin-vue": "^5.0.4",
@@ -75,6 +82,7 @@
     "electron-builder": "^26.0.14",
     "eslint": "^9.25.1",
     "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-vue": "^9.33.0",
     "eslint-plugin-vue-pug": "^0.6.2",
     "globals": "^16.1.0",
@@ -90,8 +98,8 @@
     "vue-tsc": "^2.2.10"
   },
   "optionalDependencies": {
-    "@tailwindcss/oxide-darwin-x64": "^4.1.7",
-    "@tailwindcss/oxide-darwin-arm64": "^4.1.7"
+    "@tailwindcss/oxide-darwin-arm64": "^4.1.7",
+    "@tailwindcss/oxide-darwin-x64": "^4.1.7"
   },
   "build": {
     "appId": "com.larabase.app",
@@ -134,7 +142,9 @@
       "target": [
         {
           "target": "nsis",
-          "arch": ["x64"]
+          "arch": [
+            "x64"
+          ]
         }
       ],
       "icon": "dist/icons/win/icon.ico"
@@ -147,7 +157,13 @@
       "icon": "dist/icons/png/512x512.png"
     },
     "asarUnpack": [
-      "node_modules/electron-store/**/*"
+      "node_modules/electron-store/**/*",
+      "node_modules/ssh2/**/*",
+      "node_modules/bcrypt/**/*",
+      "node_modules/mysql2/**/*",
+      "node_modules/dockerode/**/*",
+      "node_modules/ioredis/**/*",
+      "node_modules/**/build/Release/*.node"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
index c360adb..63293df 100644
--- a/src/components/BaseHeader.vue
+++ b/src/components/BaseHeader.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { ProjectConnection } from '@/types/project';
+import {
+	ConnectionType,
+	getConnectionTypeColor
+} from '@/types/connection-types';
 
 const props = defineProps({
 	title: {
@@ -9,18 +13,29 @@ const props = defineProps({
 	project: {
 		type: Object as () => ProjectConnection | null,
 		default: null
+	},
+	isRemoteConnection: {
+		type: Boolean,
+		default: false
+	},
+	showBackButton: {
+		type: Boolean,
+		default: true
 	}
 });
 
-function getConnectionColor(type: string) {
-	switch (type) {
-		case 'mysql':
-			return 'bg-orange-500';
-		case 'pgsql':
-			return 'bg-indigo-600';
-		default:
-			return 'bg-gray-600';
+function getConnectionInfo(project: ProjectConnection | null) {
+	if (!project) return '';
+
+	if (project.type === ConnectionType.SSH && project.sshConfig) {
+		const remoteConfig = project.sshConfig.remoteDbConfig;
+		if (remoteConfig) {
+			return `${remoteConfig.host}:${remoteConfig.port}/${remoteConfig.database}`;
+		}
+		return project.sshConfig.host || '';
 	}
+
+	return project?.dbConfig?.database || project?.projectPath || '';
 }
 
 const emit = defineEmits(['goBack']);
@@ -38,6 +53,7 @@ const handleGoBack = () => {
 	>
 		<div class="flex items-center">
 			<button
+				v-if="showBackButton"
 				class="btn btn-ghost btn-sm mr-2"
 				@click="handleGoBack"
 			>
@@ -59,7 +75,11 @@ const handleGoBack = () => {
 
 			<div
 				class="mr-2 flex h-8 w-8 items-center justify-center rounded-full"
-				:class="getConnectionColor(props.project?.type as string)"
+				:class="
+					getConnectionTypeColor(
+						props.project?.type as ConnectionType
+					)
+				"
 			>
 				<span class="text-base-100 text-sm font-bold">{{
 					props.project?.icon
@@ -67,12 +87,16 @@ const handleGoBack = () => {
 			</div>
 
 			<div>
-				<h1 class="text-lg font-semibold">{{ props.title }}</h1>
+				<h1 class="text-lg font-semibold flex items-center">
+					{{ props.title }}
+					<span
+						v-if="props.project?.type === 'ssh'"
+						class="ml-2 badge badge-sm badge-info"
+						>Remote</span
+					>
+				</h1>
 				<div class="text-xs">
-					{{
-						props.project?.db_config.database ||
-						props.project?.projectPath
-					}}
+					{{ getConnectionInfo(props.project) }}
 				</div>
 			</div>
 		</div>
diff --git a/src/components/ConnectionGuard.vue b/src/components/ConnectionGuard.vue
index 510e6a0..0c0ee51 100644
--- a/src/components/ConnectionGuard.vue
+++ b/src/components/ConnectionGuard.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, watch, toRaw, onUnmounted } from 'vue';
 import { useConnectionsStore } from '@/store/connections';
 import { useNavigation } from '@/composables/useNavigation';
+import { AppConnection } from '@/types/ssh-connection';
 
 const props = defineProps({
 	projectId: {
@@ -34,9 +35,14 @@ async function testConnection() {
 
 	try {
 		isRetrying.value = true;
-		const result = await window.ipcRenderer.testMySQLConnection(
-			toRaw(selectedProject.db_config)
-		);
+
+		const AppConnection = {
+			localDbConfig: toRaw(selectedProject.dbConfig),
+			remote: toRaw(selectedProject.sshConfig)
+		} as AppConnection;
+
+		const result =
+			await window.ipcRenderer.testMySQLConnection(AppConnection);
 
 		connectionResult.value = result;
 
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 9131694..53aa5a6 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -96,11 +96,13 @@ export default defineComponent({
 				(col) => col.width || props.initialColumnWidth
 			);
 
-			document.addEventListener('mousemove', handleMouseMove);
-			document.addEventListener('mouseup', stopResize);
-			document.addEventListener('mouseup', stopRowSelection);
+			if (!props.disableSelection) {
+				document.addEventListener('mousemove', handleMouseMove);
+				document.addEventListener('mouseup', stopResize);
+				document.addEventListener('mouseup', stopRowSelection);
+				document.addEventListener('keydown', handleKeyDown);
+			}
 			window.addEventListener('resize', handleWindowResize);
-			document.addEventListener('keydown', handleKeyDown);
 
 			if (
 				props.tableStructureData &&
@@ -113,11 +115,14 @@ export default defineComponent({
 		});
 
 		onBeforeUnmount(() => {
-			document.removeEventListener('mousemove', handleMouseMove);
-			document.removeEventListener('mouseup', stopResize);
-			document.removeEventListener('mouseup', stopRowSelection);
+			if (!props.disableSelection) {
+				document.removeEventListener('mousemove', handleMouseMove);
+				document.removeEventListener('mouseup', stopResize);
+				document.removeEventListener('mouseup', stopRowSelection);
+				document.removeEventListener('keydown', handleKeyDown);
+			}
+
 			window.removeEventListener('resize', handleWindowResize);
-			document.removeEventListener('keydown', handleKeyDown);
 		});
 
 		const handleWindowResize = () => {
diff --git a/src/components/EnvEditor.vue b/src/components/EnvEditor.vue
index ffc8bbc..c603e4b 100644
--- a/src/components/EnvEditor.vue
+++ b/src/components/EnvEditor.vue
@@ -1,23 +1,38 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, inject } from 'vue';
+import { computed, onMounted, ref, inject, toRaw } from 'vue';
 import { useConnectionsStore } from '@/store/connections';
+import { ConnectionType } from '@/types/connection-types';
 import DotEnvEditor from '@/components/DotEnvEditor.vue';
 import Modal from '@/components/Modal.vue';
+import {
+	getRemoteEnvVariables,
+	updateRemoteEnvVariables
+} from '@/services/remote-file-service';
+import { SshConnection } from '@/types/ssh-connection.d';
 
 const emit = defineEmits<{
 	close: [];
 }>();
 
 const showAlert = inject<(message: string, type: string) => void>('showAlert')!;
+
 const connectionsStore = useConnectionsStore();
 
-const projectPath = computed(
-	() => connectionsStore.getSelectedProject?.projectPath
-);
+const project = computed(() => connectionsStore.getSelectedProject);
+
 const envFilePath = computed(() =>
-	projectPath.value ? `${projectPath.value}/.env` : ''
+	project.value?.projectPath ? `${project.value?.projectPath}/.env` : ''
 );
 
+const isSSHConnection = computed(() => {
+	const selectedProject = connectionsStore.getSelectedProject;
+	return selectedProject?.type === ConnectionType.SSH;
+});
+
+const sshConfig = computed(() => {
+	return connectionsStore.getSelectedProject?.sshConfig;
+});
+
 const envContent = ref('');
 const originalContent = ref('');
 const isLoading = ref(false);
@@ -32,21 +47,37 @@ function handleClose() {
 }
 
 async function loadEnvFile() {
-	if (!envFilePath.value) return;
-
 	isLoading.value = true;
 
 	try {
-		const result = await window.ipcRenderer.readFile(envFilePath.value);
+		if (isSSHConnection.value && sshConfig.value) {
+			const content = await getRemoteEnvVariables(
+				toRaw(project.value?.sshConfig) as SshConnection
+			);
+
+			if (content) {
+				envContent.value = content;
+				originalContent.value = content;
+				showAlert('Remote .env file loaded successfully', 'success');
+			} else {
+				envContent.value = '';
+				originalContent.value = '';
+				showAlert('Error: Could not load remote .env file', 'error');
+			}
+		} else if (envFilePath.value) {
+			const result = await window.ipcRenderer.readFile(envFilePath.value);
 
-		if (result.success) {
-			envContent.value = result.content;
-			originalContent.value = result.content;
-			showAlert('File loaded successfully', 'success');
+			if (result.success) {
+				envContent.value = result.content;
+				originalContent.value = result.content;
+				showAlert('File loaded successfully', 'success');
+			} else {
+				envContent.value = '';
+				originalContent.value = '';
+				showAlert(`Error: ${result.message || result.error}`, 'error');
+			}
 		} else {
-			envContent.value = '';
-			originalContent.value = '';
-			showAlert(`Error: ${result.message || result.error}`, 'error');
+			showAlert('No valid project path or SSH connection found', 'error');
 		}
 	} catch (error: any) {
 		console.error('Error loading .env file:', error);
@@ -59,28 +90,33 @@ async function loadEnvFile() {
 }
 
 async function saveEnvFile() {
-	if (
-		!envContent.value ||
-		!hasChanges.value ||
-		isSaving.value ||
-		!envFilePath.value
-	)
-		return;
+	if (!envContent.value || !hasChanges.value || isSaving.value) return;
 
 	isSaving.value = true;
 	showAlert('Saving...', 'info');
 
 	try {
-		const result = await window.ipcRenderer.saveFile(
-			envFilePath.value,
-			envContent.value
-		);
-
-		if (result.success) {
+		if (isSSHConnection.value && sshConfig.value) {
+			await updateRemoteEnvVariables(
+				toRaw(project.value?.sshConfig) as SshConnection,
+				envContent.value
+			);
 			originalContent.value = envContent.value;
-			showAlert('File saved successfully', 'success');
+			showAlert('Remote .env file saved successfully', 'success');
+		} else if (envFilePath.value) {
+			const result = await window.ipcRenderer.saveFile(
+				envFilePath.value,
+				envContent.value
+			);
+
+			if (result.success) {
+				originalContent.value = envContent.value;
+				showAlert('File saved successfully', 'success');
+			} else {
+				showAlert(`Error saving: ${result.message}`, 'error');
+			}
 		} else {
-			showAlert(`Error saving: ${result.message}`, 'error');
+			showAlert('No valid project path or SSH connection found', 'error');
 		}
 	} catch (error: any) {
 		console.error('Error saving .env file:', error);
@@ -105,12 +141,46 @@ onMounted(() => {
 	>
 		<div class="mb-4 flex items-center gap-2">
 			<div class="flex-1 text-sm opacity-75">
-				<span v-if="envFilePath">{{ envFilePath }}</span>
+				<span v-if="isSSHConnection && sshConfig">
+					{{ sshConfig.remotePath }}/.../.env
+					<span class="badge badge-sm ml-2">Remote SSH</span>
+				</span>
+				<span v-else-if="envFilePath">{{ envFilePath }}</span>
+			</div>
+			<div>
+				<button
+					class="btn btn-sm btn-outline"
+					@click="loadEnvFile"
+					:disabled="isLoading"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="h-4 w-4 mr-1"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+						/>
+					</svg>
+					Refresh
+				</button>
 			</div>
 		</div>
 
 		<div
-			v-if="!projectPath"
+			v-if="isLoading"
+			class="flex h-64 items-center justify-center"
+		>
+			<span class="loading loading-spinner loading-lg"></span>
+		</div>
+
+		<div
+			v-else-if="!project?.projectPath && !isSSHConnection"
 			class="flex h-64 items-center justify-center"
 		>
 			<div class="text-center">
@@ -128,17 +198,10 @@ onMounted(() => {
 						d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v .776"
 					/>
 				</svg>
-				<p>No Laravel project path selected</p>
+				<p>No Laravel project path or SSH connection selected</p>
 			</div>
 		</div>
 
-		<div
-			v-else-if="isLoading"
-			class="flex h-64 items-center justify-center"
-		>
-			<span class="loading loading-spinner loading-lg"></span>
-		</div>
-
 		<div
 			v-else-if="!envContent && !isLoading"
 			class="flex h-64 items-center justify-center"
diff --git a/src/components/LiveUpdates.vue b/src/components/LiveUpdates.vue
index e9d4c20..431f2c9 100644
--- a/src/components/LiveUpdates.vue
+++ b/src/components/LiveUpdates.vue
@@ -4,6 +4,7 @@ import { ref, onMounted, onBeforeUnmount, toRaw } from 'vue';
 import { useConnectionsStore } from '@/store/connections';
 import { useTabsStore } from '@/store/tabs';
 import { useSidebarStore } from '@/store/sidebar';
+import { AppConnection } from '@/types/ssh-connection';
 
 const emit = defineEmits(['close']);
 
@@ -57,9 +58,14 @@ async function startMonitoring(clearHistory = false) {
 			return;
 		}
 
+		const AppConnection = {
+			localDbConfig: toRaw(project.dbConfig),
+			remote: toRaw(project.sshConfig)
+		} as AppConnection;
+
 		const result = await window.ipcRenderer.startLiveDbUpdate({
 			connectionId: projectId,
-			dbConnection: toRaw(project.db_config),
+			appConnection: AppConnection,
 			clearHistory
 		});
 
@@ -217,47 +223,74 @@ onBeforeUnmount(() => {
 
 <template>
 	<Modal
-		:show="true"
 		title="Database Activity Monitor"
+		:show="true"
+		:allowCloseOnBackdrop="true"
+		:showFooter="true"
+		:show-cancel-button="false"
 		@close="handleClose"
-		:show-footer="false"
 	>
-		<div class="database-monitor">
-			<div class="mb-4 flex items-center justify-between px-1">
-				<div class="flex items-center gap-2">
-					<div
-						class="badge-xs badge"
-						:class="
-							isLoading
-								? 'badge-warning'
-								: isMonitoring
-									? 'badge-success'
-									: 'badge-error'
-						"
-					>
-						<span v-if="isLoading">Loading</span>
-						<span v-else-if="isMonitoring">Monitoring</span>
-						<span v-else>Inactive</span>
-					</div>
-					<span class="text-sm opacity-70"
-						>{{ logs.length }} events recorded</span
-					>
-				</div>
+		<div
+			v-if="isLoading"
+			class="flex h-[400px] w-full items-center justify-center"
+		>
+			<div class="loading loading-spinner loading-lg text-primary"></div>
+		</div>
 
-				<div class="flex gap-2">
-					<button
-						@click="clearHistory"
-						class="btn btn-sm btn-ghost btn-outline"
-						:disabled="isLoading || logs.length === 0"
+		<div
+			v-else
+			class="flex flex-col"
+		>
+			<div class="flex justify-end px-4 py-2">
+				<button
+					class="btn btn-sm mr-2"
+					@click="startMonitoring(true)"
+					:disabled="isLoading"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="mr-1 h-4 w-4"
 					>
-						Clear history
-					</button>
-				</div>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+						/>
+					</svg>
+					Refresh
+				</button>
+
+				<button
+					v-if="logs.length > 0"
+					class="btn btn-sm btn-warning mr-2"
+					@click="clearHistory"
+					:disabled="isLoading || logs.length === 0"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="mr-1 h-4 w-4"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+						/>
+					</svg>
+					Clear History
+				</button>
 			</div>
 
 			<div
 				v-if="error"
-				class="alert alert-error mb-4"
+				class="alert alert-error mb-4 mx-4"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -275,259 +308,288 @@ onBeforeUnmount(() => {
 				<span>{{ error }}</span>
 			</div>
 
-			<div
-				v-if="isLoading"
-				class="flex items-center justify-center p-10"
-			>
-				<span class="loading loading-spinner loading-lg"></span>
-			</div>
-
-			<div
-				v-else-if="logs.length === 0"
-				class="card bg-base-200"
-			>
-				<div class="card-body items-center text-center">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="h-12 w-12 opacity-50"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
-						/>
-					</svg>
-					<h2 class="card-title">No database activity yet</h2>
-					<p>Perform database operations to see them appear here</p>
+			<div class="overflow-y-hidden">
+				<div
+					v-if="logs.length === 0"
+					class="flex h-full w-full items-center justify-center"
+				>
+					<div class="text-center">
+						<h3 class="text-sm font-medium">
+							No database activity yet
+						</h3>
+						<p class="text-base-content/70 mt-2 text-xs">
+							Perform database operations to see them appear here
+						</p>
+					</div>
 				</div>
-			</div>
 
-			<div
-				v-else
-				class="overflow-x-auto"
-			>
-				<table class="table-compact table-zebra table w-full text-sm">
-					<thead>
-						<tr>
-							<th>Action</th>
-							<th>Table</th>
-							<th>Record ID</th>
-							<th>Time</th>
-							<th>View</th>
-							<th></th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr
-							v-for="(log, index) in logs"
-							:key="log.id || index"
-							class="hover"
+				<div
+					v-else
+					class="h-[300px]"
+				>
+					<div class="max-h-full overflow-x-auto">
+						<table
+							class="table-pin-rows table-compact table w-full text-sm"
 						>
-							<td>
-								<div
-									class="badge badge-xs"
-									:class="
-										getActionBadgeClass(log.action_type)
-									"
-								>
-									{{ log.action_type }}
-								</div>
-							</td>
-							<td>
-								<div class="font-medium">
-									{{ log.table_name }}
-								</div>
-							</td>
-							<td>
-								<div class="flex items-center justify-between">
-									<span
-										v-if="
-											log.record_id &&
-											log.record_id !== 'no-id'
-										"
-										class="font-medium"
-									>
-										{{ log.record_id }}
-									</span>
-									<span
-										v-else
-										class="opacity-50"
-										>{{ log.record_id }}</span
-									>
-								</div>
-							</td>
-							<td class="whitespace-nowrap">
-								<span :title="formatFullDate(log.created_at)">{{
-									formatTimestamp(log.created_at)
-								}}</span>
-							</td>
-							<td>
-								<button
-									class="btn btn-xs btn-ghost btn-circle"
-									@click="viewLogDetails(log)"
-									title="View details"
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										width="14"
-										height="14"
-										viewBox="0 0 24 24"
-										fill="none"
-										stroke="currentColor"
-										stroke-width="2"
-										stroke-linecap="round"
-										stroke-linejoin="round"
+							<thead
+								class="bg-base-100 sticky top-0 z-10 shadow-md"
+							>
+								<tr>
+									<th class="text-center">Action</th>
+									<th>Table</th>
+									<th>Record ID</th>
+									<th class="text-center">Time</th>
+									<th
+										class="text-center"
+										colspan="2"
 									>
-										<path
-											d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-										/>
-										<circle
-											cx="12"
-											cy="12"
-											r="3"
-										/>
-									</svg>
-								</button>
-							</td>
-							<td>
-								<button
-									v-if="
-										log.record_id &&
-										log.record_id !== 'no-id'
-									"
-									@click.stop="
-										openTableWithFilter(
-											log.table_name,
-											log.record_id
-										)
-									"
-									class="shrink-0 cursor-pointer"
+										Actions
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr
+									v-for="(log, index) in logs"
+									:key="log.id || index"
+									class="hover:bg-base-200"
 								>
-									<svg
-										class="h-3 w-3"
-										xmlns="http://www.w3.org/2000/svg"
-										fill="currentColor"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
+									<td class="text-center">
+										<span
+											class="badge badge-xs"
+											:class="
+												getActionBadgeClass(
+													log.action_type
+												)
+											"
+										>
+											{{ log.action_type }}
+										</span>
+									</td>
+									<td class="text-xs">
+										{{ log.table_name }}
+									</td>
+									<td class="text-xs">
+										<span
+											v-if="
+												log.record_id &&
+												log.record_id !== 'no-id'
+											"
+										>
+											{{ log.record_id }}
+										</span>
+										<span
+											v-else
+											class="opacity-50"
+											>{{ log.record_id }}</span
+										>
+									</td>
+									<td
+										class="text-center whitespace-nowrap text-xs"
+										:title="formatFullDate(log.created_at)"
 									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
-										/>
-									</svg>
-								</button>
-							</td>
-						</tr>
-					</tbody>
-				</table>
+										{{ formatTimestamp(log.created_at) }}
+									</td>
+									<td class="text-center">
+										<div
+											class="flex justify-center space-x-2"
+										>
+											<button
+												class="btn btn-xs btn-ghost"
+												@click="viewLogDetails(log)"
+												title="View Details"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="h-3 w-3"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+													/>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+													/>
+												</svg>
+											</button>
+										</div>
+									</td>
+									<td class="text-center">
+										<button
+											v-if="
+												log.record_id &&
+												log.record_id !== 'no-id'
+											"
+											class="btn btn-xs btn-ghost"
+											@click="
+												openTableWithFilter(
+													log.table_name,
+													log.record_id
+												)
+											"
+											title="Open in Table"
+										>
+											<svg
+												class="h-3 w-3"
+												xmlns="http://www.w3.org/2000/svg"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+												/>
+											</svg>
+										</button>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+
+			<div
+				class="bg-base-300 border-base-300 flex items-center justify-between border-t p-4"
+			>
+				<div class="text-xs flex items-center gap-2">
+					<div
+						class="badge badge-xs"
+						:class="
+							isLoading
+								? 'badge-warning'
+								: isMonitoring
+									? 'badge-success'
+									: 'badge-error'
+						"
+					>
+						<span v-if="isLoading">Loading</span>
+						<span v-else-if="isMonitoring">Monitoring</span>
+						<span v-else>Inactive</span>
+					</div>
+					<span>{{ logs.length }} events recorded</span>
+				</div>
 			</div>
 		</div>
 	</Modal>
 
 	<Modal
-		v-if="showDetailsModal"
-		:show="showDetailsModal"
+		v-if="showDetailsModal && selectedLog"
 		title="Database Operation Details"
+		:show="showDetailsModal"
+		:allowCloseOnBackdrop="true"
 		@close="showDetailsModal = false"
 	>
+		<div class="mb-4 flex justify-between">
+			<div>
+				<span
+					class="badge ml-2"
+					:class="getActionBadgeClass(selectedLog.action_type)"
+				>
+					{{ selectedLog.action_type }}
+				</span>
+				<span class="ml-2">{{ selectedLog.table_name }}</span>
+			</div>
+			<div class="text-xs opacity-70">
+				{{ formatFullDate(selectedLog.created_at) }}
+			</div>
+		</div>
 		<div
-			v-if="selectedLog"
-			class="p-1"
+			class="bg-base-100 max-h-[350px] flex-1 overflow-auto rounded-md p-4"
 		>
-			<div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-				<div class="card bg-base-200">
-					<div class="card-body p-4">
-						<h3
-							class="card-title flex items-center gap-2 text-base"
-						>
-							<div
-								class="badge badge-xs"
-								:class="
-									getActionBadgeClass(selectedLog.action_type)
-								"
-							>
-								{{ selectedLog.action_type }}
-							</div>
-							Operation
-						</h3>
-						<div class="text-sm">
-							<p>
-								<span class="font-medium">Table:</span>
-								{{ selectedLog.table_name }}
-							</p>
-							<p>
-								<span class="font-medium">Record ID:</span>
-								{{ selectedLog.record_id }}
-							</p>
-							<p>
-								<span class="font-medium">Time:</span>
-								{{ formatFullDate(selectedLog.created_at) }}
-							</p>
-						</div>
-					</div>
-				</div>
-
-				<div class="card bg-base-200">
-					<div class="card-body p-4">
-						<h3 class="card-title text-base">Actions</h3>
-						<div class="flex flex-wrap gap-2">
-							<button
-								v-if="
-									selectedLog.record_id &&
-									selectedLog.record_id !== 'no-id'
-								"
-								@click="
-									openTableWithFilter(
-										selectedLog.table_name,
-										selectedLog.record_id
-									);
-									showDetailsModal = false;
-								"
-								class="btn btn-sm btn-primary gap-1"
-							>
-								<svg
-									class="h-4 w-4"
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
-									/>
-								</svg>
-								Open in Table
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<div class="card bg-base-200">
-				<div class="card-body p-4">
-					<h3 class="card-title text-base">Details</h3>
-					<div class="bg-base-300 rounded-lg p-3 text-sm">
-						<pre class="break-words whitespace-pre-wrap">{{
-							formatDetails(selectedLog.details)
-						}}</pre>
-					</div>
-				</div>
+			<div class="mb-3">
+				<span class="font-medium text-sm">Record ID:</span>
+				<span class="ml-2 font-mono text-sm">{{
+					selectedLog.record_id
+				}}</span>
 			</div>
+			<pre class="font-mono text-xs whitespace-pre-wrap">{{
+				formatDetails(selectedLog.details)
+			}}</pre>
 		</div>
+		<template #footer>
+			<button
+				v-if="
+					selectedLog.record_id && selectedLog.record_id !== 'no-id'
+				"
+				class="btn btn-primary"
+				@click="
+					openTableWithFilter(
+						selectedLog.table_name,
+						selectedLog.record_id
+					);
+					showDetailsModal = false;
+				"
+			>
+				<svg
+					class="h-4 w-4 mr-2"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+					/>
+				</svg>
+				Open in Table
+			</button>
+			<button
+				class="btn"
+				@click="showDetailsModal = false"
+			>
+				Close
+			</button>
+		</template>
 	</Modal>
 </template>
 
 <style scoped>
-.database-monitor {
-	min-height: 300px;
+th,
+td {
+	white-space: nowrap;
+	padding: 0.25rem 0.5rem;
+	box-sizing: border-box;
+}
+
+.table {
+	border-collapse: separate;
+	border-spacing: 0;
+	width: max-content;
+	min-width: 100%;
+}
+
+.overflow-x-auto {
+	width: 100%;
+	overflow-x: auto;
+}
+
+.table thead th {
+	position: sticky;
+	top: 0;
+	z-index: 10;
+	font-weight: normal;
+}
+
+.table-pin-rows thead {
+	position: sticky;
+	top: 0;
+	z-index: 10;
+}
+
+tbody {
+	overflow: hidden;
 }
 </style>
diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
index 4412788..b24220e 100644
--- a/src/components/MainHeader.vue
+++ b/src/components/MainHeader.vue
@@ -2,46 +2,52 @@
 import { useConnectionsStore } from '@/store/connections';
 import { useRedisStore } from '@/store/redis';
 import { ProjectConnection } from '@/types/project';
-import { watchEffect, reactive, computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
+import { watchEffect, reactive, computed, onMounted, onUnmounted } from 'vue';
 import ShowConnectionInfo from '@/components/ShowConnectionInfo.vue';
 import DatabaseSchemaViewer from '@/components/schema/DatabaseSchemaViewer.vue';
 import ERDModal from '@/components/ERDModal.vue';
 import { useDatabaseSchema } from '@/services/databaseSchema';
 import RedisManager from '@/components/RedisManager.vue';
 import LaravelCommands from '@/components/LaravelCommands.vue';
+import {
+	ConnectionType,
+	getConnectionTypeColor
+} from '@/types/connection-types';
+import Settings from '@/components/Settings.vue';
+import DatabaseSwitcher from '@/components/database/DatabaseSwitcher.vue';
+import LiveUpdates from '@/components/LiveUpdates.vue';
+import ProjectLogs from '@/components/ProjectLogs.vue';
+import Migrations from '@/components/Migrations.vue';
+import EnvEditor from '@/components/EnvEditor.vue';
+import RemoteFileExplorer from '@/components/RemoteFileExplorer.vue';
+import { SshConnection } from '@/types/ssh-connection';
 
 const connectionsStore = useConnectionsStore();
 const redisStore = useRedisStore();
-const router = useRouter();
+
 const {
 	databaseSchema,
 	isLoading: isLoadingSchema,
-	fetchDatabaseSchema,
-	initializeSchema
+	fetchDatabaseSchema
 } = useDatabaseSchema();
 
 const props = defineProps({
 	pendingMigrations: {
 		type: Number,
 		default: 0
+	},
+	isRemoteConnection: {
+		type: Boolean,
+		default: false
 	}
 });
 
-const emit = defineEmits([
-	'open-settings',
-	'open-database-switcher',
-	'open-live-updates',
-	'open-project-logs',
-	'open-migrations',
-	'open-env-editor',
-	'goBack'
-]);
+const emit = defineEmits(['goBack', 'migrations-updated']);
 
 const selectedProject = computed(() => connectionsStore.getSelectedProject);
 
 const isRedisAvailable = computed(() => {
-	return redisStore.isRedisAvailable;
+	return redisStore.isRedisAvailable && !props.isRemoteConnection;
 });
 
 const isLoading = computed(() => {
@@ -52,25 +58,30 @@ const ui = reactive({
 	showTablesModelsModal: false,
 	showDatabaseDiagram: false,
 	showRedisManager: false,
-	showLaravelCommands: false
+	showLaravelCommands: false,
+	showSettings: false,
+	showDatabaseSwitcher: false,
+	showLiveUpdates: false,
+	showProjectLogs: false,
+	showMigrations: false,
+	showEnvEditor: false,
+	showRemoteFileExplorer: false
 });
 
-function getConnectionColor(type: string) {
-	switch (type) {
-		case 'mysql':
-			return 'bg-orange-500';
-		case 'postgresql':
-			return 'bg-blue-600';
-		default:
-			return 'bg-gray-600';
+async function openSqlEditor() {
+	if (selectedProject.value?.id) {
+		await window.ipcRenderer.openSqlEditorWindow(
+			selectedProject.value.id,
+			props.isRemoteConnection
+		);
 	}
 }
 
-function openSqlEditor() {
-	router.push(`/sql-editor/${selectedProject.value?.id}`);
-}
-
 async function getDatabaseSchema() {
+	if (props.isRemoteConnection) {
+		return;
+	}
+
 	try {
 		const result = await fetchDatabaseSchema(true);
 
@@ -86,19 +97,42 @@ async function getDatabaseSchema() {
 	}
 }
 
+async function handleMigrationsClose() {
+	ui.showMigrations = false;
+	emit('migrations-updated');
+}
+
+function handleGlobalKeydown(event: KeyboardEvent) {
+	if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
+		event.preventDefault();
+
+		ui.showDatabaseSwitcher = true;
+	}
+}
+
+async function handleGoBack() {
+	await window.ipcRenderer.showHomeWindow();
+
+	window.close();
+}
+
 onMounted(() => {
-	initializeSchema();
+	if (!props.isRemoteConnection) {
+		window.addEventListener('keydown', handleGlobalKeydown);
+	}
 });
 
 watchEffect(() => {
-	if (selectedProject.value?.id) {
+	if (selectedProject.value?.id && !props.isRemoteConnection) {
 		redisStore.checkRedisAvailability(
 			selectedProject.value as ProjectConnection
 		);
 	}
 });
 
-ui.showRedisManager = false;
+onUnmounted(() => {
+	window.removeEventListener('keydown', handleGlobalKeydown);
+});
 </script>
 
 <template>
@@ -109,7 +143,7 @@ ui.showRedisManager = false;
 		<div class="flex items-center">
 			<button
 				class="btn btn-ghost btn-sm mr-2"
-				@click="emit('goBack')"
+				@click="handleGoBack"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -128,14 +162,22 @@ ui.showRedisManager = false;
 			</button>
 			<div
 				class="mr-2 flex h-8 w-8 items-center justify-center rounded-full"
-				:class="getConnectionColor(selectedProject?.type as string)"
+				:class="
+					getConnectionTypeColor(
+						selectedProject?.type as ConnectionType
+					)
+				"
 			>
 				<span class="text-base-100 text-sm font-bold">{{
 					selectedProject?.icon
 				}}</span>
 			</div>
 
-			<ShowConnectionInfo />
+			<ShowConnectionInfo
+				:is-remote-connection="props.isRemoteConnection"
+				:connection="selectedProject"
+				v-if="selectedProject"
+			/>
 		</div>
 
 		<div class="flex">
@@ -143,6 +185,7 @@ ui.showRedisManager = false;
 				<div
 					class="tooltip tooltip-bottom"
 					data-tip="View database structure and relationships"
+					v-if="!props.isRemoteConnection"
 				>
 					<button
 						class="btn btn-ghost btn-sm"
@@ -169,11 +212,12 @@ ui.showRedisManager = false;
 
 				<div
 					class="tooltip tooltip-bottom"
-					data-tip="Change database or project connection"
+					data-tip="Manage databases"
+					v-if="!props.isRemoteConnection"
 				>
 					<button
 						class="btn btn-ghost btn-sm"
-						@click="emit('open-database-switcher')"
+						@click="ui.showDatabaseSwitcher = true"
 					>
 						<svg
 							class="h-4 w-4"
@@ -191,10 +235,11 @@ ui.showRedisManager = false;
 				<div
 					class="tooltip tooltip-bottom"
 					data-tip="Monitor database changes in real-time"
+					v-if="!props.isRemoteConnection"
 				>
 					<button
 						class="btn btn-ghost btn-sm"
-						@click="emit('open-live-updates')"
+						@click="ui.showLiveUpdates = true"
 					>
 						<svg
 							class="h-4 w-4"
@@ -215,7 +260,7 @@ ui.showRedisManager = false;
 				>
 					<button
 						class="btn btn-ghost btn-sm"
-						@click="emit('open-project-logs')"
+						@click="ui.showProjectLogs = true"
 					>
 						<svg
 							class="h-4 w-4"
@@ -233,10 +278,11 @@ ui.showRedisManager = false;
 				<div
 					class="tooltip tooltip-bottom"
 					data-tip="Manage migrations and artisan commands"
+					v-if="!props.isRemoteConnection"
 				>
 					<button
 						class="btn btn-ghost btn-sm relative"
-						@click="emit('open-migrations')"
+						@click="ui.showMigrations = true"
 					>
 						<svg
 							class="h-4 w-4"
@@ -267,7 +313,7 @@ ui.showRedisManager = false;
 				>
 					<button
 						class="btn btn-ghost btn-sm"
-						@click="emit('open-env-editor')"
+						@click="ui.showEnvEditor = true"
 					>
 						<svg
 							class="h-4 w-4"
@@ -282,6 +328,28 @@ ui.showRedisManager = false;
 					</button>
 				</div>
 
+				<div
+					class="tooltip tooltip-bottom"
+					data-tip="Remote File Explorer"
+					v-if="props.isRemoteConnection"
+				>
+					<button
+						class="btn btn-ghost btn-sm"
+						@click="ui.showRemoteFileExplorer = true"
+					>
+						<svg
+							class="h-4 w-4"
+							fill="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 576 512"
+						>
+							<path
+								d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32l0 96L0 384c0 35.3 28.7 64 64 64l192 0 0-64L64 384l0-224 192 0 0-64L64 96l0-64zM288 192c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-128c0-17.7-14.3-32-32-32l-98.7 0c-8.5 0-16.6-3.4-22.6-9.4L409.4 9.4c-6-6-14.1-9.4-22.6-9.4L320 0c-17.7 0-32 14.3-32 32l0 160zm0 288c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-128c0-17.7-14.3-32-32-32l-98.7 0c-8.5 0-16.6-3.4-22.6-9.4l-13.3-13.3c-6-6-14.1-9.4-22.6-9.4L320 288c-17.7 0-32 14.3-32 32l0 160z"
+							/>
+						</svg>
+					</button>
+				</div>
+
 				<div
 					class="tooltip tooltip-bottom"
 					data-tip="SQL query editor"
@@ -306,6 +374,7 @@ ui.showRedisManager = false;
 				<div
 					class="tooltip tooltip-bottom"
 					data-tip="Visualize database table relationships"
+					v-if="!props.isRemoteConnection"
 				>
 					<button
 						class="btn btn-ghost btn-sm"
@@ -327,10 +396,9 @@ ui.showRedisManager = false;
 				<div
 					class="tooltip tooltip-bottom"
 					data-tip="Show Redis Keys"
+					v-if="!props.isRemoteConnection && isRedisAvailable"
 				>
 					<button
-						:disabled="!isRedisAvailable"
-						:class="{ 'opacity-20': !isRedisAvailable }"
 						class="btn btn-ghost btn-sm"
 						@click="ui.showRedisManager = true"
 					>
@@ -350,6 +418,7 @@ ui.showRedisManager = false;
 				<div
 					class="tooltip tooltip-bottom"
 					data-tip="Run Project Commands"
+					v-if="!props.isRemoteConnection"
 				>
 					<button
 						class="btn btn-ghost btn-sm"
@@ -376,7 +445,7 @@ ui.showRedisManager = false;
 				>
 					<button
 						class="btn btn-ghost btn-sm"
-						@click="emit('open-settings')"
+						@click="ui.showSettings = true"
 					>
 						<svg
 							class="h-4 w-4"
@@ -414,4 +483,46 @@ ui.showRedisManager = false;
 		:show="ui.showLaravelCommands"
 		@close="ui.showLaravelCommands = false"
 	/>
+
+	<Settings
+		v-if="ui.showSettings"
+		@close="ui.showSettings = false"
+	/>
+
+	<DatabaseSwitcher
+		v-if="ui.showDatabaseSwitcher"
+		@close="ui.showDatabaseSwitcher = false"
+	/>
+
+	<LiveUpdates
+		v-if="ui.showLiveUpdates"
+		@close="ui.showLiveUpdates = false"
+	/>
+
+	<ProjectLogs
+		v-if="ui.showProjectLogs"
+		@close="ui.showProjectLogs = false"
+	/>
+
+	<Migrations
+		v-if="ui.showMigrations"
+		@close="handleMigrationsClose"
+		@migrations-updated="emit('migrations-updated')"
+	/>
+
+	<EnvEditor
+		v-if="ui.showEnvEditor"
+		@close="ui.showEnvEditor = false"
+	/>
+
+	<RemoteFileExplorer
+		v-if="
+			ui.showRemoteFileExplorer &&
+			props.isRemoteConnection &&
+			selectedProject
+		"
+		:show="ui.showRemoteFileExplorer"
+		:connection="selectedProject.sshConfig as SshConnection"
+		@close="ui.showRemoteFileExplorer = false"
+	/>
 </template>
diff --git a/src/components/Migrations.vue b/src/components/Migrations.vue
index aaa6499..526b324 100644
--- a/src/components/Migrations.vue
+++ b/src/components/Migrations.vue
@@ -4,6 +4,7 @@ import Modal from '@/components/Modal.vue';
 import PhpViewer from '@/components/PhpViewer.vue';
 import { useConnectionsStore } from '@/store/connections';
 import terminalService from '@/services/terminal';
+import { AppConnection } from '@/types/ssh-connection';
 
 const emit = defineEmits(['close', 'migrations-updated']);
 const connectionsStore = useConnectionsStore();
@@ -183,10 +184,17 @@ onMounted(async () => {
 	}
 
 	try {
+		const project = selectedProject.value;
+
+		const AppConnection = {
+			localDbConfig: toRaw(project.dbConfig),
+			remote: toRaw(project.sshConfig)
+		} as AppConnection;
+
 		const config = {
-			projectPath: selectedProject.value.projectPath,
-			usingSail: selectedProject.value.usingSail,
-			db_config: toRaw(selectedProject.value.db_config)
+			projectPath: project.projectPath,
+			usingSail: project.usingSail,
+			appConnection: AppConnection
 		};
 
 		const result = await window.ipcRenderer.invoke(
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 799d829..e95bb71 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -6,7 +6,8 @@
 	>
 		<div
 			class="modal-box bg-base-300 relative"
-			:class="width"
+			:class="[width, height]"
+			:style="customStyle"
 		>
 			<div class="mb-4 flex items-center justify-between">
 				<h3 class="text-lg font-bold">{{ title }}</h3>
@@ -32,7 +33,10 @@
 				</button>
 			</div>
 
-			<div class="modal-content">
+			<div
+				class="modal-content"
+				:class="{ 'overflow-hidden': preventScrollContent }"
+			>
 				<slot></slot>
 			</div>
 
@@ -122,6 +126,18 @@ const props = defineProps({
 		type: String,
 		default: 'max-w-4xl'
 	},
+	height: {
+		type: String,
+		default: ''
+	},
+	customStyle: {
+		type: Object,
+		default: () => ({})
+	},
+	preventScrollContent: {
+		type: Boolean,
+		default: false
+	},
 	zIndex: {
 		type: [Number, String],
 		default: 40
diff --git a/src/components/ProjectLogs.vue b/src/components/ProjectLogs.vue
index 370797f..8f54bec 100644
--- a/src/components/ProjectLogs.vue
+++ b/src/components/ProjectLogs.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, inject, onUnmounted } from 'vue';
+import { ref, onMounted, inject, onUnmounted, computed } from 'vue';
 import { useProjectLogsStore } from '@/store/projectLogs';
 import { useConnectionsStore } from '@/store/connections';
+import { ConnectionType } from '@/types/connection-types';
 import Modal from '@/components/Modal.vue';
 import { LogEntry } from '@/types/project';
+import { SshConnection } from '@/types/ssh-connection';
 
 const emit = defineEmits(['close']);
 const logsStore = useProjectLogsStore();
@@ -19,6 +21,11 @@ const logToDelete = ref<LogEntry | null>(null);
 const deleteAllConfirm = ref(false);
 const deleteFileConfirm = ref(false);
 
+const isSSHConnection = computed(() => {
+	const selectedProject = connectionsStore.getSelectedProject;
+	return selectedProject?.type === ConnectionType.SSH;
+});
+
 function handleClose() {
 	emit('close');
 }
@@ -54,6 +61,14 @@ function formatSize(bytes: number): string {
 
 async function openFileInEditor(path: string) {
 	try {
+		if (isSSHConnection.value) {
+			showAlert(
+				'File editing not available for SSH connections',
+				'warning'
+			);
+			return;
+		}
+
 		await window.ipcRenderer.openFile(path);
 	} catch (error: any) {
 		console.error('Error opening file:', error);
@@ -64,7 +79,7 @@ async function openFileInEditor(path: string) {
 async function refreshLogs() {
 	refreshing.value = true;
 	try {
-		await logsStore.refreshLogs();
+		await logsStore.refreshLogs(isSSHConnection.value);
 	} catch (error: any) {
 		showAlert(`Failed to refresh logs: ${error.message}`, 'error');
 	} finally {
@@ -73,6 +88,14 @@ async function refreshLogs() {
 }
 
 async function deleteLogEntry(entry: LogEntry) {
+	if (isSSHConnection.value) {
+		showAlert(
+			'Deleting log entries is not supported for SSH connections',
+			'warning'
+		);
+		return;
+	}
+
 	logToDelete.value = entry;
 	showDeleteConfirm.value = true;
 }
@@ -108,6 +131,14 @@ async function confirmDeleteLog() {
 
 async function confirmDeleteAllLogs() {
 	try {
+		if (isSSHConnection.value) {
+			showAlert(
+				'Clearing logs is not supported for SSH connections',
+				'warning'
+			);
+			return;
+		}
+
 		const result = await logsStore.clearAllLogs();
 
 		if (result && result.success) {
@@ -127,6 +158,14 @@ async function confirmDeleteAllLogs() {
 }
 
 async function deleteLogFile() {
+	if (isSSHConnection.value) {
+		showAlert(
+			'Deleting log files is not supported for SSH connections',
+			'warning'
+		);
+		return;
+	}
+
 	if (!logsStore.selectedLogFile) {
 		showAlert('No log file selected', 'error');
 		return;
@@ -181,9 +220,18 @@ function closeLogDetail() {
 }
 
 onMounted(async () => {
-	if (connectionsStore.getSelectedProject?.projectPath) {
+	const selectedProject = connectionsStore.getSelectedProject;
+	if (selectedProject) {
 		try {
-			await logsStore.loadLogFiles();
+			if (isSSHConnection.value) {
+				await logsStore.loadRemoteLogFiles(
+					selectedProject.sshConfig as SshConnection
+				);
+			} else if (selectedProject.projectPath) {
+				await logsStore.loadLogFiles();
+			} else {
+				showAlert('No valid project path found', 'error');
+			}
 		} catch (error: any) {
 			showAlert(`Failed to load logs: ${error.message}`, 'error');
 		}
@@ -208,7 +256,17 @@ onUnmounted(() => {
 		:show-cancel-button="false"
 		@close="handleClose"
 	>
-		<div class="flex flex-col">
+		<div
+			v-if="logsStore.isLoading"
+			class="flex h-[400px] w-full items-center justify-center"
+		>
+			<div class="loading loading-spinner loading-lg text-primary"></div>
+		</div>
+
+		<div
+			v-else
+			class="flex flex-col"
+		>
 			<div class="flex justify-end px-4 py-2">
 				<button
 					class="btn btn-sm mr-2"
@@ -238,7 +296,7 @@ onUnmounted(() => {
 				</button>
 
 				<button
-					v-if="logsStore.selectedLogFile"
+					v-if="logsStore.selectedLogFile && !isSSHConnection"
 					class="btn btn-sm mr-2"
 					@click="openFileInEditor(logsStore.selectedLogFile.path)"
 				>
@@ -260,7 +318,7 @@ onUnmounted(() => {
 				</button>
 
 				<button
-					v-if="logsStore.selectedLogFile"
+					v-if="logsStore.selectedLogFile && !isSSHConnection"
 					class="btn btn-sm btn-warning mr-2"
 					@click="deleteLogFile"
 					title="Delete Current Log File"
@@ -283,10 +341,10 @@ onUnmounted(() => {
 				</button>
 
 				<button
+					v-if="logsStore.logEntries.length > 0 && !isSSHConnection"
 					class="btn btn-sm btn-error mr-2"
 					@click="deleteAllConfirm = true"
 					title="Clear All Logs"
-					v-if="logsStore.logEntries.length > 0"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -316,7 +374,7 @@ onUnmounted(() => {
 					<select
 						v-model="logsStore.selectedLogFile"
 						class="select select-bordered w-full"
-						@change="logsStore.filterLogs(false)"
+						@change="logsStore.filterLogs(isSSHConnection)"
 					>
 						<option
 							v-if="logsStore.logFiles.length === 0"
@@ -343,7 +401,7 @@ onUnmounted(() => {
 					<select
 						v-model="logsStore.selectedLogType"
 						class="select select-bordered w-full"
-						@change="logsStore.filterLogs(false)"
+						@change="logsStore.filterLogs(isSSHConnection)"
 					>
 						<option
 							v-for="type in logsStore.availableLogTypes"
@@ -373,16 +431,7 @@ onUnmounted(() => {
 
 			<div class="overflow-y-hidden">
 				<div
-					v-if="logsStore.isLoading"
-					class="flex h-full w-full items-center justify-center"
-				>
-					<div
-						class="loading loading-spinner loading-lg text-primary"
-					></div>
-				</div>
-
-				<div
-					v-else-if="logsStore.error"
+					v-if="logsStore.error"
 					class="flex h-full w-full items-center justify-center"
 				>
 					<div class="text-center">
@@ -492,6 +541,7 @@ onUnmounted(() => {
 												</svg>
 											</button>
 											<button
+												v-if="!isSSHConnection"
 												class="btn btn-xs btn-ghost"
 												@click="deleteLogEntry(entry)"
 												title="Delete"
@@ -566,6 +616,7 @@ onUnmounted(() => {
 		</div>
 	</Modal>
 
+	<!-- These modals don't need to be hidden during loading since they're controlled by their own conditions -->
 	<Modal
 		v-if="showLogDetail && selectedLogEntry"
 		title="Log Entry Details"
diff --git a/src/components/RemoteFileEditor.vue b/src/components/RemoteFileEditor.vue
new file mode 100644
index 0000000..2f7d180
--- /dev/null
+++ b/src/components/RemoteFileEditor.vue
@@ -0,0 +1,439 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import Modal from '@/components/Modal.vue';
+import { SshConnection } from '@/types/ssh-connection';
+import {
+	readRemoteFile,
+	writeRemoteFile
+} from '@/services/remote-file-service';
+import path from 'path-browserify';
+import * as monaco from 'monaco-editor';
+
+const props = defineProps({
+	show: {
+		type: Boolean,
+		default: false
+	},
+	connection: {
+		type: Object as () => SshConnection,
+		required: true
+	},
+	filePath: {
+		type: String,
+		required: true
+	},
+	fileName: {
+		type: String,
+		required: true
+	}
+});
+
+const emit = defineEmits(['close', 'saved']);
+
+const isLoading = ref(false);
+const isSaving = ref(false);
+const error = ref('');
+const fileContent = ref('');
+const originalContent = ref('');
+const editorContainer = ref<HTMLDivElement | null>(null);
+
+let editor: monaco.editor.IStandaloneCodeEditor | null = null;
+let isUpdating = false;
+
+const fullFilePath = computed(() => {
+	return path.join(props.filePath, props.fileName);
+});
+
+const hasChanges = computed(() => {
+	return fileContent.value !== originalContent.value;
+});
+
+const fileExtension = computed(() => {
+	return props.fileName.split('.').pop()?.toLowerCase() || '';
+});
+
+const editorLanguage = computed(() => {
+	const extensionMap: Record<string, string> = {
+		php: 'php',
+		js: 'javascript',
+		ts: 'typescript',
+		vue: 'html',
+		html: 'html',
+		css: 'css',
+		scss: 'scss',
+		json: 'json',
+		md: 'markdown',
+		yaml: 'yaml',
+		yml: 'yaml',
+		env: 'dotenv',
+		txt: 'plaintext',
+		gitignore: 'plaintext',
+		htaccess: 'plaintext'
+	};
+
+	return extensionMap[fileExtension.value] || 'plaintext';
+});
+
+function initMonacoLanguages() {
+	if (
+		editorLanguage.value === 'dotenv' &&
+		!monaco.languages.getLanguages().some((lang) => lang.id === 'dotenv')
+	) {
+		monaco.languages.register({ id: 'dotenv' });
+		monaco.languages.setMonarchTokensProvider('dotenv', {
+			tokenizer: {
+				root: [
+					[/#.*$/, 'comment'],
+					[/([A-Za-z0-9_]+)(=)/, ['key', 'operator']],
+					[/"[^"]*"/, 'string'],
+					[/'[^']*'/, 'string']
+				]
+			}
+		});
+	}
+}
+
+function forceEditorLayout() {
+	if (editor) {
+		console.log('Forcing editor layout');
+		setTimeout(() => {
+			if (editor && editorContainer.value) {
+				const containerHeight = editorContainer.value.clientHeight;
+
+				if (containerHeight > 0) {
+					editor.layout({
+						width: editorContainer.value.clientWidth,
+						height: Math.max(containerHeight, 600)
+					});
+					editor.focus();
+				} else {
+					setTimeout(forceEditorLayout, 100);
+				}
+			}
+		}, 100);
+	}
+}
+
+function createEditor() {
+	if (!editorContainer.value) return;
+	if (editor) return;
+
+	try {
+		initMonacoLanguages();
+
+		editor = monaco.editor.create(editorContainer.value, {
+			value: fileContent.value,
+			language: editorLanguage.value,
+			theme: 'vs-dark',
+			minimap: { enabled: false },
+			scrollBeyondLastLine: false,
+			automaticLayout: true,
+			wordWrap: 'on',
+			lineNumbers: 'on',
+			tabSize: 2,
+			fontSize: 12,
+			scrollbar: {
+				verticalScrollbarSize: 12,
+				horizontalScrollbarSize: 12,
+				alwaysConsumeMouseWheel: false,
+				useShadows: true
+			},
+			overviewRulerLanes: 0,
+			folding: true,
+			glyphMargin: false,
+			lineDecorationsWidth: 0,
+			lineNumbersMinChars: 3
+		});
+
+		let timeout: ReturnType<typeof setTimeout> | null = null;
+		editor.onDidChangeModelContent(() => {
+			if (isUpdating) return;
+
+			if (timeout) clearTimeout(timeout);
+			timeout = setTimeout(() => {
+				if (editor) {
+					fileContent.value = editor.getValue();
+				}
+			}, 50);
+		});
+
+		setTimeout(forceEditorLayout, 50);
+
+		window.addEventListener('resize', forceEditorLayout);
+	} catch (err) {
+		console.error('Error creating editor:', err);
+		error.value = 'Failed to initialize editor';
+	}
+}
+
+function disposeEditor() {
+	if (editor) {
+		editor.dispose();
+		editor = null;
+	}
+}
+
+function handleResize() {
+	if (editor) {
+		editor.layout();
+	}
+}
+
+async function loadFile() {
+	if (!props.connection || !fullFilePath.value) return;
+
+	isLoading.value = true;
+	error.value = '';
+
+	try {
+		const content = await readRemoteFile(
+			props.connection,
+			fullFilePath.value
+		);
+		fileContent.value = content;
+		originalContent.value = content;
+
+		setTimeout(() => {
+			createEditor();
+		}, 50);
+	} catch (err) {
+		console.error('Error reading remote file:', err);
+		error.value = (err as Error).message || 'Failed to read file';
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+async function saveFile() {
+	if (
+		!props.connection ||
+		!fullFilePath.value ||
+		!hasChanges.value ||
+		isSaving.value
+	)
+		return;
+
+	isSaving.value = true;
+	error.value = '';
+
+	try {
+		await writeRemoteFile(
+			props.connection,
+			fullFilePath.value,
+			fileContent.value
+		);
+		originalContent.value = fileContent.value;
+		emit('saved', {
+			filePath: fullFilePath.value,
+			content: fileContent.value
+		});
+	} catch (err) {
+		console.error('Error saving remote file:', err);
+		error.value = (err as Error).message || 'Failed to save file';
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+function handleClose() {
+	if (hasChanges.value) {
+		if (
+			confirm('You have unsaved changes. Are you sure you want to close?')
+		) {
+			disposeEditor();
+			emit('close');
+		}
+	} else {
+		disposeEditor();
+		emit('close');
+	}
+}
+
+watch(
+	() => fileContent.value,
+	(newValue) => {
+		if (editor && editor.getValue() !== newValue) {
+			isUpdating = true;
+			editor.setValue(newValue);
+			isUpdating = false;
+		}
+	}
+);
+
+watch(
+	() => props.show,
+	(newValue) => {
+		if (newValue && !editor) {
+			loadFile();
+		}
+	}
+);
+
+onMounted(() => {
+	if (props.show) {
+		loadFile();
+	}
+	window.addEventListener('resize', handleResize);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', handleResize);
+	window.removeEventListener('resize', forceEditorLayout);
+	disposeEditor();
+});
+</script>
+
+<template>
+	<Modal
+		:show="show"
+		:title="`Edit File: ${fileName}`"
+		:show-footer="true"
+		:prevent-scroll-content="true"
+		@close="handleClose"
+		width="max-w-[95vw]"
+		z-index="99999"
+	>
+		<div class="flex flex-col overflow-auto">
+			<div
+				class="mb-2 flex items-center justify-between bg-base-200 px-3 py-2 rounded-md"
+			>
+				<div class="flex items-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="h-4 w-4 mr-2"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+						/>
+					</svg>
+					<span class="font-semibold text-sm">{{
+						fullFilePath
+					}}</span>
+					<span class="badge badge-sm ml-2">Remote SSH</span>
+				</div>
+				<div>
+					<span
+						v-if="hasChanges"
+						class="text-warning text-xs mr-2"
+						>Unsaved changes</span
+					>
+					<button
+						class="btn btn-xs"
+						@click="loadFile"
+						:disabled="isLoading"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="h-3 w-3 mr-1"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+							/>
+						</svg>
+						Refresh
+					</button>
+				</div>
+			</div>
+
+			<div
+				v-if="isLoading"
+				class="flex-1 flex items-center justify-center"
+			>
+				<span class="loading loading-spinner loading-lg"></span>
+			</div>
+
+			<div
+				v-else-if="error"
+				class="flex-1 flex items-center justify-center flex-col"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="text-error mx-auto mb-4 h-12 w-12"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+					/>
+				</svg>
+				<p class="text-error mb-4">{{ error }}</p>
+				<button
+					class="btn btn-sm"
+					@click="loadFile"
+				>
+					Retry
+				</button>
+			</div>
+
+			<div
+				v-else
+				ref="editorContainer"
+				class="editor-container"
+			></div>
+		</div>
+
+		<template #footer>
+			<button
+				class="btn btn-ghost"
+				@click="handleClose"
+			>
+				Cancel
+			</button>
+			<button
+				class="btn btn-primary"
+				:disabled="isLoading || !hasChanges || isSaving"
+				@click="saveFile"
+			>
+				<span
+					v-if="isSaving"
+					class="loading loading-spinner loading-xs mr-2"
+				></span>
+				<svg
+					v-else
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="h-4 w-4 mr-1"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9"
+					/>
+				</svg>
+				Save Changes
+			</button>
+		</template>
+	</Modal>
+</template>
+
+<style scoped>
+:deep(.monaco-editor) {
+	border-radius: 0.25rem;
+	overflow: hidden;
+}
+
+.editor-container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+</style>
diff --git a/src/components/RemoteFileExplorer.vue b/src/components/RemoteFileExplorer.vue
new file mode 100644
index 0000000..aa89c7c
--- /dev/null
+++ b/src/components/RemoteFileExplorer.vue
@@ -0,0 +1,531 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, toRaw } from 'vue';
+import Modal from '@/components/Modal.vue';
+import RemoteFileEditor from '@/components/RemoteFileEditor.vue';
+import { SshConnection } from '@/types/ssh-connection';
+import path from 'path-browserify';
+
+const props = defineProps({
+	show: {
+		type: Boolean,
+		default: false
+	},
+	connection: {
+		type: Object as () => SshConnection,
+		required: true
+	}
+});
+
+const emit = defineEmits(['close']);
+
+const isLoading = ref(false);
+const error = ref('');
+const items = ref<any[]>([]);
+const currentPath = ref('');
+const projectRoot = ref('');
+const selectedFile = ref<{ name: string; content: string } | null>(null);
+const editingFile = ref<{ name: string; path: string } | null>(null);
+
+const relativePath = computed(() => {
+	if (
+		!currentPath.value ||
+		!projectRoot.value ||
+		currentPath.value === projectRoot.value
+	) {
+		return '';
+	}
+	return currentPath.value.substring(projectRoot.value.length + 1);
+});
+
+const pathParts = computed(() => {
+	if (!relativePath.value) return [];
+	return relativePath.value.split('/');
+});
+
+const sortedItems = computed(() => {
+	return [...items.value].sort((a, b) => {
+		if (a.type === 'directory' && b.type !== 'directory') return -1;
+		if (a.type !== 'directory' && b.type === 'directory') return 1;
+
+		return a.name.localeCompare(b.name);
+	});
+});
+
+async function loadFiles(dirPath: string) {
+	if (!props.connection) return;
+
+	isLoading.value = true;
+	error.value = '';
+	selectedFile.value = null;
+
+	try {
+		const result = await window.ipcRenderer.ssh.listFiles(
+			toRaw(props.connection),
+			dirPath
+		);
+
+		if (result.success) {
+			items.value = result.files;
+			currentPath.value = dirPath;
+		} else {
+			error.value = result.message || 'Failed to load files';
+			items.value = [];
+		}
+	} catch (err) {
+		console.error('Error listing remote files:', err);
+		error.value = (err as Error).message || 'Failed to load files';
+		items.value = [];
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+function navigateToPath(dirPath: string) {
+	loadFiles(dirPath);
+}
+
+function navigateToPathPart(index: number) {
+	const parts = [...pathParts.value];
+	const targetPath = parts.slice(0, index + 1).join('/');
+	navigateToPath(path.join(projectRoot.value, targetPath));
+}
+
+function navigateUp() {
+	if (currentPath.value === projectRoot.value) return;
+
+	const parentPath = path.dirname(currentPath.value);
+
+	if (parentPath.startsWith(projectRoot.value)) {
+		navigateToPath(parentPath);
+	} else {
+		navigateToPath(projectRoot.value);
+	}
+}
+
+async function handleItemClick(item: any) {
+	if (item.type === 'file') {
+		selectedFile.value = { name: item.name, content: '' };
+	}
+}
+
+function openFileEditor(item: any) {
+	if (item.type === 'file') {
+		editingFile.value = {
+			name: item.name,
+			path: currentPath.value
+		};
+	}
+}
+
+function handleFileSaved() {
+	loadFiles(currentPath.value);
+}
+
+async function handleItemDoubleClick(item: any) {
+	if (item.type === 'directory') {
+		const newPath = path.join(currentPath.value, item.name);
+		navigateToPath(newPath);
+	} else if (item.type === 'file') {
+		await loadFileContent(item);
+	}
+}
+
+async function loadFileContent(item: any) {
+	if (!props.connection) return;
+
+	isLoading.value = true;
+	error.value = '';
+
+	try {
+		const filePath = path.join(currentPath.value, item.name);
+		const result = await window.ipcRenderer.ssh.readFile(
+			toRaw(props.connection),
+			filePath
+		);
+
+		if (result.success) {
+			selectedFile.value = {
+				name: item.name,
+				content: result.content
+			};
+		} else {
+			error.value = result.message || 'Failed to read file';
+		}
+	} catch (err) {
+		console.error('Error reading remote file:', err);
+		error.value = (err as Error).message || 'Failed to read file';
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+function formatFileSize(bytes: number): string {
+	if (bytes === 0) return '0 Bytes';
+	if (bytes === undefined || bytes === null) return '';
+
+	const k = 1024;
+	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function formatDate(timestamp: string | number): string {
+	if (!timestamp) return '';
+
+	const date = new Date(timestamp);
+
+	return new Intl.DateTimeFormat('default', {
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit',
+		hour: '2-digit',
+		minute: '2-digit',
+		hour12: false
+	}).format(date);
+}
+
+function getFileType(filename: string): string {
+	const extension = filename.split('.').pop()?.toLowerCase() || '';
+
+	const typeMap: Record<string, string> = {
+		php: 'PHP',
+		js: 'JavaScript',
+		ts: 'TypeScript',
+		vue: 'Vue',
+		json: 'JSON',
+		html: 'HTML',
+		css: 'CSS',
+		scss: 'SCSS',
+		md: 'Markdown',
+		yaml: 'YAML',
+		yml: 'YAML',
+		txt: 'Text',
+		env: 'Environment',
+		gitignore: 'Git Config',
+		htaccess: 'Apache Config'
+	};
+
+	return typeMap[extension] || extension.toUpperCase() || 'File';
+}
+
+watch(
+	() => props.show,
+	(newValue) => {
+		if (newValue && props.connection) {
+			projectRoot.value = props.connection.remotePath || '/';
+			navigateToPath(projectRoot.value);
+		}
+	}
+);
+
+onMounted(() => {
+	if (props.show && props.connection) {
+		projectRoot.value = props.connection.remotePath || '/';
+		navigateToPath(projectRoot.value);
+	}
+});
+</script>
+
+<template>
+	<Modal
+		width="max-w-[95vw]"
+		height="max-h-[95vh]"
+		:show="show"
+		:title="'Remote File Explorer'"
+		:show-footer="false"
+		:prevent-scroll-content="true"
+		:allow-close-on-backdrop="false"
+		@close="$emit('close')"
+		class="file-explorer-modal"
+	>
+		<div class="flex flex-col h-full overflow-auto">
+			<div
+				class="mb-2 flex items-center overflow-x-auto py-1 px-2 bg-base-200 rounded-md sticky top-0 z-10"
+			>
+				<div class="flex items-center text-xs font-medium">
+					<button
+						class="btn btn-ghost btn-xs flex items-center h-6 min-h-6"
+						@click="navigateToPath(projectRoot)"
+						:disabled="currentPath === projectRoot"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="h-3 w-3 mr-1"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+							/>
+						</svg>
+						root
+					</button>
+
+					<template v-if="relativePath">
+						<span class="mx-1 text-xs text-gray-500">/</span>
+						<template
+							v-for="(part, index) in pathParts"
+							:key="index"
+						>
+							<button
+								class="btn btn-ghost btn-xs h-6 min-h-6"
+								@click="navigateToPathPart(index)"
+							>
+								{{ part }}
+							</button>
+							<span
+								v-if="index < pathParts.length - 1"
+								class="mx-1 text-xs text-gray-500"
+								>/</span
+							>
+						</template>
+					</template>
+				</div>
+			</div>
+
+			<div
+				v-if="isLoading"
+				class="flex-1 flex items-center justify-center"
+			>
+				<span class="loading loading-spinner loading-lg"></span>
+			</div>
+
+			<div
+				v-else
+				class="flex-1 overflow-hidden rounded-lg shadow-inner bg-base-100"
+			>
+				<div class="overflow-y-auto max-h-[400px]">
+					<table
+						class="table table-zebra table-compact w-full text-xs divide-y divide-base-200"
+					>
+						<thead class="text-xs sticky top-0 bg-base-200 z-10">
+							<tr>
+								<th
+									class="w-[50%] py-1.5 px-2 text-left font-medium"
+								>
+									Name
+								</th>
+								<th
+									class="w-[15%] py-1.5 px-2 text-left font-medium"
+								>
+									Size
+								</th>
+								<th
+									class="w-[15%] py-1.5 px-2 text-left font-medium"
+								>
+									Type
+								</th>
+								<th
+									class="w-[15%] py-1.5 px-2 text-left font-medium"
+								>
+									Modified
+								</th>
+								<th
+									class="w-[5%] py-1.5 px-2 text-center font-medium"
+								>
+									Actions
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr
+								v-if="currentPath !== projectRoot"
+								class="hover cursor-pointer"
+								@click="navigateUp()"
+							>
+								<td class="flex items-center py-1 px-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="h-4 w-4 mr-2"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
+										/>
+									</svg>
+									<span class="text-xs">..</span>
+								</td>
+								<td class="py-1 px-2"></td>
+								<td class="py-1 px-2 text-xs">Directory</td>
+								<td class="py-1 px-2"></td>
+								<td class="py-1 px-2"></td>
+							</tr>
+
+							<template
+								v-for="item in sortedItems"
+								:key="item.name"
+							>
+								<tr
+									class="hover cursor-pointer"
+									@click="handleItemClick(item)"
+									@dblclick="handleItemDoubleClick(item)"
+								>
+									<td class="flex items-center py-1 px-2">
+										<svg
+											v-if="item.type === 'directory'"
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											class="h-4 w-4 mr-2 text-primary"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+											/>
+										</svg>
+										<svg
+											v-else
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											class="h-4 w-4 mr-2"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+											/>
+										</svg>
+										<span class="text-xs truncate">{{
+											item.name
+										}}</span>
+									</td>
+									<td class="py-1 px-2 text-xs">
+										{{ formatFileSize(item.size) }}
+									</td>
+									<td class="py-1 px-2 text-xs">
+										<span
+											:class="{
+												'text-primary font-medium':
+													item.type === 'directory'
+											}"
+										>
+											{{
+												item.type === 'directory'
+													? 'Directory'
+													: getFileType(item.name)
+											}}
+										</span>
+									</td>
+									<td class="py-1 px-2 text-xs">
+										{{ formatDate(item.modTime) }}
+									</td>
+									<td class="py-1 px-2 w-10 text-center">
+										<button
+											v-if="item.type === 'file'"
+											class="btn btn-ghost btn-xs p-0 h-5 min-h-5"
+											@click.stop="openFileEditor(item)"
+											title="Edit file"
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												class="h-3.5 w-3.5"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+												/>
+											</svg>
+										</button>
+									</td>
+								</tr>
+							</template>
+						</tbody>
+					</table>
+				</div>
+			</div>
+
+			<div
+				v-if="error"
+				class="mt-2 text-error text-xs"
+			>
+				{{ error }}
+			</div>
+
+			<div
+				v-if="selectedFile && selectedFile.content"
+				class="mt-2 border-t pt-2 bg-base-200 rounded-b-lg"
+			>
+				<div class="flex justify-between items-center mb-1 px-2">
+					<div class="flex items-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="h-4 w-4 mr-2"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+							/>
+						</svg>
+						<h3 class="text-xs font-semibold">
+							{{ selectedFile.name }}
+						</h3>
+					</div>
+					<button
+						class="btn btn-ghost btn-xs h-6 min-h-6 text-xs"
+						@click="selectedFile = null"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="h-3 w-3 mr-1"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+						Close
+					</button>
+				</div>
+				<div
+					class="border border-base-300 rounded-lg p-2 mx-2 mb-2 bg-base-100 overflow-auto shadow-inner"
+					style="max-height: 20vh"
+				>
+					<pre
+						class="text-xs font-mono leading-relaxed"
+					><code>{{ selectedFile.content }}</code></pre>
+				</div>
+			</div>
+		</div>
+	</Modal>
+
+	<RemoteFileEditor
+		v-if="editingFile"
+		:show="!!editingFile"
+		:connection="toRaw(connection)"
+		:file-path="currentPath"
+		:file-name="editingFile?.name || ''"
+		@close="editingFile = null"
+		@saved="handleFileSaved"
+	/>
+</template>
diff --git a/src/components/SQLEditor.vue b/src/components/SQLEditor.vue
index c9b60fa..7fcad51 100644
--- a/src/components/SQLEditor.vue
+++ b/src/components/SQLEditor.vue
@@ -5,6 +5,10 @@ const props = defineProps({
 	modelValue: {
 		type: String,
 		default: '-- Write your SQL query here'
+	},
+	isRemoteConnection: {
+		type: Boolean,
+		default: false
 	}
 });
 
@@ -19,8 +23,7 @@ const {
 	layout,
 	getSelectedText,
 	saveAsScratch,
-	showProcessingOverlay,
-	explainResult
+	showProcessingOverlay
 } = useSQLEditor(props, emit);
 
 defineExpose({
diff --git a/src/components/SQLExplainModal.vue b/src/components/SQLExplainModal.vue
index 9528045..438f664 100644
--- a/src/components/SQLExplainModal.vue
+++ b/src/components/SQLExplainModal.vue
@@ -97,12 +97,6 @@ watch(
 	}
 );
 
-const formatExecutionStepValue = (value: any): string => {
-	if (value === null) return 'NULL';
-	if (typeof value === 'object') return JSON.stringify(value);
-	return String(value);
-};
-
 const formatAIAnalysis = (text: string): string => {
 	if (!text) return '';
 
@@ -167,13 +161,10 @@ const formatAIAnalysis = (text: string): string => {
 			continue;
 		}
 
-		// For empty lines, only add paragraph break if we have multiple consecutive empty lines
-		// or it's after a header/list item
 		if (line.trim() === '') {
 			const prevLine = i > 0 ? lines[i - 1].trim() : '';
 			const nextLine = i < lines.length - 1 ? lines[i + 1].trim() : '';
 
-			// Only add paragraph breaks for double empty lines or after headers/lists
 			const isPrevSpecial =
 				prevLine.startsWith('#') || prevLine.match(/^\d+\.\s/);
 			const isDoubleBreak = nextLine === '' || prevLine === '';
@@ -209,7 +200,6 @@ const formatAIAnalysis = (text: string): string => {
 			!formattedLines[formattedLines.length - 1].startsWith('<div') &&
 			!formattedLines[formattedLines.length - 1].startsWith('<pre')
 		) {
-			// Append to existing paragraph instead of creating new one
 			formattedLines[formattedLines.length - 1] += ' ' + formattedLine;
 		} else {
 			formattedLines.push(`<p class="mb-2 text-sm">${formattedLine}`);
@@ -286,7 +276,7 @@ const isProblematicValue = (key: any, value: any): boolean => {
 		:show-action-button="false"
 		:show-footer="false"
 	>
-		<div class="space-y-6">
+		<div class="space-y-6 max-h-[80vh]">
 			<div
 				class="bg-base-100 border-base-300 rounded-md border p-4 shadow-sm"
 			>
diff --git a/src/components/SQLExportDataModal.vue b/src/components/SQLExportDataModal.vue
new file mode 100644
index 0000000..f3ba660
--- /dev/null
+++ b/src/components/SQLExportDataModal.vue
@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useSqlResultsStore } from '@/store/sqlResults';
+import * as ExcelJS from 'exceljs';
+
+const props = defineProps({
+	show: {
+		type: Boolean,
+		required: true
+	}
+});
+
+const emit = defineEmits(['close']);
+
+const sqlResultsStore = useSqlResultsStore();
+
+const isExporting = ref(false);
+const exportFormat = ref('csv');
+const includeHeaders = ref(true);
+
+const totalRecords = computed(() => sqlResultsStore.results.length);
+
+function downloadFile(
+	content: string,
+	fileName: string,
+	mimeType: string
+): void {
+	const blob = new Blob([content], { type: mimeType });
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement('a');
+	a.href = url;
+	a.download = fileName;
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+	URL.revokeObjectURL(url);
+}
+
+async function exportData(): Promise<void> {
+	isExporting.value = true;
+
+	try {
+		let data = sqlResultsStore.results;
+
+		let content = '';
+		let fileName = `sql_results_export_${new Date().toISOString().split('T')[0]}`;
+		let mimeType = 'text/plain';
+
+		switch (exportFormat.value) {
+			case 'csv':
+				content = generateCSV(data);
+				fileName += '.csv';
+				mimeType = 'text/csv';
+				break;
+
+			case 'json':
+				content = JSON.stringify(data, null, 2);
+				fileName += '.json';
+				mimeType = 'application/json';
+				break;
+
+			case 'sql':
+				content = generateSQL(data);
+				fileName += '.sql';
+				mimeType = 'application/sql';
+				break;
+
+			case 'excel':
+				const buffer = await generateExcel(data);
+				downloadExcelFile(buffer, `${fileName}.xlsx`);
+				emit('close');
+				isExporting.value = false;
+				return;
+		}
+
+		downloadFile(content, fileName, mimeType);
+		emit('close');
+	} catch (error) {
+		console.error('Error exporting data:', error);
+	} finally {
+		isExporting.value = false;
+	}
+}
+
+function generateCSV(data: Record<string, any>[]): string {
+	if (!data || data.length === 0) return '';
+
+	const columns = sqlResultsStore.columns.map((column) => column.field);
+	let csv = '';
+
+	if (includeHeaders.value) {
+		csv += columns.join(',') + '\n';
+	}
+
+	data.forEach((row) => {
+		const values = columns.map((column) => {
+			const value = row[column];
+			if (value === null || value === undefined) return '';
+			if (typeof value === 'string') {
+				let escaped = value.replace(/"/g, '""');
+				if (
+					escaped.includes(',') ||
+					escaped.includes('"') ||
+					escaped.includes('\n')
+				) {
+					escaped = `"${escaped}"`;
+				}
+				return escaped;
+			}
+			return String(value);
+		});
+		csv += values.join(',') + '\n';
+	});
+
+	return csv;
+}
+
+function generateSQL(data: Record<string, any>[]): string {
+	if (!data || data.length === 0) return '';
+
+	const tableName = 'query_results';
+	const columns = sqlResultsStore.columns.map((column) => column.field);
+	let sql = '';
+
+	data.forEach((row) => {
+		const values = columns.map((column) => {
+			const value = row[column];
+			if (value === null || value === undefined) return 'NULL';
+			if (typeof value === 'string')
+				return `'${value.replace(/'/g, "''")}'`;
+			if (typeof value === 'boolean') return value ? '1' : '0';
+			return String(value);
+		});
+
+		sql += `INSERT INTO \`${tableName}\` (${columns.map((c) => `\`${c}\``).join(', ')}) VALUES (${values.join(', ')});\n`;
+	});
+
+	return sql;
+}
+
+async function generateExcel(
+	data: Record<string, any>[]
+): Promise<ArrayBuffer> {
+	if (!data || data.length === 0) return new ArrayBuffer(0);
+
+	const workbook = new ExcelJS.Workbook();
+	workbook.creator = 'LaraBase';
+	workbook.lastModifiedBy = 'LaraBase';
+	workbook.created = new Date();
+	workbook.modified = new Date();
+
+	const worksheet = workbook.addWorksheet('SQL Results');
+	const columns = sqlResultsStore.columns.map((column) => column.field);
+
+	if (includeHeaders.value) {
+		worksheet.addRow(columns);
+
+		const headerRow = worksheet.getRow(1);
+		headerRow.font = { bold: true };
+		headerRow.eachCell((cell) => {
+			cell.fill = {
+				type: 'pattern',
+				pattern: 'solid',
+				fgColor: { argb: 'FFE0E0E0' }
+			};
+			cell.border = {
+				top: { style: 'thin' },
+				left: { style: 'thin' },
+				bottom: { style: 'thin' },
+				right: { style: 'thin' }
+			};
+		});
+	}
+
+	data.forEach((record) => {
+		const rowValues = columns.map((column) => {
+			const value = record[column];
+			return value === null || value === undefined ? '' : String(value);
+		});
+		worksheet.addRow(rowValues);
+	});
+
+	for (let i = 1; i <= columns.length; i++) {
+		let maxLength = 0;
+		worksheet.getColumn(i).eachCell({ includeEmpty: true }, (cell) => {
+			const columnLength = cell.value ? cell.value.toString().length : 10;
+			maxLength = Math.max(maxLength, columnLength);
+		});
+		worksheet.getColumn(i).width = Math.min(maxLength + 2, 50);
+	}
+
+	return workbook.xlsx.writeBuffer();
+}
+
+function downloadExcelFile(buffer: ArrayBuffer, fileName: string): void {
+	if (!buffer || buffer.byteLength === 0) return;
+
+	const blob = new Blob([buffer], {
+		type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+	});
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement('a');
+	a.href = url;
+	a.download = fileName;
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+	URL.revokeObjectURL(url);
+}
+</script>
+
+<template>
+	<div
+		class="modal z-50"
+		:class="{ 'modal-open': props.show }"
+	>
+		<div class="modal-box bg-base-300 relative max-w-lg">
+			<div
+				v-if="isExporting"
+				class="bg-base-100 bg-opacity-80 absolute inset-0 z-10 flex flex-col items-center justify-center"
+			>
+				<svg
+					class="text-primary mb-4 h-10 w-10 animate-spin"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<circle
+						class="opacity-25"
+						cx="12"
+						cy="12"
+						r="10"
+						stroke="currentColor"
+						stroke-width="4"
+					></circle>
+					<path
+						class="opacity-75"
+						fill="currentColor"
+						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+					></path>
+				</svg>
+				<p class="text-primary font-semibold">Exporting data...</p>
+			</div>
+
+			<h3
+				class="mb-4 flex items-center justify-between text-lg font-bold"
+			>
+				Export SQL Results
+				<button
+					class="btn btn-sm btn-circle"
+					@click="emit('close')"
+					:disabled="isExporting"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</h3>
+
+			<div class="mb-4">
+				<fieldset class="fieldset">
+					<label class="label">
+						<span class="label-text font-medium"
+							>Export Format</span
+						>
+					</label>
+					<select
+						v-model="exportFormat"
+						class="select select-bordered w-full"
+						:disabled="isExporting"
+					>
+						<option value="csv">
+							CSV (Comma Separated Values)
+						</option>
+						<option value="json">
+							JSON (JavaScript Object Notation)
+						</option>
+						<option value="sql">SQL (INSERT Statements)</option>
+						<option value="excel">Excel (.xlsx)</option>
+					</select>
+				</fieldset>
+			</div>
+
+			<div class="mb-4">
+				<fieldset class="fieldset">
+					<label class="label cursor-pointer justify-start">
+						<input
+							v-model="includeHeaders"
+							type="checkbox"
+							class="checkbox checkbox-primary checkbox-sm"
+							:disabled="exportFormat === 'sql' || isExporting"
+						/>
+						<span class="label-text ml-2">Include headers</span>
+					</label>
+				</fieldset>
+			</div>
+
+			<div class="bg-base-200 mb-4 rounded-md p-3">
+				<p class="text-sm">
+					<span class="font-semibold">Data to export:</span>
+					SQL Query Results ({{ totalRecords }} records)
+				</p>
+			</div>
+
+			<div class="modal-action">
+				<button
+					class="btn btn-ghost"
+					@click="emit('close')"
+					:disabled="isExporting"
+				>
+					Cancel
+				</button>
+				<button
+					class="btn btn-primary"
+					@click="exportData"
+					:disabled="isExporting"
+				>
+					Export
+				</button>
+			</div>
+		</div>
+		<div
+			class="modal-backdrop"
+			@click="emit('close')"
+		></div>
+	</div>
+</template>
diff --git a/src/components/SQLPaginator.vue b/src/components/SQLPaginator.vue
index 307c50d..517a435 100644
--- a/src/components/SQLPaginator.vue
+++ b/src/components/SQLPaginator.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+import SQLExportDataModal from '@/components/SQLExportDataModal.vue';
 
 const props = defineProps<{
 	totalRecords: number;
@@ -11,6 +12,7 @@ const props = defineProps<{
 const emit = defineEmits(['update:currentPage', 'update:rowsPerPage']);
 
 const pageInput = ref(props.currentPage);
+const showExportModal = ref(false);
 
 const totalPages = computed(() => {
 	if (props.rowsPerPage === 0) return 1;
@@ -95,6 +97,33 @@ watch(
 					(execution time: {{ executionTimeDisplay }})
 				</span>
 			</span>
+			<div class="ml-4 flex space-x-2">
+				<div
+					class="tooltip tooltip-top"
+					data-tip="Export"
+				>
+					<button
+						v-if="totalRecords > 0"
+						class="btn btn-ghost btn-xs"
+						@click="showExportModal = true"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="h-4 w-4"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
 		</div>
 
 		<div class="flex items-center space-x-2">
@@ -233,4 +262,10 @@ watch(
 			</div>
 		</div>
 	</div>
+
+	<SQLExportDataModal
+		v-if="showExportModal"
+		:show="showExportModal"
+		@close="showExportModal = false"
+	/>
 </template>
diff --git a/src/components/ShowConnectionInfo.vue b/src/components/ShowConnectionInfo.vue
index a6012ed..eb070ca 100644
--- a/src/components/ShowConnectionInfo.vue
+++ b/src/components/ShowConnectionInfo.vue
@@ -1,47 +1,90 @@
 <script setup lang="ts">
-import { computed, watch, inject } from 'vue';
+import { computed, watch, inject, ref } from 'vue';
 import Modal from '@/components/Modal.vue';
+import RemoteBadge from '@/components/ui/RemoteBadge.vue';
 import { useProjectStore } from '@/store/project';
+import type { ProjectConnection } from '@/types/project';
+import { ConnectionType } from '@/types/connection-types';
 
-const showAlert = inject<(msg: string, type: string) => void>('showAlert')!;
+const showAlert = inject<(message: string, type: string) => void>('showAlert')!;
+
+interface Props {
+	connection: ProjectConnection;
+	isRemoteConnection: boolean;
+}
+const props = defineProps<Props>();
 
 const projectStore = useProjectStore();
 
-const comparisonTooltip = computed(() => {
-	if (!projectStore.targetDatabase) return 'Error checking project database';
-	if (!projectStore.state.projectDatabase)
-		return 'Project database not found';
-	return `Project database: ${projectStore.state.projectDatabase}`;
+const isDetailsOpen = ref<boolean>(false);
+const isDatabaseMismatch = ref<boolean>(false);
+
+const connectionDetails = computed(() => {
+	const { connection, isRemoteConnection } = props;
+
+	if (isRemoteConnection && connection.sshConfig) {
+		const { sshConfig } = connection;
+		return {
+			name: sshConfig.name,
+			host: sshConfig.remoteDbConfig.host,
+			port: sshConfig.port,
+			user: sshConfig.user,
+			database: sshConfig.remoteDbConfig.database,
+			path: sshConfig.remotePath,
+			remotePort: sshConfig.port,
+			remoteUser: sshConfig.user,
+			dbType: sshConfig.remoteDbType,
+			remoteHost: sshConfig.host
+		};
+	}
+
+	return {
+		name: connection.name,
+		host: connection.dbConfig?.host ?? null,
+		port: connection.dbConfig?.port ?? null,
+		user: connection.dbConfig?.user ?? null,
+		database: connection.dbConfig?.database ?? null,
+		path: connection.projectPath,
+		remotePort: null,
+		remoteUser: null,
+		dbType: ConnectionType.MySQL,
+		remoteHost: null
+	};
 });
 
-async function updateProjectEnv() {
-	const path = projectStore.selectedProject?.projectPath;
-	if (!path || !projectStore.targetDatabase) return;
+async function updateProjectEnv(): Promise<void> {
+	const projectPath = projectStore.selectedProject?.projectPath;
+	const targetDb = projectStore.targetDatabase;
+
+	if (!projectPath || !targetDb) {
+		return;
+	}
 
 	try {
-		const { success, message } = await window.ipcRenderer.updateEnvDatabase(
-			{
-				projectPath: path,
-				database: projectStore.targetDatabase
-			}
-		);
-
-		if (success) {
-			projectStore.state.databaseMatch = true;
-			projectStore.state.projectDatabase = projectStore.targetDatabase;
+		const result = await window.ipcRenderer.updateEnvDatabase({
+			projectPath,
+			database: targetDb
+		});
+
+		if (result.success) {
+			isDatabaseMismatch.value = true;
+			projectStore.state.projectDatabase = targetDb;
 			showAlert('Database updated in .env file successfully!', 'success');
 		} else {
-			showAlert(`Error updating database: ${message}`, 'error');
+			showAlert(`Error updating database: ${result.message}`, 'error');
 		}
-	} catch (err: any) {
-		showAlert(`Error updating database: ${err.message}`, 'error');
+	} catch (error: unknown) {
+		const msg = error instanceof Error ? error.message : String(error);
+		showAlert(`Error updating database: ${msg}`, 'error');
 	}
 }
 
 watch(
 	() => projectStore.selectedProject,
 	(proj) => {
-		if (proj) projectStore.checkProjectDatabase();
+		if (proj) {
+			projectStore.checkProjectDatabase();
+		}
 	},
 	{ immediate: true }
 );
@@ -50,15 +93,21 @@ watch(
 <template>
 	<div v-if="projectStore.selectedProject">
 		<div class="flex items-center justify-between">
-			<h1 class="text-lg font-semibold">
-				{{ projectStore.selectedProject.name }}
+			<h1 class="text-lg font-semibold flex items-center">
+				{{ connectionDetails.name }}
+				<RemoteBadge
+					v-if="props.isRemoteConnection"
+					class="ml-2"
+				/>
 			</h1>
 		</div>
 
 		<div class="mt-1 flex items-center gap-1 text-xs">
-			<div>{{ projectStore.targetDatabase }}</div>
+			<div>
+				{{ connectionDetails.database }} ({{ connectionDetails.host }})
+			</div>
 			<button
-				@click="projectStore.state.showConnectionInfo = true"
+				@click="isDetailsOpen = true"
 				class="text-sm opacity-70 hover:opacity-100"
 			>
 				<svg
@@ -77,16 +126,10 @@ watch(
 				</svg>
 			</button>
 			<div
-				v-if="
-					!projectStore.state.databaseMatch &&
-					!projectStore.state.isLoading
-				"
+				v-if="isDatabaseMismatch && !projectStore.state.isLoading"
 				class="flex items-center text-amber-400"
 			>
-				<div
-					class="tooltip tooltip-bottom"
-					:data-tip="comparisonTooltip"
-				>
+				<div class="tooltip tooltip-bottom">
 					<span class="text-error">Mismatch DB </span>
 				</div>
 				<button
@@ -111,31 +154,58 @@ watch(
 				</button>
 			</div>
 		</div>
-	</div>
 
-	<Modal
-		:show="projectStore.state.showConnectionInfo"
-		@close="projectStore.state.showConnectionInfo = false"
-		width="md"
-		z-index="99999"
-		title="Connection Details"
-		@action="updateProjectEnv"
-		:show-action-button="!projectStore.state.databaseMatch"
-		action-button-text="Update .env"
-	>
-		<div class="space-y-2 py-4 text-sm">
-			<p>
-				<strong>Name:</strong> {{ projectStore.selectedProject?.name }}
-			</p>
-			<p>
-				<strong>Project Path:</strong>
-				{{ projectStore.selectedProject?.projectPath }}
-			</p>
-			<p><strong>Database:</strong> {{ projectStore.targetDatabase }}</p>
-			<p>
-				<strong>Project Database:</strong>
-				{{ projectStore.state.projectDatabase || 'Not found' }}
-			</p>
-		</div>
-	</Modal>
+		<Modal
+			:show="isDetailsOpen"
+			@close="isDetailsOpen = false"
+			width="md"
+			z-index="99999"
+			title="Connection Details"
+			@action="updateProjectEnv"
+			:show-action-button="isDatabaseMismatch"
+			action-button-text="Update .env"
+		>
+			<div class="space-y-2 py-4 text-sm">
+				<p class="flex items-center">
+					<strong>Name:</strong> {{ connectionDetails.name }}
+					<RemoteBadge
+						v-if="props.isRemoteConnection"
+						class="ml-2"
+					/>
+				</p>
+				<p>
+					<strong>Project Path:</strong> {{ connectionDetails.path }}
+				</p>
+				<p>
+					<strong>Database:</strong> {{ connectionDetails.database }}
+				</p>
+				<p><strong>Host:</strong> {{ connectionDetails.host }}</p>
+				<p>
+					<strong>Project Database:</strong>
+					{{ connectionDetails.database || 'Not found' }}
+				</p>
+
+				<div v-if="props.isRemoteConnection">
+					<div class="divider">SSH Information</div>
+					<p>
+						<strong>SSH Host:</strong>
+						{{ connectionDetails.remoteHost }}:{{
+							connectionDetails.remotePort
+						}}
+					</p>
+					<p>
+						<strong>SSH User:</strong> {{ connectionDetails.user }}
+					</p>
+					<p>
+						<strong>Remote Path:</strong>
+						{{ connectionDetails.path }}
+					</p>
+					<p>
+						<strong>Remote DB Type:</strong>
+						{{ connectionDetails.dbType }}
+					</p>
+				</div>
+			</div>
+		</Modal>
+	</div>
 </template>
diff --git a/src/components/TableContent.vue b/src/components/TableContent.vue
index 577828d..24e803c 100644
--- a/src/components/TableContent.vue
+++ b/src/components/TableContent.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, markRaw, defineAsyncComponent } from 'vue';
 import { useSidebarStore } from '@/store/sidebar';
+import { useConnectionsStore } from '@/store/connections';
+import { ConnectionType } from '@/types/connection-types';
 
 const DataTab = markRaw(
 	defineAsyncComponent(() => import('./database/tables/Records.vue'))
@@ -31,6 +33,7 @@ defineOptions({
 });
 
 const sidebarStore = useSidebarStore();
+const connectionsStore = useConnectionsStore();
 
 const activeContentTab = ref('data');
 
@@ -44,15 +47,36 @@ const contentTabs = [
 	{ id: 'factory', label: 'Factory' }
 ];
 
+const isSSHConnection = computed(() => {
+	const selectedProject = connectionsStore.getSelectedProject;
+	return selectedProject?.type === ConnectionType.SSH;
+});
+
 const visibleTabs = computed(() => {
 	return contentTabs.filter((tab) => {
-		// if (tab.id === "monitoring") {
-		//   return isJobBatchesTable.value;
-		// }
-		return true;
+		return !(
+			(tab.id === 'migrations' ||
+				tab.id === 'model' ||
+				tab.id === 'factory') &&
+			isSSHConnection.value
+		);
 	});
 });
 
+if (
+	activeContentTab.value === 'migrations' ||
+	activeContentTab.value === 'model' ||
+	activeContentTab.value === 'factory'
+) {
+	const shouldResetTab = computed(() => {
+		return isSSHConnection.value;
+	});
+
+	if (shouldResetTab.value) {
+		activeContentTab.value = 'data';
+	}
+}
+
 const currentTabComponent = computed(() => {
 	switch (activeContentTab.value) {
 		case 'data':
diff --git a/src/components/Terminal.vue b/src/components/Terminal.vue
index bf474ce..9873f10 100644
--- a/src/components/Terminal.vue
+++ b/src/components/Terminal.vue
@@ -5,11 +5,34 @@ import { FitAddon } from '@xterm/addon-fit';
 import '@xterm/xterm/css/xterm.css';
 import { useConnectionsStore } from '@/store/connections';
 import terminalService from '@/services/terminal';
+import { executeProjectCommand } from '@/services/remote-terminal-service';
+import { ConnectionType } from '@/types/connection-types';
 
 const connectionsStore = useConnectionsStore();
+const selectedProject = computed(() => connectionsStore.getSelectedProject);
+
+const isSSHConnection = computed(() => {
+	return selectedProject.value?.type === ConnectionType.SSH;
+});
+
+const sshConfig = computed(() => {
+	if (!selectedProject.value?.sshConfig) return null;
+
+	const config = selectedProject.value.sshConfig;
+
+	return sanitizeObject(config);
+});
+
 const projectPath = computed(() => {
-	const selectedProject = connectionsStore.getSelectedProject;
-	return selectedProject?.projectPath || '';
+	const selected = connectionsStore.getSelectedProject;
+	return selected?.projectPath || '';
+});
+
+const remotePath = computed(() => {
+	if (isSSHConnection.value && sshConfig.value) {
+		return sshConfig.value.remotePath || '/var/www/html';
+	}
+	return '';
 });
 
 const terminalElement = ref<HTMLElement | null>(null);
@@ -28,6 +51,10 @@ const larabaseAscii = `
                                               
 `;
 
+function sanitizeObject<T>(obj: T): T {
+	return structuredClone(JSON.parse(JSON.stringify(obj)));
+}
+
 const toggleTerminal = () => {
 	isVisible.value = !isVisible.value;
 	if (isVisible.value) {
@@ -51,7 +78,7 @@ const fitTerminal = () => {
 const executeCommand = async () => {
 	if (!commandInput.value.trim() || isCommandRunning.value) return;
 
-	if (commandInput.value.trim().startsWith('cd ')) {
+	if (commandInput.value.trim().startsWith('cd ') && !isSSHConnection.value) {
 		if (terminal.value) {
 			terminal.value.writeln(`$ ${commandInput.value}`);
 			terminal.value.writeln(
@@ -71,7 +98,48 @@ const executeCommand = async () => {
 		commandInput.value = '';
 
 		try {
-			if (window.ipcRenderer) {
+			if (isSSHConnection.value && sshConfig.value) {
+				terminal.value.writeln(
+					'\r\n\x1b[33mExecuting command via SSH...\x1b[0m'
+				);
+
+				try {
+					const cleanConfig = { ...sshConfig.value };
+
+					const result = await executeProjectCommand(
+						cleanConfig,
+						savedCommand
+					);
+
+					if (result.stdout) {
+						terminal.value.writeln(result.stdout);
+					}
+
+					if (result.stderr) {
+						terminal.value.writeln(
+							`\x1b[31m${result.stderr}\x1b[0m`
+						);
+					}
+
+					if (result.code !== 0) {
+						terminal.value.writeln(
+							`\r\n\x1b[31mCommand exited with code ${result.code}\x1b[0m`
+						);
+					} else {
+						terminal.value.writeln(
+							'\r\n\x1b[32mCommand completed successfully\x1b[0m'
+						);
+					}
+				} catch (error) {
+					console.error('SSH command error:', error);
+					terminal.value.writeln(
+						`\r\n\x1b[31mError executing command: ${error}\x1b[0m`
+					);
+				} finally {
+					isCommandRunning.value = false;
+					scrollToBottomOfTerminal();
+				}
+			} else if (window.ipcRenderer) {
 				window.ipcRenderer.on('terminal-stdout', (_event, data) => {
 					if (terminal.value && data) {
 						terminal.value.write(data);
@@ -141,12 +209,19 @@ const executeCommand = async () => {
 };
 
 const cancelCurrentCommand = () => {
-	if (isCommandRunning.value && window.ipcRenderer) {
-		window.ipcRenderer.cancel_terminal_process();
-		if (terminal.value) {
-			terminal.value.writeln(
-				'\r\n\x1b[33mCommand canceled by user\x1b[0m'
+	if (isCommandRunning.value) {
+		if (isSSHConnection.value) {
+			terminal.value?.writeln(
+				'\r\n\x1b[33mCannot cancel remote SSH commands\x1b[0m'
 			);
+			isCommandRunning.value = false;
+		} else if (window.ipcRenderer) {
+			window.ipcRenderer.cancel_terminal_process();
+			if (terminal.value) {
+				terminal.value.writeln(
+					'\r\n\x1b[33mCommand canceled by user\x1b[0m'
+				);
+			}
 		}
 	}
 };
@@ -197,9 +272,18 @@ onMounted(() => {
 		term.writeln(
 			'Terminal started. Type commands in the input field below.'
 		);
-		term.writeln(
-			`Working directory: ${projectPath.value || 'Application Root'}`
-		);
+
+		if (isSSHConnection.value && sshConfig.value) {
+			term.writeln(
+				`SSH connection: ${sshConfig.value.user}@${sshConfig.value.host}`
+			);
+			term.writeln(`Working directory: ${remotePath.value}`);
+		} else {
+			term.writeln(
+				`Working directory: ${projectPath.value || 'Application Root'}`
+			);
+		}
+
 		term.writeln(
 			'Commands will be displayed in real-time as they execute.'
 		);
diff --git a/src/components/UpdateNotifier.vue b/src/components/UpdateNotifier.vue
index ea6e834..60f5323 100644
--- a/src/components/UpdateNotifier.vue
+++ b/src/components/UpdateNotifier.vue
@@ -415,20 +415,6 @@ function installUpdate() {
 }
 </script>
 
-<style>
-#releaseNotes h2 {
-	font-size: 1.125rem !important;
-	line-height: 1.75rem !important;
-	font-weight: 600 !important;
-}
-
-#releaseNotes ul {
-	list-style: disc !important;
-	margin-left: 36px !important;
-	padding: 4px;
-}
-</style>
-
 <template>
 	<div class="text-sm space-y-3 text-base-content">
 		<Modal
@@ -600,3 +586,17 @@ function installUpdate() {
 		</Modal>
 	</div>
 </template>
+
+<style>
+#releaseNotes h2 {
+	font-size: 1.125rem !important;
+	line-height: 1.75rem !important;
+	font-weight: 600 !important;
+}
+
+#releaseNotes ul {
+	list-style: disc !important;
+	margin-left: 36px !important;
+	padding: 4px;
+}
+</style>
diff --git a/src/components/database/DatabaseSwitcher.vue b/src/components/database/DatabaseSwitcher.vue
index 6b81472..1d60e2a 100644
--- a/src/components/database/DatabaseSwitcher.vue
+++ b/src/components/database/DatabaseSwitcher.vue
@@ -5,6 +5,7 @@ import { useConnectionsStore } from '@/store/connections';
 import { useSidebarStore } from '@/store/sidebar';
 import { useTabsStore } from '@/store/tabs';
 import { useProjectStore } from '@/store/project';
+import { AppConnection } from '@/types/ssh-connection';
 
 const showAlert = inject<(message: string, type: string) => void>('showAlert')!;
 
@@ -33,7 +34,7 @@ const isCreatingDatabase = ref(false);
 async function switchDatabase(databaseName: string, shouldUpdateEnv: boolean) {
 	if (
 		!project.value ||
-		(databaseName === project.value.db_config.database &&
+		(databaseName === project.value?.dbConfig?.database &&
 			(!shouldUpdateEnv || databaseName === projectDatabase.value))
 	) {
 		return;
@@ -63,12 +64,20 @@ async function switchDatabase(databaseName: string, shouldUpdateEnv: boolean) {
 					'warning'
 				);
 			}
-		} else if (databaseName !== project.value.db_config.database) {
+		} else if (
+			project.value &&
+			project.value.dbConfig &&
+			databaseName !== project.value.dbConfig.database
+		) {
 			showAlert('Database connection updated successfully', 'success');
 		}
 
-		if (databaseName !== project.value.db_config.database) {
-			project.value.db_config.database = databaseName;
+		if (
+			project.value &&
+			project.value.dbConfig &&
+			databaseName !== project.value.dbConfig.database
+		) {
+			project.value.dbConfig.database = databaseName;
 
 			await connectionStore.updateConnection(
 				project.value.id as string,
@@ -99,8 +108,13 @@ async function deleteDatabase() {
 	deletingDatabase.value = true;
 
 	try {
+		const AppConnection = {
+			localDbConfig: toRaw(project.value.dbConfig),
+			remote: toRaw(project.value.sshConfig)
+		} as AppConnection;
+
 		const result = await window.ipcRenderer.dropDatabase(
-			toRaw(project.value.db_config),
+			AppConnection,
 			databaseToDelete.value
 		);
 
@@ -136,9 +150,12 @@ async function loadAvailableDatabases() {
 	}
 
 	try {
-		const result = await window.ipcRenderer.listDatabases(
-			toRaw(project.value.db_config)
-		);
+		const AppConnection = {
+			localDbConfig: toRaw(project.value.dbConfig),
+			remote: toRaw(project.value.sshConfig)
+		} as AppConnection;
+
+		const result = await window.ipcRenderer.listDatabases(AppConnection);
 
 		if (result.success) {
 			availableDatabases.value = result.databases;
@@ -170,7 +187,7 @@ async function checkProjectDatabase() {
 	try {
 		const result = await window.ipcRenderer.compareProjectDatabase({
 			projectPath: project.value.projectPath,
-			connectionDatabase: project.value.db_config.database
+			connectionDatabase: project.value?.dbConfig?.database
 		});
 
 		if (result.success) {
@@ -219,8 +236,13 @@ async function createDatabase() {
 	databaseNameError.value = '';
 
 	try {
+		const AppConnection = {
+			localDbConfig: toRaw(project.value.dbConfig),
+			remote: toRaw(project.value.sshConfig)
+		} as AppConnection;
+
 		const result = await window.ipcRenderer.createDatabase(
-			toRaw(project.value.db_config),
+			AppConnection,
 			newDatabaseName.value
 		);
 
@@ -386,7 +408,7 @@ onMounted(async () => {
 							class="bg-base-100 border-base-300 rounded border p-3"
 							:class="{
 								'bg-base-200':
-									db === project?.db_config?.database,
+									db === project?.dbConfig?.database,
 								'border-l-accent border-l-4':
 									db === projectDatabase
 							}"
@@ -397,7 +419,7 @@ onMounted(async () => {
 									<span
 										v-if="
 											db === projectDatabase &&
-											db !== project?.db_config?.database
+											db !== project?.dbConfig?.database
 										"
 										class="badge badge-sm badge-accent ml-2"
 										>ENV</span
@@ -405,7 +427,7 @@ onMounted(async () => {
 									<span
 										v-if="
 											db ===
-												project?.db_config?.database &&
+												project?.dbConfig?.database &&
 											db === projectDatabase
 										"
 										class="badge badge-sm badge-success ml-2"
@@ -413,7 +435,7 @@ onMounted(async () => {
 									>
 									<span
 										v-else-if="
-											db === project?.db_config?.database
+											db === project?.dbConfig?.database
 										"
 										class="badge badge-sm badge-primary ml-2"
 										>CURRENT</span
@@ -423,7 +445,7 @@ onMounted(async () => {
 								<div class="flex gap-3">
 									<div
 										v-if="
-											db !== project?.db_config?.database
+											db !== project?.dbConfig?.database
 										"
 										class="tooltip tooltip-left"
 										data-tip="Switch to this database"
@@ -453,8 +475,7 @@ onMounted(async () => {
 											project?.projectPath &&
 											(db !== projectDatabase ||
 												db !==
-													project?.db_config
-														?.database)
+													project?.dbConfig?.database)
 										"
 										class="tooltip tooltip-left"
 										data-tip="Switch and update .env file"
@@ -481,7 +502,7 @@ onMounted(async () => {
 									</div>
 									<div
 										v-if="
-											db !== project?.db_config?.database
+											db !== project?.dbConfig?.database
 										"
 										class="tooltip tooltip-left"
 										data-tip="Delete database"
diff --git a/src/components/database/Sidebar.vue b/src/components/database/Sidebar.vue
index a5efe7c..0a552dc 100644
--- a/src/components/database/Sidebar.vue
+++ b/src/components/database/Sidebar.vue
@@ -5,9 +5,9 @@ import { useConnectionsStore } from '@/store/connections';
 import { useTabsStore } from '@/store/tabs';
 import type { ModelInfo, ProjectConnection } from '@/types/project';
 import Modal from '@/components/Modal.vue';
-import { MysqlConnection } from '@/types/mysql-connection';
 import TableListSkeleton from '@/components/TableListSkeleton.vue';
 import { Table } from '@/types/table';
+import { AppConnection } from '@/types/ssh-connection';
 
 const showAlert = inject<(message: string, type: string) => void>('showAlert')!;
 
@@ -93,11 +93,16 @@ async function dropTables() {
 	const mappedTableNames = tablesToDelete.map((table) => table.name);
 
 	try {
+		const project = selectedProject.value as ProjectConnection;
+
+		const AppConnection = {
+			localDbConfig: toRaw(project.dbConfig),
+			remote: toRaw(project.sshConfig)
+		} as AppConnection;
+
 		const params = {
 			projectId: selectedProject.value?.id as string,
-			dbConnection: toRaw(
-				selectedProject.value?.db_config
-			) as MysqlConnection,
+			appConnection: AppConnection,
 			tables: mappedTableNames,
 			ignoreForeignKeys: Boolean(ignoreForeignKeys.value),
 			cascade: Boolean(cascadeDelete.value)
@@ -153,7 +158,7 @@ watch(
 
 watchEffect(() => {
 	const project = selectedProject.value;
-	if (project) {
+	if (project && !project.isRemote) {
 		setTimeout(async () => {
 			try {
 				await sidebarStore.updateApproximateTableCounts(project);
@@ -249,6 +254,7 @@ watchEffect(() => {
 							</button>
 						</div>
 						<div
+							v-if="!selectedProject?.isRemote"
 							class="tooltip tooltip-right"
 							data-tip="Sort by records"
 						>
@@ -460,6 +466,7 @@ watchEffect(() => {
 							</div>
 
 							<span
+								v-if="!selectedProject?.isRemote"
 								class="badge badge-xs flex-shrink-0"
 								:class="{
 									'animate-pulse': table.isApproximate,
diff --git a/src/components/database/tables/EditRecordModal.vue b/src/components/database/tables/EditRecordModal.vue
index c8c692e..1fd61bb 100644
--- a/src/components/database/tables/EditRecordModal.vue
+++ b/src/components/database/tables/EditRecordModal.vue
@@ -4,6 +4,7 @@ import Modal from '@/components/Modal.vue';
 import { useConnectionsStore } from '@/store/connections';
 import { useTableStructure } from '@/composables/useTableStructure';
 import UpdatePasswordModal from '@/components/database/tables/UpdatePasswordModal.vue';
+import { AppConnection } from '@/types/ssh-connection';
 
 const props = defineProps({
 	show: {
@@ -255,6 +256,8 @@ const handleJsonInput = (columnName: string, value: string) => {
 const updateRecord = async () => {
 	if (!connectionStore.getSelectedProject) return;
 
+	const project = connectionStore.getSelectedProject;
+
 	try {
 		isUpdating.value = true;
 		updateError.value = '';
@@ -363,8 +366,13 @@ const updateRecord = async () => {
 				.filter(([key]) => key !== null)
 		);
 
+		const AppConnection = {
+			localDbConfig: toRaw(project.dbConfig),
+			remote: toRaw(project.sshConfig)
+		} as AppConnection;
+
 		const response = await window.ipcRenderer.updateTableRecord({
-			dbConnection: toRaw(connectionStore.getSelectedProject.db_config),
+			appConnection: AppConnection,
 			tableName: props.tableName,
 			data: cleanData,
 			id: processedFormData.id
diff --git a/src/components/database/tables/ExportDataModal.vue b/src/components/database/tables/ExportDataModal.vue
index e267d95..3e86982 100644
--- a/src/components/database/tables/ExportDataModal.vue
+++ b/src/components/database/tables/ExportDataModal.vue
@@ -3,6 +3,7 @@ import { ref, computed, toRaw } from 'vue';
 import { useDataTableStore } from '@/store/dataTable';
 import { TableColumn, TableRecord } from '@/types/table';
 import { useConnectionsStore } from '@/store/connections';
+import { AppConnection } from '@/types/ssh-connection';
 import * as ExcelJS from 'exceljs';
 
 const props = defineProps({
@@ -247,7 +248,12 @@ async function fetchAllFilteredData(): Promise<Record<string, any>[]> {
 			sortDirection: dataTableStore.currentSortDirection,
 			filter: filter,
 			tableName: props.tableName,
-			dbConnection: toRaw(connectionStore.getSelectedProject?.db_config)
+			appConnection: {
+				localDbConfig: toRaw(
+					connectionStore.getSelectedProject?.dbConfig
+				),
+				remote: toRaw(connectionStore.getSelectedProject?.sshConfig)
+			} as AppConnection
 		} as TableRecord;
 
 		const response = await window.ipcRenderer.getTableRecords(params);
diff --git a/src/components/database/tables/FilterButton.vue b/src/components/database/tables/FilterButton.vue
index 41c369e..5fd5e0f 100644
--- a/src/components/database/tables/FilterButton.vue
+++ b/src/components/database/tables/FilterButton.vue
@@ -261,5 +261,7 @@ watch(
 		<option value="25">25 rows</option>
 		<option value="50">50 rows</option>
 		<option value="100">100 rows</option>
+		<option value="500">500 rows</option>
+		<option value="1000">1k rows</option>
 	</select>
 </template>
diff --git a/src/components/database/tables/IndexesTab.vue b/src/components/database/tables/IndexesTab.vue
index 0810013..1d0f5dd 100644
--- a/src/components/database/tables/IndexesTab.vue
+++ b/src/components/database/tables/IndexesTab.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, inject } from 'vue';
 import { useConnectionsStore } from '@/store/connections';
 import { toRaw } from 'vue';
+import { AppConnection } from '@/types/ssh-connection';
 
 const props = defineProps<{ tableName: string }>();
 const showAlert = inject<(message: string, type: string) => void>('showAlert')!;
@@ -28,10 +29,19 @@ function getBadgeClass(indexType: string) {
 async function loadTableIndexes() {
 	try {
 		isLoading.value = true;
-		const dbConfig = toRaw(connectionsStore.getSelectedProject?.db_config);
+		const selectedProject = connectionsStore.getSelectedProject;
+		if (!selectedProject) {
+			showAlert('No project selected', 'error');
+			return;
+		}
+
+		const AppConnection = {
+			localDbConfig: toRaw(selectedProject.dbConfig),
+			remote: toRaw(selectedProject.sshConfig)
+		} as AppConnection;
 
 		const response = await window.ipcRenderer.getTableIndexes(
-			dbConfig,
+			AppConnection,
 			props.tableName
 		);
 
diff --git a/src/components/database/tables/Paginator.vue b/src/components/database/tables/Paginator.vue
index 8be329d..e7e82ae 100644
--- a/src/components/database/tables/Paginator.vue
+++ b/src/components/database/tables/Paginator.vue
@@ -234,6 +234,8 @@ watch(rowsPerPage, (newValue, oldValue) => {
 					<option value="25">25 rows</option>
 					<option value="50">50 rows</option>
 					<option value="100">100 rows</option>
+					<option value="500">500 rows</option>
+					<option value="1000">1k rows</option>
 				</select>
 			</div>
 
@@ -244,7 +246,7 @@ watch(rowsPerPage, (newValue, oldValue) => {
 					type="number"
 					min="1"
 					:max="totalPages"
-					class="input input-xs input-bordered w-14"
+					class="input input-xs input-bordered w-24"
 					@keyup.enter="goToPage"
 				/>
 				<button
diff --git a/src/components/database/tables/StructureTab.vue b/src/components/database/tables/StructureTab.vue
index 09acb99..aff3cad 100644
--- a/src/components/database/tables/StructureTab.vue
+++ b/src/components/database/tables/StructureTab.vue
@@ -9,7 +9,7 @@ const dataTableStore = useDataTableStore(props.tableName);
 const tableStructure = ref<any[]>([]);
 const isLoading = ref(true);
 
-onMounted(async () => {
+async function loadTableStructure() {
 	try {
 		isLoading.value = true;
 
@@ -19,12 +19,21 @@ onMounted(async () => {
 
 		if (response.success) {
 			tableStructure.value = response.structure;
+		} else {
+			showAlert(
+				`Failed to load table structure: ${response.message}`,
+				'error'
+			);
 		}
 	} catch (error) {
 		showAlert(`Failed to load table structure: ${error}`, 'error');
 	} finally {
 		isLoading.value = false;
 	}
+}
+
+onMounted(async () => {
+	await loadTableStructure();
 });
 </script>
 
@@ -35,7 +44,7 @@ onMounted(async () => {
 		>
 			<button
 				class="btn btn-sm btn-ghost"
-				@click="dataTableStore.getTableStructure(props.tableName)"
+				@click="loadTableStructure"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/database/tables/UpdatePasswordModal.vue b/src/components/database/tables/UpdatePasswordModal.vue
index 9182e39..fcce9c7 100644
--- a/src/components/database/tables/UpdatePasswordModal.vue
+++ b/src/components/database/tables/UpdatePasswordModal.vue
@@ -3,6 +3,7 @@ import { ref, toRaw, watch } from 'vue';
 import Modal from '@/components/Modal.vue';
 import { inject } from 'vue';
 import { useConnectionsStore } from '@/store/connections';
+import { AppConnection } from '@/types/ssh-connection';
 
 const props = defineProps({
 	show: {
@@ -67,6 +68,8 @@ async function updatePassword() {
 		return;
 	}
 
+	const project = connectionStore.getSelectedProject;
+
 	try {
 		isLoading.value = true;
 
@@ -83,14 +86,19 @@ async function updatePassword() {
 
 		const hashedPassword = result.hash;
 
-		if (!connectionStore.getSelectedProject?.db_config) {
+		if (!project?.dbConfig) {
 			showAlert('No database connection available', 'error');
 
 			return;
 		}
 
+		const AppConnection = {
+			localDbConfig: toRaw(project.dbConfig),
+			remote: toRaw(project.sshConfig)
+		} as AppConnection;
+
 		const updateResult = await window.ipcRenderer.updateTableRecord({
-			dbConnection: toRaw(connectionStore.getSelectedProject.db_config),
+			appConnection: AppConnection,
 			tableName: props.tableName,
 			data: { password: hashedPassword },
 			id: props.record.id
diff --git a/src/components/home/ManageConnection.vue b/src/components/home/ManageConnection.vue
index 2155120..beb546d 100644
--- a/src/components/home/ManageConnection.vue
+++ b/src/components/home/ManageConnection.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue';
+import { inject, ref, watch, toRaw } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { useConnectionsStore } from '@/store/connections';
 import Modal from '@/components/Modal.vue';
 import { ProjectConnection } from '@/types/project';
 import { Env } from '@/types/env';
 import { DockerInfo } from '@/types/docker-info';
+import {
+	ConnectionStatus,
+	ConnectionType,
+	getConnectionTypeIcon
+} from '@/types/connection-types';
+import SshConnectionForm from '@/components/home/SshConnectionForm.vue';
+import { AppConnection, SshConnection } from '@/types/ssh-connection';
 
 const connectionsStore = useConnectionsStore();
 
@@ -19,28 +26,43 @@ const defaultValues = {
 	id: '',
 	projectPath: '',
 	name: '',
-	type: 'mysql',
-	icon: '',
-	db_config: {
+	type: ConnectionType.MySQL,
+	icon: getConnectionTypeIcon(ConnectionType.MySQL),
+	dbConfig: {
 		database: '',
-		host: 'localhost',
+		host: '127.0.0.1',
 		port: 3306,
 		user: '',
 		password: '',
 		connectTimeout: 10000
 	},
-	redis_config: {
+	redisConfig: {
 		port: 6379,
-		host: 'localhost',
+		host: '127.0.0.1',
 		password: ''
 	},
 	usingSail: false,
-	status: 'ready',
+	status: ConnectionStatus.Connected,
 	isValid: true,
+	isRemote: false,
 	dockerInfo: null
 };
-
 const newConnection = ref<ProjectConnection>(defaultValues);
+const sshConfig = ref<SshConnection>({
+	name: '',
+	host: '',
+	port: 22,
+	user: '',
+	remotePath: '',
+	remoteDbType: ConnectionType.MySQL,
+	remoteDbConfig: {
+		host: '127.0.0.1',
+		port: 3306,
+		database: '',
+		user: '',
+		password: ''
+	}
+});
 
 const editConnectionId = ref();
 const projectPathError = ref('');
@@ -48,81 +70,163 @@ const dockerInfo = ref<DockerInfo | null>(null);
 
 async function saveNewConnection() {
 	try {
-		if (!newConnection.value.projectPath) {
+		if (
+			!newConnection.value.projectPath &&
+			newConnection.value.type === ConnectionType.MySQL
+		) {
 			projectPathError.value = 'Project path is required';
 			return;
 		}
 
-		if (
-			!newConnection.value.name ||
-			!newConnection ||
-			!newConnection.value.db_config.database ||
-			!newConnection.value.db_config.user
-		) {
-			showAlert('Please fill all required fields', 'error');
+		const plainSshConfig = {
+			name: sshConfig.value.name,
+			host: sshConfig.value.host,
+			port: sshConfig.value.port,
+			user: sshConfig.value.user,
+			remotePath: sshConfig.value.remotePath,
+			remoteDbType: ConnectionType.MySQL,
+			remoteDbConfig: {
+				host: sshConfig.value.remoteDbConfig.host,
+				port: sshConfig.value.remoteDbConfig.port,
+				database: sshConfig.value.remoteDbConfig.database,
+				user: sshConfig.value.remoteDbConfig.user,
+				password: sshConfig.value.remoteDbConfig.password || ''
+			}
+		} as any;
+
+		const hasName =
+			newConnection.value.type === ConnectionType.SSH
+				? !!sshConfig.value.name
+				: !!newConnection.value.name;
+
+		if (!hasName) {
+			showAlert('Connection name is required', 'error');
 			return;
 		}
 
-		const exists = connectionsStore.connections.some(
-			(conn) =>
-				(conn.projectPath === newConnection.value.projectPath ||
-					conn.name === newConnection.value.name) &&
-				conn.id !== editConnectionId.value
-		);
+		if (newConnection.value.type === ConnectionType.SSH) {
+			if (
+				!sshConfig.value.host ||
+				!sshConfig.value.user ||
+				!sshConfig.value.remotePath
+			) {
+				showAlert('Please fill all required SSH fields', 'error');
+				return;
+			}
 
-		if (exists) {
-			showAlert(
-				'A connection with this name or project path already exists',
-				'error'
-			);
-			return;
+			if (
+				!sshConfig.value.remoteDbConfig.database ||
+				!sshConfig.value.remoteDbConfig.user
+			) {
+				showAlert('Please fill all required database fields', 'error');
+				return;
+			}
+		} else {
+			if (
+				!newConnection.value.dbConfig?.database ||
+				!newConnection.value.dbConfig?.user
+			) {
+				showAlert('Please fill all required fields', 'error');
+				return;
+			}
 		}
 
 		isSaving.value = true;
 
-		showAlert('Testing database connection...', 'info');
+		let testResult = { success: true, message: '' };
 
-		const testResult = await window.ipcRenderer.testMySQLConnection({
-			host: newConnection.value.db_config.host,
-			port: newConnection.value.db_config.port,
-			user: newConnection.value.db_config.user,
-			password: newConnection.value.db_config.password,
-			database: newConnection.value.db_config.database
-		});
+		if (newConnection.value.type === ConnectionType.SSH) {
+			showAlert('Testing SSH connection...', 'info');
+
+			if (sshConfig.value.password) {
+				plainSshConfig.password = sshConfig.value.password;
+			}
+			if (sshConfig.value.privateKey) {
+				plainSshConfig.privateKey = sshConfig.value.privateKey;
+				if (sshConfig.value.passphrase) {
+					plainSshConfig.passphrase = sshConfig.value.passphrase;
+				}
+			}
+
+			testResult = await window.ipcRenderer.ssh.testConnection(
+				toRaw(plainSshConfig)
+			);
+		} else if (newConnection.value.type === ConnectionType.MySQL) {
+			showAlert('Testing database connection...', 'info');
+
+			if (newConnection.value.dbConfig) {
+				const AppConnection = {
+					localDbConfig: {
+						...newConnection.value.dbConfig
+					}
+				} as AppConnection;
+
+				testResult =
+					await window.ipcRenderer.testMySQLConnection(AppConnection);
+			}
+		}
 
 		if (!testResult.success) {
 			showAlert(`Connection failed: ${testResult.message}`, 'error');
+
 			isSaving.value = false;
 			return;
 		}
 
 		showAlert('Connection successful! Saving configuration...', 'success');
 
-		const connectionData = {
+		const connectionData: ProjectConnection = {
 			id: isEditMode.value ? editConnectionId.value : uuid(),
-			projectPath: newConnection.value.projectPath,
-			name: newConnection.value.name,
+			projectPath:
+				newConnection.value.type === ConnectionType.SSH
+					? ''
+					: newConnection.value.projectPath,
+			name:
+				newConnection.value.type === ConnectionType.SSH
+					? sshConfig.value.name || ''
+					: newConnection.value.name || '',
 			type: newConnection.value.type,
-			icon: newConnection.value.type.charAt(0).toUpperCase(),
-			db_config: {
-				database: newConnection.value.db_config.database,
-				host: newConnection.value.db_config.host,
-				port: newConnection.value.db_config.port,
-				user: newConnection.value.db_config.user,
-				password: newConnection.value.db_config.password,
-				connectTimeout: 10000
-			},
-			redis_config: {
-				port: newConnection.value.redis_config.port,
-				host: newConnection.value.redis_config.host,
-				password: newConnection.value.redis_config.password
-			},
-			usingSail: newConnection.value.usingSail,
-			status: 'ready',
+			icon: getConnectionTypeIcon(newConnection.value.type),
+			isRemote: newConnection.value.type === ConnectionType.SSH,
+			status: ConnectionStatus.Connected,
 			isValid: true,
-			dockerInfo: dockerInfo.value || null
+			usingSail:
+				newConnection.value.type !== ConnectionType.SSH
+					? newConnection.value.usingSail
+					: false,
+			dockerInfo:
+				newConnection.value.type !== ConnectionType.SSH
+					? dockerInfo.value || null
+					: null,
+			redisConfig: {
+				port: newConnection.value.redisConfig.port,
+				host: newConnection.value.redisConfig.host,
+				password: newConnection.value.redisConfig.password
+			}
 		};
 
+		if (newConnection.value.type === ConnectionType.SSH) {
+			if (sshConfig.value.password) {
+				plainSshConfig.password = sshConfig.value.password;
+			}
+			if (sshConfig.value.privateKey) {
+				plainSshConfig.privateKey = sshConfig.value.privateKey;
+				if (sshConfig.value.passphrase) {
+					plainSshConfig.passphrase = sshConfig.value.passphrase;
+				}
+			}
+
+			connectionData.sshConfig = toRaw(plainSshConfig);
+		} else if (newConnection.value.dbConfig) {
+			connectionData.dbConfig = {
+				database: newConnection.value.dbConfig.database,
+				host: newConnection.value.dbConfig.host,
+				port: newConnection.value.dbConfig.port,
+				user: newConnection.value.dbConfig.user,
+				password: newConnection.value.dbConfig.password
+			};
+		}
+
 		if (isEditMode.value) {
 			await connectionsStore.updateConnection(
 				editConnectionId.value,
@@ -138,7 +242,6 @@ async function saveNewConnection() {
 
 		isCreateModalOpen.value = false;
 	} catch (error: any) {
-		console.error('Error saving connection:', error);
 		showAlert(`Error saving connection: ${error.message}`, 'error');
 	} finally {
 		isSaving.value = false;
@@ -154,26 +257,27 @@ function editConnection(project: ProjectConnection) {
 		projectPath: project.projectPath,
 		name: project.name,
 		type: project.type,
-		icon: project.type.charAt(0).toUpperCase(),
-		db_config: {
-			database: project.db_config.database,
-			host: project.db_config.host,
-			port: project.db_config.port,
-			user: project.db_config.user,
-			password: project.db_config.password,
-			connectTimeout: 10000
-		},
-		redis_config: {
-			port: project.redis_config.port,
-			host: project.redis_config.host,
-			password: project.redis_config.password
+		icon: project.icon,
+		isRemote: project.isRemote || false,
+		redisConfig: {
+			port: project.redisConfig.port,
+			host: project.redisConfig.host,
+			password: project.redisConfig.password
 		},
 		usingSail: project.usingSail,
-		status: 'ready',
+		status: project.status || ConnectionStatus.Connected,
 		isValid: true,
 		dockerInfo: project.dockerInfo
 	};
 
+	if (project.dbConfig) {
+		newConnection.value.dbConfig = { ...project.dbConfig };
+	}
+
+	if (project.sshConfig) {
+		sshConfig.value = { ...project.sshConfig };
+	}
+
 	projectPathError.value = '';
 	dockerInfo.value = project.dockerInfo as DockerInfo;
 	isCreateModalOpen.value = true;
@@ -211,71 +315,81 @@ async function selectProjectDirectory() {
 					envConfig.APP_NAME || selectedPath.split('/').pop();
 			}
 
-			if (envConfig.DB_HOST === 'mysql') {
-				newConnection.value.db_config.host = '0.0.0.0';
+			if (
+				envConfig.DB_HOST === ConnectionType.MySQL &&
+				newConnection.value.dbConfig
+			) {
+				newConnection.value.dbConfig.host = '0.0.0.0';
 			}
 
 			if (
-				!newConnection.value.db_config.host ||
-				newConnection.value.db_config.host === ''
+				newConnection.value.dbConfig &&
+				(!newConnection.value.dbConfig.host ||
+					newConnection.value.dbConfig.host === '')
 			) {
-				newConnection.value.db_config.host =
-					envConfig.DB_HOST || 'localhost';
+				newConnection.value.dbConfig.host =
+					envConfig.DB_HOST || '127.0.0.1';
 			}
 
-			if (!newConnection.value.db_config.port) {
-				newConnection.value.db_config.port = envConfig.DB_PORT || 3306;
+			if (
+				newConnection.value.dbConfig &&
+				!newConnection.value.dbConfig.port
+			) {
+				newConnection.value.dbConfig.port = envConfig.DB_PORT || 3306;
 			}
 
 			if (
-				!newConnection.value.db_config.database ||
-				newConnection.value.db_config.database === ''
+				newConnection.value.dbConfig &&
+				(!newConnection.value.dbConfig.database ||
+					newConnection.value.dbConfig.database === '')
 			) {
-				newConnection.value.db_config.database =
+				newConnection.value.dbConfig.database =
 					envConfig.DB_DATABASE || '';
 			}
 
 			if (
-				!newConnection.value.db_config.user ||
-				newConnection.value.db_config.user === ''
+				newConnection.value.dbConfig &&
+				(!newConnection.value.dbConfig.user ||
+					newConnection.value.dbConfig.user === '')
 			) {
-				newConnection.value.db_config.user =
+				newConnection.value.dbConfig.user =
 					envConfig.DB_USERNAME || 'root';
 			}
 
 			if (
-				!newConnection.value.db_config.password ||
-				newConnection.value.db_config.password === ''
+				newConnection.value.dbConfig &&
+				(!newConnection.value.dbConfig.password ||
+					newConnection.value.dbConfig.password === '')
 			) {
-				newConnection.value.db_config.password =
+				newConnection.value.dbConfig.password =
 					envConfig.DB_PASSWORD || '';
 			}
 
 			if (envConfig.REDIS_HOST === 'redis') {
-				newConnection.value.redis_config.host = '0.0.0.0';
+				newConnection.value.redisConfig.host = '0.0.0.0';
 			}
 
 			if (
-				!newConnection.value.redis_config.host ||
-				newConnection.value.redis_config.host === ''
+				!newConnection.value.redisConfig.host ||
+				newConnection.value.redisConfig.host === ''
 			) {
-				newConnection.value.redis_config.host =
+				newConnection.value.redisConfig.host =
 					envConfig.REDIS_HOST || '127.0.0.1';
 			}
 
 			if (
-				!newConnection.value.redis_config.port ||
-				newConnection.value.redis_config.port === ''
+				!newConnection.value.redisConfig.port ||
+				newConnection.value.redisConfig.port === ''
 			) {
-				newConnection.value.redis_config.port =
+				newConnection.value.redisConfig.port =
 					envConfig.REDIS_PORT || '6379';
 			}
 
 			if (
-				!newConnection.value.redis_config.password ||
-				newConnection.value.redis_config.password === 'null'
+				!newConnection.value.redisConfig.password ||
+				newConnection.value.redisConfig.password === 'null'
 			) {
-				newConnection.value.redis_config.password = '';
+				newConnection.value.redisConfig.password = '';
 			}
 
 			if (envConfig.DOCKER_INFO) {
@@ -321,6 +435,43 @@ function openCreateConnectionModal() {
 	isCreateModalOpen.value = true;
 }
 
+watch(
+	() => newConnection.value.type,
+	(newType) => {
+		projectPathError.value = '';
+
+		if (newType === ConnectionType.SSH) {
+			if (newConnection.value.name) {
+				sshConfig.value.name = newConnection.value.name;
+			}
+		} else if (sshConfig.value.name) {
+			newConnection.value.name = sshConfig.value.name;
+		}
+
+		newConnection.value.icon = getConnectionTypeIcon(newType);
+
+		newConnection.value.isRemote = newType === ConnectionType.SSH;
+	}
+);
+
+watch(
+	() => newConnection.value.name,
+	(newName) => {
+		if (newConnection.value.type === ConnectionType.SSH && newName) {
+			sshConfig.value.name = newName;
+		}
+	}
+);
+
+watch(
+	() => sshConfig.value.name,
+	(newName) => {
+		if (newConnection.value.type === ConnectionType.SSH && newName) {
+			newConnection.value.name = newName;
+		}
+	}
+);
+
 defineExpose({ editConnection, removeConnection, openCreateConnectionModal });
 </script>
 
@@ -333,276 +484,353 @@ defineExpose({ editConnection, removeConnection, openCreateConnectionModal });
 		:show-cancel-button="false"
 	>
 		<div class="max-h-[70vh] overflow-hidden flex flex-col">
-			<div class="overflow-y-auto pr-2 flex-1">
+			<div class="overflow-y-auto px-2 flex-1">
 				<fieldset class="fieldset mb-4 w-full">
 					<label class="label">
-						<span class="label-text">Laravel Project Path</span>
+						<span class="label-text">Connection Type</span>
 					</label>
-					<div class="flex gap-2">
-						<input
-							v-model="newConnection.projectPath"
-							type="text"
-							placeholder="Select Laravel project directory"
-							class="input w-full"
-							:readonly="true"
-						/>
-						<button
-							class="btn btn-primary"
-							@click="selectProjectDirectory"
-						>
-							Browse
-						</button>
-					</div>
-					<label
-						v-if="projectPathError"
-						class="label"
+					<select
+						v-model="newConnection.type"
+						class="select select-bordered w-full"
 					>
-						<span class="label-text-alt text-error">{{
-							projectPathError
-						}}</span>
-					</label>
+						<option :value="ConnectionType.MySQL">
+							MySQL (Local)
+						</option>
+						<option :value="ConnectionType.SSH">SSH</option>
+					</select>
 					<p class="text-base-content mt-1 text-xs">
-						Path to your Laravel project (.env file will be read
-						from this location)
+						{{
+							newConnection.type === ConnectionType.SSH
+								? 'Connect to a remote server via SSH'
+								: 'Connect to a local database'
+						}}
 					</p>
 				</fieldset>
 
-				<fieldset class="fieldset mb-4 w-full">
-					<label class="label cursor-pointer">
-						<span class="label-text">Using Laravel Sail?</span>
-						<input
-							v-model="newConnection.usingSail"
-							type="checkbox"
-							class="toggle toggle-primary"
-						/>
-					</label>
-					<p class="text-base-content mt-1 text-xs">
-						Enable if your project uses Laravel Sail (Docker)
-					</p>
-				</fieldset>
-
-				<div
-					v-if="dockerInfo && !isEditMode"
-					:class="[
-						'alert mb-4',
-						dockerInfo.isDocker
-							? 'alert-success'
-							: !dockerInfo.isDocker && dockerInfo.dockerAvailable
-								? 'alert-warning'
-								: 'alert-info'
-					]"
-				>
-					<div>
-						<svg
-							v-if="dockerInfo.isDocker"
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-6 w-6 shrink-0 stroke-current"
-							fill="none"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-							/>
-						</svg>
-						<svg
-							v-else-if="dockerInfo.dockerAvailable"
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-6 w-6 shrink-0 stroke-current"
-							fill="none"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-							/>
-						</svg>
-						<svg
-							v-else
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							class="h-6 w-6 shrink-0 stroke-current"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-							/>
-						</svg>
-						<div>
-							<span class="font-medium">Docker Detection:</span>
-							<p>{{ dockerInfo.message }}</p>
-							<p
-								v-if="dockerInfo.isDocker"
-								class="mt-1 text-sm"
-							>
-								<span class="font-medium">Container: </span
-								>{{ dockerInfo.dockerContainerName }}
-							</p>
-							<p class="mt-1 text-sm">
-								<span v-if="dockerInfo.isDocker">
-									The system detected a MySQL Docker
-									container. Configuration has been
-									automatically adjusted.
-								</span>
-								<span v-else-if="dockerInfo.dockerAvailable">
-									Docker is available, but no MySQL container
-									was found running on port
-									{{ newConnection.db_config.port }}. A local
-									connection will be used.
-								</span>
-								<span v-else>
-									Docker was not detected. A local connection
-									will be used.
-								</span>
-							</p>
-						</div>
-					</div>
+				<div v-if="newConnection.type === ConnectionType.SSH">
+					<SshConnectionForm v-model="sshConfig" />
 				</div>
 
-				<div class="divider">Database Connection</div>
-
-				<div class="grid grid-cols-2 gap-4">
-					<fieldset class="fieldset w-full">
-						<label class="label">
-							<span class="label-text">Connection Name</span>
-						</label>
-						<input
-							v-model="newConnection.name"
-							type="text"
-							placeholder="My Project"
-							class="input w-full"
-							required
-						/>
-					</fieldset>
-
-					<fieldset class="fieldset w-full">
+				<div v-else>
+					<fieldset class="fieldset mb-4 w-full">
 						<label class="label">
-							<span class="label-text">Database Type</span>
+							<span class="label-text">Laravel Project Path</span>
 						</label>
-						<select
-							v-model="newConnection.type"
-							class="select select-bordered w-full"
-							disabled
-						>
-							<option value="mysql">MySQL</option>
-						</select>
-						<label class="label">
-							<span class="label-text-alt"
-								>Only MySQL is supported at the moment</span
+						<div class="flex gap-2">
+							<input
+								v-model="newConnection.projectPath"
+								type="text"
+								placeholder="Select Laravel project directory"
+								class="input w-full"
+								:readonly="true"
+							/>
+							<button
+								class="btn btn-primary"
+								@click="selectProjectDirectory"
 							>
+								Browse
+							</button>
+						</div>
+						<label
+							v-if="projectPathError"
+							class="label"
+						>
+							<span class="label-text-alt text-error">{{
+								projectPathError
+							}}</span>
 						</label>
+						<p class="text-base-content mt-1 text-xs">
+							Path to your Laravel project (.env file will be read
+							from this location)
+						</p>
 					</fieldset>
 
-					<fieldset class="fieldset w-full">
-						<label class="label">
-							<span class="label-text">Host</span>
-						</label>
-						<input
-							v-model="newConnection.db_config.host"
-							type="text"
-							placeholder="localhost"
-							class="input w-full"
-							required
-						/>
-					</fieldset>
-
-					<fieldset class="fieldset w-full">
-						<label class="label">
-							<span class="label-text">Port</span>
-						</label>
-						<input
-							v-model="newConnection.db_config.port"
-							type="text"
-							placeholder="3306"
-							class="input w-full"
-							required
-						/>
-					</fieldset>
-
-					<fieldset class="fieldset w-full">
-						<label class="label">
-							<span class="label-text">Database</span>
-						</label>
-						<input
-							v-model="newConnection.db_config.database"
-							type="text"
-							placeholder="database"
-							class="input w-full"
-							required
-						/>
-					</fieldset>
-
-					<fieldset class="fieldset w-full">
-						<label class="label">
-							<span class="label-text">Username</span>
-						</label>
-						<input
-							v-model="newConnection.db_config.user"
-							type="text"
-							placeholder="root"
-							class="input w-full"
-							required
-						/>
-					</fieldset>
-
-					<fieldset class="fieldset w-full">
-						<label class="label">
-							<span class="label-text">Password</span>
+					<fieldset class="fieldset mb-4 w-full">
+						<label class="label cursor-pointer">
+							<span class="label-text">Using Laravel Sail?</span>
+							<input
+								v-model="newConnection.usingSail"
+								type="checkbox"
+								class="toggle toggle-primary"
+							/>
 						</label>
-						<input
-							v-model="newConnection.db_config.password"
-							type="text"
-							placeholder="password"
-							class="input w-full"
-						/>
+						<p class="text-base-content mt-1 text-xs">
+							Enable if your project uses Laravel Sail (Docker)
+						</p>
 					</fieldset>
-				</div>
-
-				<div class="divider">Redis Connection (Optional)</div>
 
-				<div class="grid grid-cols-2 gap-4">
-					<fieldset class="fieldset w-full">
-						<label class="label">
-							<span class="label-text">Redis Host</span>
-						</label>
-						<input
-							v-model="newConnection.redis_config.host"
-							type="text"
-							placeholder="127.0.0.1"
-							class="input w-full"
-						/>
-					</fieldset>
+					<div
+						v-if="dockerInfo && !isEditMode"
+						:class="[
+							'alert mb-4',
+							dockerInfo.isDocker
+								? 'alert-success'
+								: !dockerInfo.isDocker &&
+									  dockerInfo.dockerAvailable
+									? 'alert-warning'
+									: 'alert-info'
+						]"
+					>
+						<div>
+							<svg
+								v-if="dockerInfo.isDocker"
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6 shrink-0 stroke-current"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<svg
+								v-else-if="dockerInfo.dockerAvailable"
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6 shrink-0 stroke-current"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+								/>
+							</svg>
+							<svg
+								v-else
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								class="h-6 w-6 shrink-0 stroke-current"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<div>
+								<span class="font-medium"
+									>Docker Detection:</span
+								>
+								<p>{{ dockerInfo.message }}</p>
+								<p
+									v-if="dockerInfo.isDocker"
+									class="mt-1 text-sm"
+								>
+									<span class="font-medium">Container: </span
+									>{{ dockerInfo.dockerContainerName }}
+								</p>
+								<p class="mt-1 text-sm">
+									<span v-if="dockerInfo.isDocker">
+										The system detected a MySQL Docker
+										container. Configuration has been
+										automatically adjusted.
+									</span>
+									<span
+										v-else-if="dockerInfo.dockerAvailable"
+									>
+										Docker is available, but no MySQL
+										container was found running on port
+										{{ newConnection.dbConfig?.port }}. A
+										local connection will be used.
+									</span>
+									<span v-else>
+										Docker was not detected. A local
+										connection will be used.
+									</span>
+								</p>
+							</div>
+						</div>
+					</div>
 
-					<fieldset class="fieldset w-full">
-						<label class="label">
-							<span class="label-text">Redis Port</span>
-						</label>
-						<input
-							v-model="newConnection.redis_config.port"
-							type="text"
-							placeholder="6379"
-							class="input w-full"
-						/>
-					</fieldset>
+					<div class="divider">Database Connection</div>
+
+					<div class="grid grid-cols-2 gap-4">
+						<fieldset class="fieldset w-full">
+							<label class="label">
+								<span class="label-text">Connection Name</span>
+							</label>
+							<input
+								v-model="newConnection.name"
+								type="text"
+								placeholder="My Project"
+								class="input w-full"
+								required
+							/>
+						</fieldset>
+
+						<fieldset class="fieldset w-full">
+							<label class="label">
+								<span class="label-text">Database Type</span>
+							</label>
+							<select
+								v-model="newConnection.type"
+								class="select select-bordered w-full"
+								disabled
+							>
+								<option value="mysql">MySQL</option>
+							</select>
+							<label class="label">
+								<span class="label-text-alt"
+									>Only MySQL is supported at the moment</span
+								>
+							</label>
+						</fieldset>
+
+						<fieldset class="fieldset w-full">
+							<label class="label">
+								<span class="label-text">Host</span>
+							</label>
+							<input
+								v-if="newConnection.dbConfig"
+								v-model="newConnection.dbConfig.host"
+								type="text"
+								placeholder="127.0.0.1"
+								class="input w-full"
+								required
+							/>
+							<input
+								v-else
+								type="text"
+								placeholder="127.0.0.1"
+								class="input w-full"
+								disabled
+								required
+							/>
+						</fieldset>
+
+						<fieldset class="fieldset w-full">
+							<label class="label">
+								<span class="label-text">Port</span>
+							</label>
+							<input
+								v-if="newConnection.dbConfig"
+								v-model="newConnection.dbConfig.port"
+								type="text"
+								placeholder="3306"
+								class="input w-full"
+								required
+							/>
+							<input
+								v-else
+								type="text"
+								placeholder="3306"
+								class="input w-full"
+								disabled
+								required
+							/>
+						</fieldset>
+
+						<fieldset class="fieldset w-full">
+							<label class="label">
+								<span class="label-text">Database</span>
+							</label>
+							<input
+								v-if="newConnection.dbConfig"
+								v-model="newConnection.dbConfig.database"
+								type="text"
+								placeholder="database"
+								class="input w-full"
+								required
+							/>
+							<input
+								v-else
+								type="text"
+								placeholder="database"
+								class="input w-full"
+								disabled
+								required
+							/>
+						</fieldset>
+
+						<fieldset class="fieldset w-full">
+							<label class="label">
+								<span class="label-text">Username</span>
+							</label>
+							<input
+								v-if="newConnection.dbConfig"
+								v-model="newConnection.dbConfig.user"
+								type="text"
+								placeholder="root"
+								class="input w-full"
+								required
+							/>
+							<input
+								v-else
+								type="text"
+								placeholder="root"
+								class="input w-full"
+								disabled
+								required
+							/>
+						</fieldset>
+
+						<fieldset class="fieldset w-full">
+							<label class="label">
+								<span class="label-text">Password</span>
+							</label>
+							<input
+								v-if="newConnection.dbConfig"
+								v-model="newConnection.dbConfig.password"
+								type="text"
+								placeholder="password"
+								class="input w-full"
+							/>
+							<input
+								v-else
+								type="text"
+								placeholder="password"
+								class="input w-full"
+								disabled
+							/>
+						</fieldset>
+					</div>
 
-					<fieldset class="fieldset w-full">
-						<label class="label">
-							<span class="label-text">Redis Password</span>
-						</label>
-						<input
-							v-model="newConnection.redis_config.password"
-							type="text"
-							placeholder="Leave empty if none"
-							class="input w-full"
-						/>
-					</fieldset>
+					<div class="divider">Redis Connection (Optional)</div>
+
+					<div class="grid grid-cols-2 gap-4">
+						<fieldset class="fieldset w-full">
+							<label class="label">
+								<span class="label-text">Redis Host</span>
+							</label>
+							<input
+								v-model="newConnection.redisConfig.host"
+								type="text"
+								placeholder="127.0.0.1"
+								class="input w-full"
+							/>
+						</fieldset>
+
+						<fieldset class="fieldset w-full">
+							<label class="label">
+								<span class="label-text">Redis Port</span>
+							</label>
+							<input
+								v-model="newConnection.redisConfig.port"
+								type="text"
+								placeholder="6379"
+								class="input w-full"
+							/>
+						</fieldset>
+
+						<fieldset class="fieldset w-full">
+							<label class="label">
+								<span class="label-text">Redis Password</span>
+							</label>
+							<input
+								v-model="newConnection.redisConfig.password"
+								type="text"
+								placeholder="Leave empty if none"
+								class="input w-full"
+							/>
+						</fieldset>
+					</div>
 				</div>
 			</div>
 
@@ -617,7 +845,11 @@ defineExpose({ editConnection, removeConnection, openCreateConnectionModal });
 				</button>
 				<button
 					class="btn btn-primary"
-					:disabled="isSaving || !newConnection.projectPath"
+					:disabled="
+						isSaving ||
+						(newConnection.type !== ConnectionType.SSH &&
+							!newConnection.projectPath)
+					"
 					@click="saveNewConnection"
 				>
 					<span
diff --git a/src/components/home/RestoreDatabase.vue b/src/components/home/RestoreDatabase.vue
index fb894ad..8aef2f0 100644
--- a/src/components/home/RestoreDatabase.vue
+++ b/src/components/home/RestoreDatabase.vue
@@ -254,7 +254,7 @@ async function updateConnectionDatabase(
 		);
 
 		if (connection) {
-			connection.db_config.database = targetDatabase;
+			connection.dbConfig.database = targetDatabase;
 
 			localStorage.setItem('connections', JSON.stringify(connections));
 
@@ -298,7 +298,7 @@ async function startRestore() {
 		let targetDatabase;
 
 		if (overwriteCurrentDb.value) {
-			targetDatabase = selectedProject.value?.db_config?.database;
+			targetDatabase = selectedProject.value?.dbConfig?.database;
 		} else {
 			targetDatabase = restoreConfig.value.targetDatabase;
 		}
@@ -332,7 +332,7 @@ async function startRestore() {
 			if (
 				!overwriteCurrentDb.value &&
 				restoreConfig.value.setAsDefault &&
-				targetDatabase !== selectedProject.value?.db_config?.database
+				targetDatabase !== selectedProject.value?.dbConfig?.database
 			) {
 				await updateConnectionDatabase(
 					selectedProject.value?.id as string,
@@ -384,7 +384,6 @@ function restoreDatabase(project: ProjectConnection) {
 	currentStep.value = 0;
 }
 
-// Safely add event listener only if ipcRenderer is available
 onMounted(() => {
 	if (window.ipcRenderer) {
 		window.ipcRenderer.on(
@@ -416,7 +415,6 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	// Clean up the event listener
 	if (window.ipcRenderer) {
 		window.ipcRenderer.removeAllListeners('restoration-progress');
 	}
@@ -628,8 +626,8 @@ defineExpose({ restoreDatabase });
 										<p class="mt-1 text-xs">
 											Overwrite
 											{{
-												selectedProject?.db_config
-													.database
+												selectedProject?.dbConfig
+													?.database
 											}}
 										</p>
 									</div>
@@ -763,7 +761,7 @@ defineExpose({ restoreDatabase });
 							<span class="font-medium">Destination:</span>
 							{{
 								overwriteCurrentDb
-									? selectedProject?.db_config?.database
+									? selectedProject?.dbConfig?.database
 									: restoreConfig.targetDatabase
 							}}
 						</li>
diff --git a/src/components/home/SshConnectionForm.vue b/src/components/home/SshConnectionForm.vue
new file mode 100644
index 0000000..b973029
--- /dev/null
+++ b/src/components/home/SshConnectionForm.vue
@@ -0,0 +1,461 @@
+<script lang="ts" setup>
+import { nextTick, ref, toRaw, watch } from 'vue';
+import type { SshConnection } from '@/types/ssh-connection';
+import { ConnectionType } from '@/types/connection-types';
+
+const props = defineProps<{
+	modelValue: SshConnection;
+}>();
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: SshConnection): void;
+}>();
+
+const sshConfig = ref<SshConnection>({
+	name: props.modelValue.name,
+	host: props.modelValue.host,
+	port: props.modelValue.port || 22,
+	user: props.modelValue.user,
+	remotePath: props.modelValue.remotePath,
+	remoteDbType: ConnectionType.MySQL,
+	remoteDbConfig: {
+		host: props.modelValue.remoteDbConfig?.host || 'localhost',
+		port: props.modelValue.remoteDbConfig?.port || 3306,
+		database: props.modelValue.remoteDbConfig?.database,
+		user: props.modelValue.remoteDbConfig?.user,
+		password: props.modelValue.remoteDbConfig?.password || ''
+	}
+});
+
+if (props.modelValue.password) {
+	sshConfig.value.password = props.modelValue.password;
+}
+if (props.modelValue.privateKey) {
+	sshConfig.value.privateKey = props.modelValue.privateKey;
+	if (props.modelValue.passphrase) {
+		sshConfig.value.passphrase = props.modelValue.passphrase;
+	}
+}
+
+const authMethod = ref<'password' | 'privateKey'>(
+	props.modelValue.privateKey ? 'privateKey' : 'password'
+);
+
+const isTestingConnection = ref(false);
+const testResult = ref<{ success: boolean; message: string } | null>(null);
+
+const isUpdating = ref(false);
+
+watch(authMethod, (newValue) => {
+	if (isUpdating.value) return;
+
+	isUpdating.value = true;
+
+	try {
+		if (newValue === 'password') {
+			delete sshConfig.value.privateKey;
+			delete sshConfig.value.passphrase;
+
+			if (!sshConfig.value.password) {
+				sshConfig.value.password = '';
+			}
+		} else {
+			delete sshConfig.value.password;
+
+			if (!sshConfig.value.privateKey) {
+				sshConfig.value.privateKey = '';
+			}
+		}
+
+		emit('update:modelValue', toRaw(sshConfig.value));
+	} finally {
+		nextTick(() => {
+			isUpdating.value = false;
+		});
+	}
+});
+
+watch(
+	sshConfig,
+	() => {
+		if (isUpdating.value) return;
+
+		isUpdating.value = true;
+		try {
+			emit('update:modelValue', toRaw(sshConfig.value));
+		} finally {
+			nextTick(() => {
+				isUpdating.value = false;
+			});
+		}
+	},
+	{ deep: true }
+);
+
+watch(
+	() => props.modelValue,
+	(newValue) => {
+		if (isUpdating.value) return;
+
+		isUpdating.value = true;
+		try {
+			sshConfig.value.name = newValue.name;
+			sshConfig.value.host = newValue.host;
+			sshConfig.value.port = newValue.port || 22;
+			sshConfig.value.user = newValue.user;
+			sshConfig.value.remotePath = newValue.remotePath;
+			sshConfig.value.remoteDbType = ConnectionType.MySQL;
+			sshConfig.value.remoteDbConfig = {
+				host: newValue.remoteDbConfig?.host || 'localhost',
+				port: newValue.remoteDbConfig?.port || 3306,
+				database: newValue.remoteDbConfig?.database,
+				user: newValue.remoteDbConfig?.user,
+				password: newValue.remoteDbConfig?.password || ''
+			};
+
+			if (newValue.password) {
+				sshConfig.value.password = newValue.password;
+				delete sshConfig.value.privateKey;
+				delete sshConfig.value.passphrase;
+				authMethod.value = 'password';
+			} else if (newValue.privateKey) {
+				sshConfig.value.privateKey = newValue.privateKey;
+				if (newValue.passphrase) {
+					sshConfig.value.passphrase = newValue.passphrase;
+				}
+				delete sshConfig.value.password;
+				authMethod.value = 'privateKey';
+			}
+		} finally {
+			nextTick(() => {
+				isUpdating.value = false;
+			});
+		}
+	},
+	{ deep: true }
+);
+
+async function selectPrivateKeyFile() {
+	try {
+		const result = await window.ipcRenderer.selectFile({
+			title: 'Select SSH Private Key',
+			filters: [
+				{
+					name: 'Private Keys',
+					extensions: ['pem', 'key', 'ppk', 'id_rsa', '*']
+				}
+			],
+			properties: ['openFile']
+		});
+
+		if (result && result.filePaths && result.filePaths.length > 0) {
+			isUpdating.value = true;
+			try {
+				sshConfig.value.privateKey = result.filePaths[0];
+				emit('update:modelValue', toRaw(sshConfig.value));
+			} finally {
+				setTimeout(() => {
+					isUpdating.value = false;
+				}, 0);
+			}
+		}
+	} catch (error) {
+		console.error('Error selecting private key file:', error);
+	}
+}
+
+async function testSshConnection() {
+	isTestingConnection.value = true;
+	testResult.value = null;
+
+	try {
+		const cleanConfig: any = {
+			name: sshConfig.value.name,
+			host: sshConfig.value.host,
+			port: sshConfig.value.port,
+			user: sshConfig.value.user,
+			remotePath: sshConfig.value.remotePath,
+			remoteDbType: ConnectionType.MySQL,
+			remoteDbConfig: {
+				host: sshConfig.value.remoteDbConfig.host,
+				port: sshConfig.value.remoteDbConfig.port,
+				database: sshConfig.value.remoteDbConfig.database,
+				user: sshConfig.value.remoteDbConfig.user,
+				password: sshConfig.value.remoteDbConfig.password || ''
+			}
+		};
+
+		if (authMethod.value === 'password') {
+			cleanConfig.password = sshConfig.value.password;
+		} else {
+			cleanConfig.privateKey = sshConfig.value.privateKey;
+			if (sshConfig.value.passphrase) {
+				cleanConfig.passphrase = sshConfig.value.passphrase;
+			}
+		}
+
+		testResult.value =
+			await window.ipcRenderer.ssh.testConnection(cleanConfig);
+	} catch (error) {
+		testResult.value = {
+			success: false,
+			message:
+				error instanceof Error
+					? error.message
+					: 'Unknown error testing connection'
+		};
+	} finally {
+		isTestingConnection.value = false;
+	}
+}
+</script>
+
+<template>
+	<div class="w-full grid gap-4">
+		<h3 class="text-lg font-semibold mb-2">SSH Connection Settings</h3>
+
+		<fieldset class="fieldset">
+			<label class="label">
+				<span class="label-text">Connection Name</span>
+			</label>
+			<input
+				v-model="sshConfig.name"
+				type="text"
+				placeholder="My Remote Laravel Project"
+				class="input input-bordered w-full"
+			/>
+		</fieldset>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<fieldset class="fieldset">
+				<label class="label">
+					<span class="label-text">SSH Host</span>
+				</label>
+				<input
+					v-model="sshConfig.host"
+					type="text"
+					placeholder="e.g., example.com or 192.168.1.100"
+					class="input input-bordered w-full"
+				/>
+			</fieldset>
+
+			<fieldset class="fieldset">
+				<label class="label">
+					<span class="label-text">SSH Port</span>
+				</label>
+				<input
+					v-model.number="sshConfig.port"
+					type="number"
+					placeholder="22"
+					class="input input-bordered w-full"
+				/>
+			</fieldset>
+		</div>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<fieldset class="fieldset">
+				<label class="label">
+					<span class="label-text">Username</span>
+				</label>
+				<input
+					v-model="sshConfig.user"
+					type="text"
+					placeholder="SSH username"
+					class="input input-bordered w-full"
+				/>
+			</fieldset>
+
+			<fieldset class="fieldset">
+				<label class="label">
+					<span class="label-text">Authentication Method</span>
+				</label>
+				<select
+					v-model="authMethod"
+					class="select select-bordered w-full"
+				>
+					<option value="password">Password</option>
+					<option value="privateKey">Private Key</option>
+				</select>
+			</fieldset>
+		</div>
+
+		<fieldset
+			v-if="authMethod === 'password'"
+			class="fieldset"
+		>
+			<label class="label">
+				<span class="label-text">Password</span>
+			</label>
+			<input
+				v-model="sshConfig.password"
+				type="password"
+				placeholder="SSH password"
+				class="input input-bordered w-full"
+			/>
+		</fieldset>
+
+		<div
+			v-if="authMethod === 'privateKey'"
+			class="space-y-4"
+		>
+			<fieldset class="fieldset">
+				<label class="label">
+					<span class="label-text">Private Key Path</span>
+				</label>
+				<div class="join w-full">
+					<input
+						v-model="sshConfig.privateKey"
+						type="text"
+						placeholder="/path/to/private_key"
+						class="input input-bordered join-item flex-1"
+					/>
+					<button
+						@click="selectPrivateKeyFile"
+						class="btn join-item"
+					>
+						Browse
+					</button>
+				</div>
+			</fieldset>
+
+			<fieldset class="fieldset">
+				<label class="label">
+					<span class="label-text">Passphrase (if needed)</span>
+				</label>
+				<input
+					v-model="sshConfig.passphrase"
+					type="password"
+					placeholder="Private key passphrase"
+					class="input input-bordered w-full"
+				/>
+			</fieldset>
+		</div>
+
+		<fieldset class="fieldset">
+			<label class="label">
+				<span class="label-text"
+					>Laravel Project Path on Remote Server</span
+				>
+			</label>
+			<input
+				v-model="sshConfig.remotePath"
+				type="text"
+				placeholder="/path/to/laravel/project"
+				class="input input-bordered w-full"
+			/>
+		</fieldset>
+
+		<div class="divider">Remote Database Configuration</div>
+
+		<fieldset class="fieldset">
+			<label class="label">
+				<span class="label-text">Remote Database Type</span>
+			</label>
+			<select
+				v-model="sshConfig.remoteDbType"
+				class="select select-bordered w-full"
+				disabled
+			>
+				<option value="mysql">MySQL</option>
+			</select>
+			<p class="label text-xs">Only MySQL is supported at the moment</p>
+		</fieldset>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<fieldset class="fieldset">
+				<label class="label">
+					<span class="label-text">Database Host</span>
+				</label>
+				<input
+					v-model="sshConfig.remoteDbConfig.host"
+					type="text"
+					placeholder="localhost"
+					class="input input-bordered w-full"
+				/>
+			</fieldset>
+
+			<fieldset class="fieldset">
+				<label class="label">
+					<span class="label-text">Database Port</span>
+				</label>
+				<input
+					v-model.number="sshConfig.remoteDbConfig.port"
+					type="number"
+					:placeholder="
+						sshConfig.remoteDbType === 'mysql' ? '3306' : '5432'
+					"
+					class="input input-bordered w-full"
+				/>
+			</fieldset>
+		</div>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<fieldset class="fieldset">
+				<label class="label">
+					<span class="label-text">Database Name</span>
+				</label>
+				<input
+					v-model="sshConfig.remoteDbConfig.database"
+					type="text"
+					placeholder="database_name"
+					class="input input-bordered w-full"
+				/>
+			</fieldset>
+
+			<fieldset class="fieldset">
+				<label class="label">
+					<span class="label-text">Username</span>
+				</label>
+				<input
+					v-model="sshConfig.remoteDbConfig.user"
+					type="text"
+					placeholder="database_user"
+					class="input input-bordered w-full"
+				/>
+			</fieldset>
+		</div>
+
+		<fieldset class="fieldset">
+			<label class="label">
+				<span class="label-text">Password</span>
+			</label>
+			<input
+				v-model="sshConfig.remoteDbConfig.password"
+				type="password"
+				placeholder="database_password"
+				class="input input-bordered w-full"
+			/>
+		</fieldset>
+
+		<div class="mt-4">
+			<button
+				@click="testSshConnection"
+				class="btn btn-primary"
+				:disabled="isTestingConnection"
+			>
+				<span
+					v-if="isTestingConnection"
+					class="loading loading-spinner"
+				></span>
+				{{ isTestingConnection ? 'Testing...' : 'Test SSH Connection' }}
+			</button>
+			<div
+				v-if="testResult"
+				class="mt-2"
+			>
+				<div
+					v-if="testResult.success"
+					class="alert alert-success"
+				>
+					{{ testResult.message }}
+				</div>
+				<div
+					v-else
+					class="alert alert-error"
+				>
+					{{ testResult.message }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/src/components/ui/RemoteBadge.vue b/src/components/ui/RemoteBadge.vue
new file mode 100644
index 0000000..12914e7
--- /dev/null
+++ b/src/components/ui/RemoteBadge.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+interface Props {
+	size?: 'sm' | 'md' | 'lg';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 'sm'
+});
+
+const sizeClasses = {
+	sm: 'h-3 w-3 text-xs',
+	md: 'h-4 w-4 text-sm',
+	lg: 'h-5 w-5 text-base'
+};
+</script>
+
+<template>
+	<div
+		class="tooltip tooltip-bottom"
+		data-tip="Remote Connection"
+	>
+		<div
+			class="badge badge-sm gap-1"
+			:class="{
+				'badge-sm': props.size === 'sm',
+				'badge-md': props.size === 'md',
+				'badge-lg': props.size === 'lg'
+			}"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				:class="sizeClasses[props.size]"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M21.75 17.25v-.228a4.5 4.5 0 0 0-.12-1.03l-2.268-9.64a3.375 3.375 0 0 0-3.285-2.602H7.923a3.375 3.375 0 0 0-3.285 2.602l-2.268 9.64a4.5 4.5 0 0 0-.12 1.03v.228m19.5 0a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3m19.5 0a3 3 0 0 0-3-3H5.25a3 3 0 0 0-3 3m16.5 0h.008v.008h-.008v-.008Zm-3 0h.008v.008h-.008v-.008Z"
+				/>
+			</svg>
+
+			<span>Remote</span>
+		</div>
+	</div>
+</template>
diff --git a/src/composables/useForeignKeyNavigation.ts b/src/composables/useForeignKeyNavigation.ts
index 0f84d53..b4fdcc8 100644
--- a/src/composables/useForeignKeyNavigation.ts
+++ b/src/composables/useForeignKeyNavigation.ts
@@ -1,9 +1,17 @@
 import { useTabsStore } from '@/store/tabs';
 import { useSidebarStore } from '@/store/sidebar';
 import { Table } from '@/types/table';
-import { ForeignKey } from '@/types/mysql-connection';
 import { useConnectionsStore } from '@/store/connections';
 import { toRaw } from 'vue';
+import { AppConnection } from '@/types/ssh-connection';
+
+export interface ForeignKey {
+	column: string;
+	referenced_table: string;
+	referenced_column: string;
+	constraint_name?: string;
+	type: 'outgoing' | 'incoming';
+}
 
 export function useForeignKeyNavigation() {
 	const tabsStore = useTabsStore();
@@ -26,8 +34,13 @@ export function useForeignKeyNavigation() {
 				return [];
 			}
 
+			const AppConnection = {
+				localDbConfig: toRaw(selectedProject.dbConfig),
+				remote: toRaw(selectedProject.sshConfig)
+			} as AppConnection;
+
 			const result = await window.ipcRenderer.getTableForeignKeys(
-				toRaw(selectedProject.db_config),
+				AppConnection,
 				tableName
 			);
 
@@ -54,7 +67,7 @@ export function useForeignKeyNavigation() {
 	async function navigateToForeignKey(
 		tableName: string,
 		column: string,
-		value: any,
+		value: string | number | null | undefined,
 		onError?: (message: string) => void
 	): Promise<boolean> {
 		if (value === null || value === undefined) {
diff --git a/src/composables/useSQLEditor.ts b/src/composables/useSQLEditor.ts
index 5e5a2db..7d4d652 100644
--- a/src/composables/useSQLEditor.ts
+++ b/src/composables/useSQLEditor.ts
@@ -6,22 +6,55 @@ import { useSqlResultsStore } from '@/store/sqlResults';
 import { AIService } from '@/services/aiService';
 import { toRaw } from 'vue';
 import { useDatabaseSchema } from '@/services/databaseSchema';
-
-type EmitFn = (
-	event: 'update:modelValue' | 'processing-state' | 'explain-sql',
-	...args: any[]
+import { AppConnection } from '@/types/ssh-connection';
+import { ProjectConnection } from '@/types/project';
+
+type EmitEvents = {
+	'update:modelValue': [string];
+	'processing-state': [boolean];
+	'explain-sql': [ExplainResult];
+};
+
+type EmitFn = <E extends keyof EmitEvents>(
+	event: E,
+	...args: EmitEvents[E]
 ) => void;
 
+interface ExplainRow {
+	id: number;
+	select_type?: string;
+	table?: string;
+	partitions?: string | null;
+	type?: string;
+	possible_keys?: string | null;
+	key?: string | null;
+	key_len?: string | null;
+	ref?: string | null;
+	rows?: number;
+	filtered?: number;
+	Extra?: string;
+	[key: string]: unknown;
+}
+
+interface JsonExplainPlan {
+	query_block?: Record<string, unknown>;
+	steps?: Array<Record<string, unknown>>;
+	[key: string]: unknown;
+}
+
 export interface ExplainResult {
-	rawExplain: any[];
+	rawExplain: ExplainRow[];
 	queryToExplain: string;
 	isExplaining: boolean;
 	aiAnalysis?: string;
-	jsonExplain?: any;
+	jsonExplain?: JsonExplainPlan;
 	error?: string;
 }
 
-export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
+export function useSQLEditor(
+	props: { modelValue: string; isRemoteConnection: boolean },
+	emit: EmitFn
+) {
 	const container = ref<HTMLDivElement | null>(null);
 	let editor: monaco.editor.IStandaloneCodeEditor | null = null;
 	let isUpdating = false;
@@ -29,8 +62,9 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 	const connectionsStore = useConnectionsStore();
 	const sqlResultsStore = useSqlResultsStore();
 	const aiService = AIService.getInstance();
-	const { databaseSchema, fetchDatabaseSchema, initializeSchema } =
-		useDatabaseSchema();
+	const { databaseSchema, initializeSchema } = useDatabaseSchema(
+		props.isRemoteConnection
+	);
 
 	const isFixingSQL = ref(false);
 	const showProcessingOverlay = ref(false);
@@ -205,7 +239,7 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 							kind: monaco.languages.CompletionItemKind.Keyword,
 							insertText: keyword,
 							detail: 'Keyword',
-							sortText: '9' + keyword, // Lower priority than tables/columns
+							sortText: '9' + keyword,
 							range: {
 								startLineNumber: position.lineNumber,
 								endLineNumber: position.lineNumber,
@@ -289,6 +323,35 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 		});
 	};
 
+	const getEditorSelectedText = (ed: monaco.editor.ICodeEditor): string => {
+		const selection = ed.getSelection();
+		let selectedText = '';
+
+		if (selection && !selection.isEmpty()) {
+			selectedText = ed.getModel()?.getValueInRange(selection) || '';
+		} else {
+			const position = ed.getPosition();
+			if (position) {
+				const lineNumber = position.lineNumber;
+				selectedText = ed.getModel()?.getLineContent(lineNumber) || '';
+			}
+		}
+
+		return selectedText;
+	};
+
+	const createAppConnection = (project: ProjectConnection): AppConnection => {
+		return {
+			localDbConfig: toRaw(project.dbConfig),
+			remote: toRaw(project.sshConfig)
+		} as AppConnection;
+	};
+
+	const handleError = (error: unknown, prefix: string): string => {
+		console.error(`${prefix}:`, error);
+		return error instanceof Error ? error.message : String(error);
+	};
+
 	const createEditor = () => {
 		if (!container.value) return;
 		if (editor) return;
@@ -327,31 +390,19 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 			contextMenuGroupId: 'navigation',
 			contextMenuOrder: 1.5,
 			run: async function (ed) {
-				const selection = ed.getSelection();
-				let selectedText = '';
-
-				if (selection && !selection.isEmpty()) {
-					selectedText =
-						ed.getModel()?.getValueInRange(selection) || '';
-				} else {
-					const position = ed.getPosition();
-					if (position) {
-						const lineNumber = position.lineNumber;
-						selectedText =
-							ed.getModel()?.getLineContent(lineNumber) || '';
-					}
-				}
+				const selectedText = getEditorSelectedText(ed);
 
 				if (selectedText.trim()) {
-					const projectConfig =
-						connectionsStore.getSelectedProject?.db_config;
-					if (projectConfig) {
+					const projects = connectionsStore.getSelectedProject;
+					if (projects) {
 						sqlResultsStore.isLoading = true;
 						const startTime = Date.now();
 						try {
+							const AppConnection = createAppConnection(projects);
+
 							const result =
 								await window.ipcRenderer.executeSqlQuery(
-									toRaw(projectConfig),
+									AppConnection,
 									selectedText.trim()
 								);
 
@@ -375,12 +426,11 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 								);
 							}
 						} catch (error) {
-							console.error('Exception executing SQL:', error);
-							sqlResultsStore.setError(
-								error instanceof Error
-									? error.message
-									: 'Error executing SQL query'
+							const errorMessage = handleError(
+								error,
+								'Exception executing SQL'
 							);
+							sqlResultsStore.setError(errorMessage);
 						} finally {
 							sqlResultsStore.isLoading = false;
 						}
@@ -389,82 +439,83 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 			}
 		});
 
-		editor.addAction({
-			id: 'explain-sql',
-			label: 'Explain SQL',
-			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE],
-			contextMenuGroupId: 'navigation',
-			contextMenuOrder: 1.3,
-			run: async function (ed) {
-				const selection = ed.getSelection();
-				let selectedText = '';
-
-				if (selection && !selection.isEmpty()) {
-					selectedText =
-						ed.getModel()?.getValueInRange(selection) || '';
-				} else {
-					const position = ed.getPosition();
-					if (position) {
-						const lineNumber = position.lineNumber;
-						selectedText =
-							ed.getModel()?.getLineContent(lineNumber) || '';
-					}
-				}
-
-				if (selectedText.trim()) {
-					const query = selectedText.trim();
-					const projectConfig =
-						connectionsStore.getSelectedProject?.db_config;
-
-					if (projectConfig) {
-						explainResult.value = {
-							rawExplain: [],
-							queryToExplain: query,
-							isExplaining: true
-						};
-
-						emit('explain-sql', { ...explainResult.value });
-
-						try {
-							const result =
-								await window.ipcRenderer.executeExplainSql(
-									toRaw(projectConfig),
-									query
+		if (!props.isRemoteConnection) {
+			editor.addAction({
+				id: 'explain-sql',
+				label: 'Explain SQL',
+				keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE],
+				contextMenuGroupId: 'navigation',
+				contextMenuOrder: 1.3,
+				run: async function (ed) {
+					const selectedText = getEditorSelectedText(ed);
+
+					if (selectedText.trim()) {
+						const query = selectedText.trim();
+						const project = connectionsStore.getSelectedProject;
+
+						if (project) {
+							explainResult.value = {
+								rawExplain: [],
+								queryToExplain: query,
+								isExplaining: true
+							};
+
+							emit('explain-sql', { ...explainResult.value });
+
+							try {
+								const AppConnection =
+									createAppConnection(project);
+
+								const result =
+									await window.ipcRenderer.executeExplainSql(
+										AppConnection,
+										query
+									);
+
+								if (result && result.success) {
+									explainResult.value = {
+										rawExplain:
+											result.explainResults as ExplainRow[],
+										queryToExplain: query,
+										isExplaining: false,
+										jsonExplain:
+											result.jsonExplain as JsonExplainPlan
+									};
+
+									emit('explain-sql', {
+										...explainResult.value
+									});
+								} else {
+									const errorMsg =
+										result && result.error
+											? result.error
+											: 'Unknown SQL error occurred';
+									console.error(
+										'Explain SQL Error:',
+										errorMsg
+									);
+									explainResult.value.isExplaining = false;
+									emit('explain-sql', {
+										...explainResult.value,
+										error: `Error executing EXPLAIN: ${errorMsg}`
+									});
+								}
+							} catch (error) {
+								const errorMessage = handleError(
+									error,
+									'Exception explaining SQL'
 								);
-
-							if (result && result.success) {
-								explainResult.value = {
-									rawExplain: result.explainResults,
-									queryToExplain: query,
-									isExplaining: false,
-									jsonExplain: result.jsonExplain
-								};
-
-								emit('explain-sql', { ...explainResult.value });
-							} else {
-								const errorMsg =
-									result && result.error
-										? result.error
-										: 'Unknown SQL error occurred';
-								console.error('Explain SQL Error:', errorMsg);
 								explainResult.value.isExplaining = false;
 								emit('explain-sql', {
 									...explainResult.value,
-									error: `Error executing EXPLAIN: ${errorMsg}`
+									error: `Error: ${errorMessage}`
 								});
 							}
-						} catch (error) {
-							console.error('Exception explaining SQL:', error);
-							explainResult.value.isExplaining = false;
-							emit('explain-sql', {
-								...explainResult.value,
-								error: `Error: ${error instanceof Error ? error.message : String(error)}`
-							});
 						}
 					}
 				}
-			}
-		});
+			});
+		}
 
 		editor.addAction({
 			id: 'beautify-sql',
@@ -475,7 +526,7 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 			run: function (ed) {
 				try {
 					const selection = ed.getSelection();
-					let text = '';
+					let text: string;
 					let formattedText = '';
 					let range;
 
@@ -516,7 +567,13 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 							}
 						]);
 					}
-				} catch (error) {}
+				} catch (error: unknown) {
+					const errorMessage = handleError(
+						error,
+						'Error beautifying SQL'
+					);
+					alert('Error beautifying SQL: ' + errorMessage);
+				}
 			}
 		});
 
@@ -564,14 +621,12 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 								}
 							]);
 						}
-					} catch (error) {
-						console.error('Exception fixing SQL:', error);
-						alert(
-							'Error fixing SQL: ' +
-								(error instanceof Error
-									? error.message
-									: String(error))
+					} catch (error: unknown) {
+						const errorMessage = handleError(
+							error,
+							'Exception fixing SQL'
 						);
+						alert('Error fixing SQL: ' + errorMessage);
 					} finally {
 						isFixingSQL.value = false;
 						showProcessingOverlay.value = false;
@@ -644,12 +699,7 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 
 	const getSelectedText = (): string => {
 		if (!editor) return '';
-
-		const selection = editor.getSelection();
-		if (selection && !selection.isEmpty()) {
-			return editor.getModel()?.getValueInRange(selection) || '';
-		}
-		return editor.getValue();
+		return getEditorSelectedText(editor);
 	};
 
 	const saveAsScratch = () => {
@@ -669,7 +719,10 @@ export function useSQLEditor(props: { modelValue: string }, emit: EmitFn) {
 
 	onMounted(() => {
 		setTimeout(async () => {
-			await initializeSchema();
+			if (!props.isRemoteConnection) {
+				await initializeSchema();
+			}
+
 			createEditor();
 		}, 50);
 		window.addEventListener('resize', handleResize);
diff --git a/src/main.ts b/src/main.ts
index b27d100..dd37867 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,8 +10,8 @@ import './style.css';
 
 const routes = [
 	{ path: '/', component: Home },
-	{ path: '/database/:id', component: DatabaseView },
-	{ path: '/sql-editor/:id', component: SQLEditorView }
+	{ path: '/database/:id/:isRemote', component: DatabaseView },
+	{ path: '/sql-editor/:id/:isRemote', component: SQLEditorView }
 ];
 
 const router = createRouter({
diff --git a/src/services/databaseSchema.ts b/src/services/databaseSchema.ts
index 9954b3a..d4f579a 100644
--- a/src/services/databaseSchema.ts
+++ b/src/services/databaseSchema.ts
@@ -1,6 +1,7 @@
 import { onMounted, ref, toRaw } from 'vue';
 import { useConnectionsStore } from '@/store/connections';
 import { useProjectStore } from '@/store/project';
+import { AppConnection } from '@/types/ssh-connection';
 
 export interface TableModel {
 	name: string;
@@ -49,7 +50,7 @@ const databaseSchema = ref<DatabaseSchema | null>(null);
 const isLoading = ref(false);
 const error = ref<string | null>(null);
 
-export const useDatabaseSchema = () => {
+export const useDatabaseSchema = (isRemote: boolean = false) => {
 	const connectionsStore = useConnectionsStore();
 	const projectStore = useProjectStore();
 
@@ -70,9 +71,13 @@ export const useDatabaseSchema = () => {
 		error.value = null;
 
 		try {
-			const result = await window.ipcRenderer.getDatabaseSchemaForAI(
-				toRaw(selectedProject.db_config)
-			);
+			const AppConnection = {
+				localDbConfig: toRaw(selectedProject.dbConfig),
+				remote: toRaw(selectedProject.sshConfig)
+			} as AppConnection;
+
+			const result =
+				await window.ipcRenderer.getDatabaseSchemaForAI(AppConnection);
 
 			if (result.success) {
 				const modelsResult =
@@ -112,7 +117,6 @@ export const useDatabaseSchema = () => {
 		}
 	};
 
-	// Create a compact LLM-friendly text representation without JSON syntax
 	const getCompactSchema = (): string => {
 		if (!databaseSchema.value || !databaseSchema.value.tables) {
 			return '';
@@ -168,6 +172,8 @@ export const useDatabaseSchema = () => {
 	};
 
 	onMounted(async () => {
+		if (isRemote) return;
+
 		await initializeSchema();
 	});
 
diff --git a/src/services/remote-file-service.ts b/src/services/remote-file-service.ts
new file mode 100644
index 0000000..860d29d
--- /dev/null
+++ b/src/services/remote-file-service.ts
@@ -0,0 +1,191 @@
+import { SshConnection } from '@/types/ssh-connection';
+
+type JsonPrimitive = string | number | boolean | null;
+type JsonArray = JsonValue[];
+type JsonObject = { [key: string]: JsonValue };
+type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+
+function sanitizeForIpc(obj: unknown): JsonValue {
+	if (obj === null) {
+		return null;
+	}
+
+	if (obj === undefined) {
+		return null;
+	}
+
+	if (typeof obj !== 'object' && typeof obj !== 'function') {
+		return obj as JsonPrimitive;
+	}
+
+	if (obj instanceof Date) {
+		return obj.toISOString();
+	}
+
+	if (Array.isArray(obj)) {
+		return obj.map((item) => sanitizeForIpc(item));
+	}
+
+	const cleanObj: JsonObject = {};
+
+	for (const key in obj as Record<string, unknown>) {
+		if (Object.prototype.hasOwnProperty.call(obj, key)) {
+			const value = (obj as Record<string, unknown>)[key];
+			if (
+				typeof value !== 'function' &&
+				typeof value !== 'symbol' &&
+				key !== '__proto__'
+			) {
+				cleanObj[key] = sanitizeForIpc(value);
+			}
+		}
+	}
+
+	return cleanObj;
+}
+
+interface RemoteFileEntry {
+	filename: string;
+	longname: string;
+	attrs: {
+		size: number;
+		mtime: number;
+		atime: number;
+		uid: number;
+		gid: number;
+		mode: number;
+		[key: string]: number | bigint | boolean | string;
+	};
+}
+
+export async function listRemoteFiles(
+	sshConfig: SshConnection,
+	dirPath: string
+): Promise<RemoteFileEntry[]> {
+	try {
+		const sanitizedConfig = sanitizeForIpc(sshConfig);
+
+		const result = await window.ipcRenderer.ssh.listFiles(
+			sanitizedConfig,
+			dirPath
+		);
+
+		if (!result.success) {
+			throw new Error(result.error || 'Failed to list remote files');
+		}
+
+		return result.files as RemoteFileEntry[];
+	} catch (error) {
+		console.error('Error listing remote files:', error);
+		throw error;
+	}
+}
+
+export async function readRemoteFile(
+	sshConfig: SshConnection,
+	filePath: string
+): Promise<string> {
+	try {
+		const sanitizedConfig = sanitizeForIpc(sshConfig);
+
+		const result = await window.ipcRenderer.ssh.readFile(
+			sanitizedConfig,
+			filePath
+		);
+
+		if (!result.success) {
+			throw new Error(result.error || 'Failed to read remote file');
+		}
+
+		return result.content;
+	} catch (error) {
+		console.error('Error reading remote file:', error);
+		throw error;
+	}
+}
+
+export async function writeRemoteFile(
+	sshConfig: SshConnection,
+	filePath: string,
+	content: string
+): Promise<void> {
+	try {
+		const sanitizedConfig = sanitizeForIpc(sshConfig);
+
+		const result = await window.ipcRenderer.ssh.writeFile(
+			sanitizedConfig,
+			filePath,
+			content
+		);
+
+		if (!result.success) {
+			throw new Error(result.error || 'Failed to write remote file');
+		}
+	} catch (error) {
+		console.error('Error writing remote file:', error);
+		throw error;
+	}
+}
+
+export async function getRemoteEnvVariables(
+	sshConfig: SshConnection
+): Promise<string> {
+	try {
+		const remotePath = sshConfig.remotePath?.endsWith('/')
+			? sshConfig.remotePath.slice(0, -1)
+			: sshConfig.remotePath || '';
+
+		const envPath = `${remotePath}/.env`;
+		return await readRemoteFile(sshConfig, envPath);
+	} catch (error) {
+		console.error('Error getting remote env variables:', error);
+		throw error;
+	}
+}
+
+export async function updateRemoteEnvVariables(
+	sshConfig: SshConnection,
+	content: string
+): Promise<void> {
+	try {
+		const remotePath = sshConfig.remotePath?.endsWith('/')
+			? sshConfig.remotePath.slice(0, -1)
+			: sshConfig.remotePath || '';
+
+		const envPath = `${remotePath}/.env`;
+		await writeRemoteFile(sshConfig, envPath, content);
+	} catch (error) {
+		console.error('Error updating remote env variables:', error);
+		throw error;
+	}
+}
+
+export async function findRemoteLogFiles(
+	sshConnection: SshConnection,
+	basePath: string
+): Promise<string[]> {
+	try {
+		const sanitizedConfig = sanitizeForIpc(sshConnection);
+
+		const command = `find ${basePath} -name "*.log" -type f -not -path "*/vendor/*" 2>/dev/null || echo "No log files found"`;
+		const result = await window.ipcRenderer.ssh.executeCommand(
+			sanitizedConfig,
+			command
+		);
+
+		if (result.stderr) {
+			console.error('Error finding logs:', result.stderr);
+		}
+
+		if (result.stdout.trim() === 'No log files found') {
+			return [];
+		}
+		return result.stdout
+			.split('\n')
+			.filter((line: string) => line.trim() !== '')
+			.map((line: string) => line.trim());
+	} catch (error) {
+		console.error('Error finding remote log files:', error);
+		throw error;
+	}
+}
diff --git a/src/services/remote-terminal-service.ts b/src/services/remote-terminal-service.ts
new file mode 100644
index 0000000..165bf5b
--- /dev/null
+++ b/src/services/remote-terminal-service.ts
@@ -0,0 +1,37 @@
+import { SshConnection } from '@/types/ssh-connection';
+
+function sanitizeObject<T>(obj: T): T {
+	return structuredClone(JSON.parse(JSON.stringify(obj)));
+}
+
+export async function executeRemoteCommand(
+	sshConfig: SshConnection,
+	command: string
+): Promise<{
+	stdout: string;
+	stderr: string;
+	code: number | null;
+}> {
+	try {
+		console.log('Executing SSH command:', command);
+		return await window.ipcRenderer.ssh.executeCommand(
+			sanitizeObject(sshConfig),
+			command
+		);
+	} catch (error) {
+		console.error('Error executing remote command:', error);
+		throw error;
+	}
+}
+
+export async function executeProjectCommand(
+	sshConfig: SshConnection,
+	command: string
+): Promise<{
+	stdout: string;
+	stderr: string;
+	code: number | null;
+}> {
+	const fullCommand = `cd ${sshConfig.remotePath} && ${command}`;
+	return await executeRemoteCommand(sshConfig, fullCommand);
+}
diff --git a/src/services/tunnel-service.ts b/src/services/tunnel-service.ts
new file mode 100644
index 0000000..2fc3870
--- /dev/null
+++ b/src/services/tunnel-service.ts
@@ -0,0 +1,115 @@
+import { SshConnection } from '../types/ssh-connection';
+
+// Store active tunnels
+const activeTunnels = new Map<
+	string,
+	{
+		tunnelId: string;
+		localPort: number;
+		remoteHost: string;
+		remotePort: number;
+		connectionId: string;
+	}
+>();
+
+/**
+ * Create an SSH tunnel to a remote database server
+ */
+export async function createDatabaseTunnel(
+	connectionId: string,
+	sshConfig: SshConnection,
+	remoteHost: string,
+	remotePort: number
+): Promise<{ tunnelId: string; localPort: number }> {
+	// Check if a tunnel already exists for this connection
+	for (const tunnel of Array.from(activeTunnels.values())) {
+		if (
+			tunnel.connectionId === connectionId &&
+			tunnel.remoteHost === remoteHost &&
+			tunnel.remotePort === remotePort
+		) {
+			return {
+				tunnelId: tunnel.tunnelId,
+				localPort: tunnel.localPort
+			};
+		}
+	}
+
+	// Create a new tunnel
+	const result = await window.ipcRenderer.ssh.createTunnel(
+		sshConfig,
+		remoteHost,
+		remotePort
+	);
+
+	if (!result.success) {
+		throw new Error(result.error || 'Failed to create SSH tunnel');
+	}
+
+	// Store the tunnel information
+	const tunnelKey = `${connectionId}:${remoteHost}:${remotePort}`;
+	activeTunnels.set(tunnelKey, {
+		tunnelId: result.tunnelId!,
+		localPort: result.localPort!,
+		remoteHost,
+		remotePort,
+		connectionId
+	});
+
+	return {
+		tunnelId: result.tunnelId!,
+		localPort: result.localPort!
+	};
+}
+
+/**
+ * Close an SSH tunnel
+ */
+export async function closeDatabaseTunnel(
+	connectionId: string,
+	remoteHost: string,
+	remotePort: number
+): Promise<boolean> {
+	const tunnelKey = `${connectionId}:${remoteHost}:${remotePort}`;
+
+	if (activeTunnels.has(tunnelKey)) {
+		const tunnel = activeTunnels.get(tunnelKey)!;
+		const result = await window.ipcRenderer.ssh.closeTunnel(
+			tunnel.tunnelId
+		);
+
+		if (result.success) {
+			activeTunnels.delete(tunnelKey);
+		}
+
+		return result.success;
+	}
+
+	return false;
+}
+
+/**
+ * Close all SSH tunnels for a specific connection
+ */
+export async function closeAllConnectionTunnels(
+	connectionId: string
+): Promise<void> {
+	// Find all tunnels for this connection
+	for (const [key, tunnel] of activeTunnels.entries()) {
+		if (tunnel.connectionId === connectionId) {
+			await window.ipcRenderer.ssh.closeTunnel(tunnel.tunnelId);
+			activeTunnels.delete(key);
+		}
+	}
+}
+
+/**
+ * Close all active SSH tunnels
+ */
+export async function closeAllTunnels(): Promise<void> {
+	for (const tunnel of Array.from(activeTunnels.values())) {
+		await window.ipcRenderer.ssh.closeTunnel(tunnel.tunnelId);
+	}
+
+	activeTunnels.clear();
+}
diff --git a/src/store/connections.ts b/src/store/connections.ts
index 1ec01c4..f0d1862 100644
--- a/src/store/connections.ts
+++ b/src/store/connections.ts
@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia';
 import { computed, ref, toRaw } from 'vue';
 import { ProjectConnection } from '@/types/project';
+import { ConnectionStatus, ConnectionType } from '@/types/connection-types';
+import { AppConnection } from '@/types/ssh-connection';
 
 export const useConnectionsStore = defineStore('connections', () => {
 	const connections = ref<ProjectConnection[]>([]);
@@ -26,16 +28,74 @@ export const useConnectionsStore = defineStore('connections', () => {
 						Array.isArray(savedProjects) &&
 						savedProjects.length > 0
 					) {
-						for (const project of savedProjects) {
-							const check =
-								await window.ipcRenderer.testMySQLConnection(
-									toRaw(project.db_config)
-								);
-
-							project.isValid = check.success;
-							project.status = check.success
-								? 'connected'
-								: 'disconnected';
+						if (id) {
+							const projectToValidate = savedProjects.find(
+								(project) => project.id === id
+							);
+							if (projectToValidate) {
+								let check = { success: false, message: '' };
+
+								if (
+									projectToValidate.type ===
+										ConnectionType.SSH &&
+									projectToValidate.sshConfig
+								) {
+									check = {
+										success: true,
+										message:
+											'SSH connection (validation skipped)'
+									};
+								} else if (projectToValidate.dbConfig) {
+									const AppConnection = {
+										localDbConfig: toRaw(
+											projectToValidate.dbConfig
+										),
+										remote: toRaw(
+											projectToValidate.sshConfig
+										)
+									} as AppConnection;
+
+									check =
+										await window.ipcRenderer.testMySQLConnection(
+											AppConnection
+										);
+								}
+
+								projectToValidate.isValid = check.success;
+								projectToValidate.status = check.success
+									? ConnectionStatus.Connected
+									: ConnectionStatus.Disconnected;
+							}
+						} else {
+							for (const project of savedProjects) {
+								let check = { success: false, message: '' };
+
+								if (
+									project.type === ConnectionType.SSH &&
+									project.sshConfig
+								) {
+									check = {
+										success: true,
+										message:
+											'SSH connection (validation skipped)'
+									};
+								} else if (project.dbConfig) {
+									const AppConnection = {
+										localDbConfig: toRaw(project.dbConfig),
+										remote: toRaw(project.sshConfig)
+									} as AppConnection;
+
+									check =
+										await window.ipcRenderer.testMySQLConnection(
+											AppConnection
+										);
+								}
+
+								project.isValid = check.success;
+								project.status = check.success
+									? ConnectionStatus.Connected
+									: ConnectionStatus.Disconnected;
+							}
 						}
 
 						connections.value = savedProjects;
diff --git a/src/store/dataTable.ts b/src/store/dataTable.ts
index eef36a1..5201519 100644
--- a/src/store/dataTable.ts
+++ b/src/store/dataTable.ts
@@ -2,10 +2,21 @@ import { defineStore } from 'pinia';
 import { useConnectionsStore } from '@/store/connections';
 import { computed, ref, toRaw } from 'vue';
 import { TableColumn, TableRecord } from '@/types/table';
+import { AppConnection } from '@/types/ssh-connection';
 
 export interface TableRow {
 	id: string | number;
-	[key: string]: any;
+	[key: string]: string | number | boolean | null | Date | Buffer | undefined;
+}
+
+interface TableStructure {
+	name: string;
+	foreign_key?: boolean;
+	type?: string;
+	nullable?: boolean;
+	default?: string | null;
+	key?: string;
+	extra?: string;
 }
 
 export const useDataTableStore = (table: string) => {
@@ -15,7 +26,7 @@ export const useDataTableStore = (table: string) => {
 		const foreignKeyColumns = ref<string[]>([]);
 		const lastKnownColumns = ref<TableColumn[]>([]);
 		const tableData = ref<TableRow[]>([]);
-		const tableStructure = ref<any[]>([]);
+		const tableStructure = ref<TableStructure[]>([]);
 		const isFirstLoad = ref(true);
 		const isLoading = ref(true);
 		const filterTerm = ref('');
@@ -30,10 +41,12 @@ export const useDataTableStore = (table: string) => {
 
 		const columns = computed<TableColumn[]>(() => {
 			if (tableStructure.value.length > 0) {
-				const newColumns = tableStructure.value.map((col: any) => ({
-					field: col.name,
-					width: 150
-				}));
+				const newColumns = tableStructure.value.map(
+					(col: TableStructure) => ({
+						field: col.name,
+						width: 150
+					})
+				);
 
 				const idIndex = newColumns.findIndex(
 					(col: TableColumn) => col.field === 'id'
@@ -89,11 +102,17 @@ export const useDataTableStore = (table: string) => {
 
 		async function getTableForeignKeys(tableName: string) {
 			const project = connectionStore.getSelectedProject;
+			if (!project) return [];
 
 			try {
+				const AppConnection = {
+					localDbConfig: toRaw(project.dbConfig),
+					remote: toRaw(project.sshConfig)
+				} as AppConnection;
+
 				const { success, foreignKeys, message } =
 					await window.ipcRenderer.getTableForeignKeys(
-						toRaw(project?.db_config),
+						AppConnection,
 						tableName
 					);
 
@@ -113,9 +132,20 @@ export const useDataTableStore = (table: string) => {
 		}
 
 		async function getTableStructure(tableName: string) {
+			const project = connectionStore.getSelectedProject;
+
+			if (!project) {
+				throw new Error('No project selected');
+			}
+
 			try {
+				const AppConnection = {
+					localDbConfig: toRaw(project.dbConfig),
+					remote: toRaw(project.sshConfig)
+				} as AppConnection;
+
 				return await window.ipcRenderer.getTableStructure(
-					toRaw(connectionStore.getSelectedProject?.db_config),
+					AppConnection,
 					tableName
 				);
 			} catch (err) {
@@ -125,9 +155,20 @@ export const useDataTableStore = (table: string) => {
 		}
 
 		async function getTableData(tableName: string) {
+			const selectedProject = connectionStore.getSelectedProject;
+
+			if (!selectedProject) {
+				throw new Error('No project selected');
+			}
+
 			try {
 				isLoading.value = true;
 
+				const AppConnection = {
+					localDbConfig: toRaw(selectedProject.dbConfig),
+					remote: toRaw(selectedProject.sshConfig)
+				} as AppConnection;
+
 				const params = {
 					limit: rowsPerPage.value,
 					page: currentPage.value,
@@ -135,9 +176,7 @@ export const useDataTableStore = (table: string) => {
 					sortDirection: currentSortDirection.value,
 					filter: activeFilter.value,
 					tableName: tableName,
-					dbConnection: toRaw(
-						connectionStore.getSelectedProject?.db_config
-					)
+					appConnection: AppConnection
 				} as TableRecord;
 
 				const response =
@@ -150,7 +189,7 @@ export const useDataTableStore = (table: string) => {
 					}
 
 					tableData.value = response.data.map(
-						(row: any, index: number) => {
+						(row: Record<string, unknown>, index: number) => {
 							if (row.id === undefined) {
 								return { id: `row-${index}`, ...row };
 							}
@@ -159,6 +198,12 @@ export const useDataTableStore = (table: string) => {
 					);
 
 					totalRecords.value = response.totalRecords;
+				} else {
+					console.error(
+						'Failed to get table records:',
+						response.message
+					);
+					tableData.value = [];
 				}
 			} catch (err) {
 				console.error('Error getting table data:', err);
diff --git a/src/store/database.ts b/src/store/database.ts
index 0cd746a..29b1255 100644
--- a/src/store/database.ts
+++ b/src/store/database.ts
@@ -3,8 +3,8 @@ import { ref, computed, toRaw } from 'vue';
 import { ProjectConnection } from '@/types/project';
 import { Table, TableList } from '@/types/table';
 import { useConnectionsStore } from '@/store/connections';
-import { MysqlConnection } from '@/types/mysql-connection';
 import { useSidebarStore } from '@/store/sidebar';
+import { AppConnection } from '@/types/ssh-connection';
 
 export const useDatabaseStore = defineStore('database', () => {
 	const connectionStore = useConnectionsStore();
@@ -69,53 +69,56 @@ export const useDatabaseStore = defineStore('database', () => {
 		table.isApproximate = isApproximate;
 	}
 
-	const sanitizeIds = (ids: any) =>
-		ids.map((id: any) => (id && typeof id === 'object' ? String(id) : id));
-
 	function markAllTablesApproximate(tables: Table[], isApproximate: boolean) {
 		for (const table of tables) {
 			table.isApproximate = isApproximate;
 		}
 	}
 
+	const sanitizeIds = (
+		ids: Array<string | number | Record<string, unknown>>
+	) =>
+		ids.map((id: string | number | Record<string, unknown>) =>
+			id && typeof id === 'object' ? String(id) : id
+		);
+
 	async function loadTables(project: ProjectConnection) {
 		isLoading.value = true;
 
 		try {
 			const storageKey = `tables-${project.id}`;
 
-			try {
-				const storedData = localStorage.getItem(storageKey);
+			const storedData = localStorage.getItem(storageKey);
 
-				if (storedData) {
+			if (storedData) {
+				try {
 					const parsedData = JSON.parse(storedData);
 
-					if (parsedData && parsedData.tables) {
-						const cacheExpired =
-							!parsedData.timestamp ||
-							Date.now() - parsedData.timestamp > 10000;
-
-						if (!cacheExpired) {
+					if (
+						parsedData &&
+						parsedData.tables &&
+						Array.isArray(parsedData.tables) &&
+						parsedData.timestamp
+					) {
+						if (Date.now() - parsedData.timestamp < 10000) {
 							tables.value = parsedData;
-
 							isLoading.value = false;
-							return;
-						} else {
-							console.log('Cache expired, fetching fresh data');
+							return parsedData.tables;
 						}
 					}
+				} catch (err) {
+					console.error('Error parsing stored tables:', err);
 				}
-			} catch (storageError) {
-				console.error(
-					'Error reading tables from localStorage:',
-					storageError
-				);
 			}
 
-			const databaseConnection = toRaw(project.db_config);
+			const AppConnection = {
+				localDbConfig: toRaw(project.dbConfig),
+				remote: toRaw(project.sshConfig)
+			} as AppConnection;
 
-			const result =
-				await window.ipcRenderer.listTables(databaseConnection);
+			const result = await window.ipcRenderer.listTables(
+				toRaw(AppConnection)
+			);
 
 			tables.value =
 				result.success && result.tables
@@ -138,14 +141,21 @@ export const useDatabaseStore = defineStore('database', () => {
 		} finally {
 			isLoading.value = false;
 		}
+
+		return tables.value.tables;
 	}
 
 	async function truncateTable(
-		connection: MysqlConnection,
+		project: ProjectConnection,
 		tableName: string
 	) {
+		const AppConnection = {
+			localDbConfig: toRaw(project.dbConfig),
+			remote: toRaw(project.sshConfig)
+		} as AppConnection;
+
 		const result = await window.ipcRenderer.truncateTable(
-			toRaw(connection),
+			AppConnection,
 			tableName
 		);
 
@@ -168,16 +178,13 @@ export const useDatabaseStore = defineStore('database', () => {
 		const results = await Promise.all(
 			tableNames.map(async (tableName) => {
 				try {
-					const result = await truncateTable(
-						project.db_config,
-						tableName
-					);
+					const result = await truncateTable(project, tableName);
 					return {
 						tableName,
 						success: result.success,
 						message: result.message
 					};
-				} catch (error: any) {
+				} catch (error: unknown) {
 					console.error(
 						`Error truncating table ${tableName}:`,
 						error
@@ -185,7 +192,10 @@ export const useDatabaseStore = defineStore('database', () => {
 					return {
 						tableName,
 						success: false,
-						message: error.message || 'Error truncating table'
+						message:
+							error instanceof Error
+								? error.message
+								: 'Error truncating table'
 					};
 				}
 			})
@@ -220,8 +230,13 @@ export const useDatabaseStore = defineStore('database', () => {
 
 		const project = connectionStore.getSelectedProject as ProjectConnection;
 
+		const AppConnection = {
+			localDbConfig: toRaw(project.dbConfig),
+			remote: toRaw(project.sshConfig)
+		} as AppConnection;
+
 		const deleteConfig = {
-			dbConnection: toRaw(project.db_config),
+			appConnection: AppConnection,
 			tableName,
 			ids: sanitizeIds(ids),
 			ignoreForeignKeys
@@ -235,9 +250,10 @@ export const useDatabaseStore = defineStore('database', () => {
 
 		if (getTable) {
 			const countResult = await window.ipcRenderer.getTableRecordCount(
-				toRaw(project.db_config),
+				AppConnection,
 				toRaw(getTable)
 			);
+
 			if (countResult && countResult.success) {
 				sidebarStore.updateTableRecordCount(
 					tableName,
diff --git a/src/store/project.ts b/src/store/project.ts
index 821cd10..05e8f88 100644
--- a/src/store/project.ts
+++ b/src/store/project.ts
@@ -7,7 +7,7 @@ export const useProjectStore = defineStore('project', () => {
 	const models = ref<Models>({ models: [], success: false });
 
 	const targetDatabase = computed(
-		() => selectedProject.value?.db_config.database || ''
+		() => selectedProject.value?.dbConfig?.database
 	);
 
 	const state = reactive({
diff --git a/src/store/projectLogs.ts b/src/store/projectLogs.ts
index 03d8ead..4a7c6e0 100644
--- a/src/store/projectLogs.ts
+++ b/src/store/projectLogs.ts
@@ -1,7 +1,25 @@
 import { defineStore } from 'pinia';
-import { ref, computed } from 'vue';
-import { LogEntry, LogFile } from '@/types/project';
+import { computed, ref } from 'vue';
+import { LogEntry, LogFile } from '@/types/project.d';
 import { useProjectStore } from '@/store/project';
+import { SshConnection } from '@/types/ssh-connection.d';
+import {
+	findRemoteLogFiles,
+	listRemoteFiles,
+	readRemoteFile
+} from '@/services/remote-file-service';
+
+interface GuessedRemoteFileEntry {
+	filename?: string;
+	name?: string;
+	isDirectory?: boolean;
+	attrs?: {
+		size?: number;
+		mtime?: number;
+	};
+	size?: number;
+	mtime?: number;
+}
 
 export const useProjectLogsStore = defineStore('projectLogs', () => {
 	const logFiles = ref<LogFile[]>([]);
@@ -11,9 +29,11 @@ export const useProjectLogsStore = defineStore('projectLogs', () => {
 	const selectedLogType = ref('ALL');
 	const isLoading = ref(false);
 	const error = ref<string | null>(null);
-
 	const currentPage = ref(1);
 	const itemsPerPage = ref(20);
+
+	const projectStore = useProjectStore();
+
 	const totalPages = computed(() =>
 		Math.ceil(logEntries.value.length / itemsPerPage.value)
 	);
@@ -24,55 +44,87 @@ export const useProjectLogsStore = defineStore('projectLogs', () => {
 		return logEntries.value.slice(start, end);
 	});
 
-	const projectStore = useProjectStore();
-
 	const availableLogTypes = computed(() => {
 		return ['ALL', 'ERROR', 'WARNING', 'INFO', 'DEBUG'];
 	});
 
-	async function loadLogFiles() {
-		if (!projectStore.selectedProject?.projectPath) {
-			error.value = 'No project selected';
-			return;
-		}
-
-		isLoading.value = true;
-		error.value = null;
+	function normalizePath(path: string): string {
+		return path.replace(/\/+/g, '/');
+	}
 
-		try {
-			const result = await window.ipcRenderer.getProjectLogs(
-				projectStore.selectedProject.projectPath
+	function parseLogContent(
+		content: string,
+		searchTerm: string,
+		logType: string
+	): LogEntry[] {
+		const entries: LogEntry[] = [];
+		const lines = content.split('\n');
+		let currentEntry: LogEntry | null = null;
+
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i];
+			const logMatch = line.match(
+				/\[([\d\-\s:]+)]\s+(\w+)\.(\w+):\s+(.*)/
 			);
 
-			if (result.success) {
-				logFiles.value = result.logs || [];
-
-				if (logFiles.value.length > 0 && !selectedLogFile.value) {
-					selectedLogFile.value = logFiles.value[0];
-					await loadLogFileContent(selectedLogFile.value.path);
+			if (logMatch) {
+				if (currentEntry) {
+					entries.push(currentEntry);
 				}
-			} else {
-				error.value = result.message || 'Failed to load log files';
-				logFiles.value = [];
+
+				currentEntry = {
+					timestamp: logMatch[1],
+					level: logMatch[3],
+					message: logMatch[4],
+					content: [line]
+				};
+			} else if (currentEntry && line.trim() !== '') {
+				currentEntry.content.push(line);
 			}
-		} catch (err: any) {
-			console.error('Error loading log files:', err);
-			error.value =
-				err.message || 'An error occurred while loading log files';
-			logFiles.value = [];
-		} finally {
-			isLoading.value = false;
+		}
+
+		if (currentEntry) {
+			entries.push(currentEntry);
+		}
+
+		return entries.filter((entry) => {
+			const matchesType = logType === 'ALL' || entry.level === logType;
+			const matchesSearch =
+				!searchTerm ||
+				entry.message
+					.toLowerCase()
+					.includes(searchTerm.toLowerCase()) ||
+				entry.content.some((line) =>
+					line.toLowerCase().includes(searchTerm.toLowerCase())
+				);
+
+			return matchesType && matchesSearch;
+		});
+	}
+
+	function setError(err: unknown, defaultMessage: string): void {
+		console.error(defaultMessage, err);
+		error.value = err instanceof Error ? err.message : defaultMessage;
+	}
+
+	function selectFirstLogFile(): void {
+		if (logFiles.value.length > 0 && !selectedLogFile.value) {
+			selectedLogFile.value = logFiles.value[0];
 		}
 	}
 
-	async function refreshLogs() {
+	function sanitizeObject<T>(obj: T): T {
+		return structuredClone(JSON.parse(JSON.stringify(obj)));
+	}
+
+	async function loadLogFiles() {
 		if (!projectStore.selectedProject?.projectPath) {
 			error.value = 'No project selected';
 			return;
 		}
 
+		isLoading.value = true;
 		error.value = null;
-		const previousFile = selectedLogFile.value;
 
 		try {
 			const result = await window.ipcRenderer.getProjectLogs(
@@ -81,47 +133,20 @@ export const useProjectLogsStore = defineStore('projectLogs', () => {
 
 			if (result.success) {
 				logFiles.value = result.logs || [];
+				selectFirstLogFile();
 
-				if (previousFile) {
-					const sameFile = logFiles.value.find(
-						(file) => file.path === previousFile.path
-					);
-					if (sameFile) {
-						selectedLogFile.value = sameFile;
-						await loadLogFileContent(
-							sameFile.path,
-							searchTerm.value,
-							selectedLogType.value,
-							false
-						);
-					} else if (logFiles.value.length > 0) {
-						selectedLogFile.value = logFiles.value[0];
-						await loadLogFileContent(
-							selectedLogFile.value.path,
-							'',
-							'ALL',
-							false
-						);
-					}
-				} else if (
-					logFiles.value.length > 0 &&
-					!selectedLogFile.value
-				) {
-					selectedLogFile.value = logFiles.value[0];
-					await loadLogFileContent(
-						selectedLogFile.value.path,
-						'',
-						'ALL',
-						false
-					);
+				if (selectedLogFile.value) {
+					await loadLogFileContent(selectedLogFile.value.path);
 				}
 			} else {
 				error.value = result.message || 'Failed to load log files';
+				logFiles.value = [];
 			}
-		} catch (err: any) {
-			console.error('Error refreshing log files:', err);
-			error.value =
-				err.message || 'An error occurred while refreshing log files';
+		} catch (err) {
+			setError(err, 'An error occurred while loading log files');
+			logFiles.value = [];
+		} finally {
+			isLoading.value = false;
 		}
 	}
 
@@ -155,10 +180,8 @@ export const useProjectLogsStore = defineStore('projectLogs', () => {
 				error.value = result.message || 'Failed to load log content';
 				logEntries.value = [];
 			}
-		} catch (err: any) {
-			console.error('Error loading log content:', err);
-			error.value =
-				err.message || 'An error occurred while loading log content';
+		} catch (err) {
+			setError(err, 'An error occurred while loading log content');
 			logEntries.value = [];
 		} finally {
 			if (setLoadingState) {
@@ -167,30 +190,40 @@ export const useProjectLogsStore = defineStore('projectLogs', () => {
 		}
 	}
 
-	async function filterLogs(setLoadingState: boolean = true) {
-		if (selectedLogFile.value) {
-			if (setLoadingState) {
-				isLoading.value = true;
+	async function filterLogs(isSSHConnection: boolean = false) {
+		if (!selectedLogFile.value) return;
+
+		if (isSSHConnection) {
+			if (!projectStore.selectedProject?.sshConfig) {
+				error.value = 'No SSH connection configured';
+				return;
 			}
-			try {
-				const result = await window.ipcRenderer.readLogFile(
-					selectedLogFile.value.path,
-					searchTerm.value,
-					selectedLogType.value
-				);
 
-				if (result.success) {
-					logEntries.value = result.entries || [];
-					currentPage.value = 1;
-				} else {
-					error.value = result.message || 'Failed to filter logs';
-				}
-			} catch (err: any) {
-				console.error('Error filtering logs:', err);
-				error.value =
-					err.message || 'An error occurred while filtering logs';
-			} finally {
-				if (setLoadingState) {
+			await loadRemoteLogFileContent(
+				projectStore.selectedProject.sshConfig,
+				selectedLogFile.value.path,
+				searchTerm.value,
+				selectedLogType.value
+			);
+		} else {
+			if (selectedLogFile.value) {
+				isLoading.value = true;
+				try {
+					const result = await window.ipcRenderer.readLogFile(
+						selectedLogFile.value.path,
+						searchTerm.value,
+						selectedLogType.value
+					);
+
+					if (result.success) {
+						logEntries.value = result.entries || [];
+						currentPage.value = 1;
+					} else {
+						error.value = result.message || 'Failed to filter logs';
+					}
+				} catch (err) {
+					setError(err, 'An error occurred while filtering logs');
+				} finally {
 					isLoading.value = false;
 				}
 			}
@@ -214,15 +247,11 @@ export const useProjectLogsStore = defineStore('projectLogs', () => {
 			}
 
 			return result;
-		} catch (err: any) {
-			console.error('Error deleting log entry:', err);
-			error.value =
-				err.message || 'An error occurred while deleting the log entry';
+		} catch (err) {
+			setError(err, 'An error occurred while deleting the log entry');
 			return {
 				success: false,
-				message:
-					err.message ||
-					'An error occurred while deleting the log entry'
+				message: error.value
 			};
 		}
 	}
@@ -246,14 +275,11 @@ export const useProjectLogsStore = defineStore('projectLogs', () => {
 			}
 
 			return result;
-		} catch (err: any) {
-			console.error('Error clearing log files:', err);
-			error.value =
-				err.message || 'An error occurred while clearing log files';
+		} catch (err) {
+			setError(err, 'An error occurred while clearing log files');
 			return {
 				success: false,
-				message:
-					err.message || 'An error occurred while clearing log files'
+				message: error.value
 			};
 		}
 	}
@@ -278,18 +304,225 @@ export const useProjectLogsStore = defineStore('projectLogs', () => {
 			}
 
 			return result;
-		} catch (err: any) {
-			console.error('Error deleting log files:', err);
-			error.value =
-				err.message || 'An error occurred while deleting log files';
+		} catch (err) {
+			setError(err, 'An error occurred while deleting log files');
 			return {
 				success: false,
-				message:
-					err.message || 'An error occurred while deleting log files'
+				message: error.value
 			};
 		}
 	}
 
+	async function loadRemoteLogFiles(sshConfig: SshConnection) {
+		isLoading.value = true;
+		error.value = null;
+		logFiles.value = [];
+
+		try {
+			const logsPath = normalizePath(
+				`${sshConfig.remotePath}/storage/logs`
+			);
+
+			if (await tryLoadLaravelLog(sshConfig, logsPath)) return;
+
+			if (await tryLoadFromDirectory(sshConfig, logsPath)) return;
+
+			const storagePath = normalizePath(
+				`${sshConfig.remotePath}/storage`
+			);
+
+			if (await tryLoadFromDirectory(sshConfig, storagePath)) return;
+
+			const altPath = normalizePath(
+				`${sshConfig.remotePath}/app/storage/logs`
+			);
+			if (await tryLoadFromDirectory(sshConfig, altPath)) return;
+
+			if (await tryFindLogFilesRecursively(sshConfig)) return;
+
+			error.value =
+				'No log files found anywhere in the project. Does your application generate logs?';
+		} catch (err) {
+			setError(err, 'An error occurred while loading remote log files');
+		} finally {
+			isLoading.value = false;
+		}
+	}
+
+	async function tryLoadLaravelLog(
+		sshConfig: SshConnection,
+		logsPath: string
+	): Promise<boolean> {
+		try {
+			const laravelLogPath = normalizePath(`${logsPath}/laravel.log`);
+
+			const sanitizedConfig = sanitizeObject(sshConfig);
+
+			const fileCheckCommand = `test -f "${laravelLogPath}" && echo "File exists" || echo "File does not exist"`;
+			const result = await window.ipcRenderer.ssh.executeCommand(
+				sanitizedConfig,
+				fileCheckCommand
+			);
+
+			if (result.stdout.includes('File exists')) {
+				try {
+					const content = await readRemoteFile(
+						sshConfig,
+						laravelLogPath
+					);
+					if (content) {
+						logFiles.value = [
+							{
+								name: 'laravel.log',
+								path: laravelLogPath,
+								size: content.length,
+								modified: new Date()
+							}
+						];
+
+						selectedLogFile.value = logFiles.value[0];
+						logEntries.value = parseLogContent(
+							content,
+							searchTerm.value,
+							selectedLogType.value
+						);
+						currentPage.value = 1;
+						return true;
+					}
+				} catch (readError) {
+					console.error(
+						'Error reading laravel.log directly:',
+						readError
+					);
+				}
+			}
+		} catch (err) {
+			console.error('Error checking for laravel.log directly:', err);
+		}
+		return false;
+	}
+
+	async function tryLoadFromDirectory(
+		sshConfig: SshConnection,
+		dirPath: string
+	): Promise<boolean> {
+		try {
+			const files = await listRemoteFiles(sshConfig, dirPath);
+
+			if (files && files.length > 0) {
+				const logFilesList = files.filter((file) => {
+					if (!file) return false;
+
+					const f = file as GuessedRemoteFileEntry;
+					const fileName = f.filename || f.name;
+					const isDirectory =
+						typeof f.isDirectory === 'boolean'
+							? f.isDirectory
+							: !(fileName && fileName.includes('.'));
+
+					if (!fileName) return false;
+					return fileName.endsWith('.log') && !isDirectory;
+				});
+
+				if (logFilesList.length > 0) {
+					logFiles.value = logFilesList.map((file) => {
+						const f = file as GuessedRemoteFileEntry;
+						const fileName = f.filename || f.name;
+						const fileSize = f.attrs?.size ?? f.size ?? 0;
+						const modTimeRaw =
+							f.attrs?.mtime ?? f.mtime ?? Date.now() / 1000;
+						const modTime =
+							modTimeRaw > 1000000000000
+								? modTimeRaw
+								: modTimeRaw * 1000;
+
+						return {
+							name: fileName as string,
+							path: normalizePath(`${dirPath}/${fileName}`),
+							size: fileSize as number,
+							modified: new Date(modTime)
+						};
+					});
+
+					if (logFiles.value.length > 0) {
+						selectedLogFile.value = logFiles.value[0];
+						await loadRemoteLogFileContent(
+							sshConfig,
+							selectedLogFile.value.path
+						);
+						return true;
+					}
+				}
+			}
+		} catch (err) {
+			console.error(`Error accessing directory ${dirPath}:`, err);
+		}
+		return false;
+	}
+
+	async function tryFindLogFilesRecursively(
+		sshConfig: SshConnection
+	): Promise<boolean> {
+		try {
+			const logFilePaths = await findRemoteLogFiles(
+				sshConfig,
+				sshConfig.remotePath
+			);
+
+			if (logFilePaths && logFilePaths.length > 0) {
+				logFiles.value = logFilePaths.map((filePath) => {
+					const pathParts = filePath.split('/');
+					const fileName = pathParts[pathParts.length - 1];
+
+					return {
+						name: fileName,
+						path: normalizePath(filePath),
+						size: 0,
+						modified: new Date()
+					};
+				});
+
+				if (logFiles.value.length > 0) {
+					selectedLogFile.value = logFiles.value[0];
+					await loadRemoteLogFileContent(
+						sshConfig,
+						selectedLogFile.value.path
+					);
+					return true;
+				}
+			}
+		} catch (err) {
+			console.error('Error finding log files recursively:', err);
+		}
+		return false;
+	}
+
+	async function loadRemoteLogFileContent(
+		sshConnection: SshConnection,
+		filePath: string,
+		term: string = searchTerm.value,
+		type: string = selectedLogType.value
+	) {
+		if (!filePath) {
+			error.value = 'No log file selected';
+			return;
+		}
+
+		isLoading.value = true;
+		error.value = null;
+
+		try {
+			const fileContent = await readRemoteFile(sshConnection, filePath);
+			logEntries.value = parseLogContent(fileContent, term, type);
+			currentPage.value = 1;
+		} catch (err) {
+			setError(err, 'An error occurred while loading remote log content');
+			logEntries.value = [];
+		} finally {
+			isLoading.value = false;
+		}
+	}
+
 	function nextPage() {
 		if (currentPage.value < totalPages.value) {
 			currentPage.value++;
@@ -302,6 +535,74 @@ export const useProjectLogsStore = defineStore('projectLogs', () => {
 		}
 	}
 
+	async function refreshLogs(isSSHConnection: boolean = false) {
+		if (isSSHConnection) {
+			if (!projectStore.selectedProject?.sshConfig) {
+				error.value = 'No SSH connection configured';
+				return;
+			}
+
+			const sshConfig = projectStore.selectedProject.sshConfig;
+			await loadRemoteLogFiles(sshConfig);
+		} else {
+			if (!projectStore.selectedProject?.projectPath) {
+				error.value = 'No project selected';
+				return;
+			}
+
+			error.value = null;
+			const previousFile = selectedLogFile.value;
+
+			try {
+				const result = await window.ipcRenderer.getProjectLogs(
+					projectStore.selectedProject.projectPath
+				);
+
+				if (result.success) {
+					logFiles.value = result.logs || [];
+
+					if (previousFile) {
+						const sameFile = logFiles.value.find(
+							(file) => file.path === previousFile.path
+						);
+						if (sameFile) {
+							selectedLogFile.value = sameFile;
+							await loadLogFileContent(
+								sameFile.path,
+								searchTerm.value,
+								selectedLogType.value,
+								false
+							);
+						} else if (logFiles.value.length > 0) {
+							selectedLogFile.value = logFiles.value[0];
+							await loadLogFileContent(
+								selectedLogFile.value.path,
+								'',
+								'ALL',
+								false
+							);
+						}
+					} else if (
+						logFiles.value.length > 0 &&
+						!selectedLogFile.value
+					) {
+						selectedLogFile.value = logFiles.value[0];
+						await loadLogFileContent(
+							selectedLogFile.value.path,
+							'',
+							'ALL',
+							false
+						);
+					}
+				} else {
+					error.value = result.message || 'Failed to load log files';
+				}
+			} catch (err) {
+				setError(err, 'An error occurred while refreshing log files');
+			}
+		}
+	}
+
 	return {
 		logFiles,
 		logEntries,
@@ -316,6 +617,7 @@ export const useProjectLogsStore = defineStore('projectLogs', () => {
 		itemsPerPage,
 		totalPages,
 		loadLogFiles,
+		loadRemoteLogFiles,
 		filterLogs,
 		nextPage,
 		prevPage,
diff --git a/src/store/redis.ts b/src/store/redis.ts
index 70db49e..403b7f4 100644
--- a/src/store/redis.ts
+++ b/src/store/redis.ts
@@ -33,16 +33,16 @@ export const useRedisStore = defineStore('redis', () => {
 	const hasMoreKeys = computed(() => keysCursor.value !== '0');
 
 	async function checkRedisAvailability(project: ProjectConnection) {
-		if (!project.redis_config.host || !project.redis_config.port) {
+		if (!project.redisConfig.host || !project.redisConfig.port) {
 			isRedisAvailable.value = false;
 			return;
 		}
 
 		try {
 			const config = {
-				host: project.redis_config.host,
-				port: project.redis_config.port,
-				password: project.redis_config.password
+				host: project.redisConfig.host,
+				port: project.redisConfig.port,
+				password: project.redisConfig.password
 			};
 
 			const result = await window.ipcRenderer.checkRedisStatus(
diff --git a/src/store/sidebar.ts b/src/store/sidebar.ts
index f272695..574771c 100644
--- a/src/store/sidebar.ts
+++ b/src/store/sidebar.ts
@@ -1,10 +1,12 @@
 import { defineStore } from 'pinia';
-import { ref, computed, toRaw } from 'vue';
+import { computed, ref, toRaw } from 'vue';
 import { useDatabaseStore } from '@/store/database';
-import { ModelInfo, Models, ProjectConnection } from '@/types/project';
+import { ModelInfo, ProjectConnection } from '@/types/project';
 import { useProjectStore } from '@/store/project';
 import { Table } from '@/types/table';
 import { useConnectionsStore } from '@/store/connections';
+import { ConnectionType } from '@/types/connection-types';
+import { AppConnection } from '@/types/ssh-connection';
 
 export const useSidebarStore = defineStore('sidebar', () => {
 	const databaseStore = useDatabaseStore();
@@ -101,16 +103,24 @@ export const useSidebarStore = defineStore('sidebar', () => {
 
 		lastLoadedConnection.value = project.id as string;
 
-		try {
-			const { success, models } = (await projectStore.getModelsForTables(
-				project
-			)) as Models;
-
-			if (success && models && typeof models === 'object') {
-				projectModels.value = models;
+		if (project.type === ConnectionType.SSH) {
+			projectModels.value = [];
+		} else {
+			try {
+				const modelResponse =
+					await projectStore.getModelsForTables(project);
+
+				if (
+					modelResponse &&
+					modelResponse.success &&
+					modelResponse.models &&
+					typeof modelResponse.models === 'object'
+				) {
+					projectModels.value = modelResponse.models;
+				}
+			} catch (err) {
+				console.error('Error loading models for tables:', err);
 			}
-		} catch (err) {
-			console.error('Error loading models for tables:', err);
 		}
 
 		await databaseStore.loadTables(project);
@@ -167,8 +177,13 @@ export const useSidebarStore = defineStore('sidebar', () => {
 		project: ProjectConnection
 	) {
 		try {
+			const AppConnection = {
+				localDbConfig: toRaw(project.dbConfig),
+				remote: toRaw(project.sshConfig)
+			} as AppConnection;
+
 			const countResult = await window.ipcRenderer.getTableRecordCount(
-				toRaw(project.db_config),
+				AppConnection,
 				toRaw(table)
 			);
 
diff --git a/src/types/connection-types.ts b/src/types/connection-types.ts
new file mode 100644
index 0000000..f35bc75
--- /dev/null
+++ b/src/types/connection-types.ts
@@ -0,0 +1,42 @@
+export enum ConnectionType {
+	MySQL = 'mysql',
+	SSH = 'ssh'
+}
+
+export enum ConnectionStatus {
+	Connected = 'connected',
+	Disconnected = 'disconnected'
+}
+
+export function getConnectionTypeIcon(type: ConnectionType): string {
+	switch (type) {
+		case ConnectionType.MySQL:
+			return 'M';
+		case ConnectionType.SSH:
+			return 'S';
+		default:
+			return '';
+	}
+}
+
+export function getConnectionTypeColor(type: ConnectionType): string {
+	switch (type) {
+		case ConnectionType.MySQL:
+			return 'bg-orange-500';
+		case ConnectionType.SSH:
+			return 'bg-purple-600';
+		default:
+			return 'bg-neutral';
+	}
+}
+
+export function getConnectionTypeLabel(type: ConnectionType): string {
+	switch (type) {
+		case ConnectionType.MySQL:
+			return 'MySQL';
+		case ConnectionType.SSH:
+			return 'SSH Remote';
+		default:
+			return 'Unknown';
+	}
+}
diff --git a/src/types/electron-api.d.ts b/src/types/electron-api.d.ts
new file mode 100644
index 0000000..2049964
--- /dev/null
+++ b/src/types/electron-api.d.ts
@@ -0,0 +1,84 @@
+import { SshConnection } from './ssh-connection';
+
+interface IpcRendererAPI {
+	// General IPC methods
+	on(channel: string, func: (...args: any[]) => void): void;
+	once(channel: string, func: (...args: any[]) => void): void;
+	removeListener(channel: string, func: (...args: any[]) => void): void;
+	removeAllListeners(channel: string): void;
+	send(channel: string, ...args: any[]): void;
+	invoke(channel: string, ...args: any[]): Promise<any>;
+
+	// SSH Operations
+	ssh: {
+		testConnection: (
+			config: SshConnection
+		) => Promise<{ success: boolean; message: string }>;
+		executeCommand: (
+			config: SshConnection,
+			command: string
+		) => Promise<{
+			stdout: string;
+			stderr: string;
+			code: number | null;
+		}>;
+		readFile: (
+			config: SshConnection,
+			filePath: string
+		) => Promise<{
+			success: boolean;
+			content?: string;
+			error?: string;
+		}>;
+		writeFile: (
+			config: SshConnection,
+			filePath: string,
+			content: string
+		) => Promise<{
+			success: boolean;
+			error?: string;
+		}>;
+		listFiles: (
+			config: SshConnection,
+			dirPath: string
+		) => Promise<{
+			success: boolean;
+			files?: any[];
+			error?: string;
+		}>;
+		getEnv: (config: SshConnection) => Promise<{
+			success: boolean;
+			content?: string;
+			error?: string;
+		}>;
+		updateEnv: (
+			config: SshConnection,
+			content: string
+		) => Promise<{
+			success: boolean;
+			error?: string;
+		}>;
+		closeConnection: (
+			config: SshConnection
+		) => Promise<{ success: boolean }>;
+		// Tunnel operations
+		createTunnel: (
+			config: SshConnection,
+			remoteHost: string,
+			remotePort: number,
+			localPort?: number
+		) => Promise<{
+			success: boolean;
+			tunnelId?: string;
+			localPort?: number;
+			error?: string;
+		}>;
+		closeTunnel: (tunnelId: string) => Promise<{ success: boolean }>;
+	};
+}
+
+declare global {
+	interface Window {
+		ipcRenderer: IpcRendererAPI;
+	}
+}
diff --git a/src/types/mysql-connection.ts b/src/types/mysql-connection.ts
new file mode 100644
index 0000000..9928e1b
--- /dev/null
+++ b/src/types/mysql-connection.ts
@@ -0,0 +1,7 @@
+export interface MysqlConnection {
+	host: string;
+	port: number;
+	user: string;
+	password?: string;
+	database: string;
+}
diff --git a/src/types/project.d.ts b/src/types/project.d.ts
index 70d5666..9f26bb8 100644
--- a/src/types/project.d.ts
+++ b/src/types/project.d.ts
@@ -1,18 +1,22 @@
 import { MysqlConnection } from './mysql-connection';
 import { RedisConnection } from './redis';
 import { DockerInfo } from './docker-info';
+import { SshConnection } from './ssh-connection';
+import { ConnectionType } from './connection-types';
 
 export interface ProjectConnection {
 	id?: string | null;
 	name: string;
 	projectPath: string;
-	type: string;
+	type: ConnectionType;
 	icon: string | undefined | null;
-	db_config: MysqlConnection;
-	redis_config: RedisConnection;
+	dbConfig?: MysqlConnection;
+	sshConfig?: SshConnection;
+	redisConfig: RedisConnection;
 	usingSail: boolean;
 	status: string;
 	isValid: boolean;
+	isRemote: boolean;
 	dockerInfo?: DockerInfo | undefined | null;
 }
 
@@ -90,10 +94,3 @@ export interface LogEntry {
 	message: string;
 	content: string[];
 }
-
-export interface LogResponse {
-	success: boolean;
-	message?: string;
-	entries?: LogEntry[];
-	logs?: LogFile[];
-}
diff --git a/src/types/ssh-config.ts b/src/types/ssh-config.ts
new file mode 100644
index 0000000..e8129a4
--- /dev/null
+++ b/src/types/ssh-config.ts
@@ -0,0 +1,12 @@
+import { MysqlConnection } from './mysql-connection';
+
+export interface SSHConfig {
+	host: string;
+	port: number;
+	user: string;
+	password?: string;
+	privateKey?: string;
+	passphrase?: string;
+	remoteDbType: 'mysql';
+	remoteDbConfig: MysqlConnection;
+}
diff --git a/src/types/ssh-connection.d.ts b/src/types/ssh-connection.d.ts
new file mode 100644
index 0000000..b8bd8fe
--- /dev/null
+++ b/src/types/ssh-connection.d.ts
@@ -0,0 +1,19 @@
+import { MysqlConnection } from './mysql-connection';
+
+export interface SshConnection {
+	name?: string;
+	host: string;
+	port: number;
+	user: string;
+	password?: string;
+	privateKey?: string;
+	passphrase?: string;
+	remotePath: string;
+	remoteDbType: 'mysql';
+	remoteDbConfig: MysqlConnection;
+}
+
+export interface AppConnection {
+	localDbConfig: MysqlConnection;
+	remote?: SshConnection;
+}
diff --git a/src/types/table.d.ts b/src/types/table.d.ts
index bcb7a24..bb95aa2 100644
--- a/src/types/table.d.ts
+++ b/src/types/table.d.ts
@@ -1,4 +1,4 @@
-import { MysqlConnection } from './mysql-connection';
+import { AppConnection } from './ssh-connection';
 
 export interface Table {
 	name: string;
@@ -17,7 +17,7 @@ export interface TableList {
 
 export interface DropTableParams {
 	projectId: string;
-	dbConnection: MysqlConnection;
+	appConnection: AppConnection;
 	tables: string[];
 	ignoreForeignKeys: boolean;
 	cascade: boolean;
@@ -30,7 +30,7 @@ export interface TableRecord {
 	sortDirection?: string | null;
 	filter?: string;
 	tableName: string;
-	dbConnection: MysqlConnection;
+	appConnection: AppConnection;
 }
 
 export interface TableColumn {
@@ -39,14 +39,14 @@ export interface TableColumn {
 }
 
 export interface DeleteRowsConfig {
-	dbConnection: MysqlConnection;
+	appConnection: AppConnection;
 	tableName: string;
 	ids: (string | number)[];
 	ignoreForeignKeys: boolean;
 }
 
 export interface UpdateTableRecord {
-	dbConnection: MysqlConnection;
+	appConnection: AppConnection;
 	tableName: string;
 	data: Record<string, any>;
 	id: string | number;
diff --git a/src/views/DatabaseView.vue b/src/views/DatabaseView.vue
index d154292..9972787 100644
--- a/src/views/DatabaseView.vue
+++ b/src/views/DatabaseView.vue
@@ -4,7 +4,6 @@ import {
 	markRaw,
 	onMounted,
 	onUnmounted,
-	reactive,
 	ref,
 	provide,
 	toRaw,
@@ -17,40 +16,42 @@ import Sidebar from '@/components/database/Sidebar.vue';
 import MainTabs from '@/components/database/MainTabs.vue';
 import TableContent from '@/components/TableContent.vue';
 import Terminal from '@/components/Terminal.vue';
-import Settings from '@/components/Settings.vue';
-import DatabaseSwitcher from '@/components/database/DatabaseSwitcher.vue';
-import LiveUpdates from '@/components/LiveUpdates.vue';
-import ProjectLogs from '@/components/ProjectLogs.vue';
-import Migrations from '@/components/Migrations.vue';
-import EnvEditor from '@/components/EnvEditor.vue';
 import ConnectionGuard from '@/components/ConnectionGuard.vue';
 
 import { useConnectionsStore } from '@/store/connections';
 import { useTabsStore } from '@/store/tabs';
 import { useSplitPane } from '@/composables/useSplitPane';
-import { useNavigation } from '@/composables/useNavigation';
-
-const ui = reactive({
-	showSettings: false,
-	showDatabaseSwitcher: false,
-	showLiveUpdates: false,
-	showProjectLogs: false,
-	showMigrations: false,
-	showEnvEditor: false
-});
+import { ConnectionType } from '@/types/connection-types';
+import { AppConnection } from '@/types/ssh-connection';
+
+const route = useRoute();
+const connectionsStore = useConnectionsStore();
+const tabsStore = useTabsStore();
 
 const isContentReady = ref(false);
 const pendingMigrationsCount = ref(0);
+
+const isRemoteConnection = computed(() => {
+	return route.params.isRemote === 'true';
+});
+
 let migrationCheckIntervalId = ref<number | null>(null);
 
 async function checkPendingMigrations() {
 	if (!connectionsStore.getSelectedProject) return;
 
 	try {
+		const project = connectionsStore.getSelectedProject;
+
+		const AppConnection = {
+			localDbConfig: toRaw(project.dbConfig),
+			remote: toRaw(project.sshConfig)
+		} as AppConnection;
+
 		const config = {
-			projectPath: connectionsStore.getSelectedProject.projectPath,
-			usingSail: connectionsStore.getSelectedProject.usingSail,
-			db_config: toRaw(connectionsStore.getSelectedProject.db_config)
+			projectPath: project.projectPath,
+			usingSail: project.usingSail,
+			appConnection: AppConnection
 		};
 
 		const result = await window.ipcRenderer.invoke(
@@ -60,6 +61,9 @@ async function checkPendingMigrations() {
 
 		if (result.success) {
 			pendingMigrationsCount.value = result.pendingMigrations.length;
+			window.ipcRenderer.updateMigrationsBadge(
+				pendingMigrationsCount.value
+			);
 		}
 	} catch (error) {
 		console.error('Error checking pending migrations:', error);
@@ -75,11 +79,11 @@ function startMigrationChecking() {
 
 	migrationCheckIntervalId.value = window.setInterval(() => {
 		checkPendingMigrations();
-	}, 5000);
+	}, 3000);
 }
 
 function stopMigrationChecking() {
-	if (migrationCheckIntervalId.value) {
+	if (migrationCheckIntervalId.value && !isRemoteConnection.value) {
 		clearInterval(migrationCheckIntervalId.value);
 		migrationCheckIntervalId.value = null;
 	}
@@ -87,15 +91,19 @@ function stopMigrationChecking() {
 
 const TableContentComponent = markRaw(TableContent);
 
-const route = useRoute();
-const connectionsStore = useConnectionsStore();
-const tabsStore = useTabsStore();
-const { goToMainPage } = useNavigation();
-
 const projectId = computed(() => route.params.id as string);
 
 const { sidebarWidth, sidebarRef, startResize } = useSplitPane(180, 480);
 
+const databaseName = computed(() => {
+	const project = connectionsStore.getSelectedProject;
+	if (!project) return '';
+
+	return project.type === ConnectionType.SSH
+		? project.sshConfig?.remoteDbConfig?.database
+		: project.dbConfig?.database;
+});
+
 function showAlert(message: string, type: string) {
 	window.dispatchEvent(
 		new CustomEvent('show-alert', {
@@ -106,39 +114,28 @@ function showAlert(message: string, type: string) {
 
 provide('showAlert', showAlert);
 
-function handleGlobalKeydown(event: KeyboardEvent) {
-	if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
-		event.preventDefault();
-
-		ui.showDatabaseSwitcher = true;
-	}
+function handleConnectionValid() {
+	isContentReady.value = true;
 }
 
-function handleMigrationsClose() {
-	ui.showMigrations = false;
+function handleMigrationsUpdated() {
 	checkPendingMigrations();
 }
 
-function handleGoBack() {
-	stopMigrationChecking();
-	goToMainPage();
-}
-
-function handleConnectionValid() {
-	isContentReady.value = true;
-}
-
 async function initializeData() {
-	stopMigrationChecking();
-
 	if (projectId.value) {
 		await connectionsStore.loadConnections(projectId.value);
-		startMigrationChecking();
+
+		if (isRemoteConnection.value) {
+			isContentReady.value = true;
+		} else {
+			stopMigrationChecking();
+			startMigrationChecking();
+		}
 	}
 }
 
 onMounted(async () => {
-	window.addEventListener('keydown', handleGlobalKeydown);
 	await initializeData();
 });
 
@@ -153,7 +150,6 @@ watch(
 );
 
 onUnmounted(() => {
-	window.removeEventListener('keydown', handleGlobalKeydown);
 	stopMigrationChecking();
 });
 </script>
@@ -165,6 +161,10 @@ onUnmounted(() => {
 		tabindex="0"
 	>
 		<ConnectionGuard
+			v-if="
+				!connectionsStore.getSelectedProject?.type ||
+				connectionsStore.getSelectedProject.type !== 'ssh'
+			"
 			:projectId="projectId"
 			:key="projectId"
 			@connection-valid="handleConnectionValid"
@@ -174,113 +174,74 @@ onUnmounted(() => {
 			class="bg-base-300 draggable absolute top-0 z-10 h-10 w-full"
 		></div>
 
-		<template v-if="isContentReady">
-			<MainHeader
-				@open-settings="ui.showSettings = true"
-				@open-database-switcher="ui.showDatabaseSwitcher = true"
-				@open-live-updates="ui.showLiveUpdates = true"
-				@open-project-logs="ui.showProjectLogs = true"
-				@open-migrations="ui.showMigrations = true"
-				@open-env-editor="ui.showEnvEditor = true"
-				:pending-migrations="pendingMigrationsCount"
-				@goBack="handleGoBack"
-			/>
-
-			<MainTabs />
-
-			<div class="flex flex-1 overflow-hidden">
-				<div
-					ref="sidebarRef"
-					class="h-full shrink-0"
-					:style="{ width: `${sidebarWidth}px` }"
-				>
-					<Sidebar />
-				</div>
+		<MainHeader
+			:is-remote-connection="isRemoteConnection"
+			:pending-migrations="pendingMigrationsCount"
+			@migrations-updated="handleMigrationsUpdated"
+		>
+		</MainHeader>
 
-				<div
-					class="bg-base-300 hover:bg-primary active:bg-primary w-0.5 shrink-0 cursor-col-resize transition-colors"
-					@mousedown="startResize"
-				></div>
-
-				<div class="flex h-full flex-1 flex-col overflow-hidden">
-					<div class="h-full w-full flex-1 overflow-auto">
-						<div
-							v-if="!tabsStore.activeTableName"
-							class="flex h-full items-center justify-center"
-						>
-							<div class="text-center">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="currentColor"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									class="mx-auto mb-4 h-12 w-12"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
-									/>
-								</svg>
-								<p>No tables open.</p>
-							</div>
-						</div>
+		<MainTabs />
 
-						<keep-alive :include="'TableContent'">
-							<component
-								:is="TableContentComponent"
-								v-if="tabsStore.activeTableName"
-								:key="tabsStore.activeTableName"
-								:tableName="tabsStore.activeTableName"
-							/>
-						</keep-alive>
-					</div>
-				</div>
+		<div class="flex flex-1 overflow-hidden">
+			<div
+				ref="sidebarRef"
+				class="h-full shrink-0"
+				:style="{ width: `${sidebarWidth}px` }"
+			>
+				<Sidebar />
 			</div>
 
-			<footer
-				class="bg-base-300 border-t border-black/10 px-4 py-1 text-xs"
-			>
-				<div class="flex justify-between">
-					<div>
-						Database:
-						{{
-							connectionsStore.getSelectedProject?.db_config
-								.database
-						}}
+			<div
+				class="bg-base-300 hover:bg-primary active:bg-primary w-0.5 shrink-0 cursor-col-resize transition-colors"
+				@mousedown="startResize"
+			></div>
+
+			<div class="flex h-full flex-1 flex-col overflow-hidden">
+				<div class="h-full w-full flex-1 overflow-auto">
+					<div
+						v-if="!tabsStore.activeTableName"
+						class="flex h-full items-center justify-center"
+					>
+						<div class="text-center">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="currentColor"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="mx-auto mb-4 h-12 w-12"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
+								/>
+							</svg>
+							<p>No tables open.</p>
+						</div>
 					</div>
-					<Terminal />
+
+					<keep-alive :include="'TableContent'">
+						<component
+							:is="TableContentComponent"
+							v-if="tabsStore.activeTableName"
+							:key="tabsStore.activeTableName"
+							:tableName="tabsStore.activeTableName"
+						/>
+					</keep-alive>
 				</div>
-			</footer>
-		</template>
+			</div>
+		</div>
 
-		<Settings
-			v-if="ui.showSettings"
-			@close="ui.showSettings = false"
-		/>
-		<DatabaseSwitcher
-			v-if="ui.showDatabaseSwitcher"
-			@close="ui.showDatabaseSwitcher = false"
-		/>
-		<LiveUpdates
-			v-if="ui.showLiveUpdates"
-			@close="ui.showLiveUpdates = false"
-		/>
-		<ProjectLogs
-			v-if="ui.showProjectLogs"
-			@close="ui.showProjectLogs = false"
-		/>
-		<Migrations
-			v-if="ui.showMigrations"
-			@close="handleMigrationsClose"
-			@migrations-updated="checkPendingMigrations"
-		/>
-		<EnvEditor
-			v-if="ui.showEnvEditor"
-			@close="ui.showEnvEditor = false"
-		/>
+		<footer class="bg-base-300 border-t border-black/10 px-4 py-1 text-xs">
+			<div class="flex justify-between">
+				<div>
+					Database:
+					{{ databaseName }}
+				</div>
+				<Terminal />
+			</div>
+		</footer>
 	</div>
 </template>
-
-<style scoped></style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6b7e125..250976b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -7,6 +7,8 @@ import RestoreDatabase from '@/components/home/RestoreDatabase.vue';
 import { ProjectConnection } from '@/types/project';
 import ManageConnection from '@/components/home/ManageConnection.vue';
 import Settings from '@/components/Settings.vue';
+import { ConnectionType } from '@/types/connection-types';
+import RemoteBadge from '@/components/ui/RemoteBadge.vue';
 
 const router = useRouter();
 const connectionsStore = useConnectionsStore();
@@ -48,16 +50,22 @@ onMounted(async () => {
 	await connectionsStore.loadConnections();
 });
 
-function openConnection(connectionId: string) {
-	router.push(`/database/${connectionId}`);
+async function openConnection(project: ProjectConnection) {
+	const success = await window.ipcRenderer.openConnectionWindow(
+		project.id,
+		project.isRemote
+	);
+	if (success) {
+		window.close();
+	}
 }
 
 function getConnectionColor(type: string) {
 	switch (type) {
-		case 'mysql':
+		case ConnectionType.MySQL:
 			return 'bg-orange-500';
-		case 'postgresql':
-			return 'bg-blue-600';
+		case ConnectionType.SSH:
+			return 'bg-purple-600';
 		default:
 			return 'bg-gray-600';
 	}
@@ -172,7 +180,7 @@ function getConnectionColor(type: string) {
 					<div
 						v-for="connection in connectionsStore.connections"
 						:key="connection.id as string"
-						class="card bg-base-300 border-base-300 hover:bg-base-200 border shadow-sm transition-colors"
+						class="card bg-base-300 border-base-300 hover:bg-base-200 border shadow-xs transition-colors"
 					>
 						<div class="card-body px-5 py-4">
 							<div
@@ -191,22 +199,42 @@ function getConnectionColor(type: string) {
 										class="card-title overflow-hidden text-ellipsis whitespace-nowrap"
 									>
 										<span>{{ connection.name }}</span>
+										<RemoteBadge
+											v-if="connection.isRemote"
+										/>
 									</h2>
 									<p
 										class="overflow-hidden text-xs text-ellipsis whitespace-nowrap"
 									>
-										{{ connection.db_config.host }}
+										{{
+											connection.type ===
+												ConnectionType.SSH &&
+											connection.sshConfig
+												? connection.sshConfig.host
+												: connection.dbConfig?.host
+										}}
 									</p>
 									<p
 										class="mt-1 overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap"
 									>
-										{{ connection.db_config.database }}
+										{{
+											connection.type ===
+												ConnectionType.SSH &&
+											connection.sshConfig
+												? connection.sshConfig
+														.remoteDbConfig.database
+												: connection.dbConfig?.database
+										}}
 										<span
-											class="ml-1 text-xs"
+											v-if="
+												connection.type !==
+												ConnectionType.SSH
+											"
+											class="ml-1 text-xs badge badge-xs"
 											:class="{
-												'text-success':
+												'badge-success':
 													connection.isValid,
-												'text-error':
+												'badge-error':
 													!connection.isValid
 											}"
 											>{{ connection.status }}</span
@@ -243,6 +271,10 @@ function getConnectionColor(type: string) {
 										</button>
 									</div>
 									<div
+										v-if="
+											connection.type ===
+											ConnectionType.MySQL
+										"
 										class="tooltip tooltip-bottom"
 										data-tip="Restore database"
 									>
@@ -305,9 +337,7 @@ function getConnectionColor(type: string) {
 											:disabled="!connection.isValid"
 											class="btn btn-sm btn-ghost"
 											@click.stop="
-												openConnection(
-													connection.id as string
-												)
+												openConnection(connection)
 											"
 										>
 											<svg
diff --git a/src/views/SQLEditorView.vue b/src/views/SQLEditorView.vue
index 0da1ca1..73a04a5 100644
--- a/src/views/SQLEditorView.vue
+++ b/src/views/SQLEditorView.vue
@@ -5,7 +5,7 @@ import DataTable from '@/components/DataTable.vue';
 import SQLPaginator from '@/components/SQLPaginator.vue';
 import SQLScratchSidebar from '@/components/SQLScratchSidebar.vue';
 import DatabaseSchemaViewer from '@/components/schema/DatabaseSchemaViewer.vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { computed, onMounted, ref, watch, onBeforeUnmount } from 'vue';
 import { useConnectionsStore } from '@/store/connections';
 import { useSqlResultsStore } from '@/store/sqlResults';
@@ -19,7 +19,6 @@ import type { ExplainResult } from '@/composables/useSQLEditor';
 import ConnectionGuard from '@/components/ConnectionGuard.vue';
 
 const route = useRoute();
-const router = useRouter();
 const isLoading = ref(true);
 const isContentReady = ref(false);
 const isResizing = ref(false);
@@ -42,6 +41,9 @@ const explainData = ref<ExplainResult>({
 	isExplaining: false
 });
 const isProcessing = ref(false);
+const isRemoteConnection = computed(() => {
+	return route.params.isRemote === 'true';
+});
 
 const currentPage = ref(1);
 const rowsPerPage = ref(25);
@@ -148,10 +150,6 @@ const tableData = computed(() => {
 	});
 });
 
-function goBack() {
-	router.push(`/database/${projectId.value}`);
-}
-
 function loadSavedSql() {
 	const savedSql = localStorage.getItem(
 		`sql-editor-content-${projectId.value}`
@@ -355,9 +353,16 @@ function handleConnectionValid() {
 
 onMounted(async () => {
 	isLoading.value = true;
+
 	await connectionsStore.loadConnections(projectId.value);
+
 	sqlScratchService.loadScratches(projectId.value);
-	await initializeSchema();
+
+	if (!isRemoteConnection.value) {
+		await initializeSchema();
+	} else {
+		isContentReady.value = true;
+	}
 
 	const active = sqlScratchService.getActiveScratch();
 	if (active) {
@@ -460,6 +465,7 @@ onBeforeUnmount(() => {
 <template>
 	<div class="relative flex h-full flex-col">
 		<ConnectionGuard
+			v-if="!isRemoteConnection"
 			:projectId="projectId"
 			:key="projectId"
 			@connection-valid="handleConnectionValid"
@@ -477,9 +483,10 @@ onBeforeUnmount(() => {
 		</div>
 		<template v-else-if="isContentReady">
 			<BaseHeader
-				@goBack="goBack"
+				:is-remote-connection="isRemoteConnection"
 				:title="`SQL Editor - ${activeScratch?.isDefault ? 'Default' : activeScratch?.name}`"
 				:project="project"
+				:show-back-button="false"
 				class="z-20 mt-8"
 			>
 				<template #actions>
@@ -507,6 +514,7 @@ onBeforeUnmount(() => {
 						</button>
 
 						<div
+							v-if="!isRemoteConnection"
 							class="tooltip tooltip-left"
 							data-tip="Database Schema"
 						>
@@ -535,6 +543,7 @@ onBeforeUnmount(() => {
 						</div>
 
 						<div
+							v-if="!isRemoteConnection"
 							class="tooltip tooltip-left"
 							data-tip="AI SQL Assistant"
 						>
@@ -619,6 +628,7 @@ onBeforeUnmount(() => {
 						<SQLEditor
 							ref="sqlEditorRef"
 							v-model="sqlQuery"
+							:is-remote-connection="isRemoteConnection"
 							class="h-full w-full"
 							@explain-sql="handleExplainSQL"
 							@processing-state="
@@ -879,6 +889,7 @@ onBeforeUnmount(() => {
 			</div>
 
 			<DatabaseSchemaViewer
+				v-if="!isRemoteConnection"
 				:show="showSchemaModal"
 				:schema-data="databaseSchema || { tables: [] }"
 				@close="showSchemaModal = false"
@@ -892,6 +903,7 @@ onBeforeUnmount(() => {
 			/>
 
 			<SQLExplainModal
+				v-if="!isRemoteConnection"
 				:show="showExplainModal"
 				:explain-data="explainData"
 				@close="closeExplainModal"
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 9c5233c..68f7f26 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -7,7 +7,6 @@ declare module '*.vue' {
 }
 
 interface ExtendedIpcRenderer extends IpcRenderer {
-	executeSqlQuery: (config: any, query: string) => Promise<any>;
 	[key: string]: any;
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index 761f423..5f9d4c1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,7 @@
     "skipLibCheck": true,
     "noEmit": true,
     "baseUrl": ".",
+    "removeComments": true,
     "paths": {
       "@/*": ["src/*"],
       "@/store/*": ["src/store/*"],
diff --git a/tsconfig.node.json b/tsconfig.node.json
index d22e149..ed1b586 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -6,7 +6,5 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts", "package.json", "electron",
-    "./src/types/**/*"
-  ]
+  "include": ["vite.config.ts", "package.json", "electron"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index c429ead..b4352aa 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,15 @@ import electron from 'vite-plugin-electron/simple';
 import pkg from './package.json';
 import path from 'path';
 
+const nativeNodeModules = [
+	'ssh2',
+	'ssh2-streams',
+	'bcrypt',
+	'ioredis',
+	'mysql2',
+	'dockerode'
+];
+
 export default defineConfig(({ command }) => {
 	fs.rmSync('dist-electron', { recursive: true, force: true });
 
@@ -19,13 +28,7 @@ export default defineConfig(({ command }) => {
 				main: {
 					entry: 'electron/main/index.ts',
 					onstart({ startup }) {
-						if (process.env.VSCODE_DEBUG) {
-							console.log(
-								/* For `.vscode/.debug.script.mjs` */ '[startup] Electron App'
-							);
-						} else {
-							startup();
-						}
+						startup();
 					},
 					vite: {
 						build: {
@@ -33,12 +36,19 @@ export default defineConfig(({ command }) => {
 							minify: isBuild,
 							outDir: 'dist-electron/main',
 							rollupOptions: {
-								external: Object.keys(
-									'dependencies' in pkg
-										? pkg.dependencies
-										: {}
-								)
+								external: [
+									...Object.keys(
+										'dependencies' in pkg
+											? pkg.dependencies
+											: {}
+									),
+									...nativeNodeModules,
+									/^node:.*/
+								]
 							}
+						},
+						optimizeDeps: {
+							exclude: nativeNodeModules
 						}
 					}
 				},
@@ -50,12 +60,19 @@ export default defineConfig(({ command }) => {
 							minify: isBuild,
 							outDir: 'dist-electron/preload',
 							rollupOptions: {
-								external: Object.keys(
-									'dependencies' in pkg
-										? pkg.dependencies
-										: {}
-								)
+								external: [
+									...Object.keys(
+										'dependencies' in pkg
+											? pkg.dependencies
+											: {}
+									),
+									...nativeNodeModules,
+									/^node:.*/
+								]
 							}
+						},
+						optimizeDeps: {
+							exclude: nativeNodeModules
 						}
 					}
 				},
@@ -78,6 +95,14 @@ export default defineConfig(({ command }) => {
 				'@/store': path.resolve(__dirname, 'src/store'),
 				'@/types': path.resolve(__dirname, 'src/types')
 			}
+		},
+		build: {
+			rollupOptions: {
+				external: [...nativeNodeModules, /^node:.*/]
+			}
+		},
+		optimizeDeps: {
+			exclude: nativeNodeModules
 		}
 	};
 });