diff --git a/css/style.css b/css/style.css
index 1c82f68f..7dbb9bf4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -495,6 +495,11 @@ table.dataTable tbody tr {
     filter: var(--background-invert-if-dark);
 }
 
+.icon-analytics-tableOptions {
+    background-image: url(../img/tableOptions.svg);
+    filter: var(--background-invert-if-dark);
+}
+
 .filterVisualizationItem {
     background-color: var(--color-background-dark);
     padding: 5px;
@@ -709,7 +714,8 @@ table.dataTable tbody tr {
     grid-template-areas:
       "dummy columns"
       "rows measures"
-      "dummy2 totals";
+      "dummy2 totals"
+      "hidden hidden";
     grid-template-columns: 1fr 2fr;
     grid-template-rows: auto; /* Define the height for rows and measures */
     gap: 10px;
diff --git a/img/tableOptions.svg b/img/tableOptions.svg
new file mode 100644
index 00000000..34081cc0
--- /dev/null
+++ b/img/tableOptions.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 18.5H5.5C4.39543 18.5 3.5 17.6046 3.5 16.5V8.5M3.5 8.5V6.5C3.5 5.39543 4.39543 4.5 5.5 4.5H18.5C19.6046 4.5 20.5 5.39543 20.5 6.5V8.35C20.5 8.43284 20.4328 8.5 20.35 8.5H3.5Z" stroke="#222222" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.5 13.5H9.5" stroke="#222222" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.649 16.1667C13.4121 15.7409 13.2937 15.528 13.2473 15.3025C13.2062 15.1029 13.2062 14.8971 13.2473 14.6975C13.2937 14.472 13.4121 14.2591 13.649 13.8333L13.9724 13.252L14.3141 12.6813C14.5644 12.2633 14.6896 12.0543 14.8617 11.9013C15.014 11.7659 15.1922 11.663 15.3856 11.5988C15.6041 11.5263 15.8477 11.5224 16.3349 11.5146L17 11.504L17.6651 11.5146C18.1523 11.5224 18.3959 11.5263 18.6144 11.5988C18.8078 11.663 18.986 11.7659 19.1383 11.9013C19.3104 12.0543 19.4356 12.2633 19.6859 12.6813L20.0276 13.252L20.351 13.8333C20.5879 14.2591 20.7063 14.472 20.7527 14.6975C20.7938 14.8971 20.7938 15.1029 20.7527 15.3025C20.7063 15.528 20.5879 15.7409 20.351 16.1667L20.0276 16.748L19.6859 17.3187C19.4356 17.7367 19.3104 17.9457 19.1383 18.0987C18.986 18.2341 18.8078 18.337 18.6144 18.4012C18.3959 18.4737 18.1523 18.4776 17.6651 18.4854L17 18.496L16.3349 18.4854C15.8477 18.4776 15.6041 18.4737 15.3856 18.4012C15.1922 18.337 15.014 18.2341 14.8617 18.0987C14.6896 17.9457 14.5644 17.7367 14.3141 17.3187L13.9724 16.748L13.649 16.1667Z" stroke="#222222" stroke-linejoin="round"/>
+<circle cx="17" cy="15" r="1" fill="#222222"/>
+</svg>
\ No newline at end of file
diff --git a/js/filter.js b/js/filter.js
index 497fcc56..b7289b88 100644
--- a/js/filter.js
+++ b/js/filter.js
@@ -293,54 +293,25 @@ OCA.Analytics.Filter = {
             OCA.Analytics.Filter.processTableOptionsDialog
         );
 
-/*        // Total row setting
-        (tableOptions.footer ? option1 : option2).selected = true;
-*/
-
-        let layoutRaw = '<div class="tableOptionsLayout">\n' +
-            '<div class="dummy"></div>' +
-            '<div class="dummy2"></div>' +
-            '<div id="tableOptionsLayoutRows">\n' +
-            '    <p>Rows</p>\n' +
-            '    <div id="rows" class="columnSection"></div>\n' +
-            '  </div>\n' +
-            '  <div id="tableOptionsLayoutColumns">\n' +
-            '    <p>Columns</p>\n' +
-            '    <div id="columns" class="columnSection"></div>\n' +
-            '  </div>\n' +
-            '  <div id="tableOptionsLayoutMeasures">\n' +
-            '    <p>Measures</p>\n' +
-            '    <div id="measures" class="columnSection"></div>\n' +
-            '  </div>\n' +
-            '  <div id="tableOptionsLayoutTotals">\n' +
-            '    <p>Show column totals</p>\n' +
-            '    <div id="totalsSwitch">' +
-            '        <label class="toggle-option">\n' +
-            '            <input type="radio" name="totalOption" value="true" checked> Yes\n' +
-            '        </label>\n' +
-            '        <label class="toggle-option">\n' +
-            '            <input type="radio" name="totalOption" value="false"> No\n' +
-            '        </label></div>\n' +
-            '  </div>\n' +
-            '</div>';
-
-        let parser = new DOMParser();
-        let layout = parser.parseFromString(layoutRaw, 'text/html');
-        let container = layout.querySelector('.tableOptionsLayout');
-
-        // add the final content to the modal
-        let content = document.createDocumentFragment();
-        content.appendChild(container.cloneNode(true)); // Clone the container with event listeners
+        // clone the DOM template
+        let container = document.getElementById('templateTableOptions').content;
+        container = document.importNode(container, true);
 
         // Attach event listeners programmatically
-        content.querySelectorAll('.columnSection').forEach(section => {
+        container.querySelectorAll('.columnSection').forEach(section => {
             section.addEventListener('drop', OCA.Analytics.Filter.Drag.drop);
             section.addEventListener('dragover', OCA.Analytics.Filter.Drag.allowDrop);
         });
 
+        if (tableOptions && tableOptions.footer) {
+            container.querySelector('input[name="totalOption"][value="true"]').checked = true;
+        } else {
+            container.querySelector('input[name="totalOption"][value="false"]').checked = true;
+        }
+
         OCA.Analytics.Notification.htmlDialogUpdate(
-            content,
-            t('analytics', 'The table can be customized by selecting the rows and columns. <br>If a classic list view is required, all fields need to be placed in the rows section.')
+            container,
+            t('analytics', 'The table can be customized by positioning the rows and columns. <br>If a classic list view is required, all fields need to be placed in the rows section.')
         );
 
         OCA.Analytics.Filter.Drag.initialize();
@@ -350,27 +321,23 @@ OCA.Analytics.Filter = {
         let tableOptions;
         try {
             tableOptions = JSON.parse(OCA.Analytics.currentReportData.options.tableoptions);
+            if (tableOptions === null) {
+                tableOptions = {};
+            }
         } catch (e) {
-            tableOptions = [];
+            tableOptions = {};
         }
 
-        let tableOptionTotalRow;
-        let radios = document.getElementsByName('totalOption');
-        for (let i = 0; i < radios.length; i++) {
-            if (radios[i].checked) {
-                tableOptionTotalRow = radios[i].value;
-            }
-        }
+        const selectedRadio = document.querySelector('input[name="totalOption"]:checked');
+        const tableOptionTotalRow = selectedRadio ? selectedRadio.value : null;
 
-        //let tableOptionTotalRow = document.getElementById('tableOptionTotalRow').value;
         if (tableOptionTotalRow === 'true') {
             tableOptions.footer = true;
-        } else {
+        } else if (tableOptions) {
             delete tableOptions.footer;
         }
 
         let layout = {};
-
         document.querySelectorAll('.columnSection').forEach(function (section) {
             var sectionId = section.id;
             // Initialize the layout[sectionId] as an empty array if undefined
@@ -384,7 +351,16 @@ OCA.Analytics.Filter = {
             }
         });
 
-        tableOptions.layout = layout;
+        const isSequential = (arr) => arr.every((val, i, array) => i === 0 || (val === array[i - 1] + 1));
+        if (layout.columns.length === 0 && layout.measures.length === 0 && layout.hidden.length === 0) {
+            if (!isSequential(layout.rows)) {
+                tableOptions.layout = layout;
+            } else if (tableOptions && tableOptions.layout) {
+                delete tableOptions.layout;
+            }
+        } else {
+            tableOptions.layout = layout;
+        }
 
         OCA.Analytics.currentReportData.options.tableoptions = JSON.stringify(tableOptions);
         OCA.Analytics.unsavedFilters = true;
@@ -735,7 +711,7 @@ OCA.Analytics.Filter.Drag = {
         const createPlaceholder = () => {
             let placeholderDiv = document.createElement('div');
             placeholderDiv.className = 'dragAndDropPlaceholder';
-            placeholderDiv.textContent = 'Please drag content here';
+            placeholderDiv.textContent = t('analytics', 'Drag fields here');
             return placeholderDiv;
         };
 
diff --git a/templates/part.menu.php b/templates/part.menu.php
index d0ac8fbd..bbe6bceb 100644
--- a/templates/part.menu.php
+++ b/templates/part.menu.php
@@ -28,7 +28,7 @@
             </li>
             <li>
                 <button id="reportMenuTableOptions">
-                    <span class="icon-analytics-chart-options"></span>
+                    <span class="icon-analytics-tableOptions"></span>
                     <span><?php p($l->t('Table options')); ?></span>
                 </button>
             </li>
diff --git a/templates/part.templates.php b/templates/part.templates.php
index c155009f..85c84ea7 100644
--- a/templates/part.templates.php
+++ b/templates/part.templates.php
@@ -106,11 +106,13 @@ class="sidebarPointer"><?php p($l->t('Visualization')); ?></h3>
                         p($l->t('Bar')); ?></option>
                     <option value="columnSt">&nbsp;<?php // TRANSLATORS Short description for a 'Stacked bar Chart'
                         p($l->t('Bar - Stacked')); ?></option>
-                    <option value="columnSt100">&nbsp;<?php // TRANSLATORS Short description for a 'Stacked bar Chart with 100% relations'
+                    <option value="columnSt100">
+                        &nbsp;<?php // TRANSLATORS Short description for a 'Stacked bar Chart with 100% relations'
                         p($l->t('Bar - Stacked 100%%')); ?></option>
-                    <option value="area"><?php  // TRANSLATORS Short description for an 'Area Chart'
+                    <option value="area"><?php // TRANSLATORS Short description for an 'Area Chart'
                         p($l->t('Area')); ?></option>
-                    <option value="areaSt100">&nbsp;<?php // TRANSLATORS Short description for an 'Area Chart with 100% relations'
+                    <option value="areaSt100">
+                        &nbsp;<?php // TRANSLATORS Short description for an 'Area Chart with 100% relations'
                         p($l->t('Area - 100%%')); ?></option>
                     <option value="doughnut"><?php // TRANSLATORS Short description for a 'Doughnut Chart'
                         p($l->t('Doughnut')); ?></option>
@@ -215,7 +217,8 @@ class="sidebarPointer"><?php p($l->t('Manual entry')); ?></h3></div>
             <div style="display: table-row;">
                 <div id="DataTextDimension1"
                      style="display: table-cell; width: 100%;"><?php p($l->t('Object')); ?></div>
-                <input style="display: table-cell;" class="sidebarInput" id="DataDimension1" autocomplete="off" data-dropDownListIndex="0">
+                <input style="display: table-cell;" class="sidebarInput" id="DataDimension1" autocomplete="off"
+                       data-dropDownListIndex="0">
                 <div style="display: table-cell;">
                     <a id="sidebarDataDimension1Hint" title="<?php p($l->t('Variables')); ?>">
                         <div class="icon-info" style="opacity: 0.5;padding: 0 10px;"></div>
@@ -223,7 +226,8 @@ class="sidebarPointer"><?php p($l->t('Manual entry')); ?></h3></div>
             </div>
             <div style="display: table-row;">
                 <div id="DataTextDimension2" style="display: table-cell; width: 120px;"><?php p($l->t('Date')); ?></div>
-                <input style="display: table-cell;" class="sidebarInput" id="DataDimension2" autocomplete="off" data-dropDownListIndex="1">
+                <input style="display: table-cell;" class="sidebarInput" id="DataDimension2" autocomplete="off"
+                       data-dropDownListIndex="1">
                 <div style="display: table-cell;">
                     <a id="sidebarDataDimension2Hint" title="<?php p($l->t('Variables')); ?>">
                         <div class="icon-info" style="opacity: 0.5;padding: 0 10px;"></div>
@@ -293,7 +297,8 @@ class="sidebarPointer"><?php p($l->t('Data load')); ?></h3></div>
                  style="display: table-cell; width: 100%;"><?php p($l->t('Object')); ?></div>
             <div style="display: table-cell;">
                 <input id="sidebarThresholdDimension1" class="sidebarInput"
-                       placeholder="<?php p($l->t('single value or *')); ?>" autocomplete="off" data-dropDownListIndex="0"></div>
+                       placeholder="<?php p($l->t('single value or *')); ?>" autocomplete="off"
+                       data-dropDownListIndex="0"></div>
             <div style="display: table-cell;">
                 <a id="sidebarThresholdHint" title="<?php p($l->t('Variables')); ?>">
                     <div class="icon-info" style="opacity: 0.5;padding: 0 10px;"></div>
@@ -418,9 +423,12 @@ class="sidebarPointer"><?php p($l->t('Data load')); ?></h3></div>
                     </div>
                 </div>
                 <div id="dataloadDetailButtons" hidden>
-                    <button id="dataloadDeleteButton" style="padding: 15px;" title="<?php p($l->t('Delete')); ?>" class="icon-delete"></button>
-                    <button id="dataloadCopyButton" style="padding: 15px;" title="<?php p($l->t('Copy')); ?>" class="icon-analytics-copy"></button>
-                    <button id="dataloadUpdateButton" style="padding: 15px;" title="<?php p($l->t('Update')); ?>" class="icon-checkmark"></button>
+                    <button id="dataloadDeleteButton" style="padding: 15px;" title="<?php p($l->t('Delete')); ?>"
+                            class="icon-delete"></button>
+                    <button id="dataloadCopyButton" style="padding: 15px;" title="<?php p($l->t('Copy')); ?>"
+                            class="icon-analytics-copy"></button>
+                    <button id="dataloadUpdateButton" style="padding: 15px;" title="<?php p($l->t('Update')); ?>"
+                            class="icon-checkmark"></button>
                 </div>
             </div>
         </div>
@@ -601,4 +609,37 @@ class="icon-confirm share-pass-submit"
             </div>
         </span>
     </li>
+</template>
+
+<template id="templateTableOptions">
+    <div class="tableOptionsLayout">
+        <div class="dummy"></div>
+        <div class="dummy2"></div>
+        <div id="tableOptionsLayoutRows">
+            <p><?php p($l->t('Rows')); ?></p>
+            <div id="rows" class="columnSection"></div>
+        </div>
+        <div id="tableOptionsLayoutColumns">
+            <p><?php p($l->t('Columns')); ?></p>
+            <div id="columns" class="columnSection"></div>
+        </div>
+        <div id="tableOptionsLayoutMeasures">
+            <p><?php p($l->t('Measures')); ?></p>
+            <div id="measures" class="columnSection"></div>
+        </div>
+        <div id="tableOptionsLayoutTotals">
+            <p><?php p($l->t('Show totals')); ?></p>
+            <div id="totalsSwitch">
+                <label class="toggle-option">
+                    <input type="radio" name="totalOption" value="true" checked><?php p($l->t('Yes')); ?>
+                </label>
+                <label class="toggle-option">
+                    <input type="radio" name="totalOption" value="false"><?php p($l->t('No')); ?>
+                </label></div>
+        </div>
+        <div id="tableOptionsLayoutAvailable">
+            <p><?php p($l->t('Not required')); ?></p>
+            <div id="hidden" class="columnSection"></div>
+        </div>
+    </div>
 </template>
\ No newline at end of file