diff --git a/package-lock.json b/package-lock.json
index ba1cbfdb2..13a35c6b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,8 @@
             "name": "@appwrite/console",
             "version": "0.0.1",
             "dependencies": {
-                "@aw-labs/icons": "^0.0.0-20",
-                "@aw-labs/ui": "^0.0.0-20",
+                "@aw-labs/icons": "^0.0.0-22",
+                "@aw-labs/ui": "^0.0.0-22",
                 "echarts": "^5.3.3"
             },
             "devDependencies": {
@@ -58,14 +58,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-20",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-20.tgz",
-            "integrity": "sha512-NgUu2b6ZKtK96uI5XQ1omo+4/2Qa1p6dnJgDzAMwXSNkU2r0OXAk2XPDuLy1FKGvF4j5EvZ8pzgUb/LDstBN1w=="
+            "version": "0.0.0-22",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-22.tgz",
+            "integrity": "sha512-lSMJ2+muE3tiNtEh5I5FhK89nq06OIkzHnvYHGKTm4mnQWLIDRI8N63LjFmddhLjAuiet6QeuTv/YDMe6IvkHA=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-20",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-20.tgz",
-            "integrity": "sha512-yCd8zdqvbGQwhUSIIoWktEX31t+sL+ZrRFl4lyN+1rziozDJpvZd4PMeQsiO03LZYJDbuYYNLEjhk52xI1mAVw==",
+            "version": "0.0.0-22",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-22.tgz",
+            "integrity": "sha512-0Pux3lVJ3YL4f++aAmpEj21qlU6l2+qRSoYTITGyGFXz0bL7a3ejrlUsM91uG6zo23danbaJy8MfnGvFQ8Qtpg==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7807,14 +7807,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-20",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-20.tgz",
-            "integrity": "sha512-NgUu2b6ZKtK96uI5XQ1omo+4/2Qa1p6dnJgDzAMwXSNkU2r0OXAk2XPDuLy1FKGvF4j5EvZ8pzgUb/LDstBN1w=="
+            "version": "0.0.0-22",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-22.tgz",
+            "integrity": "sha512-lSMJ2+muE3tiNtEh5I5FhK89nq06OIkzHnvYHGKTm4mnQWLIDRI8N63LjFmddhLjAuiet6QeuTv/YDMe6IvkHA=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-20",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-20.tgz",
-            "integrity": "sha512-yCd8zdqvbGQwhUSIIoWktEX31t+sL+ZrRFl4lyN+1rziozDJpvZd4PMeQsiO03LZYJDbuYYNLEjhk52xI1mAVw==",
+            "version": "0.0.0-22",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-22.tgz",
+            "integrity": "sha512-0Pux3lVJ3YL4f++aAmpEj21qlU6l2+qRSoYTITGyGFXz0bL7a3ejrlUsM91uG6zo23danbaJy8MfnGvFQ8Qtpg==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 94012bf48..6275a7ab9 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/icons": "^0.0.0-20",
-        "@aw-labs/ui": "^0.0.0-20",
+        "@aw-labs/icons": "^0.0.0-22",
+        "@aw-labs/ui": "^0.0.0-22",
         "echarts": "^5.3.3"
     },
     "devDependencies": {
diff --git a/src/lib/elements/table/body.svelte b/src/lib/elements/table/body.svelte
index 1766ff31c..635b587f2 100644
--- a/src/lib/elements/table/body.svelte
+++ b/src/lib/elements/table/body.svelte
@@ -1,3 +1,3 @@
-<tbody class="table-tbody">
+<div class="table-tbody" role="rowgroup">
     <slot />
-</tbody>
+</div>
diff --git a/src/lib/elements/table/cell.svelte b/src/lib/elements/table/cell.svelte
index 340e89064..4a5259d0f 100644
--- a/src/lib/elements/table/cell.svelte
+++ b/src/lib/elements/table/cell.svelte
@@ -3,6 +3,10 @@
     export let width: number = null;
 </script>
 
-<td width={width?.toString() ?? ''} class="table-col" class:is-only-desktop={onlyDesktop}>
+<div
+    width={width?.toString() ?? ''}
+    class="table-col"
+    class:is-only-desktop={onlyDesktop}
+    role="cell">
     <slot />
-</td>
+</div>
diff --git a/src/lib/elements/table/cellHead.svelte b/src/lib/elements/table/cellHead.svelte
index c1245fa71..1ff8ade15 100644
--- a/src/lib/elements/table/cellHead.svelte
+++ b/src/lib/elements/table/cellHead.svelte
@@ -2,14 +2,8 @@
     export let width: number = null;
 </script>
 
-<th width={width?.toString() ?? ''} class="table-thead-col">
-    <span class="text">
+<div style={`width: ${width?.toString() + 'px' ?? ''}`} class="table-thead-col" role="columnheader">
+    <span class="eyebrow-heading-3">
         <slot />
     </span>
-</th>
-
-<style>
-    th {
-        text-transform: uppercase;
-    }
-</style>
+</div>
diff --git a/src/lib/elements/table/cellLink.svelte b/src/lib/elements/table/cellLink.svelte
index 305c702b5..99da3e2f6 100644
--- a/src/lib/elements/table/cellLink.svelte
+++ b/src/lib/elements/table/cellLink.svelte
@@ -3,6 +3,6 @@
     export let title: string;
 </script>
 
-<td class="table-col is-main" data-title={title}>
+<div class="table-col is-main" data-title={title} role="cell">
     <a role="button" tabindex="0" class="link" {href}><slot /></a>
-</td>
+</div>
diff --git a/src/lib/elements/table/cellText.svelte b/src/lib/elements/table/cellText.svelte
index 28c556455..bfc7c564e 100644
--- a/src/lib/elements/table/cellText.svelte
+++ b/src/lib/elements/table/cellText.svelte
@@ -2,6 +2,6 @@
     export let title: string;
 </script>
 
-<td class="table-col is-main" data-title={title}>
+<div class="table-col is-main" data-title={title} role="cell">
     <span class="text"><slot /></span>
-</td>
+</div>
diff --git a/src/lib/elements/table/header.svelte b/src/lib/elements/table/header.svelte
index 3d0dd582a..bad3f122b 100644
--- a/src/lib/elements/table/header.svelte
+++ b/src/lib/elements/table/header.svelte
@@ -1,5 +1,5 @@
-<thead class="table-thead">
-    <tr class="table-row">
+<div class="table-thead" role="rowheader">
+    <div class="table-row" role="row">
         <slot />
-    </tr>
-</thead>
+    </div>
+</div>
diff --git a/src/lib/elements/table/index.ts b/src/lib/elements/table/index.ts
index 1d1f55669..e67c95b54 100644
--- a/src/lib/elements/table/index.ts
+++ b/src/lib/elements/table/index.ts
@@ -3,6 +3,7 @@ export { default as TableBody } from './body.svelte';
 export { default as TableHeader } from './header.svelte';
 export { default as TableFooter } from './footer.svelte';
 export { default as TableRow } from './row.svelte';
+export { default as TableRowLink } from './rowLink.svelte';
 export { default as TableCell } from './cell.svelte';
 export { default as TableCellHead } from './cellHead.svelte';
 export { default as TableCellLink } from './cellLink.svelte';
diff --git a/src/lib/elements/table/row.svelte b/src/lib/elements/table/row.svelte
index 22e3bea12..3a9808d96 100644
--- a/src/lib/elements/table/row.svelte
+++ b/src/lib/elements/table/row.svelte
@@ -1,3 +1,3 @@
-<tr class="table-row">
+<div class="table-row" role="row">
     <slot />
-</tr>
+</div>
diff --git a/src/lib/elements/table/rowLink.svelte b/src/lib/elements/table/rowLink.svelte
new file mode 100644
index 000000000..7a8249bc7
--- /dev/null
+++ b/src/lib/elements/table/rowLink.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    export let href: string;
+</script>
+
+<a class="table-row" role="row" {href}>
+    <slot />
+</a>
diff --git a/src/lib/elements/table/table.svelte b/src/lib/elements/table/table.svelte
index 5aa7d827f..465d4c8f9 100644
--- a/src/lib/elements/table/table.svelte
+++ b/src/lib/elements/table/table.svelte
@@ -1,3 +1,3 @@
-<table class="table is-vertical u-margin-block-start-32 ">
+<div class="table is-vertical u-margin-block-start-32" role="table">
     <slot />
-</table>
+</div>
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index 8f9ee833f..6d2032619 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -7,10 +7,9 @@
         Table,
         TableHeader,
         TableBody,
-        TableRow,
         TableCellHead,
-        TableCellLink,
-        TableCellText
+        TableCellText,
+        TableRowLink
     } from '$lib/elements/table';
     import Create from './_createUser.svelte';
     import type { Models } from 'src/sdk';
@@ -68,15 +67,13 @@
             </TableHeader>
             <TableBody>
                 {#each $usersList.response.users as user}
-                    <TableRow>
-                        <TableCellLink
-                            href={`${base}/console/${project}/users/user/${user.$id}`}
-                            title="Name">
-                            <div class="u-flex u-gap-12">
+                    <TableRowLink href={`${base}/console/${project}/users/user/${user.$id}`}>
+                        <TableCellText title="Name">
+                            <div class="u-flex u-gap-12 u-cross-center">
                                 <Avatar size={40} src={getAvatar(user.name)} name={user.name} />
-                                <span>{user.name ? user.name : 'n/a'}</span>
+                                <span class="text">{user.name ? user.name : 'n/a'}</span>
                             </div>
-                        </TableCellLink>
+                        </TableCellText>
                         <TableCellText title="E-Mail">{user.email}</TableCellText>
                         <TableCellText title="Status">
                             {#if user.status}
@@ -95,13 +92,11 @@
                         <TableCellText title="Joined">
                             {toLocaleDateTime(user.registration)}
                         </TableCellText>
-                    </TableRow>
+                    </TableRowLink>
                 {/each}
             </TableBody>
         </Table>
-        <div
-            class="u-flex u-margin-block-start-32
- u-main-space-between">
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$usersList.response.total}</p>
             <Pagination {limit} bind:offset sum={$usersList.response.total} />
         </div>