diff --git a/vue/control.vue b/vue/control.vue
index dcffdc1c..e637d41b 100644
--- a/vue/control.vue
+++ b/vue/control.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-    <h3>Basic device status and debug channel values display</h3>
-    <p>Here you can operate on raw channel values. You can also set RAW pwm values, without LED driver. PLEASE REMEMBER that this page is not a correct LED RGB/CW controller. Please use main WWW page for that.</p>
+    <h4>Channel Debug Controls</h4>
+    <p>This page provides low-level control of raw channel values for testing and troubleshooting. You can toggle relay/PWM outputs and set channel values directly. If your device uses an LED driver, these controls bypass it and may not match the lighting UI. For normal RGB/CW lighting control, use the main OpenBeken web UI.</p>
         <div>
           <!--<span v-for="item in channels" v-bind:key="item">{{item}}:{{channels[item]}} </span>-->
           <div v-for="(item, key) in channels" v-bind:key="item">
@@ -12,7 +12,7 @@
                 :class="item?'set':'unset'" 
                 @click="channelclick(key)"
               >{{channels[key]?'On':'Off'}}</button>
-              <span v-bind:key="'span'+item">{{key}}:{{item}} role {{outputchannelrolenames[+key]}}{{channeltag[+key]}}</span>
+              <span v-bind:key="'span'+item">{{key}}:{{item}} Role: {{outputchannelrolenames[+key]}}{{channeltag[+key]}}</span>
               <input 
                 v-if="(outputchannelrolenames[+key] === 'PWM') || (outputchannelrolenames[+key] === 'PWM_n')" 
                 v-bind:key="'input'+item" 
@@ -27,13 +27,13 @@
 
 
         <div v-if="show_cw">
-          <span class="label">CW:</span>
+          <span class="label">Cool White:</span>
           <div class="radiused cw">
             <input type="range" min="0" max="100" v-model="cw" @input="change()">
           </div>
         </div>
         <div v-if="show_ww">
-          <span class="label">WW:</span>
+          <span class="label">Warm White:</span>
           <div class="radiused ww">
             <input type="range" min="0" max="100" v-model="ww" @input="change()">
           </div>
@@ -45,13 +45,13 @@
           </div>
         </div>
         <div v-if="show_rgb">
-          <span class="label">Sat:</span>
+          <span class="label">Saturation:</span>
           <div class="radiused" v-bind:style="backgroundstyle">
               <input type="range" min="0" max="100" v-model="saturation" @input="change()">
           </div>
         </div>
         <div v-if="show_rgb">
-          <span class="label">Int:</span>
+          <span class="label">Intensity:</span>
           <div class="radiused lightness">
               <input type="range" min="0" max="100" v-model="lightness" @input="change()">
           </div>
diff --git a/vue/filesystem.vue b/vue/filesystem.vue
index 8a57bbb1..340efd66 100644
--- a/vue/filesystem.vue
+++ b/vue/filesystem.vue
@@ -1,66 +1,87 @@
 <template>
     <div class="fill">
-        <p>"List Filesystem" will display all files on LittleFS. 
-        After listing the files, you can click on file name to begin editing text.
-        "Create File" allows you to create a new file on Device (like autoexec.bat).
-        You can also add files by drag &amp; dropping it.
-        "Reset scripts" will stop all script threads running (if you have started any) without stopping the device.
-        When editing a file, use "Save, Reset (...), and run" file to test new scripts, it will restart scripting every time with a clear state.
-        </p>
-		<p>You can access LittleFS HTML files by the following url: DEVICE_IP/api/lfs/FILENAME, for example: http://192.168.0.213/api/lfs/cfg.html . See <a href="https://www.elektroda.com/rtvforum/topic3971355.html">OBK/TASMOTA rest tutorial</a> for details</p>
-        <div class="top">
-            <button @click="backup(null, $event)">Read fsblock</button>
-            <button @click="restore(null, $event)">Restore fsblock</button>
-            <button @click="read(null, $event)">List Filesystem</button>
-            <button @click="create(null, $event)">Create File</button>
-            <button @click="upload(null, $event, false)">Upload file</button>
-            <button @click="upload(null, $event, true)">Upload as gzip</button>
-            <button @click="showUrlModal = true">Fetch from URLs</button>
-            <button @click="resetSVM(null, $event)">Reset scripts</button>
-            <br/>
-            <button @click="getTar(null, $event)">Download FS Backup in Tar Archive</button>
+        <div class="helpBox">
+            <div class="helpIntro">This tab lets you browse and manage files stored on LittleFS:</div>
+            <ul class="helpList">
+                <li><strong>List filesystem</strong> shows all files and folders on the device.</li>
+                <li>Click a filename to open it in the editor.</li>
+                <li><strong>Create file</strong> creates a new file on the device (for example, <code>autoexec.bat</code>).</li>
+                <li>You can also upload files by dragging and dropping them onto the drop area.</li>
+                <li><strong>Reset scripts</strong> stops all running script threads without rebooting the device.</li>
+                <li>Use <strong>Save, reset SVM, and run</strong> to test changes with a clean scripting state.</li>
+            </ul>
+            <div class="helpFooter">
+                LittleFS files can also be accessed via <code>{{ deviceBase }}/api/lfs/&lt;filename&gt;</code>.
+                For details, see the <a href="https://www.elektroda.com/rtvforum/topic3971355.html">OpenBeken/Tasmota REST tutorial</a>.
+            </div>
+        </div>
 
+<div class="top toolbar">
+            <div class="toolbarRow">
+                <button @click="read(null, $event)">List filesystem</button>
+                <button @click="create(null, $event)">Create file</button>
+                <button @click="upload(null, $event, false)">Upload file(s)</button>
+                <button @click="upload(null, $event, true)">Upload as gzip (.gz)</button>
+                <button @click="showUrlModal = true">Fetch from URLs</button>
+                <button @click="getTar(null, $event)">Download filesystem backup (.tar)</button>
+            </div>
+            <div class="toolbarRow toolbarRowAdvanced">
+                <button @click="backup(null, $event)">Read FS block</button>
+                <button @click="restore(null, $event)">Restore FS block</button>
+                <button @click="resetSVM(null, $event)">Reset scripts</button>
+                <button class="danger" @click="formatLittleFS(null, $event)">Format LittleFS</button>
+                <button class="danger" @click="resizeLittleFS(null, $event)">Resize LittleFS</button>
+            </div>
         </div>
         <div class="bottom">
-<div v-if="showUrlModal" style="position:fixed; top:20%; left:30%; width:40%; background:white; border:1px solid black; padding:1em; z-index:1000;">
-  <h3>Enter URLs (one per line)</h3>
-  This will download files from given URLs and save them to LFS.
-  <br>
-  <textarea v-model="urlInput" rows="10" style="width:100%"></textarea>
-  <br>
-  <label><input type="checkbox" v-model="urlGzip"> Compress with GZIP</label>
-  <br><br>
-  <button @click="fetchFromUrls">OK</button>
-  <button @click="showUrlModal = false">Cancel</button>
+<div v-if="showUrlModal" class="modalOverlay" @click.self="showUrlModal = false">
+    <div class="modal">
+        <h3>Fetch from URLs</h3>
+        <p class="modalHelp">The web app will download each URL and save the file to LittleFS.</p>
+        <textarea v-model="urlInput" rows="10"></textarea>
+        <label class="modalOption"><input type="checkbox" v-model="urlGzip"> Compress using gzip (.gz)</label>
+        <div class="modalActions">
+            <button @click="fetchFromUrls">Fetch</button>
+            <button @click="showUrlModal = false">Cancel</button>
+        </div>
+    </div>
 </div>
             <div class="left">
-                <input type="text" v-model="folder">
+                <div class="folderBox">
+                    <label for="folderInput"><strong>Target Folder (Optional)</strong></label><br/>
+                    <input id="folderInput" class="folderInput" type="text" v-model="folder" placeholder="e.g., www">
+                    <div class="folderHelp">
+                        Used for uploads and newly created files. Leave blank to save to the LittleFS root.
+                    </div>
+                </div>
                 <div class="drop" @drop="dropHandler($event)" @dragover="dragOverHandler($event)">
                     <div class="otatext center" v-html="otatext"></div>
                 </div>
-                <div v-html="status"></div>
-                <div v-html="output"></div>
+                <div class="logText" v-html="status"></div>
+                <div class="logText" v-html="output"></div>
             </div>
             <div class="middle">
                 <div>
-                    <div v-for="file in files" v-bind:key="file.name">
-                        <span v-if="file.type === 1"><button @click="editfile(file.name)">{{file.name}}</button> - {{file.size}}</span>
-                        <br v-if="file.type === 1"/>
+                    <div v-for="file in files" v-bind:key="file.name" v-if="file.type === 1" class="fileRow">
+                        <button class="fileBtn" @click="editfile(file.name)">{{file.name}}</button>
+                        <span class="fileSize">- {{file.size}}</span>
                     </div>
                     <div v-if="files.length > 0">
-                    <strong>Total Size: {{ totalBytes }} bytes</strong>
+                        <strong>Total Size: {{ totalBytes }} bytes</strong>
                     </div>
                 </div>
             </div>
             <div class="right">
-                <h2 id="fileEditorLabel">File editor. Select file to begin.</h2>
-                <div id="fileEditorBody" style="display:none">
-                    <button @click="save(null, $event)">Save</button>
-                    <button @click="save(startScript_simple)">Save, Run file as script thread</button>
-                    <button @click="save(startScript_firstReset)">Save, Reset SVM and run file as script thread</button>         
-                    <button @click="deleteFile(null, $event)">Delete</button>
-                    <button @click="openInBrowser(null, $event)">Open in Browser</button>
-                    <textarea v-model="edittext" rows="40" cols="100" style="height:90%"></textarea>
+                <h2 id="fileEditorLabel">File editor: select or create a file to begin.</h2>
+                <div id="fileEditorBody" class="editorBody" style="display:none">
+                    <div class="editorActions">
+                        <button @click="save(null, $event)">Save</button>
+                        <button @click="save(startScript_simple)">Save and run as script thread</button>
+                        <button @click="save(startScript_firstReset)">Save, reset SVM, and run as script thread</button>
+                        <button @click="deleteFile(null, $event)">Delete</button>
+                        <button @click="openInBrowser(null, $event)">Open in browser</button>
+                    </div>
+                    <textarea v-model="edittext" rows="40" cols="100"></textarea>
                 </div>
             </div>
         </div>
@@ -74,11 +95,12 @@
       return {
         msg: 'world!',
         backupdata: null,
-        status:'nothing going on',
+        status:'Ready.',
         folder:'',
-        otatext:'drop file(s) or .tar here',
+        otatext:'Drop file(s) or a .tar archive here',
         shortName:'',
         mqtttopic:'',
+        deviceBase: '',
         output: '',
         showUrlModal: false,
         urlInput: '',
@@ -145,7 +167,7 @@
                         this.savefile(filename, buffer, resolve);
                     });
                 } catch (e) {
-                    this.status += `<br/>Error with ${url}: ${e}`;
+                    this.status += `<br/>Error fetching ${url}: ${e}`;
                 }
             }
             this.read();
@@ -162,7 +184,7 @@
                         reader.onload = (event) => {
                             console.log(event);
                             console.log('file len:'+event.target.result.byteLength);
-                            this.status += '<br/>tar upload '+files[0].filepath;
+                            this.status += '<br/>Uploading tar archive: '+files[0].filepath;
                             this.putTar(event.target.result);
                         };
                         reader.readAsArrayBuffer(files[0]);
@@ -233,10 +255,10 @@
                     reader.onload = (event) => {
                         console.log(event);
                         console.log('file len:'+event.target.result.byteLength);
-                        this.status += '<br/>save '+files[filecount].filepath;
+                        this.status += '<br/>Saving '+files[filecount].filepath;
                         this.savefile(files[filecount].filepath, event.target.result, ()=>{
                             filecount++;
-                            this.status += '.. done';
+                            this.status += ' done.';
                             saveone();
                         });
                         //holder.style.background = 'url(' + event.target.result + ') no-repeat center';
@@ -297,7 +319,7 @@
         },
 
         savefile(name, data, cb){
-            this.status += '<br/>saving file...';
+            this.status += '<br/>Saving file...';
             let url = window.device+'/api/lfs/';
             if (this.folder){
                 url += this.folder;
@@ -311,28 +333,28 @@
                 .then(response => response.text())
                 .then(text => {
                     console.log('received '+text);
-                    this.status += 'save complete...';
+                    this.status += ' done.';
                     if(cb) cb();
                 })
                 .catch(err => console.error(err)); // Never forget the final catch!
         },
 
         backup(cb){
-            this.status += '<br/>starting backup...';
+            this.status += '<br/>Starting backup...';
             let url = window.device+'/api/fsblock';
             fetch(url)
                 .then(response => response.arrayBuffer())
                 .then(buffer => {
                     this.backupdata = buffer; 
                     console.log('received '+buffer.byteLength);
-                    this.status += '..backup done...';
+                    this.status += ' backup complete.';
                     if(cb) cb();
                 })
                 .catch(err => console.error(err)); // Never forget the final catch!
         },
 
         restore(cb){
-            this.status += '<br/>starting restore...';
+            this.status += '<br/>Starting restore...';
             let url = window.device+'/api/fsblock';
             if (this.backupdata){
                 fetch(url, { 
@@ -342,7 +364,7 @@
                     .then(response => response.text())
                     .then(text => {
                         console.log('received '+text);
-                        this.status += 'Restore complete...';
+                        this.status += ' restore complete.';
                         if(cb) cb();
                     })
                     .catch(err => console.error(err)); // Never forget the final catch!
@@ -355,7 +377,7 @@
                 .then(response => response.json())
                 .then(folder => {
                     console.log('folder '+url,folder);
-                    this.status += 'Read '+url;
+                    this.status += '<br/>Reading '+url;
                     if (!folder.content) return;
                     for (let i = 0;i < folder.content.length; i++){
                         if (folder.content[i].name.startsWith('.')){
@@ -386,24 +408,24 @@
         },
         read(cb) {
             this.files = [];
-            this.readFolder('/');
+            this.readFolder('/', cb);
         },
 
 
         create(cb) {
-            let fname = prompt("Please enter new file name:", "autoexec.bat");
+            let fname = prompt("Enter a new filename:", "autoexec.bat");
             if(fname == null)
             {
                  alert("Canceled.");
             }
             else if(fname.length < 1)
             {
-                 alert("Empty name.");
+                 alert("Filename cannot be empty.");
             }
             else
             {
                  //alert("TODO "+fname);
-                 alert("Will try to create " +fname);
+                 alert("Creating " + fname + "...");
                  this.savefile(fname,"", ()=>{
                      this.read();
                  });
@@ -417,8 +439,8 @@
                 .then(text => {
                     this.edittext = text;
                     this.editname = name;
-                    document.getElementById("fileEditorLabel").innerHTML = "Editing "+name;
-                    document.getElementById("fileEditorBody").style.display = "block";
+                    document.getElementById("fileEditorLabel").innerHTML = "Editing: "+name;
+                    document.getElementById("fileEditorBody").style.display = "flex";
                 });
         },
 
@@ -427,27 +449,27 @@
         deleteFile(cb) {   
             let readCallback = this.read;
             if (this.editname) {
-                let r = confirm("Do you really want to remove the file " + this.editname + "?");
+                let r = confirm("Do you want to delete the file " + this.editname + "?");
                 if (r == false) {
-                    alert("Ok, then not.");
+                    alert("Delete canceled.");
                     return;
                 }
                 let url = window.device + '/api/del' + this.editname;
-                alert("Will try to remove - url is " + url);
+                alert("Deleting file...");
                 fetch(url)
                     .then(response => response.arrayBuffer())
                     .then(buffer => {
-                        this.status += '..delete done...';
+                        this.status += '<br/>Delete complete.';
                         if (cb) cb();
                         readCallback();
                     })
                     .catch(error => {
-                        this.status += `..delete failed: ${error}`;
+                        this.status += `<br/>Delete failed: ${error}`;
                         readCallback();
                         alert("Error deleting file: " + error);
                     });
             } else {
-                alert("Please begin editing some file first. Just click the name on list to edit.");
+                alert("Select a file from the list to edit first.");
             }
         },
 
@@ -458,7 +480,7 @@
                 // open URL in new window
                 window.open(url, '_blank');
             } else {
-                alert("Please begin editing some file first. Just click the name on list to edit.");
+                alert("Select a file from the list to edit first.");
             }
         },
         save(cb) {
@@ -474,7 +496,7 @@
                          readCallback();
                     });
             } else {
-                alert("Please begin editing some file first. Just click the name on list to edit.");
+                alert("Select a file from the list to edit first.");
             }
         },
         resetSVM() {
@@ -493,6 +515,117 @@
                     });
             }
         },
+        formatLittleFS(cb, event) {
+            const r = confirm("Format LittleFS? This will permanently delete all files on the device.");
+            if (r === false) {
+                this.status += '<br/>LittleFS format canceled.';
+                return;
+            }
+
+            // Close the editor (the file may no longer exist after formatting)
+            this.edittext = '';
+            this.editname = '';
+            const lbl = document.getElementById('fileEditorLabel');
+            const body = document.getElementById('fileEditorBody');
+            if (lbl) lbl.innerHTML = 'File editor: select a file to begin.';
+            if (body) body.style.display = 'none';
+
+            this.status += '<br/>Formatting LittleFS...';
+            const url = window.device + '/api/cmnd';
+            const cmd = 'lfs_format';
+
+            fetch(url, {
+                body: cmd,
+                method: 'POST',
+            })
+                .then(response => response.text())
+                .then(text => {
+                    console.log('lfs_format response:', text);
+                    this.status += ' done.';
+                    if (cb) cb();
+
+                    // The format can take a moment; refresh the listing shortly afterwards.
+                    setTimeout(() => {
+                        this.read();
+                    }, 1500);
+                })
+                .catch(err => {
+                    console.error(err);
+                    this.status += '<br/>LittleFS format failed: ' + err;
+                });
+        },
+        resizeLittleFS(cb, event) {
+            const input = prompt(
+                "Enter new LittleFS size in bytes (hex like 0x10000 or decimal like 65536):",
+                "0x10000"
+            );
+
+            if (input === null) {
+                this.status += '<br/>LittleFS resize canceled.';
+                return;
+            }
+
+            const raw = input.trim();
+            if (!raw) {
+                alert("Size cannot be empty.");
+                return;
+            }
+
+            // Accept hex (0x...) or decimal
+            let sizeVal = null;
+            if (/^0x[0-9a-fA-F]+$/.test(raw)) {
+                sizeVal = parseInt(raw, 16);
+            } else if (/^[0-9]+$/.test(raw)) {
+                sizeVal = parseInt(raw, 10);
+            } else {
+                alert("Invalid size. Use hex like 0x10000 or decimal like 65536.");
+                return;
+            }
+
+            if (!Number.isFinite(sizeVal) || sizeVal <= 0) {
+                alert("Size must be a positive number.");
+                return;
+            }
+
+            // Normalise to hex for the command (matches your example)
+            const sizeHex = '0x' + sizeVal.toString(16);
+
+            const ok = confirm(
+                `Resize LittleFS to ${sizeHex} (${sizeVal} bytes)?\n\nThis will erase existing files. Reboot to apply.`
+            );
+            if (!ok) {
+                this.status += '<br/>LittleFS resize canceled.';
+                return;
+            }
+
+            // Safer UX: close editor (resizing can invalidate files)
+            this.edittext = '';
+            this.editname = '';
+            const lbl = document.getElementById('fileEditorLabel');
+            const body = document.getElementById('fileEditorBody');
+            if (lbl) lbl.innerHTML = 'File editor: select a file to begin.';
+            if (body) body.style.display = 'none';
+
+            this.status += `<br/>Resizing LittleFS to ${sizeHex}...`;
+            const url = window.device + '/api/cmnd';
+            const cmd = `lfs_size ${sizeHex}`;
+
+            fetch(url, { body: cmd, method: 'POST' })
+                .then(r => r.text())
+                .then(text => {
+                    console.log('lfs_size response:', text);
+                    this.status += ' done.';
+                    if (cb) cb();
+
+                    // Give the device a moment, then refresh file list
+                    setTimeout(() => this.read(), 1500);
+                })
+                .catch(err => {
+                    console.error(err);
+                    this.status += '<br/>LittleFS resize failed: ' + err;
+                });
+        },
+
         startScript_simple() {
             this.startScript(null,null,0);
         },
@@ -516,7 +649,7 @@
                          
                     });
             } else {
-                alert("Please begin editing some file first. Just click the name on list to edit.");
+                alert("Select a file from the list to edit first.");
             }
         },
 
@@ -999,6 +1132,9 @@
     mounted (){
         this.msg = 'fred';
 
+        this.deviceBase = (window.device || '').toString().replace(/\/+$/, '');
+        if (!this.deviceBase) this.deviceBase = 'http://<device-ip>';
+
         // construct tarball class
         this.tar = this.tarball();
 
@@ -1013,16 +1149,150 @@
 </script>
 
 <style scoped>
+    .fill {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        height: 100%;
+        min-height: 0;
+    }
+
+        /* Help text: always visible, but compact so actions stay near the top. */
+    .helpBox {
+        font-size: 0.85em;
+        line-height: 1.25em;
+        padding: 8px 10px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+        border-radius: 6px;
+        background: rgba(0, 0, 0, 0.02);
+    }
+    .helpIntro {
+        margin: 0 0 6px 0;
+        font-weight: 600;
+    }
+    .helpList {
+        margin: 0 0 6px 18px;
+        padding: 0;
+        columns: 2;
+        column-gap: 26px;
+    }
+    .helpList li {
+        break-inside: avoid;
+        margin: 0 0 2px 0;
+    }
+    .helpFooter {
+        margin: 0;
+    }
+
+
+    /* Action toolbar */
+    .top.toolbar {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+    .toolbarRow {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        align-items: center;
+    }
+    .toolbarRowAdvanced {
+        padding-top: 0;
+        border-top: none;
+    }
+    button.danger {
+        border-width: 2px;
+    }
+
+    /* Main 3-column layout */
+    .bottom {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: grid;
+        grid-template-columns: 300px 280px 1fr;
+        gap: 12px;
+        position: relative;
+        padding-top: 10px;
+        border-top: 1px solid rgba(0, 0, 0, 0.12);
+    }
+
+    .left,
+    .middle,
+    .right {
+        position: static;
+        width: auto;
+        height: auto;
+        min-height: 0;
+        overflow: auto;
+        box-sizing: border-box;
+    }
+
+    .left {
+        padding: 4px 8px 4px 0;
+    }
+    .middle {
+        padding: 4px 8px 4px 12px;
+        border-left: none;
+    }
+    .right {
+        padding: 4px 0 4px 12px;
+        border-left: none;
+    }
+
+
+    /* Middle panel: file list spacing */
+    .fileRow {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin: 0 0 6px 0;
+        flex-wrap: wrap;
+    }
+    .fileBtn {
+        padding: 2px 6px;
+    }
+    .fileSize {
+        white-space: nowrap;
+    }
+
+
+    /* Left panel */
+    .folderBox {
+        margin: 0 0 10px 0;
+        width: 100%;
+    }
+    .folderInput {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 4px 6px;
+    }
+    .folderHelp {
+        margin-top: 4px;
+        font-size: 0.9em;
+        line-height: 1.2em;
+        word-break: break-word;
+    }
+
+    .logText {
+        font-size: 0.88em;
+        line-height: 1.25em;
+        word-break: break-word;
+    }
+
+
     .drop {
-        border: 5px solid blue;
-        width:  200px;
-        height: 100px;
+        border: 4px solid #3b82f6;
+        background: #ffffff;
+        color: #000000;
+        margin: 10px 0 10px 2px;
+        width: 240px;
+        max-width: 100%;
+        height: 120px;
         text-align: center;
         position: relative;
         vertical-align: center;
-    }
-
-    .otatext {
+        box-sizing: border-box;
     }
     .center {
         margin: 0;
@@ -1033,32 +1303,90 @@
         transform: translate(-50%, -50%);
     }
 
-    .left {
-        position: absolute;
-        left:0;
-        width:30%;
-        height:100%;
+    /* Right panel: editor */
+    #fileEditorLabel {
+        margin: 0 0 8px 0;
+        font-size: 1.05em;
+        line-height: 1.25em;
     }
-    .middle {
-        position: absolute;
-        left:30%;
-        width:20%;
-        height:100%;
+    .editorBody {
+        gap: 8px;
+        flex-direction: column;
+        min-height: 0;
     }
-    .right {
-        position: absolute;
-        left:50%;
-        width:50%;
-        height:100%;
+    .editorActions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        align-items: center;
     }
-    .fill {
-        height:90%;
+    .editorBody textarea {
+        width: 100%;
+        box-sizing: border-box;
+        flex: 1 1 auto;
+        min-height: 340px;
+        height: 100%;
     }
-    .top {
-        height:10%;
+
+    /* Modal */
+    .modalOverlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.35);
+        z-index: 1000;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        padding: 10vh 12px 12px 12px;
+        box-sizing: border-box;
     }
-    .bottom {
-        height:90%;
-        position: relative;
+    .modal {
+        background: #ffffff;
+        border: 1px solid rgba(0, 0, 0, 0.35);
+        padding: 12px;
+        width: min(720px, 92vw);
+        box-sizing: border-box;
+        border-radius: 6px;
+    }
+    .modal h3 {
+        margin: 0 0 8px 0;
+        font-size: 1.05em;
+    }
+    .modalHelp {
+        margin: 0 0 8px 0;
+    }
+    .modal textarea {
+        width: 100%;
+        box-sizing: border-box;
+    }
+    .modalOption {
+        display: inline-flex;
+        gap: 6px;
+        align-items: center;
+        margin-top: 8px;
+    }
+    .modalActions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 6px;
+        margin-top: 10px;
+    }
+
+    /* Responsive: stack columns on narrower screens */
+    @media (max-width: 1000px) {
+        .bottom {
+            grid-template-columns: 1fr;
+        }
+        .helpList {
+            columns: 1;
+        }
+        .left,
+        .middle,
+        .right {
+            overflow: visible;
+        }
+        .editorBody textarea {
+            min-height: 260px;
+        }
     }
-</style>
+</style>
\ No newline at end of file
diff --git a/vue/gpioDoctor.vue b/vue/gpioDoctor.vue
index 84a85641..9f27b1df 100644
--- a/vue/gpioDoctor.vue
+++ b/vue/gpioDoctor.vue
@@ -1,50 +1,66 @@
 <template>
   <div class="container">
-    <div class="item" style="max-width: 300px;">
-      <h4>GPIO Doctor</h4>
-      <p>Here you can quickly detect GPIO roles of an unknown device. Remember to try checking <a href="https://www.youtube.com/watch?v=VDbaLR_0YWs"> our Templates</a> first, maybe there is already template for your device.</p>
-
-      <h4>Usage warning</h4>
-      <p>This tool will override your current GPIO settings. Use with caution. Backup your current template if needed.</p>
-
-      <h4>How to use - finding outputs</h4>
-      <p>To find relays, LEDs or PWMs, just use 'Set Output High'/Set Output Low' button on each pin and see if relay/LED/Light changes. This works also for PWMs, because 'Relay' role can control PWM, it just toggles it between 100% and 0% duty.</p>
- 
-      <h4>How to use - finding inputs</h4>
-      <p>To find inputs, including buttons, first click 'Setup input with pull up', which is a most common option, and then press a button for a second and check if state High/Low changes. If it changes, then you've found your button. In some rare cases, you also might want to try no pullup resistor mode (maybe for door sensors, etc?)</p>
- 
-      <h4>How to use - final steps</h4>
-      <p>You can easily change pin roles here and they will be saved. Remember to clear up unused Relay/dInput/roles etc manually and keep only the roles you are going to use</p>
- 
+    <div class="item infoPanel">
+      <p>Use this tool to identify GPIO roles on an unknown device. Before you start, check <a href="https://www.youtube.com/watch?v=VDbaLR_0YWs">Templates</a> first; there may already be a template for your device.</p>
+
+      <h4>Warning</h4>
+      <p>This tool overrides your current GPIO configuration. Use with caution. Back up your current template first, if needed.</p>
+
+      <h4>How to use: finding outputs</h4>
+      <p>To find relays, LEDs, or PWM outputs, use the “Set Output High” / “Set Output Low” button for each pin and observe what changes. This can also help with PWM outputs, because the “Relay” role can drive a PWM channel by toggling it between 100% and 0% duty cycle.</p>
+
+      <h4>How to use: finding inputs</h4>
+      <p>To find inputs (including buttons), first click “Set Input (pull-up)”, which is the most common option. Then press and hold the button briefly and check whether the state changes (High/Low). If it does, you have likely found your button. In rarer cases, you may also want to try “Set Input (no pull-up)” (for example, some door sensors).</p>
+
+      <h4>How to use: final steps</h4>
+      <p>Changes you make here are saved automatically. Once you have identified the required pins, clear any unused roles and keep only the roles you intend to use.</p>
     </div>
-    <div class="item" style="max-width: 550px;">
-    
-      <h4>GPIO Doctor Pins</h4> 
-      <div v-for="(role, index) in pins.roles" :key="index">
-        <span class="pin-index">P{{index}} ({{getPinAlias(index)}})</span>
-        <select v-model="pins.roles[index]"  @change="onPinChange(index)">
-          <option v-for="(name, index2) in pins.rolenames" :value="index2" :key="index2" :selected="(role == index2)">{{name}}</option>
-        </select>
-       Ch: <input type="number" min="0" max="64" step="1" v-model="pins.channels[index]" @change="onChannelChange(index)">
-       Val:
-        <span class="pin-value" :style="{ fontWeight: pins.states[index] ? 'bold' : 'bold', color: pins.states[index] ? 'green' : 'red' }">{{pins.states[index] ? 'High' : 'Low'}}</span>
-        <br>
-        Tools: <button @click="toggle(index)" :class="pins.states[index] ? 'button-green' : 'button-red'">
-         {{ pins.states[index] ? 'Set Output Low' : 'Set Output High' }}
-         </button>
-        <button @click="setInput(index,'dInput')">Set Input P-up</button>
-        <button @click="setInput(index,'dInput_NoPullUp')">Set Input (no p-up)</button>
-        <button @click="clearPin(index)">Clear)</button>
-        <hr>
+
+    <div class="item pinsPanel" :style="pinsCssVars">
+
+      <div class="pinHeader">
+        <div>Pin</div>
+        <div>Role</div>
+        <div class="rightHeader">
+          <div>Ch</div>
+        </div>
       </div>
 
+      <div v-for="(role, index) in pins.roles" :key="index" class="pinRow">
+        <div class="cellPin">
+          <span class="pin-index">P{{index}}</span>
+          <span class="pin-alias">({{getPinAlias(index)}})</span>
+        </div>
+
+        <div class="cellRole">
+          <select class="roleSelect" v-model="pins.roles[index]" @change="onPinChange(index)">
+            <option v-for="(name, index2) in pins.rolenames" :value="index2" :key="index2">{{name}}</option>
+          </select>
+        </div>
+
+        <div class="cellRight rightGroup">
+          <input class="chInput" type="number" min="0" max="64" step="1" v-model="pins.channels[index]" @change="onChannelChange(index)">
+          <span class="valBadge" :data-state="pins.states[index] ? 'high' : 'low'">{{pins.states[index] ? 'High' : 'Low'}}</span>
+        </div>
 
+        <div class="cellToolsLeft">
+          <button @click="toggle(index)" :class="pins.states[index] ? 'button-green' : 'button-red'">
+            {{ pins.states[index] ? 'Set Output Low' : 'Set Output High' }}
+          </button>
+          <button @click="setInput(index,'dInput')">Set Input P-up</button>
+        </div>
+
+        <div class="cellToolsRight">
+          <button @click="setInput(index,'dInput_NoPullUp')">Set Input (no P-up)</button>
+          <button @click="clearPin(index)">Clear</button>
+        </div>
+      </div>
     </div>
-   </div>
+  </div>
 </template>
 
 <script>
-  module.exports = {
+module.exports = {
 
     data: ()=>{
       return {
@@ -59,7 +75,7 @@
 
         },
        getPinAlias(index) {
-        // some of pins have special roles
+        // Some pins have special roles
         if (index == 23)
           return "ADC3";
         if (index == 26)
@@ -201,6 +217,24 @@
               }); // Never forget the final catch!
         }
     },
+    computed:{
+      roleMaxCh(){
+        const names = (this.pins && this.pins.rolenames) ? this.pins.rolenames : [];
+        let maxLen = 0;
+        for(let i = 0; i < names.length; i++){
+          const s = names[i];
+          if(s && s.length > maxLen) maxLen = s.length;
+        }
+        // Extra space for dropdown chrome and padding
+        let ch = maxLen + 6;
+        if(ch < 18) ch = 18;
+        if(ch > 48) ch = 48;
+        return ch;
+      },
+      pinsCssVars(){
+        return { '--roleW': this.roleMaxCh + 'ch' };
+      }
+    },
     mounted (){
         this.msg = 'fred';
 
@@ -224,18 +258,140 @@
     font-family: 'Courier New', Courier, monospace;
     font-size: 14px;
 }
-  .container {
-    display: flex;
-    justify-content: center;
-  }
 
-  .item {
-    padding: 0 15px;
-  }
-  .pin-index {
-    display: inline-block;
-  }
-  .button-green {
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 28px;
+  flex-wrap: wrap;
+  margin-top: 18px;
+}
+
+.item {
+  padding: 0 15px;
+}
+
+/* Left info panel */
+.infoPanel {
+  flex: 0 0 300px;
+  max-width: 360px;
+}
+
+/* Right pins panel */
+.pinsPanel {
+  flex: 1 1 720px;
+  max-width: 920px;
+  min-width: 520px;
+  /* Role column target width (computed via pinsCssVars) */
+  --roleW: 28ch;
+}
+
+.pinHeader{
+  display: grid;
+  grid-template-columns: 150px minmax(18ch, var(--roleW)) 1fr;
+  column-gap: 12px;
+  padding: 6px 10px;
+  font-weight: 600;
+  opacity: 0.85;
+  border-bottom: 1px solid rgba(0,0,0,0.12);
+  margin-bottom: 6px;
+  align-items: end;
+}
+
+.rightHeader{
+  display: grid;
+  grid-template-columns: 5ch max-content;
+  column-gap: 12px;
+  justify-content: start;
+}
+
+.pinRow{
+  display: grid;
+  grid-template-columns: 150px minmax(18ch, var(--roleW)) 1fr;
+  grid-template-areas:
+    "pin role right"
+    ".  toolsL toolsR";
+  column-gap: 12px;
+  row-gap: 6px;
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(0,0,0,0.08);
+  align-items: center;
+}
+
+.cellPin{ grid-area: pin; white-space: nowrap; }
+.cellRole{ grid-area: role; min-width: 0; }
+.cellRight{ grid-area: right; }
+.cellToolsLeft{ grid-area: toolsL; }
+.cellToolsRight{ grid-area: toolsR; }
+
+.pin-index{ font-weight: 600; }
+.pin-alias{ opacity: 0.7; margin-left: 6px; }
+
+.roleSelect{
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.rightGroup{
+  display: grid;
+  grid-template-columns: 5ch max-content;
+  column-gap: 12px;
+  align-items: center;
+  justify-content: start;
+}
+
+.chInput{
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+/* Hide number spinners to avoid cramped/clipped look at small widths */
+.chInput::-webkit-outer-spin-button,
+.chInput::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.chInput[type=number] {
+  -moz-appearance: textfield;
+}
+
+/* Keep classic/simple control feel but with consistent sizing */
+select, input, button{
+  font-size: 13px;
+}
+
+select, input{
+  padding: 4px 6px;
+}
+
+button{
+  padding: 3px 10px;
+}
+
+/* Tool button rows */
+.cellToolsLeft,
+.cellToolsRight{
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.valBadge{
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-weight: 600;
+  border: 1px solid rgba(0,0,0,0.15);
+}
+
+.valBadge[data-state="high"]{ background: rgba(46,125,50,0.12); color: #1b5e20; }
+.valBadge[data-state="low"] { background: rgba(229,57,53,0.12); color: #b71c1c; }
+
+.button-green {
   background-color: green;
   color: white;
 }
@@ -244,4 +400,25 @@
   background-color: red;
   color: white;
 }
+
+@media (max-width: 900px){
+  .pinsPanel{
+    min-width: 0;
+    max-width: 100%;
+  }
+  .pinHeader{
+    display: none;
+  }
+  .pinRow{
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "pin"
+      "role"
+      "right"
+      "toolsL"
+      "toolsR";
+  }
+  .cellPin{ margin-bottom: 2px; }
+}
 </style>
+
diff --git a/vue/import.vue b/vue/import.vue
index 0fcef7d9..ff14025b 100644
--- a/vue/import.vue
+++ b/vue/import.vue
@@ -1,209 +1,276 @@
-
 <template>
-  <div class="container">
-    Here you can import configuration from a template. Both OBK templates and Cloudcutter profiles are supported. Importing a profile may ovewrite your current pins/channels/startup command configuration, it will also clear LFS (autoexec.bat). 
-    <div class="container">
-      <div class="item"  style="width: 300px;">
-        <h3>1. Enter template or drag and drop Tuya firmware</h3>
-        <p>Here you can enter an  <a href="https://openbekeniot.github.io/webapp/devicesList.html">OBK template</a>/JSON text from Cloudcutter. <a href="https://github.com/tuya-cloudcutter/tuya-cloudcutter.github.io/tree/master/devices"> Here </a> is a list of cloudcutter devices. Just open one and copy-paste config below.</p>
-        <p><b>New:</b> You can also drag and drop a 2MB binary full device dump or just the Tuya config partition to automatically extract keys and JSON configuration.</p>
-        <textarea id="importTemplate" 
-        placeholder="Paste (or drag and drop) OBK template, Tuya JSON or cloudcutter json here" style="vertical-align: top; width: 280px; height:500px" @input="handleImportTemplateChange" v-model="importTemplateText"></textarea>
-       <br/>
-               <br>
-       Some examples for developer testing:        <br>
-         <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/lenovo-se-242dc-rgbct-bulb-v1.2.21.json')">RGBCW LED</button>
-         <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/nous-p4-e14-rgbct-bulb.json')">BP5758 LED</button>
-         <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/spectrum-woj14415-rgbct-gu10-bulb.json')">SM2135 LED</button>
-          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/pegant-pg3451-3-outlet-power-strip.json')">Triple socket + USB</button>
-          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/tuya-generic-rr620w-jl-smart-switch.json')">BL0942 plug</button>
-          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/43a341ef1dd8eec8514e1d435563bd9008ff2835/devices/hombli-hbss-0209-smart-socket-b2030248-energy-plug.json')">BL0937 plug</button>
-          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/athom-garage-door-opener.json')">Garage switch</button>
-          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/aldi-casalux-wifi-led-rgb-light-strip.json')">RGB LED</button>
-    
-      </div>
+  <div class="importPage">
+    <p class="importIntro">
+      You can import configuration from an OpenBeken template or a Cloudcutter profile. Applying the import overwrites your current
+      pin/channel assignments and startup command, and it clears LittleFS (including <code>autoexec.bat</code>).
+    </p>
 
-      <div class="item"  style="width: 300px;">
-        <h3>2. Check generated script (modify if you want)</h3>
-               <br>
-        <p id ="generateTextID" v-text="generateText"></p>
-        <textarea id="generatedScriptField" placeholder="Here script will appear" style="vertical-align: top; width: 280px; height:500px"  v-model="generatedScriptText"></textarea>
-       <br>
-      </div>
+    <div class="importLayout">
+      <div class="importTopGrid">
+        <!-- 1. INPUT -->
+        <section class="importCard importCard--top" aria-labelledby="importStep1Title">
+          <div class="importCardHeader">
+            <div class="importStepBadge" aria-hidden="true">1</div>
+            <h3 id="importStep1Title" class="importCardTitle">Input</h3>
+          </div>
+
+          <div class="importCardBody importCardBody--top">
+            <div class="importTopText">
+              <p class="importBodyText">
+                Paste an <a href="https://openbekeniot.github.io/webapp/devicesList.html">OpenBeken template</a> or Cloudcutter JSON.
+                Cloudcutter device profiles are <a href="https://github.com/tuya-cloudcutter/tuya-cloudcutter.github.io/tree/master/devices">here</a>. Drag &amp; drop also works.
+              </p>
+            </div>
+
+            <div class="importMainPane">
+              <textarea
+                id="importTemplate"
+                class="importTextarea importTextarea--mono"
+                placeholder="Paste an OpenBeken template or Cloudcutter JSON here, a Tuya config partition, or drop a 2MB .bin firmware dump onto this box."
+                @input="handleImportTemplateChange"
+                v-model="importTemplateText"
+              ></textarea>
+            </div>
+
+            <div class="importBottomPane">
+              <div class="importNote">
+                <b>New:</b> You can also drop a 2MB full device dump or Tuya config partition file to extract keys and JSON configuration automatically.
+              </div>
+
+              <details class="importExamplesBox">
+                <summary>Examples</summary>
+                <div class="importExamples">
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/lenovo-se-242dc-rgbct-bulb-v1.2.21.json')">RGBCW LED</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/nous-p4-e14-rgbct-bulb.json')">BP5758 LED</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/spectrum-woj14415-rgbct-gu10-bulb.json')">SM2135 LED</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/pegant-pg3451-3-outlet-power-strip.json')">Triple socket + USB</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/tuya-generic-rr620w-jl-smart-switch.json')">BL0942 plug</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/43a341ef1dd8eec8514e1d435563bd9008ff2835/devices/hombli-hbss-0209-smart-socket-b2030248-energy-plug.json')">BL0937 plug</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/athom-garage-door-opener.json')">Garage switch</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/aldi-casalux-wifi-led-rgb-light-strip.json')">RGB LED</button>
+                </div>
+              </details>
+            </div>
+          </div>
+        </section>
+
+        <!-- 2. REVIEW -->
+        <section class="importCard importCard--top" aria-labelledby="importStep2Title">
+          <div class="importCardHeader">
+            <div class="importStepBadge" aria-hidden="true">2</div>
+            <h3 id="importStep2Title" class="importCardTitle">Review</h3>
+          </div>
+
+          <div class="importCardBody importCardBody--top">
+            <div class="importTopText">
+              <p id="generateTextID" class="importBodyText">OpenBeken configuration script:</p>
+              <p id="generateStatusID" class="importStatusLine"></p>
+            </div>
+
+            <div class="importMainPane">
+              <textarea
+                id="generatedScriptField"
+                class="importTextarea importTextarea--mono"
+                placeholder="OpenBeken configuration script will appear here"
+                v-model="generatedScriptText"
+              ></textarea>
+            </div>
+
+            <div class="importBottomPane">
+              <div class="importHint">Tip: you can edit the generated script before applying it.</div>
+            </div>
+          </div>
+        </section>
 
-      <div class="item" style="width: 300px;">
-      <h3>3. Apply Script</h3>
-      <p>Once you are happy with the script, use button below to apply:</p>
-               <br>
-       <button @click="applyScript()">Clear OBK and apply new script from above</button>
-       <br>
-       <br>
-       Script execution log:
-        <p id ="progressTextID" v-text="progressText"> </p>
+        <!-- 3. APPLY -->
+        <section class="importCard importCard--top" aria-labelledby="importStep3Title">
+          <div class="importCardHeader">
+            <div class="importStepBadge" aria-hidden="true">3</div>
+            <h3 id="importStep3Title" class="importCardTitle">Apply</h3>
+          </div>
+
+          <div class="importCardBody importCardBody--top">
+            <div class="importTopText importTopText--apply">
+              <p class="importBodyText">When you are satisfied with the script, click Apply to update the device.</p>
+
+              <div class="importApplyActionRow">
+                <button class="importBtn importBtn--primary importBtn--slim" type="button" @click="applyScript()">
+                  Apply script (clears current configuration)
+                </button>
+              </div>
+            </div>
+
+            <div class="importMainPane importMainPane--apply">
+              <div class="importStatusBlock">
+                <div class="importPlaceholderLabel">Apply status</div>
+                <p id="progressTextID" class="importStatusLine importStatusLine--mono"></p>
+              </div>
+            </div>
+
+            <div class="importBottomPane"></div>
+          </div>
+        </section>
       </div>
-      
-      <div class="item" style="width: 300px;">
-        <h3> 4. If something fails, check the log</h3>
-         <br>
-         <div id="debugLog" style="width: 280px; height: 500px; border: 1px solid #999; overflow-y: scroll; padding: 5px; background: white; white-space: pre-wrap;" v-html="logHtml"></div>
-         <button @click="clearLog()">Clear Log</button>
-       </div>
+
+      <!-- PROCESSING LOG (FULL WIDTH) -->
+      <section class="importCard importCard--log" aria-labelledby="importLogTitle">
+        <div class="importCardHeader importCardHeader--log">
+          <h3 id="importLogTitle" class="importCardTitle">Processing log</h3>
+          <button class="importBtn importBtn--secondary importBtn--compact" type="button" @click="clearLog()">Clear log</button>
+        </div>
+
+        <div class="importCardBody importCardBody--log">
+          <p class="importBodyText importLogHelp">
+            Shows progress, successes, and errors while processing dropped files and extracting Tuya configuration data.
+          </p>
+
+          <div id="debugLog" class="importLogBox" v-html="logHtml"></div>
+        </div>
+      </section>
     </div>
   </div>
 </template>
 
-
-
 <script>
   module.exports = {
     components: {
       'import': window.getComponent('import')
     },
-    data: ()=>{
+    data: ()=> {
       return {
-        generateText:"",
+        generateText: "",
         importTemplateText: "",
         generatedScriptText: "",
         progressText: "",
-        generateTextElem:undefined,
-        progressTextElem:undefined,
+        generateTextElem: undefined,
+        generateStatusElem: undefined,
+        progressTextElem: undefined,
         logHtml: "",
       }
     },
-    methods:{
+    methods: {
       log(msg, type = 'info') {
           let color = 'black';
           if(type === 'error') color = 'red';
           if(type === 'warning') color = 'orange';
           if(type === 'success') color = 'green';
           if(type === 'info') color = 'blue';
-          
+
           const time = new Date().toLocaleTimeString();
           const html = `<div style="color:${color}">[${time}] ${msg}</div>`;
           this.logHtml += html;
-          
+
           this.$nextTick(() => {
              const elem = document.getElementById('debugLog');
              if(elem) elem.scrollTop = elem.scrollHeight;
           });
           console.log(`[${type}] ${msg}`);
       },
-      clearLog(){
+      clearLog() {
         this.logHtml = "";
       },
-      getinfo(){
-       
+      getinfo() {
 
       },
-      onSendFailed(response,line) {
-        //alert('Send failed!');
+      onSendFailed(response, line) {
         if(response.status == 501 || response.status == 400) {
-           this.progressTextElem.innerHTML += "<span style='color:red;'>FAILED! Invalid command \""+line+"\".</span>";
+           this.progressTextElem.innerHTML += "<span style='color:red;'>Failed: invalid command \"" + line + "\".</span>";
         } else {
-           this.progressTextElem.innerHTML += "<span style='color:red;'>FAILED! Please check network and retry.</span>";
+           this.progressTextElem.innerHTML += "<span style='color:red;'>Failed. Check your network connection and try again.</span>";
         }
       },
       async sendLines(lines) {
-        this.progressTextElem.innerHTML = "Send started...";
+        this.progressTextElem.innerHTML = "Sending...";
         let idx = 0;
-      for (let line of lines) {
-        let dbg = "";
-        if(false){
-          dbg = " ("+line+")";
-        }
-        this.progressTextElem.innerHTML += " send "+idx+"/"+lines.length+dbg+"...";
-        await this.sendLine(line,this.onSendFailed);
-        idx++;
-      }
-        this.progressTextElem.innerHTML += "<span style='color:green;'> Send done!</span>";
-        this.progressTextElem.innerHTML += "<span style='color:green;'> Please restart device if needed.</span>";
-    },
-    async sendLine(line, errorHandler) {
-      line = line.trim();
-        if(line.length < 2)
-          return;
-        if(line[0]=='/' && line[1] == '/')
-            return;
-      console.log("sending line: " + line);
-      let url = window.device+'/api/cmnd';
-      return new Promise((resolve, reject) => {
-        // Replace the URL and request options with your own
-        fetch(url, {
-          method: "POST",
-          body: line 
-        })
-        .then(response => {
-          if (!response.ok) {
-           errorHandler(response,line);
-            throw new Error("Failed to send line "+line + " with error " + response.status);
+        for (let line of lines) {
+          line = line.trim();
+          if(line.length < 1) { idx++; continue; }
+          if(line.length >= 2 && line[0] == '/' && line[1] == '/') { idx++; continue; }
+
+          let dbg = "";
+          if(false){
+            dbg = " (" + line + ")";
           }
-          resolve();
-        })
-        .catch(error => {
-          reject(error);
+          this.progressTextElem.innerHTML += " Sending " + idx + " of " + lines.length + dbg + "...";
+          await this.sendLine(line, this.onSendFailed);
+          idx++;
+        }
+        this.progressTextElem.innerHTML += "<span style='color:green;'> Completed.</span>";
+        this.progressTextElem.innerHTML += "<span style='color:green;'> Restart the device if required.</span>";
+      },
+      async sendLine(line, errorHandler) {
+        line = line.trim();
+        if(line.length < 1) return;
+
+        console.log("sending line: " + line);
+        let url = window.device + '/api/cmnd';
+        return new Promise((resolve, reject) => {
+          fetch(url, {
+            method: "POST",
+            body: line
+          })
+          .then(response => {
+            if (!response.ok) {
+              errorHandler(response, line);
+              throw new Error("Failed to send line " + line + " with error " + response.status);
+            }
+            resolve();
+          })
+          .catch(error => {
+            reject(error);
+          });
         });
-      });
-    },
+      },
       applyScript() {
-
         const lines = this.generatedScriptText.split("\n");
-
-       // lines.unshift("ClearIO");
-        for (let i = 0; i < lines.length; i++) {
-          const line = lines[i];
-         // alert("line " +line);
-        }
         this.sendLines(lines);
       },
-      setImportSrc(txt){
-        //alert(txt);
-        this.importTemplateText  = txt;
-       this.refreshTemplateImport();
+      setImportSrc(txt) {
+        this.importTemplateText = txt;
+        this.refreshTemplateImport();
       },
       loadDemo(url) {
-            fetch(url)
-                .then(response => response.text())
-                .then(res => {
-                  this.setImportSrc(res);
-                })
-                .catch(err => {
-                    this.error = err.toString();
-                    console.error(err)
-                }); // Never forget the final catch!
+        fetch(url)
+          .then(response => response.text())
+          .then(res => {
+            this.setImportSrc(res);
+          })
+          .catch(err => {
+            this.error = err.toString();
+            console.error(err)
+          });
       },
-    handleImportTemplateChange(event) {
-      console.log("Import template changed!");
-       this.clearLog();
-       this.refreshTemplateImport();
-    },
-    refreshTemplateImport() {
-       let res;
-       if(processJSON==undefined){
-           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed - processJSON missing.</span>";
+      handleImportTemplateChange(event) {
+        console.log("Import template changed!");
+        this.clearLog();
+        this.refreshTemplateImport();
+      },
+      refreshTemplateImport() {
+        let res;
+        if(processJSON == undefined){
+          if(this.generateStatusElem) this.generateStatusElem.innerHTML = "<span style='color:red;'>Template parser is not loaded yet.</span>";
           return;
-       }
-       let jsonText = this.importTemplateText;
-       jsonText = jsonText.trim();
-       if(jsonText.length < 1) {
-           this.generateTextElem.innerHTML = "<span style='color:yellow;'>No input text.</span>";
+        }
+        let jsonText = (this.importTemplateText || "").trim();
+        if(jsonText.length < 1) {
+          if(this.generateStatusElem) this.generateStatusElem.innerHTML = "<span style='color:orange;'>No input provided.</span>";
+          return;
+        }
+        try {
+          res = processJSON(jsonText);
+        } catch (error) {
+          if(this.generateStatusElem) this.generateStatusElem.innerHTML = "<span style='color:red;'>Failed: " + error + ".</span>";
           return;
-       }
-       try {
-           res = processJSON(jsonText);
-       } catch (error) {
-           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed - "+error+".</span>";
-           return;
-       }
+        }
         this.generatedScriptText  = "";
-         this.generatedScriptText  +=  "ClearIO // clear old GPIO/channels"+"\n";
-         this.generatedScriptText  +=  "lfs_format // clear LFS"+"\n";
-         this.generatedScriptText  +=  "StartupCommand \"\"  // clear STARTUP"+"\n";
-         this.generatedScriptText  +=  "stopDriver *  // kill drivers"+"\n";
-         this.generatedScriptText  += res.scr;
-           this.generateTextElem.innerHTML = "<span style='color:green;'>OK! Generated.</span>";
-        
-    },
-      
+        this.generatedScriptText += "ClearIO // clear old GPIO/channels\n";
+        this.generatedScriptText += "lfs_format // clear LittleFS\n";
+        this.generatedScriptText += "StartupCommand \"\"  // clear STARTUP\n";
+        this.generatedScriptText += "stopDriver *  // stop drivers\n";
+        this.generatedScriptText += res.scr;
+
+        if(this.generateStatusElem) this.generateStatusElem.innerHTML = "<span style='color:green;'>OK. Script generated.</span>";
+      },
       handleDragOver(event) {
         event.preventDefault();
       },
@@ -216,7 +283,7 @@
 
         if (files.length > 0) {
           const file = files[0];
-          
+
           if (file.name.toLowerCase().endsWith('.bin')) {
             this.log(`Processing dropped file: ${file.name}`, 'info');
             const reader = new FileReader();
@@ -228,16 +295,15 @@
                    this.log('TuyaExporter library not loaded correctly.', 'error');
                    return;
                 }
-                // Pass log callback logic
                 const result = window.TuyaExporter.extractConfig(uint8Array, this.log);
                 if (result) {
                   if (typeof result === 'object') {
                     this.importTemplateText = JSON.stringify(result, null, 2);
-                    this.refreshTemplateImport(); // trigger generation
+                    this.refreshTemplateImport();
                     this.log('Config extracted and loaded successfully.', 'success');
                   } else {
                     this.importTemplateText = result;
-                    this.refreshTemplateImport(); // trigger generation
+                    this.refreshTemplateImport();
                     this.log('Config extracted but parsing had issues. Raw/Repaired text loaded.', 'warning');
                   }
                 } else {
@@ -250,27 +316,32 @@
             };
             reader.readAsArrayBuffer(file);
           } else {
-             // Text/JSON file
             this.log(`Dropped file is not .bin, trying text read for ${file.name}`, 'info');
             const reader = new FileReader();
-
             reader.onload = (e) => {
               this.importTemplateText = e.target.result;
               this.refreshTemplateImport();
               this.log("Loaded text file content.", 'success');
             };
-
-            reader.readAsText(file); 
+            reader.readAsText(file);
           }
         }
       },
-
     },
-    mounted (){
-        this.msg = 'fred';
+    mounted () {
         this.progressTextElem = document.getElementById("progressTextID");
         this.generateTextElem = document.getElementById("generateTextID");
-        this.generateTextElem.innerHTML = "Waiting.";
+        this.generateStatusElem = document.getElementById("generateStatusID");
+
+        if(this.generateTextElem) {
+          this.generateTextElem.innerHTML = "OpenBeken configuration script:";
+        }
+        if(this.generateStatusElem) {
+          this.generateStatusElem.innerHTML = "<span style='color:#111;'>Waiting for input...</span>";
+        }
+        if(this.progressTextElem) {
+          this.progressTextElem.innerHTML = "";
+        }
 
         const cryptoScript = document.createElement("script");
         cryptoScript.setAttribute(
@@ -284,42 +355,389 @@
         plugin.setAttribute(
           "src",
           "https://openbekeniot.github.io/webapp/templateParser.js"
-         //"../templateParser.js"
         );
         plugin.async = true;
         document.head.appendChild(plugin);
-        
+
         const plugin2 = document.createElement("script");
         plugin2.setAttribute(
           "src",
-            "https://openbekeniot.github.io/webapp/tuyaExporter.js"
+          "https://openbekeniot.github.io/webapp/tuyaExporter.js"
         );
         plugin2.async = true;
         document.head.appendChild(plugin2);
-        
-      let importTemplateTextarea = document.getElementById("importTemplate");
-      importTemplateTextarea.addEventListener('dragover', this.handleDragOver);
-      importTemplateTextarea.addEventListener('drop', this.handleDrop);
+
+        let importTemplateTextarea = document.getElementById("importTemplate");
+        if(importTemplateTextarea){
+          importTemplateTextarea.addEventListener('dragover', this.handleDragOver);
+          importTemplateTextarea.addEventListener('drop', this.handleDrop);
+        }
     },
-    destroyed(){
+    destroyed() {
       clearInterval(this.interval);
     }
-
   }
 //@ sourceURL=/vue/import.vue
 </script>
 
 <style scoped>
-  .container {
-    display: flex;
-    justify-content: center;
+  /* Ensure padding/borders never cause right-edge clipping */
+  .importPage, .importPage * {
+    box-sizing: border-box;
   }
 
-  .item {
+  .importPage {
+    width: 100%;
+  }
+
+  .importIntro {
+    max-width: 1100px;
+    margin: 0 auto 18px auto;
     padding: 0 15px;
+    text-align: left;
+    line-height: 1.35em;
+  }
+
+  .importLayout {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    text-align: left;
+    line-height: 1.45em;
   }
-  .pin-index {
+
+  .importTopGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 16px;
+    align-items: stretch;
+  }
+
+  .importCard {
+    border: 1px solid rgba(17, 24, 39, 0.10);
+    border-radius: 14px;
+    background: #ffffff;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
+  }
+
+  .importCard--top {
+    height: 720px;
+  }
+
+  .importCard--log {
+    min-height: 220px;
+  }
+
+  .importCardHeader {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 14px 10px 14px;
+    background: transparent;
+  }
+
+  .importCardHeader--log {
+    padding-bottom: 8px;
+    justify-content: space-between;
+  }
+
+  .importStepBadge {
+    width: 28px;
+    height: 28px;
+    border-radius: 999px;
+    border: 1px solid rgba(17, 24, 39, 0.14);
+    display: grid;
+    place-items: center;
+    font-weight: 700;
+    font-size: 0.95em;
+    background: #ffffff;
+    flex: 0 0 auto;
+  }
+
+  .importCardTitle {
+    margin: 0;
+    font-size: 1.05em;
+    line-height: 1.2;
+  }
+
+  .importCardBody {
+    padding: 12px 14px 14px 14px;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .importCardBody--top {
+    /* Make the main panes run edge-to-edge inside the outer card.
+       Top/bottom copy gets its own padding so we don't create nested "cards". */
+    padding: 0;
+    display: grid;
+    grid-template-rows: 118px 1fr auto;
+    gap: 10px;
+    min-height: 0;
+  }
+
+  .importCardBody--log {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .importTopText {
+    min-height: 118px;
+    padding: 12px 14px 0 14px;
+  }
+
+  .importTopText--apply {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .importApplyActionRow {
+    display: flex;
+    align-items: center;
+  }
+
+  .importMainPane,
+  .importBottomPane {
+    min-height: 0;
+  }
+
+  /* Main content area inside each step card.
+     We keep a single "surface" per column (no nested bordered cards). */
+  .importMainPane {
+    /* This is the single main "surface" per column.
+       It should touch the outer card edges (no inset card look). */
+    background: #f9fafb;
+    border-radius: 0;
+    padding: 0;
+    overflow: hidden;
+    border-top: 1px solid rgba(17, 24, 39, 0.10);
+    border-bottom: 1px solid rgba(17, 24, 39, 0.10);
+  }
+
+  .importMainPane:focus-within {
+    box-shadow: inset 0 0 0 3px rgba(99, 102, 241, 0.12);
+  }
+
+  /* Apply status should remain a plain white box (no grey pane behind it). */
+  .importMainPane--apply {
+    background: transparent;
+    padding: 0;
+    border-radius: 0;
+    box-shadow: none;
+    border-top: 1px solid rgba(17, 24, 39, 0.10);
+    border-bottom: 1px solid rgba(17, 24, 39, 0.10);
+  }
+
+  .importBodyText {
+    margin: 0;
+    line-height: 1.45em;
+  }
+
+  .importNote {
+    font-weight: 600;
+    color: #1e40af;
+    background: #eff6ff;
+    border-radius: 12px;
+    padding: 8px 10px;
+    margin-bottom: 10px;
+  }
+
+  .importTextarea {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    resize: none;
+    /* Provide breathing room now that the pane is edge-to-edge */
+    padding: 12px 14px;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    outline: none;
+    line-height: 1.35em;
+    box-shadow: none;
+  }
+
+  .importTextarea:focus {
+    outline: none;
+  }
+
+  .importTextarea::placeholder {
+    color: #6b7280;
+  }
+
+  .importTextarea--mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 12.5px;
+  }
+
+  .importExamplesBox {
+    border: none;
+    padding: 0;
+    background: transparent;
+  }
+
+  .importExamplesBox summary {
+    cursor: pointer;
+    font-weight: 700;
+    margin: 0;
+    list-style: none;
+  }
+
+  .importExamplesBox summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .importExamplesBox summary::before {
+    content: "▶";
     display: inline-block;
-    width: 20px;
+    margin-right: 8px;
+    transform-origin: center;
+    font-size: 0.9em;
+  }
+
+  details[open].importExamplesBox summary::before {
+    content: "▼";
+  }
+
+  .importExamples {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+  }
+
+  .importChip {
+    border: 1px solid rgba(17, 24, 39, 0.12);
+    background: rgba(249, 250, 251, 0.9);
+    border-radius: 999px;
+    padding: 6px 10px;
+    cursor: pointer;
+    font-size: 0.95em;
+  }
+
+  .importChip:hover {
+    background: rgba(243, 244, 246, 0.95);
+  }
+
+  .importBtn {
+    border: 1px solid #111827;
+    background: #111827;
+    color: #ffffff;
+    border-radius: 12px;
+    padding: 10px 12px;
+    cursor: pointer;
+    font-weight: 650;
+    line-height: 1.15em;
+  }
+
+  .importBtn:hover {
+    filter: brightness(1.05);
+  }
+
+  .importBtn--primary {
+    width: 100%;
+  }
+
+  .importBtn--slim {
+    padding: 7px 10px;
+    border-radius: 10px;
+    font-weight: 650;
+    font-size: 0.98em;
+  }
+
+  .importBtn--secondary {
+    border-color: #d1d5db;
+    background: #ffffff;
+    color: #111827;
+    font-weight: 600;
+  }
+
+  .importBtn--secondary:hover {
+    background: #f9fafb;
+  }
+
+  .importBtn--compact {
+    padding: 7px 10px;
+    border-radius: 10px;
+    font-weight: 600;
+  }
+
+  .importPlaceholderLabel {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 12.5px;
+    color: #6b7280;
+    font-weight: 400;
+  }
+
+  .importStatusBlock {
+    height: 100%;
+    min-height: 0;
+    /* Keep it as a lined-off area without creating another nested card */
+    border: none;
+    border-radius: 0;
+    padding: 12px 14px;
+    background: transparent;
+    overflow: auto;
+  }
+
+  .importBottomPane {
+    padding: 10px 14px 14px 14px;
+  }
+
+  .importStatusLine {
+    margin: 4px 0 0 0;
+    line-height: 1.35em;
+    min-height: 1.35em;
+    word-break: break-word;
+  }
+
+  .importTopText .importStatusLine {
+    margin-top: 4px;
+  }
+
+  .importStatusLine--mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 12.5px;
+    color: #111827;
+  }
+
+  .importHint {
+    font-size: 0.95em;
+    color: #4b5563;
+  }
+
+  .importLogHelp {
+    margin: 0;
+  }
+
+  .importLogBox {
+    width: 100%;
+    height: 160px;
+    border: 1px solid rgba(17, 24, 39, 0.12);
+    border-radius: 12px;
+    overflow-y: auto;
+    padding: 10px;
+    background: #ffffff;
+    white-space: pre-wrap;
+  }
+
+  @media (max-width: 640px) {
+    .importIntro {
+      margin-bottom: 12px;
+    }
+    .importCard--top {
+      height: auto;
+    }
+    .importLogBox {
+      height: 220px;
+    }
   }
 </style>
diff --git a/vue/info.vue b/vue/info.vue
index d223f749..30e81865 100644
--- a/vue/info.vue
+++ b/vue/info.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="container">
-    <div class="item">
-      <h4 v-if="peers.length">SSDP Devices</h4>
+    <div class="item item--ssdp" v-if="peers.length">
+      <h4>SSDP Devices</h4>
       <p v-for="peer in peers" v-bind:key="peer.url"><a target="_blank" v-bind:href="peer.url">{{peer.name}}</a></p>
     </div>
-    <div class="item">
+    <div class="item item--current">
       <h4>Current Device</h4>
       <p>Uptime: {{ formattedUptime }}</p>
       <p>Release: {{build}}</p>
@@ -18,27 +18,29 @@
       <p>Flags: {{flags}}</p>
       <p>Version: {{currentversion}} <span v-html="lateststr"></span></p>
       <p v-if="error">Error: {{error}}</p>
-      <h4>Export Current Template</h4>
-      <p>Please complete all missing details before submitting a new template to <a href="https://www.elektroda.com/rtvforum/forum390.html" target="_blank" rel="noopener noreferrer">Elektroda</a>.</p>
-	  <textarea id="deviceTemplate"  placeholder="Template will appear here. If this box is empty, template generation may have failed." style="vertical-align: top; width: 300px; height:500px"></textarea>
-    <br>
-          <button @click="getTemplateAsFile">Download template</button>
-          <button @click="getTemplateAsClipboard">Copy to clipboard</button>
+      <h4 class="export-title">Export Current Template</h4>
+      <p class="templateNote">Please complete all missing details before submitting a new template to <a href="https://www.elektroda.com/rtvforum/forum390.html" target="_blank" rel="noopener noreferrer">Elektroda</a>.</p>
+	  <textarea id="deviceTemplate" class="templateBox" placeholder="Template will appear here. If this box is empty, template generation may have failed."></textarea>
+
+      <div class="button-row">
+        <button @click="getTemplateAsFile">Download template</button>
+        <button @click="getTemplateAsClipboard">Copy to clipboard</button>
+      </div>
 
     </div>
 
-    <div class="item" v-if="supportsClientDeviceDB" style="width: 300px;">
+    <div class="item item--templates" v-if="supportsClientDeviceDB">
       <h4>Device Templates</h4>
 	  <p>Here you can apply an existing template (configuration) to your device. The template list is loaded from <a href="https://openbekeniot.github.io/webapp/devicesList.html">here</a>. </p>
 	  <p>If you have questions, please ask on our forum <a href="https://www.elektroda.com/rtvforum/forum390.html">here</a>. </p>
       Chipset:
-      <select v-model="selectedChipset">
+      <select class="chipset-select" v-model="selectedChipset">
         <option v-for="chip in chipsets" :value="chip" :key="chip">{{chip}}</option>
       </select>
       {{ (filteredDevices || []).length - 1 }} devices
       <br/><br/>
 
-      <select v-model="selectedDevice" style="width: 250px;">
+      <select class="device-select" v-model="selectedDevice">
         <option v-for="dev in filteredDevices" :value="dev" :key="dev">{{ getDeviceDisplayName(dev) }}</option>
       </select>
 
@@ -51,10 +53,10 @@
       </div>
     </div>
 
-    <div class="item" style="width: 300px;">
+    <div class="item item--pins">
       <h4>Pin Settings</h4>
 	  <p>Configure your device pins here. Note that some pin roles require a second channel field, which is currently only available in the native UI. LED channel order is R, G, B, C, W (first channel is Red, second is Green, etc.).</p>
-      <div v-for="(role, index) in pins.roles" :key="index">
+      <div class="pin-row" v-for="(role, index) in pins.roles" :key="index">
         <span class="pin-index">{{index}}</span>
         <select v-model="pins.roles[index]">
           <option v-for="(name, index2) in pins.rolenames" :value="index2" :key="index2" :selected="(role == index2)">{{name}}</option>
@@ -63,19 +65,25 @@
       </div>
 
       <br/>
-      <label for="deviceFlag" style="width:75px; display: inline-block;">Flags:</label>&nbsp;<input id="deviceFlag" v-model="deviceFlag" /><br/>
-      <label for="deviceCommand" style="width:75px; display: inline-block;">Command:</label>&nbsp;<input id="deviceCommand" v-model="deviceCommand" placeholder="Startup command"/><br/>
+      <div class="kv-row">
+        <label for="deviceFlag">Flags:</label>
+        <input id="deviceFlag" v-model="deviceFlag" />
+      </div>
+      <div class="kv-row">
+        <label for="deviceCommand">Command:</label>
+        <input id="deviceCommand" v-model="deviceCommand" placeholder="Startup command"/>
+      </div>
 
-      <button @click="savePins">Save pin settings</button>
+      <button class="pins-save" @click="savePins">Save pin settings</button>
       <br/>
 	  You may need to reboot the device for changes to take effect.
     </div>
-    <div class="item" style="width: 300px;">
+    <div class="item item--channels">
       <h4>Channel Types</h4>
 	  <p>Channel types/roles are primarily used with TuyaMCU devices and are intended for advanced users. They are also useful for creating advanced scriptable devices and for testing.</p>
 	  <p>Setting a type for given channel may cause a special control to appear on the main web UI page. For example, a slider for dimmer channel or a radio selection box for a fan speed channel.</p>
 	  <p>Do not change these settings unless you understand the implications.</p>
-      <div v-for="(role, index) in channelTypes.types" :key="index">
+      <div class="channel-row" v-for="(role, index) in channelTypes.types" :key="index">
         <span class="channel-index">{{index}}</span>
         <select v-model="channelTypes.types[index]">
           <option v-for="(name, index2) in channelTypes.typenames" :value="index2" :key="index2" :selected="(role == index2)">{{name}}</option>
@@ -705,16 +713,142 @@
 </script>
 
 <style scoped>
+  /* Layout: responsive flex columns with weighted widths (no phantom SSDP column, no centering) */
   .container {
     display: flex;
-    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 18px;
+    padding: 10px 12px;
+  }
+
+  /* Make sizing predictable for inputs/selects inside the component */
+  .container, .container * {
+    box-sizing: border-box;
   }
 
   .item {
-    padding: 0 15px;
+    padding: 0;
+    min-width: 220px;
+  }
+
+  /* Weighted columns (not equal width)
+     Tuned so a typical 1366px-wide viewport still fits 4 columns in most cases. */
+  .item--ssdp      { flex: 0.7 1 220px; }
+  .item--current   { flex: 2.1 1 420px; min-width: 320px; }
+  .item--templates { flex: 1.0 1 270px; }
+  .item--pins      { flex: 0.9 1 250px; }
+  .item--channels  { flex: 0.8 1 240px; }
+
+  /* Typography / spacing */
+  h4 { margin: 0 0 8px; }
+  p  { margin: 0 0 6px; }
+  .item--current p { line-height: 1.35; }
+
+  /* Export template */
+  .export-title { margin-top: 14px; }
+  .templateBox {
+    width: 100%;
+    min-width: 0;
+    height: 460px;
+    max-height: 60vh;
+    resize: vertical;
+    vertical-align: top;
+  }
+
+  /* Keep the JSON box from becoming absurdly wide on large screens */
+  .item--current .templateBox,
+  .item--current .button-row,
+  .item--current .templateNote {
+    width: 75%;
+    max-width: 100%;
+  }
+
+
+  .button-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 6px;
+  }
+
+  .pins-save {
+    margin-top: 10px;
+    margin-bottom: 6px;
+  }
+
+  /* Device Templates selects */
+  .device-select {
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* Pin settings rows */
+  .pin-row {
+    display: grid;
+    grid-template-columns: 22px minmax(0, 1fr) 56px;
+    gap: 8px;
+    align-items: center;
+    margin: 2px 0;
   }
+
   .pin-index {
     display: inline-block;
-    width: 20px;
+    width: 22px;
+  }
+
+  .pin-row select,
+  .pin-row input {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .pin-row input[type="number"] {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  /* Flags/Command: aligned label + input */
+  .kv-row {
+    display: grid;
+    grid-template-columns: 80px minmax(0, 1fr);
+    gap: 8px;
+    align-items: center;
+    margin: 6px 0;
+  }
+  .kv-row label { margin: 0; }
+  .kv-row input {
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* Channel types rows */
+  .channel-row {
+    display: grid;
+    grid-template-columns: 22px minmax(0, 1fr);
+    gap: 8px;
+    align-items: center;
+    margin: 2px 0;
+  }
+
+  .channel-index {
+    display: inline-block;
+    width: 22px;
+  }
+
+  .channel-row select {
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* Small-screen: reduce gaps and textarea height */
+  @media (max-width: 700px) {
+    .container { gap: 14px; padding: 10px 10px; }
+    .templateBox { height: 340px; }
+    .item--current .templateBox,
+    .item--current .button-row,
+    .item--current .templateNote { width: 100%; }
+
   }
 </style>
diff --git a/vue/logs.vue b/vue/logs.vue
index e5aaa28e..3f74f932 100644
--- a/vue/logs.vue
+++ b/vue/logs.vue
@@ -9,14 +9,14 @@
                 </td>
                 <td>
                     <button class="logging" :class="{paused:paused}"  @click="paused = !paused">{{paused?"Resume":"Pause"}}</button>
-                    <button class="feature" style="width: 100px" @click="clear">Clear History</button>
-                    <button class="feature" style="width: 125px" @click="selectAllFeatures">Select All Features</button>
-                    <button class="feature" style="width: 125px" @click="clearAllFeatures">Clear All Features</button>
+                    <button class="feature" style="width: 100px" @click="clear">Clear log</button>
+                    <button class="feature" style="width: 125px" @click="selectAllFeatures">Select all features</button>
+                    <button class="feature" style="width: 125px" @click="clearAllFeatures">Clear all features</button>
                 </td>
             </tr>
             <tr>
                 <td style="width: 80px">
-                    <label>Log Features:</label>
+                    <label>Log features:</label>
                 </td>
                 <td id="logFeaturesParent">
                     <div class="feature" v-for="(item) in sortedLogFeatureNames" :key="item">
@@ -27,13 +27,13 @@
             </tr>
             <tr>
                 <td style="width: 80px">
-                    <label>Log Level:</label>
+                    <label>Log level:</label>
                 </td>
                 <td>
                     <select v-model="loglevel">
                         <option v-for="(item,index) of loglevelnames" :value="index" :key="index">{{item}}</option>
                     </select>
-                     NOTE: If you are getting 'command unknown', remember that some commands are only added when a driver is started, and some drivers requires device reboot to start.
+                     Note: If you see 'command unknown', remember that some commands are only available after a driver starts. Some drivers require a device reboot to start.
                 </td>
             </tr>
             <tr>
diff --git a/vue/myComponent.vue b/vue/myComponent.vue
index 921f6896..8a721e0f 100644
--- a/vue/myComponent.vue
+++ b/vue/myComponent.vue
@@ -32,10 +32,9 @@
 
     <div class="tabcontent" v-if="tab === 'About'">
       <h3>About</h3>
-      <p><a v-bind:href="nativeurl" target="_blank">Native UI on this device {{nativeurl}}</a></p>
-      <p>A simple web app to go with OpenBekenIOT equipped devices by <a href="https://github.com/btsimonh">btsimonh</a></p>
-      <p>This app is a pure javascript application written in VueJS as an SFC .vue component, and dynamically loaded from the device via a simple webpage.  The intent here is to be able to provide a rich UI and allow the device UI to remain simple (and small).</p>
-      <p>Currently, it supports displaying logging from the device</p>
+      <p><a v-bind:href="nativeurl" target="_blank">Open the native device UI ({{nativeurl}})</a></p>
+      <p>A simple companion web app for OpenBekenIOT-equipped devices by <a href="https://github.com/btsimonh">btsimonh</a>.</p>
+      <p>This is a lightweight JavaScript web app built with Vue.js as a single-file component (.vue) and loaded directly from the device. The intent is to provide a richer UI while keeping the device UI simple and small.</p>
     </div>
 
     <div class="tabcontent" v-if="tab === 'OTA'">
@@ -43,7 +42,7 @@
       <ota-controller></ota-controller>
     </div>
     <div class="tabcontent" v-if="tab === 'Tools'">
-      <h3>Tools (WORK IN PROGRESS, SOME BUTTONS MAY NOT BE READY)</h3>
+      <h3>Tools</h3>
       <tools-controller></tools-controller>
     </div>
     <div class="tabcontent" v-if="tab === 'Flash'">
@@ -60,8 +59,8 @@
     </div>
 
     <div class="tabcontent" v-if="tab === 'GPIODoctor'">
-      <h3>GPIO Doctor - easily find GPIO roles for your relays, PWMs, and buttons (Work In Progress)</h3>
-      <h6>Please also UPDATE OBK to latest version to get best experience, otherwise reading values won't work</h6>
+      <h3>GPIO Doctor - easily find GPIO roles for your relays, PWMs, and buttons</h3>
+      <p class="helperNote">For best results, update OpenBeken to the latest version. Otherwise, some values may not display correctly.</p>
       <gpio-controller></gpio-controller>
     </div>
     </div>
@@ -139,6 +138,12 @@
         color: v-bind('color');
     }
 
+    .helperNote {
+      margin: 6px 0 18px 0;
+      font-size: 0.8em;
+      color: #444;
+    }
+
     /* Style the tab */
     .tab {
       overflow: hidden;
diff --git a/vue/ota.vue b/vue/ota.vue
index e48fe5b1..20de92a0 100644
--- a/vue/ota.vue
+++ b/vue/ota.vue
@@ -2,7 +2,7 @@
     <div>
         <div>
             <p>Chipset: {{chipset}}</p>
-            <p>Build: {{build}}</p>
+            <p>Release: {{build}}</p>
         </div>
         <div>
             <span v-if="supportsLittleFS">
@@ -35,10 +35,9 @@
         </div>
         <br/>
         <div>
-            <label for="otaFilePicker">Select OTA file from disk:</label><input id="otaFilePicker" type="file" @change="fileSelected($event)" :accept="otaFileExtension">
+            <label for="otaFilePicker">Select OTA file from disk: </label><input id="otaFilePicker" type="file" @change="fileSelected($event)" :accept="otaFileExtension">
             <br/>
             <p>Or drop it here:</p>
-            <br/>
             <div class="drop" @drop="dropHandler($event)" @dragover="dragOverHandler($event)">
                 <div class="otatext center" v-html="otatext"></div>
             </div>
@@ -59,7 +58,7 @@
         backupdata: null,
         otadata:null,
         otatext:'Drop OTA file here',
-        status:'Nothing going on',
+        status:'Ready.',
         defaultaction: '',
         build:'unknown',
         chipset:'unknown',
@@ -665,7 +664,10 @@
 
 <style scoped>
     .drop {
-        border: 5px solid blue;
+        border: 4px solid #3b82f6;
+        background: #ffffff;
+        color: #1e40af;
+        margin-bottom: 20px;
         width:  200px;
         height: 100px;
         text-align: center;
diff --git a/vue/tools.vue b/vue/tools.vue
index 9526c192..a2e29917 100644
--- a/vue/tools.vue
+++ b/vue/tools.vue
@@ -1,38 +1,38 @@
 <template>
   <div class="container">
     <div class="item">
-      <h4>Command status</h4>
-      <p>Here you can check the last command send to OBK device by our Web App frontent for Tools. </p>
+      <h4>Command Status</h4>
+      <p>Last command shows the most recent command triggered from this page. Last status shows whether the request is still sending, completed successfully (OK 200), or failed (error response).</p>
       <h5>Last command: {{command_text}}</h5>
       <h5>Last status: {{command_status}}</h5>
 
       <h4>Generic Tools</h4>
-      <p>Those are all wrappers for console commands, but they are more friendly for beginners. Please read console <a href="https://github.com/openshwprojects/OpenBK7231T_App/blob/main/docs/commands.md">commands docs</a> if you want to know more. </p>
+      <p>These are wrappers around console commands, presented in a more beginner-friendly way. See the console <a href="https://github.com/openshwprojects/OpenBK7231T_App/blob/main/docs/commands.md">command documentation</a> for details.</p>
       
        <button @click="stopDrivers($event)">Stop all drivers</button><br>
-       <button @click="factorySettings($event)">Return device to factory settings (this will erase everything, even your Wifi config)</button>
-       <button @click="backToOpenAccessPoint($event)">Clear WiFi config and return to AP, but keep settings</button>
-       <button @click="temporaryAPMode($event)">Temporarily convert to AP mode (will go AP now, but back to client with reboot)</button>
+       <button @click="factorySettings($event)">Return device to factory settings (this will erase everything, including your WiFi configuration)</button>
+       <button @click="backToOpenAccessPoint($event)">Clear WiFi configuration and switch to AP mode (keep settings)</button>
+       <button @click="temporaryAPMode($event)">Temporarily switch to AP mode (switches now; returns to client mode after reboot)</button>
        <button @click="forceSafeMode($event)">Force reboot into safe mode</button>
-       <p>Driver testing shortcuts, please REMEMBER, they will not run after reboot, if you want driver to run after reboot, use a startup command/autoexec.bat</p>
+       <p>Driver testing shortcuts. Note: these do not persist across reboots. To start a driver on boot, use a startup command or autoexec.bat.</p>
        <button @click="startDriver('SSDP')">Start SSDP</button>
        <button @click="startDriver('DDP')">Start DDP</button>
        <button @click="startDriver('DGR')">Start DGR</button>
 
       <h4>Test/Play Tools</h4>
-      <p>Some things to play around/to learn events</p>
+      <p>Utilities for testing and learning event behavior.</p>
        <button @click="addRepeatingEvent(7298,'POWER TOGGLE', 2)">Start toggling power every 2 seconds</button><br>
        <button @click="cancelRepeatingEvent(7298)">Stop toggling power</button><br>
-       <button @click="addRepeatingEvent(9531,'add_dimmer 1 2', 0.01)">Start Dimmer ping-pong animation for LED</button><br>
-       <button @click="cancelRepeatingEvent(9531)">Stop Dimmer ping-pong animation for LED</button><br>
-       <button @click="addRepeatingEvent(8412,'add_temperature 1 2', 0.01)">Start Temperature ping-pong animation for LED</button><br>
-       <button @click="cancelRepeatingEvent(8412)">Stop Temperature ping-pong animation for LED</button><br>
+       <button @click="addRepeatingEvent(9531,'add_dimmer 1 2', 0.01)">Start dimmer ping-pong animation for LED</button><br>
+       <button @click="cancelRepeatingEvent(9531)">Stop dimmer ping-pong animation for LED</button><br>
+       <button @click="addRepeatingEvent(8412,'add_temperature 1 2', 0.01)">Start temperature ping-pong animation for LED</button><br>
+       <button @click="cancelRepeatingEvent(8412)">Stop temperature ping-pong animation for LED</button><br>
 
        
     </div>
     <div class="item">
-      <h4>LED tools</h4> 
-      <p>Here are some misc buttons for testing LEDs. </p>
+      <h4>LED Tools</h4>
+      <p>Miscellaneous buttons for testing LEDs.</p>
        <button @click="justSetRed($event)">100% Red</button>
        <button @click="justSetGreen($event)">100% Green</button>
        <button @click="justSetBlue($event)">100% Blue</button><br>
@@ -40,50 +40,50 @@
        <button @click="justSetCool($event)">100% Cool</button>
        <button @click="toggleLED($event)">Toggle LED</button><br>
 
-      <h4>LED driver tools</h4>      
-      <p>Those will show up when you enable a 'I2C' LED driver and set correct pin. You also might need to reboot. </p>
-      <p>Here you can easily change the order of LED colours. The order of colours in SM2135/etc drivers is not standarized, so if you have wrong colours, for example, cool warm is swapped with red, you might need to reorder them here. Enter numbers 0, 1, 2, 3 and 4, each one only once. </p>
+      <h4>LED Driver Tools</h4>
+      <p>These options appear when you enable an I2C LED driver and configure the correct pins. You may also need to reboot.</p>
+      <p>Use this to change the channel order for LED drivers (for example, SM2135). Some drivers are not standardized, so colors may be mapped incorrectly (for example, warm/cool swapped with red). Enter the channel indices 0-4, using each value once.</p>
       <label for="R" style="width:75px; display: inline-block;">Red:</label>&nbsp;<input id="R" v-model="R" placeholder="R"/>
       <label for="G" style="width:75px; display: inline-block;">Green:</label>&nbsp;<input id="G" v-model="G" placeholder="G"/>
       <label for="B" style="width:75px; display: inline-block;">Blue:</label>&nbsp;<input id="B" v-model="B" placeholder="B"/>
       <label for="C" style="width:75px; display: inline-block;">Cool:</label>&nbsp;<input id="C" v-model="C" placeholder="C"/>
       <label for="W" style="width:75px; display: inline-block;">Warm:</label>&nbsp;<input id="W" v-model="W" placeholder="W"/>
-       <button @click="applyMapAndSetRed($event)">Apply and turn light to Red</button><br>
-       <button @click="applyMapAndSetGreen($event)">Apply and turn light to Green</button><br>
-       <button @click="applyMapAndSetBlue($event)">Apply and turn light to Blue</button><br>
-       <button @click="applyMapAndSetWarm($event)">Apply and turn light to Warm</button><br>
-       <button @click="applyMapAndSetCool($event)">Apply and turn light to Cool</button><br><br>
-      <p>LED remap will be automatically saved in flash.</p>
+       <button @click="applyMapAndSetRed($event)">Apply mapping and set light to Red</button><br>
+       <button @click="applyMapAndSetGreen($event)">Apply mapping and set light to Green</button><br>
+       <button @click="applyMapAndSetBlue($event)">Apply mapping and set light to Blue</button><br>
+       <button @click="applyMapAndSetWarm($event)">Apply mapping and set light to Warm</button><br>
+       <button @click="applyMapAndSetCool($event)">Apply mapping and set light to Cool</button><br><br>
+      <p>The LED remap is saved to flash automatically.</p>
     </div>
     <div class="item">
       <h4>Power Metering</h4>
-      <p>Those are useful if you have a device running BL0937, BL0942, CSE or a similiar driver. </p>
-      <h5>Calibration utility</h5>
-      <p>Here you can calibrate your device. It's the same as using 'VoltageSet', etc commands, just with GUI. </p>
-      <p>Please connect 60W bulb (or another resistive load with power factor equal to 1), measure the real voltage with multimeter, enter in field and save: </p>
-      <label for="Voltage" style="width:75px; display: inline-block;">Voltage:</label>&nbsp;<input id="Voltage" v-model="Voltage" placeholder="Startup command"/>
-      <button @click="applyVoltage($event)">Apply!</button>
-      <p>Now do the same for current, enter measured current in A:</p>
-      <label for="Current" style="width:75px; display: inline-block;">Current:</label>&nbsp;<input id="Current" v-model="Current" placeholder="Startup command"/>
-      <button @click="applyCurrent($event)">Apply!</button>
-      <p>Now do the same for power, enter measured power in W:</p>
-      <label for="Power" style="width:75px; display: inline-block;">Power:</label>&nbsp;<input id="Power" v-model="Power" placeholder="Startup command"/>
-      <button @click="applyPower($event)">Apply!</button>
-      <p>Calibration will be automatically saved in flash.</p>
+      <p>These are useful if your device uses BL0937, BL0942, CSE, or a similar driver.</p>
+      <h5>Calibration Utility</h5>
+      <p>Here you can calibrate your device. It is equivalent to using the VoltageSet/CurrentSet/PowerSet commands, but with a GUI.</p>
+      <p>Connect a 60W bulb (or another resistive load with a power factor of 1), measure the mains voltage with a multimeter, enter it in the field below, and save:</p>
+      <label for="Voltage" style="width:75px; display: inline-block;">Voltage:</label>&nbsp;<input id="Voltage" v-model="Voltage" placeholder="Measured voltage (V)"/>
+      <button @click="applyVoltage($event)">Apply</button>
+      <p>Repeat for current: enter the measured current (A):</p>
+      <label for="Current" style="width:75px; display: inline-block;">Current:</label>&nbsp;<input id="Current" v-model="Current" placeholder="Measured current (A)"/>
+      <button @click="applyCurrent($event)">Apply</button>
+      <p>Repeat for power: enter the measured power (W):</p>
+      <label for="Power" style="width:75px; display: inline-block;">Power:</label>&nbsp;<input id="Power" v-model="Power" placeholder="Measured power (W)"/>
+      <button @click="applyPower($event)">Apply</button>
+      <p>Calibration is saved to flash automatically.</p>
       
-      <h5>Extra utilities for power metering.</h5>
-      <p>BL0937/42/ETC devices can measure current, power and voltage. They can also count and save energy consumption, but it requires a little setup. Don't forget to enable NTP in short startup command/autoexec! </p>
+      <h5>Extra Utilities for Power Metering</h5>
+      <p>BL0937/BL0942/etc. devices can measure current, power, and voltage. They can also track and persist energy consumption, but this requires some setup. Do not forget to enable NTP in the short startup command or autoexec.bat.</p>
       <button @click="resetEnergyCounters($event)">Reset the 'total' energy counter</button><br>
       <button @click="setupEnergyCounters($event)">Enable and setup some basic energy counting</button><br>
       <button @click="stopEnergyCounters($event)">Disable basic energy counting</button><br>
 
     </div>
     <div class="item">
-      <h4>Tasmota Device Groups</h4> 
-      <p>Here you can play around Tasmota Device Groups, test sending of packets, etc. </p>
-      <h5>External DGR control</h5>
-      <p>Here you can control any outside Tasmota DGR group, even if your device is not in DGR. Of course, DGR driver must be run first.</p>
-      <label for="ExternalGroupName" style="width:75px; display: inline-block;">Target:</label>&nbsp;<input id="ExternalGroupName" v-model="ExternalGroupName" placeholder="ExternalGroupName"/>
+      <h4>Tasmota Device Groups</h4>
+      <p>Here you can experiment with Tasmota Device Groups (DGR) and test packet sending.</p>
+      <h5>External DGR Control</h5>
+      <p>Here you can control any external Tasmota DGR group, even if your device is not part of a DGR. The DGR driver must be running first.</p>
+      <label for="ExternalGroupName" style="width:75px; display: inline-block;">Target:</label>&nbsp;<input id="ExternalGroupName" v-model="ExternalGroupName" placeholder="Group name"/>
       <br><button @click="sendDGRPower(1,1)">Send power ON</button>
       <button @click="sendDGRPower(0,1)">Send power OFF</button>
       <button @click="sendDGRBrightness(25)">Send brightness 10%</button>
@@ -213,7 +213,7 @@
               this.runCommand("stopDriver *");
         },
         factorySettings(ev){			
-              let rep = prompt("Are you sure? This will ERASE ALL YOUR SETTINGS. Enter yes.", "no");
+              let rep = prompt("Are you sure? This will erase all settings. Type yes to confirm.", "no");
 			  if (rep != null) {
                 if(rep == "yes")
                 {
@@ -222,7 +222,7 @@
 			  }
         },
         backToOpenAccessPoint(ev){			
-              let rep = prompt("Are you sure? This will return device to AP, andd everyone will be able to connect to it. Enter yes.", "no");
+              let rep = prompt("Are you sure? This will clear the WiFi credentials and restart the device in AP mode. Anyone nearby will be able to connect. Type yes to confirm.", "no");
 			  if (rep != null) {
                 if(rep == "yes")
                 {