diff --git a/src/lib/components/copyInput.svelte b/src/lib/components/copyInput.svelte
new file mode 100644
index 000000000..7eb0900e7
--- /dev/null
+++ b/src/lib/components/copyInput.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { addNotification } from '$lib/stores/notifications';
+
+    export let value: string;
+
+    let showTooltip = false;
+
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            showTooltip = true;
+            setTimeout(() => {
+                showTooltip = false;
+            }, 1000);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    };
+</script>
+
+<div class="input-text-wrapper is-with-end-button">
+    <input {value} type="text" class="input-text" disabled />
+    <button type="button" class="input-button tooltip" aria-label="Click to copy." on:click={copy}>
+        <span class="icon-duplicate" aria-hidden="true" />
+        <div class="tootip">
+            {#if showTooltip}
+                <span class="tooltip-popup" style={`display: block`} role="tooltip"> Copied </span>
+            {/if}
+        </div>
+    </button>
+</div>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index b1ecf9f35..e261beb37 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -5,7 +5,7 @@ export { default as CardGrid } from './cardGrid.svelte';
 export { default as Tile } from './tile.svelte';
 export { default as Tiles } from './tiles.svelte';
 export { default as Back } from './back.svelte';
-export { default as Copy } from './copy.svelte';
+export { default as CopyInput } from './copyInput.svelte';
 export { default as UploadBox } from './uploadBox.svelte';
 export { default as List } from './list.svelte';
 export { default as ListItem } from './listItem.svelte';
diff --git a/src/routes/console/[project]/database/collection/[collection]/document/[document]/index.svelte b/src/routes/console/[project]/database/collection/[collection]/document/[document]/index.svelte
index 0767773f4..9222b68e6 100644
--- a/src/routes/console/[project]/database/collection/[collection]/document/[document]/index.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/document/[document]/index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Card, Copy } from '$lib/components';
+    import { Card, CopyInput } from '$lib/components';
     import { Button, Form } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -45,7 +45,7 @@
 <Card>
     {#if $doc}
         <Form on:submit={updateDocument}>
-            <Copy value={$doc.$id} />
+            <CopyInput value={$doc.$id} />
             <Document />
             <Button submit>Update</Button>
         </Form>
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_update.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_update.svelte
index 07f20996b..8def0ed23 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_update.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_update.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Copy, Modal } from '$lib/components';
+    import { CopyInput, Modal } from '$lib/components';
     import { Button, Form, InputTags } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -33,7 +33,7 @@
 <Form on:submit={updateFile}>
     <Modal bind:show={showUpdate}>
         <svelte:fragment slot="header">Update File</svelte:fragment>
-        <Copy value={file.$id} />
+        <CopyInput value={file.$id} />
         <InputTags
             bind:tags={file.$read}
             label="Read Access"
diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/users/_appleOAuth.svelte
index 5bb662cc6..06c560898 100644
--- a/src/routes/console/[project]/users/_appleOAuth.svelte
+++ b/src/routes/console/[project]/users/_appleOAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy, Alert } from '$lib/components';
+    import { Modal, CopyInput, Alert } from '$lib/components';
     import {
         Button,
         InputText,
@@ -79,7 +79,7 @@
             </Alert>
             <div>
                 <p>URI</p>
-                <Copy
+                <CopyInput
                     value={`${
                         sdkForConsole.config.endpoint
                     }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
diff --git a/src/routes/console/[project]/users/_auth0OAuth.svelte b/src/routes/console/[project]/users/_auth0OAuth.svelte
index 43a9170f7..9294b1af7 100644
--- a/src/routes/console/[project]/users/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/users/_auth0OAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy, Alert } from '$lib/components';
+    import { Modal, CopyInput, Alert } from '$lib/components';
     import {
         Button,
         InputPassword,
@@ -78,7 +78,7 @@
             </Alert>
             <div>
                 <p>URI</p>
-                <Copy
+                <CopyInput
                     value={`${
                         sdkForConsole.config.endpoint
                     }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/users/_mainOAuth.svelte
index 7b0b7c6f9..c0b4b7b93 100644
--- a/src/routes/console/[project]/users/_mainOAuth.svelte
+++ b/src/routes/console/[project]/users/_mainOAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy, Alert } from '$lib/components';
+    import { Modal, CopyInput, Alert } from '$lib/components';
     import {
         Button,
         InputPassword,
@@ -69,7 +69,7 @@
             </Alert>
             <div>
                 <p>URI</p>
-                <Copy
+                <CopyInput
                     value={`${
                         sdkForConsole.config.endpoint
                     }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
diff --git a/src/routes/console/[project]/users/_microsoftOAuth.svelte b/src/routes/console/[project]/users/_microsoftOAuth.svelte
index 4ea75b83b..10a549edf 100644
--- a/src/routes/console/[project]/users/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/users/_microsoftOAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy, Alert } from '$lib/components';
+    import { Modal, CopyInput, Alert } from '$lib/components';
     import {
         Button,
         InputPassword,
@@ -78,7 +78,7 @@
             </Alert>
             <div>
                 <p>URI</p>
-                <Copy
+                <CopyInput
                     value={`${
                         sdkForConsole.config.endpoint
                     }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
diff --git a/src/routes/console/[project]/users/_oktaOAuth.svelte b/src/routes/console/[project]/users/_oktaOAuth.svelte
index ca94ce065..2f842f6c1 100644
--- a/src/routes/console/[project]/users/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/users/_oktaOAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy, Alert } from '$lib/components';
+    import { Modal, CopyInput, Alert } from '$lib/components';
     import {
         Button,
         InputPassword,
@@ -86,7 +86,7 @@
             </Alert>
             <div>
                 <p>URI</p>
-                <Copy
+                <CopyInput
                     value={`${
                         sdkForConsole.config.endpoint
                     }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />