diff --git a/alpr_api.py b/alpr_api.py
index 4818f42..8a07908 100644
--- a/alpr_api.py
+++ b/alpr_api.py
@@ -6,7 +6,7 @@ from time import sleep
 
 import ultimateAlprSdk
 from PIL import Image
-from flask import Flask, request, jsonify
+from flask import Flask, request, jsonify, render_template
 
 counter = 0
 
@@ -141,6 +141,10 @@ def create_rest_server_flask():
         else:
             return jsonify({'error': 'Endpoint not implemented'}), 404
 
+    @app.route('/')
+    def index():
+        return render_template('index.html')
+
     return app
 
 
diff --git a/static/logo.webp b/static/logo.webp
new file mode 100644
index 0000000..00c2116
Binary files /dev/null and b/static/logo.webp differ
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..686cd2c
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,25 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f4f4f9;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    background: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    max-width: 600px;
+    margin: auto;
+}
+
+h1, h2 {
+    color: #333;
+}
+
+pre {
+    background-color: #f8f9fa;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..926f7ab
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Upload</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            background-color: #f0f2f5;
+            background-image: radial-gradient(#ffffff 1px, rgba(0, 0, 0, 0) 1px);
+            background-size: 20px 20px;
+            font-family: 'Google Sans', sans-serif; /* Apply Roboto font to the entire page */
+        }
+    </style>
+</head>
+<body class="bg-gray-100 flex items-center justify-center h-screen">
+    <!-- Logo -->
+    <div class="absolute top-4 left-4">
+        <img src="{{ url_for('static', filename='logo.webp') }}" alt="Logo" class="h-12">
+    </div>
+
+    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-md relative">
+        <h1 class="text-2xl font-bold mb-4 text-center">Upload Image for ALPR</h1>
+        <form id="uploadForm" enctype="multipart/form-data" class="space-y-4">
+            <div>
+                <label for="upload" class="block text-sm font-medium text-gray-700">Choose an image:</label>
+                <div class="mt-1 flex items-center">
+                    <input type="file" id="upload" name="upload" accept="image/*" class="hidden" onchange="updateFileName()">
+                    <label for="upload" class="cursor-pointer inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
+                        Select file
+                    </label>
+                    <span id="fileName" class="ml-2 text-sm text-gray-600"></span>
+                </div>
+            </div>
+            <div id="imagePreview" class="mt-4 hidden">
+                <img id="previewImage" src="#" alt="Preview" class="max-w-full h-auto rounded-lg">
+            </div>
+            <button type="submit" class="w-full py-2 px-4 bg-blue-600 text-white font-semibold rounded-md shadow-sm hover:bg-blue-700">Upload</button>
+        </form>
+        <div class="mt-6">
+            <h2 class="text-xl font-semibold mb-2">Response</h2>
+            <pre id="responseBox" class="bg-gray-100 p-4 border rounded-lg text-sm text-gray-800"></pre>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script>
+        function updateFileName() {
+            var input = document.getElementById('upload');
+            var fileName = document.getElementById('fileName');
+            var imagePreview = document.getElementById('imagePreview');
+            var previewImage = document.getElementById('previewImage');
+
+            fileName.textContent = input.files[0] ? input.files[0].name : '';
+
+            if (input.files && input.files[0]) {
+                var reader = new FileReader();
+
+                reader.onload = function (e) {
+                    previewImage.src = e.target.result;
+                    imagePreview.classList.remove('hidden');
+                }
+
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+
+        $(document).ready(function () {
+            $('#uploadForm').on('submit', function (e) {
+                e.preventDefault();
+                var formData = new FormData(this);
+                $.ajax({
+                    url: '/v1/image/alpr',
+                    type: 'POST',
+                    data: formData,
+                    processData: false,
+                    contentType: false,
+                    success: function (data) {
+                        $('#responseBox').text(JSON.stringify(data, null, 2));
+                    },
+                    error: function (xhr, status, error) {
+                        var err = JSON.parse(xhr.responseText);
+                        $('#responseBox').text(JSON.stringify(err, null, 2));
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>
