diff --git a/html-Detector/Config/DeviceConfig/deviceConfig.js b/html-Detector/Config/DeviceConfig/deviceConfig.js
index 01c9ae33..f8fb1ae3 100644
--- a/html-Detector/Config/DeviceConfig/deviceConfig.js
+++ b/html-Detector/Config/DeviceConfig/deviceConfig.js
@@ -1,40 +1,47 @@
 // html/DeviceConfig/deviceConfig.js
 // Description: JavaScript for the device configuration page.
 
-import { GetPSQLTable, GetPSQL } from '/includes/functions.js';
+import { GetPSQLTable } from '/includes/functions.js';
+import { dataTable } from '/includes/tooldaq.js';
+import '/includes/ace.js'
 
-if (document.readyState !== 'loading'){
-        //console.log("already loaded, initing");
-        Init();
+let editor;
+
+if (document.readyState !== 'loading') {
+    //console.log("already loaded, initing");
+    Init();
 } else {
-        //console.log("page still loading, waiting to finish...");
-        document.addEventListener("DOMContentLoaded", function () {
-                //console.log("page loaded, initing");
-                Init();
-        });
+    //console.log("page still loading, waiting to finish...");
+    document.addEventListener("DOMContentLoaded", function () {
+        //console.log("page loaded, initing");
+        Init();
+    });
 }
 
-function Init(){
-        //console.log("Initialising page");
-        GetDeviceConfigs();
-        document.getElementById("addDeviceConfigBtn").addEventListener("click", addDeviceConfig);
+function Init() {
+    //console.log("Initialising page");
+    setupEditor();
+    GetDeviceConfigs();
+    document.getElementById("addDeviceConfigBtn").addEventListener("click", addDeviceConfig);
+}
+
+function setupEditor() {
+    editor = ace.edit("jsonEditor");
+    editor.setTheme("ace/theme/chrome");
+    editor.session.setMode("ace/mode/json");
+    editor.setValue("{\n  \"devices\": []\n}", -1);
 }
 
 function GetDeviceConfigs() {
-    const query = "SELECT * FROM device_config ORDER BY time DESC LIMIT 10";
-    GetPSQLTable(query, "root", "daq", true).then(function (result) {
-        const deviceConfigOutput = document.getElementById("deviceConfigOutput");
-        deviceConfigOutput.innerHTML = result;
-    }).catch(function (error) {
-        console.error("Error fetching device configurations:", error);
-    });
+    const query = "SELECT * FROM device_config ORDER BY time DESC LIMIT 20";
+    dataTable(query, "deviceConfigOutput");
 }
 
 function addDeviceConfig() {
     const device = document.getElementById("device").value;
     const author = document.getElementById("author").value;
     const description = document.getElementById("description").value;
-    const data = document.getElementById("data").value;
+    const data = editor.getValue();
 
     // Ensure data is in JSON format
     try {
@@ -51,9 +58,17 @@ function addDeviceConfig() {
     `;
 
     GetPSQLTable(query, "root", "daq", true).then(() => {
-        // Refresh the table after adding a new config
+        alert("Device configuration saved successfully.");
+        clearDeviceConfigInputs();
         GetDeviceConfigs();
     }).catch(function (error) {
         console.error("Error adding device configuration:", error);
     });
 }
+
+function clearDeviceConfigInputs() {
+    document.getElementById("device").value = "";
+    document.getElementById("author").value = "";
+    document.getElementById("description").value = "";
+    editor.setValue("{\n  \"devices\": []\n}", -1);
+}
diff --git a/html-Detector/Config/DeviceConfig/index.html b/html-Detector/Config/DeviceConfig/index.html
index 9d90c554..477d2840 100755
--- a/html-Detector/Config/DeviceConfig/index.html
+++ b/html-Detector/Config/DeviceConfig/index.html
@@ -5,6 +5,31 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ToolDAQ | Device Configurations</title>
+    <style>
+        .container {
+            margin: auto;
+            padding: 20px;
+        }
+
+        #jsonEditor {
+            height: 300px;
+            width: 100%;
+            border: 1px solid #ccc;
+            margin-top: 10px;
+        }
+
+        .mdl-textfield {
+            width: 100%;
+        }
+
+        .mdl-card {
+            margin-bottom: 20px;
+        }
+
+        #deviceConfigOutput {
+            margin-top: 30px;
+        }
+    </style>
 </head>
 
 <body>
@@ -14,45 +39,48 @@
     <!--#include virtual="../subheader.html" -->
     <!--#include virtual="/includes/drawer.html" -->
 
+    <div class="container">
+        <h3>New Device Configuration</h3>
 
-    <h1 align="center">New Device Configurations</h1>
-
-    <!-- Form to add a new device configuration -->
-    <form id="deviceConfigForm">
-        <label for="device">Device:</label>
-        <input type="text" id="device" name="device" size="40" style="margin: 10px;" required><br><br>
+        <div class="mdl-card mdl-shadow--2dp mdl-card--border">
+            <div class="mdl-card__supporting-text">
+                <form id="deviceConfigForm">
 
-        <label for="author">Author:</label>
-        <input type="text" id="author" name="author" size="40" style="margin: 10px;" required><br><br>
+                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                        <input class="mdl-textfield__input" type="text" id="device" required>
+                        <label class="mdl-textfield__label" for="device">Device Name</label>
+                    </div>
 
-        <label for="description">Description:</label><br>
-        <textarea id="description" name="description" style="resize:both; width:80%; margin:10px;" required></textarea><br><br>
+                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                        <input class="mdl-textfield__input" type="text" id="author" required>
+                        <label class="mdl-textfield__label" for="author">Author</label>
+                    </div>
 
-        <label for="data">Data (JSON format):</label><br>
-        <textarea id="data" name="data" style="resize:both; width:80%; margin:10px;" required></textarea><br><br>
-        
-        <script type="text/javascript">
-            const datainput = document.querySelector("#data");
-            datainput.addEventListener('input', autoResize, false);
-            
-            const descriptinput = document.querySelector("#description");
-            descriptinput.addEventListener('input', autoResize, false);
-            
-            function autoResize() {
-                this.style.height = 'auto';
-                this.style.height = this.scrollHeight + 'px';
-            }
-        </script>
+                    <div class="mdl-textfield mdl-js-textfield">
+                        <textarea class="mdl-textfield__input" rows="3" id="description"></textarea>
+                        <label class="mdl-textfield__label" for="description">Description</label>
+                    </div>
 
-        <button type="button" id="addDeviceConfigBtn" >Add Device Configuration</button>
-    </form>
+                    <label for="jsonEditor"><strong>Data (JSON format):</strong></label>
+                    <div id="jsonEditor">// Write your device config here...</div>
 
-    <h2 align="center">Existing Device Configurations</h2>
-    <div id="deviceConfigOutput"></div>
+                    <br>
+                    <button type="button" id="addDeviceConfigBtn"
+                        class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+                        Add Device Configuration
+                    </button>
+                </form>
+            </div>
+        </div>
 
+        <h2 align="center">Existing Device Configurations</h2>
+        <div id="deviceConfigOutput"></div>
+    </div>
     <!-- Include common footer -->
     <!--#include virtual="/includes/footer.html" -->
 
     <script type="module" src="/includes/functions.js?v=1" async></script>
     <script type="module" src="./deviceConfig.js?v=1" async></script>
-</body>
+    <script type="module" src="/includes/ace.js?v=1" async></script>
+
+</body>
\ No newline at end of file