diff --git a/ApiTestManager/src/APITester.js b/ApiTestManager/src/APITester.js
index b16ad7e..e4ebbee 100644
--- a/ApiTestManager/src/APITester.js
+++ b/ApiTestManager/src/APITester.js
@@ -3,6 +3,8 @@ import APIClient from './APIClient';
 import EditableInput from './components/EditableInput';
 import {createPopper} from "@popperjs/core/lib/popper-lite";
 import PropertyTable from "./components/PropertyTable";
+import VariableSnippet from "./components/VariableSnippet";
+
 
 
 class APITester {
@@ -132,7 +134,10 @@ class APITester {
                         <div style="width:calc(100% - 200px);">
                             <div class="pre-request mt-1" style="height:300px;border:1px solid grey;"></div>
                         </div>
-                        <div style="width: 200px;"></div> 
+                        <div style="width: 200px;">
+                            <div class="pre-request-variable">
+                            </div>
+                        </div> 
                     </div>
                 </div>
                 <div class="tab-pane fade post_script_tab" role="tabpanel" id="postRequestTab_${apiRequest.id}"
@@ -141,7 +146,10 @@ class APITester {
                         <div style="width:calc(100% - 200px);">
                             <div class="post-request mt-1" style="height:300px;border:1px solid grey;"></div>
                         </div>
-                        <div style="width: 200px;"></div> 
+                        <div style="width: 200px;">
+                        <div class="post-request-variable">
+                            </div>
+</div> 
                     </div>
                 </div>
             </div>
@@ -565,7 +573,6 @@ class APITester {
         });
 
         apiRequestTabContent.find(`#api_request_${model.id}`).find('.api_request_info').find('.path').each(function () {
-
             editableInput.init(this, (value) => {
                 model.path = value;
                 model.queryParams = me.parseParam(model.path);
@@ -583,8 +590,6 @@ class APITester {
 
             $('span.variable').off('mouseover');
             $('span.variable').off('mouseout');
-
-
         });
 
         document.querySelectorAll('.variable').forEach(element => {
@@ -656,6 +661,10 @@ class APITester {
             automaticLayout: true,
             quickSuggestions: false
         });
+
+        const snippet1 = new VariableSnippet();
+        snippet1.init(target.find(".pre-request-variable")[0], preRequestEditor);
+
         me.preRequestEditors.push(preRequestEditor);
         target.find(".pre-request")[0].addEventListener('shown.bs.tab', () => {
             me.preRequestEditors[index].layout();
@@ -671,6 +680,10 @@ class APITester {
             automaticLayout: true,
             quickSuggestions: false
         });
+
+        const snippet2 = new VariableSnippet();
+        snippet2.init(target.find(".post-request-variable")[0], postRequestEditor);
+
         me.postRequestEditors.push(postRequestEditor);
         target.find(".post-request")[0].addEventListener('shown.bs.tab', () => {
             me.postRequestEditors[index].layout();
diff --git a/ApiTestManager/src/components/VariableSnippet.js b/ApiTestManager/src/components/VariableSnippet.js
new file mode 100644
index 0000000..25a9fc9
--- /dev/null
+++ b/ApiTestManager/src/components/VariableSnippet.js
@@ -0,0 +1,60 @@
+import * as monaco from 'monaco-editor';
+
+const commands = [
+    { name: 'set_global', displayName: 'Set Global Variable', text: 'globals["key"] = "value";\n' },
+    { name: 'get_global', displayName: 'Get Global Variable', text: 'const value = globals["key"];\n' },
+    { name: 'set_variable', displayName: 'Set Variable', text: 'variables["key"] = "value";\n' },
+    { name: 'get_variable', displayName: 'Get Variable', text: 'const value = variables["key"];\n' },
+    { name: 'get_response_body', displayName: 'Get Response Body', text: 'const body = response.body;\n' },
+    { name: 'parse_response_body', displayName: 'Parse Response Body', text: 'JSON.parse(response.body);\n' },
+    { name: 'get_response_headers', displayName: 'Get Response Header', text: 'const header_value = response.headers["header-key"];\n' }
+];
+
+class VariableSnippet {
+    constructor(options = {}) {
+        this.commands = commands || []; // Array of command objects
+    }
+
+    init(element, editor) {
+        this.editor = editor; // Store the editor reference
+        this.render(element);
+    }
+
+    render(element) {
+        const commandsList = this.commands.map(command => {
+            return `<button class="btn btn-link command-button" data-command="${command.name}">${command.displayName}</button>`;
+        }).join('');
+
+        element.innerHTML = `<div class="commands-list">${commandsList}</div>`;
+
+        // Attach event listeners
+        element.querySelectorAll('.command-button').forEach(button => {
+            button.addEventListener('click', (event) => {
+                const commandName = event.target.getAttribute('data-command');
+                const command = this.commands.find(cmd => cmd.name === commandName);
+
+                if (command && this.editor) {
+                    this.appendTextToEditor(command.text);
+                }
+            });
+        });
+    }
+
+    appendTextToEditor(text) {
+        const model = this.editor.getModel();
+        const position = this.editor.getPosition();
+        this.editor.executeEdits('', [{
+            range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+            text: text,
+            forceMoveMarkers: true
+        }]);
+        this.editor.focus();
+    }
+}
+export default VariableSnippet;
+
+// Usage:
+//const snippet = new VariableSnippet();
+//snippet.init(document.getElementById('snippet-container'), editor);
+
+
diff --git a/src/main/resources/templates/layout/api_tester_layout.html b/src/main/resources/templates/layout/api_tester_layout.html
index f7c6e60..0c2e0ae 100644
--- a/src/main/resources/templates/layout/api_tester_layout.html
+++ b/src/main/resources/templates/layout/api_tester_layout.html
@@ -112,6 +112,40 @@
                 $('#variable_modal').modal('show');
             });
 
+            $('.btn_add_variables').on('click', function() {
+                var tbody = $('.variables');
+
+                // Create a new row with empty key and value inputs
+                var newRow = $('<tr>');
+                var keyInput = $('<input>').attr('type', 'text').addClass('form-control key-input');
+                var valueInput = $('<input>').attr('type', 'text').addClass('form-control value-input');
+                var deleteButton = $('<button>').attr('type', 'button').addClass('btn btn-danger btn-sm delete-variable').html('<i class="fa fa-trash"></i>');
+
+                newRow.append($('<td>').append(keyInput));
+                newRow.append($('<td>').append(valueInput));
+                newRow.append($('<td>').append(deleteButton));
+                tbody.append(newRow);
+
+                // Event listeners for the new inputs
+                keyInput.on('change', function() {
+                    var newKey = $(this).val();
+                    window.globals[newKey] = ''; // Initialize the key with an empty value
+                    valueInput.attr('data-old-key', newKey);
+                });
+
+                valueInput.on('change', function() {
+                    var key = $(this).closest('tr').find('.key-input').val();
+                    var newValue = $(this).val();
+                    window.globals[key] = newValue;
+                });
+
+                deleteButton.on('click', function() {
+                    var key = $(this).closest('tr').find('.key-input').val();
+                    delete window.globals[key];
+                    $(this).closest('tr').remove();
+                });
+            });
+
             document.addEventListener('keydown', (event) => {
                 if (event.key === 'Escape') {
                     container.classList.remove('full-screen');
diff --git a/src/main/resources/templates/page/tester/apiCollection.html b/src/main/resources/templates/page/tester/apiCollection.html
index acf0b1d..5db9251 100644
--- a/src/main/resources/templates/page/tester/apiCollection.html
+++ b/src/main/resources/templates/page/tester/apiCollection.html
@@ -164,8 +164,7 @@
                             <th scope="col">키</th>
                             <th scope="col">값</th>
                             <th scope="col">
-                                <button type="button" class="btn btn-secondary btn-sm btn_add_variables">추가
-                                </button>
+                                <button type="button" class="btn btn-secondary btn-sm btn_add_variables">추가</button>
                             </th>
                         </tr>
                         </thead>
diff --git a/src/main/resources/templates/page/tester/apiTester.html b/src/main/resources/templates/page/tester/apiTester.html
index 948cc3b..39cce68 100644
--- a/src/main/resources/templates/page/tester/apiTester.html
+++ b/src/main/resources/templates/page/tester/apiTester.html
@@ -20,8 +20,9 @@
             </div>
         </div>
     </div>
-    <div id="popperContent" style="display: none;">
-        Your Popper content here.
+    <div id="popperContent" class="variable_popper" style="display: none;">
+        <div class="variable_popper">
+        </div>
     </div>
     <div style="display: none">
         <ul id="servers">