diff --git a/mcp-server/package.json b/mcp-server/package.json
index 2d3d9e9..984e0e5 100644
--- a/mcp-server/package.json
+++ b/mcp-server/package.json
@@ -5,7 +5,8 @@
     "type": "module",
     "main": "dist/index.js",
     "scripts": {
-        "build": "esbuild src/index.ts --bundle --platform=node --target=node18 --format=esm --outfile=dist/index.js --external:@modelcontextprotocol/* --external:ws --external:express --external:class-transformer --external:class-validator --external:reflect-metadata --external:pino --external:pino-pretty --external:js-yaml",
+        "build": "esbuild src/index.ts --bundle --platform=node --target=node18 --format=esm --outfile=dist/index.js --external:@modelcontextprotocol/* --external:ws --external:express --external:class-transformer --external:class-validator --external:reflect-metadata --external:pino --external:pino-pretty --external:js-yaml && npm run copy-static",
+        "copy-static": "node -e \"require('fs').cpSync('src/static', 'dist/static', { recursive: true })\"",
         "build:types": "tsc --emitDeclarationOnly --outDir dist",
         "build:full": "npm run build && npm run build:types",
         "start": "node dist/index.js",
diff --git a/mcp-server/src/ReplServer.ts b/mcp-server/src/ReplServer.ts
index 26e23ed..892364c 100644
--- a/mcp-server/src/ReplServer.ts
+++ b/mcp-server/src/ReplServer.ts
@@ -1,4 +1,6 @@
 import express from "express";
+import path from "path";
+import { fileURLToPath } from "url";
 import { PluginBridge } from "./PluginBridge";
 import { ExecuteCodePluginTask } from "./tasks/ExecuteCodePluginTask";
 import { createLogger } from "./logger";
@@ -31,7 +33,6 @@ export class ReplServer {
      */
     private setupMiddleware(): void {
         this.app.use(express.json());
-        this.app.use(express.static("public")); // for serving static files if needed
     }
 
     /**
@@ -40,7 +41,10 @@ export class ReplServer {
     private setupRoutes(): void {
         // serve the main REPL interface
         this.app.get("/", (req, res) => {
-            res.send(this.getReplHtml());
+            const __filename = fileURLToPath(import.meta.url);
+            const __dirname = path.dirname(__filename);
+            const htmlPath = path.join(__dirname, 'static', 'repl.html');
+            res.sendFile(htmlPath);
         });
 
         // API endpoint for executing code
@@ -74,231 +78,7 @@ export class ReplServer {
         });
     }
 
-    /**
-     * Generates the HTML content for the REPL interface.
-     *
-     * Creates a simple web page with a resizable textarea for code input,
-     * an execute button, and a results display area using jQuery.
-     */
-    private getReplHtml(): string {
-        return `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Penpot MCP REPL</title>
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-    <style>
-        body {
-            font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-            background-color: #f5f5f5;
-        }
-        
-        h1 {
-            color: #333;
-            text-align: center;
-            margin-bottom: 30px;
-        }
-        
-        #code-input {
-            width: 100%;
-            min-height: 200px;
-            font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
-            font-size: 14px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            padding: 15px;
-            resize: vertical;
-            background-color: white;
-            box-sizing: border-box;
-        }
-        
-        #execute-btn {
-            background-color: #007acc;
-            color: white;
-            border: none;
-            padding: 12px 24px;
-            font-size: 16px;
-            border-radius: 4px;
-            cursor: pointer;
-            margin: 15px 0;
-            font-family: inherit;
-        }
-        
-        #execute-btn:hover {
-            background-color: #005a9e;
-        }
-        
-        #execute-btn:disabled {
-            background-color: #ccc;
-            cursor: not-allowed;
-        }
-        
-        #results {
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            padding: 15px;
-            background-color: white;
-            min-height: 100px;
-            white-space: pre-wrap;
-            font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
-            font-size: 14px;
-        }
-        
-        .error {
-            color: #d63031;
-            background-color: #fff5f5;
-            border-color: #f5c6cb;
-        }
-        
-        .success {
-            color: #00b894;
-            background-color: #f0fff4;
-            border-color: #c3e6cb;
-        }
-        
-        .loading {
-            color: #fdcb6e;
-            background-color: #fffbf0;
-            border-color: #ffeeba;
-        }
-        
-        .log-section {
-            margin-top: 10px;
-            padding-top: 10px;
-            border-top: 1px solid #eee;
-            color: #666;
-            font-style: italic;
-        }
-        
-        .controls {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-            margin: 15px 0;
-        }
-        
-        .shortcut-hint {
-            color: #666;
-            font-size: 12px;
-        }
-    </style>
-</head>
-<body>
-    <h1>Penpot MCP REPL</h1>
-    
-    <div>
-        <label for="code-input">JavaScript Code:</label>
-        <textarea id="code-input" placeholder="Enter your JavaScript code here...
-// Example:
-console.log('Hello from Penpot!');
-return 'This will be the result';"></textarea>
-    </div>
-    
-    <div class="controls">
-        <button id="execute-btn">Execute Code</button>
-        <span class="shortcut-hint">Shortcut: Ctrl+Enter</span>
-    </div>
-    
-    <div>
-        <label for="results">Results:</label>
-        <div id="results">Click "Execute Code" to run your JavaScript...</div>
-    </div>
 
-    <script>
-        $(document).ready(function() {
-            let isExecuting = false;
-            
-            function setExecuting(executing) {
-                isExecuting = executing;
-                $('#execute-btn').prop('disabled', executing);
-                $('#execute-btn').text(executing ? 'Executing...' : 'Execute Code');
-            }
-            
-            function displayResult(data, isError = false) {
-                const $results = $('#results');
-                $results.removeClass('error success loading');
-                
-                if (isError) {
-                    $results.addClass('error');
-                    $results.text('Error: ' + data.error);
-                } else {
-                    $results.addClass('success');
-                    
-                    let output = '';
-                    if (data.result !== undefined) {
-                        output = 'Result: ' + JSON.stringify(data.result, null, 2);
-                    } else {
-                        output = 'Code executed successfully (no return value)';
-                    }
-                    
-                    if (data.log && data.log.trim()) {
-                        output += '\\n\\nConsole Output:\\n' + data.log;
-                    }
-                    
-                    $results.text(output);
-                }
-            }
-            
-            function executeCode() {
-                if (isExecuting) return;
-                
-                const code = $('#code-input').val().trim();
-                if (!code) {
-                    displayResult({ error: 'Please enter some code to execute' }, true);
-                    return;
-                }
-                
-                setExecuting(true);
-                $('#results').removeClass('error success').addClass('loading').text('Executing code...');
-                
-                $.ajax({
-                    url: '/execute',
-                    method: 'POST',
-                    contentType: 'application/json',
-                    data: JSON.stringify({ code: code }),
-                    success: function(data) {
-                        displayResult(data, false);
-                    },
-                    error: function(xhr) {
-                        let errorData;
-                        try {
-                            errorData = JSON.parse(xhr.responseText);
-                        } catch {
-                            errorData = { error: 'Network error or invalid response' };
-                        }
-                        displayResult(errorData, true);
-                    },
-                    complete: function() {
-                        setExecuting(false);
-                    }
-                });
-            }
-            
-            // bind execute button click
-            $('#execute-btn').on('click', executeCode);
-            
-            // bind Ctrl+Enter keyboard shortcut
-            $('#code-input').on('keydown', function(e) {
-                if (e.ctrlKey && e.key === 'Enter') {
-                    e.preventDefault();
-                    executeCode();
-                }
-            });
-            
-            // auto-resize textarea based on content
-            $('#code-input').on('input', function() {
-                this.style.height = 'auto';
-                this.style.height = Math.max(200, this.scrollHeight) + 'px';
-            });
-        });
-    </script>
-</body>
-</html>`;
-    }
 
     /**
      * Starts the REPL web server.
diff --git a/mcp-server/src/static/repl.html b/mcp-server/src/static/repl.html
new file mode 100644
index 0000000..46d8401
--- /dev/null
+++ b/mcp-server/src/static/repl.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Penpot MCP REPL</title>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <style>
+        body {
+            font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        
+        #code-input {
+            width: 100%;
+            min-height: 200px;
+            font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
+            font-size: 14px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 15px;
+            resize: vertical;
+            background-color: white;
+            box-sizing: border-box;
+        }
+        
+        #execute-btn {
+            background-color: #007acc;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            font-size: 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 15px 0;
+            font-family: inherit;
+        }
+        
+        #execute-btn:hover {
+            background-color: #005a9e;
+        }
+        
+        #execute-btn:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+        
+        #results {
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 15px;
+            background-color: white;
+            min-height: 100px;
+            white-space: pre-wrap;
+            font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
+            font-size: 14px;
+        }
+        
+        .error {
+            color: #d63031;
+            background-color: #fff5f5;
+            border-color: #f5c6cb;
+        }
+        
+        .success {
+            color: #00b894;
+            background-color: #f0fff4;
+            border-color: #c3e6cb;
+        }
+        
+        .loading {
+            color: #fdcb6e;
+            background-color: #fffbf0;
+            border-color: #ffeeba;
+        }
+        
+        .log-section {
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px solid #eee;
+            color: #666;
+            font-style: italic;
+        }
+        
+        .controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            margin: 15px 0;
+        }
+        
+        .shortcut-hint {
+            color: #666;
+            font-size: 12px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Penpot MCP REPL</h1>
+    
+    <div>
+        <label for="code-input">JavaScript Code:</label>
+        <textarea id="code-input" placeholder="Enter your JavaScript code here...
+// Example:
+console.log('Hello from Penpot!');
+return 'This will be the result';"></textarea>
+    </div>
+    
+    <div class="controls">
+        <button id="execute-btn">Execute Code</button>
+        <span class="shortcut-hint">Shortcut: Ctrl+Enter</span>
+    </div>
+    
+    <div>
+        <label for="results">Results:</label>
+        <div id="results">Click "Execute Code" to run your JavaScript...</div>
+    </div>
+
+    <script>
+        $(document).ready(function() {
+            let isExecuting = false;
+            
+            function setExecuting(executing) {
+                isExecuting = executing;
+                $('#execute-btn').prop('disabled', executing);
+                $('#execute-btn').text(executing ? 'Executing...' : 'Execute Code');
+            }
+            
+            function displayResult(data, isError = false) {
+                const $results = $('#results');
+                $results.removeClass('error success loading');
+                
+                if (isError) {
+                    $results.addClass('error');
+                    $results.text('Error: ' + data.error);
+                } else {
+                    $results.addClass('success');
+                    
+                    let output = '';
+                    if (data.result !== undefined) {
+                        output = 'Result: ' + JSON.stringify(data.result, null, 2);
+                    } else {
+                        output = 'Code executed successfully (no return value)';
+                    }
+                    
+                    if (data.log && data.log.trim()) {
+                        output += '\n\nConsole Output:\n' + data.log;
+                    }
+                    
+                    $results.text(output);
+                }
+            }
+            
+            function executeCode() {
+                if (isExecuting) return;
+                
+                const code = $('#code-input').val().trim();
+                if (!code) {
+                    displayResult({ error: 'Please enter some code to execute' }, true);
+                    return;
+                }
+                
+                setExecuting(true);
+                $('#results').removeClass('error success').addClass('loading').text('Executing code...');
+                
+                $.ajax({
+                    url: '/execute',
+                    method: 'POST',
+                    contentType: 'application/json',
+                    data: JSON.stringify({ code: code }),
+                    success: function(data) {
+                        displayResult(data, false);
+                    },
+                    error: function(xhr) {
+                        let errorData;
+                        try {
+                            errorData = JSON.parse(xhr.responseText);
+                        } catch {
+                            errorData = { error: 'Network error or invalid response' };
+                        }
+                        displayResult(errorData, true);
+                    },
+                    complete: function() {
+                        setExecuting(false);
+                    }
+                });
+            }
+            
+            // bind execute button click
+            $('#execute-btn').on('click', executeCode);
+            
+            // bind Ctrl+Enter keyboard shortcut
+            $('#code-input').on('keydown', function(e) {
+                if (e.ctrlKey && e.key === 'Enter') {
+                    e.preventDefault();
+                    executeCode();
+                }
+            });
+            
+            // auto-resize textarea based on content
+            $('#code-input').on('input', function() {
+                this.style.height = 'auto';
+                this.style.height = Math.max(200, this.scrollHeight) + 'px';
+            });
+        });
+    </script>
+</body>
+</html>
