diff --git a/app/api/myInsertMeta.json b/app/api/myInsertMeta.json
index a4771ca..318bb18 100644
--- a/app/api/myInsertMeta.json
+++ b/app/api/myInsertMeta.json
@@ -25,13 +25,15 @@
               "table": "da_meta",
               "column": "da_id",
               "type": "number",
-              "value": "{{$_GET.da_id}}"
+              "value": "{{$_GET.da_id}}",
+              "recid": 1
             },
             {
               "table": "da_meta",
               "column": "obj_dataStore",
               "type": "text",
-              "value": "{{$_GET.obj_datastore}}"
+              "value": "{{$_GET.obj_datastore}}",
+              "recid": 2
             }
           ],
           "table": "da_meta",
diff --git a/views/index0.ejs b/views/index0.ejs
index 961132b..89aac8d 100644
--- a/views/index0.ejs
+++ b/views/index0.ejs
@@ -418,7 +418,7 @@
                     </form>
                     -->
                 </div>
-                <form id="myDBSeverForm1" is="dmx-serverconnect-form" method="post" action="/api/myInsert" dmx-on:success="browser1.goto('/success',true,'Success')" dmx-on:error="">
+                <form id="myDBSeverForm1" is="dmx-serverconnect-form" method="post" action="/api/myInsert" dmx-on:success="browser1.goto('/success',true,'Success')" dmx-on:error="browser1.goto('/unsuccessful',true,'Something wrong happen')">
                     <div class="form-group mb-3 row">
                         <label for="inp_ertDriveDate" class="col-sm-2 col-form-label">Date</label>
                         <div class="col-sm-3">
diff --git a/views/observationPage.ejs b/views/observationPage.ejs
index 8dbefc4..a9a3d35 100644
--- a/views/observationPage.ejs
+++ b/views/observationPage.ejs
@@ -137,8 +137,8 @@
                 <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">Options</a>
                     <div class="dropdown-menu" aria-labelledby="dropdown1">
                         <a class="dropdown-item" href="/index0" internal="true">Home</a>
-                        <a class="dropdown-item" href="#">Another action</a>
-                        <a class="dropdown-item" href="#">Something else here</a>
+                        <a class="dropdown-item" href="#" onclick="toggleVisibility()">Debug JS Toggle</a>
+                        <a class="dropdown-item" href="#" dmx-on:click="toggle1.toggle()">Debug Toggle</a>
                     </div>
                 </div>
             </div>
@@ -207,6 +207,10 @@
                 <input class="form-check-input" type="checkbox" value="" id="CKBinput3" name="canvasCBShowHideSectionDetail">
                 <label class="form-check-label" for="CKBinput3">Show Section detail</label>
             </div>
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" value="" id="showDebugViews" name="debugGlobalToggle">
+                <label class="form-check-label" for="showDebugViews">Show All Debug</label>
+            </div>
         </div>
         <p>
 
@@ -229,8 +233,6 @@
 
             <select id="select1" class="form-select" optiontext="db_fullName" optionvalue="id" dmx-bind:disabled="datastore1.data.hasItems()" dmx-bind:options="MyserverconnectQuery.data.Myquery" dmx-on:changed="toasts1.showSimple({message: selectedIndex, delay: 2000})">
             </select>
-            <select id="select2" class="form-select" dmx-bind:options="dspListJson.data.DSPCompanies" optiontext="dspName.titlecase()" optionvalue="dspShortCode" dmx-bind:value="selectedValue" name="getDSPShortCode">
-            </select>
 
 
         </div>
@@ -270,7 +272,7 @@
         </div>
     </div>
     <div class="row">
-        <textarea id="text2" class="form-control" dmx-bind:value="datastore1.data.toJSON()"></textarea>
+        <textarea id="text2" data-vis="true" class="form-control" dmx-bind:value="datastore1.data.toJSON()" dmx-show="offcanvas1.showDebugViews.checked"></textarea>
     </div>
 </div>
 
@@ -305,6 +307,8 @@
 <div class="container">
     <div class="row">
         <div class="col">
+
+
         </div>
     </div>
 </div>
@@ -406,6 +410,23 @@
 <script src="/js/libProcessScript.js"></script>
 
 
+<script>
+    function toggleVisibility() {
+    const items = document.querySelectorAll('[data-vis]');
+    
+    items.forEach(item => {
+      const isVisible = item.getAttribute('data-vis') === 'true';
+      
+      if (isVisible) {
+        item.style.display = 'none';
+        item.setAttribute('data-vis', 'false');
+      } else {
+        item.style.display = 'block';
+        item.setAttribute('data-vis', 'true');
+      }
+    });
+  }
+</script>