diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..43868ed
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,151 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Santorju SMPPClient GUI</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+</head>
+<body>
+    <div class="container mt-5">
+        <h1 class="mb-4">Santorju GUI SMPPClient</h1>
+            <p id="ip-address">Fetching IP address...</p>
+            <p>The IP address to white-list is 141.8.24.212</p>
+        <form id="settings-form">
+            <div class="form-group">
+                <label for="Hostname">Hostname (IP or Domain):</label>
+                <input type="text" class="form-control" id="Hostname" name="Hostname" required>
+            </div>
+            <div class="form-group">
+                <label for="Port">Port (Int):</label>
+                <input type="number" class="form-control" id="Port" name="Port" required>
+            </div>
+            <div class="form-group">
+                <label for="Username">SMPP Bind Username:</label>
+                <input type="text" class="form-control" id="Username" name="Username" required>
+            </div>
+            <div class="form-group">
+                <label for="Password">SMPP Bind Password:</label>
+                <input type="password" class="form-control" id="Password" name="Password" required>
+            </div>
+            <div class="form-group">
+                <label for="SSL">SSL: (1 or 0):</label>
+                <input type="number" class="form-control" id="SSL" name="SSL" required>
+            </div>
+            <div class="form-group">
+                <label for="Source">Source:</label>
+                <input type="text" class="form-control" id="Source" name="Source" required>
+            </div>
+            <div class="form-group">
+                <label for="Destination">Destination number (int):</label>
+                <input type="text" class="form-control" id="Destination" name="Destination" required>
+            </div>
+            <div class="form-group">
+                <label for="Content">SMS Content:</label>
+                <input type="text" class="form-control" id="Content" name="Content" required>
+            </div>
+            <div class="form-group">
+                <label for="Count">Number of messages to send (int):</label>
+                <input type="number" class="form-control" id="Count" name="Count" required>
+            </div>
+            <div class="form-group">
+                <label for="Validityperiod">Validityperiod (Optional):</label>
+                <input type="text" class="form-control" id="Validityperiod" name="Validityperiod">
+            </div>
+
+            <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+
+        <div id="loading" class="mt-3" style="display: none;">
+            <div class="spinner-border" role="status">
+                <span class="sr-only">Loading...</span>
+            </div>
+        </div>
+
+        <h2 class="mt-5">Output</h2>
+        <pre id="output" class="bg-light p-3 border rounded"></pre>
+        <pre id="error" class="bg-light p-3 border rounded text-danger"></pre>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script>
+        // Function to make HTTP GET request
+        function getIPAddress() {
+            fetch('https://api64.ipify.org?format=json')
+                .then(response => response.json())
+                .then(data => {
+                    // Update the placeholder element with the IP address
+                    document.getElementById('ip-address').textContent = 'Your IP address is: ' + data.ip;
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                });
+        }
+
+        // Call the function to get the IP address when the page loads
+        getIPAddress();
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const form = document.getElementById('settings-form');
+            form.addEventListener('submit', function(event) {
+                event.preventDefault();
+                submitForm();
+            });
+
+            function submitForm() {
+                // Clear the output and error fields
+                document.getElementById('output').textContent = '';
+                document.getElementById('error').textContent = '';
+
+                // Show the loading indicator
+                document.getElementById('loading').style.display = 'block';
+
+                const formData = new FormData(form);
+                const settings = {};
+                formData.forEach((value, key) => { settings[key] = value });
+
+                fetch('/run_script', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Cache-Control': 'no-cache',
+                        'Pragma': 'no-cache'
+                    },
+                    body: JSON.stringify(settings)
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok ' + response.statusText);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    // Hide the loading indicator
+                    document.getElementById('loading').style.display = 'none';
+
+                    // Display the output or error
+                    if (data.output) {
+                        document.getElementById('output').textContent = data.output;
+                    }
+                    if (data.error) {
+                        document.getElementById('error').textContent = data.error;
+                    }
+                })
+                .catch(error => {
+                    // Hide the loading indicator
+                    document.getElementById('loading').style.display = 'none';
+
+                    // Display the error
+                    document.getElementById('error').textContent = 'An error occurred: ' + error.message;
+                    console.error('Error:', error);
+                });
+            }
+        });
+    </script>
+</body>
+</html>
