diff --git a/ts_web/elements/dees-table.demo.ts b/ts_web/elements/dees-table.demo.ts
index c831546..28be021 100644
--- a/ts_web/elements/dees-table.demo.ts
+++ b/ts_web/elements/dees-table.demo.ts
@@ -1,6 +1,6 @@
 import { type ITableAction } from './dees-table.js';
 import * as plugins from './00plugins.js';
-import { html } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
 
 interface ITableDemoData {
   date: string;
@@ -10,120 +10,423 @@ interface ITableDemoData {
 
 export const demoFunc = () => html`
   <style>
-    .demoWrapper {
-      box-sizing: border-box;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      padding: 20px;
-      background: #000000;
-    }
+    ${css`
+      .demoWrapper {
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        padding: 32px;
+        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 5%)')};
+        overflow-y: auto;
+      }
+      .demo-container {
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+      .demo-section {
+        margin-bottom: 48px;
+      }
+      .demo-title {
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+      .demo-description {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        margin-bottom: 24px;
+      }
+      .theme-toggle {
+        position: fixed;
+        top: 16px;
+        right: 16px;
+        z-index: 1000;
+      }
+    `}
   </style>
   <div class="demoWrapper">
-    <dees-table
-      heading1="Current Account Statement"
-      heading2="Bunq - Payment Account 2 - April 2021"
-      .editableFields="${['description']}"
-      .data=${[
-        {
-          date: '2021-04-01',
-          amount: '2464.65 €',
-          description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
-        },
-        {
-          date: '2021-04-02',
-          amount: '165.65 €',
-          description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
-        },
-        {
-          date: '2021-04-03',
-          amount: '2999,00 €',
-          description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
-        },
-        {
-          date: '2021-04-01',
-          amount: '2464.65 €',
-          description: 'Office-Supplies - STAPLES BREMEN',
-        },
-        {
-          date: '2021-04-01',
-          amount: '2464.65 €',
-          description: 'Office-Supplies - STAPLES BREMEN',
-        },
-      ]}
-      dataName="transactions"
-      .dataActions="${[
-        {
-          name: 'upload',
-          iconName: 'bell',
-          useTableBehaviour: 'upload',
-          type: ['inRow'],
-          actionFunc: async (optionsArg) => {
-            alert(optionsArg.item.amount);
-          },
-        },
-        {
-          name: 'visibility',
-          iconName: 'copy',
-          type: ['inRow'],
-          useTableBehaviour: 'preview',
-          actionFunc: async (itemArg: any) => {},
-        },
-        {
-          name: 'create new',
-          iconName: 'instagram',
-          type: ['header'],
-          useTableBehaviour: 'preview',
-          actionFunc: async (itemArg: any) => {},
-        },
-        {
-          name: 'to gallery',
-          iconName: 'message',
-          type: ['footer'],
-          useTableBehaviour: 'preview',
-          actionFunc: async (itemArg: any) => {},
-        },
-        {
-          name: 'copy',
-          iconName: 'copySolid',
-          type: ['contextmenu', 'inRow'],
-          action: async () => {
-            return null;
-          },
-        },
-        {
-          name: 'edit (from demo)',
-          iconName: 'penToSquare',
-          type: ['contextmenu'],
-          action: async () => {
-            return null;
-          },
-        },
-        {
-          name: 'paste',
-          iconName: 'pasteSolid',
-          type: ['contextmenu'],
-          action: async () => {
-            return null;
-          },
-        },
-        {
-          name: 'preview',
-          type: ['doubleClick', 'contextmenu'],
-          iconName: 'eye',
-          actionFunc: async (itemArg) => {
-            alert(itemArg.item.amount);
-            return null;
-          },
-        }
-      ] as (ITableAction<ITableDemoData>)[] as any}"
-      .displayFunction=${(itemArg) => {
-        return {
-          ...itemArg,
-          onlyDisplayProp: 'onlyDisplay',
-        };
-      }}
-      >This is a slotted Text</dees-table
-    >
+    <dees-button class="theme-toggle" @click=${() => {
+      document.body.classList.toggle('bright');
+      document.body.classList.toggle('dark');
+    }}>Toggle Theme</dees-button>
+    
+    <div class="demo-container">
+      <div class="demo-section">
+        <h2 class="demo-title">Basic Table with Actions</h2>
+        <p class="demo-description">A standard table with row actions, editable fields, and context menu support. Double-click on descriptions to edit. Grid lines are enabled by default.</p>
+        <dees-table
+          heading1="Current Account Statement"
+          heading2="Bunq - Payment Account 2 - April 2021"
+          .editableFields="${['description']}"
+          .data=${[
+            {
+              date: '2021-04-01',
+              amount: '2464.65 €',
+              description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
+            },
+            {
+              date: '2021-04-02',
+              amount: '165.65 €',
+              description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
+            },
+            {
+              date: '2021-04-03',
+              amount: '2999,00 €',
+              description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
+            },
+            {
+              date: '2021-04-01',
+              amount: '2464.65 €',
+              description: 'Office-Supplies - STAPLES BREMEN',
+            },
+            {
+              date: '2021-04-01',
+              amount: '2464.65 €',
+              description: 'Office-Supplies - STAPLES BREMEN',
+            },
+          ]}
+          dataName="transactions"
+          .dataActions="${[
+            {
+              name: 'upload',
+              iconName: 'bell',
+              useTableBehaviour: 'upload',
+              type: ['inRow'],
+              actionFunc: async (optionsArg) => {
+                alert(optionsArg.item.amount);
+              },
+            },
+            {
+              name: 'visibility',
+              iconName: 'copy',
+              type: ['inRow'],
+              useTableBehaviour: 'preview',
+              actionFunc: async (itemArg: any) => {},
+            },
+            {
+              name: 'create new',
+              iconName: 'instagram',
+              type: ['header'],
+              useTableBehaviour: 'preview',
+              actionFunc: async (itemArg: any) => {},
+            },
+            {
+              name: 'to gallery',
+              iconName: 'message',
+              type: ['footer'],
+              useTableBehaviour: 'preview',
+              actionFunc: async (itemArg: any) => {},
+            },
+            {
+              name: 'copy',
+              iconName: 'copySolid',
+              type: ['contextmenu', 'inRow'],
+              action: async () => {
+                return null;
+              },
+            },
+            {
+              name: 'edit (from demo)',
+              iconName: 'penToSquare',
+              type: ['contextmenu'],
+              action: async () => {
+                return null;
+              },
+            },
+            {
+              name: 'paste',
+              iconName: 'pasteSolid',
+              type: ['contextmenu'],
+              action: async () => {
+                return null;
+              },
+            },
+            {
+              name: 'preview',
+              type: ['doubleClick', 'contextmenu'],
+              iconName: 'eye',
+              actionFunc: async (itemArg) => {
+                alert(itemArg.item.amount);
+                return null;
+              },
+            }
+          ] as ITableAction[]}"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Table with Vertical Lines</h2>
+        <p class="demo-description">Enhanced column separation for better data tracking.</p>
+        <dees-table
+          heading1="Product Inventory"
+          heading2="Current stock levels across warehouses"
+          .showVerticalLines=${true}
+          .data=${[
+            {
+              product: 'MacBook Pro 16"',
+              warehouse_a: '45',
+              warehouse_b: '32',
+              warehouse_c: '28',
+              total: '105',
+              status: '✓ In Stock'
+            },
+            {
+              product: 'iPhone 15 Pro',
+              warehouse_a: '120',
+              warehouse_b: '89',
+              warehouse_c: '156',
+              total: '365',
+              status: '✓ In Stock'
+            },
+            {
+              product: 'AirPods Pro',
+              warehouse_a: '0',
+              warehouse_b: '12',
+              warehouse_c: '5',
+              total: '17',
+              status: '⚠ Low Stock'
+            },
+            {
+              product: 'iPad Air',
+              warehouse_a: '23',
+              warehouse_b: '45',
+              warehouse_c: '67',
+              total: '135',
+              status: '✓ In Stock'
+            }
+          ]}
+          dataName="products"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Table with Full Grid</h2>
+        <p class="demo-description">Complete grid lines for maximum readability and structure.</p>
+        <dees-table
+          heading1="Server Monitoring Dashboard"
+          heading2="Real-time metrics across regions"
+          .showGrid=${true}
+          .data=${[
+            {
+              server: 'API-1',
+              region: 'US-East',
+              cpu: '45%',
+              memory: '62%',
+              disk: '78%',
+              latency: '12ms',
+              uptime: '99.9%',
+              status: '🟢 Healthy'
+            },
+            {
+              server: 'API-2',
+              region: 'EU-West',
+              cpu: '38%',
+              memory: '55%',
+              disk: '45%',
+              latency: '25ms',
+              uptime: '99.8%',
+              status: '🟢 Healthy'
+            },
+            {
+              server: 'DB-Master',
+              region: 'US-East',
+              cpu: '72%',
+              memory: '81%',
+              disk: '92%',
+              latency: '8ms',
+              uptime: '100%',
+              status: '🟡 Warning'
+            },
+            {
+              server: 'DB-Replica',
+              region: 'EU-West',
+              cpu: '23%',
+              memory: '34%',
+              disk: '45%',
+              latency: '15ms',
+              uptime: '99.7%',
+              status: '🟢 Healthy'
+            },
+            {
+              server: 'Cache-1',
+              region: 'AP-South',
+              cpu: '89%',
+              memory: '92%',
+              disk: '12%',
+              latency: '120ms',
+              uptime: '98.5%',
+              status: '🔴 Critical'
+            }
+          ]}
+          dataName="servers"
+          .dataActions="${[
+            {
+              name: 'SSH Connect',
+              iconName: 'lucide:terminal',
+              type: ['inRow'],
+              actionFunc: async (optionsArg) => {
+                console.log('Connecting to:', optionsArg.item.server);
+              },
+            },
+            {
+              name: 'View Logs',
+              iconName: 'lucide:file-text',
+              type: ['inRow', 'contextmenu'],
+              actionFunc: async (optionsArg) => {
+                console.log('Viewing logs for:', optionsArg.item.server);
+              },
+            },
+            {
+              name: 'Restart Server',
+              iconName: 'lucide:refresh-cw',
+              type: ['contextmenu'],
+              actionFunc: async (optionsArg) => {
+                console.log('Restarting:', optionsArg.item.server);
+              },
+            }
+          ] as ITableAction[]}"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Table with Horizontal Lines Only</h2>
+        <p class="demo-description">Emphasis on row separation without column dividers.</p>
+        <dees-table
+          heading1="Sales Performance"
+          heading2="Top performers this quarter"
+          .showHorizontalLines=${true}
+          .showVerticalLines=${false}
+          .data=${[
+            {
+              salesperson: 'Emily Johnson',
+              region: 'North America',
+              deals_closed: '42',
+              revenue: '$1.2M',
+              quota_achievement: '128%',
+              rating: '⭐⭐⭐⭐⭐'
+            },
+            {
+              salesperson: 'Michael Chen',
+              region: 'Asia Pacific',
+              deals_closed: '38',
+              revenue: '$980K',
+              quota_achievement: '115%',
+              rating: '⭐⭐⭐⭐⭐'
+            },
+            {
+              salesperson: 'Sarah Williams',
+              region: 'Europe',
+              deals_closed: '35',
+              revenue: '$875K',
+              quota_achievement: '108%',
+              rating: '⭐⭐⭐⭐'
+            },
+            {
+              salesperson: 'David Garcia',
+              region: 'Latin America',
+              deals_closed: '31',
+              revenue: '$750K',
+              quota_achievement: '95%',
+              rating: '⭐⭐⭐⭐'
+            }
+          ]}
+          dataName="sales reps"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Simple Table (No Grid)</h2>
+        <p class="demo-description">Clean, minimal design without grid lines. Set showGrid to false to disable the default grid.</p>
+        <dees-table
+          heading1="Team Members"
+          heading2="Engineering Department"
+          .showGrid=${false}
+          .data=${[
+            {
+              name: 'Alice Johnson',
+              role: 'Lead Engineer',
+              email: 'alice@company.com',
+              location: 'San Francisco',
+              joined: '2020-03-15'
+            },
+            {
+              name: 'Bob Smith',
+              role: 'Senior Developer',
+              email: 'bob@company.com',
+              location: 'New York',
+              joined: '2019-07-22'
+            },
+            {
+              name: 'Charlie Davis',
+              role: 'DevOps Engineer',
+              email: 'charlie@company.com',
+              location: 'London',
+              joined: '2021-01-10'
+            },
+            {
+              name: 'Diana Martinez',
+              role: 'Frontend Developer',
+              email: 'diana@company.com',
+              location: 'Barcelona',
+              joined: '2022-05-18'
+            }
+          ]}
+          dataName="team members"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Table with Custom Display Function</h2>
+        <p class="demo-description">Transform data for display using custom formatting.</p>
+        <dees-table
+          heading1="Sales Report"
+          heading2="Q4 2023 Performance"
+          .data=${[
+            {
+              product: 'Enterprise License',
+              units: 45,
+              revenue: 225000,
+              growth: 0.23,
+              forecast: 280000
+            },
+            {
+              product: 'Professional License',
+              units: 128,
+              revenue: 128000,
+              growth: 0.15,
+              forecast: 147000
+            },
+            {
+              product: 'Starter License',
+              units: 342,
+              revenue: 68400,
+              growth: 0.42,
+              forecast: 97000
+            }
+          ]}
+          .displayFunction=${(item) => ({
+            Product: item.product,
+            'Units Sold': item.units.toLocaleString(),
+            Revenue: '$' + item.revenue.toLocaleString(),
+            Growth: (item.growth * 100).toFixed(1) + '%',
+            'Q1 2024 Forecast': '$' + item.forecast.toLocaleString()
+          })}
+          dataName="products"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Empty Table State</h2>
+        <p class="demo-description">How the table looks when no data is available.</p>
+        <dees-table
+          heading1="No Data Available"
+          heading2="This table is currently empty"
+          .data=${[]}
+          dataName="items"
+        ></dees-table>
+      </div>
+    </div>
   </div>
-`;
+`;
\ No newline at end of file
diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts
index 06c56d9..4f1fe2d 100644
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@@ -1,4 +1,3 @@
-import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
 import { demoFunc } from './dees-table.demo.js';
 import { cssGeistFontFamily } from './00fonts.js';
@@ -10,9 +9,6 @@ import {
   type TemplateResult,
   cssManager,
   css,
-  unsafeCSS,
-  type CSSResult,
-  state,
   directives,
 } from '@design.estate/dees-element';
 
@@ -114,7 +110,7 @@ export class DeesTable<T> extends DeesElement {
   get value() {
     return this.data;
   }
-  set value(valueArg) {}
+  set value(_valueArg) {}
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
   // end dees-form compatibility -----------------------------------------
 
@@ -158,6 +154,27 @@ export class DeesTable<T> extends DeesElement {
   })
   public editableFields: string[] = [];
 
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'show-vertical-lines'
+  })
+  public showVerticalLines: boolean = false;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'show-horizontal-lines'
+  })
+  public showHorizontalLines: boolean = false;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'show-grid'
+  })
+  public showGrid: boolean = true;
+
   public files: File[] = [];
   public fileWeakMap = new WeakMap();
 
@@ -170,238 +187,350 @@ export class DeesTable<T> extends DeesElement {
   public static styles = [
     cssManager.defaultStyles,
     css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
       .mainbox {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
         font-family: ${cssGeistFontFamily};
         font-weight: 400;
         font-size: 14px;
-        padding: 16px;
         display: block;
         width: 100%;
-        min-height: 50px;
-        background: ${cssManager.bdTheme('#ffffff', '#222222')};
-        border-radius: 3px;
-        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
-        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
-        overflow-x: auto;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 8px;
+        overflow: hidden;
         cursor: default;
       }
 
       .header {
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
         align-items: center;
-        font-family: ${cssGeistFontFamily};
+        padding: 16px 24px;
+        min-height: 64px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       .headingContainer {
+        flex: 1;
       }
 
       .heading {
+        line-height: 1.5;
       }
 
       .heading1 {
+        font-size: 18px;
         font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        letter-spacing: -0.025em;
       }
+      
       .heading2 {
-        opacity: 0.6;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        margin-top: 2px;
       }
 
       .headingSeparation {
-        margin-top: 7px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#444444')};
+        display: none;
       }
 
       .headerActions {
         user-select: none;
         display: flex;
         flex-direction: row;
-        margin-left: auto;
+        gap: 8px;
       }
+      
       .headerAction {
         display: flex;
-        flex-direction: row;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-        margin-left: 16px;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.15s ease;
       }
 
       .headerAction:hover {
-        color: ${cssManager.bdTheme('#555', '#fff')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
       }
 
       .headerAction dees-icon {
-        margin-right: 8px;
+        width: 14px;
+        height: 14px;
       }
 
       .searchGrid {
-        background: ${cssManager.bdTheme('#fff', '#111111')};
         display: grid;
         grid-gap: 16px;
         grid-template-columns: 1fr 200px;
-        margin-top: 16px;
-        padding: 0px 16px;
-        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
-        border-radius: 8px;
+        padding: 16px 24px;
+        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        transition: all 0.2s ease;
       }
 
       .searchGrid.hidden {
         height: 0px;
         opacity: 0;
         overflow: hidden;
-        margin-top: 0px;
+        padding: 0px 24px;
+        border-bottom-width: 0px;
       }
 
-      table,
-      .noDataSet {
-        margin-top: 16px;
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        border-collapse: collapse;
+      table {
         width: 100%;
+        caption-side: bottom;
+        font-size: 14px;
+        border-collapse: separate;
+        border-spacing: 0;
       }
+      
       .noDataSet {
+        padding: 48px 24px;
         text-align: center;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
       }
-      tr {
-        border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
-        text-align: left;
+      
+      thead {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
       }
-      tr:last-child {
+      
+      tbody tr {
+        transition: background-color 0.15s ease;
+        position: relative;
+      }
+      
+      /* Default horizontal lines (bottom border only) */
+      tbody tr {
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      
+      tbody tr:last-child {
         border-bottom: none;
-        text-align: left;
       }
-      tr:hover {
+      
+      /* Full horizontal lines when enabled */
+      :host([show-horizontal-lines]) tbody tr {
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
-      tr:hover td {
-        background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
+      
+      :host([show-horizontal-lines]) tbody tr:first-child {
+        border-top: none;
       }
-      tr:first-child:hover {
-        cursor: auto;
+      
+      :host([show-horizontal-lines]) tbody tr:last-child {
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
-      tr:first-child:hover .innerCellContainer {
-        background: none;
+      
+      tbody tr:hover {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.5)', 'hsl(0 0% 14.9% / 0.5)')};
       }
-      tr.selected td {
-        background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
+      
+      /* Column hover effect for better traceability */
+      td {
+        position: relative;
+      }
+      
+      td::after {
+        content: '';
+        position: absolute;
+        top: -1000px;
+        bottom: -1000px;
+        left: 0;
+        right: 0;
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')};
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.15s ease;
+        z-index: -1;
+      }
+      
+      td:hover::after {
+        opacity: 1;
+      }
+      
+      /* Grid mode - shows both vertical and horizontal lines */
+      :host([show-grid]) th {
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: none;
+        border-top: none;
+      }
+      
+      :host([show-grid]) td {
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: none;
+        border-top: none;
+      }
+      
+      :host([show-grid]) th:first-child,
+      :host([show-grid]) td:first-child {
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      
+      :host([show-grid]) tbody tr:first-child td {
+        border-top: none;
+      }
+      
+      tbody tr.selected {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
       }
 
-      tr.hasAttachment td {
-        background: ${cssManager.bdTheme('#0098847c', '#0098847c')};
+      tbody tr.hasAttachment {
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 76.2% 36.3% / 0.1)')};
       }
 
       th {
-        text-transform: none;
-        font-family: ${cssGeistFontFamily};
+        height: 48px;
+        padding: 12px 24px;
+        text-align: left;
         font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        letter-spacing: -0.01em;
       }
-      th,
+      
+      :host([show-vertical-lines]) th {
+        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      
       td {
-        position: relative;
-        vertical-align: top;
-
-        padding: 0px;
-        border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
+        padding: 12px 24px;
+        vertical-align: middle;
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
       }
-      .innerCellContainer {
-        min-height: 36px;
-        position: relative;
-        height: 100%;
-        width: 100%;
-        padding: 6px 8px;
-        line-height: 24px;
+      
+      :host([show-vertical-lines]) td {
+        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
-      th:first-child .innerCellContainer,
-      td:first-child .innerCellContainer {
-        padding-left: 0px;
-      }
-      th:last-child .innerCellContainer,
-      td:last-child .innerCellContainer {
-        padding-right: 0px;
+      
+      th:first-child,
+      td:first-child {
+        padding-left: 24px;
       }
+      
       th:last-child,
       td:last-child {
+        padding-right: 24px;
+      }
+      
+      :host([show-vertical-lines]) th:last-child,
+      :host([show-vertical-lines]) td:last-child {
         border-right: none;
       }
+      
+      .innerCellContainer {
+        position: relative;
+        min-height: 24px;
+        line-height: 24px;
+      }
       td input {
-        width: 100%;
-        height: 100%;
-        outline: none;
-        border: 2px solid #fa6101;
-        top: 0px;
-        bottom: 0px;
-        right: 0px;
-        left: 0px;
         position: absolute;
-        background: #fa610140;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        top: 2px;
+        bottom: 2px;
+        left: 2px;
+        right: 2px;
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        padding: 0px 8px;
+        outline: none;
+        border: 2px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        border-radius: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
-        padding: 0px 6px;
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
       }
       .actionsContainer {
         display: flex;
         flex-direction: row;
-        height: 24px;
-        transform: translateY(-4px);
-        margin-left: -6px;
+        gap: 4px;
       }
+      
       .action {
-        position: relative;
-        padding: 8px 10px;
-        line-height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
         height: 32px;
-        size: 16px;
-        border-radius: 8px;
+        border-radius: 6px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        cursor: pointer;
+        transition: all 0.15s ease;
       }
 
       .action:hover {
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
       }
 
       .action:active {
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blueActive)};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 11.8%)')};
       }
-
-      .action:hover dees-icon {
-        filter: ${cssManager.bdTheme('invert(1) brightness(3)', '')};
+      
+      .action dees-icon {
+        width: 16px;
+        height: 16px;
       }
 
       .footer {
-        font-family: ${cssGeistFontFamily};
-        font-size: 14px;
-        color: ${cssManager.bdTheme('#111', '#ffffff90')};
-        background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
-        margin: 16px -16px -16px -16px;
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
         display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 52px;
+        padding: 0 24px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       .tableStatistics {
-        padding: 8px 16px;
+        font-weight: 500;
       }
 
       .footerActions {
-        margin-left: auto;
+        display: flex;
+        gap: 8px;
       }
 
       .footerActions .footerAction {
-        padding: 8px 16px;
         display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        border-radius: 6px;
+        cursor: pointer;
         user-select: none;
+        transition: all 0.15s ease;
       }
 
       .footerActions .footerAction:hover {
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
-        color: #fff;
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
       }
 
       .footerActions .footerAction dees-icon {
-        display: flex;
-        margin-right: 8px;
-      }
-
-      .footerActions .footerAction:hover dees-icon {
+        width: 14px;
+        height: 14px;
       }
     `,
   ];
@@ -479,24 +608,23 @@ export class DeesTable<T> extends DeesElement {
               const headings: string[] = Object.keys(firstTransformedItem);
               return html`
                 <table>
-                  <tr>
-                    ${headings.map(
-                      (headingArg) => html`
-                        <th>
-                          <div class="innerCellContainer">${headingArg}</div>
-                        </th>
-                      `
-                    )}
-                    ${(() => {
-                      if (this.dataActions && this.dataActions.length > 0) {
-                        return html`
-                          <th>
-                            <div class="innerCellContainer">Actions</div>
-                          </th>
-                        `;
-                      }
-                    })()}
-                  </tr>
+                  <thead>
+                    <tr>
+                      ${headings.map(
+                        (headingArg) => html`
+                          <th>${headingArg}</th>
+                        `
+                      )}
+                      ${(() => {
+                        if (this.dataActions && this.dataActions.length > 0) {
+                          return html`
+                            <th>Actions</th>
+                          `;
+                        }
+                      })()}
+                    </tr>
+                  </thead>
+                  <tbody>
                   ${this.data.map((itemArg) => {
                     const transformedItem = this.displayFunction(itemArg);
                     const getTr = (elementArg: HTMLElement): HTMLElement => {
@@ -593,10 +721,9 @@ export class DeesTable<T> extends DeesElement {
                           if (this.dataActions && this.dataActions.length > 0) {
                             return html`
                               <td>
-                                <div class="innerCellContainer">
-                                  <div class="actionsContainer">
-                                    ${this.getActionsForType('inRow').map(
-                                      (actionArg) => html`
+                                <div class="actionsContainer">
+                                  ${this.getActionsForType('inRow').map(
+                                    (actionArg) => html`
                                         <div
                                           class="action"
                                           @click=${() =>
@@ -615,7 +742,6 @@ export class DeesTable<T> extends DeesElement {
                                         </div>
                                       `
                                     )}
-                                  </div>
                                 </div>
                               </td>
                             `;
@@ -624,6 +750,7 @@ export class DeesTable<T> extends DeesElement {
                       </tr>
                     `;
                   })}
+                  </tbody>
                 </table>
               `;
             })()
@@ -744,7 +871,7 @@ export class DeesTable<T> extends DeesElement {
   }
 
   async handleCellEditing(event: Event, itemArg: T, key: string) {
-    const domtools = await this.domtoolsPromise;
+    await this.domtoolsPromise;
     const target = event.target as HTMLElement;
     const originalColor = target.style.color;
     target.style.color = 'transparent';