diff --git a/comps/list/TableList.css b/comps/list/TableList.css
index c16845a..9e5d3ac 100755
--- a/comps/list/TableList.css
+++ b/comps/list/TableList.css
@@ -1,469 +1,3 @@
-@layer rdg {
-  @layer Defaults,
-    FocusSink,
-    CheckboxInput,
-    CheckboxIcon,
-    CheckboxLabel,
-    Cell,
-    HeaderCell,
-    SummaryCell,
-    EditCell,
-    Row,
-    HeaderRow,
-    SummaryRow,
-    GroupedRow,
-    Root;
-}
-
-.mlln6zg7-0-0-beta-42 {
-  @layer rdg.MeasuringCell {
-    contain: strict;
-    grid-row: 1;
-    visibility: hidden;
-  }
-}
-
-
-.cj343x07-0-0-beta-42 {
-  @layer rdg.Cell {
-    /* max-content does not work with size containment
-     * dynamically switching between different containment styles incurs a heavy relayout penalty
-     * Chromium bug: at odd zoom levels or subpixel positioning,
-     * layout/paint/style containment can make cell borders disappear
-     *   https://bugs.chromium.org/p/chromium/issues/detail?id=1326946
-     */
-    position: relative; /* needed for absolute positioning to work */
-    padding-block: 0;
-    padding-inline: 8px;
-    border-inline-end: 1px solid var(--rdg-border-color);
-    border-block-end: 1px solid var(--rdg-border-color);
-    grid-row-start: var(--rdg-grid-row-start);
-    background-color: inherit;
-
-    white-space: nowrap;
-    overflow: clip;
-    text-overflow: ellipsis;
-    outline: none;
-
-    &[aria-selected='true'] {
-      outline: 2px solid var(--rdg-selection-color);
-      outline-offset: -2px;
-    }
-  }
-}
-
-.csofj7r7-0-0-beta-42 {
-  @layer rdg.Cell {
-    position: sticky;
-    /* Should have a higher value than 0 to show up above unfrozen cells */
-    z-index: 1;
-  }
-}
-
-.ch2wcw87-0-0-beta-42 {
-  @layer rdg.Cell {
-    box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
-  }
-}
-
-
-.c1bn88vv7-0-0-beta-42 {
-  @layer rdg.CheckboxLabel {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    inset: 0;
-    margin-inline-end: 1px; /* align checkbox in row group cell */
-  }
-}
-
-.c1qt073l7-0-0-beta-42 {
-  @layer rdg.CheckboxInput {
-    all: unset;
-  }
-}
-
-.cf71kmq7-0-0-beta-42 {
-  @layer rdg.CheckboxIcon {
-    content: '';
-    inline-size: 20px;
-    block-size: 20px;
-    border: 2px solid var(--rdg-border-color);
-    background-color: var(--rdg-background-color);
-
-    .c1qt073l7-0-0-beta-42:checked + & {
-      background-color: var(--rdg-checkbox-color);
-      outline: 4px solid var(--rdg-background-color);
-      outline-offset: -6px;
-    }
-
-    .c1qt073l7-0-0-beta-42:focus + & {
-      border-color: var(--rdg-checkbox-focus-color);
-    }
-  }
-}
-
-.c1lwve4p7-0-0-beta-42 {
-  @layer rdg.CheckboxLabel {
-    cursor: default;
-
-    .cf71kmq7-0-0-beta-42 {
-      border-color: var(--rdg-checkbox-disabled-border-color);
-      background-color: var(--rdg-checkbox-disabled-background-color);
-    }
-  }
-}
-
-
-.g1s9ylgp7-0-0-beta-42 {
-  @layer rdg.GroupCellContent {
-    outline: none;
-  }
-}
-
-.cz54e4y7-0-0-beta-42 {
-  @layer rdg.GroupCellCaret {
-    margin-inline-start: 4px;
-    stroke: currentColor;
-    stroke-width: 1.5px;
-    fill: transparent;
-    vertical-align: middle;
-
-    > path {
-      transition: d 0.1s;
-    }
-  }
-}
-
-
-.c1w9bbhr7-0-0-beta-42 {
-  @layer rdg.DragHandle {
-    --rdg-drag-handle-size: 8px;
-    z-index: 0;
-    cursor: move;
-    inline-size: var(--rdg-drag-handle-size);
-    block-size: var(--rdg-drag-handle-size);
-    background-color: var(--rdg-selection-color);
-    place-self: end;
-
-    &:hover {
-      --rdg-drag-handle-size: 16px;
-      border: 2px solid var(--rdg-selection-color);
-      background-color: var(--rdg-background-color);
-    }
-  }
-}
-
-.c1creorc7-0-0-beta-42 {
-  @layer rdg.DragHandle {
-    z-index: 1;
-    position: sticky;
-  }
-}
-
-
-.cis5rrm7-0-0-beta-42 {
-  @layer rdg.EditCell {
-    padding: 0;
-  }
-}
-
-
-.h44jtk67-0-0-beta-42 {
-  @layer rdg.SortableHeaderCell {
-    display: flex;
-  }
-}
-
-.hcgkhxz7-0-0-beta-42 {
-  @layer rdg.SortableHeaderCellName {
-    flex-grow: 1;
-    overflow: clip;
-    text-overflow: ellipsis;
-  }
-}
-
-
-.c6l2wv17-0-0-beta-42 {
-  @layer rdg.HeaderCell {
-    cursor: pointer;
-  }
-}
-
-.c1kqdw7y7-0-0-beta-42 {
-  @layer rdg.HeaderCell {
-    touch-action: none;
-  }
-}
-
-.r1y6ywlx7-0-0-beta-42 {
-  @layer rdg.HeaderCell {
-    cursor: col-resize;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    inset-block-end: 0;
-    inline-size: 10px;
-  }
-}
-
-.c1bezg5o7-0-0-beta-42 {
-  opacity: 0.5;
-}
-
-.c1vc96037-0-0-beta-42 {
-  background-color: var(--rdg-header-draggable-background-color);
-}
-
-
-.r1upfr807-0-0-beta-42 {
-  @layer rdg.Row {
-    display: contents;
-    line-height: var(--rdg-row-height);
-    background-color: var(--rdg-background-color);
-
-    &:hover {
-      background-color: var(--rdg-row-hover-background-color);
-    }
-
-    &[aria-selected='true'] {
-      background-color: var(--rdg-row-selected-background-color);
-
-      &:hover {
-        background-color: var(--rdg-row-selected-hover-background-color);
-      }
-    }
-  }
-}
-
-.r190mhd37-0-0-beta-42 {
-  @layer rdg.FocusSink {
-    outline: 2px solid var(--rdg-selection-color);
-    outline-offset: -2px;
-  }
-}
-
-.r139qu9m7-0-0-beta-42 {
-  @layer rdg.FocusSink {
-    &::before {
-      content: '';
-      display: inline-block;
-      height: 100%;
-      position: sticky;
-      inset-inline-start: 0;
-      border-inline-start: 2px solid var(--rdg-selection-color);
-    }
-  }
-}
-
-
-.h10tskcx7-0-0-beta-42 {
-  @layer rdg.HeaderRow {
-    display: contents;
-    line-height: var(--rdg-header-row-height);
-    background-color: var(--rdg-header-background-color);
-    font-weight: bold;
-
-    & > .cj343x07-0-0-beta-42 {
-      /* Should have a higher value than 1 to show up above regular cells and the focus sink */
-      z-index: 2;
-      position: sticky;
-    }
-
-    & > .csofj7r7-0-0-beta-42 {
-      z-index: 3;
-    }
-  }
-}
-
-
-.c6ra8a37-0-0-beta-42 {
-  @layer rdg.Cell {
-    background-color: #ccccff;
-  }
-}
-
-.cq910m07-0-0-beta-42 {
-  @layer rdg.Cell {
-    background-color: #ccccff;
-
-    &.c6ra8a37-0-0-beta-42 {
-      background-color: #9999ff;
-    }
-  }
-}
-
-
-.a3ejtar7-0-0-beta-42 {
-  @layer rdg.SortIcon {
-    fill: currentColor;
-
-    > path {
-      transition: d 0.1s;
-    }
-  }
-}
-
-
-.rnvodz57-0-0-beta-42 {
-  @layer rdg.Defaults {
-    *,
-    *::before,
-    *::after {
-      box-sizing: inherit;
-    }
-  }
-
-  @layer rdg.Root {
-    --rdg-color: #000;   --rdg-border-color: #ddd;   --rdg-summary-border-color: #aaa;   --rdg-background-color: hsl(0deg 0% 100%);   --rdg-header-background-color: hsl(0deg 0% 97.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 90.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 96%);   --rdg-row-selected-background-color: hsl(207deg 76% 92%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%);   --rdg-checkbox-color: hsl(207deg 100% 29%);   --rdg-checkbox-focus-color: hsl(207deg 100% 69%);   --rdg-checkbox-disabled-border-color: #ccc;   --rdg-checkbox-disabled-background-color: #ddd;
-    --rdg-selection-color: #66afe9;
-    --rdg-font-size: 14px;
-
-    display: grid;
-
-    color-scheme: var(--rdg-color-scheme, light);
-
-    /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
-    /* We set a stacking context so internal elements don't render on top of external elements. */
-    /* size containment is not used as it could break "width: min-content" for example, and the grid would infinitely resize on Chromium browsers */
-    contain: content;
-    content-visibility: auto;
-    block-size: 350px;
-    border: 1px solid var(--rdg-border-color);
-    box-sizing: border-box;
-    overflow: auto;
-    background-color: var(--rdg-background-color);
-    color: var(--rdg-color);
-    font-size: var(--rdg-font-size);
-
-    /* needed on Firefox to fix scrollbars */
-    &::before {
-      content: '';
-      grid-column: 1/-1;
-      grid-row: 1/-1;
-    }
-
-    &.rdg-light {
-      --rdg-color-scheme: light;
-    }
-  }
-}
-
-.vlqv91k7-0-0-beta-42 {
-  @layer rdg.Root {
-    user-select: none;
-
-    & .r1upfr807-0-0-beta-42 {
-      cursor: move;
-    }
-  }
-}
-
-.f1lsfrzw7-0-0-beta-42 {
-  @layer rdg.FocusSink {
-    grid-column: 1/-1;
-    pointer-events: none;
-    /* Should have a higher value than 1 to show up above regular frozen cells */
-    z-index: 1;
-  }
-}
-
-.f1cte0lg7-0-0-beta-42 {
-  @layer rdg.FocusSink {
-    /* Should have a higher value than 3 to show up above header and summary rows */
-    z-index: 3;
-  }
-}
-
-
-.s8wc6fl7-0-0-beta-42 {
-  @layer rdg.SummaryCell {
-    inset-block-start: var(--rdg-summary-row-top);
-    inset-block-end: var(--rdg-summary-row-bottom);
-  }
-}
-
-
-.skuhp557-0-0-beta-42 {
-  @layer rdg.SummaryRow {
-    line-height: var(--rdg-summary-row-height);
-
-    > .cj343x07-0-0-beta-42 {
-      position: sticky;
-    }
-  }
-}
-
-.tf8l5ub7-0-0-beta-42 {
-  @layer rdg.SummaryRow {
-    > .cj343x07-0-0-beta-42 {
-      z-index: 2;
-    }
-
-    > .csofj7r7-0-0-beta-42 {
-      z-index: 3;
-    }
-  }
-}
-
-.tb9ughf7-0-0-beta-42 {
-  @layer rdg.SummaryRow {
-    > .cj343x07-0-0-beta-42 {
-      border-block-end: 2px solid var(--rdg-summary-border-color);
-    }
-  }
-}
-
-.b1yssfnt7-0-0-beta-42 {
-  @layer rdg.SummaryRow {
-    > .cj343x07-0-0-beta-42 {
-      border-block-start: 2px solid var(--rdg-summary-border-color);
-    }
-  }
-}
-
-
-.g1yxluv37-0-0-beta-42 {
-  @layer rdg.GroupedRow {
-    &:not([aria-selected='true']) {
-      background-color: var(--rdg-header-background-color);
-    }
-
-    > .cj343x07-0-0-beta-42:not(:last-child):not(.ch2wcw87-0-0-beta-42) {
-      border-inline-end: none;
-    }
-  }
-}
-
-
-.t7vyx3i7-0-0-beta-42 {
-  @layer rdg.TextEditor {
-    appearance: none;
-
-    box-sizing: border-box;
-    inline-size: 100%;
-    block-size: 100%;
-    padding-block: 0;
-    padding-inline: 6px;
-    border: 2px solid #ccc;
-    vertical-align: top;
-    color: var(--rdg-color);
-    background-color: var(--rdg-background-color);
-
-    font-family: inherit;
-    font-size: var(--rdg-font-size);
-
-    &:focus {
-      border-color: var(--rdg-selection-color);
-      outline: none;
-    }
-
-    &::placeholder {
-      color: #999;
-      opacity: 1;
-    }
-  }
-}
-
+.rdg-dark {
+  --rdg-color-scheme: light !important;
+}
\ No newline at end of file
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index 184601c..5d6b0cc 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -25,7 +25,7 @@ import { Toaster, toast } from "sonner";
 import { filterWhere } from "../filter/parser/filter-where";
 import { getFilter } from "../filter/utils/get-filter";
 import { Skeleton } from "../ui/skeleton";
-import "./TableList.css";
+import "react-data-grid/lib/styles.css";
 import { sortTree } from "./utils/sort-tree";
 import { call_prasi_events } from "../../..";
 
@@ -562,6 +562,7 @@ export const TableList: FC<TableListProp> = ({
           {local.status === "init" ? (
             <DataGrid
               style={{ opacity: 0 }}
+              className="rdg-light"
               columns={[
                 {
                   key: "_",
@@ -590,6 +591,7 @@ export const TableList: FC<TableListProp> = ({
                 onSortColumnsChange={local.sort.on_change}
                 columns={columns}
                 rows={data}
+                className="rdg-light"
                 onScroll={local.paging.scroll}
                 selectedRows={new Set() as ReadonlySet<any>}
                 onSelectedCellChange={() => {}}