diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index e2434f100..f891b8255 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -53,4 +53,4 @@ export { default as Limit } from './limit.svelte';
 export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
 export { default as ClickableList } from './clickableList.svelte';
 export { default as ClickableListItem } from './clickableListItem.svelte';
-export { default as ID } from './id.svelte';
+export { default as Id } from './id.svelte';
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/header.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/header.svelte
index ce773be63..d176f8740 100644
--- a/src/routes/console/project-[project]/auth/teams/team-[team]/header.svelte
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { ID, Tab, Tabs } from '$lib/components';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { team } from './store';
@@ -34,7 +34,7 @@
         <CoverTitle href={`/console/project-${projectId}/auth/teams`}>
             {$team?.name}
         </CoverTitle>
-        <ID value={$team?.$id} event="team">{$team?.$id}</ID>
+        <Id value={$team?.$id} event="team">{$team?.$id}</Id>
     </svelte:fragment>
 
     <Tabs>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/header.svelte b/src/routes/console/project-[project]/auth/user-[user]/header.svelte
index 329466189..06f7d48f2 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/header.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { ID, Tab, Tabs } from '$lib/components';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { user } from './store';
@@ -38,7 +38,7 @@
         <CoverTitle href={`/console/project-${projectId}/auth`}>
             {$user.name ? $user.name : '-'}
         </CoverTitle>
-        <ID value={$user.$id} event="user">{$user.$id}</ID>
+        <Id value={$user.$id} event="user">{$user.$id}</Id>
     </svelte:fragment>
 
     <Tabs>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
index 8e39ca3f4..8e28ec6ac 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { ID, Tab, Tabs } from '$lib/components';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { doc } from './store';
@@ -37,7 +37,7 @@
             href={`/console/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`}>
             {$doc?.$id}
         </CoverTitle>
-        <ID value={$doc?.$id} event="document">Document ID</ID>
+        <Id value={$doc?.$id} event="document">Document ID</Id>
     </svelte:fragment>
 
     <Tabs>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
index 40ef425ff..51f5f0a45 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { ID, Tab, Tabs } from '$lib/components';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { collection } from './store';
@@ -51,7 +51,7 @@
         <CoverTitle href={`/console/project-${projectId}/databases/database-${databaseId}`}>
             {$collection?.name}
         </CoverTitle>
-        <ID value={$collection?.$id}>{$collection?.$id}</ID>
+        <Id value={$collection?.$id}>{$collection?.$id}</Id>
     </svelte:fragment>
 
     <Tabs>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index d48cabf89..87e448d22 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { tooltip } from '$lib/actions/tooltip';
-    import { ID } from '$lib/components';
+    import { Id } from '$lib/components';
     import {
         TableBody,
         TableCell,
@@ -98,9 +98,9 @@
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
                 <TableCell width={150}>
-                    <ID value={document.$id}>
+                    <Id value={document.$id}>
                         {document.$id}
-                    </ID>
+                    </Id>
                 </TableCell>
 
                 {#each $columns as column}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/grid.svelte b/src/routes/console/project-[project]/databases/database-[database]/grid.svelte
index a70beafc7..741c48d84 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/grid.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/grid.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { CardContainer, GridItem1, ID } from '$lib/components';
+    import { CardContainer, GridItem1, Id } from '$lib/components';
     import { Pill } from '$lib/elements';
     import type { PageData } from './$types';
     export let data: PageData;
@@ -23,7 +23,7 @@
                     <Pill>disabled</Pill>
                 {/if}</svelte:fragment>
 
-            <ID value={collection.$id}>{collection.$id}</ID>
+            <Id value={collection.$id}>{collection.$id}</Id>
         </GridItem1>
     {/each}
 </CardContainer>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/header.svelte b/src/routes/console/project-[project]/databases/database-[database]/header.svelte
index b7479fc87..b5a068d72 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/header.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { ID, Tab, Tabs } from '$lib/components';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { database } from './store';
@@ -34,7 +34,7 @@
         <CoverTitle href={`/console/project-${projectId}/databases`}>
             {$database.name}
         </CoverTitle>
-        <ID value={$database.$id}>{$database.$id}</ID>
+        <Id value={$database.$id}>{$database.$id}</Id>
     </svelte:fragment>
 
     <Tabs>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
index 3ea482d58..317956ae7 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { ID } from '$lib/components';
+    import { Id } from '$lib/components';
     import {
         Table,
         TableBody,
@@ -37,7 +37,7 @@
                         {#if column.id === '$id'}
                             {#key $columns}
                                 <TableCell title={column.title} width={column.width}>
-                                    <ID value={collection.$id}>{collection.$id}</ID>
+                                    <Id value={collection.$id}>{collection.$id}</Id>
                                 </TableCell>
                             {/key}
                         {:else if column.id === 'name'}
diff --git a/src/routes/console/project-[project]/databases/grid.svelte b/src/routes/console/project-[project]/databases/grid.svelte
index 6c9e22081..768f6fbc7 100644
--- a/src/routes/console/project-[project]/databases/grid.svelte
+++ b/src/routes/console/project-[project]/databases/grid.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { CardContainer, GridItem1, ID } from '$lib/components';
+    import { CardContainer, GridItem1, Id } from '$lib/components';
     import type { PageData } from './$types';
     export let data: PageData;
     export let showCreate = false;
@@ -12,7 +12,7 @@
     {#each data.databases.databases as database}
         <GridItem1 href={`${base}/console/project-${project}/databases/database-${database.$id}`}>
             <svelte:fragment slot="title">{database.name}</svelte:fragment>
-            <ID value={database.$id}>{database.$id}</ID>
+            <Id value={database.$id}>{database.$id}</Id>
         </GridItem1>
     {/each}
     <svelte:fragment slot="empty">
diff --git a/src/routes/console/project-[project]/databases/table.svelte b/src/routes/console/project-[project]/databases/table.svelte
index 26cd39296..401364401 100644
--- a/src/routes/console/project-[project]/databases/table.svelte
+++ b/src/routes/console/project-[project]/databases/table.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { ID } from '$lib/components';
+    import { Id } from '$lib/components';
     import {
         Table,
         TableBody,
@@ -36,9 +36,9 @@
                         {#if column.id === '$id'}
                             {#key $columns}
                                 <TableCell width={column.width} title={column.title}>
-                                    <ID value={database.$id}>
+                                    <Id value={database.$id}>
                                         {database.$id}
-                                    </ID>
+                                    </Id>
                                 </TableCell>
                             {/key}
                         {:else if column.id === 'name'}
diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte
index 673c74635..66b23203d 100644
--- a/src/routes/console/project-[project]/functions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/+page.svelte
@@ -7,7 +7,7 @@
         GridItem1,
         Heading,
         PaginationWithLimit,
-        ID
+        Id
     } from '$lib/components';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
@@ -76,7 +76,7 @@
                             </li>
                         {/if}
                     </svelte:fragment>
-                    <ID value={func.$id} event="function">{func.$id}</ID>
+                    <Id value={func.$id} event="function">{func.$id}</Id>
                 </GridItem1>
             {/each}
             <svelte:fragment slot="empty">
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
index 2edda4238..4bf39c827 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
@@ -8,7 +8,7 @@
         Status,
         Heading,
         PaginationWithLimit,
-        ID
+        Id
     } from '$lib/components';
     import {
         TableHeader,
@@ -100,14 +100,14 @@
                     <div>
                         <div class="u-flex u-gap-12 u-cross-center">
                             <p><b>Function ID: </b></p>
-                            <ID value={$func.$id}><b>{$func.$id}</b></ID>
+                            <Id value={$func.$id}><b>{$func.$id}</b></Id>
                         </div>
 
                         <div class="u-flex u-gap-12 u-cross-center">
                             <p>Deployment ID:</p>
-                            <ID value={$func.deployment}>
+                            <Id value={$func.deployment}>
                                 {$func.deployment}
-                            </ID>
+                            </Id>
                         </div>
                     </div>
                 </div>
@@ -168,7 +168,7 @@
                         {#if deployment.$id !== $func.deployment}
                             <TableRow>
                                 <TableCell width={150} title="Deployment ID">
-                                    <ID value={deployment.$id}>{deployment.$id}</ID>
+                                    <Id value={deployment.$id}>{deployment.$id}</Id>
                                 </TableCell>
                                 <TableCellText width={140} title="Created">
                                     {toLocaleDateTime(deployment.$createdAt)}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
index 83ddef413..fb36561ff 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { EmptySearch, Heading, ID, PaginationWithLimit, Status } from '$lib/components';
+    import { EmptySearch, Heading, Id, PaginationWithLimit, Status } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
@@ -68,7 +68,7 @@
                 {#each data.executions.executions as execution}
                     <TableRow>
                         <TableCell width={150} title="Execution ID">
-                            <ID value={execution.$id}>{execution.$id}</ID>
+                            <Id value={execution.$id}>{execution.$id}</Id>
                         </TableCell>
                         <TableCellText width={140} title="Created">
                             {toLocaleDateTime(execution.$createdAt)}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/header.svelte b/src/routes/console/project-[project]/functions/function-[function]/header.svelte
index 8c0ccd3fd..c878a4b00 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/header.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { ID, Tab, Tabs } from '$lib/components';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { func } from './store';
@@ -40,7 +40,7 @@
         <CoverTitle href={`/console/project-${projectId}/functions`}>
             {$func?.name}
         </CoverTitle>
-        <ID value={$func?.$id} event="function">Function ID</ID>
+        <Id value={$func?.$id} event="function">Function ID</Id>
     </svelte:fragment>
 
     <Tabs>
diff --git a/src/routes/console/project-[project]/overview/header.svelte b/src/routes/console/project-[project]/overview/header.svelte
index f946df146..b3cedf116 100644
--- a/src/routes/console/project-[project]/overview/header.svelte
+++ b/src/routes/console/project-[project]/overview/header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ID } from '$lib/components';
+    import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { project } from '../store';
 </script>
@@ -9,6 +9,6 @@
         <CoverTitle>
             {$project?.name}
         </CoverTitle>
-        <ID value={$project.$id}>{$project.$id}</ID>
+        <Id value={$project.$id}>{$project.$id}</Id>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/header.svelte b/src/routes/console/project-[project]/overview/keys/[key]/header.svelte
index 405ea7f39..6de84e28a 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/header.svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { ID } from '$lib/components';
+    import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { key } from './store';
 
@@ -12,6 +12,6 @@
         <CoverTitle href={`/console/project-${projectId}/overview/keys`}>
             {$key?.name}
         </CoverTitle>
-        <ID value={$key?.secret}>API Key Secret</ID>
+        <Id value={$key?.secret}>API Key Secret</Id>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
index b1f8509f9..9a09cbb01 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { ID } from '$lib/components';
+    import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { webhook } from './store';
 
@@ -12,6 +12,6 @@
         <CoverTitle href={`/console/project-${projectId}/settings/webhooks`}>
             {$webhook?.name}
         </CoverTitle>
-        <ID value={$webhook?.$id} event="webhook">Webhook ID</ID>
+        <Id value={$webhook?.$id} event="webhook">Webhook ID</Id>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte
index 37464916a..826598d66 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/+page.svelte
@@ -8,7 +8,7 @@
         CardContainer,
         Heading,
         PaginationWithLimit,
-        ID
+        Id
     } from '$lib/components';
     import { Pill } from '$lib/elements';
     import Create from './create.svelte';
@@ -54,7 +54,7 @@
                         {/if}
                     </svelte:fragment>
 
-                    <ID value={bucket.$id}>{bucket.$id}</ID>
+                    <Id value={bucket.$id}>{bucket.$id}</Id>
 
                     <svelte:fragment slot="icons">
                         <li>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
index c268f6903..95de7c19e 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Box, Heading, Alert, ID } from '$lib/components';
+    import { CardGrid, Box, Heading, Alert, Id } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { file } from './store';
@@ -89,7 +89,7 @@
                 </a>
                 <div class="u-flex u-flex-vertical u-gap-16">
                     <Heading tag="h2" size="7">{$file.name}</Heading>
-                    <ID value={getView($file.$id)}>File URL</ID>
+                    <Id value={getView($file.$id)}>File URL</Id>
                 </div>
             </div>
             <svelte:fragment slot="aside">
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/header.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
index 918b77be5..7a301a86d 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { ID } from '$lib/components';
+    import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { file } from './store';
 
@@ -13,6 +13,6 @@
         <CoverTitle href={`/console/project-${projectId}/storage/bucket-${bucketId}`}>
             {$file?.name}
         </CoverTitle>
-        <ID value={$file?.$id} event="file">{$file?.$id}</ID>
+        <Id value={$file?.$id} event="file">{$file?.$id}</Id>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/header.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/header.svelte
index d5d20c8a1..0422235be 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/header.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { ID, Tab, Tabs } from '$lib/components';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { bucket } from './store';
@@ -34,7 +34,7 @@
         <CoverTitle href={`/console/project-${projectId}/storage`}>
             {$bucket?.name}
         </CoverTitle>
-        <ID value={$bucket?.$id} event="bucket">Bucket ID</ID>
+        <Id value={$bucket?.$id} event="bucket">Bucket ID</Id>
     </svelte:fragment>
 
     <Tabs>