diff --git a/tools/ui-components/src/table/index.ts b/tools/ui-components/src/table/index.ts
index 6513d7ac4d49a3..083de52f9917a9 100644
--- a/tools/ui-components/src/table/index.ts
+++ b/tools/ui-components/src/table/index.ts
@@ -1,3 +1,2 @@
-
 export { Table } from './table';
 export type { TableProps } from './types';
diff --git a/tools/ui-components/src/table/table.stories.tsx b/tools/ui-components/src/table/table.stories.tsx
index 9e6add4b719e51..bbeb14d0841366 100644
--- a/tools/ui-components/src/table/table.stories.tsx
+++ b/tools/ui-components/src/table/table.stories.tsx
@@ -61,16 +61,14 @@ const story = {
     },
     borderless: {
       options: [true, false],
-      control: { type: 'radio'}, 
+      control: { type: 'radio' },
       // Used to avoid conflict with borders
-      if: {arg: 'bordered', truthy: false} 
+      if: { arg: 'bordered', truthy: false }
     },
     size: {
       options: ['small', 'medium', 'large']
     }
-    
   }
-  
 };
 
 const Template: Story<TableProps> = args => (
diff --git a/tools/ui-components/src/table/table.test.tsx b/tools/ui-components/src/table/table.test.tsx
deleted file mode 100644
index baa42904973b17..00000000000000
--- a/tools/ui-components/src/table/table.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { Table } from '.';
-
-describe('<Table />', () => {
-  it('should render correctly', () => {});
-});
diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx
index 5b02c3c0ce3918..ff491b33b15f5c 100644
--- a/tools/ui-components/src/table/table.tsx
+++ b/tools/ui-components/src/table/table.tsx
@@ -1,55 +1,67 @@
 import React from 'react';
-import '../../../../client/src/components/layouts/global.css'
+import '../../../../client/src/components/layouts/global.css';
 
-import { TableProps, TableVariant } from './types';
+import { TableProps } from './types';
 
-const defaultClassNames = ['table','table-auto', 'w-full', 'border-collapse',
-'text-left', 'bg-transparent'];
+const defaultClassNames = [
+  'table',
+  'table-auto',
+  'w-full',
+  'border-collapse',
+  'text-left',
+  'bg-transparent'
+];
 const MAX_MOBILE_WIDTH = 767;
 
-const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH
+const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH;
 
-const variantClasses: Record<TableVariant, string> = {
-  light: 'bg-light-theme-background',
-  dark: 'bg-dark-theme-background text-gray-0'
-}
+// const variantClasses: Record<TableVariant, string> = {
+//   light: 'bg-light-theme-background',
+//   dark: 'bg-dark-theme-background text-gray-0'
+// }
 
 const computeClassNames = (size: string) => {
   switch (size) {
     case 'large':
-      return 'text-lg'
+      return 'text-lg';
     case 'small':
-      return 'text-sm'
+      return 'text-sm';
     // default is medium
     default:
-      return 'text-md'
+      return 'text-md';
   }
-}
+};
 
 export const Table = React.forwardRef<HTMLTableElement, TableProps>(
   (
-    { borderless, bordered, className, hover, striped, responsive, variant, size, ...props },
+    { borderless, bordered, hover, striped, responsive, size, ...props },
     ref
   ) => {
-    props.cellPadding = 10 // Default cell padding for visual clarity in Storybook
-    
-    if (borderless && bordered) bordered = false;
+    props.cellPadding = 10; // Default cell padding for visual clarity in Storybook
 
-    const borderClass = bordered ? "bordered" : ""
-    const stripedClass = striped ? "table-striped" : ""
-    const hoverClass = hover ? "table-hover" : ""
+    if (borderless && bordered) bordered = false;
 
-    const classes = [...defaultClassNames, borderClass, stripedClass, computeClassNames(size || ''), hoverClass].join(' ');
+    const borderClass = bordered ? 'bordered' : '';
+    const stripedClass = striped ? 'table-striped' : '';
+    const hoverClass = hover ? 'table-hover' : '';
 
+    const classes = [
+      ...defaultClassNames,
+      borderClass,
+      stripedClass,
+      computeClassNames(size || ''),
+      hoverClass
+    ].join(' ');
 
-    const table = <table {...props} ref={ref} className={classes}/>;
+    const table = <table {...props} ref={ref} className={classes} />;
 
     if (responsive) {
-      let responsiveClass = computeWindowSize ? 'sm' : 'lg';
-      return <div className={responsiveClass}>{table}</div>
+      const responsiveClass = computeWindowSize ? 'sm' : 'lg';
+      return <div className={responsiveClass}>{table}</div>;
     }
 
-    // For storybook use cases. Table should remain transparent to the background color
+    // For storybook use cases. Table should remain transparent to the background color add @param of 'variant'
+
     // if (variant == 'light') {
     //   return <div className={variantClasses[variant]}>{table}</div>
     // } else return <div className={variantClasses[variant]}>{table}</div>
@@ -57,3 +69,5 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
     return table;
   }
 );
+
+Table.displayName = 'Table';
diff --git a/tools/ui-components/src/table/types.ts b/tools/ui-components/src/table/types.ts
index 833e139c11dc3b..c5897d430ca95e 100644
--- a/tools/ui-components/src/table/types.ts
+++ b/tools/ui-components/src/table/types.ts
@@ -1,8 +1,9 @@
-import React from "react";
+import React from 'react';
 
 export type TableVariant = 'light' | 'dark';
 
-export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+export interface TableProps
+  extends React.TableHTMLAttributes<HTMLTableElement> {
   bordered?: boolean;
   borderless?: boolean;
   className?: string;