From 174e90e1e265f7cc1cc975bd5d8dfc4faa6fa971 Mon Sep 17 00:00:00 2001
From: Sai Nikhil <nikhil@openobserve.ai>
Date: Fri, 18 Jul 2025 15:05:36 +0530
Subject: [PATCH] fix: all the list tables should have same style  (#7510)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### **User description**
1. all the tables that are there in the application should be having the
same style


___

### **PR Type**
Enhancement


___

### **Description**
- Unify header layout across list pages

- Apply `o2-quasar-table` classes globally

- Standardize column widths and sticky actions

- Introduce dark/light table theme CSS


___

### **Changes diagram**

```mermaid
flowchart LR
  Pages["List Pages"] -- "use" --> Header["Header Bar Component"]
  Header -- "wraps" --> Table["q-table with header slot"]
  Table -- "applies" --> Styles["Global table CSS"]
```


___



### **Changes walkthrough** 📝
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><details><summary>18
files</summary><table>
<tr>
<td><strong>PipelinesList.vue</strong><dd><code>Refactor pipeline list
header & table styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-85e3ef322f3eea0fc6d74d89431ba338a1153cb82ee06bef0f7c5f439c04267d">+243/-232</a></td>

</tr>

<tr>
<td><strong>AlertList.vue</strong><dd><code>Update alerts list table
header and styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-be3e41b823e163b226ffc270d95cc4981e59c600851e4e0d10ee5e4ee994ac8e">+147/-154</a></td>

</tr>

<tr>
<td><strong>LogStream.vue</strong><dd><code>Enhance log stream header &
table style</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-56f4223b74568c10bc305741cc9fc3a8830184a251b4eaa6a2649033bc6200e3">+140/-135</a></td>

</tr>

<tr>
<td><strong>EnrichmentTableList.vue</strong><dd><code>Unify enrichment
tables header & styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-6a29e253f59405d3c0f756dba36afd7483f10ad86927cbbc3348ede6372c3077">+54/-34</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AlertsDestinationList.vue</strong><dd><code>Revamp alert
destinations list layout</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-e9d05ba6c071c0e2f5d9ef7acdef757f79910abd6897b29e27b069a10d4ba8de">+66/-39</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>ServiceAccountsList.vue</strong><dd><code>Style service
accounts list header & table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-3afe835bcfbec3fda2e9550850c29581092ee0717e7dd8de8888e774a0048d24">+55/-61</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>User.vue</strong><dd><code>Revise users table header and
styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-e973c2a665f9b27b94673ba64cc5b23650300836a727a2e07673c8e26305aee5">+51/-45</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>ReportList.vue</strong><dd><code>Format report list header &
table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-f7d700f7e67fbaba3c58ab5d2c614925db743101828214445ce9dae35dc29067">+64/-39</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>CipherKeys.vue</strong><dd><code>Style cipher keys list
header & table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-950b715cff2c964d8542512692030c370733b57d698abf40e1dcb3cce2cfaf7a">+56/-34</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>TemplateList.vue</strong><dd><code>Rework alert templates
list styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-7df66364d7d69a26cfa25cbc555d0e090c2f73e51c8386d9b0435bae4412564c">+59/-36</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>PipelinesDestinationList.vue</strong><dd><code>Enhance
pipeline destinations list UI</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-088c66f5a34e73a5350a794a772e5d905262277337c937dd36f4295072203ebf">+52/-28</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>FunctionList.vue</strong><dd><code>Uniform function list
header & styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-6ff9af50a1597504b7f0dca91e61cf30c800b4a17b4be2ed2c3a4f7a7b2d7068">+50/-33</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>ListOrganizations.vue</strong><dd><code>Refine organizations
list header & table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-572ed99323d3e36d126074eccc10b68f6eef983d92f89d06b205fef0925c93a3">+41/-36</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AppRoles.vue</strong><dd><code>Style IAM roles table header
& actions</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-191634ef09436199f91f442968110a01f54ae46b5ceee67476f52613ad796db4">+42/-42</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AppGroups.vue</strong><dd><code>Style IAM groups header &
table actions</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-402fb2a5338e60fdc3da489f4d50b5cf52f06b4e884a6fe7b82441c9fa5ea22c">+14/-17</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AppTable.vue</strong><dd><code>Add header slot & table
styling support</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-efcf66a9e913b5d3a7c2eea800b7f4e54d9e5268307131482fd40f32e2074d8e">+7/-8</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>GroupUsers.vue</strong><dd><code>Enhance group users
selection table styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-114c767db76d4a09278c765d8aba39a1936c861488f39e7f0f6b3883499a3c40">+6/-15</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>GroupServiceAccounts.vue</strong><dd><code>Style group
service-accounts selection table</code>&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-b7afafc6b850c2d6edc2b855e78ff51d95d101937ec001a5790d130f4fb60695">+5/-14</a>&nbsp;
&nbsp; </td>

</tr>

</table></details></td></tr><tr><td><strong>Formatting</strong></td><td><details><summary>1
files</summary><table>
<tr>
<td><strong>index.vue</strong><dd><code>Adjust settings page title
spacing</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-699c63979f851c48ad440a078e93282fd797a18fc065e5331b2e41122ddb8b69">+2/-2</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></details></td></tr><tr><td><strong>Configuration
changes</strong></td><td><details><summary>1 files</summary><table>
<tr>
<td><strong>app.scss</strong><dd><code>Add global table styling
definitions</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-5703d12504b0395cbfbbfad02a592bc391496026e5f03743102ce06c210ea05f">+128/-1</a>&nbsp;
</td>

</tr>
</table></details></td></tr><tr><td><strong>Additional
files</strong></td><td><details><summary>3 files</summary><table>
<tr>
  <td><strong>GroupRoles.vue</strong></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-d7d1d9ec26ff77175b0e961e3e53e7ced45c9211eae8a0c00f7ac1cdac88ae14">+3/-8</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>EditRole.vue</strong></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-263b6bc7d29fdf8358c8437cd637f1350aa3733cc2706eae8ff00028686cc0f5">+0/-14</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
  <td><strong>PermissionsTable.vue</strong></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-609d4d7245b7309cf30cc45c22c996c6b068ebc042a9673e75ee3bbd2aa00a2a">+7/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></details></td></tr></tr></tbody></table>

___

> <details> <summary> Need help?</summary><li>Type <code>/help how to
...</code> in the comments thread for any questions about PR-Agent
usage.</li><li>Check out the <a
href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a>
for more information.</li></details>
---
 web/src/components/AppTable.vue               |  15 +-
 .../components/actionScripts/ActionScipts.vue | 118 ++++---
 web/src/components/alerts/AlertList.vue       | 308 +++++++++---------
 .../alerts/AlertsDestinationList.vue          | 105 +++---
 .../alerts/PipelinesDestinationList.vue       |  80 +++--
 web/src/components/alerts/TemplateList.vue    |  95 ++++--
 .../functions/EnrichmentTableList.vue         |  88 +++--
 web/src/components/functions/FunctionList.vue |  83 +++--
 web/src/components/iam/groups/AppGroups.vue   |  33 +-
 web/src/components/iam/groups/EditGroup.vue   |   6 -
 web/src/components/iam/groups/GroupRoles.vue  |  17 +-
 .../iam/groups/GroupServiceAccounts.vue       |  19 +-
 web/src/components/iam/groups/GroupUsers.vue  |  21 +-
 .../iam/organizations/ListOrganizations.vue   |  76 +++--
 web/src/components/iam/roles/AppRoles.vue     |  83 +++--
 web/src/components/iam/roles/EditRole.vue     |  14 -
 .../components/iam/roles/PermissionsTable.vue |   8 +-
 .../serviceAccounts/ServiceAccountsList.vue   | 117 ++++---
 web/src/components/iam/users/User.vue         |  96 +++---
 web/src/components/pipeline/PipelinesList.vue | 195 +++++------
 web/src/components/reports/ReportList.vue     | 105 +++---
 web/src/components/settings/CipherKeys.vue    |  92 ++++--
 web/src/components/settings/index.vue         |   4 +-
 web/src/styles/app.scss                       | 188 ++++++++++-
 web/src/views/Functions.vue                   |   2 +-
 web/src/views/LogStream.vue                   | 275 ++++++++--------
 26 files changed, 1251 insertions(+), 992 deletions(-)

diff --git a/web/src/components/AppTable.vue b/web/src/components/AppTable.vue
index c401e341c7..6c8bac963f 100644
--- a/web/src/components/AppTable.vue
+++ b/web/src/components/AppTable.vue
@@ -42,7 +42,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :filter="filter && filter.value"
       :filter-method="filter && filter.method"
       @virtual-scroll="onScroll"
-      class="full-height"
     >
       <template #no-data>
         <NoData class="q-mb-lg" />
@@ -52,6 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <q-th
             v-for="col in props.cols"
             :key="col.name"
+            :class="col.classes || ''"
             :props="props"
             :style="col.style"
           >
@@ -60,13 +60,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </q-tr>
       </template>
        <template #top="scope">
+        <div class="tw-flex tw-items-center tw-justify-between tw-w-full q-py-xs  "> 
+          <span class="tw-font-bold tw-text-[14px] tw-w-full q-pa-none">
+          {{ rows.length }} {{ title }}
+        </span>
         <QTablePagination
           :scope="scope"
           :resultTotal="resultTotal"
           :perPageOptions="perPageOptions"
           position="top"
           @update:changeRecordPerPage="changePagination"
+          style="padding: 0px;"
         />
+        </div>
        </template>
       <template v-slot:body="props">
         <q-tr :props="props" :key="`m_${props.row.index}`">
@@ -124,7 +130,6 @@ import { ref } from "vue";
 import QTablePagination from "@/components/shared/grid/Pagination.vue";
 import { computed,watch  } from "vue";
 import NoData from "./shared/grid/NoData.vue";
-
 const props = defineProps({
   columns: {
     type: Array,
@@ -242,12 +247,6 @@ watch(
     top: 0;
     opacity: 1;
     z-index: 1;
-    background: #f5f5f5;
-  }
-
-  .q-table--dark .thead-sticky,
-  .q-table--dark .tfoot-sticky {
-    background: #565656 !important;
   }
 
   .q-table__bottom {
diff --git a/web/src/components/actionScripts/ActionScipts.vue b/web/src/components/actionScripts/ActionScipts.vue
index c104a80803..ca1e68573c 100644
--- a/web/src/components/actionScripts/ActionScipts.vue
+++ b/web/src/components/actionScripts/ActionScipts.vue
@@ -19,13 +19,46 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     data-test="action-scripts-list-page"
-    class="q-pa-none flex tw-w-full"
-    style="height: calc(100vh - 42px)"
+    class="q-pa-none tw-w-full"
+    style="height: calc(100vh - 57px)"
     :class="store.state.theme === 'dark' ? 'dark-theme' : 'light-theme'"
   >
+  <div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3 tw-w-full"
+    :class="store.state.theme =='dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+    >
+    <div class="q-table__title" data-test="alerts-list-title">
+            {{ t("actions.header") }}
+          </div>
+          <div class="tw-full-width tw-flex tw-items-center tw-justify-end">
+            <q-input
+            data-test="action-list-search-input"
+            v-model="filterQuery"
+            borderless
+            filled
+            dense
+            class="q-ml-auto no-border tw-w-[350px]"
+            :placeholder="t('actions.search')"
+          >
+            <template #prepend>
+              <q-icon name="search" class="cursor-pointer" />
+            </template>
+          </q-input>
+          <q-btn
+            data-test="action-list-add-btn"
+            class="q-ml-md text-bold no-border"
+            padding="sm lg"
+            color="secondary"
+            no-caps
+            :label="t(`actions.add`)"
+            @click="showAddUpdateFn({})"
+          />
+          </div>
+  </div>
     <div
       v-if="!showAddActionScriptDialog"
       class="full-width action-scripts-table"
+      style="height: calc(100vh - 112px) ; overflow-y: auto;"
+
     >
       <q-table
         data-test="action-scripts-table"
@@ -37,7 +70,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :filter="filterQuery"
         :filter-method="filterData"
         style="width: 100%"
-      >
+        class="o2-quasar-table"
+        :class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
+        >
         <template #no-data>
           <NoData />
         </template>
@@ -95,32 +130,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
 
         <template #top="scope">
-          <div class="q-table__title" data-test="alerts-list-title">
-            {{ t("actions.header") }}
-          </div>
-          <q-input
-            data-test="action-list-search-input"
-            v-model="filterQuery"
-            borderless
-            filled
-            dense
-            class="q-ml-auto q-mb-xs no-border tw-w-[350px]"
-            :placeholder="t('actions.search')"
-          >
-            <template #prepend>
-              <q-icon name="search" class="cursor-pointer" />
-            </template>
-          </q-input>
-          <q-btn
-            data-test="action-list-add-btn"
-            class="q-ml-md q-mb-xs text-bold no-border"
-            padding="sm lg"
-            color="secondary"
-            no-caps
-            :label="t(`actions.add`)"
-            @click="showAddUpdateFn({})"
-          />
-
           <QTablePagination
             :scope="scope"
             :pageTitle="t('actions.header')"
@@ -140,6 +149,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:changeRecordPerPage="changePagination"
           />
         </template>
+
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- Rendering the of the columns -->
+               <!-- here we can add the classes class so that the head will be sticky -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
       </q-table>
     </div>
     <template v-else>
@@ -355,6 +380,7 @@ export default defineComponent({
         label: "#",
         field: "#",
         align: "left",
+        style: "width: 67px;",
       },
       {
         name: "name",
@@ -411,6 +437,7 @@ export default defineComponent({
         label: t("alerts.actions"),
         align: "center",
         sortable: false,
+        classes: "actions-column",
       },
     ]);
     const activeTab: any = ref("alerts");
@@ -948,39 +975,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.q-table {
-  &__top {
-    border-bottom: 1px solid $border-color;
-    justify-content: flex-end;
-  }
-}
-
-.alert-list-table {
-  th:last-child,
-  td:last-child {
-    position: sticky;
-    right: 0;
-    z-index: 1;
-    background: #ffffff;
-    box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
-  }
-}
-
-.dark-theme {
-  th:last-child,
-  td:last-child {
-    background: var(--q-dark);
-    box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1);
-  }
-}
-
-.light-theme {
-  th:last-child,
-  td:last-child {
-    background: #ffffff;
-  }
-}
-
 .alerts-tabs {
   .q-tabs {
     &--vertical {
diff --git a/web/src/components/alerts/AlertList.vue b/web/src/components/alerts/AlertList.vue
index 94021da946..846def5a3e 100644
--- a/web/src/components/alerts/AlertList.vue
+++ b/web/src/components/alerts/AlertList.vue
@@ -25,18 +25,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <div
       v-if="!showAddAlertDialog && !showImportAlertDialog"
-      class="flex justify-between full-width q-px-md q-pt-md"
+      class="flex justify-between full-width tw-py-3 tw-px-4 items-center"
     >
       <div class="q-table__title" data-test="alerts-list-title">
         {{ t("alerts.header") }}
       </div>
-      <div class="flex q-ml-auto tw-ps-2 alerts-list-tabs items-center">
-        <app-tabs
-          class="q-mr-md"
+      <div class="flex q-ml-auto tw-ps-2 items-center">
+        <div class="app-tabs-container q-mr-md">
+          <app-tabs
+          class="tabs-selection-container"
+          :class="store.state.theme === 'dark' ? 'tabs-selection-container-dark' : 'tabs-selection-container-light'"
           :tabs="tabs"
           v-model:active-tab="activeTab"
           @update:active-tab="filterAlertsByTab"
         />
+        </div>
         <q-input
           v-model="dynamicQueryModel"
           dense
@@ -83,7 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
       <q-btn
         data-test="alert-list-add-alert-btn"
-        class="q-ml-md q-mb-xs text-bold no-border"
+        class="q-ml-md text-bold no-border"
         padding="sm lg"
         color="secondary"
         no-caps
@@ -122,14 +125,34 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             row-key="alert_id"
             :pagination="pagination"
             style="width: 100%"
+            class="o2-quasar-table"
+            :class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
           >
-            <template #header-selection="scope">
-              <q-checkbox
-                v-model="scope.selected"
-                size="sm"
-                color="secondary"
-              />
-            </template>
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- Adding this block to render the select-all checkbox -->
+              <q-th auto-width>
+                <q-checkbox
+                  v-model="props.selected"
+                  size="sm"
+                  color="secondary"
+                  @update:model-value="props.select"
+                />
+              </q-th>
+
+              <!-- Rendering the rest of the columns -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
+
             <template v-slot:body-selection="scope">
               <q-checkbox
                 v-model="scope.selected"
@@ -196,118 +219,121 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </div>
                   </template>
                   <template v-else-if="col.name == 'actions'">
-                    <div
-                      data-test="alert-list-loading-alert"
-                      v-if="alertStateLoadingMap[props.row.uuid]"
-                      style="
-                        display: inline-block;
-                        width: 33.14px;
-                        height: auto;
-                      "
-                      class="flex justify-center items-center q-ml-xs"
-                      :title="`Turning ${props.row.enabled ? 'Off' : 'On'}`"
+                    <div class="tw-flex tw-items-center actions-container"
                     >
-                      <q-circular-progress
-                        indeterminate
-                        rounded
-                        size="16px"
-                        :value="1"
-                        color="secondary"
+                      <div
+                        data-test="alert-list-loading-alert"
+                        v-if="alertStateLoadingMap[props.row.uuid]"
+                        style="
+                          display: inline-block;
+                          width: 33.14px;
+                          height: auto;
+                        "
+                        class="flex justify-center items-center q-ml-xs"
+                        :title="`Turning ${props.row.enabled ? 'Off' : 'On'}`"
+                      >
+                        <q-circular-progress
+                          indeterminate
+                          rounded
+                          size="16px"
+                          :value="1"
+                          color="secondary"
+                        />
+                      </div>
+                      <q-btn
+                        v-else
+                        :data-test="`alert-list-${props.row.name}-pause-start-alert`"
+                        :icon="
+                          props.row.enabled ? outlinedPause : outlinedPlayArrow
+                        "
+                        class="q-ml-xs material-symbols-outlined"
+                        padding="sm"
+                        unelevated
+                        size="sm"
+                        :color="props.row.enabled ? 'negative' : 'positive'"
+                        round
+                        flat
+                        :title="
+                          props.row.enabled
+                            ? t('alerts.pause')
+                            : t('alerts.start')
+                        "
+                        @click.stop="toggleAlertState(props.row)"
                       />
-                    </div>
-                    <q-btn
-                      v-else
-                      :data-test="`alert-list-${props.row.name}-pause-start-alert`"
-                      :icon="
-                        props.row.enabled ? outlinedPause : outlinedPlayArrow
-                      "
-                      class="q-ml-xs material-symbols-outlined"
-                      padding="sm"
-                      unelevated
-                      size="sm"
-                      :color="props.row.enabled ? 'negative' : 'positive'"
-                      round
-                      flat
-                      :title="
-                        props.row.enabled
-                          ? t('alerts.pause')
-                          : t('alerts.start')
-                      "
-                      @click.stop="toggleAlertState(props.row)"
-                    />
-                    <q-btn
-                      :data-test="`alert-list-${props.row.name}-update-alert`"
-                      icon="edit"
-                      unelevated
-                      size="sm"
-                      round
-                      flat
-                      :title="t('alerts.edit')"
-                      @click.stop="editAlert(props.row)"
-                    ></q-btn>
-                    <q-btn
-                      icon="content_copy"
-                      :title="t('alerts.clone')"
-                      unelevated
-                      size="sm"
-                      round
-                      flat
-                      @click.stop="duplicateAlert(props.row)"
-                      :data-test="`alert-list-${props.row.name}-clone-alert`"
-                    ></q-btn>
-                    <q-btn
-                      :icon="outlinedMoreVert"
-                      unelevated
-                      size="sm"
-                      round
-                      flat
-                      @click.stop="openMenu($event, props.row)"
-                      :data-test="`alert-list-${props.row.name}-more-options`"
-                    >
-                      <q-menu>
-                        <q-list style="min-width: 100px">
-                          <q-item
-                            class="flex items-center"
-                            clickable
-                            v-close-popup
-                            @click="moveAlertToAnotherFolder(props.row)"
-                          >
-                            <q-item-section dense avatar>
-                              <q-icon
-                                size="16px"
-                                :name="outlinedDriveFileMove"
-                              />
-                            </q-item-section>
-                            <q-item-section>Move</q-item-section>
-                          </q-item>
+                      <q-btn
+                        :data-test="`alert-list-${props.row.name}-update-alert`"
+                        icon="edit"
+                        unelevated
+                        size="sm"
+                        round
+                        flat
+                        :title="t('alerts.edit')"
+                        @click.stop="editAlert(props.row)"
+                      ></q-btn>
+                      <q-btn
+                        icon="content_copy"
+                        :title="t('alerts.clone')"
+                        unelevated
+                        size="sm"
+                        round
+                        flat
+                        @click.stop="duplicateAlert(props.row)"
+                        :data-test="`alert-list-${props.row.name}-clone-alert`"
+                      ></q-btn>
+                      <q-btn
+                        :icon="outlinedMoreVert"
+                        unelevated
+                        size="sm"
+                        round
+                        flat
+                        @click.stop="openMenu($event, props.row)"
+                        :data-test="`alert-list-${props.row.name}-more-options`"
+                      >
+                        <q-menu>
+                          <q-list style="min-width: 100px">
+                            <q-item
+                              class="flex items-center"
+                              clickable
+                              v-close-popup
+                              @click="moveAlertToAnotherFolder(props.row)"
+                            >
+                              <q-item-section dense avatar>
+                                <q-icon
+                                  size="16px"
+                                  :name="outlinedDriveFileMove"
+                                />
+                              </q-item-section>
+                              <q-item-section>Move</q-item-section>
+                            </q-item>
 
-                          <q-item
-                            class="flex items-center justify-center"
-                            clickable
-                            v-close-popup
-                            @click="showDeleteDialogFn(props)"
-                          >
-                            <q-item-section dense avatar>
-                              <q-icon size="16px" :name="outlinedDelete" />
-                            </q-item-section>
-                            <q-item-section>{{
-                              t("alerts.delete")
-                            }}</q-item-section>
-                          </q-item>
-                          <q-item
-                            class="flex items-center justify-center"
-                            clickable
-                            v-close-popup
-                            @click="exportAlert(props.row)"
-                          >
-                            <q-item-section dense avatar>
-                              <q-icon size="16px" name="download" />
-                            </q-item-section>
-                            <q-item-section>Export</q-item-section>
-                          </q-item>
-                        </q-list>
-                      </q-menu>
-                    </q-btn>
+                            <q-item
+                              class="flex items-center justify-center"
+                              clickable
+                              v-close-popup
+                              @click="showDeleteDialogFn(props)"
+                            >
+                              <q-item-section dense avatar>
+                                <q-icon size="16px" :name="outlinedDelete" />
+                              </q-item-section>
+                              <q-item-section>{{
+                                t("alerts.delete")
+                              }}</q-item-section>
+                            </q-item>
+                            <q-item
+                              class="flex items-center justify-center"
+                              clickable
+                              v-close-popup
+                              @click="exportAlert(props.row)"
+                            >
+                              <q-item-section dense avatar>
+                                <q-icon size="16px" name="download" />
+                              </q-item-section>
+                              <q-item-section>Export</q-item-section>
+                            </q-item>
+                          </q-list>
+                        </q-menu>
+                      </q-btn>
+                  </div>
                   </template>
                   <template v-else>
                     {{ props.row[col.field] }}
@@ -754,6 +780,7 @@ export default defineComponent({
           label: "#",
           field: "#",
           align: "left",
+          style: "width: 67px",
         },
         {
           name: "name",
@@ -809,6 +836,7 @@ export default defineComponent({
           align: "center",
           sortable: false,
           style: "width: 150px",
+          classes: 'actions-column' //this is the class that we are adding to the actions column so that we can apply the styling to the actions column only
         },
       ];
       if (searchAcrossFolders.value && searchQuery.value != "") {
@@ -2023,40 +2051,6 @@ export default defineComponent({
   width: calc(14vw);
 }
 
-.q-table {
-  &__top {
-    border-bottom: 1px solid $border-color;
-    justify-content: flex-end;
-  }
-}
-
-.alert-list-table {
-  th:last-child,
-  td:last-child {
-    //the fixed width as we have moved some actions to the menu so lot of space is occupied by actions section so remvoed that
-    padding: 10px !important;
-    position: sticky;
-    right: 0;
-    z-index: 1;
-    background: #ffffff;
-    box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
-  }
-}
-
-.dark-theme {
-  th:last-child,
-  td:last-child {
-    background: var(--q-dark);
-    box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1);
-  }
-}
-
-.light-theme {
-  th:last-child,
-  td:last-child {
-    background: #ffffff;
-  }
-}
 
 .alerts-tabs {
   .q-tabs {
@@ -2118,8 +2112,9 @@ export default defineComponent({
 </style>
 
 <style lang="scss" scoped>
-.dark-mode {
+.dark-theme {
   background-color: $dark-page;
+  
 
   .alerts-list-tabs {
     height: fit-content;
@@ -2129,6 +2124,7 @@ export default defineComponent({
     }
 
     :deep(.rum-tab) {
+      
       &:hover {
         background: #464646;
       }
diff --git a/web/src/components/alerts/AlertsDestinationList.vue b/web/src/components/alerts/AlertsDestinationList.vue
index de83f046e3..b2bf20da33 100644
--- a/web/src/components/alerts/AlertsDestinationList.vue
+++ b/web/src/components/alerts/AlertsDestinationList.vue
@@ -15,18 +15,62 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <q-page class="q-pa-none" style="min-height: inherit">
-    <div v-if="!showDestinationEditor && !showImportDestination">
+  <q-page class="q-pa-none" style="height: 100%; min-height: inherit" >
+
+    <div v-if="!showDestinationEditor && !showImportDestination" style="height: calc(100vh - 112px); overflow-y: auto;" >
+      <div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
+      :class="store.state.theme == 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+      >
+        <div class="q-table__title" data-test="alert-destinations-list-title">
+            {{ t("alert_destinations.header") }}
+          </div>
+          <div class="tw-flex tw-justify-end">
+            <q-input
+            data-test="destination-list-search-input"
+            v-model="filterQuery"
+            borderless
+            filled
+            dense
+            class="q-ml-auto no-border"
+            :placeholder="t('alert_destinations.search')"
+          >
+            <template #prepend>
+              <q-icon name="search" class="cursor-pointer" />
+            </template>
+          </q-input>
+          <q-btn
+            class="q-ml-md text-bold"
+            padding="sm lg"
+            outline
+            no-caps
+            :label="t(`dashboard.import`)"
+            @click="importDestination"
+            data-test="destination-import"
+          />
+          <q-btn
+            data-test="alert-destination-list-add-alert-btn"
+            class="q-ml-md text-bold no-border"
+            padding="sm lg"
+            color="secondary"
+            no-caps
+            :disable="!templates.length"
+            :label="t(`alert_destinations.add`)"
+            @click="editDestination(null)"
+          />
+          </div>
+      </div>
       <q-table
         data-test="alert-destinations-list-table"
         ref="qTable"
         :rows="destinations"
         :columns="columns"
         row-key="id"
-        style="width: 100%"
+        style="width: 100%;"
         :pagination="pagination"
         :filter="filterQuery"
         :filter-method="filterData"
+        class="o2-quasar-table"
+        :class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
       >
         <template #no-data>
           <div
@@ -97,41 +141,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </q-td>
         </template>
         <template #top="scope">
-          <div class="q-table__title" data-test="alert-destinations-list-title">
-            {{ t("alert_destinations.header") }}
-          </div>
-          <q-input
-            data-test="destination-list-search-input"
-            v-model="filterQuery"
-            borderless
-            filled
-            dense
-            class="q-ml-auto q-mb-xs no-border"
-            :placeholder="t('alert_destinations.search')"
-          >
-            <template #prepend>
-              <q-icon name="search" class="cursor-pointer" />
-            </template>
-          </q-input>
-          <q-btn
-            class="q-ml-md text-bold"
-            padding="sm lg"
-            outline
-            no-caps
-            :label="t(`dashboard.import`)"
-            @click="importDestination"
-            data-test="destination-import"
-          />
-          <q-btn
-            data-test="alert-destination-list-add-alert-btn"
-            class="q-ml-md q-mb-xs text-bold no-border"
-            padding="sm lg"
-            color="secondary"
-            no-caps
-            :disable="!templates.length"
-            :label="t(`alert_destinations.add`)"
-            @click="editDestination(null)"
-          />
 
           <QTablePagination
             :scope="scope"
@@ -152,6 +161,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:changeRecordPerPage="changePagination"
           />
         </template>
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- Render the table headers -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
       </q-table>
     </div>
     <div v-else-if="showDestinationEditor && !showImportDestination">
@@ -228,12 +251,14 @@ export default defineComponent({
     const { t } = useI18n();
     const q = useQuasar();
     const { getAllActions } = useActions();
+
     const columns: any = ref<QTableProps["columns"]>([
       {
         name: "#",
         label: "#",
         field: "#",
         align: "left",
+        style: "width: 67px",
       },
       {
         name: "name",
@@ -255,6 +280,7 @@ export default defineComponent({
         label: t("alert_destinations.method"),
         align: "left",
         sortable: true,
+        style: "width: 150px",
       },
       {
         name: "actions",
@@ -262,7 +288,7 @@ export default defineComponent({
         label: t("alert_destinations.actions"),
         align: "center",
         sortable: false,
-        style: "width: 110px",
+        classes:'actions-column'
       },
     ]);
     const destinations: Ref<DestinationPayload[]> = ref([]);
@@ -551,6 +577,7 @@ export default defineComponent({
       exportDestination,
       showImportDestination,
       importDestination,
+      store,
     };
   },
 });
diff --git a/web/src/components/alerts/PipelinesDestinationList.vue b/web/src/components/alerts/PipelinesDestinationList.vue
index 6489d199df..dc8461b457 100644
--- a/web/src/components/alerts/PipelinesDestinationList.vue
+++ b/web/src/components/alerts/PipelinesDestinationList.vue
@@ -16,7 +16,38 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <q-page class="q-pa-none" style="min-height: inherit">
-    <div v-if="!showDestinationEditor">
+    <div v-if="!showDestinationEditor" style="height: calc(100vh - 112px); overflow-y: auto;">
+      <div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
+      :class="store.state.theme == 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+      >
+        <div class="q-table__title" data-test="alert-destinations-list-title">
+            {{ t("pipeline_destinations.header") }}
+          </div>
+          <div class="tw-flex tw-justify-end">
+            <q-input
+            data-test="destination-list-search-input"
+            v-model="filterQuery"
+            borderless
+            filled
+            dense
+            class="q-ml-auto no-border"
+            :placeholder="t('alert_destinations.search')"
+          >
+            <template #prepend>
+              <q-icon name="search" class="cursor-pointer" />
+            </template>
+          </q-input>
+          <q-btn
+            data-test="alert-destination-list-add-alert-btn"
+            class="q-ml-md text-bold no-border"
+            padding="sm lg"
+            color="secondary"
+            no-caps
+            :label="t(`alert_destinations.add`)"
+            @click="editDestination(null)"
+          />
+          </div>
+      </div>
       <q-table
         data-test="alert-destinations-list-table"
         ref="qTable"
@@ -27,6 +58,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :pagination="pagination"
         :filter="filterQuery"
         :filter-method="filterData"
+        class="o2-quasar-table"
+        :class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
       >
         <template #no-data>
           <template>
@@ -62,32 +95,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </q-td>
         </template>
         <template #top="scope">
-          <div class="q-table__title" data-test="alert-destinations-list-title">
-            {{ t("pipeline_destinations.header") }}
-          </div>
-          <q-input
-            data-test="destination-list-search-input"
-            v-model="filterQuery"
-            borderless
-            filled
-            dense
-            class="q-ml-auto q-mb-xs no-border"
-            :placeholder="t('alert_destinations.search')"
-          >
-            <template #prepend>
-              <q-icon name="search" class="cursor-pointer" />
-            </template>
-          </q-input>
-          <q-btn
-            data-test="alert-destination-list-add-alert-btn"
-            class="q-ml-md q-mb-xs text-bold no-border"
-            padding="sm lg"
-            color="secondary"
-            no-caps
-            :label="t(`alert_destinations.add`)"
-            @click="editDestination(null)"
-          />
-
           <QTablePagination
             :scope="scope"
             :pageTitle="t('pipeline_destinations.header')"
@@ -107,6 +114,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:changeRecordPerPage="changePagination"
           />
         </template>
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- render the table headers -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
       </q-table>
     </div>
     <div v-else>
@@ -166,6 +187,7 @@ export default defineComponent({
         label: "#",
         field: "#",
         align: "left",
+        style: "width: 67px",
       },
       {
         name: "name",
@@ -187,6 +209,7 @@ export default defineComponent({
         label: t("alert_destinations.method"),
         align: "left",
         sortable: true,
+        style: "width: 150px",
       },
       {
         name: "actions",
@@ -194,7 +217,7 @@ export default defineComponent({
         label: t("alert_destinations.actions"),
         align: "center",
         sortable: false,
-        style: "width: 110px",
+        classes:'actions-column'
       },
     ]);
     const destinations: Ref<DestinationPayload[]> = ref([]);
@@ -422,6 +445,7 @@ export default defineComponent({
       pagination,
       outlinedDelete,
       routeTo,
+      store,
     };
   },
 });
diff --git a/web/src/components/alerts/TemplateList.vue b/web/src/components/alerts/TemplateList.vue
index b32e1c1bf1..94eabdf879 100644
--- a/web/src/components/alerts/TemplateList.vue
+++ b/web/src/components/alerts/TemplateList.vue
@@ -16,7 +16,47 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <q-page class="q-pa-none" style="min-height: inherit">
-    <div v-if="!showImportTemplate && !showTemplateEditor">
+    <div v-if="!showImportTemplate && !showTemplateEditor" style="height: calc(100vh - 112px); overflow-y: auto;">
+      <div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
+      :class="store.state.theme == 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+      >
+        <div class="q-table__title" data-test="alert-templates-list-title">
+            {{ t("alert_templates.header") }}
+          </div>
+          <div class="tw-flex tw-justify-end">
+          <q-input
+            data-test="template-list-search-input"
+            v-model="filterQuery"
+            borderless
+            filled
+            dense
+            class="q-ml-auto q-mb-xs no-border"
+            :placeholder="t('alert_templates.search')"
+          >
+            <template #prepend>
+              <q-icon name="search" class="cursor-pointer" />
+            </template>
+          </q-input>
+          <q-btn
+            class="q-ml-md text-bold"
+            padding="sm lg"
+            outline
+            no-caps
+            :label="t(`dashboard.import`)"
+            @click="importTemplate"
+            data-test="template-import"
+          />
+          <q-btn
+            data-test="alert-template-list-add-alert-btn"
+            class="q-ml-md q-mb-xs text-bold no-border"
+            padding="sm lg"
+            color="secondary"
+            no-caps
+            :label="t(`alert_templates.add`)"
+            @click="editTemplate(null)"
+          />
+        </div>
+      </div>
       <q-table
         data-test="alert-templates-list-table"
         ref="qTableRef"
@@ -28,6 +68,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :pagination="pagination"
         :filter="filterQuery"
         :filter-method="filterData"
+        class="o2-quasar-table"
+        :class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
       >
         <template #no-data>
           <NoData />
@@ -73,40 +115,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </q-td>
         </template>
         <template #top="scope">
-          <div class="q-table__title" data-test="alert-templates-list-title">
-            {{ t("alert_templates.header") }}
-          </div>
-          <q-input
-            data-test="template-list-search-input"
-            v-model="filterQuery"
-            borderless
-            filled
-            dense
-            class="q-ml-auto q-mb-xs no-border"
-            :placeholder="t('alert_templates.search')"
-          >
-            <template #prepend>
-              <q-icon name="search" class="cursor-pointer" />
-            </template>
-          </q-input>
-          <q-btn
-            class="q-ml-md text-bold"
-            padding="sm lg"
-            outline
-            no-caps
-            :label="t(`dashboard.import`)"
-            @click="importTemplate"
-            data-test="template-import"
-          />
-          <q-btn
-            data-test="alert-template-list-add-alert-btn"
-            class="q-ml-md q-mb-xs text-bold no-border"
-            padding="sm lg"
-            color="secondary"
-            no-caps
-            :label="t(`alert_templates.add`)"
-            @click="editTemplate(null)"
-          />
           <QTablePagination
             :scope="scope"
             :pageTitle="t('alert_templates.header')"
@@ -125,6 +133,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:changeRecordPerPage="changePagination"
           />
         </template>
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- render the table headers -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
       </q-table>
     </div>
     <div v-else-if="!showImportTemplate && showTemplateEditor">
@@ -177,6 +199,7 @@ const columns: any = ref<QTableProps["columns"]>([
     label: "#",
     field: "#",
     align: "left",
+    style: "width: 67px",
   },
   {
     name: "name",
@@ -191,7 +214,7 @@ const columns: any = ref<QTableProps["columns"]>([
     label: t("alert_templates.actions"),
     align: "center",
     sortable: false,
-    style: "width: 110px",
+    classes:'actions-column'
   },
 ]);
 const showTemplateEditor = ref(false);
diff --git a/web/src/components/functions/EnrichmentTableList.vue b/web/src/components/functions/EnrichmentTableList.vue
index 3ec26ace0a..877e140933 100644
--- a/web/src/components/functions/EnrichmentTableList.vue
+++ b/web/src/components/functions/EnrichmentTableList.vue
@@ -19,6 +19,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <q-page class="q-pa-none" style="min-height: inherit">
     <div v-if="!showAddJSTransformDialog">
+      <div :class="store.state.theme === 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+      class="tw-flex tw-items-center tw-justify-between tw-py-3 tw-px-4"
+      >
+        <div class="q-table__title">
+            {{ t("function.enrichmentTables") }}
+          </div>
+          <div class="q-ml-auto" data-test="enrichment-tables-search-input">
+            <q-input
+              v-model="filterQuery"
+              borderless
+              filled
+              dense
+              class="q-ml-auto no-border search-en-table-input"
+              :placeholder="t('function.searchEnrichmentTable')"
+            >
+              <template #prepend>
+                <q-icon name="search" class="cursor-pointer" />
+              </template>
+            </q-input>
+          </div>
+          <q-btn
+            class="q-ml-md text-bold no-border"
+            padding="sm lg"
+            color="secondary"
+            no-caps
+            :label="t(`function.addEnrichmentTable`)"
+            @click="showAddUpdateFn({})"
+          />
+      </div>
       <q-table
         ref="qTable"
         :rows="jsTransforms"
@@ -28,7 +57,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :filter="filterQuery"
         :filter-method="filterData"
         style="width: 100%"
-        dense
+        :class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
+        class="o2-quasar-table"
       >
         <template #no-data>
           <NoData />
@@ -94,33 +124,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </q-td>
         </template>
         <template #top="scope">
-          <div class="q-table__title">
-            {{ t("function.enrichmentTables") }}
-          </div>
-          <div class="q-ml-auto" data-test="enrichment-tables-search-input">
-            <q-input
-              v-model="filterQuery"
-              borderless
-              filled
-              dense
-              class="q-ml-auto q-mb-xs no-border search-en-table-input"
-              :placeholder="t('function.searchEnrichmentTable')"
-            >
-              <template #prepend>
-                <q-icon name="search" class="cursor-pointer" />
-              </template>
-            </q-input>
-          </div>
-          <q-btn
-            class="q-ml-md q-mb-xs text-bold no-border"
-            padding="sm lg"
-            color="secondary"
-            no-caps
-            :label="t(`function.addEnrichmentTable`)"
-            @click="showAddUpdateFn({})"
-          />
-
           <QTablePagination
+            style="padding: 0px !important;"
             :scope="scope"
             :pageTitle="t('function.enrichmentTables')"
             :position="'top'"
@@ -139,6 +144,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:changeRecordPerPage="changePagination"
           />
         </template>
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- Rendering the of the columns -->
+               <!-- here we can add the classes class so that the head will be sticky -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
       </q-table>
     </div>
     <div v-else>
@@ -222,6 +242,7 @@ export default defineComponent({
         label: "#",
         field: "#",
         align: "left",
+        style: "width: 67px",
       },
       {
         name: "name",
@@ -239,6 +260,7 @@ export default defineComponent({
         sort: (a, b, rowA, rowB) => {
           return parseInt(rowA.doc_num) - parseInt(rowB.doc_num);
         },
+        style: "width: 150px",
       },
       {
         name: "storage_size",
@@ -249,6 +271,7 @@ export default defineComponent({
         sort: (a, b, rowA, rowB) => {
           return rowA.original_storage_size - rowB.original_storage_size;
         },
+        style: "width: 150px",
       },
       {
         name: "compressed_size",
@@ -257,14 +280,17 @@ export default defineComponent({
         align: "left",
         sortable: false,
         sort: (a, b, rowA, rowB) =>
-          rowA.original_compressed_size - rowB.original_compressed_size,
+          rowA.original_compressed_size- rowB.original_compressed_size,
+        style: "width: 150px",
       },
+
       {
         name: "actions",
         field: "actions",
         label: t("function.actions"),
         align: "center",
         sortable: false,
+        classes: "actions-column",
       },
     ]);
     const { getStreams, resetStreamType, getStream } = useStreams();
@@ -592,12 +618,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.q-table {
-  &__top {
-    border-bottom: 1px solid $border-color;
-    justify-content: flex-end;
-  }
-}
 
 .search-en-table-input {
   .q-field__inner {
diff --git a/web/src/components/functions/FunctionList.vue b/web/src/components/functions/FunctionList.vue
index a6b85b273e..bf83bd9fcd 100644
--- a/web/src/components/functions/FunctionList.vue
+++ b/web/src/components/functions/FunctionList.vue
@@ -19,6 +19,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <q-page class="q-pa-none" style="min-height: inherit">
     <div v-if="!showAddJSTransformDialog">
+      <div class="tw-flex tw-items-center tw-justify-between tw-py-3 tw-px-4" 
+      :class="store.state.theme === 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+      >
+        <div class="q-table__title">
+            {{ t("function.header") }}
+          </div>
+          <div class="q-ml-auto" data-test="functions-list-search-input">
+            <q-input
+              v-model="filterQuery"
+              borderless
+              filled
+              dense
+              class="q-ml-auto no-border"
+              :placeholder="t('function.search')"
+            >
+              <template #prepend>
+                <q-icon name="search" class="cursor-pointer" />
+              </template>
+            </q-input>
+          </div>
+          <q-btn
+            class="q-ml-md text-bold no-border"
+            padding="sm lg"
+            color="secondary"
+            no-caps
+            :label="t(`function.add`)"
+            @click="showAddUpdateFn({})"
+          />
+      </div>
       <q-table
         ref="qTable"
         :rows="jsTransforms"
@@ -28,7 +57,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :filter="filterQuery"
         :filter-method="filterData"
         style="width: 100%"
-        dense
+        :class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
+        class="o2-quasar-table"
       >
         <template #no-data>
           <NoData />
@@ -82,33 +112,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </q-td>
         </template>
         <template #top="scope">
-          <div class="q-table__title">
-            {{ t("function.header") }}
-          </div>
-          <div class="q-ml-auto" data-test="functions-list-search-input">
-            <q-input
-              v-model="filterQuery"
-              borderless
-              filled
-              dense
-              class="q-ml-auto q-mb-xs no-border"
-              :placeholder="t('function.search')"
-            >
-              <template #prepend>
-                <q-icon name="search" class="cursor-pointer" />
-              </template>
-            </q-input>
-          </div>
-          <q-btn
-            class="q-ml-md q-mb-xs text-bold no-border"
-            padding="sm lg"
-            color="secondary"
-            no-caps
-            :label="t(`function.add`)"
-            @click="showAddUpdateFn({})"
-          />
-
           <QTablePagination
+            style="padding: 0px !important;"
             :scope="scope"
             :pageTitle="t('function.header')"
             :position="'top'"
@@ -127,6 +132,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:changeRecordPerPage="changePagination"
           />
         </template>
+
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- Rendering the of the columns -->
+               <!-- here we can add the classes class so that the head will be sticky -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
       </q-table>
     </div>
     <div v-else>
@@ -253,6 +274,7 @@ export default defineComponent({
         label: "#",
         field: "#",
         align: "left",
+        style: "width: 67px",
       },
       {
         name: "name",
@@ -267,6 +289,7 @@ export default defineComponent({
         label: t("function.actions"),
         align: "center",
         sortable: false,
+        classes:'actions-column'
       },
     ]);
 
@@ -620,12 +643,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.q-table {
-  &__top {
-    border-bottom: 1px solid $border-color;
-    justify-content: flex-end;
-  }
-}
 .pipeline-list-container {
   max-height: 200px; /* Adjust based on item height to fit 5 items */
   overflow-y: auto;
diff --git a/web/src/components/iam/groups/AppGroups.vue b/web/src/components/iam/groups/AppGroups.vue
index 906cc3a672..8c67624e36 100644
--- a/web/src/components/iam/groups/AppGroups.vue
+++ b/web/src/components/iam/groups/AppGroups.vue
@@ -15,24 +15,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div>
+  <div class="q-pa-none">
+    <div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
+      :class="store.state.theme =='dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+      >
     <div
       data-test="iam-groups-section-title"
-      style="font-size: 18px; padding-top: 12px"
-      class="q-mb-md q-px-md"
+      class="q-table__title"
     >
       {{ t("iam.groups") }}
     </div>
-
-    <div>
-      <div class="q-px-md q-mb-sm q-pb-xs row items-center justify-between">
+    <div class=" row items-center justify-end">
         <div date-test="iam-groups-search-input">
           <q-input
             v-model="filterQuery"
             filled
             dense
-            class="q-pr-sm"
-            style="width: 500px"
+            class="col-6"
             :placeholder="t('iam.searchGroup')"
           >
             <template #prepend>
@@ -42,7 +41,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <q-btn
           data-test="alert-list-add-alert-btn"
-          class="q-ml-md q-mb-xs text-bold no-border q-mr-sm"
+          class="q-ml-md text-bold no-border"
           padding="sm lg"
           color="secondary"
           no-caps
@@ -50,16 +49,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @click="addGroup"
         />
       </div>
-      <div
-        data-test="iam-groups-table-title"
-        class="q-px-md q-pt-sm q-ml-xs text-bold"
-        style="font-size: 14px; padding-bottom: 12px"
-      >
-        {{ rows.length }} {{ t("iam.groups") }}
-      </div>
+    </div>
+    <div>
       <app-table
         data-test="iam-groups-table-section"
-        class="iam-table"
+        class="iam-table o2-quasar-app-table"
+        :class="store.state.theme == 'dark' ? 'o2-quasar-app-table-dark': 'o2-quasar-app-table-light'"
         :rows="rows"
         :columns="columns"
         pagination
@@ -69,6 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           method: filterGroups,
         }"
         :bordered="false"
+        :title="t('iam.groups')"
       >
         <template v-slot:actions="slotProps: any">
           <div>
@@ -151,6 +147,7 @@ const columns: any = [
     label: "#",
     field: "#",
     align: "left",
+    style: "width: 67px;",
   },
   {
     name: "group_name",
@@ -167,7 +164,7 @@ const columns: any = [
     sortable: false,
     slot: true,
     slotName: "actions",
-    style: "width: 400px",
+    classes: "actions-column",
   },
 ];
 
diff --git a/web/src/components/iam/groups/EditGroup.vue b/web/src/components/iam/groups/EditGroup.vue
index 965d30f0de..7c03506865 100644
--- a/web/src/components/iam/groups/EditGroup.vue
+++ b/web/src/components/iam/groups/EditGroup.vue
@@ -63,12 +63,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="flex justify-end q-px-md q-py-sm full-width"
       style="position: sticky; bottom: 0px; z-index: 2"
       :class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
-      :style="{
-        'box-shadow':
-          store.state.theme === 'dark'
-            ? 'rgb(45 45 45) 0px -4px 7px 0px'
-            : 'rgb(240 240 240) 0px -4px 7px 0px',
-      }"
     >
       <q-btn
         data-test="add-alert-cancel-btn"
diff --git a/web/src/components/iam/groups/GroupRoles.vue b/web/src/components/iam/groups/GroupRoles.vue
index ff57fa34fe..07b6ed55a2 100644
--- a/web/src/components/iam/groups/GroupRoles.vue
+++ b/web/src/components/iam/groups/GroupRoles.vue
@@ -15,17 +15,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div data-test="iam-roles-selection-section" class="col q-pr-xs">
+  <div data-test="iam-roles-selection-section" class="col">
     <div
       class="flex justify-start bordered q-px-md q-py-sm"
       style="position: sticky; top: 0px; z-index: 2"
       :class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
-      :style="{
-        'box-shadow':
-          store.state.theme === 'dark'
-            ? 'rgb(45 45 45) 0px 4px 7px 0px'
-            : 'rgb(240 240 240) 0px 4px 7px 0px',
-      }"
     >
       <div class="q-mr-md">
         <div
@@ -83,13 +77,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </q-input>
       </div>
     </div>
-    <div data-test="iam-roles-selection-table" class="q-px-md">
-      <div
-        data-test="iam-roles-selection-table-title"
-        class="q-my-sm text-bold"
-      >
-        {{ rows.length }} Roles
-      </div>
+    <div data-test="iam-roles-selection-table">
       <template v-if="rows.length">
         <app-table
           :rows="rows"
@@ -100,6 +88,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             value: userSearchKey,
             method: filterRoles,
           }"
+          :title="t('iam.roles')"
         >
           <template v-slot:select="slotProps: any">
             <q-checkbox
diff --git a/web/src/components/iam/groups/GroupServiceAccounts.vue b/web/src/components/iam/groups/GroupServiceAccounts.vue
index 40202aeeef..268dcc7e40 100644
--- a/web/src/components/iam/groups/GroupServiceAccounts.vue
+++ b/web/src/components/iam/groups/GroupServiceAccounts.vue
@@ -15,17 +15,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-    <div class="col q-pr-xs">
+    <div class="col">
       <div
         data-test="iam-service-accounts-selection-filters"
         class="flex justify-start bordered q-px-md q-py-sm"
         :class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
-        :style="{
-          'box-shadow':
-            store.state.theme === 'dark'
-              ? 'rgb(45 45 45) 0px 4px 7px 0px'
-              : 'rgb(240 240 240) 0px 4px 7px 0px',
-        }"
         style="position: sticky; top: 0px; z-index: 2"
       >
         <div data-test="iam-service-accounts-selection-show-toggle" class="q-mr-md">
@@ -81,13 +75,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </q-input>
         </div>
       </div>
-      <div data-test="iam-service-accounts-selection-table" class="q-px-md">
-        <div
-          data-test="iam-service-accounts-selection-table-title"
-          class="q-my-sm text-bold"
-        >
-          {{ rows.length }} {{t('iam.serviceAccounts')}}
-        </div>
+      <div data-test="iam-service-accounts-selection-table">
         <template v-if="rows.length">
           <app-table
             :rows="rows"
@@ -95,10 +83,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :dense="true"
             :virtual-scroll="false"
             style="height: fit-content"
+            class="o2-quasar-table"
             :filter="{
               value: userSearchKey,
               method: filterUsers,
             }"
+            :title="t('iam.serviceAccounts')"
           >
             <template v-slot:select="slotProps: any">
               <q-checkbox
@@ -192,6 +182,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       sortable: false,
       slot: true,
       slotName: "select",
+      style: "width: 67px"
     },
     {
       name: "email",
diff --git a/web/src/components/iam/groups/GroupUsers.vue b/web/src/components/iam/groups/GroupUsers.vue
index a4cbd19999..fda24dc6d1 100644
--- a/web/src/components/iam/groups/GroupUsers.vue
+++ b/web/src/components/iam/groups/GroupUsers.vue
@@ -15,17 +15,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="col q-pr-xs">
+  <div class="col">
     <div
       data-test="iam-users-selection-filters"
-      class="flex justify-start items-center bordered q-px-md q-py-sm"
+      class="flex justify-start bordered q-px-md q-py-sm"
       :class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
-      :style="{
-        'box-shadow':
-          store.state.theme === 'dark'
-            ? 'rgb(45 45 45) 0px 4px 7px 0px'
-            : 'rgb(240 240 240) 0px 4px 7px 0px',
-      }"
       style="position: sticky; top: 0px; z-index: 2"
     >
       <div data-test="iam-users-selection-show-toggle" class="q-mr-md">
@@ -106,13 +100,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         </div>
     </div>
-    <div data-test="iam-users-selection-table" class="q-px-md">
-      <div
-        data-test="iam-users-selection-table-title"
-        class="q-my-sm text-bold"
-      >
-        {{ rows.length }} Users
-      </div>
+    <div data-test="iam-users-selection-table">
       <template v-if="rows.length">
         <app-table
           :rows="rows"
@@ -124,6 +112,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             value: userSearchKey,
             method: filterUsers,
           }"
+          :title="t('iam.users')"
+          class="o2-quasar-table"
         >
           <template v-slot:select="slotProps: any">
             <q-checkbox
@@ -228,6 +218,7 @@ const columns = computed(() => {
       sortable: false,
       slot: true,
       slotName: "select",
+      style: "width: 67px"
     },
     {
       name: "email",
diff --git a/web/src/components/iam/organizations/ListOrganizations.vue b/web/src/components/iam/organizations/ListOrganizations.vue
index 74e4a3e535..a503a923fb 100644
--- a/web/src/components/iam/organizations/ListOrganizations.vue
+++ b/web/src/components/iam/organizations/ListOrganizations.vue
@@ -18,7 +18,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
   <q-page class="q-pa-none">
-    <q-table
+      <div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
+      :class="store.state.theme =='dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+      style="position: sticky; top: 0; z-index: 1000 ;"
+      >
+          <div  class="q-table__title full-width" data-test="organizations-title-text">{{ t("organization.header") }}</div>
+          <div class="full-width tw-flex tw-justify-end">
+
+            <q-input
+              v-model="filterQuery"
+              filled
+              dense
+             class="col-6"
+              :placeholder="t('organization.search')"
+            >
+              <template #prepend>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          
+            <q-btn
+              class="q-ml-md text-bold no-border"
+              padding="sm lg"
+              color="secondary"
+              style="float: right; cursor: pointer !important"
+              no-caps
+              dense
+              :label="t(`organization.add`)"
+              @click="addOrganization"
+              data-test="Add Organization"
+            />
+            </div>
+        </div>
+    <div>
+      <q-table
       ref="qTable"
       :rows="organizations"
       :columns="columns"
@@ -27,6 +60,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :filter="filterQuery"
       :filter-method="filterData"
       :loading="loading"
+      class="o2-quasar-table"
+      :class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
     >
       <template #no-data><NoData /></template>
 
@@ -47,41 +82,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template> -->
 
       <template #top="scope">
-        <div
-          class="full-width flex justify-between items-start"
-          style="margin-bottom: 2px; height: 44px"
-        >
-          <div class="q-table__title">{{ t("organization.header") }}</div>
-        </div>
-        <div class="full-width row q-mb-xs items-start">
-          <div class="col">
-            <q-input
-              v-model="filterQuery"
-              filled
-              dense
-              class="col-6 q-pr-sm"
-              style="width: 400px"
-              :placeholder="t('organization.search')"
-            >
-              <template #prepend>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-          </div>
-          <div class="col-3">
-            <q-btn
-              class="q-ml-md q-mb-xs text-bold no-border float-right"
-              padding="sm lg"
-              color="secondary"
-              no-caps
-              dense
-              :label="t(`organization.add`)"
-              @click="addOrganization"
-              data-test="Add Organization"
-            />
-          </div>
-        </div>
-
         <QTablePagination
           :scope="scope"
           :pageTitle="t('organization.header')"
@@ -104,6 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- @update:maxRecordToReturn="changeMaxRecordToReturn" -->
       </template>
     </q-table>
+    </div>
     <q-dialog
       v-model="showAddOrganizationDialog"
       position="right"
@@ -159,6 +160,7 @@ export default defineComponent({
         label: "#",
         field: "#",
         align: "left",
+        style: "width: 67px;",
       },
       {
         name: "name",
@@ -173,6 +175,7 @@ export default defineComponent({
         label: t("organization.identifier"),
         align: "left",
         sortable: true,
+        
       },
       {
         name: "type",
@@ -180,6 +183,7 @@ export default defineComponent({
         label: t("organization.type"),
         align: "left",
         sortable: true,
+        style: "width: 150px;",
       },
     ]);
 
diff --git a/web/src/components/iam/roles/AppRoles.vue b/web/src/components/iam/roles/AppRoles.vue
index 9aee5bcedd..ec6ec71ae8 100644
--- a/web/src/components/iam/roles/AppRoles.vue
+++ b/web/src/components/iam/roles/AppRoles.vue
@@ -15,52 +15,47 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div
-    data-test="iam-roles-section-title"
-    style="font-size: 18px; padding-top: 12px"
-    class="q-mb-md q-px-md"
-  >
-    {{ t("iam.roles") }}
-  </div>
-
-  <div>
-    <div class="q-px-md q-mb-sm q-pb-xs row items-center justify-between">
-      <div date-test="iam-roles-search-input">
-        <q-input
-          v-model="filterQuery"
-          filled
-          dense
-          class="q-pr-sm"
-          style="width: 500px"
-          :placeholder="t('iam.searchRole')"
-        >
-          <template #prepend>
-            <q-icon name="search" />
-          </template>
-        </q-input>
+  <q-page class="q-pa-none">
+    <div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
+      :class="store.state.theme =='dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+      >
+      <div
+        data-test="iam-roles-section-title"
+        class="q-table__title"
+      >
+        {{ t("iam.roles") }}
       </div>
+      <div class="row items-center justify-end">
+          <div date-test="iam-roles-search-input">
+            <q-input
+              v-model="filterQuery"
+              filled
+              dense
+              class="col-6"
+              :placeholder="t('iam.searchRole')"
+            >
+              <template #prepend>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </div>
 
-      <q-btn
-        data-test="alert-list-add-alert-btn"
-        class="q-ml-md q-mb-xs text-bold no-border q-mr-sm"
-        padding="sm lg"
-        color="secondary"
-        no-caps
-        :label="t(`iam.addRole`)"
-        @click="addRole"
-      />
-    </div>
-    <div
-      data-test="iam-roles-table-title"
-      class="q-px-md q-pt-sm q-ml-xs text-bold"
-      style="font-size: 14px; padding-bottom: 12px"
-    >
-      {{ rows.length }} {{ t("iam.roles") }}
-      <!-- Add QTablePagination here -->
+          <q-btn
+            data-test="alert-list-add-alert-btn"
+            class="q-ml-md text-bold no-border"
+            padding="sm lg"
+            color="secondary"
+            no-caps
+            :label="t(`iam.addRole`)"
+            @click="addRole"
+          />
+        </div>
     </div>
+  <div>
     <app-table
       data-test="iam-roles-table-section"
-      class="iam-table"
+      class="iam-table o2-quasar-app-table"
+      :class="store.state.theme == 'dark' ? 'o2-quasar-app-table-dark': 'o2-quasar-app-table-light'"
       :rows="rows"
       :columns="columns"
       pagination
@@ -70,6 +65,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         method: filterRoles,
       }"
       :bordered="false"
+      :title="t('iam.roles')"
+
     >
       <template v-slot:actions="slotProps: any">
         <div>
@@ -107,6 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     @update:cancel="deleteConformDialog.show = false"
     v-model="deleteConformDialog.show"
   />
+  </q-page>
 </template>
 
 <script setup lang="ts">
@@ -145,6 +143,7 @@ const columns: any = [
     label: "#",
     field: "#",
     align: "left",
+    style: "width: 67px"
   },
   {
     name: "role_name",
@@ -161,7 +160,7 @@ const columns: any = [
     sortable: false,
     slot: true,
     slotName: "actions",
-    style: "width: 400px",
+    classes: "actions-column",
   },
 ];
 
diff --git a/web/src/components/iam/roles/EditRole.vue b/web/src/components/iam/roles/EditRole.vue
index 170f8cd958..545d8cc17c 100644
--- a/web/src/components/iam/roles/EditRole.vue
+++ b/web/src/components/iam/roles/EditRole.vue
@@ -75,13 +75,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             class="flex justify-between items-center"
             :class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
-            :style="{
-              'box-shadow':
-                store.state.theme === 'dark'
-                  ? 'rgb(45 45 45) 0px 4px 7px 0px'
-                  : 'rgb(240 240 240) 0px 4px 7px 0px',
-              height: '56px',
-            }"
           >
             <div
               v-show="permissionsUiType === 'table'"
@@ -200,7 +193,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <div
             data-test="edit-role-permissions-table-section"
-            class="q-px-md q-my-sm"
           >
             <div v-show="permissionsUiType === 'table'">
               <permissions-table
@@ -286,12 +278,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="flex justify-end q-px-md q-py-sm full-width"
         style="position: sticky; bottom: 0px; z-index: 2"
         :class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
-        :style="{
-          'box-shadow':
-            store.state.theme === 'dark'
-              ? 'rgb(45 45 45) 0px -4px 7px 0px'
-              : 'rgb(240 240 240) 0px -4px 7px 0px',
-        }"
       >
         <q-btn
           data-test="edit-role-cancel-btn"
diff --git a/web/src/components/iam/roles/PermissionsTable.vue b/web/src/components/iam/roles/PermissionsTable.vue
index 0610f2273c..caa64722a0 100644
--- a/web/src/components/iam/roles/PermissionsTable.vue
+++ b/web/src/components/iam/roles/PermissionsTable.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     data-test="edit-role-permissions-table-title"
     v-if="!level"
-    class="q-mb-md text-bold"
+    class="tw-py-[19px] tw-px-[16px] tw-font-bold tw-text-[14px]"
   >
      {{ visibleResourceCount }} Permissions
   </div>
@@ -380,9 +380,15 @@ defineExpose({
 <style scoped></style>
 <style lang="scss">
 .iam-permissions-table {
+  th{
+    height: 48px !important;
+  }
   .q-table--bordered {
     border: none;
   }
+  .q-table__card{
+    border-radius: 0px !important;
+  }
 
   .q-virtual-scroll__padding {
   }
diff --git a/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue b/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
index d5a8f9878e..ba9614ef5d 100644
--- a/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
+++ b/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
@@ -20,16 +20,50 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <q-page class="q-pa-none "  :class="store.state.theme === 'dark' ? 'dark-theme' : 'light-theme'" style="min-height: inherit">
+    <div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3 tw-full-width"
+    :class="store.state.theme =='dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+    >
+
+      <div
+          class="q-table__title full-width"
+          data-test="service-accounts-title-text"
+        >
+          {{ t("serviceAccounts.header") }}
+        </div>
+        <div class="full-width tw-flex tw-justify-end">
+          <q-input
+            v-model="filterQuery"
+            filled
+            dense
+            class="col-6"
+            :placeholder="t('serviceAccounts.search')"
+          >
+            <template #prepend>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+            <q-btn
+              class="q-ml-md text-bold no-border"
+              padding="sm lg"
+              style="float: right; cursor: pointer !important"
+              color="secondary"
+              no-caps
+              dense
+              :label="t(`serviceAccounts.add`)"
+              @click="addRoutePush({})"
+            />
+        </div>
+    </div>
     <q-table
       ref="qTable"
-      class="service-accounts-table"
+      class="o2-quasar-table"
+      :class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
       :rows="serviceAccountsState.service_accounts_users"
       :columns="columns"
       row-key="id"
       :pagination="pagination"
       :filter="filterQuery"
       :filter-method="filterData"
-      dense
     >
       <template #no-data>
         <NoData></NoData>
@@ -126,38 +160,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </q-td>
       </template>
       <template #top="scope">
-        <div
-          class="q-table__title full-width q-mb-md"
-          data-test="service-accounts-title-text"
-        >
-          {{ t("serviceAccounts.header") }}
-        </div>
-        <div class="full-width row q-mb-xs items-start">
-          <q-input
-            v-model="filterQuery"
-            filled
-            dense
-            class="col-6 q-pr-sm"
-            :placeholder="t('serviceAccounts.search')"
-          >
-            <template #prepend>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <div class="col-6">
-            <q-btn
-              class="q-ml-md q-mb-xs text-bold no-border"
-              style="float: right; cursor: pointer !important"
-              padding="sm lg"
-              color="secondary"
-              no-caps
-              dense
-              :label="t(`serviceAccounts.add`)"
-              @click="addRoutePush({})"
-            />
-          </div>
-        </div>
         <QTablePagination
           :scope="scope"
           :pageTitle="t('serviceAccounts.header')"
@@ -177,6 +179,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @update:changeRecordPerPage="changePagination"
         />
       </template>
+
+      <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- Rendering the rest of the columns -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
     </q-table>
 
     <q-dialog
@@ -367,6 +384,7 @@ export default defineComponent({
         label: "#",
         field: "#",
         align: "left",
+        style: "width: 67px;",
       },
       {
         name: "email",
@@ -381,6 +399,7 @@ export default defineComponent({
         label: t("user.description"),
         align: "left",
         sortable: true,
+        style: "width: 150px;",
       },
       {
         name: "token",
@@ -388,6 +407,7 @@ export default defineComponent({
         label: "token",
         align: "left",
         sortable: false,
+        style: "width: 230px;", //because token might take more space for displaying the token , eye button and copy button
       },
       {
         name: "actions",
@@ -395,6 +415,7 @@ export default defineComponent({
         label: t("user.actions"),
         align: "center",
         sortable: false,
+        classes: "actions-column",
       },
     ]);
     const userEmail: any = ref("");
@@ -769,34 +790,6 @@ export default defineComponent({
 
 
 <style lang="scss" scoped>
-
-.service-accounts-table {
-
-  th:last-child,
-  td:last-child {
-    position: sticky;
-    right: 0;
-    z-index: 1;
-    background: #ffffff;
-    box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
-  }
-}
-
-.dark-theme {
-  th:last-child,
-  td:last-child {
-    background: var(--q-dark);
-    box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1);
-  }
-}
-
-.light-theme {
-  th:last-child,
-  td:last-child {
-    background: #ffffff;
-  }
-}
-
 .disabled-opacity {
   opacity: 0.1 !important;
 }
diff --git a/web/src/components/iam/users/User.vue b/web/src/components/iam/users/User.vue
index f0feb3dffa..404fa2287e 100644
--- a/web/src/components/iam/users/User.vue
+++ b/web/src/components/iam/users/User.vue
@@ -18,6 +18,48 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
   <q-page class="q-pa-none" style="min-height: inherit">
+    <div class="tw-flex tw-flex-row tw-justify-between tw-items-center tw-px-4 tw-py-3"
+    :class="store.state.theme == 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+    >
+      <div
+          class="q-table__title full-width"
+          data-test="user-title-text"
+        >
+          {{ t("iam.basicUsers") }}
+        </div>
+        <div class="full-width tw-flex tw-justify-end">
+          <q-input
+            v-model="filterQuery"
+            filled
+            dense
+            class="col-6"
+            :placeholder="t('user.search')"
+          >
+            <template #prepend>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+          <div class="col-6" v-if="config.isCloud == 'true'">
+            <member-invitation
+              :key="currentUserRole"
+              v-model:currentrole="currentUserRole"
+            />
+          </div>
+          <div class="col-6" v-else>
+            <q-btn
+              class="q-ml-md text-bold no-border"
+              style="float: right; cursor: pointer !important"
+              padding="sm lg"
+              color="secondary"
+              no-caps
+              dense
+              :label="t(`user.add`)"
+              @click="addRoutePush({})"
+              data-test="add-basic-user"
+            />
+          </div>
+        </div>
+    </div>
     <q-table
       ref="qTable"
       :rows="usersState.users"
@@ -26,6 +68,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :pagination="pagination"
       :filter="filterQuery"
       :filter-method="filterData"
+      class="o2-quasar-table"
+      :class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
     >
       <template #no-data>
         <NoData></NoData>
@@ -33,7 +77,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template v-slot:header="props">
         <q-tr :props="props">
           <q-th v-for="col in props.cols"
-:key="col.name" :props="props">
+          :class="col.classes"
+          :key="col.name" :props="props">
             <span>{{ col.label }}</span>
           </q-th>
         </q-tr>
@@ -71,44 +116,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </q-td>
       </template>
       <template #top="scope">
-        <div
-          class="q-table__title full-width q-mb-md"
-          data-test="user-title-text"
-        >
-          {{ t("iam.basicUsers") }}
-        </div>
-        <div class="full-width row q-mb-xs items-start">
-          <q-input
-            v-model="filterQuery"
-            filled
-            dense
-            class="col-6 q-pr-sm"
-            :placeholder="t('user.search')"
-          >
-            <template #prepend>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <div class="col-6" v-if="config.isCloud == 'true'">
-            <member-invitation
-              :key="currentUserRole"
-              v-model:currentrole="currentUserRole"
-            />
-          </div>
-          <div class="col-6" v-else>
-            <q-btn
-              class="q-ml-md q-mb-xs text-bold no-border"
-              style="float: right; cursor: pointer !important"
-              padding="sm lg"
-              color="secondary"
-              no-caps
-              dense
-              :label="t(`user.add`)"
-              @click="addRoutePush({})"
-              data-test="add-basic-user"
-            />
-          </div>
-        </div>
         <QTablePagination
           :scope="scope"
           :pageTitle="t('iam.basicUsers')"
@@ -292,6 +299,7 @@ export default defineComponent({
         label: "#",
         field: "#",
         align: "left",
+        style: "width: 67px",
       },
       {
         name: "email",
@@ -306,6 +314,7 @@ export default defineComponent({
         label: t("user.firstName"),
         align: "left",
         sortable: true,
+        style: "width: 150px",
       },
       {
         name: "last_name",
@@ -313,6 +322,7 @@ export default defineComponent({
         label: t("user.lastName"),
         align: "left",
         sortable: true,
+        style: "width: 150px",
       },
       {
         name: "role",
@@ -320,12 +330,14 @@ export default defineComponent({
         label: t("user.role"),
         align: "left",
         sortable: true,
+        style: "width: 150px",
       },
       {
         name: "actions",
         field: "actions",
         label: t("user.actions"),
         align: "left",
+        classes: 'actions-column'
       },
     ]);
     const userEmail: any = ref("");
@@ -893,12 +905,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.q-table {
-  &__top {
-    border-bottom: 1px solid $border-color;
-    justify-content: flex-end;
-  }
-}
 
 .iconHoverBtn {
   cursor: pointer !important;
diff --git a/web/src/components/pipeline/PipelinesList.vue b/web/src/components/pipeline/PipelinesList.vue
index cc4a53529f..46aa813af6 100644
--- a/web/src/components/pipeline/PipelinesList.vue
+++ b/web/src/components/pipeline/PipelinesList.vue
@@ -24,6 +24,56 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       "
       class="full-wdith pipeline-list-table"
     >
+    <div class="flex justify-between full-width tw-py-3 tw-px-4 items-center"
+    :class="store.state.theme === 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+    >
+      <div class="q-table__title" data-test="pipeline-list-title">
+            {{ t("pipeline.header") }}
+          </div>
+          <div class="tw-flex tw-items-centertabs q-ml-auto">
+            <div class="app-tabs-container q-mr-md">
+              <app-tabs
+              data-test="pipeline-list-tabs"
+              class="tabs-selection-container"
+              :class="store.state.theme === 'dark' ? 'tabs-selection-container-dark' : 'tabs-selection-container-light'"
+              :tabs="tabs"
+              v-model:active-tab="activeTab"
+              @update:active-tab="updateActiveTab"
+            />
+            </div>
+
+            <q-input
+              data-test="pipeline-list-search-input"
+              v-model="filterQuery"
+              borderless
+              filled
+              dense
+              class="no-border"
+              :placeholder="t('pipeline.search')"
+            >
+              <template #prepend>
+                <q-icon name="search" class="cursor-pointer" />
+              </template>
+            </q-input>
+            <q-btn
+              data-test="pipeline-list-import-pipeline-btn"
+              class="q-ml-md text-bold"
+              padding="sm lg"
+              no-caps
+              :label="t(`pipeline.import`)"
+              @click="routeToImportPipeline"
+            />
+            <q-btn
+              data-test="pipeline-list-add-pipeline-btn"
+              class="q-ml-md text-bold no-border"
+              padding="sm lg"
+              color="secondary"
+              no-caps
+              :label="t(`pipeline.addPipeline`)"
+              @click="routeToAddPipeline"
+            />
+          </div>
+    </div>
       <q-table
         data-test="pipeline-list-table"
         ref="qTableRef"
@@ -34,9 +84,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :filter="filterQuery"
         :filter-method="filterData"
         style="width: 100%"
-        dense
         selection="multiple"
         v-model:selected="selectedPipelines"
+        class="o2-quasar-table"
+        :class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
       >
         <template v-slot:body="props">
           <q-tr
@@ -170,9 +221,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <template #no-data>
           <no-data />
         </template>
-        <template #header-selection="scope">
-          <q-checkbox v-model="scope.selected" size="sm" color="secondary" />
-        </template>
         <template v-slot:body-selection="scope">
           <q-checkbox v-model="scope.selected" size="sm" color="secondary" />
         </template>
@@ -188,49 +236,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </q-td>
         </template>
         <template #top="scope">
-          <div class="q-table__title" data-test="pipeline-list-title">
-            {{ t("pipeline.header") }}
-          </div>
-          <div class="tw-flex tw-items-center report-list-tabs q-ml-auto">
-            <app-tabs
-              data-test="pipeline-list-tabs"
-              class="q-mr-md"
-              :tabs="tabs"
-              v-model:active-tab="activeTab"
-              @update:active-tab="updateActiveTab"
-            />
-            <q-input
-              data-test="pipeline-list-search-input"
-              v-model="filterQuery"
-              borderless
-              filled
-              dense
-              class="q-mb-xs no-border"
-              :placeholder="t('pipeline.search')"
-            >
-              <template #prepend>
-                <q-icon name="search" class="cursor-pointer" />
-              </template>
-            </q-input>
-            <q-btn
-              data-test="pipeline-list-import-pipeline-btn"
-              class="q-ml-md q-mb-xs text-bold"
-              padding="sm lg"
-              no-caps
-              :label="t(`pipeline.import`)"
-              @click="routeToImportPipeline"
-            />
-            <q-btn
-              data-test="pipeline-list-add-pipeline-btn"
-              class="q-ml-md q-mb-xs text-bold no-border"
-              padding="sm lg"
-              color="secondary"
-              no-caps
-              :label="t(`pipeline.addPipeline`)"
-              @click="routeToAddPipeline"
-            />
-          </div>
-
           <q-table-pagination
             :scope="scope"
             :pageTitle="t('pipeline.header')"
@@ -261,6 +266,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </div>
         </template>
+
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- Adding this block to render the select-all checkbox -->
+              <q-th auto-width>
+                <q-checkbox
+                  v-model="props.selected"
+                  size="sm"
+                  color="secondary"
+                  @update:model-value="(val) => props.selected = val"
+                />
+              </q-th>
+
+              <!-- Rendering the rest of the columns -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
       </q-table>
     </div>
   </div>
@@ -487,7 +517,7 @@ const editingPipeline = ref<any | null>(null);
 
 const getColumnsForActiveTab = (tab: any) => {
   let realTimeColumns = [
-    { name: "#", label: "#", field: "#", align: "left" },
+    { name: "#", label: "#", field: "#", align: "left", style: "width: 67px;" },
 
     {
       name: "name",
@@ -513,7 +543,7 @@ const getColumnsForActiveTab = (tab: any) => {
   ];
 
   let scheduledColumns = [
-    { name: "#", label: "#", field: "#", align: "left" },
+    { name: "#", label: "#", field: "#", align: "left", style: "width: 67px;" },
 
     {
       name: "name",
@@ -567,6 +597,7 @@ const getColumnsForActiveTab = (tab: any) => {
     label: t("alerts.actions"),
     align: "center",
     sortable: false,
+    classes: "actions-column",
   };
   if (tab === "all") {
     const allColumns = [...scheduledColumns, actionsColumn];
@@ -845,33 +876,6 @@ const exportBulkPipelines = () => {
 };
 </script>
 <style lang="scss" scoped>
-.pipeline-list-table {
-  th:last-child,
-  td:last-child {
-    position: sticky;
-    right: 0;
-    z-index: 1;
-    box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
-    width: 100px;
-  }
-}
-
-.dark-theme {
-  th:last-child,
-  td:last-child {
-    background: var(--q-dark);
-    box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1);
-    width: 100px;
-  }
-}
-
-.light-theme {
-  th:last-child,
-  td:last-child {
-    background: #ffffff;
-    width: 100px;
-  }
-}
 .dark-mode {
   background-color: $dark-page;
 
@@ -894,31 +898,6 @@ const exportBulkPipelines = () => {
     }
   }
 }
-.report-list-tabs {
-  height: fit-content;
-
-  :deep(.rum-tabs) {
-    border: 1px solid #eaeaea;
-    height: fit-content;
-    border-radius: 4px;
-    overflow: hidden;
-  }
-
-  :deep(.rum-tab) {
-    width: fit-content !important;
-    padding: 4px 12px !important;
-    border: none !important;
-
-    &:hover {
-      background: #eaeaea;
-    }
-
-    &.active {
-      background: #5960b2;
-      color: #ffffff !important;
-    }
-  }
-}
 
 .expanded-content {
   padding: 0 3rem;
@@ -942,20 +921,6 @@ const exportBulkPipelines = () => {
   border-left: #7a54a2 3px solid;
 }
 
-:deep(.pipeline-list-table thead th:last-child) {
-  position: sticky;
-  right: 0;
-  z-index: 1;
-  box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
-  width: 100px;
-}
-
-:deep(.dark-theme.pipeline-list-table thead th:last-child) {
-  background: var(--q-dark);
-}
-:deep(.light-theme.pipeline-list-table thead th:last-child) {
-  background: #ffffff;
-}
 .bottom-btn {
   display: flex;
   width: 100%;
diff --git a/web/src/components/reports/ReportList.vue b/web/src/components/reports/ReportList.vue
index feebd505d1..3d10dd8907 100644
--- a/web/src/components/reports/ReportList.vue
+++ b/web/src/components/reports/ReportList.vue
@@ -21,7 +21,51 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     style="height: calc(100vh - 57px)"
     :class="store.state.theme === 'dark' ? 'dark-mode' : ''"
   >
-    <div class="full-width">
+  <div class="tw-flex tw-justify-between tw-items-center tw-w-full tw-py-3 tw-px-4"
+    :class="store.state.theme === 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+    >
+      <div class="q-table__title" data-test="report-list-title">
+        {{ t("reports.header") }}
+      </div>
+
+      <div class="tw-flex tw-items-center">
+        <div class="app-tabs-container q-mr-md">
+        <app-tabs
+          class="tabs-selection-container"
+          :tabs="tabs"
+          :class="store.state.theme === 'dark' ? 'tabs-selection-container-dark' : 'tabs-selection-container-light'"
+          v-model:active-tab="activeTab"
+          @update:active-tab="filterReports"
+        />
+        </div>
+        <q-input
+          data-test="report-list-search-input"
+          v-model="filterQuery"
+          borderless
+          filled
+          dense
+          class="q-ml-auto no-border"
+          :placeholder="t('reports.search')"
+        >
+          <template #prepend>
+            <q-icon name="search" class="cursor-pointer" />
+          </template>
+        </q-input>
+        <q-btn
+          data-test="report-list-add-report-btn"
+          class="q-ml-md text-bold no-border"
+          padding="sm lg"
+          color="secondary"
+          no-caps
+          :label="t(`reports.add`)"
+          @click="createNewReport"
+        />
+      </div>
+    </div>
+    <div class="full-width o2-quasar-table"
+    style="height: calc(100vh - 112px) ; overflow-y: auto;"
+    :class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
+    >
       <q-table
         data-test="report-list-table"
         ref="reportListTableRef"
@@ -105,43 +149,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
 
         <template #top="scope">
-          <div class="tw-flex tw-justify-between tw-w-full">
-            <div class="q-table__title" data-test="report-list-title">
-              {{ t("reports.header") }}
-            </div>
-
-            <div class="tw-flex tw-items-center report-list-tabs">
-              <app-tabs
-                class="q-mr-md"
-                :tabs="tabs"
-                v-model:active-tab="activeTab"
-                @update:active-tab="filterReports"
-              />
-              <q-input
-                data-test="report-list-search-input"
-                v-model="filterQuery"
-                borderless
-                filled
-                dense
-                class="q-ml-auto q-mb-xs no-border"
-                :placeholder="t('reports.search')"
-              >
-                <template #prepend>
-                  <q-icon name="search" class="cursor-pointer" />
-                </template>
-              </q-input>
-              <q-btn
-                data-test="report-list-add-report-btn"
-                class="q-ml-md q-mb-xs text-bold no-border"
-                padding="sm lg"
-                color="secondary"
-                no-caps
-                :label="t(`reports.add`)"
-                @click="createNewReport"
-              />
-            </div>
-          </div>
-
           <QTablePagination
             :scope="scope"
             :pageTitle="t('reports.header')"
@@ -161,6 +168,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:changeRecordPerPage="changePagination"
           />
         </template>
+
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- Rendering the of the columns -->
+               <!-- here we can add the classes class so that the head will be sticky -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
       </q-table>
     </div>
 
@@ -258,6 +281,7 @@ const columns: any = ref<QTableProps["columns"]>([
     label: "#",
     field: "#",
     align: "left",
+    style: "width: 67px",
   },
   {
     name: "name",
@@ -272,6 +296,7 @@ const columns: any = ref<QTableProps["columns"]>([
     label: t("alerts.owner"),
     align: "center",
     sortable: true,
+    style: "width: 150px",
   },
   {
     name: "description",
@@ -279,6 +304,7 @@ const columns: any = ref<QTableProps["columns"]>([
     label: t("alerts.description"),
     align: "center",
     sortable: false,
+    style: "width: 300px",
   },
   {
     name: "last_triggered_at",
@@ -286,14 +312,15 @@ const columns: any = ref<QTableProps["columns"]>([
     label: t("alerts.lastTriggered"),
     align: "left",
     sortable: true,
+    style: "width: 150px",
   },
   {
     name: "actions",
     field: "actions",
     label: t("alerts.actions"),
     align: "center",
-    style: "width: 300px",
     sortable: false,
+    classes: "actions-column",
   },
 ]);
 
diff --git a/web/src/components/settings/CipherKeys.vue b/web/src/components/settings/CipherKeys.vue
index c770c24683..4a0a6c8283 100644
--- a/web/src/components/settings/CipherKeys.vue
+++ b/web/src/components/settings/CipherKeys.vue
@@ -16,8 +16,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <!-- eslint-disable vue/x-invalid-end-tag -->
 <template>
-  <q-page class="q-pa-none">
-    <div v-if="!showAddDialog">
+  <q-page class="q-pa-none" style="min-height: inherit;">
+    <div v-if="!showAddDialog" style="height: calc(100vh - 112px); overflow-y: auto;">
+      <div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
+      :class="store.state.theme == 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+      >
+            <div
+              class="col q-table__title items-start"
+              data-test="cipher-keys-list-title"
+            >
+              {{ t("cipherKey.header") }}
+            </div>
+            <div class="col-auto flex">
+              <q-input
+                v-model="filterQuery"
+                filled
+                dense
+                class="q-ml-none"
+                style="width: 400px"
+                :placeholder="t('cipherKey.search')"
+                clearable
+              >
+                <template #prepend>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+              <q-btn
+                class="text-bold no-border q-ml-md"
+                padding="sm lg"
+                color="secondary"
+                no-caps
+                dense
+                :label="t(`cipherKey.add`)"
+                @click="addCipherKey"
+              />
+            </div>
+          </div>
       <q-table
         ref="qTable"
         :rows="tabledata"
@@ -26,7 +60,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :pagination="pagination"
         :filter="filterQuery"
         :filter-method="filterData"
-        :loading="loading"
+        class="o2-quasar-table"
+        :class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
       >
         <template #no-data><NoData /></template>
         <template v-slot:body-cell-actions="props">
@@ -58,41 +93,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </q-td>
         </template>
         <template #top="scope">
-          <div class="row full-width">
-            <div
-              class="col q-table__title items-start"
-              data-test="cipher-keys-list-title"
-            >
-              {{ t("cipherKey.header") }}
-            </div>
-            <div class="col-auto flex">
-              <q-input
-                v-model="filterQuery"
-                filled
-                dense
-                class="q-ml-none q-mb-xs"
-                style="width: 400px"
-                :placeholder="t('cipherKey.search')"
-                clearable
-              >
-                <template #prepend>
-                  <q-icon name="search" />
-                </template>
-              </q-input>
-              <q-btn
-                class="q-mb-xs text-bold no-border q-ml-md"
-                padding="sm lg"
-                color="secondary"
-                no-caps
-                dense
-                :label="t(`cipherKey.add`)"
-                @click="addCipherKey"
-              />
-            </div>
-          </div>
           <div class="row full-width">
             <QTablePagination
-              v-if="resultTotal > 0"
               :scope="scope"
               :pageTitle="t('cipherKey.header')"
               :resultTotal="resultTotal"
@@ -113,6 +115,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:changeRecordPerPage="changePagination"
           />
         </template>
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- Render the table headers -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
       </q-table>
     </div>
     <div v-else>
@@ -168,6 +184,7 @@ export default defineComponent({
         label: "#",
         field: "#",
         align: "left",
+        style: "width: 67px",
       },
       {
         name: "name",
@@ -182,6 +199,7 @@ export default defineComponent({
         label: t("cipherKey.storeType"),
         align: "left",
         sortable: true,
+        style: "width: 150px",
       },
       {
         name: "mechanism_type",
@@ -189,6 +207,7 @@ export default defineComponent({
         label: t("cipherKey.mechanismType"),
         align: "left",
         sortable: true,
+        style: "width: 150px",
       },
       {
         name: "actions",
@@ -196,6 +215,7 @@ export default defineComponent({
         label: t("cipherKey.actions"),
         align: "left",
         sortable: false,
+        classes:'actions-column'
       },
     ]);
     const perPageOptions = [
diff --git a/web/src/components/settings/index.vue b/web/src/components/settings/index.vue
index bf30c3f7c8..d2ea366116 100644
--- a/web/src/components/settings/index.vue
+++ b/web/src/components/settings/index.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/x-invalid-end-tag -->
 <template>
   <q-page class="management-page">
-    <div class="head q-table__title q-mx-md q-my-sm">
+    <div class="head q-table__title q-mx-md q-py-sm">
       {{ t("settings.header") }}
     </div>
     <q-separator class="separator" />
@@ -165,7 +165,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <template v-slot:after>
         <div
-      style="position: absolute;  top: -5px; left: -16px; z-index: 90; "
+      style="position: absolute;  top: -5px; left: -16px; z-index: 1200; "
     >
       <!-- Place the content you want in the middle here -->
       <q-btn
diff --git a/web/src/styles/app.scss b/web/src/styles/app.scss
index 3bfacbc82e..17c6caa1e0 100644
--- a/web/src/styles/app.scss
+++ b/web/src/styles/app.scss
@@ -172,4 +172,190 @@
     border: 1px solid #454F5B;
     background-color: #212121;
   } 
-}
\ No newline at end of file
+}
+// this is the default table style for all tables in the app
+//to apply this style to a table , we need to add a class o2-quasar-table to the table
+//add if we want to apply dark theme to the table , we need to add a class dark-o2-quasar-table to the table
+//add if we want to apply light theme to the table , we need to add a class light-o2-quasar-table to the table
+//if there are actions in the table , we need to add a class actions-column to the last column
+
+.o2-quasar-table{
+  th,td {
+    padding: 0px 16px !important;
+    height: 36px !important;
+  };
+
+
+  th:last-child.actions-column,
+  td:last-child.actions-column {
+    //the fixed width as we have moved some actions to the menu so lot of space is occupied by actions section so remvoed that
+    position: sticky;
+    right: 0;
+    z-index: 1;
+    background: #ffffff;
+    box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
+  }
+}
+//here we have dark theme styling for the table
+//`. we are changing the background color of the actions column
+.o2-quasar-table-dark{
+  th:last-child.actions-column,
+  td:last-child.actions-column {
+    background: var(--q-dark);
+    box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1);
+    width: 150px;
+  }
+}
+
+.o2-quasar-table-light{
+  th:last-child.actions-column,
+  td:last-child.actions-column {
+    background: #ffffff;
+    width: 150px;
+    box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
+  }
+}
+//this is for in some of pages we are having a header for eg: pipelines ,functions ,enrichments listing pages
+//there to maintain consistency of the page name and add buttons to be at the top while scrolling the table 
+//we need to have this because here it is a embededded in q-splitter
+.o2-table-header-dark{
+  background-color: #181A1B;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.o2-table-header-light{
+  background-color: #ffffff;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+
+//this is used to target the table in the app-table component internally it uses q-table component
+//but due to virtual scroll the classes are different so we need to target the classes differently
+//here we have q-virtual-scroll__content and q-table classes to target td and th respectively
+//we have also added the actions-column class to the last column of the table
+//we have also added the o2-quasar-app-table-dark and o2-quasar-app-table-light classes to the table to target the dark and light theme for actions column
+//we have also added the o2-quasar-app-table-dark and o2-quasar-app-table-light classes to the table to target the dark and light theme for actions column
+.o2-quasar-app-table{
+  .q-virtual-scroll__content{
+    th,td{
+      padding: 0px 16px !important;
+      height: 36px !important;
+    }
+    td:last-child.actions-column {
+      //the fixed width as we have moved some actions to the menu so lot of space is occupied by actions section so remvoed that
+      position: sticky;
+      right: 0;
+      z-index: 1;
+      width: 150px !important;
+    }
+  }
+  .q-table{
+    thead{
+      th:last-child.actions-column{
+        position: sticky;
+        right: 0;
+        z-index: 1;
+      }
+    }
+  }
+}
+.o2-quasar-app-table-light{
+  .q-virtual-scroll__content{
+    td:last-child.actions-column {
+      background: #ffffff !important;
+      box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1) !important;
+      width: 150px !important;
+    }
+  }
+  .q-table{
+    thead{
+      th:last-child.actions-column{
+        background: #ffffff !important;
+        box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1) !important;
+        width: 150px !important;
+      }
+    }
+  }
+}
+
+.o2-quasar-app-table-dark{
+  .q-virtual-scroll__content{
+    td:last-child.actions-column {
+      background: var(--q-dark) !important;
+      box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1) !important;
+      width: 150px !important;
+    }
+  }
+  .q-table{
+    thead{
+      th:last-child.actions-column{
+        background: var(--q-dark) !important;
+        box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1) !important;
+        width: 150px !important;
+      }
+    }
+  }
+}
+//this is used to add a border to the tabs container 
+//so to make this work just introduce a new div around the app-tabs component and add the class app-tabs-container to it
+//and then add the class tabs-selection-container-dark or tabs-selection-container-light to the app-tabs component
+.app-tabs-container{
+  border: 1px solid #cacaca;
+  padding: 4px;
+  border-radius: 2px;
+}
+
+.tabs-selection-container-dark{
+  border: none !important;
+  border-radius: none !important;
+  .rum-tab{
+    border-radius: 4px !important;
+    height: 30px !important;
+    margin: 0 2px !important;
+    padding: 4px 12px !important;
+    border-bottom: none !important;
+    width: auto !important;
+    white-space: normal !important;
+  }
+  .active{
+    background-color: $primary !important;
+    color: white !important;
+    border: 1px solid #cacaca !important;
+    border-bottom: 1px solid #cacaca !important;
+  }
+  .rum-tab:hover{
+    background-color: #373A3B !important;
+  }
+  .rum-tab.active:hover{
+    background-color: $primary !important;
+  }
+}
+
+.tabs-selection-container-light{
+  border: none !important;
+  border-radius: none !important;
+  .rum-tab{
+    border-radius: 4px !important;
+    height: 30px !important;
+    margin: 0 2px !important;
+    padding: 4px 12px !important;
+    border-bottom: none !important;
+    width: auto !important;
+    white-space: normal !important;
+  }
+  .rum-tab.active{
+    background-color: $primary !important;
+    color: white !important;
+    border: 1px solid #cacaca !important;
+  }
+  .rum-tab:hover{
+    background-color: #f0f0f0 !important;
+  }
+  .rum-tab.active:hover{
+    background-color: $primary !important;
+  }
+}
diff --git a/web/src/views/Functions.vue b/web/src/views/Functions.vue
index 070966676c..6d6237da25 100644
--- a/web/src/views/Functions.vue
+++ b/web/src/views/Functions.vue
@@ -91,7 +91,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
       <template v-slot:after>
         <div
-          class="tw-overflow-auto q-mx-sm q-my-sm"
+          class="tw-overflow-auto q-mx-sm"
           style="height: calc(100vh - 57px)"
         >
           <!-- :templates="templates"
diff --git a/web/src/views/LogStream.vue b/web/src/views/LogStream.vue
index c8dab906d4..52ce60009b 100644
--- a/web/src/views/LogStream.vue
+++ b/web/src/views/LogStream.vue
@@ -18,9 +18,84 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
   <q-page class="q-pa-none" style="min-height: inherit">
+    <div style="height: calc(100vh - 57px); overflow-y: auto;" >
+    <div class="flex items-center justify-between tw-py-3 tw-px-4"
+    :class="store.state.theme === 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
+    >
+      <div class="q-table__title" data-test="log-stream-title-text">
+        {{ t("logStream.header") }}
+      </div>
+      <div class="flex items-start">
+        <div class="flex justify-between items-end q-px-md">
+          <div
+            style="
+              border: 1px solid #cacaca;
+              padding: 4px;
+              border-radius: 2px;
+            "
+          >
+            <template
+              v-for="visual in streamFilterValues"
+              :key="visual.value"
+            >
+              <q-btn
+                :color="
+                  visual.value === selectedStreamType ? 'primary' : ''
+                "
+                :flat="visual.value === selectedStreamType ? false : true"
+                dense
+                emit-value
+                no-caps
+                class="visual-selection-btn"
+                style="height: 30px; margin: 0 2px; padding: 4px 12px"
+                @click="onChangeStreamFilter(visual.value)"
+              >
+                {{ visual.label }}</q-btn
+              >
+            </template>
+          </div>
+        </div>
+        <div data-test="streams-search-stream-input">
+          <q-input
+            v-model="filterQuery"
+            borderless
+            filled
+            dense
+            class="q-ml-auto no-border"
+            :placeholder="t('logStream.search')"
+            debounce="300"
+          >
+            <template #prepend>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </div>
+        <q-btn
+          data-test="log-stream-refresh-stats-btn"
+          class="q-ml-md text-bold no-border"
+          padding="sm lg"
+          color="secondary"
+          no-caps
+          :label="t(`logStream.refreshStats`)"
+          @click="getLogStream(true)"
+        />
+        <q-btn
+          v-if="isSchemaUDSEnabled"
+          data-test="log-stream-add-stream-btn"
+          class="q-ml-md text-bold no-border"
+          padding="sm lg"
+          color="secondary"
+          no-caps
+          :label="t(`logStream.add`)"
+          @click="addStream"
+        />
+      </div>
+    </div>
+
     <q-table
       data-test="log-stream-table"
-      class="org-streams-table"
+      class="o2-quasar-table"
+      :class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
       ref="qTable"
       v-model:selected="selected"
       :rows="logStream"
@@ -31,7 +106,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-model:pagination="pagination"
       :filter="filterQuery"
       :filter-method="filterData"
-      style="width: 100%"
+      style="width: 100%; "
       :rows-per-page-options="perPageOptions"
       @request="onRequest"
     >
@@ -46,9 +121,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <q-spinner-hourglass color="primary" size="lg" />
         </div>
       </template>
-      <template #header-selection="scope">
-        <q-checkbox v-model="scope.selected" size="sm" color="secondary" />
-      </template>
       <template #body-selection="scope">
         <q-checkbox v-model="scope.selected" size="sm" color="secondary" />
       </template>
@@ -91,129 +163,45 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
 
       <template #top="scope">
-        <div class="flex justify-between items-center full-width">
-          <div class="q-table__title" data-test="log-stream-title-text">
-            {{ t("logStream.header") }}
+        <div class="flex justify-between items-center full-width" style="font-size: 12px">
+          <div class="q-table__separator col text-bold tw-text-[14px]">
+            {{scope.pagination.rowsNumber}} Stream(s)
           </div>
-          <div class="flex items-start">
-            <div class="flex justify-between items-end q-px-md">
-              <div
-                style="
-                  border: 1px solid #cacaca;
-                  padding: 4px;
-                  border-radius: 2px;
-                "
-              >
-                <template
-                  v-for="visual in streamFilterValues"
-                  :key="visual.value"
-                >
-                  <q-btn
-                    :color="
-                      visual.value === selectedStreamType ? 'primary' : ''
-                    "
-                    :flat="visual.value === selectedStreamType ? false : true"
-                    dense
-                    emit-value
-                    no-caps
-                    class="visual-selection-btn"
-                    style="height: 30px; margin: 0 2px; padding: 4px 12px"
-                    @click="onChangeStreamFilter(visual.value)"
-                  >
-                    {{ visual.label }}</q-btn
-                  >
-                </template>
-              </div>
-            </div>
-            <div data-test="streams-search-stream-input">
-              <q-input
-                v-model="filterQuery"
-                borderless
-                filled
-                dense
-                class="q-ml-auto q-mb-xs no-border"
-                :placeholder="t('logStream.search')"
-                debounce="300"
-              >
-                <template #prepend>
-                  <q-icon name="search" />
-                </template>
-              </q-input>
-            </div>
-            <q-btn
-              data-test="log-stream-refresh-stats-btn"
-              class="q-ml-md q-mb-xs text-bold no-border"
-              padding="sm lg"
-              color="secondary"
-              no-caps
-              :label="t(`logStream.refreshStats`)"
-              @click="getLogStream(true)"
-            />
-            <q-btn
-              v-if="isSchemaUDSEnabled"
-              data-test="log-stream-add-stream-btn"
-              class="q-ml-md q-mb-xs text-bold no-border"
-              padding="sm lg"
-              color="secondary"
-              no-caps
-              :label="t(`logStream.add`)"
-              @click="addStream"
-            />
-          </div>
-        </div>
-        <div
-          class="flex justify-between items-center full-width q-mt-sm"
-          style="font-size: 12px"
-        >
-          <div class="q-table__separator col text-bold">
-            {{ scope.pagination.rowsNumber }} Stream(s)
-          </div>
-          <div class="q-table__control" v-if="scope.pagination.rowsNumber > 0">
-            Showing
-            {{ (scope.pagination.page - 1) * scope.pagination.rowsPerPage + 1 }}
-            -
-            {{
-              scope.pagination.page * scope.pagination.rowsPerPage >
-              scope.pagination.rowsNumber
-                ? scope.pagination.rowsNumber
-                : scope.pagination.page * scope.pagination.rowsPerPage
-            }}
-            of {{ scope.pagination.rowsNumber }}
-            <div class="q-btn-group row no-wrap inline q-ml-md">
-              <q-btn
-                icon="chevron_left"
-                color="grey-8"
-                round
-                dense
-                flat
-                size="sm"
-                class="q-px-sm"
-                :disable="scope.isFirstPage"
-                @click="scope.prevPage"
-              />
-              <hr
-                class="q-separator q-separator--vertical"
-                aria-orientation="vertical"
-              />
-              <q-btn
-                icon="chevron_right"
-                color="grey-8"
-                round
-                dense
-                flat
-                size="sm"
-                class="q-px-sm"
-                :disable="scope.isLastPage"
-                @click="scope.nextPage"
-              />
+          <div class="q-table__control tw-font-[600]" v-if="scope.pagination.rowsNumber > 0">
+            Showing {{ ((scope.pagination.page - 1) * scope.pagination.rowsPerPage) + 1 }} - {{((scope.pagination.page * scope.pagination.rowsPerPage) > scope.pagination.rowsNumber) ? scope.pagination.rowsNumber : scope.pagination.page * scope.pagination.rowsPerPage}} of {{scope.pagination.rowsNumber}}
+            <div class=" row no-wrap inline tw-ml-4">
+              <q-btn-group>
+                <q-btn
+                  icon="chevron_left"
+                  :text-color="scope.isFirstPage ? '$light-text2' : '$dark'"
+                  class="pageNav"
+                  color="#FAFBFD"
+                  size="sm"
+                  flat
+                  :disable="scope.isFirstPage"
+                  @click="scope.prevPage"
+                />
+                <q-separator vertical />
+                <q-btn
+                  icon="chevron_right"
+                  :text-color="scope.isLastPage ? '$light-text2' : '$dark'"
+                  class="pageNav"
+                  color="#FAFBFD"
+                  size="sm"
+                  flat
+                  :disable="scope.isLastPage"
+                  @click="scope.nextPage"
+                />
+              </q-btn-group>
             </div>
           </div>
         </div>
       </template>
       <template v-slot:pagination="scope">
-        <q-btn
+        <div class="tw-flex tw-items-center tw-justify-between tw-py-3 tw-px-4">
+          <q-btn
           v-if="selected.length > 0"
-          class="delete-btn absolute-bottom-left q-pl-lg"
+          class="delete-btn absolute-bottom-left q-pl-lg tw-ml-4"
           color="red"
           icon="delete"
           :label="isDeleting ? 'Deleting...' : 'Delete'"
@@ -249,8 +237,36 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @click="scope.nextPage"
           />
         </div>
+        </div>
+
       </template>
-    </q-table>
+      <template v-slot:header="props">
+            <q-tr :props="props">
+              <!-- Adding this block to render the select-all checkbox -->
+              <q-th auto-width>
+                <q-checkbox
+                  v-model="props.selected"
+                  size="sm"
+                  color="secondary"
+                  @update:model-value="props.select"
+                />
+              </q-th>
+
+              <!-- Rendering the rest of the columns -->
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                :class="col.classes"
+                :style="col.style"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
+
+    </q-table> 
+  </div>    
     <q-dialog
       v-model="showIndexSchemaDialog"
       position="right"
@@ -482,6 +498,7 @@ export default defineComponent({
         field: "actions",
         label: t("user.actions"),
         align: "center",
+        classes: "actions-column",
       },
     ]);
 
@@ -968,22 +985,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.org-streams-table {
-  :deep(.q-table th),
-  :deep(.q-table td) {
-    padding: 0px 16px;
-    height: 32px;
-  }
-}
 </style>
 
 <style lang="scss">
-.q-table {
-  &__top {
-    border-bottom: 1px solid $border-color;
-    justify-content: flex-end;
-  }
-}
+
 .bottom-bar {
   display: flex;
   width: 100%;