diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
index cf55c831e..c35529655 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination } from '$lib/components';
+    import { Empty, Pagination, Avatar } from '$lib/components';
     import type { Models } from 'src/sdk';
     import Create from './_create.svelte';
     import Update from './_update.svelte';
@@ -30,7 +30,7 @@
         showUpdate = true;
     };
     const getPreview = (fileId: string) =>
-        sdkForProject.storage.getFilePreview(bucket, fileId, 30, 30).toString() + '&mode=admin';
+        sdkForProject.storage.getFilePreview(bucket, fileId, 40, 40).toString() + '&mode=admin';
 
     $: request = sdkForProject.storage.listFiles(bucket, search, limit, offset);
     $: if (search) offset = 0;
@@ -69,12 +69,10 @@
                             <TableCellText title="Name">
                                 <div class="u-flex u-gap-12">
                                     <span class="link" on:click={() => openFile(file)}>
-                                        <img
-                                            class="avatar"
-                                            width="40"
-                                            height="40"
+                                        <Avatar
+                                            size={40}
                                             src={getPreview(file.$id)}
-                                            alt={file.name} />
+                                            name={file.name} />
                                         {file.name}
                                     </span>
                                 </div>
diff --git a/src/routes/console/[project]/users/teams/[team]/members.svelte b/src/routes/console/[project]/users/teams/[team]/members.svelte
index 28a068596..16aa39b7f 100644
--- a/src/routes/console/[project]/users/teams/[team]/members.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/members.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Pagination, Empty } from '$lib/components';
+    import { Pagination, Empty, Avatar } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -73,12 +73,11 @@
                             href={`${base}/console/${project}/users/user/${membership.userId}`}
                             title="Name">
                             <div class="u-flex u-gap-12">
-                                <img
-                                    class="avatar"
-                                    width="40"
-                                    height="40"
+                                <Avatar
+                                    size={40}
                                     src={getAvatar(membership.userName)}
-                                    alt={membership.userName} />
+                                    name={membership.userName} />
+
                                 <span>{membership.userName ? membership.userName : 'n/a'}</span>
                             </div>
                         </TableCellLink>
diff --git a/src/routes/console/[project]/users/user/[user]/memberships.svelte b/src/routes/console/[project]/users/user/[user]/memberships.svelte
index 80502e9b8..1cd819af3 100644
--- a/src/routes/console/[project]/users/user/[user]/memberships.svelte
+++ b/src/routes/console/[project]/users/user/[user]/memberships.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Pagination, Empty } from '$lib/components';
+    import { Pagination, Empty, Avatar } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -55,12 +55,10 @@
                                 href={`${base}/console/${project}/users/user/${membership.userId}`}
                                 title="Name">
                                 <div class="u-flex u-gap-12">
-                                    <img
-                                        class="avatar"
-                                        width="40"
-                                        height="40"
+                                    <Avatar
+                                        size={40}
                                         src={getAvatar(membership.userName)}
-                                        alt={membership.userName} />
+                                        name={membership.userName} />
                                     <span>{membership.userName ? membership.userName : 'n/a'}</span>
                                 </div>
                             </TableCellLink>