diff --git a/solutions/html/index.html b/solutions/html/index.html
index de11657ca9..60533e0f4d 100644
--- a/solutions/html/index.html
+++ b/solutions/html/index.html
@@ -1,96 +1,136 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script defer src="/_vercel/insights/script.js"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css"
-    />
-    <title>Vercel HTML Starter</title>
-    <meta
-      name="description"
-      content="High-performance HTML based website template."
-    />
-  </head>
-  <body>
-    <h1>Vercel HTML Starter</h1>
-    <p>
-      This template is a simple, but powerful single
-      <code>index.html</code> file deployed to
-      <a href="https://vercel.com">Vercel</a>. When your site is deployed, all
-      static assets (like HTML, JavaScript, CSS, images, and more) are deployed
-      globally to every
-      <a href="https://vercel.com/docs/concepts/edge-network/overview"
-        >Vercel Edge Network</a
-      >
-      region.
-    </p>
-    <h2>Simple, privacy-friendly analytics</h2>
-    <p>
-      Want to understand your visitor traffic? Vercel Analytics gives you
-      first-party, privacy-friendly traffic analytics for your HTML site. This
-      template is already configured using the following script:
-    </p>
-    <pre><code>&lt;script defer src="/_vercel/insights/script.js"&gt;&lt;/script&gt;</code></pre>
-    <p>
-      Learn more about
-      <a href="https://vercel.com/analytics">Vercel Analytics</a>.
-    </p>
-    <h2>Integrated with git</h2>
-    <p>
-      Deploying updates to your site is as simple as
-      <code>git push</code> thanks to Vercel's advanced
-      <a href="https://vercel.com/docs/concepts/git">Git Integration</a>.
-      Support for GitHub, GitLab, Bitbucket is zero-configuration, and with the
-      flexible Vercel CLI and API, you can integrate with any tool possible.
-    </p>
-    <p>
-      Learn more about
-      <a href="https://vercel.com/docs/concepts/git">Git Integration</a>.
-    </p>
-    <h2>Fast <code>gzip</code> compression</h2>
-    <p>
-      To help ensure the smallest possible file sizes for your static assets,
-      the Vercel Edge Network compresses files by default using
-      <code>gzip</code>. You can also optionally use
-      <code>brotli</code> compressesion if you prefer.
-    </p>
-    <p>
-      Learn more about
-      <a href="https://vercel.com/docs/concepts/edge-network/compression"
-        >compression</a
-      >.
-    </p>
-    <h2>Advanced routing configuration</h2>
-    <p>
-      Vercel gives you a variety of ways to configure the routing of your
-      website. For example, adding redirects, rewrites, or headers to your page.
-      While you can use <code>vercel.json</code> to define these through JSON,
-      you can also express your routing configuration as code using
-      <a href="https://vercel.com/docs/concepts/functions/edge-middleware"
-        >Vercel Edge Middleware</a
-      >.
-    </p>
-    <p>
-      Middleware runs before the
-      <a href="https://vercel.com/docs/concepts/edge-network/caching"
-        >Vercel Edge Network Cache</a
-      >, so you can configure routing exactly as your application needs. For
-      example, this template uses <code>middleware.js</code> defined in the root
-      of the repository to add additional security headers to the site:
-    </p>
-    <pre><code>referrer-policy: origin-when-cross-origin
-strict-transport-security: max-age=31536000; includeSubDomains; preload
-x-content-type-options: nosniff
-x-dns-prefetch-control: on
-x-frame-options: DENY</code></pre>
-    <p>
-      Learn more about
-      <a href="https://vercel.com/docs/concepts/functions/edge-middleware"
-        >Vercel Edge Middleware</a
-      >.
-    </p>
-  </body>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QR Code Reader</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+        .container {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+            text-align: center;
+            width: 300px;
+        }
+        h1 {
+            color: #333;
+        }
+        input[type="file"], input[type="text"] {
+            display: block;
+            margin: 10px auto;
+            font-size: 16px;
+            padding: 8px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        input[type="submit"], button {
+            background-color: #5051F9;
+            color: #fff;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 18px;
+            margin-top: 10px;
+        }
+        input[type="submit"]:hover, button:hover {
+            background-color: #3e3ec7;
+        }
+        input[type="submit"]:active, button:active {
+            background-color: #2c2c9f;
+        }
+        button {
+            width: 100%;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>QR Code Reader</h1>
+        <form id="qr-form" enctype="multipart/form-data" action="http://api.qrserver.com/v1/read-qr-code/" method="POST">
+            <input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
+            <input name="file" type="file" accept="image/*" required />
+            <input type="submit" value="Read QR code" />
+        </form>
+
+        <div id="output-fields" style="display:none;">
+            <input type="text" id="macid" name="macid" placeholder="MAC ID" readonly />
+            <input type="text" id="deviceid" name="deviceid" placeholder="Device ID" readonly />
+            <input type="text" id="gsmimei" name="gsmimei" placeholder="GSM IMEI" readonly />
+            <input type="text" id="sensorid" name="sensorid" placeholder="SENSOR ID" readonly />
+            <input type="text" id="simno" name="simno" placeholder="SIM NO" readonly />
+            <button id="submit-data">Submit Data</button>
+        </div>
+    </div>
+
+    <script>
+        document.getElementById('qr-form').addEventListener('submit', function(event) {
+            event.preventDefault(); // Prevent the form from submitting the default way
+
+            const formData = new FormData(this);
+
+            fetch('http://api.qrserver.com/v1/read-qr-code/', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                const parsedData = data[0].symbol[0].data;
+                const macid = parsedData.match(/MAC ID\s*:\s*([^\s]+)/)[1];
+                const deviceid = parsedData.match(/Device ID\s*:\s*([^\s]+)/)[1];
+                const gsmimei = parsedData.match(/GSM IMEI\s*:\s*([^\s]+)/)[1];
+                const sensorid = parsedData.match(/SENSOR ID\s*:\s*([^\s]+)/)[1];
+                const simno = parsedData.match(/SIM NO\s*:\s*([^\s]+)/)[1];
+
+                document.getElementById('macid').value = macid;
+                document.getElementById('deviceid').value = deviceid;
+                document.getElementById('gsmimei').value = gsmimei;
+                document.getElementById('sensorid').value = sensorid;
+                document.getElementById('simno').value = simno;
+
+                document.getElementById('output-fields').style.display = 'block';
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+        });
+
+        document.getElementById('submit-data').addEventListener('click', function() {
+            const dataToSend = {
+                macid: document.getElementById('macid').value,
+                deviceid: document.getElementById('deviceid').value,
+                gsmimei: document.getElementById('gsmimei').value,
+                sensorid: document.getElementById('sensorid').value,
+                simno: document.getElementById('simno').value
+            };
+
+            fetch('YOUR_BACKEND_ENDPOINT_URL', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(dataToSend)
+            })
+            .then(response => response.json())
+            .then(result => {
+                alert('Data submitted successfully!');
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+        });
+    </script>
+</body>
 </html>
