diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx
index 42c9da062..ca17030e9 100644
--- a/datacenter/app/datastores/documents/chunklist/page.tsx
+++ b/datacenter/app/datastores/documents/chunklist/page.tsx
@@ -32,7 +32,7 @@ const ChunkList = () => {
   }, [])
   return (
     <div className="p-4">
-      <Table sx={{ '& thead th:nth-child(1)': { width: '40%' } }}>
+      <Table color="neutral" stripe="odd" variant="outlined">
         <thead>
           <tr>
             <th>Name</th>
diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index e862893ad..aa58b6330 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -91,7 +91,7 @@ const Documents = () => {
           + Add Datasource
         </Button>
       </Sheet>
-      <Table sx={{ '& thead th:nth-child(1)': { width: '40%' } }}>
+      <Table color="neutral" stripe="odd" variant="outlined">
         <thead>
           <tr>
             <th>Name</th>
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index 06f96cdbd..637d62cfe 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -91,7 +91,7 @@ const Index = () => {
         </Button>
       </Sheet>
       <div className="page-body p-4">
-        <Table sx={{ '& thead th:nth-child(1)': { width: '40%' } }}>
+        <Table color="neutral" stripe="odd" variant="outlined">
           <thead>
             <tr>
               <th>Name</th>