diff --git a/tests/ui-testing/playwright-tests/dashboards/custom-charts.spec.js b/tests/ui-testing/playwright-tests/dashboards/custom-charts.spec.js
index e8954a7f68..e3acbcd068 100644
--- a/tests/ui-testing/playwright-tests/dashboards/custom-charts.spec.js
+++ b/tests/ui-testing/playwright-tests/dashboards/custom-charts.spec.js
@@ -2,11 +2,10 @@ import { test, expect } from "../baseFixtures";
 import path from "path";
 import fs from "fs";
 import logsdata from "../../../test-data/logs_data.json";
-import { DashboardPage } from '../../pages/dashboardPage';
+import { DashboardPage } from "../../pages/dashboardPage";
 
 // Function to handle login
 async function login(page) {
-
   await page.goto(process.env["ZO_BASE_URL"]);
   if (await page.getByText("Login as internal user").isVisible()) {
     await page.getByText("Login as internal user").click();
@@ -14,8 +13,12 @@ async function login(page) {
   console.log("ZO_BASE_URL", process.env["ZO_BASE_URL"]);
   await page.waitForTimeout(1000);
 
-  await page.locator('[data-cy="login-user-id"]').fill(process.env["ZO_ROOT_USER_EMAIL"]);
-  await page.locator('[data-cy="login-password"]').fill(process.env["ZO_ROOT_USER_PASSWORD"]);
+  await page
+    .locator('[data-cy="login-user-id"]')
+    .fill(process.env["ZO_ROOT_USER_EMAIL"]);
+  await page
+    .locator('[data-cy="login-password"]')
+    .fill(process.env["ZO_ROOT_USER_PASSWORD"]);
   await page.locator('[data-cy="login-sign-in"]').click();
   await page.waitForTimeout(4000);
   await page.goto(process.env["ZO_BASE_URL"]);
@@ -29,23 +32,29 @@ async function ingestion(page) {
   ).toString("base64");
 
   const headers = {
-    "Authorization": `Basic ${basicAuthCredentials}`,
+    Authorization: `Basic ${basicAuthCredentials}`,
     "Content-Type": "application/json",
   };
-  const response = await page.evaluate(async ({ url, headers, orgId, streamName, logsdata }) => {
-    const fetchResponse = await fetch(`${url}/api/${orgId}/${streamName}/_json`, {
-      method: "POST",
+  const response = await page.evaluate(
+    async ({ url, headers, orgId, streamName, logsdata }) => {
+      const fetchResponse = await fetch(
+        `${url}/api/${orgId}/${streamName}/_json`,
+        {
+          method: "POST",
+          headers: headers,
+          body: JSON.stringify(logsdata),
+        }
+      );
+      return await fetchResponse.json();
+    },
+    {
+      url: process.env.INGESTION_URL,
       headers: headers,
-      body: JSON.stringify(logsdata)
-    });
-    return await fetchResponse.json();
-  }, {
-    url: process.env.INGESTION_URL,
-    headers: headers,
-    orgId: orgId,
-    streamName: streamName,
-    logsdata: logsdata
-  });
+      orgId: orgId,
+      streamName: streamName,
+      logsdata: logsdata,
+    }
+  );
   console.log(response);
 }
 
@@ -59,27 +68,23 @@ function readJsonFile(filename) {
   return fs.readFileSync(filePath, "utf8");
 }
 
-test.describe("Sanity Tests", () => { let dashboardPage
+test.describe("Sanity Tests", () => {
+  let dashboardPage;
   let pictorialJSON, lineJSON;
 
   test.beforeEach(async ({ page }) => {
-  
     dashboardPage = new DashboardPage(page);
-    
-});
+  });
 
   test.beforeAll(() => {
-    
     const jsonString = readJsonFile("pictorial.json");
-    pictorialJSON = jsonString
+    pictorialJSON = jsonString;
     lineJSON = readJsonFile("line.json");
   });
 
   test.beforeEach(async ({ page }) => {
-  
     await login(page);
-   
-    
+
     await page.waitForTimeout(1000);
     await ingestion(page);
   });
@@ -90,38 +95,43 @@ test.describe("Sanity Tests", () => { let dashboardPage
       return;
     }
     await dashboardPage.addCustomChart();
-  // Type the content with raw modifier to bypass autocomplete
-  await page.keyboard.insertText(pictorialJSON);
-  
-  await page.waitForTimeout(1000);
-  await page.locator('[data-test="dashboard-panel-error-bar-icon"]').click();
-  await page.locator('[data-test="dashboard-panel-query-editor"]').getByRole("textbox").fill('select * from "e2e_automate"');
-  await page.waitForTimeout(2000);
-  await page.locator('[data-test="dashboard-apply"]').click();
-  await page.waitForTimeout(3000);
-  await expect(page.getByText("Unsafe code detected: Access to 'document' is not allowed")).toBeVisible();
+    // Type the content with raw modifier to bypass autocomplete
+    await page.keyboard.insertText(pictorialJSON);
 
-  
-});
+    await page.waitForTimeout(1000);
+    // await page.locator('[data-test="dashboard-panel-error-bar-icon"]').click();
+    await page
+      .locator('[data-test="dashboard-panel-query-editor"]')
+      .getByRole("textbox")
+      .fill('select * from "e2e_automate"');
+    await page.waitForTimeout(2000);
+    await page.locator('[data-test="dashboard-apply"]').click();
+    await page.waitForTimeout(3000);
+    await expect(
+      page.getByText(
+        "Unsafe code detected: Access to 'document' is not allowed"
+      )
+    ).toBeVisible();
+  });
 
-test("Add line JSON in Monaco Editor", async ({ page }) => {
+  test("Add line JSON in Monaco Editor", async ({ page }) => {
     if (!lineJSON) {
       console.error("Skipping test: pictorial.json not found");
       return;
     }
     await dashboardPage.addCustomChart();
-  // Type the content with raw modifier to bypass autocomplete
-  await page.keyboard.insertText(lineJSON);
-  
-  await page.waitForTimeout(1000);
-  await page.locator('[data-test="dashboard-panel-error-bar-icon"]').click();
-  await page.locator('[data-test="dashboard-panel-query-editor"]').getByRole("textbox").fill('select * from "e2e_automate"');
-  await page.waitForTimeout(3000);
-  await page.locator('[data-test="dashboard-apply"]').click();
-  await page.waitForTimeout(3000);
-  // await expect(page.getByText("Unsafe code detected: Access to 'document' is not allowed")).toBeVisible();
-
-  
-});
+    // Type the content with raw modifier to bypass autocomplete
+    await page.keyboard.insertText(lineJSON);
 
+    await page.waitForTimeout(1000);
+    // await page.locator('[data-test="dashboard-panel-error-bar-icon"]').click();
+    await page
+      .locator('[data-test="dashboard-panel-query-editor"]')
+      .getByRole("textbox")
+      .fill('select * from "e2e_automate"');
+    await page.waitForTimeout(3000);
+    await page.locator('[data-test="dashboard-apply"]').click();
+    await page.waitForTimeout(3000);
+    // await expect(page.getByText("Unsafe code detected: Access to 'document' is not allowed")).toBeVisible();
+  });
 });
diff --git a/tests/ui-testing/playwright-tests/dashboards/dashboard-filter.spec.js b/tests/ui-testing/playwright-tests/dashboards/dashboard-filter.spec.js
index ed0db58152..e743ee55c9 100644
--- a/tests/ui-testing/playwright-tests/dashboards/dashboard-filter.spec.js
+++ b/tests/ui-testing/playwright-tests/dashboards/dashboard-filter.spec.js
@@ -347,7 +347,7 @@ test.describe("dashboard filter testcases", () => {
     await page.getByLabel("Value").fill("$variablename");
 
     await page.locator('[data-test="dashboard-apply"]').click();
-    await page.getByText("arrow_rightQueryAutoPromQLCustom SQL").click();
+    // await page.getByText("arrow_rightQueryAutoPromQLCustom SQL").click();
     await expect(page.getByText("'$variablename'").first()).toBeVisible();
     await page
       .locator('[data-test="dashboard-panel-data-view-query-inspector-btn"]')
@@ -596,7 +596,7 @@ test.describe("dashboard filter testcases", () => {
     await page.locator('[data-test="dashboard-apply"]').click();
 
     await page.locator('[data-test="dashboard-apply"]').click();
-    await page.getByText("arrow_rightQueryAutoPromQLCustom SQL").click();
+    // await page.getByText("arrow_rightQueryAutoPromQLCustom SQL").click();
     await expect(page.getByText("'$variablename'").first()).toBeVisible();
     await page
       .locator('[data-test="dashboard-panel-data-view-query-inspector-btn"]')
diff --git a/tests/ui-testing/playwright-tests/dashboards/dashboard2.spec.js b/tests/ui-testing/playwright-tests/dashboards/dashboard2.spec.js
index 81b44eae15..6f6161b588 100644
--- a/tests/ui-testing/playwright-tests/dashboards/dashboard2.spec.js
+++ b/tests/ui-testing/playwright-tests/dashboards/dashboard2.spec.js
@@ -515,7 +515,7 @@ test.describe("dashboard UI testcases", () => {
 
     await page.getByRole("button", { name: "9" }).last().click();
     await page.getByRole("button", { name: "16" }).last().click();
-    await page.locator('[data-test="chart-renderer"] div').click();
+    // await page.locator('[data-test="chart-renderer"] div').click();
     await page.locator('[data-test="dashboard-apply"]').click();
 
     await page.reload();
diff --git a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
index c7ea720e57..7f1e37dfc0 100644
--- a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
+++ b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
@@ -25,19 +25,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         style="display: flex; flex-direction: row; align-items: center"
         data-test="dashboard-query-data"
       >
-        <div>
-          <q-icon
-            flat
-            :name="
-              !dashboardPanelData.layout.showQueryBar
-                ? 'arrow_right'
-                : 'arrow_drop_down'
-            "
-            text-color="black"
-            class="q-mr-sm"
-            data-test="dashboard-panel-error-bar-icon"
-          />
-        </div>
         <q-space />
         <div style="max-width: 600px">
           <q-tabs
@@ -602,7 +589,7 @@ export default defineComponent({
 .sql-bar {
   height: 40px !important;
   // overflow: hidden;
-  cursor: pointer;
+  // cursor: pointer;
 }
 
 .dashboard-query-remove-icon:hover {
diff --git a/web/src/composables/useDashboardPanel.ts b/web/src/composables/useDashboardPanel.ts
index 444b392273..c4dc07e11f 100644
--- a/web/src/composables/useDashboardPanel.ts
+++ b/web/src/composables/useDashboardPanel.ts
@@ -157,7 +157,7 @@ const getDefaultDashboardPanelData: any = (store: any) => ({
   layout: {
     splitter: 20,
     querySplitter: 41,
-    showQueryBar: false,
+    showQueryBar: true,
     isConfigPanelOpen: false,
     currentQueryIndex: 0,
     vrlFunctionToggle: false,
diff --git a/web/src/views/Dashboards/addPanel/AddPanel.vue b/web/src/views/Dashboards/addPanel/AddPanel.vue
index bfd5814d35..7d69e6645b 100644
--- a/web/src/views/Dashboards/addPanel/AddPanel.vue
+++ b/web/src/views/Dashboards/addPanel/AddPanel.vue
@@ -180,138 +180,99 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </template>
           <template #after>
-            <div
-              class="row"
-              style="height: calc(100vh - 99px); overflow-y: auto"
-            >
-              <div class="col" style="height: 100%">
-                <q-splitter
-                  class="query-editor-splitter"
-                  v-model="dashboardPanelData.layout.querySplitter"
-                  horizontal
-                  @update:model-value="querySplitterUpdated"
-                  reverse
-                  unit="px"
-                  :limits="
-                    !dashboardPanelData.layout.showQueryBar
-                      ? [43, 400]
-                      : [140, 400]
-                  "
-                  :disable="!dashboardPanelData.layout.showQueryBar"
-                  style="height: 100%"
-                >
-                  <template #before>
-                    <div
-                      class="layout-panel-container col"
-                      style="height: 100%"
-                    >
-                      <DashboardQueryBuilder
-                        :dashboardData="currentDashboardData.data"
-                      />
-                      <q-separator />
-                      <VariablesValueSelector
-                        v-if="dateTimeForVariables ||
-                          (dashboardPanelData.meta.dateTime 
-                            && dashboardPanelData.meta.dateTime.start_time 
-                            && dashboardPanelData.meta.dateTime.end_time)"
-                        :variablesConfig="currentDashboardData.data?.variables"
-                        :showDynamicFilters="
-                          currentDashboardData.data?.variables
-                            ?.showDynamicFilters
-                        "
-                        :selectedTimeDate="
-                          dateTimeForVariables ||
-                          dashboardPanelData.meta.dateTime
-                        "
-                        @variablesData="variablesDataUpdated"
-                        :initialVariableValues="initialVariableValues"
-                      />
+            <div class="row">
+              <div
+                class="col scroll"
+                style="height: calc(100vh - 99px); overflow-y: auto"
+              >
+                <div class="layout-panel-container col">
+                  <DashboardQueryBuilder
+                    :dashboardData="currentDashboardData.data"
+                  />
+                  <q-separator />
+                  <VariablesValueSelector
+                    v-if="
+                      dateTimeForVariables ||
+                      (dashboardPanelData.meta.dateTime &&
+                        dashboardPanelData.meta.dateTime.start_time &&
+                        dashboardPanelData.meta.dateTime.end_time)
+                    "
+                    :variablesConfig="currentDashboardData.data?.variables"
+                    :showDynamicFilters="
+                      currentDashboardData.data?.variables?.showDynamicFilters
+                    "
+                    :selectedTimeDate="
+                      dateTimeForVariables || dashboardPanelData.meta.dateTime
+                    "
+                    @variablesData="variablesDataUpdated"
+                    :initialVariableValues="initialVariableValues"
+                  />
 
-                      <div v-if="isOutDated" class="tw-p-2">
-                        <div
-                          :style="{
-                            borderColor: '#c3920d',
-                            borderWidth: '1px',
-                            borderStyle: 'solid',
-                            backgroundColor:
-                              store.state.theme == 'dark'
-                                ? '#2a1f03'
-                                : '#faf2da',
-                            padding: '1%',
-                            borderRadius: '5px',
-                          }"
-                        >
-                          <div style="font-weight: 700">
-                            Your chart is not up to date
-                          </div>
-                          <div>
-                            Chart Configuration / Variables has been updated,
-                            but the chart was not updated automatically. Click
-                            on the "Apply" button to run the query again
-                          </div>
-                        </div>
-                      </div>
-                      <div class="tw-flex tw-justify-end tw-mr-2">
-                        <span v-if="lastTriggeredAt" class="lastRefreshedAt">
-                          <span class="lastRefreshedAtIcon">🕑</span
-                          ><RelativeTime
-                            :timestamp="lastTriggeredAt"
-                            fullTimePrefix="Last Refreshed At: "
-                          />
-                        </span>
-                      </div>
-                      <div class="col" style="flex: 1">
-                        <PanelSchemaRenderer
-                          v-if="chartData"
-                          @metadata-update="metaDataValue"
-                          :key="dashboardPanelData.data.type"
-                          :panelSchema="chartData"
-                          :dashboard-id="queryParams?.dashboard"
-                          :folder-id="queryParams?.folder"
-                          :selectedTimeObj="dashboardPanelData.meta.dateTime"
-                          :variablesData="updatedVariablesData"
-                          :allowAnnotationsAdd="editMode"
-                          :width="6"
-                          @error="handleChartApiError"
-                          @updated:data-zoom="onDataZoom"
-                          @updated:vrlFunctionFieldList="
-                            updateVrlFunctionFieldList
-                          "
-                          @last-triggered-at-update="
-                            handleLastTriggeredAtUpdate
-                          "
-                          searchType="dashboards"
-                        />
-                        <q-dialog v-model="showViewPanel">
-                          <QueryInspector
-                            :metaData="metaData"
-                            :data="panelTitle"
-                          ></QueryInspector>
-                        </q-dialog>
-                      </div>
-                      <DashboardErrorsComponent
-                        :errors="errorData"
-                        class="col-auto"
-                        style="flex-shrink: 0"
-                      />
-                    </div>
-                  </template>
-                  <template #separator>
+                  <div v-if="isOutDated" class="tw-p-2">
                     <div
-                      class="splitter"
-                      :class="
-                        dashboardPanelData.layout.showQueryBar
-                          ? 'splitter-enabled'
-                          : ''
-                      "
-                    ></div>
-                  </template>
-                  <template #after>
-                    <div style="height: 100%; width: 100%" class="row column">
-                      <DashboardQueryEditor />
+                      :style="{
+                        borderColor: '#c3920d',
+                        borderWidth: '1px',
+                        borderStyle: 'solid',
+                        backgroundColor:
+                          store.state.theme == 'dark' ? '#2a1f03' : '#faf2da',
+                        padding: '1%',
+                        borderRadius: '5px',
+                      }"
+                    >
+                      <div style="font-weight: 700">
+                        Your chart is not up to date
+                      </div>
+                      <div>
+                        Chart Configuration / Variables has been updated, but
+                        the chart was not updated automatically. Click on the
+                        "Apply" button to run the query again
+                      </div>
                     </div>
-                  </template>
-                </q-splitter>
+                  </div>
+                  <div class="tw-flex tw-justify-end tw-mr-2">
+                    <span v-if="lastTriggeredAt" class="lastRefreshedAt">
+                      <span class="lastRefreshedAtIcon">🕑</span
+                      ><RelativeTime
+                        :timestamp="lastTriggeredAt"
+                        fullTimePrefix="Last Refreshed At: "
+                      />
+                    </span>
+                  </div>
+                  <div class="tw-h-[calc(100vh-500px)]">
+                    <PanelSchemaRenderer
+                      v-if="chartData"
+                      @metadata-update="metaDataValue"
+                      :key="dashboardPanelData.data.type"
+                      :panelSchema="chartData"
+                      :dashboard-id="queryParams?.dashboard"
+                      :folder-id="queryParams?.folder"
+                      :selectedTimeObj="dashboardPanelData.meta.dateTime"
+                      :variablesData="updatedVariablesData"
+                      :allowAnnotationsAdd="editMode"
+                      :width="6"
+                      @error="handleChartApiError"
+                      @updated:data-zoom="onDataZoom"
+                      @updated:vrlFunctionFieldList="updateVrlFunctionFieldList"
+                      @last-triggered-at-update="handleLastTriggeredAtUpdate"
+                      searchType="dashboards"
+                    />
+                    <q-dialog v-model="showViewPanel">
+                      <QueryInspector
+                        :metaData="metaData"
+                        :data="panelTitle"
+                      ></QueryInspector>
+                    </q-dialog>
+                  </div>
+                  <DashboardErrorsComponent
+                    :errors="errorData"
+                    class="col-auto"
+                    style="flex-shrink: 0"
+                  />
+                </div>
+                <div class="row column tw-h-[calc(100vh-180px)]">
+                  <DashboardQueryEditor />
+                </div>
               </div>
               <q-separator vertical />
               <div class="col-auto">
@@ -432,96 +393,63 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="row"
               style="height: calc(100vh - 99px); overflow-y: auto"
             >
-              <div class="col" style="height: 100%">
-                <q-splitter
-                  class="query-editor-splitter"
-                  v-model="dashboardPanelData.layout.querySplitter"
-                  horizontal
-                  @update:model-value="querySplitterUpdated"
-                  reverse
-                  unit="px"
-                  :limits="
-                    !dashboardPanelData.layout.showQueryBar
-                      ? [43, 400]
-                      : [140, 400]
-                  "
-                  :disable="!dashboardPanelData.layout.showQueryBar"
-                  style="height: 100%"
+              <div class="col scroll" style="height: 100%">
+                <div
+                  class="layout-panel-container tw-h-[calc(100vh-200px)] col"
                 >
-                  <template #before>
-                    <div
-                      class="layout-panel-container col"
-                      style="height: 100%"
-                    >
-                      <q-splitter
-                        class="query-editor-splitter"
-                        v-model="splitterModel"
-                        style="height: 100%"
-                        @update:model-value="layoutSplitterUpdated"
-                      >
-                        <template #before>
-                          <CustomChartEditor
-                            v-model="dashboardPanelData.data.customChartContent"
-                            style="width: 100%; height: 100%"
-                          />
-                        </template>
-                        <template #separator>
-                          <div class="splitter-vertical splitter-enabled"></div>
-                          <q-avatar
-                            color="primary"
-                            text-color="white"
-                            size="20px"
-                            icon="drag_indicator"
-                            style="top: 10px; left: 3.5px"
-                            data-test="dashboard-markdown-editor-drag-indicator"
-                          />
-                        </template>
-                        <template #after>
-                          <PanelSchemaRenderer
-                            v-if="chartData"
-                            @metadata-update="metaDataValue"
-                            :key="dashboardPanelData.data.type"
-                            :panelSchema="chartData"
-                            :dashboard-id="queryParams?.dashboard"
-                            :folder-id="queryParams?.folder"
-                            :selectedTimeObj="dashboardPanelData.meta.dateTime"
-                            :variablesData="updatedVariablesData"
-                            :width="6"
-                            @error="handleChartApiError"
-                            @updated:data-zoom="onDataZoom"
-                            @updated:vrlFunctionFieldList="
-                              updateVrlFunctionFieldList
-                            "
-                            @last-triggered-at-update="
-                              handleLastTriggeredAtUpdate
-                            "
-                            searchType="dashboards"
-                          />
-                        </template>
-                      </q-splitter>
-                      <DashboardErrorsComponent
-                        :errors="errorData"
-                        class="col-auto"
-                        style="flex-shrink: 0"
+                  <q-splitter
+                    class="query-editor-splitter"
+                    v-model="splitterModel"
+                    style="height: 100%"
+                    @update:model-value="layoutSplitterUpdated"
+                  >
+                    <template #before>
+                      <CustomChartEditor
+                        v-model="dashboardPanelData.data.customChartContent"
+                        style="width: 100%; height: 100%"
                       />
-                    </div>
-                  </template>
-                  <template #separator>
-                    <div
-                      class="splitter"
-                      :class="
-                        dashboardPanelData.layout.showQueryBar
-                          ? 'splitter-enabled'
-                          : ''
-                      "
-                    ></div>
-                  </template>
-                  <template #after>
-                    <div style="height: 100%; width: 100%" class="row column">
-                      <DashboardQueryEditor />
-                    </div>
-                  </template>
-                </q-splitter>
+                    </template>
+                    <template #separator>
+                      <div class="splitter-vertical splitter-enabled"></div>
+                      <q-avatar
+                        color="primary"
+                        text-color="white"
+                        size="20px"
+                        icon="drag_indicator"
+                        style="top: 10px; left: 3.5px"
+                        data-test="dashboard-markdown-editor-drag-indicator"
+                      />
+                    </template>
+                    <template #after>
+                      <PanelSchemaRenderer
+                        v-if="chartData"
+                        @metadata-update="metaDataValue"
+                        :key="dashboardPanelData.data.type"
+                        :panelSchema="chartData"
+                        :dashboard-id="queryParams?.dashboard"
+                        :folder-id="queryParams?.folder"
+                        :selectedTimeObj="dashboardPanelData.meta.dateTime"
+                        :variablesData="updatedVariablesData"
+                        :width="6"
+                        @error="handleChartApiError"
+                        @updated:data-zoom="onDataZoom"
+                        @updated:vrlFunctionFieldList="
+                          updateVrlFunctionFieldList
+                        "
+                        @last-triggered-at-update="handleLastTriggeredAtUpdate"
+                        searchType="dashboards"
+                      />
+                    </template>
+                  </q-splitter>
+                  <DashboardErrorsComponent
+                    :errors="errorData"
+                    class="col-auto"
+                    style="flex-shrink: 0"
+                  />
+                </div>
+                <div class="row column tw-h-[calc(100vh-180px)]">
+                  <DashboardQueryEditor />
+                </div>
               </div>
               <q-separator vertical />
               <div class="col-auto">