diff --git a/package-lock.json b/package-lock.json
index 8c63e3246..e55007247 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-52",
-                "@aw-labs/ui": "0.0.0-52",
+                "@aw-labs/icons": "0.0.0-53",
+                "@aw-labs/ui": "0.0.0-53",
                 "echarts": "^5.3.3",
                 "tippy.js": "^6.3.7",
                 "web-vitals": "^2.1.4"
@@ -77,14 +77,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-52",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-52.tgz",
-            "integrity": "sha512-A2bqLMTETaWUYiXuruw8zkW292rjGOeAtII+FbgasHkoJvC8cf2Ne2av4rzqenJdx6zRDQTRmwJl8FW7hcwI8Q=="
+            "version": "0.0.0-53",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-53.tgz",
+            "integrity": "sha512-9UhHTGajh2HJun2uYbcMyxRtPsgIQ5CXf8mn/sCiRyZJIw5FYtuxTSkP/35hv2zJsVq/mY09HvfdX3w4XVKItg=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-52",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-52.tgz",
-            "integrity": "sha512-4xS+rCd/UDI+p0JMceIbNO4uZ3HYz5TcfCWdgHFA5seBJ6rN0wS/bZPxjHd95BL0on5RtruME0t151gD4dFFxQ==",
+            "version": "0.0.0-53",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-53.tgz",
+            "integrity": "sha512-5ftq05SZ9lVdXGHgHIyxwtGznfKsCa1fKPpZhS+279IUTIB+H7GIq0g2U2EzRBj7ht0PXNZJNO4n9hO2ItDJwA==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7698,14 +7698,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-52",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-52.tgz",
-            "integrity": "sha512-A2bqLMTETaWUYiXuruw8zkW292rjGOeAtII+FbgasHkoJvC8cf2Ne2av4rzqenJdx6zRDQTRmwJl8FW7hcwI8Q=="
+            "version": "0.0.0-53",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-53.tgz",
+            "integrity": "sha512-9UhHTGajh2HJun2uYbcMyxRtPsgIQ5CXf8mn/sCiRyZJIw5FYtuxTSkP/35hv2zJsVq/mY09HvfdX3w4XVKItg=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-52",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-52.tgz",
-            "integrity": "sha512-4xS+rCd/UDI+p0JMceIbNO4uZ3HYz5TcfCWdgHFA5seBJ6rN0wS/bZPxjHd95BL0on5RtruME0t151gD4dFFxQ==",
+            "version": "0.0.0-53",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-53.tgz",
+            "integrity": "sha512-5ftq05SZ9lVdXGHgHIyxwtGznfKsCa1fKPpZhS+279IUTIB+H7GIq0g2U2EzRBj7ht0PXNZJNO4n9hO2ItDJwA==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 73f4f7fb6..3c1f7f036 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-52",
-        "@aw-labs/ui": "0.0.0-52",
+        "@aw-labs/icons": "0.0.0-53",
+        "@aw-labs/ui": "0.0.0-53",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7",
         "web-vitals": "^2.1.4"
diff --git a/src/lib/components/emptyBucket.svelte b/src/lib/components/emptyGridItem.svelte
similarity index 100%
rename from src/lib/components/emptyBucket.svelte
rename to src/lib/components/emptyGridItem.svelte
diff --git a/src/lib/components/bucket.svelte b/src/lib/components/gridItem1.svelte
similarity index 70%
rename from src/lib/components/bucket.svelte
rename to src/lib/components/gridItem1.svelte
index fd91e058b..2b78f6c2e 100644
--- a/src/lib/components/bucket.svelte
+++ b/src/lib/components/gridItem1.svelte
@@ -3,16 +3,16 @@
 </script>
 
 <a class="card" {href}>
-    <div class="bucket">
+    <div class="grid-item-1">
         <div class="eyebrow-heading-3"><slot name="eyebrow" /></div>
         <h2 class="heading-level-6"><slot name="title" /></h2>
-        <div class="bucket-status">
+        <div class="status">
             <slot name="status" />
         </div>
-        <div class="bucket-options">
+        <div class="options">
             <slot />
         </div>
-        <ul class="bucket-icons u-flex u-gap-8">
+        <ul class="icons u-flex u-gap-8">
             <slot name="icons" />
         </ul>
     </div>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 250b75ec7..55469257d 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -23,5 +23,5 @@ export { default as AvatarGroup } from './avatarGroup.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
-export { default as Bucket } from './bucket.svelte';
-export { default as EmptyBucket } from './emptyBucket.svelte';
+export { default as GridItem1 } from './gridItem1.svelte';
+export { default as EmptyGridItem } from './emptyGridItem.svelte';
diff --git a/src/routes/console/organization-[organization]/index.svelte b/src/routes/console/organization-[organization]/index.svelte
index 6ad5c314f..8e8921b34 100644
--- a/src/routes/console/organization-[organization]/index.svelte
+++ b/src/routes/console/organization-[organization]/index.svelte
@@ -2,7 +2,7 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Pill } from '$lib/elements';
-    import { Bucket, EmptyBucket, Empty, Pagination } from '$lib/components';
+    import { GridItem1, EmptyGridItem, Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -79,7 +79,7 @@
             };`}>
             {#each projects as project, index}
                 {#if index >= offset && index < limit + offset}
-                    <Bucket href={`${base}/console/project-${project.$id}`}>
+                    <GridItem1 href={`${base}/console/project-${project.$id}`}>
                         <svelte:fragment slot="eyebrow"
                             >{project?.platforms?.length ? project?.platforms?.length : 'No'} apps</svelte:fragment>
                         <svelte:fragment slot="title">
@@ -102,11 +102,11 @@
                                 +{project.platforms.length - 3}
                             </Pill>
                         {/if}
-                    </Bucket>
+                    </GridItem1>
                 {/if}
             {/each}
             {#if projects.length < limit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
-                <EmptyBucket on:click={() => (showCreate = true)}>
+                <EmptyGridItem on:click={() => (showCreate = true)}>
                     <div class="common-section">
                         <Button secondary round>
                             <i class="icon-plus" />
@@ -115,7 +115,7 @@
                     <div class="common-section">
                         <p>Create a new project</p>
                     </div>
-                </EmptyBucket>
+                </EmptyGridItem>
             {/if}
         </ul>
 
@@ -125,7 +125,7 @@
         </div>
     {:else}
         <Empty dashed centered>
-            <div class="bucket">
+            <div class="grid-item-1">
                 <div class="u-flex u-flex-vertical u-cross-center ">
                     <div class="common-section">
                         <Button secondary round on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/storage/index.svelte b/src/routes/console/project-[project]/storage/index.svelte
index 3a2f10c62..dff6be811 100644
--- a/src/routes/console/project-[project]/storage/index.svelte
+++ b/src/routes/console/project-[project]/storage/index.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, Bucket, EmptyBucket } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1, EmptyGridItem } from '$lib/components';
     import { Pill } from '$lib/elements';
     import type { Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -42,7 +42,7 @@
                 $bucketList.total > 3 ? '22rem' : '25rem'
             };`}>
             {#each $bucketList.buckets as bucket}
-                <Bucket href={`${base}/console/project-${project}/storage/bucket/${bucket.$id}`}>
+                <GridItem1 href={`${base}/console/project-${project}/storage/bucket/${bucket.$id}`}>
                     <svelte:fragment slot="eyebrow">XX Files</svelte:fragment>
                     <svelte:fragment slot="title">{bucket.name}</svelte:fragment>
                     <svelte:fragment slot="status">
@@ -79,10 +79,10 @@
                                 }} />
                         </li>
                     </svelte:fragment>
-                </Bucket>
+                </GridItem1>
             {/each}
             {#if $bucketList.total % 2 !== 0}
-                <EmptyBucket on:click={() => (showCreate = true)}>
+                <EmptyGridItem on:click={() => (showCreate = true)}>
                     <div class="common-section">
                         <Button secondary round>
                             <i class="icon-plus" />
@@ -91,7 +91,7 @@
                     <div class="common-section">
                         <p>Add a new bucket</p>
                     </div>
-                </EmptyBucket>
+                </EmptyGridItem>
             {/if}
         </ul>
 
@@ -117,7 +117,7 @@
         </div>
     {:else}
         <Empty dashed centered>
-            <div class="bucket">
+            <div class="grid-item-1">
                 <div class="u-flex u-flex-vertical u-cross-center">
                     <div class="common-section">
                         <Button secondary round on:click={() => (showCreate = true)}>