diff --git a/mccs-it/thermal/app.js b/mccs-it/thermal/app.js
index 2c4fa65..433ca81 100644
--- a/mccs-it/thermal/app.js
+++ b/mccs-it/thermal/app.js
@@ -7,10 +7,17 @@ const port = 3000;
 // Middleware to serve static files (HTML)
 app.use(express.static('public'));
 
+// Middleware to parse JSON request bodies
+app.use(express.json());
+
 // Test print function
 app.post('/test-print', async (req, res) => {
   try {
-    Thermal.generateFile('Grant.Aiden2', '5012345', req, res);
+    const { username, studentId } = req.body;
+    if (!username || !studentId) {
+      return res.status(400).json({ message: 'Username and Student ID are required.' });
+    }
+    await Thermal.generateFile(username, studentId, req, res);
   } catch (error) {
     console.error('Print Error:', error);
     res.status(500).json({ message: 'Print Error', error: error.message });
diff --git a/mccs-it/thermal/public/index.html b/mccs-it/thermal/public/index.html
index 7948691..82f2452 100644
--- a/mccs-it/thermal/public/index.html
+++ b/mccs-it/thermal/public/index.html
@@ -3,32 +3,50 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Test Print</title>
-    <style>
-        #pdfViewer {
-            width: 100%;
-            height: 600px; /* Adjust as needed */
-            border: none;
-        }
-    </style>
+    <title>Thermal Printer Test</title>
 </head>
 <body>
     <h1>Thermal Printer Test</h1>
-    <button id="testPrintBtn">Test Print</button>
-    <iframe id="pdfViewer" style="display:none;"></iframe>
+    <form id="printForm">
+        <label for="username">Username:</label>
+        <input type="text" id="username" name="username" required><br><br>
+
+        <label for="studentId">Student ID:</label>
+        <input type="text" id="studentId" name="studentId" required><br><br>
+
+        <button type="submit">Test Print</button>
+    </form>
 
     <script>
-        document.getElementById('testPrintBtn').addEventListener('click', () => {
-            fetch('/test-print', { method: 'POST' })
-                .then(response => response.blob())
-                .then(blob => {
-                    const url = URL.createObjectURL(blob);
-                    const pdfViewer = document.getElementById('pdfViewer');
-                    pdfViewer.src = url;
-                    pdfViewer.style.display = 'block'; // Show the iframe
-                })
-                .catch(error => alert('Error: ' + error));
+        document.getElementById('printForm').addEventListener('submit', (event) => {
+            event.preventDefault(); // Prevent the form from submitting normally
+
+            // Get the form data
+            const formData = new FormData(event.target);
+            const username = formData.get('username');
+            const studentId = formData.get('studentId');
+
+            // Send a POST request with the form data to the server
+            fetch('/test-print', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    username: username,
+                    studentId: studentId,
+                }),
+            })
+            .then(response => {
+                if (response.ok) {
+                    return response.text(); // or .json() if your server returns JSON
+                } else {
+                    throw new Error('Failed to send print request');
+                }
+            })
+            .then(message => alert(message))
+            .catch(error => alert('Error: ' + error));
         });
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file
