diff --git a/src/lib/components/apiEndpoint.svelte b/src/lib/components/apiEndpoint.svelte
new file mode 100644
index 0000000000..33e70341d0
--- /dev/null
+++ b/src/lib/components/apiEndpoint.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { Copy } from '.';
+    import { Icon, Tag } from '@appwrite.io/pink-svelte';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectEndpoint } from '$lib/helpers/project';
+</script>
+
+<Copy value={getProjectEndpoint()} copyText="Copy endpoint">
+    <Tag size="xs" variant="code">
+        <Icon icon={IconDuplicate} size="s" slot="start" />
+        <span style:white-space="nowrap" style:overflow="hidden" style:word-break="break-all">
+            API endpoint
+        </span>
+    </Tag>
+</Copy>
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index c178913c76..d9a619e013 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -57,6 +57,7 @@
     disabled={tooltipDisabled}
     portal={tooltipPortal}
     delay={tooltipDelay}
+    maxWidth="500px"
     placement={tooltipPlacement}>
     <span
         data-private
diff --git a/src/lib/components/id.svelte b/src/lib/components/id.svelte
index c756ee8f6a..24fc4205d4 100644
--- a/src/lib/components/id.svelte
+++ b/src/lib/components/id.svelte
@@ -53,10 +53,11 @@
     export let tooltipPortal = false;
     export let tooltipDelay: number = 0;
     export let tooltipPlacement: TooltipPlacement = undefined;
+    export let copyText: string | undefined = undefined;
 </script>
 
 {#key value}
-    <Copy {value} {event} {tooltipPortal} {tooltipDelay} {tooltipPlacement}>
+    <Copy {value} {event} {tooltipPortal} {tooltipDelay} {tooltipPlacement} {copyText}>
         <Tag size="xs" variant="code">
             <Icon icon={IconDuplicate} size="s" slot="start" />
             <span
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 47afdf41ad..528706be6a 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -82,6 +82,7 @@ export { default as BottomSheet } from './bottom-sheet/index';
 export { default as Confirm } from './confirm.svelte';
 export { default as UsageCard } from './usageCard.svelte';
 export { default as ViewToggle } from './viewToggle.svelte';
+export { default as ApiEndpoint } from './apiEndpoint.svelte';
 export { default as RegionEndpoint } from './regionEndpoint.svelte';
 export { default as ExpirationInput } from './expirationInput.svelte';
 export { default as EstimatedCard } from './estimatedCard.svelte';
diff --git a/src/lib/components/regionEndpoint.svelte b/src/lib/components/regionEndpoint.svelte
index aeaef43de9..3d9bae1390 100644
--- a/src/lib/components/regionEndpoint.svelte
+++ b/src/lib/components/regionEndpoint.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { Copy } from '.';
     import { sdk } from '$lib/stores/sdk';
-    import { Layout, Tag } from '@appwrite.io/pink-svelte';
+    import { Icon, Tag } from '@appwrite.io/pink-svelte';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
     import { Flag, type Models } from '@appwrite.io/console';
-    import { truncateText } from '$lib/components/id.svelte';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { getProjectEndpoint } from '$lib/helpers/project';
 
@@ -21,28 +21,28 @@
 </script>
 
 {#if region}
-    <Copy value={getProjectEndpoint()} copyText="Copy endpoint">
-        <Tag size="xs" variant="default">
-            <Layout.Stack direction="row" gap="s" alignItems="center" inline>
-                {#if flagSrc}
-                    <img
-                        width={16}
-                        height={12}
-                        src={flagSrc}
-                        alt={region?.name}
-                        style:border-radius="2.5px" />
-                {/if}
-
-                <span
-                    style:white-space="nowrap"
-                    class="text u-line-height-1-5"
-                    style:overflow="hidden"
-                    style:word-break="break-all"
-                    use:truncateText
-                    style:font-family="unset">
-                    {region?.name}
-                </span>
-            </Layout.Stack>
+    <Copy value={getProjectEndpoint()} copyText={`Copy endpoint (${region.name})`}>
+        <Tag size="xs" variant="code">
+            <Icon icon={IconDuplicate} size="s" slot="start" />
+            <span class="endpoint-label"> API endpoint </span>
+            {#if flagSrc}
+                <img class="region-flag" src={flagSrc} alt={region?.name} />
+            {/if}
         </Tag>
     </Copy>
 {/if}
+
+<style>
+    .endpoint-label {
+        white-space: nowrap;
+        overflow: hidden;
+        word-break: break-all;
+    }
+
+    .region-flag {
+        width: 16px;
+        height: 12px;
+        border-radius: 2.5px;
+        margin-inline-start: 6px;
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
index 0df14759c5..0a2d0e88b5 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
@@ -28,7 +28,7 @@
 
     async function create() {
         try {
-            const { $id } = await sdk.forConsole.projects.createKey({
+            const { $id, secret } = await sdk.forConsole.projects.createKey({
                 projectId,
                 name,
                 scopes,
@@ -45,7 +45,18 @@
             );
             addNotification({
                 message: `API key has been created`,
-                type: 'success'
+                type: 'success',
+                buttons: [
+                    {
+                        name: 'Copy API key',
+                        method: () => navigator.clipboard.writeText(secret)
+                    },
+                    {
+                        name: 'Copy endpoint',
+                        method: () =>
+                            navigator.clipboard.writeText(sdk.forConsole.client.config.endpoint)
+                    }
+                ]
             });
         } catch (error) {
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte b/src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte
index 0b4b527d63..5713e9e50b 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte
@@ -3,6 +3,10 @@
     import { page } from '$app/state';
     import { Cover, CoverTitle } from '$lib/layout';
     import { key } from './store';
+    import { RegionEndpoint, Copy } from '$lib/components';
+    import { Layout, Tag, Icon } from '@appwrite.io/pink-svelte';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
+    import { projectRegion } from '../../../store';
 
     const projectId = page.params.project;
 </script>
@@ -12,5 +16,23 @@
         <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/overview/api-keys`}>
             {$key?.name}
         </CoverTitle>
+        <Layout.Stack direction="row" inline>
+            {#if $key?.secret}
+                <Copy value={$key.secret} copyText="Copy API secret">
+                    <Tag size="xs" variant="code">
+                        <Icon icon={IconDuplicate} size="s" slot="start" />
+                        <span
+                            style:white-space="nowrap"
+                            style:overflow="hidden"
+                            style:word-break="break-all">
+                            API secret
+                        </span>
+                    </Tag>
+                </Copy>
+            {/if}
+            {#if $projectRegion}
+                <RegionEndpoint region={$projectRegion} />
+            {/if}
+        </Layout.Stack>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-sdk-dark.png b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-sdk-dark.png
new file mode 100644
index 0000000000..e778c55b9e
Binary files /dev/null and b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-sdk-dark.png differ
diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/platform-sdk.jpg b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-sdk.jpg
new file mode 100644
index 0000000000..b891d6a12c
Binary files /dev/null and b/src/routes/(console)/project-[region]-[project]/overview/assets/platform-sdk.jpg differ
diff --git a/src/routes/(console)/project-[region]-[project]/overview/header.svelte b/src/routes/(console)/project-[region]-[project]/overview/header.svelte
index 8a412281c1..6456510b29 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/header.svelte
@@ -28,8 +28,10 @@
                     </span>
                 </Typography.Title>
                 <Layout.Stack direction="row" inline>
-                    <Id value={$project.$id}>{$project.$id}</Id>
-                    <RegionEndpoint region={$projectRegion} />
+                    <Id value={$project.$id} copyText="Copy project ID">{$project.$id}</Id>
+                    {#if $projectRegion}
+                        <RegionEndpoint region={$projectRegion} />
+                    {/if}
                 </Layout.Stack>
             </Layout.Stack>
         </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
index c1c3811e4b..d3e4239024 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
@@ -14,12 +14,7 @@
     import { app } from '$lib/stores/app';
     import AuthPreview from './assets/auth-preview.svg';
     import AuthPreviewDark from './assets/auth-preview-dark.svg';
-    import {
-        IconArrowRight,
-        IconNodeJs,
-        IconPhp,
-        IconPython
-    } from '@appwrite.io/pink-icons-svelte';
+    import { IconArrowRight } from '@appwrite.io/pink-icons-svelte';
     import DatabaseImgSource from './assets/database.png';
     import DatabaseImgSourceDark from './assets/database-dark.png';
     import DiscordImgSource from './assets/discord.png';
@@ -31,9 +26,10 @@
     import PlatformAndroidImgSourceDark from './assets/platform-android-dark.svg';
     import PlatformFlutterImgSource from './assets/platform-flutter.svg';
     import PlatformFlutterImgSourceDark from './assets/platform-flutter-dark.svg';
+    import PlatformSdkImgSource from './assets/platform-sdk.jpg';
+    import PlatformSdkImgSourceDark from './assets/platform-sdk-dark.png';
     import { base } from '$app/paths';
     import { isSmallViewport } from '$lib/stores/viewport';
-    import { AvatarGroup } from '$lib/components';
     import type { Models } from '@appwrite.io/console';
     import { getPlatformInfo } from '$lib/helpers/platform';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -103,7 +99,9 @@
                                 </Layout.Stack>
                             </div>
                             <Layout.Stack gap="l">
-                                <Layout.Stack gap="l" direction="row">
+                                <Layout.Stack
+                                    gap="l"
+                                    direction={$isSmallViewport ? 'column' : 'row'}>
                                     <Card.Button
                                         on:click={() => {
                                             openPlatformWizard(0, platformMap.get('Web'));
@@ -341,17 +339,34 @@
                                         </Layout.Stack>
                                     </Card.Button>
                                 </Layout.Stack>
-                                <Layout.Stack direction="row" gap="xxs" alignItems="center">
-                                    <Typography.Text>Or connect</Typography.Text>
-                                    <Link.Button variant="muted" on:click={createKey}
-                                        >server side</Link.Button>
-                                    <div style:padding-inline-start="8px">
-                                        <AvatarGroup
-                                            icons={[IconPython, IconNodeJs, IconPhp]}
-                                            total={7}
-                                            size="s" />
-                                    </div>
-                                </Layout.Stack>
+                                <span class="with-separators eyebrow-heading-3">or</span>
+
+                                <Card.Button on:click={createKey} padding="none">
+                                    <Layout.Stack gap="xl">
+                                        <div
+                                            class="card-top-image api-key-card-image"
+                                            style:background-image={`url('${
+                                                $app.themeInUse === 'dark'
+                                                    ? PlatformSdkImgSourceDark
+                                                    : PlatformSdkImgSource
+                                            }')`}>
+                                            <Layout.Stack
+                                                direction="row"
+                                                alignItems="center"
+                                                justifyContent="space-between">
+                                                <Layout.Stack gap="xxs">
+                                                    <Typography.Title size="s"
+                                                        >Create API key</Typography.Title>
+                                                    <Typography.Text
+                                                        >Connect your server or backend to Appwrite</Typography.Text>
+                                                </Layout.Stack>
+                                                <div class="arrow-icon">
+                                                    <Icon icon={IconArrowRight} size="s" />
+                                                </div>
+                                            </Layout.Stack>
+                                        </div>
+                                    </Layout.Stack>
+                                </Card.Button>
                             </Layout.Stack>
                         </Layout.Stack></Step.Item>
                     <Step.Item state="next"
@@ -684,6 +699,24 @@
             background-position: bottom;
             background-repeat: no-repeat;
         }
+        .api-key-card-image {
+            background-size: cover;
+            background-position: right center;
+            background-repeat: no-repeat;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            min-height: 160px;
+            border-radius: var(--border-radius-m);
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            align-items: flex-start;
+            padding: var(--base-16, 16px);
+            @media (min-width: 1200px) {
+                min-height: 187px;
+            }
+        }
         .full-height-card {
             height: 100%;
         }