diff --git a/app.py b/app.py
index 709b9ee..cef47d7 100644
--- a/app.py
+++ b/app.py
@@ -1,5 +1,5 @@
 import os
-from flask import Flask, Response, jsonify, render_template, request
+from flask import Flask, Response, jsonify, redirect, render_template, request, url_for
 import jinja_partials
 from jinja2_fragments import render_block
 from flask_htmx import HTMX
@@ -94,6 +94,25 @@ def create_http_function():
     db.create_new_http_function(name, script_content)
     return render_template("dashboard/http_functions/new.html", name=name, script=script_content)
 
+@ app.route("/dashboard/http_functions/edit_form", methods=["GET"])
+def get_http_function_edit_form():
+    name = request.args.get('name')
+    http_function = db.get_http_function(name)
+    if not http_function:
+        return jsonify({'error': 'Function not found'}), 404
+    script = http_function['script_content']
+    return render_template("dashboard/http_functions/edit.html", name=name, script=script)
+
+@ app.route("/dashboard/http_functions/edit", methods=["POST"])
+def edit_http_function():
+    try:
+        name = request.json.get('name')
+        script_content = request.json.get('script_content')
+        db.edit_http_function(name, script_content)
+        return redirect(url_for('dashboard_http_functions'))
+    except Exception as e:
+        return render_template("dashboard/http_functions/edit.html", name=name, script=script_content)
+
 @ app.route("/dashboard/timer_functions", methods=["GET"])
 def dashboard_timer_functions():
     return render_template("dashboard/timer_functions.html")
diff --git a/db.py b/db.py
index 897a787..04107de 100644
--- a/db.py
+++ b/db.py
@@ -59,3 +59,7 @@ class DataBase():
     def create_new_http_function(self, name, script_content):
         self.execute(
             'INSERT INTO http_functions (NAME, script_content) VALUES (%s, %s)', [name, script_content], commit=True)
+    
+    def edit_http_function(self, name, script_content):
+        self.execute(
+            'UPDATE http_functions SET script_content=%s WHERE NAME=%s', [script_content, name], commit=True)
diff --git a/templates/dashboard/http_functions.html b/templates/dashboard/http_functions.html
index a104f90..5befef5 100644
--- a/templates/dashboard/http_functions.html
+++ b/templates/dashboard/http_functions.html
@@ -48,8 +48,8 @@
                         </button>
                         <button
                             class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3"
-                            data-id="69" hx-get="{{ url_for('client', function=function.name) }}" hx-target="#container"
-                            hx-swap="innerHTML">
+                            data-id="69" hx-get="{{ url_for('get_http_function_edit_form', name=function.name) }}"
+                            hx-target="#container" hx-swap="innerHTML">
                             Edit
                         </button>
                     </td>
diff --git a/templates/dashboard/http_functions/edit.html b/templates/dashboard/http_functions/edit.html
new file mode 100644
index 0000000..33cfb72
--- /dev/null
+++ b/templates/dashboard/http_functions/edit.html
@@ -0,0 +1,154 @@
+<div class="flex items-center" data-id="51">
+    <h1 class="font-semibold text-lg md:text-2xl" data-id="52">Update HTTP function</h1>
+</div>
+
+
+<div>
+    <div class="flex space-x-2 p-2 border-b border-gray-200 dark:border-gray-800">
+        <input type="text" id="function-name"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 max-w-fit"
+            placeholder="foo" required="" value="{{ name }}">
+        <button
+            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-gray-600 dark:text-gray-400"
+            id="executeBtn">
+            <span class="sr-only" data-id="4">Bold</span>
+            <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" data-darkreader-inline-stroke=""
+                style="--darkreader-inline-stroke: currentColor;">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z">
+                </path>
+            </svg>
+        </button>
+        <button
+            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-gray-600 dark:text-gray-400"
+            data-id="21" id="clearBtn"><span class="sr-only" data-id="22">Bulleted List</span>
+            <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" data-darkreader-inline-stroke=""
+                style="--darkreader-inline-stroke: currentColor;">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+        </button>
+        <button
+            class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-2 border border-blue-500 hover:border-transparent rounded flex"
+            id="add-http-function">
+            <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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+            </svg>
+
+
+            <p> Update</p>
+        </button>
+
+    </div>
+
+    <div id="editor" class="relative rounded-lg shadow-lg p-4 mb-4">{{ script }}
+    </div>
+</div>
+
+<div id="output">
+    <!-- Execution results will appear here -->
+</div>
+
+<script>
+    var editor = ace.edit("editor");
+    editor.setOptions({
+        maxLines: editor.session.getLength()
+    });
+    editor.setTheme("ace/theme/github_dark");
+    editor.session.setMode("ace/mode/javascript");
+
+    editor.session.$worker.send("changeOptions", [{ asi: true }]);
+
+
+    document.getElementById('executeBtn').addEventListener('click', function () {
+        try {
+            // Get the code from the editor
+            var code = editor.getValue();
+
+            // Define the request object (modify as needed)
+            var requestObject = {
+                // Your request object properties here
+            };
+
+            // Send the code and request object to the server
+            fetch('/execute?playground=true', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ code: code, request: requestObject }),
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.text();
+                })
+                .then(text => {
+                    try {
+                        const data = JSON.parse(text); // Try to parse the response as JSON
+
+                        const output_el = document.querySelector('#output')
+                        let output_html = `
+                        <div class="relative rounded-lg shadow-lg p-4">
+                            ${data.result.body}
+                        </div>
+                        `;
+                        if (data?.logs?.length > 0) {
+                            output_html += `
+                            <aside class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-4" data-id="1">
+                                <div class="flex justify-between items-center" data-id="2">
+                                <div class="flex space-x-2 text-red-500" data-id="3">
+                                <div class="w-3 h-3 rounded-full bg-red-500" data-id="4"></div>
+                                <div class="w-3 h-3 rounded-full bg-yellow-500" data-id="5"></div>
+                                <div class="w-3 h-3 rounded-full bg-green-500" data-id="6"></div>
+                            </div>
+                            <p class="text-sm" data-id="7">logs</p>
+                            </div>
+                            <div class="mt-4" data-id="8" id="response-logs">
+                                ${data.logs.map(log => `<p class="text-white" data-id="11">${log}</p>`).join('\n')}
+                            </div>
+                                </aside>
+                            `
+                        }
+
+                        output_el.innerHTML = output_html;
+                    } catch (err) {
+                        document.getElementById('output').innerHTML = data;
+                    }
+                })
+                .catch(error => {
+                    document.getElementById('output').textContent = 'Error: ' + error.message;
+                });
+
+        } catch (e) {
+            document.getElementById('output').innerHTML = 'Error: ' + e.message;
+        }
+    });
+
+    document.querySelector('#clearBtn').addEventListener('click', function () {
+        //editor.setValue();
+        document.querySelector('#output').innerHTML = '';
+    });
+
+    document.querySelector('#add-http-function').addEventListener('click', () => {
+        let name = document.querySelector('#function-name').value;
+        let script_content = editor.getValue();
+
+        fetch("{{ url_for('edit_http_function') }}", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ name, script_content }),
+        })
+            .then(response => response.text())
+            .then(text => {
+                document.querySelector('#container').innerHTML = text
+                htmx.process(htmx.find('#container'))
+            })
+    })
+</script>
\ No newline at end of file