diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index bb3cd5c12d..a4ebe1d922 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -401,14 +401,14 @@ class Table extends React.Component {
 
           {renderElement(component, componentMeta, paramUpdated, dataQueries, 'serverSidePagination', 'properties', currentState)}
 
-          <hr></hr>
+          <div class="hr-text">Events</div>
 
           {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked, currentState, components)}
           {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged, currentState, components)}
 
           {renderQuerySelector(component, dataQueries, eventOptionUpdated, 'onBulkUpdate', componentMeta.events.onBulkUpdate)}
 
-          <hr></hr>
+          <div class="hr-text">Style</div>
         </div>
 
         {renderElement(component, componentMeta, paramUpdated, dataQueries, 'visible', 'properties', currentState)}
diff --git a/frontend/src/Editor/Inspector/QuerySelector.jsx b/frontend/src/Editor/Inspector/QuerySelector.jsx
index ea6c0f0a40..274c2a6c6d 100644
--- a/frontend/src/Editor/Inspector/QuerySelector.jsx
+++ b/frontend/src/Editor/Inspector/QuerySelector.jsx
@@ -1,15 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import SelectSearch, { fuzzySearch } from 'react-select-search';
+import Collapse from 'react-bootstrap/Collapse'
 
 export const QuerySelector = ({
   param,
   definition,
+  eventUpdated,
   eventOptionUpdated,
   dataQueries,
   extraData,
-  eventMeta
+  eventMeta,
+  currentState,
+  components
 }) => {
-  
+
+  const [open, setOpen] = useState(false);
+
   function onChange(value) {
     const query = dataQueries.find((dataquery) => dataquery.id === value);
     eventOptionUpdated(param, 'queryId', query.id, extraData);
@@ -25,20 +31,35 @@ export const QuerySelector = ({
   }
 
   return (
-    <div className="field mb-2 mt-1">
-      <label className="form-label mt-2">{eventMeta.displayName}</label>
-      <SelectSearch
-        options={dataQueries.map((query) => {
-          return { name: query.name, value: query.id };
-        })}
-        value={definition.options.queryId}
-        search={true}
-        onChange={(value) => {
-          onChange(value);
-        }}
-        filterOptions={fuzzySearch}
-        placeholder="Select.."
-      />
+    <div className="field mb-3 mt-1 px-2">
+      <label className="form-label" role="button" onClick={() => setOpen(!open)}>
+        <div className="row">
+          <div className="col">
+            {eventMeta.displayName}
+          </div>
+          <div className={`col-auto events-toggle ${open ? 'events-toggle-active' : ''}`}>
+            <span class="toggle-icon"></span>
+          </div>
+        </div>
+      </label>
+      <Collapse in={open}>
+        <div id="collapse">
+          <div className="field mb-2 mt-1">
+            <SelectSearch
+              options={dataQueries.map((query) => {
+                return { name: query.name, value: query.id };
+              })}
+              value={definition.options.queryId}
+              search={true}
+              onChange={(value) => {
+                onChange(value);
+              }}
+              filterOptions={fuzzySearch}
+              placeholder="Select.."
+            />
+          </div>
+        </div>
+      </Collapse>
     </div>
   );
 };