diff --git a/src/lib/components/backupRestoreBox.svelte b/src/lib/components/backupRestoreBox.svelte
index 1598341f7..716bfba12 100644
--- a/src/lib/components/backupRestoreBox.svelte
+++ b/src/lib/components/backupRestoreBox.svelte
@@ -9,8 +9,7 @@
     import { goto, invalidate } from '$app/navigation';
     import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
-    import { base } from '$app/paths';
-    import { getProjectId } from '$lib/helpers/project';
+    import { getProjectId, getProjectRoute } from '$lib/helpers/project';
     import { toLocaleDate } from '$lib/helpers/date';
     import { Typography } from '@appwrite.io/pink-svelte';
 
@@ -34,8 +33,6 @@
 
     function showRestoreNotification(newDatabaseId: string, newDatabaseName: string) {
         if (newDatabaseId && newDatabaseName && lastDatabaseRestorationId !== newDatabaseId) {
-            const region = page.params.region;
-            const project = page.params.project;
             lastDatabaseRestorationId = newDatabaseId;
 
             addNotification({
@@ -46,9 +43,7 @@
                     {
                         name: 'View restored data',
                         method: () => {
-                            goto(
-                                `${base}/project-${region}-${project}/databases/database-${newDatabaseId}`
-                            );
+                            goto(getProjectRoute(`/databases/database-${newDatabaseId}`));
                         }
                     }
                 ]
diff --git a/src/lib/components/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte
index 0951839d8..72609a162 100644
--- a/src/lib/components/breadcrumbs.svelte
+++ b/src/lib/components/breadcrumbs.svelte
@@ -15,6 +15,7 @@
     import { newOrgModal } from '$lib/stores/organization';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import { page } from '$app/stores';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     type Project = {
         name: string;
@@ -141,7 +142,7 @@
                                     if (index < 4) {
                                         return {
                                             name: project.name,
-                                            href: `${base}/project-${project.region}-${project.$id}/overview`
+                                            href: getProjectRoute(project, '/overview')
                                         };
                                     } else if (index === 4) {
                                         return {
@@ -317,8 +318,7 @@
                         {#if index < 4}
                             <div use:melt={$itemProjects}>
                                 <ActionMenu.Root>
-                                    <ActionMenu.Item.Anchor
-                                        href={`${base}/project-${project.region}-${project.$id}`}>
+                                    <ActionMenu.Item.Anchor href={getProjectRoute(project)}>
                                         {project.name}
                                     </ActionMenu.Item.Anchor>
                                 </ActionMenu.Root>
diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index 8c0e48b8a..5726bdeae 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { goto, invalidate } from '$app/navigation';
-    import { getProjectId } from '$lib/helpers/project';
+    import { getProjectId, getProjectRoute } from '$lib/helpers/project';
     import { writable, type Writable } from 'svelte/store';
     import { addNotification } from '$lib/stores/notifications';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
@@ -32,7 +31,7 @@
         importData: Payload
     ) {
         await invalidate(Dependencies.DOCUMENTS);
-        const url = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}`;
+        const url = getProjectRoute(`/databases/database-${databaseId}/collection-${collectionId}`);
 
         // extract clean message from nested backend error.
         const match = importData.errors.join('').match(/message: '(.*)' Message:/i);
diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index df2d78f78..701fc294a 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { EmptySearch, Id } from '.';
     import { onMount } from 'svelte';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import { goto } from '$app/navigation';
@@ -30,6 +29,7 @@
     import { isSmallViewport } from '$lib/stores/viewport';
     import { IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
     import { showCreateBucket } from '$routes/(console)/project-[region]-[project]/storage/+page.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show: boolean;
     export let mimeTypeQuery: string = 'image/';
@@ -531,9 +531,7 @@
                                         <Button
                                             secondary
                                             on:click={async () => {
-                                                await goto(
-                                                    `${base}/project-${page.params.region}-${page.params.project}/storage`
-                                                );
+                                                await goto(getProjectRoute('/storage'));
                                                 $showCreateBucket = true;
                                             }}>
                                             Create bucket
diff --git a/src/lib/components/logs/loggingAlert.svelte b/src/lib/components/logs/loggingAlert.svelte
index 7d1f798ee..842a94735 100644
--- a/src/lib/components/logs/loggingAlert.svelte
+++ b/src/lib/components/logs/loggingAlert.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Link } from '$lib/elements';
     import { Alert } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let product: 'site' | 'function';
 </script>
@@ -10,16 +10,14 @@
 {#if product === 'site'}
     <Alert.Inline status="info" title="Your logs are disabled">
         To view logs and errors, enable them in your
-        <Link
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/settings`}>
+        <Link href={getProjectRoute(`/sites/site-${page.params.site}/settings`)}>
             site settings</Link
         >.
     </Alert.Inline>
 {:else if product === 'function'}
     <Alert.Inline status="info" title="Your execution logs are disabled">
         To view execution logs and errors, enable them in your
-        <Link
-            href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/settings`}>
+        <Link href={getProjectRoute(`/functions/function-${page.params.function}/settings`)}>
             function settings</Link
         >.
     </Alert.Inline>
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 02ac75d28..6238e6b61 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -55,6 +55,7 @@
     import { user } from '$lib/stores/user';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import type { HTMLAttributes } from 'svelte/elements';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let showSupport = false;
 
@@ -135,9 +136,9 @@
         {#if selectedProject && selectedProject.pingCount === 0}
             <div class="only-desktop" style:margin-inline-start="-16px">
                 <Button.Anchor
-                    href={`${base}/project-${selectedProject.region}-${selectedProject.$id}/get-started`}
+                    size="xs"
                     variant="secondary"
-                    size="xs">Connect</Button.Anchor>
+                    href={getProjectRoute(selectedProject, '/get-started')}>Connect</Button.Anchor>
             </div>
         {/if}
     </div>
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index 31a6fd4db..840541803 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -14,8 +14,8 @@
     } from '@appwrite.io/pink-svelte';
     import Avatar from '../avatar.svelte';
     import { IconAnonymous, IconExternalLink, IconMinusSm } from '@appwrite.io/pink-icons-svelte';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let role: string;
 
@@ -88,7 +88,7 @@
                             {/if}
                             <div>
                                 <Button.Anchor
-                                    href={`${base}/project-${page.params.region}-${page.params.project}/auth/user-${data?.$id}`}
+                                    href={getProjectRoute(`/auth/user-${data?.$id}`)}
                                     size="xs"
                                     target="_blank"
                                     variant="secondary">
@@ -100,7 +100,7 @@
                             <Typography.Text>Members: {data?.total}</Typography.Text>
                             <div>
                                 <Button.Anchor
-                                    href={`${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${data?.$id}`}
+                                    href={getProjectRoute(`/auth/teams/team-${data?.$id}`)}
                                     size="s"
                                     target="_blank"
                                     variant="secondary">
diff --git a/src/lib/helpers/project.ts b/src/lib/helpers/project.ts
index 58cfe7bcc..77d4716c2 100644
--- a/src/lib/helpers/project.ts
+++ b/src/lib/helpers/project.ts
@@ -1,6 +1,8 @@
+import { base } from '$app/paths';
 import { page } from '$app/state';
 import { get } from 'svelte/store';
 import { sdk } from '$lib/stores/sdk';
+import type { Models } from '@appwrite.io/console';
 import { projectRegion } from '$routes/(console)/project-[region]-[project]/store';
 
 /**
@@ -42,3 +44,48 @@ export function getProjectEndpoint(): string {
 
     return currentProjectRegion ? `${protocol}//${currentProjectRegion.$id}.${hostname}/v1` : href;
 }
+
+/**
+ * A minimal project shape with -
+ * 1. `$id` and
+ * 2. optional `region`.
+ *
+ * Compatible with full `Models.Project`.
+ */
+type CompatibleProjectInstance =
+    | Models.Project
+    | {
+          $id: string;
+          region?: string;
+      };
+
+/**
+ * Generates the project route URL, optionally using a custom project and/or path.
+ * Falls back to the current route's project and region if not provided.
+ *
+ * @param projectOrPath Either a project object or a path string (e.g., "/databases").
+ * @param maybePath Optional path string if the first argument is a project.
+ *
+ * @returns Project route URL (e.g., "/project-fra-console/databases").
+ */
+export function getProjectRoute(
+    projectOrPath?: string | CompatibleProjectInstance,
+    maybePath?: string
+): string {
+    let withPath: string | undefined;
+    let projectInstance: CompatibleProjectInstance | undefined;
+
+    if (typeof projectOrPath === 'string') {
+        withPath = projectOrPath;
+        projectInstance = undefined;
+    } else {
+        withPath = maybePath;
+        projectInstance = projectOrPath;
+    }
+
+    const projectId = projectInstance?.$id ?? page?.params?.project;
+    const projectRegion = projectInstance?.region ?? page?.params?.region ?? 'default';
+    const suffix = withPath?.trim() ? (withPath.startsWith('/') ? withPath : `/${withPath}`) : '';
+
+    return `${base}/project-${projectRegion}-${projectId}${suffix}`;
+}
diff --git a/src/lib/pages/domains/index.svelte b/src/lib/pages/domains/index.svelte
index 7db400506..c9d077fd6 100644
--- a/src/lib/pages/domains/index.svelte
+++ b/src/lib/pages/domains/index.svelte
@@ -28,8 +28,7 @@
         IconRefresh,
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
-    import { page } from '$app/state';
-    import { base } from '$app/paths';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let rules: Models.ProxyRuleList;
     export let dependency: Dependencies;
@@ -60,10 +59,7 @@
             <SearchQuery placeholder="Search by name" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <Button
-                href={`${base}/project-${page.params.region}-${page.params.project}/settings/domains/create`}
-                event="create_user"
-                size="s">
+            <Button href={getProjectRoute('/settings/domains/create')} event="create_user" size="s">
                 <Icon size="s" icon={IconPlus} slot="start" />
                 <span class="text">Create domain</span>
             </Button>
diff --git a/src/routes/(console)/(migration-wizard)/wizard.svelte b/src/routes/(console)/(migration-wizard)/wizard.svelte
index 99c23b7d2..03f5364c7 100644
--- a/src/routes/(console)/(migration-wizard)/wizard.svelte
+++ b/src/routes/(console)/(migration-wizard)/wizard.svelte
@@ -23,7 +23,6 @@
     import { regions } from '$lib/stores/organization';
     import { addNotification } from '$lib/stores/notifications';
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { migrationFormToResources } from '$lib/stores/migration';
     import { EyebrowHeading } from '$lib/components';
     import {
@@ -35,6 +34,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import { Dependencies } from '$lib/constants';
     import { filterRegions } from '$lib/helpers/regions';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     const onExit = () => {
         formData.reset();
@@ -123,9 +123,7 @@
             });
             onExit();
             await invalidate(Dependencies.PROJECTS);
-            await goto(
-                `${base}/project-${currentSelectedProject.region}-${currentSelectedProject.$id}/settings/migrations`
-            );
+            await goto(`${getProjectRoute(currentSelectedProject, '/settings/migrations')}`);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 9d7a72d6d..340e31ab9 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -54,6 +54,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import type { LayoutData } from './$types';
     import type { NavbarProject } from '$lib/components/navbar.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     function kebabToSentenceCase(str: string) {
         return str
@@ -175,9 +176,7 @@
                 ({
                     label: kebabToSentenceCase(heading),
                     async callback() {
-                        await goto(
-                            `${base}/project-${$project.region}-${$project.$id}/auth/security#${heading}`
-                        );
+                        await goto(getProjectRoute($project, `/auth/security#${heading}`));
                         scrollBy({ top: -100 });
                     },
                     disabled: !$project?.$id,
@@ -191,7 +190,7 @@
 
             keys: isOnSettingsLayout ? ['g', 'o'] : undefined,
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings`);
+                goto(getProjectRoute('/settings'));
             },
             disabled:
                 !$project?.$id || (isOnSettingsLayout && page.url.pathname.endsWith('settings')),
@@ -203,7 +202,7 @@
 
             keys: isOnSettingsLayout ? ['g', 'd'] : undefined,
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings/domains`);
+                goto(getProjectRoute('/settings/domains'));
             },
             disabled:
                 !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('domains')),
@@ -214,7 +213,7 @@
             label: 'Go to webhooks',
             keys: isOnSettingsLayout ? ['g', 'w'] : undefined,
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings/webhooks`);
+                goto(getProjectRoute('/settings/webhooks'));
             },
             disabled:
                 !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('webhooks')),
@@ -226,7 +225,7 @@
             label: 'Go to migrations',
             keys: isOnSettingsLayout ? ['g', 'm'] : undefined,
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings/migrations`);
+                goto(getProjectRoute('/settings/migrations'));
             },
             disabled:
                 !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('migrations')),
@@ -238,7 +237,7 @@
             label: 'Go to SMTP settings',
             keys: isOnSettingsLayout ? ['g', 's'] : undefined,
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings/smtp`);
+                goto(getProjectRoute('/settings/smtp'));
             },
             disabled: !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('smtp')),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte
index 61c5395fe..cb1627dbb 100644
--- a/src/routes/(console)/onboarding/create-project/+page.svelte
+++ b/src/routes/(console)/onboarding/create-project/+page.svelte
@@ -7,11 +7,11 @@
     import { Dependencies } from '$lib/constants';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { addNotification } from '$lib/stores/notifications';
     import CreateProject from '$lib/layout/createProject.svelte';
     import { loadAvailableRegions } from '$routes/(console)/regions';
     import { regions as regionsStore } from '$lib/stores/organization';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let isLoading = false;
     let id: string;
@@ -40,7 +40,7 @@
 
             setTimeout(async () => {
                 await invalidate(Dependencies.ACCOUNT);
-                goto(`${base}/project-${project.region ?? 'default'}-${project.$id}`);
+                goto(getProjectRoute(project));
             }, 3000);
         } catch (e) {
             trackError(e, Submit.ProjectCreate);
diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte
index 19090c22a..c2a961881 100644
--- a/src/routes/(console)/organization-[organization]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import CreateProject from './createProject.svelte';
@@ -39,6 +38,7 @@
     import { getPlatformInfo } from '$lib/helpers/platform';
     import CreateProjectCloud from './createProjectCloud.svelte';
     import { regions as regionsStore } from '$lib/stores/organization';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -104,7 +104,7 @@
             trackEvent(Submit.ProjectCreate, {
                 teamId: page.params.organization
             });
-            await goto(`${base}/project-${project.region}-${project.$id}/settings/migrations`);
+            await goto(getProjectRoute(project, '/settings/migrations'));
             openImportWizard();
             loading.set(false);
         } catch (e) {
@@ -155,7 +155,7 @@
                 {@const platforms = filterPlatforms(
                     project.platforms.map((platform) => getPlatformInfo(platform.type))
                 )}
-                <GridItem1 href={`${base}/project-${project.region}-${project.$id}`}>
+                <GridItem1 href={getProjectRoute(project)}>
                     <svelte:fragment slot="eyebrow">
                         {project?.platforms?.length ? project?.platforms?.length : 'No'} apps
                     </svelte:fragment>
diff --git a/src/routes/(console)/organization-[organization]/createProject.svelte b/src/routes/(console)/organization-[organization]/createProject.svelte
index 2e45d77c2..5d9a33b67 100644
--- a/src/routes/(console)/organization-[organization]/createProject.svelte
+++ b/src/routes/(console)/organization-[organization]/createProject.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal, CustomId } from '$lib/components';
     import { InputText, Button } from '$lib/elements/forms';
@@ -10,6 +9,7 @@
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { Icon, Layout, Tag } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show = false;
     export let teamId: string;
@@ -36,7 +36,7 @@
                 type: 'success',
                 message: `${name} has been created`
             });
-            await goto(`${base}/project-${project.region ?? 'default'}-${project.$id}`);
+            await goto(getProjectRoute(project));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.ProjectCreate);
diff --git a/src/routes/(console)/organization-[organization]/createProjectCloud.svelte b/src/routes/(console)/organization-[organization]/createProjectCloud.svelte
index 16f5aa450..f5bd4954d 100644
--- a/src/routes/(console)/organization-[organization]/createProjectCloud.svelte
+++ b/src/routes/(console)/organization-[organization]/createProjectCloud.svelte
@@ -8,9 +8,9 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { ID, Region as ConsoleRegion, type Models, Region } from '@appwrite.io/console';
     import { Button } from '@appwrite.io/pink-svelte';
-    import { base } from '$app/paths';
     import CreateProject from '$lib/layout/createProject.svelte';
     import { Modal } from '$lib/components';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     const teamId = page.params.organization;
     export let regions: Array<Models.ConsoleRegion> = [];
@@ -18,7 +18,7 @@
 
     let id: string = null;
     let name: string = 'Appwrite project';
-    let region: string = Region.Fra;
+    let region: ConsoleRegion = Region.Fra;
 
     async function onFinish() {
         await invalidate(Dependencies.FUNCTIONS);
@@ -27,12 +27,7 @@
     async function create() {
         try {
             // TODO: fix typing once SDK is updated
-            const project = await sdk.forConsole.projects.create(
-                id ?? ID.unique(),
-                name,
-                teamId,
-                region as ConsoleRegion
-            );
+            await sdk.forConsole.projects.create(id ?? ID.unique(), name, teamId, region);
             trackEvent(Submit.ProjectCreate, {
                 customId: !!id,
                 teamId,
@@ -43,7 +38,7 @@
                 message: `${name} has been created`
             });
             await onFinish();
-            await goto(`${base}/project-${project.region}-${project.$id}`);
+            await goto(getProjectRoute());
         } catch (e) {
             addNotification({
                 type: 'error',
@@ -56,7 +51,7 @@
     onDestroy(() => {
         id = null;
         name = null;
-        region = 'fra';
+        region = ConsoleRegion.Fra;
     });
 </script>
 
diff --git a/src/routes/(console)/project-[region]-[project]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/+layout.svelte
index 0254a8cdc..540f17a44 100644
--- a/src/routes/(console)/project-[region]-[project]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/+layout.svelte
@@ -2,7 +2,7 @@
     import { BackupRestoreBox, MigrationBox, UploadBox } from '$lib/components';
     import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { project, stats } from './store';
+    import { stats } from './store';
 
     import { goto } from '$app/navigation';
     import { registerCommands, registerSearchers } from '$lib/commandCenter';
@@ -15,7 +15,6 @@
         userSearcher
     } from '$lib/commandCenter/searchers';
     import { page } from '$app/state';
-    import { base } from '$app/paths';
     import {
         canSeeBuckets,
         canSeeDatabases,
@@ -25,6 +24,7 @@
         canWriteSites
     } from '$lib/stores/roles';
     import CsvImportBox from '$lib/components/csvImportBox.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     onMount(() => {
         return realtime
@@ -42,7 +42,7 @@
         {
             label: 'Go to Auth',
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/auth`);
+                goto(getProjectRoute('/auth'));
             },
             keys: ['g', 'a'],
             group: 'navigation'
@@ -50,7 +50,7 @@
         {
             label: 'Go to Databases',
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/databases`);
+                goto(getProjectRoute('/databases'));
             },
             keys: ['g', 'd'],
             group: 'navigation',
@@ -59,7 +59,7 @@
         {
             label: 'Go to Functions',
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/functions`);
+                goto(getProjectRoute('/functions'));
             },
             keys: ['g', 'f'],
             group: 'navigation',
@@ -68,7 +68,7 @@
         {
             label: 'Go to Messaging',
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/messaging`);
+                goto(getProjectRoute('/messaging'));
             },
             keys: ['g', 'm'],
             disabled: page.url.pathname.endsWith('messaging') || !$canSeeMessages,
@@ -77,7 +77,7 @@
         {
             label: 'Go to Storage',
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/storage`);
+                goto(getProjectRoute('/storage'));
             },
             keys: ['g', 's'],
             group: 'navigation',
@@ -86,7 +86,7 @@
         {
             label: 'Go to Settings',
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings`);
+                goto(getProjectRoute('/settings'));
             },
             keys: ['g', 'e'],
             group: 'navigation',
@@ -95,7 +95,7 @@
         {
             label: 'Go to Sites',
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/sites`);
+                goto(getProjectRoute('/sites'));
             },
             keys: ['g', 'i'],
             group: 'navigation',
@@ -104,7 +104,7 @@
         {
             label: 'Go to Overview',
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}`);
+                goto(getProjectRoute());
             },
             keys: ['g', 'o'],
             group: 'navigation'
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+layout.svelte b/src/routes/(console)/project-[region]-[project]/auth/+layout.svelte
index 674167aa3..6aee41a31 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/+layout.svelte
@@ -1,23 +1,22 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { TeamsPanel, UsersPanel } from '$lib/commandCenter/panels';
     import { readOnly } from '$lib/stores/billing';
     import { canWriteTeams, canWriteUsers } from '$lib/stores/roles';
     import { GRACE_PERIOD_OVERRIDE } from '$lib/system';
-    import { project } from '../store';
     import { showCreateUser } from './+page.svelte';
     import { showCreateTeam } from './teams/+page.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: $registerCommands([
         {
             label: 'Create user',
             callback: async () => {
                 if (!page.url.pathname.endsWith('auth')) {
-                    await goto(`${base}/project-${$project.region}-${$project.$id}/auth`);
+                    await goto(getProjectRoute('/auth'));
                 }
                 showCreateUser.set(true);
             },
@@ -31,7 +30,7 @@
             label: 'Create team',
             callback: async () => {
                 if (!page.url.pathname.endsWith('teams')) {
-                    await goto(`${base}/project-${$project.region}-${$project.$id}/auth/teams`);
+                    await goto(getProjectRoute('/auth/teams'));
                 }
                 showCreateTeam.set(true);
             },
@@ -46,7 +45,7 @@
             label: 'Go to teams',
             keys: ['g', 't'],
             callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/auth/teams`);
+                goto(getProjectRoute('/auth/teams'));
             },
             group: 'navigation',
             rank: 1,
@@ -56,7 +55,7 @@
             label: 'Go to usage',
             keys: ['g', 'u'],
             callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/auth/usage`);
+                goto(getProjectRoute('/auth/usage'));
             },
             group: 'navigation',
             rank: 1,
@@ -66,7 +65,7 @@
             label: 'Go to security',
             keys: ['g', 'e'],
             callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/auth/security`);
+                goto(getProjectRoute('/auth/security'));
             },
             group: 'navigation',
             rank: 1,
@@ -76,7 +75,7 @@
             label: 'Go to settings',
             keys: ['g', 's'],
             callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/auth/settings`);
+                goto(getProjectRoute('/auth/settings'));
             },
             group: 'navigation',
             rank: 1,
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
index aa4f5702c..bd2f0b448 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
@@ -4,8 +4,6 @@
 
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import {
         AvatarInitials,
         Copy,
@@ -27,6 +25,7 @@
     import type { Column } from '$lib/helpers/types';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { View } from '$lib/helpers/load';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -47,9 +46,7 @@
     ]);
 
     async function userCreated(event: CustomEvent<Models.User<Record<string, unknown>>>) {
-        await goto(
-            `${base}/project-${page.params.region}-${page.params.project}/auth/user-${event.detail.$id}`
-        );
+        await goto(getProjectRoute(`/auth/user-${event.detail.$id}`));
     }
 </script>
 
@@ -75,9 +72,7 @@
                 {/each}
             </svelte:fragment>
             {#each data.users.users as user}
-                <Table.Row.Link
-                    href={`${base}/project-${page.params.region}-${page.params.project}/auth/user-${user.$id}`}
-                    {root}>
+                <Table.Row.Link href={getProjectRoute(`/auth/user-${user.$id}`)} {root}>
                     {#each $columns as { id } (id)}
                         <Table.Cell column={id} {root}>
                             {#if id === '$id'}
@@ -162,10 +157,7 @@
             total={data.users.total} />
     {:else if data.search}
         <EmptySearch target="users" hidePagination>
-            <Button
-                href={`${base}/project-${page.params.region}-${page.params.project}/auth`}
-                size="s"
-                secondary>Clear Search</Button>
+            <Button href={getProjectRoute('/auth')} size="s" secondary>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty
diff --git a/src/routes/(console)/project-[region]-[project]/auth/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/auth/breadcrumbs.svelte
index db806d038..71e6a9257 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/breadcrumbs.svelte
@@ -3,6 +3,7 @@
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -10,11 +11,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project?.$id}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project?.$id}/auth`,
+            href: getProjectRoute('/auth'),
             title: 'Auth'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/auth/header.svelte b/src/routes/(console)/project-[region]-[project]/auth/header.svelte
index bb425c2b5..f0fd97c0f 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/header.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { canWriteProjects } from '$lib/stores/roles';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const path = `${base}/project-${page.params.region}-${page.params.project}/auth`;
+    const path = getProjectRoute('/auth');
     const tabs = [
         {
             href: path,
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte
index cbefb02fb..800579a17 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte
@@ -3,7 +3,6 @@
 </script>
 
 <script lang="ts">
-    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import {
         Empty,
@@ -15,20 +14,18 @@
     import Create from '../createTeam.svelte';
     import { goto } from '$app/navigation';
     import { Container } from '$lib/layout';
-    import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
     import { writable } from 'svelte/store';
     import { canWriteTeams } from '$lib/stores/roles';
     import { Icon, Layout, Table } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
-    const region = page.params.region;
-    const project = page.params.project;
     const teamCreated = async (event: CustomEvent<Models.Team<Record<string, unknown>>>) => {
-        await goto(`${base}/project-${region}-${project}/auth/teams/team-${event.detail.$id}`);
+        await goto(getProjectRoute(`/auth/teams/team-${event.detail.$id}`));
     };
 </script>
 
@@ -53,9 +50,7 @@
                 <Table.Header.Cell {root}>Created</Table.Header.Cell>
             </svelte:fragment>
             {#each data.teams.teams as team}
-                <Table.Row.Link
-                    {root}
-                    href={`${base}/project-${region}-${project}/auth/teams/team-${team.$id}`}>
+                <Table.Row.Link {root} href={getProjectRoute(`/auth/teams/team-${team.$id}`)}>
                     <Table.Cell {root}>
                         <Layout.Stack direction="row" alignItems="center">
                             <AvatarInitials size="xs" name={team.name} />
@@ -79,9 +74,7 @@
             total={data.teams.total} />
     {:else if data.search}
         <EmptySearch target="teams" search={data.search} hidePagination={data.teams.total === 0}>
-            <Button secondary size="s" href={`${base}/project-${region}-${project}/auth/teams`}>
-                Clear Search
-            </Button>
+            <Button secondary size="s" href={getProjectRoute('/auth/teams')}>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte
index 3605cca75..329ce1045 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
     import { team } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/auth`,
+            href: getProjectRoute('/auth'),
             title: 'Auth'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${$team?.$id}`,
+            href: getProjectRoute(`/auth/teams/team-${$team?.$id}`),
             title: $team?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteMembership.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteMembership.svelte
index 9aa4e6685..8c7804ff2 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteMembership.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteMembership.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
@@ -8,6 +7,7 @@
     import type { Models } from '@appwrite.io/console';
     import { Typography } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     const dispatch = createEventDispatcher();
 
@@ -24,9 +24,7 @@
             showDelete = false;
             dispatch('deleted');
             trackEvent(Submit.MemberDelete);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${selectedMembership.teamId}/members`
-            );
+            await goto(getProjectRoute(`/auth/teams/team-${selectedMembership.teamId}/members`));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.MemberDelete);
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteTeam.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteTeam.svelte
index ff875ffc5..aeaf72842 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteTeam.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/deleteTeam.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     export let team: Models.Team<Record<string, unknown>>;
@@ -18,7 +18,7 @@
             await sdk.forProject(page.params.region, page.params.project).teams.delete(team.$id);
             showDelete = false;
             trackEvent(Submit.TeamDelete);
-            await goto(`${base}/project-${page.params.region}-${page.params.project}/auth/teams`);
+            await goto(getProjectRoute('/auth/teams'));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.TeamDelete);
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/header.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/header.svelte
index b6bab1f33..8f21f7717 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/header.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { team } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const path = `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${page.params.team}`;
+    const path = getProjectRoute(`/auth/teams/team-${page.params.team}`);
     const tabs = [
         {
             href: path,
@@ -30,8 +30,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle
-            href={`${base}/project-${page.params.region}-${page.params.project}/auth/teams`}>
+        <CoverTitle href={getProjectRoute('/auth/teams')}>
             {$team?.name}
         </CoverTitle>
         <Id value={$team?.$id} event="team">{$team?.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.svelte
index a7dba1d1f..138302a80 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.svelte
@@ -5,7 +5,6 @@
     import { Container } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
     import { invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import type { PageData } from './$types';
     import CreateMember from '../createMembership.svelte';
@@ -14,6 +13,7 @@
     import { Click, trackEvent } from '$lib/actions/analytics';
     import { Table, Layout, Icon } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 
@@ -21,9 +21,6 @@
     let showDelete = false;
     let selectedMembership: Models.Membership;
 
-    const region = page.params.region;
-    const project = page.params.project;
-
     async function memberCreated() {
         invalidate(Dependencies.MEMBERSHIPS);
     }
@@ -54,9 +51,7 @@
             </svelte:fragment>
             {#each data.memberships.memberships as membership}
                 {@const username = membership.userName ? membership.userName : '-'}
-                <Table.Row.Link
-                    {root}
-                    href={`${base}/project-${region}-${project}/auth/user-${membership.userId}`}>
+                <Table.Row.Link {root} href={getProjectRoute(`/auth/user-${membership.userId}`)}>
                     <Table.Cell column="name" {root}>
                         <Layout.Stack direction="row" alignItems="center">
                             <AvatarInitials size="xs" name={username} />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/+page.svelte
index d20c6c182..48d219748 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/+page.svelte
@@ -32,7 +32,6 @@
 </script>
 
 <script lang="ts">
-    import { base } from '$app/paths';
     import { CardGrid } from '$lib/components';
     import { Container } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
@@ -59,7 +58,7 @@
         EmailTemplateLocale
     } from '@appwrite.io/console';
     import { Accordion, Alert, Badge, Layout, Link, Typography } from '@appwrite.io/pink-svelte';
-    import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -76,7 +75,7 @@
 
     async function openEmail(type: string) {
         type === emailOpen ? (emailOpen = null) : (emailOpen = type);
-        $emailTemplate = await loadEmailTemplate(page.params.project, type, 'en');
+        // $emailTemplate = await loadEmailTemplate(page.params.project, type, 'en');
         $baseEmailTemplate = { ...$emailTemplate };
     }
 </script>
@@ -89,10 +88,7 @@
             title="Custom SMTP server is required for customizing emails">
             Configure a custom SMTP server to enable custom email templates and prevent emails from
             being labeled as spam.
-            <Button
-                compact
-                slot="actions"
-                href={`${base}/project-${page.params.region}-${page.params.project}/settings/smtp`}>
+            <Button compact slot="actions" href={getProjectRoute('/settings/smtp')}>
                 SMTP settings
             </Button>
         </Alert.Inline>
@@ -187,6 +183,7 @@
                         <Email2FaTemplate /></Layout.Stack>
                 </Accordion>
                 <Accordion
+                    hideDivider
                     title="Session alert"
                     bind:open={emailSessionAlertOpen}
                     on:click={(e) => {
@@ -201,11 +198,7 @@
             </Layout.Stack>
         </svelte:fragment>
         <svelte:fragment slot="actions">
-            <Button
-                href={`${base}/project-${page.params.region}-${page.params.project}/settings/smtp`}
-                secondary>
-                SMTP settings
-            </Button>
+            <Button href={getProjectRoute('/settings/smtp')} secondary>SMTP settings</Button>
         </svelte:fragment>
     </CardGrid>
     {#if isCloud && $currentPlan.emailBranding}
diff --git a/src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte b/src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte
index 4c463b0c6..bf91e8554 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte
@@ -21,12 +21,12 @@
                     {#if $app.themeInUse === 'dark'}
                         <img
                             src={EmailMobileDark}
-                            class="u-image-object-fit-cover u-only-dark u-width-full-line u-height-100-percent"
+                            class="u-image-object-fit-cover u-only-dark u-width-full-line"
                             alt="Email Signature Example" />
                     {:else}
                         <img
                             src={EmailMobileLight}
-                            class="u-image-object-fit-cover u-only-light u-width-full-line u-height-100-percent"
+                            class="u-image-object-fit-cover u-only-light u-width-full-line"
                             alt="Email Signature Example" />
                     {/if}
                 </div>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte
index 9879c54e4..0180c2573 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Container, Usage } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
     $: total = data.usersTotal;
@@ -10,7 +9,7 @@
 
 <Container>
     <Usage
-        path={`${base}/project-${page.params.region}-${page.params.project}/auth/usage`}
+        path={getProjectRoute('/auth/usage')}
         countMetadata={{
             legend: 'Users',
             title: 'Registered users'
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte
index be68f127e..4ba4e3e9d 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
     import { user } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/auth`,
+            href: getProjectRoute('/auth'),
             title: 'Auth'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/auth/user-${$user?.$id}`,
+            href: getProjectRoute(`/auth/user-${$user?.$id}`),
             title: $user?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/dangerZone.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/dangerZone.svelte
index 30ecb4d7a..3e3c04af6 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/dangerZone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/dangerZone.svelte
@@ -1,13 +1,12 @@
 <script lang="ts" context="module">
-    import { page } from '$app/state';
-    import { base } from '$app/paths';
     import { goto } from '$app/navigation';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let showDelete = writable(false);
 
     export const promptDeleteUser = (id: string) => {
         showDelete.set(true);
-        goto(`${base}/project-${page.params.region}-${page.params.project}/auth/user-${id}`);
+        goto(getProjectRoute(`/auth/user-${id}`));
     };
 </script>
 
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMembership.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMembership.svelte
index 88d2ebc1b..1337ed7c5 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMembership.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteMembership.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
@@ -9,6 +8,7 @@
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     export let selectedMembership: Models.Membership;
@@ -27,9 +27,7 @@
                 message: `Membership has been deleted`
             });
             trackEvent(Submit.MemberDelete);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/auth/user-${selectedMembership.userId}/memberships`
-            );
+            await goto(getProjectRoute(`/auth/user-${selectedMembership.userId}/memberships`));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.MemberDelete);
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteUser.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteUser.svelte
index 8c549865f..aa71632bb 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteUser.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/deleteUser.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -9,6 +8,7 @@
     import Confirm from '$lib/components/confirm.svelte';
     import { Typography } from '@appwrite.io/pink-svelte';
     import { user } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     let error: string;
@@ -21,7 +21,7 @@
                 message: `${$user.name ? $user.name : 'User'} has been deleted`
             });
             trackEvent(Submit.UserDelete);
-            await goto(`${base}/project-${page.params.region}-${page.params.project}/auth`);
+            await goto(getProjectRoute('/auth'));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.UserDelete);
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/header.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/header.svelte
index f11425ba9..a6e0a5d3d 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/header.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { user } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const path = `${base}/project-${page.params.region}-${page.params.project}/auth/user-${page.params.user}`;
+    const path = getProjectRoute(`/auth/user-${page.params.user}`);
     const tabs = [
         {
             href: path,
@@ -44,7 +44,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${page.params.project}/auth`}>
+        <CoverTitle href={getProjectRoute('/auth')}>
             {$user.name ? $user.name : '-'}
         </CoverTitle>
         <Id value={$user.$id} event="user">{$user.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte
index ea18ea0ca..888850af4 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { page } from '$app/state';
-    import { base } from '$app/paths';
     import { AvatarInitials } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -9,14 +7,12 @@
     import { trackEvent } from '$lib/actions/analytics';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Table, Layout, Empty, Card } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
     let selectedMembership: Models.Membership;
     let showDelete = false;
-
-    const region = page.params.region;
-    const project = page.params.project;
 </script>
 
 <Container>
@@ -38,7 +34,7 @@
             {#each data.memberships.memberships as membership}
                 <Table.Row.Link
                     {root}
-                    href={`${base}/project-${region}-${project}/auth/teams/team-${membership.teamId}`}>
+                    href={getProjectRoute(`/auth/teams/team-${membership.teamId}`)}>
                     <Table.Cell column="name" {root}>
                         <Layout.Stack direction="row" alignItems="center">
                             <AvatarInitials size="xs" name={membership.teamName} />
diff --git a/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte
index 0cf5fa213..73fac4020 100644
--- a/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte
@@ -4,11 +4,10 @@
     import { InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import type { Models } from '@appwrite.io/console';
-    import { project } from './store';
-    import { base } from '$app/paths';
     import { Alert, Layout, Selector, Button as PinkButton, Icon } from '@appwrite.io/pink-svelte';
     import { Link } from '$lib/elements';
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let isGlobal: boolean;
     export let product: 'function' | 'site' = 'function';
@@ -61,7 +60,7 @@
         {#if !isGlobal}
             <Alert.Inline>
                 When there is a naming conflict with a global variable in your <Link
-                    href={`${base}/project-${$project.region}-${$project.$id}/settings/variables`}>
+                    href={getProjectRoute('/settings/variables')}>
                     project settings</Link>
                 and a {product} environment variable, the global variable will be ignored.
             </Alert.Inline>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/+layout.svelte
index 7e8347e4d..3d1799a48 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/+layout.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { DatabasesPanel } from '$lib/commandCenter/panels';
-    import { project } from '../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: $registerCommands([
         {
             label: 'Go to usage',
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/databases/usage`);
+                goto(getProjectRoute('/databases/usage'));
             },
             keys: ['g', 'u'],
             disabled:
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
index df3e783aa..8060fab1a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -17,18 +15,16 @@
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import EmptySearch from '$lib/components/emptySearch.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 
     let showCreate = false;
     let isCreationDisabled = false;
-    const project = page.params.project;
 
     async function handleCreate(event: CustomEvent<Models.Database>) {
         showCreate = false;
-        await goto(
-            `${base}/project-${page.params.region}-${project}/databases/database-${event.detail.$id}`
-        );
+        await goto(getProjectRoute(`/databases/database-${event.detail.$id}`));
     }
 
     $: $registerCommands([
@@ -83,10 +79,7 @@
             total={data.databases.total} />
     {:else if data.search}
         <EmptySearch target="databases" hidePagination>
-            <Button
-                href={`${base}/project-${page.params.region}-${page.params.project}/databases`}
-                size="s"
-                secondary>Clear Search</Button>
+            <Button href={getProjectRoute('/databases')} size="s" secondary>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty
diff --git a/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte
index 056141e76..cc0f76bf2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte
@@ -4,6 +4,7 @@
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,11 +12,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/databases`,
+            href: getProjectRoute('/databases'),
             title: 'Databases'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.svelte
index d743680f2..3e722b286 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import {
         addSubPanel,
@@ -19,15 +18,15 @@
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { currentPlan } from '$lib/stores/organization';
     import { isCloud } from '$lib/system';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const project = page.params.project;
     const databaseId = page.params.database;
 
     async function handleCreate(event: CustomEvent<Models.Collection>) {
         $showCreate = false;
         await invalidate(Dependencies.DATABASE);
         await goto(
-            `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/collection-${event.detail.$id}`
+            getProjectRoute(`/databases/database-${databaseId}/collection-${event.detail.$id}`)
         );
     }
 
@@ -37,9 +36,7 @@
             callback() {
                 $showCreate = true;
                 if (!page.url.pathname.endsWith(databaseId)) {
-                    goto(
-                        `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}`
-                    );
+                    goto(getProjectRoute(`/databases/database-${databaseId}`));
                 }
             },
             keys: page.url.pathname.endsWith(databaseId) ? ['c'] : ['c', 'c'],
@@ -51,9 +48,7 @@
             label: 'Create backup policy',
             callback: async () => {
                 if (!page.url.pathname.endsWith('backups')) {
-                    goto(
-                        `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/backups`
-                    );
+                    goto(getProjectRoute(`/databases/database-${databaseId}/backups`));
                 }
                 showCreatePolicy.set(true);
             },
@@ -67,9 +62,7 @@
             label: 'Create manual backup',
             callback: async () => {
                 if (!page.url.pathname.endsWith('backups')) {
-                    goto(
-                        `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/backups`
-                    );
+                    goto(getProjectRoute(`/databases/database-${databaseId}/backups`));
                 }
                 showCreateBackup.set(true);
             },
@@ -82,9 +75,7 @@
         {
             label: 'Go to collections',
             callback() {
-                goto(
-                    `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}`
-                );
+                goto(getProjectRoute(`/databases/database-${databaseId}`));
             },
             disabled:
                 page.url.pathname.endsWith(databaseId) || page.url.pathname.includes('collection-'),
@@ -94,9 +85,7 @@
         {
             label: 'Go to usage',
             callback() {
-                goto(
-                    `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/usage`
-                );
+                goto(getProjectRoute(`/databases/database-${databaseId}/usage`));
             },
             disabled:
                 page.url.pathname.includes('/usage') || page.url.pathname.includes('collection-'),
@@ -106,9 +95,7 @@
         {
             label: 'Go to backups',
             callback() {
-                goto(
-                    `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/backups`
-                );
+                goto(getProjectRoute(`/databases/database-${databaseId}/backups`));
             },
             disabled:
                 page.url.pathname.includes('/backups') || page.url.pathname.includes('collection-'),
@@ -118,9 +105,7 @@
         {
             label: 'Go to settings',
             callback() {
-                goto(
-                    `${base}/project-${page.params.region}-${project}/databases/database-${databaseId}/settings`
-                );
+                goto(getProjectRoute(`/databases/database-${databaseId}/settings`));
             },
             disabled:
                 page.url.pathname.includes('/settings') ||
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte
index e1f0459d4..d2b6d467c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte
@@ -4,6 +4,7 @@
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { database } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,15 +12,15 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: page.data.project.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/databases`,
+            href: getProjectRoute('/databases'),
             title: 'Databases'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database.$id}`,
+            href: getProjectRoute(`/databases/database-${$database.$id}`),
             title: $database.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index d319f65c3..b4eafd089 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -26,12 +26,11 @@
     import type { Option } from './attributes/store';
     import { CreateAttributePanel } from '$lib/commandCenter/panels';
     import { database } from '../store';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { page } from '$app/state';
     import CreateIndex from './indexes/createIndex.svelte';
-    import { base } from '$app/paths';
     import { canWriteCollections } from '$lib/stores/roles';
     import { IconEye, IconLockClosed, IconPlus, IconPuzzle } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     onMount(() => {
         return realtime
@@ -52,7 +51,9 @@
             keys: page.url.pathname.endsWith($collection.$id) ? ['c'] : ['c', 'd'],
             callback() {
                 goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/create`
+                    getProjectRoute(
+                        `/databases/database-${$database?.$id}/collection-${$collection?.$id}/create`
+                    )
                 );
             },
             icon: IconPlus,
@@ -73,7 +74,9 @@
             keys: ['g', 'd'],
             callback() {
                 goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}`
+                    getProjectRoute(
+                        `/databases/database-${$database?.$id}/collection-${$collection?.$id}`
+                    )
                 );
             },
             disabled: page.url.pathname.endsWith($collection.$id),
@@ -84,7 +87,9 @@
             keys: ['g', 'a'],
             callback() {
                 goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/attributes`
+                    getProjectRoute(
+                        `/databases/database-${$database?.$id}/collection-${$collection?.$id}/attributes`
+                    )
                 );
             },
             disabled: page.url.pathname.endsWith('attributes'),
@@ -95,7 +100,9 @@
             keys: ['g', 'i'],
             callback() {
                 goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/indexes`
+                    getProjectRoute(
+                        `/databases/database-${$database?.$id}/collection-${$collection?.$id}/indexes`
+                    )
                 );
             },
             disabled: page.url.pathname.endsWith('indexes'),
@@ -106,7 +113,9 @@
             keys: ['g', 'c'],
             callback() {
                 goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/activity`
+                    getProjectRoute(
+                        `/databases/database-${$database?.$id}/collection-${$collection?.$id}/activity`
+                    )
                 );
             },
             disabled: page.url.pathname.endsWith('activity'),
@@ -117,7 +126,9 @@
             keys: ['g', 'u'],
             callback() {
                 goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/usage`
+                    getProjectRoute(
+                        `/databases/database-${$database?.$id}/collection-${$collection?.$id}/usage`
+                    )
                 );
             },
             disabled: page.url.pathname.endsWith('usage'),
@@ -128,7 +139,9 @@
             keys: ['g', 's'],
             callback() {
                 goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/settings`
+                    getProjectRoute(
+                        `/databases/database-${$database?.$id}/collection-${$collection?.$id}/settings`
+                    )
                 );
             },
             disabled: page.url.pathname.endsWith('settings') || !$canWriteCollections,
@@ -138,7 +151,9 @@
             label: 'Display Name',
             async callback() {
                 await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/databases/database-${$database.$id}/collection-${$collection.$id}/settings#display-name`
+                    getProjectRoute(
+                        `/databases/database-${$database.$id}/collection-${$collection.$id}/settings#display-name`
+                    )
                 );
             },
             group: 'collections',
@@ -152,7 +167,9 @@
             label: 'Permissions',
             async callback() {
                 await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/databases/database-${$database.$id}/collection-${$collection.$id}/settings#permissions`
+                    getProjectRoute(
+                        `/databases/database-${$database.$id}/collection-${$collection.$id}/settings#permissions`
+                    )
                 );
             },
             group: 'collections',
@@ -166,7 +183,9 @@
             label: 'Document security',
             async callback() {
                 await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/databases/database-${$database.$id}/collection-${$collection.$id}/settings#document-security`
+                    getProjectRoute(
+                        `/databases/database-${$database.$id}/collection-${$collection.$id}/settings#document-security`
+                    )
                 );
             },
             group: 'collections',
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 98627a228..641763fed 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -21,11 +21,11 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { isSmallViewport } from '$lib/stores/viewport';
-    import { base } from '$app/paths';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
     import { organization } from '$lib/stores/organization';
     import { APPWRITE_OFFICIALS_ORG, isCloud } from '$lib/system';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 
@@ -121,7 +121,9 @@
                     {#if !$isSmallViewport}
                         <Button
                             disabled={!(hasAttributes && hasValidAttributes)}
-                            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
+                            href={getProjectRoute(
+                                `/databases/database-${page.params.database}/collection-${page.params.collection}/create`
+                            )}
                             event="create_document">
                             <Icon icon={IconPlus} slot="start" size="s" />
                             Create document
@@ -132,7 +134,9 @@
             {#if $isSmallViewport}
                 <Button
                     disabled={!(hasAttributes && hasValidAttributes)}
-                    href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
+                    href={getProjectRoute(
+                        `/databases/database-${page.params.database}/collection-${page.params.collection}/create`
+                    )}
                     event="create_document">
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create document
@@ -186,7 +190,9 @@
                             size="s"
                             ariaLabel="create document">Documentation</Button>
                         <Button
-                            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
+                            href={getProjectRoute(
+                                `/databases/database-${page.params.database}/collection-${page.params.collection}/create`
+                            )}
                             secondary
                             disabled={!$canWriteDocuments}
                             size="s">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index e7803f924..6efbd2ca7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Empty } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -38,6 +37,7 @@
     import type { ComponentProps } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import CsvDisabled from '../csvDisabled.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     const databaseId = page.params.database;
 
@@ -141,8 +141,9 @@
                             {#if isRelationship(attribute)}
                                 <span>
                                     with <a
-                                        href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attribute?.relatedCollection}`}
-                                        ><b data-private>{attribute?.key}</b></a>
+                                        href={getProjectRoute(
+                                            `/databases/database-${databaseId}/collection-${attribute?.relatedCollection}`
+                                        )}><b data-private>{attribute?.key}</b></a>
                                 </span>
                             {/if}
                         {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
index 0d4cc50e1..983922bab 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -11,6 +10,7 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { isRelationship } from '../document-[document]/attributes/store';
     import Confirm from '$lib/components/confirm.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     export let selectedAttribute: Attributes;
@@ -30,7 +30,9 @@
             });
             trackEvent(Submit.AttributeDelete);
             await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${page.params.collection}/attributes`
+                getProjectRoute(
+                    `/databases/database-${databaseId}/collection-${page.params.collection}/attributes`
+                )
             );
         } catch (e) {
             error = e.message;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
index 8b23bb11f..41575aaa8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
@@ -10,6 +9,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import type { Attributes } from '../store';
     import { attributeOptions, type Option } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showEdit = false;
     export let selectedAttribute: Attributes;
@@ -37,7 +37,9 @@
             await invalidate(Dependencies.COLLECTION);
             if (!page.url.pathname.includes('attributes')) {
                 await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`
+                    getProjectRoute(
+                        `/databases/database-${databaseId}/collection-${collectionId}/attributes`
+                    )
                 );
             }
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
index 2419b882b..3b3279569 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { database } from '../store';
     import { collection } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
             title: '...'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/databases`,
+            href: getProjectRoute('/databases'),
             title: 'Databases'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}`,
+            href: getProjectRoute(`/databases/database-${$database?.$id}`),
             title: $database?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
+            href: getProjectRoute(
+                `/databases/database-${$database?.$id}/collection-${$collection?.$id}`
+            ),
             title: $collection?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
index f41ee8067..1689107fc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Wizard } from '$lib/layout';
     import { Alert, Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
@@ -15,6 +14,7 @@
     import type { PageData } from './$types';
     import type { Attributes } from '../store';
     import { ID } from '@appwrite.io/console';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 
@@ -71,7 +71,9 @@
                 customId: !!$createDocument.id
             });
             goto(
-                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/document-${$id}`
+                getProjectRoute(
+                    `/databases/database-${page.params.database}/collection-${page.params.collection}/document-${$id}`
+                )
             );
         } catch (error) {
             addNotification({
@@ -85,7 +87,9 @@
 
 <Wizard
     title="Create document"
-    href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/`}
+    href={getProjectRoute(
+        `/databases/database-${page.params.database}/collection-${page.params.collection}/`
+    )}
     bind:showExitModal
     column
     columnSize="s"
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index 54111eb10..c8af640bd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -6,10 +6,10 @@
     import { Dependencies } from '$lib/constants';
     import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
-    import { base } from '$app/paths';
     import type { Attributes } from './store';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { preferences } from '$lib/stores/preferences';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showCreate = false;
     export let selectedOption: Option['name'] = null;
@@ -34,7 +34,9 @@
             await invalidate(Dependencies.COLLECTION);
             if (!page.url.pathname.includes('attributes')) {
                 await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`
+                    getProjectRoute(
+                        `/databases/database-${databaseId}/collection-${collectionId}/attributes`
+                    )
                 );
             }
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
index 3523787c3..3c4be4359 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
@@ -1,25 +1,28 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { database } from '../../store';
     import { collection } from '../store';
     import { doc } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
             title: '...'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}`,
+            href: getProjectRoute(`/databases/database-${$database?.$id}`),
             title: $database?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
+            href: getProjectRoute(
+                `/databases/database-${$database?.$id}/collection-${$collection?.$id}`
+            ),
             title: $collection?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/document-${$doc?.$id}`,
+            href: getProjectRoute(
+                `/databases/database-${$database?.$id}/collection-${$collection?.$id}/document-${$doc?.$id}`
+            ),
             title: $doc?.$id
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
index 0fcf83a43..7e73a933c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Confirm, Trim } from '$lib/components';
@@ -11,6 +10,7 @@
     import { attributes, collection } from '../store';
     import { isRelationship, isRelationshipToMany } from './attributes/store';
     import type { Models } from '@appwrite.io/console';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     const databaseId = page.params.database;
@@ -28,7 +28,9 @@
             });
             trackEvent(Submit.DocumentDelete);
             await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}`
+                getProjectRoute(
+                    `/databases/database-${page.params.database}/collection-${page.params.collection}`
+                )
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
index d97751b9f..7c6595182 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { doc } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const projectId = page.params.project;
     const databaseId = page.params.database;
     const collectionId = page.params.collection;
     const documentId = page.params.document;
-    const path = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}/document-${documentId}`;
+    const path = getProjectRoute(
+        `/databases/database-${databaseId}/collection-${collectionId}/document-${documentId}`
+    );
     const tabs = [
         {
             href: path,
@@ -35,7 +36,7 @@
 <Cover>
     <svelte:fragment slot="header">
         <CoverTitle
-            href={`${base}/project-${page.params.region}-${projectId}/databases/database-${databaseId}/collection-${collectionId}`}>
+            href={getProjectRoute(`/databases/database-${databaseId}/collection-${collectionId}`)}>
             {$doc?.$id}
         </CoverTitle>
         <Id value={$doc?.$id} event="document">Document ID</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte
index 7e9ffffcf..450648b0d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
@@ -7,6 +6,7 @@
     import { canWriteCollections } from '$lib/stores/roles';
     import { collection } from './store';
     import { isTabletViewport } from '$lib/stores/viewport';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let databaseId = $derived.by(() => {
         return page.params.database;
@@ -16,7 +16,7 @@
     });
 
     let path = $derived.by(() => {
-        return `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}`;
+        return getProjectRoute(`/databases/database-${databaseId}/collection-${collectionId}`);
     });
 
     let tabs = $derived.by(() => {
@@ -62,8 +62,7 @@
 <div style:margin-top={$isTabletViewport ? '48px' : 0}>
     <Cover>
         <svelte:fragment slot="header">
-            <CoverTitle
-                href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`}>
+            <CoverTitle href={getProjectRoute(`/databases/database-${databaseId}`)}>
                 {$collection?.name}
             </CoverTitle>
             {#key $collection?.$id}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
index b5812ff55..5f180987f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
@@ -14,6 +13,7 @@
     import { type Attributes, collection, indexes } from '../store';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showCreateIndex = false;
     export let externalAttribute: Attributes = null;
@@ -86,7 +86,9 @@
             ]);
 
             goto(
-                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${$collection.$id}/indexes`
+                getProjectRoute(
+                    `/databases/database-${databaseId}/collection-${$collection.$id}/indexes`
+                )
             );
 
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
index aa90532f7..4c0c0d101 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Modal, Paginator } from '$lib/components';
     import Id from '$lib/components/id.svelte';
     import { preferences } from '$lib/stores/preferences';
     import type { Models } from '@appwrite.io/console';
     import { Table } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show = false;
     export let data: Partial<Models.Document>[];
@@ -42,7 +42,9 @@
                     {#each paginatedItems as doc}
                         <Table.Row.Link
                             {root}
-                            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${selectedRelationship.relatedCollection}/document-${doc.$id}`}
+                            href={getProjectRoute(
+                                `/databases/database-${databaseId}/collection-${selectedRelationship.relatedCollection}/document-${doc.$id}`
+                            )}
                             on:click={() => (show = false)}>
                             <Table.Cell column="$id" {root}>
                                 <Id value={doc.$id}>{doc.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
index dfd0e6548..6bc554238 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
@@ -9,6 +8,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { Typography } from '@appwrite.io/pink-svelte';
     import { collection } from '../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
 
@@ -27,9 +27,7 @@
                 message: `${$collection.name} has been deleted`
             });
             trackEvent(Submit.CollectionDelete);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}`
-            );
+            await goto(getProjectRoute(`/databases/database-${page.params.database}`));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.CollectionDelete);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
index ae0809327..773cceb5d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { showCreate } from '../store';
     import type { PageData } from './$types';
@@ -13,10 +12,9 @@
     } from '@appwrite.io/pink-icons-svelte';
     import { isTabletViewport } from '$lib/stores/viewport';
     import { BottomSheet } from '$lib/components';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let data = $derived(page.data) as PageData;
-    let region = $derived(page.params.region);
-    let project = $derived(page.params.project);
     let databaseId = $derived(page.params.database);
     let collectionId = $derived(page.params.collection);
 
@@ -42,7 +40,7 @@
     <Sidebar.Base state="open" resizable={false}>
         <section class="list-container" slot="top" style:width="100%">
             <a
-                href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
+                href={getProjectRoute(`/databases/database-${databaseId}`)}
                 class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
                 <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
                 {data.database?.name}
@@ -51,7 +49,9 @@
                 {#if data?.allCollections?.total}
                     <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
                         {#each sortedCollections as collection}
-                            {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
+                            {@const href = getProjectRoute(
+                                `/databases/database-${databaseId}/collection-${collection.$id}`
+                            )}
                             {@const isSelected = collectionId === collection.$id}
                             <li class:is-selected={isSelected}>
                                 <a
@@ -89,7 +89,7 @@
             <Layout.Stack direction="row" alignItems="center" gap="s">
                 <Icon icon={IconDatabase} size="s" color="--neutral-300" />
                 <Link.Anchor
-                    href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
+                    href={getProjectRoute(`/databases/database-${databaseId}`)}
                     variant="quiet-muted">{data.database.name}</Link.Anchor>
                 <span style:margin-left="8px">/</span>
                 <button
@@ -99,7 +99,7 @@
                     onclick={() => {
                         openBottomSheet = !openBottomSheet;
                     }}>
-                    <span class="orgName">{selectedCollection.name}</span>
+                    <span class="orgName">{selectedCollection?.name}</span>
                     <Icon icon={IconChevronDown} size="s" />
                 </button>
             </Layout.Stack>
@@ -115,7 +115,9 @@
                     return {
                         name: collection.name,
                         leadingIcon: IconTable,
-                        href: `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`
+                        href: getProjectRoute(
+                            `/databases/database-${databaseId}/collection-${collection.$id}`
+                        )
                     };
                 })
             },
@@ -126,7 +128,7 @@
                               {
                                   name: 'All collections',
                                   leadingIcon: IconTable,
-                                  href: `${base}/project-${region}-${project}/databases/database-${databaseId}`
+                                  href: getProjectRoute(`/databases/database-${databaseId}`)
                               }
                           ]
                       }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
index dbdb5ec41..7e898c0e9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Alert, Confirm, Id } from '$lib/components';
@@ -26,6 +25,7 @@
         Typography
     } from '@appwrite.io/pink-svelte';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 
@@ -186,7 +186,9 @@
         <Table.Row.Link
             {root}
             id={document.$id}
-            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
+            href={getProjectRoute(
+                `/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`
+            )}>
             <Table.Cell column="$id" {root}>
                 {#key document.$id}
                     <Id value={document.$id}>
@@ -209,7 +211,9 @@
                                         e.preventDefault();
                                         e.stopPropagation();
                                         goto(
-                                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
+                                            getProjectRoute(
+                                                `/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
+                                            )
                                         );
                                     }}>
                                     {#each args as arg, i}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
index 93f00b816..77954cd53 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Usage } from '$lib/layout';
     import Container from '$lib/layout/container.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
     $: total = data.documentsTotal;
@@ -11,7 +11,9 @@
 
 <Container>
     <Usage
-        path={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/usage`}
+        path={getProjectRoute(
+            `/databases/database-${page.params.database}/collection-${page.params.collection}/usage`
+        )}
         {total}
         {count}
         countMetadata={{
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
index ef7661522..46eabd99e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
@@ -11,6 +10,7 @@
     import { toLocaleDate } from '$lib/helpers/date';
     import { type Models, Query } from '@appwrite.io/console';
     import { Spinner, Table } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     const databaseId = page.params.database;
 
@@ -75,7 +75,7 @@
                 type: 'success',
                 message: `${$database.name} has been deleted`
             });
-            await goto(`${base}/project-${page.params.region}-${page.params.project}/databases`);
+            await goto(getProjectRoute('/databases'));
             trackEvent(Submit.DatabaseDelete);
         } catch (error) {
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte
index 822203307..a98573419 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { CardContainer, GridItem1, Id } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { canWriteCollections } from '$lib/stores/roles';
     import type { PageData } from './$types';
+    import { getProjectRoute } from '$lib/helpers/project';
+
     export let data: PageData;
     export let showCreate = false;
-    const projectId = page.params.project;
+
     const databaseId = page.params.database;
 </script>
 
@@ -18,7 +19,9 @@
     event="collection">
     {#each data.collections.collections as collection}
         <GridItem1
-            href={`${base}/project-${page.params.region}-${projectId}/databases/database-${databaseId}/collection-${collection.$id}`}>
+            href={getProjectRoute(
+                `/databases/database-${databaseId}/collection-${collection.$id}`
+            )}>
             <svelte:fragment slot="title">{collection.name}</svelte:fragment>
             <svelte:fragment slot="status">
                 {#if !collection.enabled}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
index e220dba39..654f76290 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteDatabases } from '$lib/stores/roles';
     import { database } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const projectId = page.params.project;
     const databaseId = page.params.database;
-    const path = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`;
+    const path = getProjectRoute(`/databases/database-${databaseId}`);
     const tabs = [
         {
             href: path,
@@ -40,7 +39,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/databases`}>
+        <CoverTitle href={getProjectRoute('/databases')}>
             {$database.name}
         </CoverTitle>
         <Id value={$database.$id}>{$database.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte
index bab65963c..6ef36aeff 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Id } from '$lib/components';
@@ -14,6 +13,7 @@
     import type { PageData } from './$types';
     import { columns } from './store';
     import Confirm from '$lib/components/confirm.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
     const databaseId = page.params.database;
@@ -61,7 +61,9 @@
         <Table.Row.Link
             {root}
             id={collection.$id}
-            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collection.$id}`}>
+            href={getProjectRoute(
+                `/databases/database-${databaseId}/collection-${collection.$id}`
+            )}>
             {#each $columns as column}
                 <Table.Cell column={column.id} {root}>
                     {#if column.id === '$id'}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
index 2cf815d2e..a9e734eaa 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Container, Usage, UsageMultiple } from '$lib/layout';
     import { Layout } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -19,13 +19,13 @@
 <Container>
     <Layout.Stack gap="l">
         <Usage
-            path={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/usage`}
             {total}
             {count}
             countMetadata={{
                 legend: 'Collections',
                 title: 'Total collections'
-            }} />
+            }}
+            path={getProjectRoute(`/databases/database-${page.params.database}/usage`)} />
 
         <UsageMultiple
             title="Reads and writes"
diff --git a/src/routes/(console)/project-[region]-[project]/databases/grid.svelte b/src/routes/(console)/project-[region]-[project]/databases/grid.svelte
index cacfeba9c..35e1d2b5a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/grid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/grid.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { CardContainer, GridItem1, Id } from '$lib/components';
     import { canWriteDatabases } from '$lib/stores/roles';
     import type { PageData } from './$types';
+    import { getProjectRoute } from '$lib/helpers/project';
     export let data: PageData;
     export let showCreate = false;
-    const project = page.params.project;
 </script>
 
 <CardContainer
@@ -16,8 +14,7 @@
     event="database"
     service="databases">
     {#each data.databases.databases as database}
-        <GridItem1
-            href={`${base}/project-${page.params.region}-${project}/databases/database-${database.$id}`}>
+        <GridItem1 href={getProjectRoute(`/databases/database-${database.$id}`)}>
             <svelte:fragment slot="title">{database.name}</svelte:fragment>
             <svelte:fragment slot="subtitle">
                 {#if data.lastBackups && data.lastBackups[database.$id]}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/header.svelte
index 796c86d09..6f5d1c944 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/header.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const projectId = page.params.project;
-    const path = `${base}/project-${page.params.region}-${projectId}/databases`;
+    const path = getProjectRoute('/databases');
     const tabs = [
         {
             href: path,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/table.svelte
index df80b3c35..8bfbe8573 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/table.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { columns } from './store';
     import { Tooltip, Table } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -25,9 +24,7 @@
         {/each}
     </svelte:fragment>
     {#each data.databases.databases as database (database.$id)}
-        <Table.Row.Link
-            {root}
-            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${database.$id}`}>
+        <Table.Row.Link {root} href={getProjectRoute(`/databases/database-${database.$id}`)}>
             {#each $columns as column}
                 <Table.Cell column={column.id} {root}>
                     {#if column.id === '$id'}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte
index 5ff65052e..6120b1159 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import { Container, Usage, UsageMultiple } from '$lib/layout';
-    import { Layout } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
+    import { Container, Usage, UsageMultiple } from '$lib/layout';
 
     export let data: PageData;
     $: total = data.databasesTotal;
@@ -19,7 +18,7 @@
 <Container>
     <Layout.Stack gap="l">
         <Usage
-            path={`${base}/project-${page.params.region}-${page.params.project}/databases/usage`}
+            path={getProjectRoute('/databases/usage')}
             {total}
             {count}
             countMetadata={{
diff --git a/src/routes/(console)/project-[region]-[project]/functions/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/+page.svelte
index 0bc701817..5a8cb6333 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import {
@@ -27,13 +26,12 @@
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
     import Avatar from '$lib/components/avatar.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
     let offset = 0;
 
-    const project = page.params.project;
-
     onMount(async () => {
         const from = page.url.searchParams.get('from');
         if (from === 'github') {
@@ -43,14 +41,14 @@
                     const template = page.url.searchParams.get('template');
                     const templateConfig = page.url.searchParams.get('templateConfig');
                     goto(
-                        `${base}/project-${page.params.region}-${project}/functions/create-function/template-${template}?templateConfig=${templateConfig}`
+                        getProjectRoute(
+                            `/functions/create-function/template-${template}?templateConfig=${templateConfig}`
+                        )
                     );
                     break;
                 }
                 case 'cover':
-                    goto(
-                        `${base}/project-${page.params.region}-${project}/functions/create-function`
-                    );
+                    goto(getProjectRoute('/functions/create-function'));
                     break;
             }
         }
@@ -63,8 +61,7 @@
     $: $registerCommands([
         {
             label: 'Create function',
-            callback: () =>
-                goto(`${base}/project-${page.params.region}-${project}/functions/create-function`),
+            callback: () => goto(getProjectRoute('/functions/create-function')),
             keys: ['c'],
             disabled:
                 $wizard.show ||
@@ -82,7 +79,7 @@
     <Layout.Stack direction="row" justifyContent="space-between">
         <SearchQuery placeholder="Search by name or ID" />
 
-        <Button href={`${base}/project-${page.params.region}-${project}/functions/create-function`}>
+        <Button href={getProjectRoute('/functions/create-function')}>
             <Icon icon={IconPlus} slot="start" />
             Create function
         </Button>
@@ -95,11 +92,9 @@
             event="functions"
             total={data.functions.total}
             service="functions"
-            on:click={() =>
-                goto(`${base}/project-${page.params.region}-${project}/functions/create-function`)}>
+            on:click={() => goto(getProjectRoute('/functions/create-function'))}>
             {#each data.functions.functions as func (func.$id)}
-                <GridItem1
-                    href={`${base}/project-${page.params.region}-${project}/functions/function-${func.$id}`}>
+                <GridItem1 href={getProjectRoute(`/functions/function-${func.$id}`)}>
                     <svelte:fragment slot="title">
                         <Layout.Stack gap="l" alignItems="center" direction="row" inline>
                             <Avatar alt={func.name} size="m">
@@ -133,11 +128,7 @@
             total={data.functions.total} />
     {:else if data?.search}
         <EmptySearch hidePages bind:search={data.search} target="functions">
-            <Button
-                secondary
-                href={`${base}/project-${page.params.region}-${page.params.project}/functions`}>
-                Clear search
-            </Button>
+            <Button secondary href={getProjectRoute('/functions')}>Clear search</Button>
         </EmptySearch>
     {:else}
         <Empty
@@ -145,9 +136,6 @@
             allowCreate={$canWriteFunctions}
             href="https://appwrite.io/docs/products/functions"
             target="function"
-            on:click={() =>
-                goto(
-                    `${base}/project-${page.params.region}-${project}/functions/create-function`
-                )} />
+            on:click={() => goto(getProjectRoute('/functions/create-function'))} />
     {/if}
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte
index 0b6627d1e..4c766a7ee 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,11 +11,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/functions`,
+            href: getProjectRoute('/functions'),
             title: 'Functions'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte
index f032d7f2b..b926de801 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { SvgIcon } from '$lib/components';
-    import { page } from '$app/state';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import type { Models } from '@appwrite.io/console';
     import { isSelfHosted } from '$lib/system';
@@ -22,11 +20,13 @@
     import Wizard from '$lib/layout/wizard.svelte';
     import { Link } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
+    const wizardBase = getProjectRoute('/functions');
     const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
-    const wizardBase = `${base}/project-${page.params.region}-${page.params.project}/functions`;
+
     let previousPage: string = wizardBase;
     afterNavigate(({ from }) => {
         previousPage = from?.url?.pathname || previousPage;
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte
index 5c1622d82..c8673d83c 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Button, Form } from '$lib/elements/forms';
@@ -23,6 +22,7 @@
     import { isCloud } from '$lib/system';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { currentPlan } from '$lib/stores/organization';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -115,9 +115,7 @@
                 runtime: runtime
             });
 
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/functions/function-${func.$id}`
-            );
+            await goto(getProjectRoute(`/functions/function-${func.$id}`));
 
             invalidate(Dependencies.FUNCTION);
         } catch (e) {
@@ -176,7 +174,7 @@
 <Wizard
     title="Create function"
     bind:showExitModal
-    href={`${base}/project-${page.params.region}-${page.params.project}/functions`}
+    href={getProjectRoute('/functions')}
     column
     columnSize="s"
     confirmExit>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
index d6c729b3e..76b31893d 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Button, Form } from '$lib/elements/forms';
@@ -22,6 +21,7 @@
     import { Dependencies } from '$lib/constants';
     import RepoCard from './repoCard.svelte';
     import { getIconFromRuntime } from '$lib/stores/runtimes';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -118,9 +118,7 @@
                 runtime: runtime
             });
 
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/functions/function-${func.$id}`
-            );
+            await goto(getProjectRoute(`/functions/function-${func.$id}`));
 
             invalidate(Dependencies.FUNCTION);
         } catch (e) {
@@ -137,11 +135,7 @@
     <title>Create function - Appwrite</title>
 </svelte:head>
 
-<Wizard
-    title="Create function"
-    bind:showExitModal
-    href={`${base}/project-${page.params.region}-${page.params.project}/functions`}
-    confirmExit>
+<Wizard title="Create function" bind:showExitModal href={getProjectRoute('/functions')} confirmExit>
     <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
         <Layout.Stack gap="xl">
             <RepoCard repository={data.repository} />
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/repoCard.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/repoCard.svelte
index a92459a25..819dcd10b 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/repoCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/repoCard.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import { IconGithub } from '@appwrite.io/pink-icons-svelte';
     import { Card, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let repository: Models.ProviderRepository;
 </script>
@@ -17,10 +16,6 @@
                 {repository?.organization}/{repository?.name}
             </Typography.Text>
         </Layout.Stack>
-        <Button
-            secondary
-            href={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function`}>
-            Change
-        </Button>
+        <Button secondary href={getProjectRoute('/functions/create-function')}>Change</Button>
     </Layout.Stack>
 </Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.svelte
index 1def9654f..eb45c7a35 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Card } from '$lib/components';
@@ -31,6 +30,7 @@
     import RepoCard from './repoCard.svelte';
     import { Dependencies } from '$lib/constants';
     import { getIconFromRuntime } from '$lib/stores/runtimes';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -184,9 +184,7 @@
                     framework: data.template.name
                 });
 
-                await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/functions/function-${func.$id}`
-                );
+                await goto(getProjectRoute(`/functions/function-${func.$id}`));
                 invalidate(Dependencies.FUNCTION);
             } catch (e) {
                 addNotification({
@@ -216,11 +214,7 @@
     <title>Create function - Appwrite</title>
 </svelte:head>
 
-<Wizard
-    title="Create function"
-    bind:showExitModal
-    href={`${base}/project-${page.params.region}-${page.params.project}/functions`}
-    confirmExit>
+<Wizard title="Create function" bind:showExitModal href={getProjectRoute('/functions')} confirmExit>
     <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
         <Layout.Stack gap="xl">
             {#if selectedRepository && showConfig}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte
index 5d698c934..4ea2bd73a 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte
@@ -18,9 +18,8 @@
     import { isCloud } from '$lib/system';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import Link from '$lib/elements/link.svelte';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import type { Snippet } from 'svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let {
         deployment,
@@ -114,7 +113,9 @@
                         {:else}
                             <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                 Only the <Link
-                                    href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func.$id}/deployment-${$func.deploymentId}`}
+                                    href={getProjectRoute(
+                                        `/functions/function-${$func.$id}/deployment-${$func.deploymentId}`
+                                    )}
                                     variant="default">active deployment</Link> has a domain.
                             </Typography.Text>
                         {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/redeployModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/redeployModal.svelte
index 6409b9f2b..cf5f3e681 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/redeployModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/redeployModal.svelte
@@ -9,7 +9,7 @@
     import { Dependencies } from '$lib/constants';
     import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
-    import { base } from '$app/paths';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show = false;
     export let selectedDeployment: Models.Deployment = null;
@@ -36,7 +36,7 @@
             invalidate(Dependencies.DEPLOYMENTS);
             if (redirect) {
                 goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func.$id}/deployment-${deployment.$id}`
+                    getProjectRoute(`/functions/function-${$func.$id}/deployment-${deployment.$id}`)
                 );
             }
             show = false;
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.svelte
index 689ac01f0..994caa15e 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+layout.svelte
@@ -6,9 +6,7 @@
     import { invalidate, goto } from '$app/navigation';
     import { registerCommands } from '$lib/commandCenter';
     import { func, showCreateDeployment } from './store';
-    import { project } from '../../store';
     import type { Models } from '@appwrite.io/console';
-    import { base } from '$app/paths';
     import { canWriteFunctions } from '$lib/stores/roles';
     import {
         IconCalendar,
@@ -18,6 +16,7 @@
         IconSearch,
         IconXCircle
     } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     onMount(() => {
         let previousStatus = null;
@@ -49,9 +48,7 @@
             label: 'Create deployment',
             async callback() {
                 if (!page.url.pathname.endsWith($func.$id)) {
-                    await goto(
-                        `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}`
-                    );
+                    await goto(getProjectRoute(`/functions/function-${$func.$id}`));
                 }
                 showCreateDeployment.set(true);
             },
@@ -64,7 +61,7 @@
             label: 'Permissions',
             async callback() {
                 await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/settings#permissions`
+                    getProjectRoute(`/functions/function-${$func.$id}/settings#permissions`)
                 );
                 scrollBy({ top: -100 });
             },
@@ -75,9 +72,7 @@
         {
             label: 'Events',
             async callback() {
-                await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/settings#events`
-                );
+                await goto(getProjectRoute(`/functions/function-${$func.$id}/settings#events`));
                 scrollBy({ top: -100 });
             },
             icon: IconCalendar,
@@ -87,9 +82,7 @@
         {
             label: 'Variables',
             async callback() {
-                await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/settings#variables`
-                );
+                await goto(getProjectRoute(`/functions/function-${$func.$id}/settings#variables`));
             },
             icon: IconList,
             group: 'functions',
@@ -98,9 +91,7 @@
         {
             label: 'Timeout',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/settings#timeout`
-                );
+                goto(getProjectRoute(`/functions/function-${$func.$id}/settings#timeout`));
             },
             icon: IconXCircle,
             group: 'functions',
@@ -109,9 +100,7 @@
         {
             label: 'Schedule',
             async callback() {
-                await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/settings#schedule`
-                );
+                await goto(getProjectRoute(`/functions/function-${$func.$id}/settings#schedule`));
                 scrollBy({ top: -100 });
             },
             icon: IconClock,
@@ -121,9 +110,7 @@
         {
             label: 'Go to deployments',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}`
-                );
+                goto(getProjectRoute(`/functions/function-${$func.$id}`));
             },
             keys: ['g', 'd'],
             group: 'navigation',
@@ -133,9 +120,7 @@
         {
             label: 'Go to usage',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/usage`
-                );
+                goto(getProjectRoute(`/functions/function-${$func.$id}/usage`));
             },
             keys: ['g', 'u'],
             group: 'navigation',
@@ -145,9 +130,7 @@
         {
             label: 'Go to executions',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/executions`
-                );
+                goto(getProjectRoute(`/functions/function-${$func.$id}/executions`));
             },
             keys: ['g', 'e'],
             group: 'navigation',
@@ -157,9 +140,7 @@
         {
             label: 'Go to settings',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/settings`
-                );
+                goto(getProjectRoute(`/functions/function-${$func.$id}/settings`));
             },
             keys: ['g', 's'],
             group: 'navigation',
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte
index 3c35c79b8..2194ca8d2 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte
@@ -24,6 +24,7 @@
     import CreateActionMenu from './(components)/createActionMenu.svelte';
     import { Menu } from '$lib/components/menu';
     import DownloadActionMenuItem from './(components)/downloadActionMenuItem.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -115,7 +116,9 @@
                                             {toggle} />
                                         <ActionMenu.Item.Anchor
                                             trailingIcon={IconTerminal}
-                                            href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/deployment-${activeDeployment.$id}`}>
+                                            href={getProjectRoute(
+                                                `/functions/function-${page.params.function}/deployment-${activeDeployment.$id}`
+                                            )}>
                                             Build logs
                                         </ActionMenu.Item.Anchor>
                                     </ActionMenu.Root>
@@ -123,7 +126,9 @@
                             </Menu>
                             <Button
                                 secondary
-                                href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func.$id}/executions/execute-function`}
+                                href={getProjectRoute(
+                                    `/functions/function-${$func.$id}/executions/execute-function`
+                                )}
                                 disabled={isCloud && $readOnly && !GRACE_PERIOD_OVERRIDE}>
                                 Execute
                             </Button>
@@ -150,7 +155,9 @@
                                 ariaLabel={`create deployment`}>Documentation</Button>
                             <Button
                                 secondary
-                                href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/deployments/deplyoment-${activeDeployment?.$id}`}>
+                                href={getProjectRoute(
+                                    `/functions/function-${page.params.function}/deployments/deplyoment-${activeDeployment?.$id}`
+                                )}>
                                 View logs</Button>
                         </span>
                     </Empty>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte
index 83622b79a..c1a841046 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
     import { func } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/functions`,
+            href: getProjectRoute('/functions'),
             title: 'Functions'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func?.$id}`,
+            href: getProjectRoute(`/functions/function-${$func?.$id}`),
             title: $func?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index 7f64649ea..f3f43a89a 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -30,10 +30,10 @@
     import { canWriteFunctions } from '$lib/stores/roles';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import DownloadActionMenuItem from '../(components)/downloadActionMenuItem.svelte';
-    import { base } from '$app/paths';
     import { isCloud } from '$lib/system';
     import { readOnly } from '$lib/stores/billing';
     import RedeployModal from '../(modals)/redeployModal.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -116,7 +116,9 @@
                 </Menu>
                 {#if data.func.deploymentId === data.deployment.$id && data.deployment.status === 'ready'}
                     <Button
-                        href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/executions/execute-function`}
+                        href={getProjectRoute(
+                            `/functions/function-${page.params.function}/executions/execute-function`
+                        )}
                         disabled={isCloud && $readOnly}>
                         Execute
                     </Button>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte
index 785e7076b..9f393084d 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { func } from '../store';
     import { deployment } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
             title: '...'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/functions`,
+            href: getProjectRoute('/functions'),
             title: 'Functions'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func?.$id}`,
+            href: getProjectRoute(`/functions/function-${$func?.$id}`),
             title: $func?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func?.$id}/deployment-${$deployment?.$id}`,
+            href: getProjectRoute(
+                `/functions/function-${$func?.$id}/deployment-${$deployment?.$id}`
+            ),
             title: 'Deployment'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/header.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/header.svelte
index e42debf62..690ed75b9 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/header.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Id } from '$lib/components';
-    import { Cover, CoverTitle } from '$lib/layout';
     import { deployment } from './store';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    $: projectId = page.params.project;
     $: functionId = page.params.function;
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle
-            href={`${base}/project-${page.params.region}-${projectId}/functions/function-${functionId}`}>
+        <CoverTitle href={getProjectRoute(`/functions/function-${functionId}`)}>
             Deployment
         </CoverTitle>
         <Id value={$deployment.$id}>{$deployment.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte
index 3e30d3a86..7305c6533 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte
@@ -13,6 +13,7 @@
     import { app } from '$lib/stores/app';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import Table from './table.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let { data } = $props();
 
@@ -25,7 +26,7 @@
     <Layout.Stack direction="row" justifyContent="space-between">
         <SearchQuery placeholder="Search domain" />
         <Button
-            href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains/add-domain`}
+            href={getProjectRoute(`/functions/function-${page.params.function}/domains/add-domain`)}
             on:click={() => {
                 trackEvent(Click.DomainCreateClick, {
                     source: 'functions_domain_overview'
@@ -72,7 +73,9 @@
 
                     <Button
                         secondary
-                        href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains/add-domain`}
+                        href={getProjectRoute(
+                            `/functions/function-${page.params.function}/domains/add-domain`
+                        )}
                         size="s">
                         Add domain
                     </Button>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
index e7a55a956..bf7a97517 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Button, Form, InputDomain, InputSelect, InputURL } from '$lib/elements/forms';
     import { Wizard } from '$lib/layout';
@@ -21,8 +20,9 @@
     import { isCloud } from '$lib/system';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { getApexDomain } from '$lib/helpers/tlds';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const routeBase = `${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains`;
+    const routeBase = getProjectRoute(`/functions/function-${page.params.function}/domains`);
 
     let { data } = $props();
 
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.svelte
index 0ca8e0f52..365579f31 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/verify-[domain]/+page.svelte
@@ -18,12 +18,12 @@
     import { isCloud } from '$lib/system';
     import { page } from '$app/state';
     import Wizard from '$lib/layout/wizard.svelte';
-    import { base } from '$app/paths';
     import { writable } from 'svelte/store';
     import { isASubdomain } from '$lib/helpers/tlds';
     import { consoleVariables } from '$routes/(console)/store';
     import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
     import RecordTable from '$lib/components/domains/recordTable.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let { data } = $props();
 
@@ -42,7 +42,7 @@
     });
     let verified = $state(false);
 
-    let routeBase = `${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains`;
+    let routeBase = getProjectRoute(`/functions/function-${page.params.function}/domains`);
     let isSubmitting = $state(writable(false));
 
     async function verify() {
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte
index b3f43680e..3b1e0bb07 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte
@@ -6,12 +6,11 @@
     import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
-    import { base } from '$app/paths';
     import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import Table from './table.svelte';
     import { columns } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -30,7 +29,9 @@
             <div>
                 <Button
                     event="execute_function"
-                    href={`${base}/project-${$project.region}-${$project.$id}/functions/function-${data.func.$id}/executions/execute-function`}
+                    href={getProjectRoute(
+                        `/functions/function-${data.func.$id}/executions/execute-function`
+                    )}
                     disabled={!data.func.$id || !data.func?.deploymentId}>
                     <Icon icon={IconPlus} size="s" slot="start" />
                     Create execution
@@ -67,7 +68,9 @@
                         <Button
                             secondary
                             event="execute_function"
-                            href={`${base}/project-${$project.region}-${$project.$id}/functions/function-${data.func.$id}/executions/execute-function`}
+                            href={getProjectRoute(
+                                `/functions/function-${data.func.$id}/executions/execute-function`
+                            )}
                             disabled={!data.func.$id || !data.func?.deploymentId}>
                             Create execution
                         </Button>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte
index a1f7ceaeb..a4e628df7 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { afterNavigate, goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
@@ -38,8 +37,11 @@
     import { IconInfo, IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
     import Wizard from '$lib/layout/wizard.svelte';
     import Aside from './aside.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    let previousPage: string = `${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/executions`;
+    let previousPage: string = getProjectRoute(
+        `/functions/function-${page.params.function}/executions`
+    );
 
     afterNavigate(({ from }) => {
         previousPage = from?.url?.pathname || previousPage;
@@ -104,9 +106,7 @@
                     headersObject,
                     isScheduled ? dateTime.toISOString() : undefined
                 );
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/functions/function-${func.$id}/executions`
-            );
+            await goto(getProjectRoute(`/functions/function-${func.$id}/executions`));
             invalidate(Dependencies.EXECUTIONS);
             addNotification({
                 type: 'success',
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/header.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/header.svelte
index 465aae173..03cd44abe 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/header.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteFunctions } from '$lib/stores/roles';
     import { func } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const projectId = page.params.project;
     const functionId = page.params.function;
-    const path = `${base}/project-${page.params.region}-${projectId}/functions/function-${functionId}`;
+    const path = getProjectRoute(`/functions/function-${functionId}`);
     const tabs = [
         {
             href: path,
@@ -45,7 +44,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/functions`}>
+        <CoverTitle href={getProjectRoute('/functions')}>
             {$func?.name}
         </CoverTitle>
         {#if $func?.$id}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/redeployModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/redeployModal.svelte
index ddf24e799..0b39c14ea 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/redeployModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/redeployModal.svelte
@@ -9,7 +9,7 @@
     import { Dependencies } from '$lib/constants';
     import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
-    import { base } from '$app/paths';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show = false;
     export let selectedDeployment: Models.Deployment = null;
@@ -37,7 +37,9 @@
             });
             if (redirect) {
                 goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/functions/function-${$func.$id}/deployments/deployment-${deployment.$id}`
+                    getProjectRoute(
+                        `/functions/function-${$func.$id}/deployments/deployment-${deployment.$id}`
+                    )
                 );
             }
         } catch (e) {
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/deleteModal.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/deleteModal.svelte
index 15dc40585..2b4ee52ec 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/deleteModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/deleteModal.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
@@ -8,6 +7,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { type Models } from '@appwrite.io/console';
     import { InputCheckbox } from '$lib/elements/forms';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     export let projectFunction: Models.Function;
@@ -25,7 +25,7 @@
                 type: 'success',
                 message: `Function has been deleted`
             });
-            await goto(`${base}/project-${page.params.region}-${page.params.project}/functions`);
+            await goto(getProjectRoute('/functions'));
             trackEvent(Submit.FunctionDelete);
         } catch (e) {
             error = e.message;
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/executeFunction.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/executeFunction.svelte
index 7155d476f..1bd3208c3 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/executeFunction.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/executeFunction.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { CardGrid, SvgIcon } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { func } from '../store';
     import { capitalize } from '$lib/helpers/string';
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 <CardGrid>
@@ -41,7 +40,7 @@
     <svelte:fragment slot="actions">
         <Button
             secondary
-            href={`${base}/project-${$project.region}-${$project.$id}/functions/function-${$func.$id}/executions/execute-function`}>
+            href={getProjectRoute(`/functions/function-${$func.$id}/executions/execute-function`)}>
             Execute
         </Button>
     </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte
index fdfdfdb14..5435ccbe9 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte
@@ -13,7 +13,6 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import Cancel from './(modals)/cancelDeploymentModal.svelte';
-    import { base } from '$app/paths';
     import {
         ActionMenu,
         Badge,
@@ -39,6 +38,7 @@
     import { Menu } from '$lib/components/menu';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let columns: Column[];
     export let data: PageData;
@@ -103,7 +103,9 @@
         <Table.Row.Link
             {root}
             id={deployment.$id}
-            href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/deployment-${deployment.$id}`}>
+            href={getProjectRoute(
+                `/functions/function-${page.params.function}/deployment-${deployment.$id}`
+            )}>
             {#each columns as column}
                 <Table.Cell column={column.id} {root}>
                     {#if column.id === '$id'}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
index 30c05dd10..cae354000 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-    import { Container, Usage } from '$lib/layout';
     import { page } from '$app/state';
-    import { base } from '$app/paths';
+    import { Container, Usage } from '$lib/layout';
     import { Layout } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
-    $: total = data.executionsTotal;
     $: count = data.executions;
-    $: gbHoursTotal = data.executionsMbSecondsTotal / 1000 / 3600;
+    $: total = data.executionsTotal;
     $: mbSecondsCount = data.executionsMbSeconds;
+    $: gbHoursTotal = data.executionsMbSecondsTotal / 1000 / 3600;
 </script>
 
 <Container>
     <Layout.Stack gap="l">
         {#if count}
             <Usage
-                path={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/usage`}
+                path={getProjectRoute(`/functions/function-${page.params.function}/usage`)}
                 countMetadata={{
                     legend: 'Executions',
                     title: 'Total executions'
@@ -27,7 +27,7 @@
         {#if mbSecondsCount}
             <Usage
                 hidePeriodSelect
-                path={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/usage`}
+                path={getProjectRoute(`/functions/function-${page.params.function}/usage`)}
                 countMetadata={{
                     legend: 'GB hours',
                     title: 'Total GB hours'
diff --git a/src/routes/(console)/project-[region]-[project]/functions/header.svelte b/src/routes/(console)/project-[region]-[project]/functions/header.svelte
index 9cbab48b0..882067a5a 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/header.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    $: projectId = page.params.project;
-    $: path = `${base}/project-${page.params.region}-${projectId}/functions`;
+    $: path = getProjectRoute('/functions');
     $: tabs = [
         {
             href: path,
diff --git a/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte
index de53032da..6e711a96a 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { EmptyFilter, EmptySearch, Paginator, SearchQuery, SvgIcon } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -24,6 +23,7 @@
     import Link from '$lib/elements/link.svelte';
     import Avatar from '$lib/components/avatar.svelte';
     import { getIconFromRuntime } from '$lib/stores/runtimes';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -210,7 +210,9 @@
                                                 alignItems="center"
                                                 inline>
                                                 <Button
-                                                    href={`${base}/project-${page.params.region}-${page.params.project}/functions/templates/template-${template.id}`}
+                                                    href={getProjectRoute(
+                                                        `/functions/templates/template-${template.id}`
+                                                    )}
                                                     text>
                                                     <span class="text">Details</span>
                                                 </Button>
@@ -219,7 +221,9 @@
                                                         title="functions"
                                                         disabled={buttonDisabled}
                                                         buttonType="secondary"
-                                                        buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${template.id}`}
+                                                        buttonHref={getProjectRoute(
+                                                            `/functions/create-function/template-${template.id}`
+                                                        )}
                                                         showIcon={false}
                                                         buttonText="Create"
                                                         buttonEventData={{
diff --git a/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte
index 4f5ca68a1..3bcb2d234 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte
@@ -20,10 +20,9 @@
         Divider,
         Icon
     } from '@appwrite.io/pink-svelte';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { capitalize } from '$lib/helpers/string';
     import { IconExternalLink } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: buttonDisabled =
         isCloud && isServiceLimited('functions', $organization?.billingPlan, $functionsList?.total);
@@ -92,7 +91,9 @@
                         <ContainerButton
                             title="functions"
                             disabled={buttonDisabled}
-                            buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${$template.id}`}
+                            buttonHref={getProjectRoute(
+                                `/functions/create-function/template-${$template.id}`
+                            )}
                             showIcon={false}
                             buttonText="Create function"
                             buttonEvent="create_function" />
diff --git a/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/header.svelte b/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/header.svelte
index 2fc2c6e42..2e9c3496e 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/header.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { template } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle
-            href={`${base}/project-${page.params.region}-${page.params.project}/functions/templates`}>
+        <CoverTitle href={getProjectRoute('/functions/templates')}>
             {$template.name}
         </CoverTitle>
         <Id value={$template.id} event="user">{$template.id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte
index a91d5a6f3..f2e6d11ec 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Container, Usage } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
     $: total = data.deploymentsTotal;
@@ -10,7 +9,7 @@
 
 <Container>
     <Usage
-        path={`${base}/project-${page.params.region}-${page.params.project}/functions/usage`}
+        path={getProjectRoute('/functions/usage')}
         countMetadata={{
             legend: 'Functions',
             title: 'Total functions'
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/+layout.svelte b/src/routes/(console)/project-[region]-[project]/messaging/+layout.svelte
index f24af0b59..c1e669ac1 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/+layout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import {
         addSubPanel,
@@ -13,8 +12,8 @@
     import { providersSearcher } from '$lib/commandCenter/searchers/providers';
     import { topicsSearcher } from '$lib/commandCenter/searchers/topics';
     import { canWriteMessages } from '$lib/stores/roles';
-    import { project } from '../store';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     // TODO: finalize the commands
     $: $registerCommands([
@@ -32,7 +31,7 @@
             label: 'Go to Topics',
             keys: ['g', 't'],
             callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/messaging/topics`);
+                goto(getProjectRoute('/messaging/topics'));
             },
             disabled:
                 page.url.pathname.endsWith('topics') || page.url.pathname.includes('message-'),
@@ -43,7 +42,7 @@
             label: 'Go to Providers',
             keys: ['g', 'p'],
             callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/messaging/providers`);
+                goto(getProjectRoute('/messaging/providers'));
             },
             disabled:
                 page.url.pathname.endsWith('providers') || page.url.pathname.includes('message-'),
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
index 0ed4c8b4c..7c6240abf 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import {
         Empty,
@@ -39,6 +38,7 @@
     import { Confirm } from '$lib/components';
     import { onDestroy, onMount } from 'svelte';
     import { stopPolling, pollMessagesStatus } from './helper';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
     let selected: string[] = [];
@@ -133,7 +133,7 @@
                 <Table.Row.Link
                     {root}
                     id={message.$id}
-                    href={`${base}/project-${region}-${project}/messaging/message-${message.$id}`}>
+                    href={getProjectRoute(`/messaging/message-${message.$id}`)}>
                     {#each $columns as column (column.id)}
                         <Table.Cell column={column.id} {root}>
                             {#if column.id === '$id'}
@@ -212,9 +212,7 @@
                 <Button external href="https://appwrite.io/docs/products/messaging/messages" text>
                     Documentation
                 </Button>
-                <Button secondary href={`${base}/project-${region}-${project}/messaging`}>
-                    Clear search
-                </Button>
+                <Button secondary href={getProjectRoute('/messaging')}>Clear search</Button>
             </div>
         </EmptySearch>
     {:else}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte
index 8c5fe3210..7945ff28e 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,11 +11,11 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/messaging`,
+            href: getProjectRoute('/messaging'),
             title: 'Messaging'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
index 352715d43..7e1b8adee 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Wizard } from '$lib/layout';
     import { Fieldset, Icon, Layout, Tag } from '@appwrite.io/pink-svelte';
@@ -18,6 +17,7 @@
     import Targets from './(components)/targets.svelte';
     import Schedule from './(components)/schedule.svelte';
     import InputSwitch from '$lib/elements/forms/inputSwitch.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let showExitModal = false;
     let formComponent: Form;
@@ -73,9 +73,7 @@
                 providerType: 'email',
                 status: response.status
             });
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/messaging/message-${response.$id}`
-            );
+            await goto(getProjectRoute(`/messaging/message-${response.$id}`));
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -94,7 +92,7 @@
 <Wizard
     title="Create email message"
     columnSize="s"
-    href={`${base}/project-${page.params.region}-${page.params.project}/messaging/`}
+    href={getProjectRoute('/messaging/')}
     bind:showExitModal
     column
     confirmExit>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
index 82d12a36f..ff2f42509 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Wizard } from '$lib/layout';
     import { Fieldset, Icon, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
@@ -19,6 +18,7 @@
     import InputFilePicker from '$lib/elements/forms/inputFilePicker.svelte';
     import Targets from './(components)/targets.svelte';
     import Schedule from './(components)/schedule.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let showExitModal = false;
     let formComponent: Form;
@@ -85,9 +85,7 @@
                 providerType: 'push',
                 status: response.status
             });
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/messaging/message-${response.$id}`
-            );
+            await goto(getProjectRoute(`/messaging/message-${response.$id}`));
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -105,7 +103,7 @@
 
 <Wizard
     title="Create push message"
-    href={`${base}/project-${page.params.region}-${page.params.project}/messaging/`}
+    href={getProjectRoute('/messaging/')}
     bind:showExitModal
     confirmExit>
     <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
index e71f479f8..a979a4f43 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Wizard } from '$lib/layout';
     import { Fieldset, Icon, Layout, Tag } from '@appwrite.io/pink-svelte';
@@ -17,6 +16,7 @@
     import Targets from './(components)/targets.svelte';
     import Schedule from './(components)/schedule.svelte';
     import SmsPhone from '../../smsPhone.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let showExitModal = false;
     let formComponent: Form;
@@ -65,9 +65,7 @@
                 providerType: 'email',
                 status: response.status
             });
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/messaging/message-${response.$id}`
-            );
+            await goto(getProjectRoute(`/messaging/message-${response.$id}`));
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -85,7 +83,7 @@
 
 <Wizard
     title="Create SMS message"
-    href={`${base}/project-${page.params.region}-${page.params.project}/messaging/`}
+    href={getProjectRoute('/messaging/')}
     bind:showExitModal
     confirmExit>
     <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create.svelte
index 713a8d5a8..ae64a92bd 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create.svelte
@@ -8,12 +8,11 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { project } from '../store';
     import { wizard } from '$lib/stores/wizard';
     import { providerType, messageParams } from './wizard/store';
     import { ID, MessagingProviderType, type Models } from '@appwrite.io/console';
     import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     async function create() {
         try {
@@ -109,9 +108,7 @@
                 providerType: $providerType,
                 status: response.status
             });
-            await goto(
-                `${base}/project-${$project.region}-${$project.$id}/messaging/message-${response.$id}`
-            );
+            await goto(getProjectRoute(`/messaging/message-${response.$id}`));
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/createMessageDropdown.svelte b/src/routes/(console)/project-[region]-[project]/messaging/createMessageDropdown.svelte
index 49e018a16..855870871 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/createMessageDropdown.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/createMessageDropdown.svelte
@@ -3,8 +3,7 @@
     import { providers } from './providers/store';
     import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 <Popover let:toggle padding="none" placement="bottom-end">
@@ -18,7 +17,7 @@
         {#each Object.entries(providers) as [type, option]}
             <ActionMenu.Item.Anchor
                 leadingIcon={option.icon}
-                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/create-${type}`}>
+                href={getProjectRoute(`/messaging/create-${type}`)}>
                 {option.name}
             </ActionMenu.Item.Anchor>
         {/each}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/header.svelte b/src/routes/(console)/project-[region]-[project]/messaging/header.svelte
index d0e5082cf..c8d954539 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/header.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const path = `${base}/project-${page.params.region}-${page.params.project}/messaging`;
+    const path = getProjectRoute('/messaging');
     const tabs = [
         {
             href: path,
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte
index e1b7bc473..254978ed5 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
     import { message } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -12,11 +12,11 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/messaging`,
+            href: getProjectRoute('/messaging'),
             title:
                 $message.data.title ?? $message.data.subject ?? $message.data.content ?? 'Message'
         }
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/deleteModal.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/deleteModal.svelte
index ce46b9da0..23a19b35e 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/deleteModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/deleteModal.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import type { Models } from '@appwrite.io/console';
     import Confirm from '$lib/components/confirm.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show = false;
     export let message: Models.Message & { data: Record<string, unknown> };
@@ -38,7 +38,7 @@
                 message: notificationMessage
             });
             trackEvent(Submit.MessagingMessageDelete);
-            await goto(`${base}/project-${page.params.region}-${page.params.project}/messaging`);
+            await goto(getProjectRoute('/messaging'));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.MessagingMessageDelete);
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/header.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/header.svelte
index d25dc6afd..72aa27562 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/header.svelte
@@ -1,16 +1,13 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { message } from './store';
-
-    const projectId = page.params.project;
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/messaging`}>
+        <CoverTitle href={getProjectRoute('/messaging')}>
             {$message.data.title ?? $message.data.subject ?? $message.data.content ?? 'Message'}
         </CoverTitle>
         <Id value={$message.$id} event="message">{$message.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
index 8aed8a13b..047a775ce 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import {
         EmptySearch,
@@ -13,11 +12,11 @@
     import { Filters, hasPageQueries } from '$lib/components/filters';
     import CreateProviderDropdown from './createProviderDropdown.svelte';
     import Table from './table.svelte';
-    import { base } from '$app/paths';
     import { canWriteProviders } from '$lib/stores/roles';
     import { Card, Layout, Empty, Icon } from '@appwrite.io/pink-svelte';
     import { View } from '$lib/helpers/load';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 </script>
@@ -57,11 +56,7 @@
                 <b>Sorry, we couldn't find '{data.search}'</b>
                 <p>There are no providers that match your search.</p>
             </div>
-            <Button
-                secondary
-                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/providers`}>
-                Clear search
-            </Button>
+            <Button secondary href={getProjectRoute('/messaging/providers')}>Clear search</Button>
         </EmptySearch>
     {:else}
         <Card.Base padding="none">
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/create.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/create.svelte
index 5b8cef881..4dd11ce2f 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/create.svelte
@@ -5,8 +5,6 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { project } from '../../store';
     import { wizard } from '$lib/stores/wizard';
     import { provider, providerParams, providerType } from './wizard/store';
     import { ID, MessagingProviderType, type Models } from '@appwrite.io/console';
@@ -20,6 +18,7 @@
     import { getProviderText } from '../helper';
     import { providers } from './store';
     import CreateMember from '$routes/(console)/organization-[organization]/createMember.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     async function create() {
         try {
@@ -169,9 +168,7 @@
             trackEvent(Submit.MessagingProviderCreate, {
                 provider: $provider
             });
-            await goto(
-                `${base}/project-${$project.region}-${$project.$id}/messaging/providers/provider-${response.$id}`
-            );
+            await goto(getProjectRoute(`/messaging/providers/provider-${response.$id}`));
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/breadcrumbs.svelte
index 09e63d399..02de2832c 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/breadcrumbs.svelte
@@ -4,6 +4,7 @@
     import { organization } from '$lib/stores/organization';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { provider } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,15 +12,15 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}`,
+            href: getProjectRoute(),
             title: $project.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}/messaging`,
+            href: getProjectRoute('/messaging'),
             title: 'Messaging'
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}/messaging/providers/provider-${$provider?.$id}`,
+            href: getProjectRoute(`/messaging/providers/provider-${$provider?.$id}`),
             title: $provider?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/dangerZone.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/dangerZone.svelte
index a5f725ed5..4d39f78f7 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/dangerZone.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/dangerZone.svelte
@@ -1,25 +1,22 @@
 <script lang="ts" context="module">
-    import { page } from '$app/state';
-    import { base } from '$app/paths';
     import { goto } from '$app/navigation';
     import { writable } from 'svelte/store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let showDelete = writable(false);
 
     export const promptDeleteProvider = (id: string) => {
         showDelete.set(true);
-        goto(
-            `${base}/project-${page.params.region}-${page.params.$id}/messaging/providers/provider-${id}`
-        );
+        goto(getProjectRoute(`/messaging/providers/provider-${id}`));
     };
 </script>
 
 <script lang="ts">
-    import { CardGrid, BoxAvatar } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
     import { provider } from './store';
+    import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import DeleteProvider from './deleteProvider.svelte';
+    import { CardGrid, BoxAvatar } from '$lib/components';
 </script>
 
 <CardGrid>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte
index cb0eb24a8..75f8e2fcf 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -8,6 +7,7 @@
     import { project } from '../../../store';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     let error: string;
@@ -22,9 +22,7 @@
                 message: `${$provider.name} has been deleted`
             });
             trackEvent(Submit.MessagingProviderDelete);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/messaging/providers`
-            );
+            await goto(getProjectRoute('/messaging/providers'));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.MessagingProviderDelete);
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/header.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/header.svelte
index 0c614a491..11c8b61e1 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/header.svelte
@@ -1,16 +1,13 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
+    import { provider } from './store';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
-    import { provider } from './store';
-
-    const projectId = page.params.project;
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/messaging/providers`}>
+        <CoverTitle href={getProjectRoute('/messaging/providers')}>
             {$provider?.name ? $provider?.name : '-'}
         </CoverTitle>
         <Id value={$provider?.$id} event="provider">{$provider?.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
index 47f1b776e..9e47ee203 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Id } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import type { PageData } from './$types';
     import { columns } from './store';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
     import Provider from '../provider.svelte';
     import ProviderType from '../providerType.svelte';
     import { invalidate } from '$app/navigation';
@@ -17,6 +15,7 @@
     import { IconCheckCircle } from '@appwrite.io/pink-icons-svelte';
     import Confirm from '$lib/components/confirm.svelte';
     import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 
@@ -71,7 +70,7 @@
             this={$canWriteProviders ? Table.Row.Link : Table.Row.Base}
             id={provider.$id}
             href={$canWriteProviders
-                ? `${base}/project-${$project.region}-${$project.$id}/messaging/providers/provider-${provider.$id}`
+                ? getProjectRoute(`/messaging/providers/provider-${provider.$id}`)
                 : undefined}
             {root}>
             {#each $columns as column}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
index c8f5a49b2..07dd3e0d9 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import {
         Empty,
@@ -12,7 +11,6 @@
     import Create from './create.svelte';
     import { goto } from '$app/navigation';
     import { Container } from '$lib/layout';
-    import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
     import { showCreate } from './store';
@@ -25,11 +23,10 @@
     import { View } from '$lib/helpers/load';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 
-    const region = page.params.region;
-    const project = page.params.project;
     const columns = writable<Column[]>([
         { id: '$id', title: 'Topic ID', type: 'string', width: 200 },
         { id: 'name', title: 'Name', type: 'string', width: { min: 140 } },
@@ -65,9 +62,7 @@
     ]);
 
     const topicCreated = async (event: CustomEvent<Models.Team<Record<string, unknown>>>) => {
-        await goto(
-            `${base}/project-${region}-${project}/messaging/topics/topic-${event.detail.$id}`
-        );
+        await goto(getProjectRoute(`/messaging/topics/topic-${event.detail.$id}`));
     };
 </script>
 
@@ -109,11 +104,7 @@
                 <b>Sorry, we couldn't find '{data.search}'</b>
                 <p>There are no topics that match your search.</p>
             </div>
-            <Button
-                secondary
-                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/topics`}>
-                Clear Search
-            </Button>
+            <Button secondary href={getProjectRoute('/messaging/topics')}>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/table.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/table.svelte
index 6a99009d2..83369f7fc 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/table.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Id } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -14,6 +13,7 @@
     import { canWriteTopics } from '$lib/stores/roles';
     import { Badge, FloatingActionBar, Table, Typography } from '@appwrite.io/pink-svelte';
     import Confirm from '$lib/components/confirm.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let columns: Column[];
     export let data: PageData;
@@ -62,7 +62,7 @@
         <Table.Row.Link
             {root}
             id={topic.$id}
-            href={`${base}/project-${page.params.region}-${page.params.project}/messaging/topics/topic-${topic.$id}`}>
+            href={getProjectRoute(`/messaging/topics/topic-${topic.$id}`)}>
             {#each columns as column (column.id)}
                 <Table.Cell column={column.id} {root}>
                     {#if column.id === '$id'}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+layout.svelte
index 015c066ee..8bf5c1329 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+layout.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
+    import { goto } from '$app/navigation';
     import { registerCommands } from '$lib/commandCenter';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     const topicId = page.params.topic;
 
@@ -11,9 +10,7 @@
         {
             label: 'Go to Subscribers',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/messaging/topics/topic-${topicId}/subscribers`
-                );
+                goto(getProjectRoute(`/messaging/topics/topic-${topicId}/subscribers`));
             },
             keys: ['g', 's'],
             disabled: page.url.pathname.endsWith('subscribers'),
@@ -23,9 +20,7 @@
         {
             label: 'Go to Activity',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/messaging/topics/topic-${topicId}/activity`
-                );
+                goto(getProjectRoute(`/messaging/topics/topic-${topicId}/activity`));
             },
             keys: ['g', 'a'],
             disabled: page.url.pathname.endsWith('activity'),
@@ -35,9 +30,7 @@
         {
             label: 'Go to Overview',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/messaging/topics/topic-${topicId}`
-                );
+                goto(getProjectRoute(`/messaging/topics/topic-${topicId}`));
             },
             keys: ['g', 'o'],
             disabled: page.url.pathname.endsWith(`topic-${topicId}`),
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
index 11abad571..3245f019d 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
@@ -24,9 +24,9 @@
     import { View } from '$lib/helpers/load';
     import { writable } from 'svelte/store';
     import type { Column } from '$lib/helpers/types';
-    import { base } from '$app/paths';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
     let showAdd = false;
@@ -119,7 +119,7 @@
             </div>
             <Button
                 secondary
-                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/topics/topic-${page.params.topic}/subscribers`}>
+                href={getProjectRoute(`/messaging/topics/topic-${page.params.topic}/subscribers`)}>
             </Button>
         </EmptySearch>
     {:else}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/breadcrumbs.svelte
index c71b0bd34..9131e0125 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/breadcrumbs.svelte
@@ -4,6 +4,7 @@
     import { organization } from '$lib/stores/organization';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { topic } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,15 +12,15 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}`,
+            href: getProjectRoute(),
             title: $project.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}/messaging`,
+            href: getProjectRoute('/messaging'),
             title: 'Messaging'
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}/messaging/topics/topic-${$topic?.$id}`,
+            href: getProjectRoute(`/messaging/topics/topic-${$topic?.$id}`),
             title: $topic?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
index 192f6c07f..941e3a343 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -8,6 +7,7 @@
     import { project } from '../../../store';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     let error: string;
@@ -23,9 +23,7 @@
                 message: `${$topic.name} has been deleted`
             });
             trackEvent(Submit.MessagingTopicDelete);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/messaging/topics`
-            );
+            await goto(getProjectRoute('/messaging/topics'));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.MessagingTopicDelete);
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/header.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/header.svelte
index c0f0814f4..e57c22a0c 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/header.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-    import { base } from '$app/paths';
+    import { topic } from './store';
     import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
-    import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
     import { canWriteTopics } from '$lib/stores/roles';
-    import { topic } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const projectId = page.params.project;
     const topicId = page.params.topic;
-    const path = `${base}/project-${page.params.region}-${projectId}/messaging/topics/topic-${topicId}`;
+    const path = getProjectRoute(`/messaging/topics/topic-${topicId}`);
     const tabs = [
         {
             href: path,
@@ -32,7 +31,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/messaging/topics`}>
+        <CoverTitle href={getProjectRoute('/messaging/topics')}>
             {$topic.name}
         </CoverTitle>
         <Id value={$topic.$id} event="topic">{$topic.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/table.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/table.svelte
index 63c8ff2f7..a761f1530 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/table.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Id } from '$lib/components';
     import { Dependencies } from '$lib/constants';
@@ -9,7 +8,6 @@
     import type { PageData } from './$types';
     import ProviderType from '../../providerType.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { sdk } from '$lib/stores/sdk';
     import { page } from '$app/state';
     import { targetsById } from '../../store';
@@ -17,6 +15,7 @@
     import type { Column } from '$lib/helpers/types';
     import { Badge, FloatingActionBar, Table, Typography } from '@appwrite.io/pink-svelte';
     import Confirm from '$lib/components/confirm.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let columns: Column[];
     export let data: PageData;
@@ -84,7 +83,7 @@
         <Table.Row.Link
             {root}
             id={subscriber.$id}
-            href={`${base}/project-${$project.region}-${$project.$id}/auth/user-${subscriber.target.userId}`}>
+            href={getProjectRoute(`/auth/user-${subscriber.target.userId}`)}>
             {#each columns as column}
                 <Table.Cell column={column.id} {root}>
                     {#if column.id === '$id'}
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 3378bfe09..bdf7e2bd6 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { InputText } from '$lib/elements/forms/index.js';
     import { Wizard } from '$lib/layout';
     import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
@@ -15,6 +14,7 @@
     import { writable } from 'svelte/store';
     import Scopes from '../keys/scopes.svelte';
     import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     const projectId = page.params.project;
 
@@ -40,9 +40,7 @@
             }
 
             trackEvent(Submit.KeyCreate);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/overview/keys/${$id}`
-            );
+            await goto(getProjectRoute(`/overview/keys/${$id}`));
             addNotification({
                 message: `API key has been created`,
                 type: 'success'
@@ -59,7 +57,7 @@
 
 <Wizard
     title="Create API key"
-    href={`${base}/project-${page.params.region}-${page.params.project}/overview/keys/`}
+    href={getProjectRoute('/overview/keys/')}
     bind:showExitModal
     column
     columnSize="s"
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte
index f2d86a684..60a26b113 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import { base } from '$app/paths';
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { type Models } from '@appwrite.io/console';
@@ -8,6 +7,7 @@
     import Confirm from '$lib/components/confirm.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     export let keyType: 'api' | 'dev' = 'api';
@@ -36,9 +36,7 @@
                 message: `${key.name} has been deleted`
             });
             trackEvent(event);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}`
-            );
+            await goto(getProjectRoute(`/overview/${slug}`));
         } catch (e) {
             error = e.message;
             trackError(e, event);
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte
index 69aa6c30e..615568f48 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import { base } from '$app/paths';
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { goto, invalidate } from '$app/navigation';
     import Confirm from '$lib/components/confirm.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     export let keyIds: string[] = [];
@@ -41,9 +41,7 @@
             });
 
             trackEvent(event);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}`
-            );
+            await goto(getProjectRoute(`/overview/${slug}`));
         } catch (e) {
             error = e.message;
             trackError(e, event);
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte
index 837142828..5e2ef219c 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { goto } from '$app/navigation';
     import { Empty } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -11,6 +9,7 @@
     import { Badge, FloatingActionBar, Layout, Table } from '@appwrite.io/pink-svelte';
     import DeleteBatch from './deleteBatch.svelte';
     import { capitalize } from '$lib/helpers/string';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let keyType: 'api' | 'dev' = 'api';
     export let keys: Models.KeyList | Models.DevKeyList;
@@ -100,9 +99,7 @@
         description={getDescription()}
         on:click={() => {
             if (isApiKey) {
-                goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}/create`
-                );
+                goto(getProjectRoute(`/overview/${slug}/create`));
             } else {
                 $showDevKeysCreateModal = true;
             }
diff --git a/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte b/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
index 22229f063..40e2214b0 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
@@ -10,7 +10,6 @@
 
 <script lang="ts">
     import { afterNavigate, goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { PlatformsPanel } from '$lib/commandCenter/panels';
@@ -28,9 +27,10 @@
     import { writable, type Writable } from 'svelte/store';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let period: UsagePeriods = '30d';
-    $: path = `${base}/project-${page.params.region}-${page.params.project}/overview`;
+    $: path = getProjectRoute('/overview');
 
     onMount(handle);
     afterNavigate(handle);
@@ -118,7 +118,7 @@
                 <Layout.Stack gap="xl" direction={$isSmallViewport ? 'column' : 'row'}>
                     <Card.Link
                         padding="s"
-                        href={`${base}/project-${page.params.region}-${page.params.project}/databases`}
+                        href={getProjectRoute('/databases')}
                         class="is-2-columns-large-screen">
                         <div class="grid-item-1">
                             <div class="grid-item-1-start-start">
@@ -140,7 +140,7 @@
                     </Card.Link>
                     <Card.Link
                         padding="s"
-                        href={`${base}/project-${page.params.region}-${page.params.project}/storage`}
+                        href={getProjectRoute('/storage')}
                         class="is-2-columns-large-screen">
                         <div class="grid-item-1">
                             <div class="grid-item-1-start-start">
@@ -163,7 +163,7 @@
                     </Card.Link>
                     <Card.Link
                         padding="s"
-                        href={`${base}/project-${page.params.region}-${page.params.project}/auth`}
+                        href={getProjectRoute('/auth')}
                         class="is-2-columns-large-screen">
                         <div class="grid-item-1">
                             <div class="grid-item-1-start-start">
@@ -185,7 +185,7 @@
                     </Card.Link>
                     <Card.Link
                         padding="s"
-                        href={`${base}/project-${page.params.region}-${page.params.project}/functions`}
+                        href={getProjectRoute('/functions')}
                         class="is-2-columns-large-screen">
                         <div class="grid-item-1">
                             <div class="grid-item-1-start-start">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte
index 0cfaf93aa..fe948f078 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,7 +11,7 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/breadcrumbs.svelte
index 65cbd2fa1..6d84610ea 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/breadcrumbs.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
     import { devKey } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/overview/dev-keys`,
+            href: getProjectRoute('/overview/dev-keys'),
             title: 'Dev keys'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/overview/dev-keys/${$devKey?.$id}`,
+            href: getProjectRoute(`/overview/dev-keys/${$devKey?.$id}`),
             title: $devKey?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/header.svelte b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/header.svelte
index a3bc8feb6..b3982af1c 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/[key]/header.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Cover, CoverTitle } from '$lib/layout';
     import { devKey } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle
-            href={`${base}/project-${page.params.region}-${page.params.project}/overview/dev-keys`}>
+        <CoverTitle href={getProjectRoute('/overview/dev-keys')}>
             {$devKey?.name}
         </CoverTitle>
     </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
index cf9287ef7..ef33b68e4 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
@@ -8,10 +8,10 @@
     import { sdk } from '$lib/stores/sdk';
     import { goto } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { base } from '$app/paths';
     import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/state';
     import { showDevKeysCreateModal } from '$routes/(console)/project-[region]-[project]/overview/store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let isSubmitting = false;
     let name = '',
@@ -30,9 +30,7 @@
 
             $showDevKeysCreateModal = false;
             trackEvent(Submit.DevKeyCreate);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/overview/dev-keys/${$id}`
-            );
+            await goto(getProjectRoute(`/overview/dev-keys/${$id}`));
             addNotification({
                 message: `Dev key has been created`,
                 type: 'success'
diff --git a/src/routes/(console)/project-[region]-[project]/overview/header.svelte b/src/routes/(console)/project-[region]-[project]/overview/header.svelte
index a59b86d80..0c6a48ad7 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/header.svelte
@@ -5,12 +5,12 @@
     import { project } from '../store';
     import { hasOnboardingDismissed, setHasOnboardingDismissed } from '$lib/helpers/onboarding';
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { Layout, Button, Typography } from '@appwrite.io/pink-svelte';
     import { user } from '$lib/stores/user';
     import { isSmallViewport } from '$lib/stores/viewport';
     import { Dependencies } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 {#if !page.url.pathname.includes('get-started')}
@@ -52,7 +52,7 @@
                                 trackEvent('onboarding_hub_platform_dismiss');
                                 await setHasOnboardingDismissed($project.$id);
                                 await invalidate(Dependencies.ORGANIZATION);
-                                goto(`${base}/project-${$project.region}-${$project.$id}/overview`);
+                                goto(getProjectRoute('/overview'));
                             }}>Dismiss this page</Button.Button>
                     {/if}
                 </div>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte
index 00fa0e8f7..cc3384b33 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
     import { key } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/overview/keys`,
+            href: getProjectRoute('/overview/keys'),
             title: 'API keys'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/overview/keys/${$key?.$id}`,
+            href: getProjectRoute(`/overview/keys/${$key?.$id}`),
             title: $key?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/header.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/header.svelte
index 0fd354e94..b8e31feac 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/header.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import { Cover, CoverTitle } from '$lib/layout';
     import { key } from './store';
-
-    const projectId = page.params.project;
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/overview/keys`}>
+        <CoverTitle href={getProjectRoute('/overview/keys')}>
             {$key?.name}
         </CoverTitle>
     </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/action.svelte
index ba746e54a..8c3a0ad26 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/action.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/action.svelte
@@ -3,13 +3,11 @@
     import { canWriteKeys } from '$lib/stores/roles';
     import { Icon } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project.js';
 </script>
 
 {#if $canWriteKeys}
-    <Button
-        href={`${base}/project-${page.params.region}-${page.params.project}/overview/keys/create`}>
+    <Button href={getProjectRoute('/overview/keys/create')}>
         <Icon icon={IconPlus} slot="start" size="s" />
         Create API key
     </Button>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
index 3a7d7d5a5..432a9ae79 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
@@ -30,20 +30,19 @@
     import PlatformAndroidImgSourceDark from './assets/platform-android-dark.svg';
     import PlatformFlutterImgSource from './assets/platform-flutter.svg';
     import PlatformFlutterImgSourceDark from './assets/platform-flutter-dark.svg';
-    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';
     import { goto } from '$app/navigation';
-    import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     function createKey() {
         trackEvent(Click.KeyCreateClick, {
             source: 'onboarding'
         });
-        goto(`${base}/project-${page.params.region}-${page.params.project}/overview/keys/create`, {
+        goto(getProjectRoute('/overview/keys/create'), {
             replaceState: true
         });
     }
@@ -393,9 +392,7 @@
                                     <Card.Button
                                         on:click={() => {
                                             trackEvent(Click.OnboardingSetupDatabaseClick);
-                                            goto(
-                                                `${base}/project-${page.params.region}-${page.params.project}/databases`
-                                            );
+                                            goto(getProjectRoute('/databases'));
                                         }}
                                         padding="s"
                                         ><Layout.Stack gap="xl"
@@ -488,7 +485,9 @@
                                                             justifyContent="flex-end">
                                                             <Link.Anchor
                                                                 variant="quiet-muted"
-                                                                href={`${base}/project-${page.params.region}-${page.params.project}/auth/settings`}
+                                                                href={getProjectRoute(
+                                                                    '/auth/settings'
+                                                                )}
                                                                 on:click={() => {
                                                                     trackEvent(
                                                                         Click.OnboardingAuthEmailPasswordClick
@@ -498,7 +497,9 @@
                                                             </Link.Anchor>
                                                             <Link.Anchor
                                                                 variant="quiet-muted"
-                                                                href={`${base}/project-${page.params.region}-${page.params.project}/auth/settings`}
+                                                                href={getProjectRoute(
+                                                                    '/auth/settings'
+                                                                )}
                                                                 on:click={() => {
                                                                     trackEvent(
                                                                         Click.OnboardingAuthOauth2Click
@@ -506,7 +507,9 @@
                                                                 }}>OAuth 2</Link.Anchor>
                                                             <Link.Anchor
                                                                 variant="quiet-muted"
-                                                                href={`${base}/project-${page.params.region}-${page.params.project}/auth/settings`}
+                                                                href={getProjectRoute(
+                                                                    '/auth/settings'
+                                                                )}
                                                                 on:click={() => {
                                                                     trackEvent(
                                                                         Click.OnboardingAuthAllMethodsClick
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
index ff85cf31a..d405f1a33 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
@@ -59,8 +59,6 @@
 </script>
 
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import { canWritePlatforms } from '$lib/stores/roles';
     import { setOverviewAction } from '../context';
@@ -83,6 +81,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import type { ComponentType } from 'svelte';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -102,7 +101,7 @@
         'react-native-ios' = 'iOS',
         'web' = 'Web'
     }
-    const path = `${base}/project-${page.params.region}-${page.params.project}/overview/platforms`;
+    const path = getProjectRoute('/overview/platforms');
 
     function getPlatformInfo(platform: string): ComponentType {
         if (platform.includes('flutter')) {
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/breadcrumbs.svelte
index bd2600d16..b8f891b8f 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/breadcrumbs.svelte
@@ -4,6 +4,7 @@
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
     import { platform } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,15 +12,15 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}`,
+            href: getProjectRoute(),
             title: $project.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}/overview/platforms`,
+            href: getProjectRoute('/overview/platforms'),
             title: 'Platforms'
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}/overview/platforms/${$platform.$id}`,
+            href: getProjectRoute(`/overview/platforms/${$platform.$id}`),
             title: $platform.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/delete.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/delete.svelte
index dcc39086e..ec05d16d3 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/delete.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
@@ -8,6 +7,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../../store';
     import { platform } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     let error: string;
@@ -21,7 +21,7 @@
                 message: `${$platform.name} has been deleted`
             });
             trackEvent(Submit.PlatformDelete);
-            await goto(`${base}/project-${$project.region}-${$project.$id}/overview/platforms`);
+            await goto(getProjectRoute('/overview/platforms'));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.PlatformDelete);
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/header.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/header.svelte
index b52019a57..2603e8f44 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/header.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import { Cover, CoverTitle } from '$lib/layout';
     import { platform } from './store';
-
-    const projectId = page.params.project;
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/overview/platforms`}>
+        <CoverTitle href={getProjectRoute('/overview/platforms')}>
             {$platform?.name}
         </CoverTitle>
     </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/+layout.svelte b/src/routes/(console)/project-[region]-[project]/settings/+layout.svelte
index fbe135724..072330b43 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/+layout.svelte
@@ -1,21 +1,17 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
+    import { goto } from '$app/navigation';
     import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { canWriteProjects } from '$lib/stores/roles';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: $registerCommands([
         {
             label: 'Create webhook',
             icon: IconPlus,
             keys: page.url.pathname.includes('webhooks') ? ['c'] : ['c', 'w'],
-            callback: () => {
-                goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`
-                );
-            },
+            callback: () => goto(getProjectRoute('/settings/webhooks/create')),
             group: 'webhooks',
             disabled: !$canWriteProjects
         }
diff --git a/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte
index 43332805b..7406d0907 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,11 +11,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/settings`,
+            href: getProjectRoute('/settings'),
             title: 'Settings'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte
index 927045162..dc15b6d4b 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { EmptySearch, PaginationWithLimit } from '$lib/components/index.js';
     import { Button } from '$lib/elements/forms';
     import Container from '$lib/layout/container.svelte';
@@ -10,6 +9,7 @@
     import { Click, trackEvent } from '$lib/actions/analytics';
     import Table from './table.svelte';
     import { ResponsiveContainerHeader } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let { data } = $props();
 </script>
@@ -21,7 +21,7 @@
         searchPlaceholder="Search by domain"
         analyticsSource="settings_domain_overview">
         <Button
-            href={`${base}/project-${page.params.region}-${page.params.project}/settings/domains/add-domain`}
+            href={getProjectRoute('/settings/domains/add-domain')}
             on:click={() => {
                 trackEvent(Click.DomainCreateClick, {
                     source: 'settings_domain_overview'
@@ -66,7 +66,7 @@
 
                     <Button
                         secondary
-                        href={`${base}/project-${page.params.region}-${page.params.project}/settings/domains/add-domain`}
+                        href={getProjectRoute('/settings/domains/add-domain')}
                         size="s">
                         Add domain
                     </Button>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
index 781c68bb2..5296f40d2 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Button, Form, InputDomain } from '$lib/elements/forms';
     import { Wizard } from '$lib/layout';
@@ -12,8 +11,9 @@
     import { isCloud } from '$lib/system';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { getApexDomain } from '$lib/helpers/tlds';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const routeBase = `${base}/project-${page.params.region}-${page.params.project}/settings/domains`;
+    const routeBase = getProjectRoute('/settings/domains');
 
     let { data } = $props();
 
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.svelte
index dc9946534..bfaf0423e 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/verify-[domain]/+page.svelte
@@ -18,12 +18,12 @@
     import { isCloud } from '$lib/system';
     import { page } from '$app/state';
     import Wizard from '$lib/layout/wizard.svelte';
-    import { base } from '$app/paths';
     import { writable } from 'svelte/store';
     import { isASubdomain } from '$lib/helpers/tlds';
     import { consoleVariables } from '$routes/(console)/store';
     import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
     import RecordTable from '$lib/components/domains/recordTable.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let { data } = $props();
 
@@ -42,7 +42,7 @@
     });
     let verified = $state(false);
 
-    const routeBase = `${base}/project-${page.params.region}-${page.params.project}/settings/domains`;
+    const routeBase = getProjectRoute('/settings/domains');
     const isSubmitting = writable(false);
 
     async function verify() {
diff --git a/src/routes/(console)/project-[region]-[project]/settings/header.svelte b/src/routes/(console)/project-[region]-[project]/settings/header.svelte
index d7a715c2c..b71fd947d 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/header.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
@@ -8,8 +7,9 @@
     import { canWriteProjects } from '$lib/stores/roles';
     import { isCloud } from '$lib/system';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const path = `${base}/project-${page.params.region}-${page.params.project}/settings`;
+    const path = getProjectRoute('/settings');
     const tabs: TabElement[] = [
         {
             href: path,
diff --git a/src/routes/(console)/project-[region]-[project]/settings/smtp/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/smtp/+page.svelte
index 7df564ceb..bc4fabce2 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/smtp/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/smtp/+page.svelte
@@ -10,7 +10,6 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import InputNumber from '$lib/elements/forms/inputNumber.svelte';
-    import { base } from '$app/paths';
     import deepEqual from 'deep-equal';
     import { onMount } from 'svelte';
     import { organization } from '$lib/stores/organization';
@@ -18,6 +17,7 @@
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
     import { upgradeURL } from '$lib/stores/billing';
     import { Link, Selector, Alert } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let enabled = false;
     let senderName: string;
@@ -120,8 +120,7 @@
         <CardGrid>
             <svelte:fragment slot="title">SMTP server</svelte:fragment>
             You can customize the email service by providing your own SMTP server. View your email templates
-            <Link.Anchor href={`${base}/project-${$project.region}-${$project.$id}/auth/templates`}
-                >here</Link.Anchor>
+            <Link.Anchor href={getProjectRoute('/auth/templates')}>here</Link.Anchor>
             <svelte:fragment slot="aside">
                 {#if $organization.billingPlan === BillingPlan.FREE}
                     <Alert.Inline
diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte
index af7f27d0d..be164e9f6 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { CardGrid, CopyInput } from '$lib/components';
     import { Dependencies } from '$lib/constants';
@@ -11,7 +9,7 @@
     import { onMount } from 'svelte';
     import { project } from '../store';
     import { canWriteProjects } from '$lib/stores/roles';
-    import { getProjectEndpoint } from '$lib/helpers/project';
+    import { getProjectEndpoint, getProjectRoute } from '$lib/helpers/project';
 
     let name: string = null;
 
@@ -47,10 +45,7 @@
         <CopyInput label="API Endpoint" value={getProjectEndpoint()} />
     </svelte:fragment>
     <svelte:fragment slot="actions">
-        <Button
-            secondary
-            event="view_keys"
-            href={`${base}/project-${page.params.region}-${page.params.project}/overview/keys#integrations`}>
+        <Button secondary event="view_keys" href={getProjectRoute('/overview/keys#integrations')}>
             View API keys
         </Button>
     </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
index 81ee6ada9..b868f1358 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -9,16 +9,15 @@
     import { formatNum } from '$lib/helpers/string';
     import { total } from '$lib/layout/usage.svelte';
     import { BillingPlan } from '$lib/constants.js';
-    import { base } from '$app/paths';
     import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
     import { getCountryName } from '$lib/helpers/diallingCodes.js';
     import { Accordion, Icon, Layout, Link, Table, Typography } from '@appwrite.io/pink-svelte';
     import { IconChartSquareBar } from '@appwrite.io/pink-icons-svelte';
-    import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
-    $: baseRoute = `${base}/project-${page.params.region}-${page.params.project}`;
+    $: baseRoute = getProjectRoute();
     $: network = data.usage.network;
     $: users = data.usage.users;
     $: usersTotal = data.usage.usersTotal;
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
index 3d642cd9e..b36cac813 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Empty, Id } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
@@ -16,6 +14,7 @@
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { View } from '$lib/helpers/load';
     import { goto } from '$app/navigation';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 
@@ -33,9 +32,7 @@
     <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
         <ViewSelector {columns} view={View.Table} hideView />
         {#if $canWriteWebhooks}
-            <Button
-                href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`}
-                event="create_webhook">
+            <Button href={getProjectRoute('/settings/webhooks/create')} event="create_webhook">
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Create webhook
             </Button>
@@ -50,9 +47,7 @@
                 {/each}
             </svelte:fragment>
             {#each data.webhooks.webhooks as webhook}
-                <Table.Row.Link
-                    {root}
-                    href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/${webhook.$id}`}>
+                <Table.Row.Link {root} href={getProjectRoute(`/settings/webhooks/${webhook.$id}`)}>
                     {#each $columns as column (column.id)}
                         <Table.Cell column={column.id} {root}>
                             {#if column.id === '$id'}
@@ -92,10 +87,7 @@
             single
             href="https://appwrite.io/docs/advanced/platform/webhooks"
             target="webhook"
-            on:click={() =>
-                goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`
-                )} />
+            on:click={() => goto(getProjectRoute('/settings/webhooks/create'))} />
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
index 21da5269b..a565ee8e0 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
     import { webhook } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -12,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks`,
+            href: getProjectRoute('/settings/webhooks'),
             title: 'Settings'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/webhook/${$webhook?.$id}`,
+            href: getProjectRoute(`/settings/webhooks/webhook/${$webhook?.$id}`),
             title: $webhook?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/delete.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/delete.svelte
index 03aa60206..f33360655 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/delete.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
@@ -9,6 +8,7 @@
     import { Typography } from '@appwrite.io/pink-svelte';
     import { project } from '../../../store';
     import { webhook } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     let error: string;
@@ -22,7 +22,7 @@
                 message: `${$webhook.name} has been deleted`
             });
             trackEvent(Submit.WebhookDelete);
-            await goto(`${base}/project-${$project.region}-${$project.$id}/settings/webhooks`);
+            await goto(getProjectRoute('/settings/webhooks'));
         } catch (e) {
             error = e.message;
             trackError(e, Submit.WebhookDelete);
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/header.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/header.svelte
index 54f69c8ee..29153b45c 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/header.svelte
@@ -1,16 +1,13 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
+    import { webhook } from './store';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
-    import { webhook } from './store';
-
-    const projectId = page.params.project;
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/settings/webhooks`}>
+        <CoverTitle href={getProjectRoute('/settings/webhooks')}>
             {$webhook?.name}
         </CoverTitle>
         <Id value={$webhook?.$id} event="webhook">{$webhook?.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte
index 4b21c8848..953bab3af 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Wizard } from '$lib/layout';
     import { Layout } from '@appwrite.io/pink-svelte';
     import Form from '$lib/elements/forms/form.svelte';
@@ -12,6 +10,7 @@
     import Step2 from './step2.svelte';
     import Step3 from './step3.svelte';
     import Button from '$lib/elements/forms/button.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let showExitModal = false;
 
@@ -42,9 +41,7 @@
             trackEvent(Submit.WebhookCreate, {
                 events: events
             });
-            goto(
-                `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/${webhook.$id}`
-            );
+            goto(getProjectRoute(`/settings/webhooks/${webhook.$id}`));
         } catch (error) {
             trackError(error.message, Submit.DomainCreate);
             throw new Error(error.message);
@@ -55,7 +52,7 @@
 <Form onSubmit={create}>
     <Wizard
         title="Create webhook"
-        href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks`}
+        href={getProjectRoute('/settings/webhooks')}
         bind:showExitModal
         column
         confirmExit>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/failedModal.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/failedModal.svelte
index 70673eff1..7d7939a81 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/failedModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/failedModal.svelte
@@ -1,22 +1,15 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-
     import Code from '$lib/components/code.svelte';
     import Modal from '$lib/components/modal.svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import { type Models } from '@appwrite.io/console';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show: boolean;
     export let webhook: Models.Webhook;
     export let showUpdateButton: boolean = true;
 
-    const projectId = page.params.project;
-
-    $: webhookPath = webhook
-        ? `${base}/project-${page.params.region}-${projectId}/settings/webhooks/` +
-          (webhook['$id'] ?? '')
-        : '';
+    $: webhookPath = webhook ? getProjectRoute('/settings/webhooks/') + (webhook['$id'] ?? '') : '';
 
     let enabled = webhook ? webhook.enabled : false;
 
diff --git a/src/routes/(console)/project-[region]-[project]/sites/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/sites/breadcrumbs.svelte
index e9afbf4ff..cfab45568 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/breadcrumbs.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,11 +11,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/sites`,
+            href: getProjectRoute('/sites'),
             title: 'Sites'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/createVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/createVariableModal.svelte
index 8dc28a966..660ed207b 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/createVariableModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/createVariableModal.svelte
@@ -3,11 +3,10 @@
     import { Modal } from '$lib/components';
     import { InputText } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
-    import { base } from '$app/paths';
     import { Icon, Layout, Selector, Button as PinkButton } from '@appwrite.io/pink-svelte';
     import { Link } from '$lib/elements';
-    import { page } from '$app/state';
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show = false;
     export let variables: Partial<Models.Variable>[];
@@ -66,9 +65,7 @@
 <Modal bind:show onSubmit={handleVariable} title="Create variables" bind:error>
     <span slot="description">
         Set the environment variables or secret that will be passed to your site. Global variables
-        can be set in <Link
-            variant="muted"
-            href={`${base}/project-${page.params.region}-${page.params.project}/settings`}
+        can be set in <Link variant="muted" href={getProjectRoute('/settings')}
             >project settings</Link
         >.
     </span>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte
index baa0e4e30..f2557294e 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Fieldset, Card, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import Aside from '../aside.svelte';
@@ -12,6 +10,7 @@
     import { onMount } from 'svelte';
     import { getFrameworkIcon } from '$lib/stores/sites';
     import type { Models, RealtimeResponseEvent } from '@appwrite.io/console';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let { data } = $props();
 
@@ -28,9 +27,7 @@
                 ) {
                     deployment = response.payload;
                     if (response.payload.status === 'ready') {
-                        goto(
-                            `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/finish?site=${data.site.$id}`
-                        );
+                        goto(getProjectRoute(`/sites/create-site/finish?site=${data.site.$id}`));
                     }
                 }
             }
@@ -38,9 +35,7 @@
     });
 </script>
 
-<Wizard
-    title="Create site"
-    href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}`}>
+<Wizard title="Create site" href={getProjectRoute(`/sites/site-${data.site.$id}`)}>
     <Layout.Stack gap="xl">
         <Card.Base padding="s" radius="s">
             <Layout.Stack direction="row">
@@ -84,7 +79,7 @@
                 size="s"
                 fullWidthMobile
                 secondary
-                href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}`}>
+                href={getProjectRoute(`/sites/site-${data.site.$id}`)}>
                 Go to dashboard
             </Button>
         </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.svelte
index 152a41aa2..5776ab7e6 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Wizard } from '$lib/layout';
     import { Layout, Typography, Icon, Lights, Step, Card } from '@appwrite.io/pink-svelte';
@@ -17,6 +16,7 @@
     import type { Adapter, BuildRuntime, Framework } from '@appwrite.io/console';
     import { Dependencies } from '$lib/constants';
     import { ConnectRepoModal } from '$lib/components/git';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -66,9 +66,7 @@
     }
 </script>
 
-<Wizard
-    column
-    href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}`}>
+<Wizard column href={getProjectRoute(`/sites/site-${data.site.$id}`)}>
     <!-- Creating a new stack -->
     <Layout.Stack gap="xxxl">
         <div style:position="relative" style="z-index: 6;">
@@ -132,7 +130,7 @@
                                     source: 'sites_create_finish'
                                 });
                             }}
-                            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}/domains`}>
+                            href={getProjectRoute(`/sites/site-${data.site.$id}/domains`)}>
                             <Layout.Stack gap="s" style="height: 100%">
                                 <Layout.Stack
                                     direction="row"
@@ -200,7 +198,7 @@
             size="s"
             fullWidthMobile
             secondary
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}`}>
+            href={getProjectRoute(`/sites/site-${data.site.$id}`)}>
             Go to dashboard
         </Button>
     </svelte:fragment>
@@ -208,9 +206,9 @@
 
 {#if showConnectRepositry}
     <ConnectRepoModal
-        bind:show={showConnectRepositry}
         {connect}
         product="sites"
+        bind:show={showConnectRepositry}
         callbackState={{ connectRepo: 'true' }} />
 {/if}
 
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte
index eaea81678..7cad25ee8 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Button, Form } from '$lib/elements/forms';
@@ -23,6 +22,7 @@
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { isCloud } from '$lib/system';
     import { currentPlan } from '$lib/stores/organization';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
     let showExitModal = false;
@@ -121,7 +121,9 @@
             });
 
             await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
+                getProjectRoute(
+                    `/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
+                )
             );
         } catch (e) {
             addNotification({
@@ -169,11 +171,7 @@
     <title>Create site - Appwrite</title>
 </svelte:head>
 
-<Wizard
-    title="Create site"
-    bind:showExitModal
-    href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
-    confirmExit>
+<Wizard confirmExit title="Create site" bind:showExitModal href={getProjectRoute('/sites/')}>
     <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
         <Layout.Stack gap="xl">
             <Layout.Stack gap="s">
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/aside.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/aside.svelte
index a3e99a5bc..1b7a38270 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/aside.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/manual/aside.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
+    import { app } from '$lib/stores/app';
     import { Card } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { app } from '$lib/stores/app';
     import type { Models } from '@appwrite.io/console';
+    import { getProjectRoute } from '$lib/helpers/project';
     import { Image, Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let template: Models.TemplateSite;
@@ -29,7 +28,7 @@
         <Button
             fullWidth
             secondary
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates/template-${template.key}`}>
+            href={getProjectRoute(`/sites/create-site/templates/template-${template.key}`)}>
             Use template
         </Button>
     </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.svelte
index 776ec0c39..7f03bede5 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Click, trackEvent } from '$lib/actions/analytics.js';
     import Card from '$lib/components/card.svelte';
     import { Repositories } from '$lib/components/git/index.js';
@@ -10,6 +8,7 @@
     import { installation, repository } from '$lib/stores/vcs.js';
     import type { Models } from '@appwrite.io/console';
     import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let { data } = $props();
 
@@ -20,15 +19,14 @@
             from: 'cover'
         });
         repository.set(e);
-        const target = `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/repositories/repository-${e.id}?installation=${$installation.$id}`;
+        const target = getProjectRoute(
+            `/sites/create-site/repositories/repository-${e.id}?installation=${$installation.$id}`
+        );
         goto(target);
     }
 </script>
 
-<Wizard
-    title="Create site"
-    href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
-    hideFooter>
+<Wizard title="Create site" href={getProjectRoute('/sites/')} hideFooter>
     {#if !!data?.installations?.total}
         <Fieldset legend="Git repository">
             <Repositories
@@ -51,9 +49,8 @@
                             all your favorite frameworks, and deploy in seconds.
                         </Typography.Text>
                     </Layout.Stack>
-                    <Button
-                        href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates`}
-                        secondary>View templates</Button>
+                    <Button href={getProjectRoute('/sites/create-site/templates')} secondary
+                        >View templates</Button>
                 {:else}
                     <Layout.Stack gap="s">
                         <Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
index 1def9713b..4fd59b703 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Card } from '$lib/components';
@@ -27,6 +26,7 @@
     import Configuration from '../../configuration.svelte';
     import { consoleVariables } from '$routes/(console)/store';
     import Domain from '../../domain.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
     let showExitModal = false;
@@ -144,7 +144,9 @@
             });
 
             await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
+                getProjectRoute(
+                    `/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
+                )
             );
         } catch (e) {
             addNotification({
@@ -160,11 +162,7 @@
     <title>Create site - Appwrite</title>
 </svelte:head>
 
-<Wizard
-    title="Create site"
-    bind:showExitModal
-    href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
-    confirmExit>
+<Wizard title="Create site" bind:showExitModal href={getProjectRoute('/sites/')} confirmExit>
     <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
         <Layout.Stack gap="xl">
             <Card radius="s" padding="s">
@@ -179,9 +177,7 @@
                             {data.repository?.organization}/{data.repository?.name}
                         </Typography.Text>
                     </Layout.Stack>
-                    <Button
-                        secondary
-                        href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/repositories`}>
+                    <Button secondary href={getProjectRoute('/sites/create-site/repositories')}>
                         Change
                     </Button>
                 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte
index a3fc998a2..626a4a602 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte
@@ -10,6 +10,7 @@
     import { capitalize } from '$lib/helpers/string';
     import { app } from '$lib/stores/app.js';
     import { getFrameworkIcon } from '$lib/stores/sites.js';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -82,12 +83,7 @@
     <title>Create site - Appwrite</title>
 </svelte:head>
 
-<Wizard
-    href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
-    title="Create site"
-    invertColumns
-    stickySide
-    hideFooter>
+<Wizard href={getProjectRoute('/sites/')} title="Create site" invertColumns stickySide hideFooter>
     <svelte:fragment slot="aside">
         <Layout.Stack gap="xl">
             <InputSearch
@@ -148,7 +144,9 @@
 
                             <Card.Link
                                 variant="secondary"
-                                href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates/template-${template.key}`}
+                                href={getProjectRoute(
+                                    `/sites/create-site/templates/template-${template.key}`
+                                )}
                                 padding="xxs">
                                 <Card.Media
                                     title={template.name}
@@ -180,9 +178,7 @@
                 hidePagination
                 target="templates"
                 search={page.url.searchParams.get('search')}>
-                <Button
-                    secondary
-                    href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates`}
+                <Button secondary href={getProjectRoute('/sites/create-site/templates')}
                     >Clear search</Button>
             </EmptySearch>
         {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.svelte
index 294fdce16..5693a90cd 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/template-[template]/+page.svelte
@@ -37,6 +37,7 @@
     import { connectGitHub } from '$lib/stores/git';
     import Domain from '../../domain.svelte';
     import { getFrameworkIcon } from '$lib/stores/sites';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -172,7 +173,9 @@
                 });
 
                 await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
+                    getProjectRoute(
+                        `/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
+                    )
                 );
             } catch (e) {
                 addNotification({
@@ -198,11 +201,7 @@
     <title>Create site - Appwrite</title>
 </svelte:head>
 
-<Wizard
-    title="Create site"
-    bind:showExitModal
-    href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
-    confirmExit>
+<Wizard title="Create site" bind:showExitModal href={getProjectRoute('/sites/')} confirmExit>
     <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
         <Layout.Stack gap="xl">
             {#if selectedRepository && showSiteConfig}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/updateVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/updateVariableModal.svelte
index c678007f9..8f8cb48e1 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/updateVariableModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/updateVariableModal.svelte
@@ -3,10 +3,9 @@
     import { Modal } from '$lib/components';
     import { InputText } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
-    import { base } from '$app/paths';
     import { Layout, Selector } from '@appwrite.io/pink-svelte';
     import { Link } from '$lib/elements';
-    import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show = false;
     export let selectedVar: Partial<Models.Variable>;
@@ -42,8 +41,7 @@
     <span slot="description">
         Update the environment variable for your site. Global variables can be set in <Link
             variant="muted"
-            href={`${base}/project-${page.params.region}-${page.params.project}/settings`}
-            >project settings</Link
+            href={getProjectRoute('/settings')}>project settings</Link
         >.
     </span>
     <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/sites/createSiteModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/createSiteModal.svelte
index 635d712ec..3cfa9322e 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/createSiteModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/createSiteModal.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
     import { Card, Modal } from '$lib/components';
     import { Image, Layout, Typography } from '@appwrite.io/pink-svelte';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import RepoDark from './(images)/repositoryDark.svg';
     import RepoLight from './(images)/repositoryLight.svg';
     import TemplateDark from './(images)/templateDark.svg';
     import TemplateLight from './(images)/templateLight.svg';
     import { app } from '$lib/stores/app';
     import { Link } from '$lib/elements';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show = false;
 </script>
@@ -20,7 +19,7 @@
                 variant="secondary"
                 padding="xs"
                 radius="s"
-                href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates`}>
+                href={getProjectRoute('/sites/create-site/templates')}>
                 <Image
                     alt="repositories"
                     radius="xxs"
@@ -39,7 +38,7 @@
                 variant="secondary"
                 padding="xs"
                 radius="s"
-                href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/repositories`}>
+                href={getProjectRoute('/sites/create-site/repositories')}>
                 <Image
                     alt="repositories"
                     radius="xxs"
@@ -58,7 +57,7 @@
     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
         Or simply drag and drop your files to create a site <Link
             variant="muted"
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/manual`}>
+            href={getProjectRoute('/sites/create-site/manual')}>
             manually</Link
         >.
     </Typography.Text>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/grid.svelte b/src/routes/(console)/project-[region]-[project]/sites/grid.svelte
index 59effbc6d..84a984f21 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/grid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/grid.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { timeFromNow } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
     import { Card, Icon, Layout, Popover, Tooltip, Typography } from '@appwrite.io/pink-svelte';
@@ -14,6 +13,7 @@
     import { IconExclamation } from '@appwrite.io/pink-icons-svelte';
     import { Link } from '$lib/elements';
     import { getFrameworkIcon } from '$lib/stores/sites';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let siteList: Models.SiteList;
 
@@ -41,9 +41,7 @@
 
 <Layout.Grid columns={3} columnsXS={1} columnsXXS={1}>
     {#each siteList.sites as site (site.$id)}
-        <Card.Link
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}`}
-            padding="xxs">
+        <Card.Link href={getProjectRoute(`/sites/site-${site.$id}`)} padding="xxs">
             <Card.Media
                 title={site.name}
                 description={generateSiteDeploymentDesc(site)}
@@ -76,7 +74,9 @@
                                     Last deployment failed {timeFromNow(
                                         site?.latestDeploymentCreatedAt
                                     )}. <Link
-                                        href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}/deployments/deployment-${site.latestDeploymentId}`}>
+                                        href={getProjectRoute(
+                                            `/sites/site-${site.$id}/deployments/deployment-${site.latestDeploymentId}`
+                                        )}>
                                         View logs
                                     </Link>
                                 </Typography.Text>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/header.svelte b/src/routes/(console)/project-[region]-[project]/sites/header.svelte
index 511fcc0d3..190f130c3 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/header.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    $: path = `${base}/project-${page.params.region}-${page.params.project}/sites`;
+    $: path = getProjectRoute('/sites');
     $: tabs = [
         {
             href: path,
diff --git a/src/routes/(console)/project-[region]-[project]/sites/redeployModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/redeployModal.svelte
index 38cc53400..ce9135087 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/redeployModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/redeployModal.svelte
@@ -7,8 +7,8 @@
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import type { Models } from '@appwrite.io/console';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show = false;
     export let selectedDeploymentId: string;
@@ -32,7 +32,9 @@
             });
             if (redirect) {
                 await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}/deployments/deployment-${deployment.$id}`
+                    getProjectRoute(
+                        `/sites/site-${site.$id}/deployments/deployment-${deployment.$id}`
+                    )
                 );
             }
         } catch (e) {
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/breadcrumbs.svelte
index 28d1faace..97ec0f1c0 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/breadcrumbs.svelte
@@ -4,6 +4,7 @@
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/sites`,
+            href: getProjectRoute('/sites'),
             title: 'Sites'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}`,
+            href: getProjectRoute(`/sites/site-${page.params.site}`),
             title: page.params.site
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+layout.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+layout.svelte
index 84d14d4cc..8fe5c1fa3 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+layout.svelte
@@ -5,11 +5,10 @@
     import { Dependencies } from '$lib/constants';
     import { invalidate, goto } from '$app/navigation';
     import { registerCommands } from '$lib/commandCenter';
-    import { project } from '../../../store';
     import type { Models } from '@appwrite.io/console';
-    import { base } from '$app/paths';
     import { canWriteSites } from '$lib/stores/roles';
     import { IconList, IconPlus, IconSearch } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     onMount(() => {
         let previousStatus: string = null;
@@ -41,9 +40,7 @@
             label: 'Create deployment',
             async callback() {
                 if (!page.url.pathname.endsWith(page.params.site)) {
-                    await goto(
-                        `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}`
-                    );
+                    await goto(getProjectRoute(`/sites/site-${page.params.site}`));
                 }
             },
             keys: page.url.pathname.endsWith(page.params.site) ? ['c'] : ['c', 'd'],
@@ -54,9 +51,7 @@
         {
             label: 'Permissions',
             async callback() {
-                await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/settings#permissions`
-                );
+                await goto(getProjectRoute(`/sites/site-${page.params.site}/settings#permissions`));
                 scrollBy({ top: -100 });
             },
             icon: IconSearch,
@@ -67,9 +62,7 @@
         {
             label: 'Variables',
             async callback() {
-                await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/settings#variables`
-                );
+                await goto(getProjectRoute(`/sites/site-${page.params.site}/settings#variables`));
             },
             icon: IconList,
             group: 'sites',
@@ -78,9 +71,7 @@
         {
             label: 'Go to deployments',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/deployments`
-                );
+                goto(getProjectRoute(`/sites/site-${page.params.site}/deployments`));
             },
             keys: ['g', 'd'],
             group: 'navigation',
@@ -90,9 +81,7 @@
         {
             label: 'Go to usage',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/usage`
-                );
+                goto(getProjectRoute(`/sites/site-${page.params.site}/usage`));
             },
             keys: ['g', 'u'],
             group: 'navigation',
@@ -102,9 +91,7 @@
         {
             label: 'Go to logs',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/logs`
-                );
+                goto(getProjectRoute(`/sites/site-${page.params.site}/logs`));
             },
             keys: ['g', 'e'],
             group: 'navigation',
@@ -114,9 +101,7 @@
         {
             label: 'Go to settings',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/sites/site-${page.params.site}/settings`
-                );
+                goto(getProjectRoute(`/sites/site-${page.params.site}/settings`));
             },
             keys: ['g', 's'],
             group: 'navigation',
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
index 2d92f64d9..216cac339 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
@@ -9,6 +8,7 @@
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     export let selectedDeployment: Models.Deployment = null;
@@ -23,9 +23,7 @@
                 .sites.deleteDeployment(selectedDeployment.resourceId, selectedDeployment.$id);
             await invalidate(Dependencies.SITE);
             if (page.url.href.includes(`deployment-${selectedDeployment.$id}`)) {
-                await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments`
-                );
+                await goto(getProjectRoute(`/sites/site-${page.params.site}/deployments`));
             }
             showDelete = false;
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/breadcrumbs.svelte
index 801ab7f80..b198add4f 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/breadcrumbs.svelte
@@ -4,6 +4,7 @@
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -11,23 +12,25 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/sites`,
+            href: getProjectRoute('/sites'),
             title: 'Sites'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}`,
+            href: getProjectRoute(`/sites/site-${page.params.site}`),
             title: page.params.site
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments`,
+            href: getProjectRoute(`/sites/site-${page.params.site}/deployments`),
             title: 'Deployments'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments/deployment-${page.params.deployment}`,
+            href: getProjectRoute(
+                `/sites/site-${page.params.site}/deployments/deployment-${page.params.deployment}`
+            ),
             title: page.params.deployment
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/header.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/header.svelte
index 3210838fa..262faf519 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/header.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { deployment } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments`}>
+        <CoverTitle href={getProjectRoute(`/sites/site-${page.params.site}/deployments`)}>
             Deployment
         </CoverTitle>
         <Id value={$deployment.$id}>{$deployment.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/table.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/table.svelte
index fc380e684..73cfffa02 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/table.svelte
@@ -10,7 +10,6 @@
     import Delete from './deleteDeploymentModal.svelte';
     import RedeployModal from '../../redeployModal.svelte';
     import Cancel from './cancelDeploymentModal.svelte';
-    import { base } from '$app/paths';
     import { Badge, FloatingActionBar, Layout, Status, Table } from '@appwrite.io/pink-svelte';
     import { columns } from './store';
     import ActivateDeploymentModal from '../../activateDeploymentModal.svelte';
@@ -24,6 +23,7 @@
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { site } from '$routes/(console)/project-[region]-[project]/sites/site-[site]/store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 
@@ -81,7 +81,9 @@
         <Table.Row.Link
             {root}
             id={deployment.$id}
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments/deployment-${deployment.$id}`}>
+            href={getProjectRoute(
+                `/sites/site-${page.params.site}/deployments/deployment-${deployment.$id}`
+            )}>
             {#each $columns as column}
                 <Table.Cell column={column.id} {root}>
                     {#if column.id === '$id'}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deploymentsOverview.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deploymentsOverview.svelte
index 96a5091eb..05c1a89a0 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deploymentsOverview.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deploymentsOverview.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Badge, Empty, Layout, Status, Table, Typography } from '@appwrite.io/pink-svelte';
     import Button from '$lib/elements/forms/button.svelte';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { type Models } from '@appwrite.io/console';
     import { DeploymentSource, DeploymentCreatedBy } from '$lib/components/git';
@@ -14,6 +13,7 @@
     import DeleteDeploymentModal from './deployments/deleteDeploymentModal.svelte';
     import DeploymentActionMenu from '../(components)/deploymentActionMenu.svelte';
     import { deploymentStatusConverter } from '$lib/stores/git';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let site: Models.Site;
     export let activeDeployment: Models.Deployment;
@@ -36,9 +36,7 @@
                 content={deploymentList?.total.toString()}
                 size="s" />
         </Layout.Stack>
-        <Button
-            secondary
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments`}>
+        <Button secondary href={getProjectRoute(`/sites/site-${page.params.site}/deployments`)}>
             View all
         </Button>
     </Layout.Stack>
@@ -66,7 +64,9 @@
             {#each deploymentList?.deployments as deployment (deployment.$id)}
                 <Table.Row.Link
                     {root}
-                    href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/deployments/deployment-${deployment.$id}`}>
+                    href={getProjectRoute(
+                        `/sites/site-${page.params.site}/deployments/deployment-${deployment.$id}`
+                    )}>
                     <Table.Cell {root}>
                         <Id value={deployment.$id}>{deployment.$id}</Id>
                     </Table.Cell>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte
index 8e4d4c3e7..09ed65890 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte
@@ -10,6 +10,7 @@
     import { app } from '$lib/stores/app';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import Table from './table.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 </script>
@@ -18,7 +19,7 @@
     <Layout.Stack direction="row" justifyContent="space-between">
         <SearchQuery placeholder="Search domain" />
         <Button
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains/add-domain`}
+            href={getProjectRoute(`/sites/site-${page.params.site}/domains/add-domain`)}
             on:click={() => {
                 trackEvent(Click.DomainCreateClick, {
                     source: 'sites_domain_overview'
@@ -64,7 +65,7 @@
 
                     <Button
                         secondary
-                        href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains/add-domain`}
+                        href={getProjectRoute(`/sites/site-${page.params.site}/domains/add-domain`)}
                         size="s">
                         Add domain
                     </Button>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
index 5fe1dde87..098310597 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Button, Form, InputDomain, InputSelect, InputURL } from '$lib/elements/forms';
     import { Wizard } from '$lib/layout';
@@ -26,8 +25,9 @@
     import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { isCloud } from '$lib/system';
     import { getApexDomain } from '$lib/helpers/tlds';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const routeBase = `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains`;
+    const routeBase = getProjectRoute(`/sites/site-${page.params.site}/domains`);
 
     let { data } = $props();
 
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte
index 9e30d8a05..51205fd5e 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/verify-[domain]/+page.svelte
@@ -18,12 +18,12 @@
     import { isCloud } from '$lib/system';
     import { page } from '$app/state';
     import Wizard from '$lib/layout/wizard.svelte';
-    import { base } from '$app/paths';
     import { writable } from 'svelte/store';
     import { isASubdomain } from '$lib/helpers/tlds';
     import { consoleVariables } from '$routes/(console)/store';
     import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
     import RecordTable from '$lib/components/domains/recordTable.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let { data } = $props();
 
@@ -44,7 +44,7 @@
 
     let verified = $state(false);
 
-    let routeBase = `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains`;
+    let routeBase = getProjectRoute(`/sites/site-${page.params.site}/domains`);
     let isSubmitting = $state(writable(false));
 
     async function verify() {
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domainsOverview.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domainsOverview.svelte
index 7cca03506..7d8669dc3 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domainsOverview.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domainsOverview.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Badge, Divider, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
     import OpenOnMobileModal from '../(components)/openOnMobileModal.svelte';
@@ -12,6 +11,7 @@
     import { Card, Trim } from '$lib/components';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import { RuleTrigger } from '$lib/stores/sdk';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let proxyRuleList: Models.ProxyRuleList;
 
@@ -29,9 +29,7 @@
             </Typography.Text>
             <Badge variant="secondary" content={(rules?.length ?? 0).toString()} size="s" />
         </Layout.Stack>
-        <Button
-            secondary
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains`}>
+        <Button secondary href={getProjectRoute(`/sites/site-${page.params.site}/domains`)}>
             View all
         </Button>
     </Layout.Stack>
@@ -57,7 +55,9 @@
                                     source: 'sites_domain_overview'
                                 });
                             }}
-                            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains/add-domain`}>
+                            href={getProjectRoute(
+                                `/sites/site-${page.params.site}/domains/add-domain`
+                            )}>
                             Add domain
                         </Button>
                     </div>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/header.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/header.svelte
index 44a68d3d5..862013d3f 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/header.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { site } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    $: path = `${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}`;
+    $: path = getProjectRoute(`/sites/site-${page.params.site}`);
     $: tabs = [
         {
             href: path,
@@ -43,8 +43,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${page.params.project}/sites`}
-            >{$site.name}</CoverTitle>
+        <CoverTitle href={getProjectRoute('/sites')}>{$site.name}</CoverTitle>
         <Id value={$site?.$id} event="team">{$site?.$id}</Id>
     </svelte:fragment>
 
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/deleteModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/deleteModal.svelte
index a702286fd..b5bcd6965 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/deleteModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/deleteModal.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { type Models } from '@appwrite.io/console';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let site: Models.Site;
     export let showDelete = false;
@@ -20,7 +20,7 @@
                 type: 'success',
                 message: `Site has been deleted`
             });
-            await goto(`${base}/project-${page.params.region}-${page.params.project}/sites`);
+            await goto(getProjectRoute('/sites'));
             trackEvent(Submit.SiteDelete);
         } catch (e) {
             error = e.message;
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte
index c2b841035..ac79bb90f 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Container, Usage } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
-    $: total = data.deploymentsTotal;
     $: count = data.deployments;
+    $: total = data.deploymentsTotal;
 
     // $: totalBuilds = data.buildsTotal;
     // $: countBuilds = data.builds;
@@ -13,7 +13,7 @@
 
 <Container>
     <Usage
-        path={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/usage`}
+        path={getProjectRoute(`/sites/site-${page.params.site}/usage`)}
         countMetadata={{
             legend: 'Deployments',
             title: 'Total deployments'
@@ -23,7 +23,7 @@
 
     <!-- <Usage
     title="Builds"
-    path={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/usage`}
+    path={getProjectRoute(`/sites/site-${page.params.site}/usage`)}
     countMetadata={{
         legend: 'Builds',
         title: 'Total builds'
diff --git a/src/routes/(console)/project-[region]-[project]/sites/sitesActionMenu.svelte b/src/routes/(console)/project-[region]-[project]/sites/sitesActionMenu.svelte
index a4697694b..d7b57d278 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/sitesActionMenu.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/sitesActionMenu.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import {
@@ -11,6 +9,7 @@
     } from '@appwrite.io/pink-icons-svelte';
 
     import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let site: Models.Site;
     export let showAddCollaborator = false;
@@ -40,12 +39,12 @@
                 Add collaborator
             </ActionMenu.Item.Button>
             <ActionMenu.Item.Anchor
-                href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}/domains`}
+                href={getProjectRoute(`/sites/site-${site.$id}/domains`)}
                 leadingIcon={IconGlobeAlt}>
                 Domains
             </ActionMenu.Item.Anchor>
             <ActionMenu.Item.Anchor
-                href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}/settings`}
+                href={getProjectRoute(`/sites/site-${site.$id}/settings`)}
                 leadingIcon={IconCog}>
                 Settings
             </ActionMenu.Item.Anchor>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/table.svelte b/src/routes/(console)/project-[region]-[project]/sites/table.svelte
index 680c82d38..57392cf4a 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/table.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
     import { Avatar, Icon, Layout, Popover, Table, Typography } from '@appwrite.io/pink-svelte';
     import { columns } from './store';
@@ -14,6 +12,7 @@
     import { timer } from '$lib/helpers/timeConversion';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
     import { getFrameworkIcon } from '$lib/stores/sites';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let siteList: Models.SiteList;
 
@@ -31,9 +30,7 @@
         <Table.Header.Cell column="actions" {root} />
     </svelte:fragment>
     {#each siteList.sites as site}
-        <Table.Row.Link
-            {root}
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}`}>
+        <Table.Row.Link {root} href={getProjectRoute(`/sites/site-${site.$id}`)}>
             {#each $columns as column}
                 <Table.Cell column={column.id} {root}>
                     {#if column.id === 'name'}
@@ -69,7 +66,9 @@
                                         Last deployment failed {timeFromNow(
                                             site.latestDeploymentCreatedAt
                                         )}. <Link
-                                            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${site.$id}/deployments/deployment-${site.latestDeploymentId}`}>
+                                            href={getProjectRoute(
+                                                `/sites/site-${site.$id}/deployments/deployment-${site.latestDeploymentId}`
+                                            )}>
                                             View logs
                                         </Link>
                                     </Typography.Text>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte
index 4dec5a14e..ce0864297 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Container, Usage } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
     $: total = data.deploymentsTotal;
@@ -10,7 +9,7 @@
 
 <Container>
     <Usage
-        path={`${base}/project-${page.params.region}-${page.params.project}/sites/usage`}
+        path={getProjectRoute('/sites/usage')}
         countMetadata={{
             legend: 'Sites',
             title: 'Total sites'
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+layout.svelte b/src/routes/(console)/project-[region]-[project]/storage/+layout.svelte
index ef7b3773d..32f66d49d 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+layout.svelte
@@ -1,20 +1,19 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { BucketsPanel } from '$lib/commandCenter/panels';
     import { canWriteBuckets } from '$lib/stores/roles';
-    import { project } from '../store';
     import { showCreateBucket } from './+page.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: $registerCommands([
         {
             label: 'Create bucket',
             callback: () => {
                 if (!page.url.pathname.endsWith('storage')) {
-                    goto(`${base}/project-${$project.region}-${$project.$id}/storage`);
+                    goto(getProjectRoute('/storage'));
                 }
                 $showCreateBucket = true;
             },
@@ -26,7 +25,7 @@
         {
             label: 'Go to usage',
             callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/storage/usage`);
+                goto(getProjectRoute('/storage/usage'));
             },
             keys: ['g', 'u'],
             disabled: page.url.pathname.endsWith('usage') || page.url.pathname.includes('bucket-'),
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
index 9d780c407..3ff6607d5 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -7,8 +7,6 @@
     import { Empty, PaginationWithLimit, SearchQuery } from '$lib/components';
     import Create from './create.svelte';
     import { Container } from '$lib/layout';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
     import { writable } from 'svelte/store';
     import { canWriteBuckets } from '$lib/stores/roles';
@@ -19,16 +17,13 @@
     import Table from './table.svelte';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
-    const project = page.params.project;
-
     async function bucketCreated(event: CustomEvent<Models.Bucket>) {
         showCreateBucket.set(false);
-        await goto(
-            `${base}/project-${page.params.region}-${project}/storage/bucket-${event.detail.$id}`
-        );
+        await goto(getProjectRoute(`/storage/bucket-${event.detail.$id}`));
     }
 </script>
 
diff --git a/src/routes/(console)/project-[region]-[project]/storage/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/storage/breadcrumbs.svelte
index 8f5fca263..463a5bd1a 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/breadcrumbs.svelte
@@ -3,6 +3,7 @@
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -10,11 +11,11 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}`,
+            href: getProjectRoute(),
             title: $project.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}/storage`,
+            href: getProjectRoute('/storage'),
             title: 'Storage'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+layout.svelte
index 5988aa94c..986664b3a 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+layout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import {
         registerCommands,
@@ -9,18 +8,16 @@
     } from '$lib/commandCenter';
     import { fileSearcher } from '$lib/commandCenter/searchers';
     import { canWriteBuckets } from '$lib/stores/roles';
-    import { project } from '../../store';
     import { bucket } from './store';
     import { IconKey, IconLockClosed, IconPlus, IconPuzzle } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: $registerCommands([
         {
             label: 'Create file',
             async callback() {
                 if (!page.url.pathname.endsWith($bucket.$id)) {
-                    goto(
-                        `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/create`
-                    );
+                    goto(getProjectRoute(`/storage/bucket-${$bucket.$id}/create`));
                 }
             },
             keys: page.url.pathname.endsWith($bucket.$id) ? ['c'] : ['c', 'f'],
@@ -30,9 +27,7 @@
         {
             label: 'Permissions',
             async callback() {
-                await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/settings#permissions`
-                );
+                await goto(getProjectRoute(`/storage/bucket-${$bucket.$id}/settings#permissions`));
                 scrollBy({ top: -100 });
             },
             group: 'buckets',
@@ -42,9 +37,7 @@
         {
             label: 'Extensions',
             async callback() {
-                await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/settings#extensions`
-                );
+                await goto(getProjectRoute(`/storage/bucket-${$bucket.$id}/settings#extensions`));
             },
             group: 'buckets',
             icon: IconPuzzle,
@@ -54,7 +47,7 @@
             label: 'File security',
             async callback() {
                 await goto(
-                    `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/settings#file-security`
+                    getProjectRoute(`/storage/bucket-${$bucket.$id}/settings#file-security`)
                 );
                 scrollBy({ top: -100 });
             },
@@ -65,9 +58,7 @@
         {
             label: 'Go to files',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}`
-                );
+                goto(getProjectRoute(`/storage/bucket-${$bucket.$id}`));
             },
             disabled: page.url.pathname.endsWith($bucket.$id),
             keys: ['g', 'f'],
@@ -77,9 +68,7 @@
         {
             label: 'Go to usage',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/usage`
-                );
+                goto(getProjectRoute(`/storage/bucket-${$bucket.$id}/usage`));
             },
             disabled: page.url.pathname.endsWith('usage'),
             keys: ['g', 'u'],
@@ -89,9 +78,7 @@
         {
             label: 'Go to settings',
             callback() {
-                goto(
-                    `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/settings`
-                );
+                goto(getProjectRoute(`/storage/bucket-${$bucket.$id}/settings`));
             },
             disabled: page.url.pathname.endsWith('settings') || !$canWriteBuckets,
             keys: ['g', 's'],
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
index 859cf529c..cb1409589 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Avatar, Empty, EmptySearch, PaginationWithLimit, SearchQuery } from '$lib/components';
@@ -23,6 +22,7 @@
         IconPlus,
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -95,7 +95,7 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <Button
-                href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/create`}
+                href={getProjectRoute(`/storage/bucket-${page.params.bucket}/create`)}
                 event="create_file"
                 size="s">
                 <Icon icon={IconPlus} slot="start" size="s" />
@@ -152,7 +152,7 @@
                         </Table.Cell>
                     </Table.Row.Base>
                 {:else}
-                    {@const href = `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${bucketId}/file-${file.$id}`}
+                    {@const href = getProjectRoute(`/storage/bucket-${bucketId}/file-${file.$id}`)}
                     <Table.Row.Link {href} {root}>
                         <Table.Cell column="filename" {root}>
                             <div class="u-flex u-gap-12 u-cross-center">
@@ -210,9 +210,7 @@
                     text>
                     Documentation
                 </Button>
-                <Button
-                    secondary
-                    href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}`}>
+                <Button secondary href={getProjectRoute(`/storage/bucket-${page.params.bucket}`)}>
                     Clear Search
                 </Button>
             </div>
@@ -223,9 +221,7 @@
             target="file"
             href="https://appwrite.io/docs/products/storage/upload-download"
             on:click={() =>
-                goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/create`
-                )} />
+                goto(getProjectRoute(`/storage/bucket-${page.params.bucket}/create`))} />
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
index 0e159506c..7b0aea90d 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
     import { bucket } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
@@ -12,15 +12,15 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            href: getProjectRoute(),
             title: $project.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/storage`,
+            href: getProjectRoute('/storage'),
             title: 'Storage'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${$bucket?.$id}`,
+            href: getProjectRoute(`/storage/bucket-${$bucket?.$id}`),
             title: $bucket?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create/+page.svelte
index 0e4b0a97f..540f4dd03 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Wizard } from '$lib/layout';
     import {
@@ -28,6 +27,7 @@
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { InvalidFileType, removeFile } from '$lib/helpers/files';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 
@@ -53,9 +53,7 @@
                 files[0],
                 permissions
             );
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}`
-            );
+            await goto(getProjectRoute(`/storage/bucket-${page.params.bucket}`));
             addNotification({
                 type: 'success',
                 message: `File upload in progress`
@@ -93,7 +91,7 @@
 
 <Wizard
     title="Create file"
-    href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/`}
+    href={getProjectRoute(`/storage/bucket-${page.params.bucket}/`)}
     bind:showExitModal
     column
     confirmExit>
@@ -110,7 +108,9 @@
                                 size.value
                             )}{size.unit}. You can adjust it in your
                             <a
-                                href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/settings`}
+                                href={getProjectRoute(
+                                    `/storage/bucket-${page.params.bucket}/settings`
+                                )}
                                 style:text-decoration="underline">bucket settings</a
                             >.
                         </Alert.Inline>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteBucket.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteBucket.svelte
index b7053609b..b24f6ce60 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteBucket.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteBucket.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
@@ -8,6 +7,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { Typography } from '@appwrite.io/pink-svelte';
     import { bucket } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     let error: string;
@@ -21,7 +21,7 @@
                 type: 'success',
                 message: `${$bucket.name} has been deleted`
             });
-            await goto(`${base}/project-${page.params.region}-${page.params.project}/storage`);
+            await goto(getProjectRoute('/storage'));
             trackEvent(Submit.BucketDelete);
         } catch (e) {
             error = e.message;
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
index e002ee332..a16777db9 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
@@ -1,24 +1,23 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import { Breadcrumbs } from '$lib/layout';
-    import { bucket } from '../store';
     import { file } from './store';
+    import { bucket } from '../store';
+    import { Breadcrumbs } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     $: breadcrumbs = [
         {
             title: '...'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/storage`,
+            href: getProjectRoute('/storage'),
             title: 'Storage'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${$bucket?.$id}`,
+            href: getProjectRoute(`/storage/bucket-${$bucket?.$id}`),
             title: $bucket?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${$bucket?.$id}/file-${$file?.$id}`,
+            href: getProjectRoute(`/storage/bucket-${$bucket?.$id}/file-${$file?.$id}`),
             title: $file?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
index f560b76d3..5ff4f5fb8 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import Confirm from '$lib/components/confirm.svelte';
@@ -8,6 +7,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { Typography } from '@appwrite.io/pink-svelte';
     import { file } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let showDelete = false;
     let error: string;
@@ -24,9 +24,7 @@
                 message: `${fileName} has been deleted`
             });
             trackEvent(Submit.FileDelete);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${$file.bucketId}`
-            );
+            await goto(getProjectRoute(`/storage/bucket-${$file.bucketId}`));
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/header.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
index 27c261285..325f4d305 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
-    import { base } from '$app/paths';
+    import { file } from './store';
     import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
-    import { file } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const projectId = page.params.project;
     const bucketId = page.params.bucket;
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle
-            href={`${base}/project-${page.params.region}-${projectId}/storage/bucket-${bucketId}`}>
+        <CoverTitle href={getProjectRoute(`/storage/bucket-${bucketId}`)}>
             {$file?.name}
         </CoverTitle>
         <Id value={$file?.$id} event="file">{$file?.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/header.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/header.svelte
index 5bdf52183..1490c767a 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/header.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteBuckets } from '$lib/stores/roles';
     import { bucket } from './store';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const projectId = page.params.project;
-    const bucketId = page.params.bucket;
-    const path = `${base}/project-${page.params.region}-${projectId}/storage/bucket-${bucketId}`;
+    const path = getProjectRoute(`/storage/bucket-${page.params.bucket}`);
     const tabs = [
         {
             href: path,
@@ -34,7 +32,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/storage`}>
+        <CoverTitle href={getProjectRoute('/storage')}>
             {$bucket?.name}
         </CoverTitle>
         {#if $bucket?.$id}
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
index 3c39c5f9e..d3ef4c9bf 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Container, Usage } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
     $: filesTotal = data.filesTotal;
@@ -12,7 +12,7 @@
 
 <Container>
     <Usage
-        path={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/usage`}
+        path={getProjectRoute(`/storage/bucket-${page.params.bucket}/usage`)}
         total={filesTotal}
         count={files}
         countMetadata={{
@@ -21,7 +21,7 @@
         }} />
 
     <Usage
-        path={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/usage`}
+        path={getProjectRoute(`/storage/bucket-${page.params.bucket}/usage`)}
         total={transformationsTotal}
         count={transformations}
         countMetadata={{
diff --git a/src/routes/(console)/project-[region]-[project]/storage/grid.svelte b/src/routes/(console)/project-[region]-[project]/storage/grid.svelte
index dbdc549a3..9039a79a4 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/grid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/grid.svelte
@@ -1,16 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { CardContainer, GridItem1, Id } from '$lib/components';
     import { canWriteBuckets } from '$lib/stores/roles';
     import { Badge, Tooltip } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
     export let showCreate = false;
-
-    const region = page.params.region;
-    const project = page.params.project;
 </script>
 
 <CardContainer
@@ -21,7 +17,7 @@
     service="buckets"
     on:click={() => (showCreate = true)}>
     {#each data.buckets.buckets as bucket}
-        <GridItem1 href={`${base}/project-${region}-${project}/storage/bucket-${bucket.$id}`}>
+        <GridItem1 href={getProjectRoute(`/storage/bucket-${bucket.$id}`)}>
             <svelte:fragment slot="title">{bucket.name}</svelte:fragment>
             <svelte:fragment slot="status">
                 {#if !bucket.enabled}
diff --git a/src/routes/(console)/project-[region]-[project]/storage/header.svelte b/src/routes/(console)/project-[region]-[project]/storage/header.svelte
index 24aa16ec3..995dc047c 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/header.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
-    const path = `${base}/project-${page.params.region}-${page.params.project}/storage`;
+    const path = getProjectRoute('/storage');
     const tabs = [
         {
             href: path,
diff --git a/src/routes/(console)/project-[region]-[project]/storage/table.svelte b/src/routes/(console)/project-[region]-[project]/storage/table.svelte
index accff4d00..36cccd64c 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/table.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import type { PageData } from './$types';
     import { columns } from './store';
     import { Table } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data: PageData;
 </script>
@@ -17,9 +16,7 @@
         {/each}
     </svelte:fragment>
     {#each data.buckets.buckets as bucket (bucket.$id)}
-        <Table.Row.Link
-            {root}
-            href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${bucket.$id}`}>
+        <Table.Row.Link {root} href={getProjectRoute(`/storage/bucket-${bucket.$id}`)}>
             {#each $columns as column}
                 <Table.Cell column={column.id} {root}>
                     {#if column.id === '$id'}
diff --git a/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte
index 659277fbd..0541d45a7 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import { Container, Usage } from '$lib/layout';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
     $: total = data.bucketsTotal;
@@ -10,7 +9,7 @@
 
 <Container>
     <Usage
-        path={`${base}/project-${page.params.region}-${page.params.project}/storage/usage`}
+        path={getProjectRoute('/storage/usage')}
         {total}
         {count}
         countMetadata={{
diff --git a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
index edbf38d87..b82a77077 100644
--- a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
+++ b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
@@ -12,7 +12,6 @@
     import PromoteVariableModal from './promoteVariableModal.svelte';
     import CreateVariable from './createVariableModal.svelte';
     import RawVariableEditor from './rawVariableEditor.svelte';
-    import { base } from '$app/paths';
     import {
         ActionMenu,
         Badge,
@@ -38,6 +37,7 @@
     import { page } from '$app/state';
     import UpdateVariablesModal from './updateVariablesModal.svelte';
     import SecretVariableModal from './secretVariableModal.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let variableList: Models.VariableList;
     export let globalVariableList: Models.VariableList | undefined = undefined;
@@ -208,11 +208,8 @@
                 message: `Variable has been ${isConflicting ? 'overwritten' : 'promoted'}. You can find it in the project settings.`,
                 buttons: [
                     {
-                        method: () =>
-                            goto(
-                                `${base}/project-${page.params.region}-${page.params.project}/settings`
-                            ),
-                        name: 'Go to settings'
+                        name: 'Go to settings',
+                        method: () => goto(getProjectRoute('/settings'))
                     }
                 ]
             });
@@ -251,8 +248,7 @@
         within your project.
     {:else}
         Set the environment variables or secret keys that will be passed to your {product}. Global
-        variables can be found in <Link
-            href={`${base}/project-${$project.region}-${$project.$id}/settings#variables`}>
+        variables can be found in <Link href={getProjectRoute('/settings#variables')}>
             project settings</Link
         >.
     {/if}
@@ -302,7 +298,7 @@
                             {/if}
                             a naming conflict with a global variable. View global variables in
                             <a
-                                href={`${base}/project-${$project.region}-${$project.$id}/settings`}
+                                href={getProjectRoute('/settings')}
                                 title="Project settings"
                                 class="link">
                                 project settings</a
diff --git a/src/routes/(console)/project-[region]-[project]/updateVariablesModal.svelte b/src/routes/(console)/project-[region]-[project]/updateVariablesModal.svelte
index 58e6026c0..df24fea0f 100644
--- a/src/routes/(console)/project-[region]-[project]/updateVariablesModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/updateVariablesModal.svelte
@@ -4,10 +4,9 @@
     import { InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import type { Models } from '@appwrite.io/console';
-    import { project } from './store';
-    import { base } from '$app/paths';
     import { Alert, Layout, Selector } from '@appwrite.io/pink-svelte';
     import { Link } from '$lib/elements';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let isGlobal: boolean;
     export let product: 'function' | 'site' = 'function';
@@ -54,7 +53,7 @@
         {#if !isGlobal}
             <Alert.Inline>
                 When there is a naming conflict with a global variable in your <Link
-                    href={`${base}/project-${$project.region}-${$project.$id}/settings/variables`}>
+                    href={getProjectRoute('/settings/variables')}>
                     project settings</Link>
                 and a {product} environment variable, the global variable will be ignored.
             </Alert.Inline>
diff --git a/src/routes/(public)/template-[template]/+page.svelte b/src/routes/(public)/template-[template]/+page.svelte
index 33d4d6ed6..5bb9cf723 100644
--- a/src/routes/(public)/template-[template]/+page.svelte
+++ b/src/routes/(public)/template-[template]/+page.svelte
@@ -23,6 +23,7 @@
         Typography
     } from '@appwrite.io/pink-svelte';
     import { filterRegions } from '$lib/helpers/regions';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let { data } = $props();
 
@@ -63,9 +64,15 @@
 
     function generateUrl(project: Models.Project) {
         if (isSiteTemplate(data.template, data.product)) {
-            return `${base}/project-${project.region}-${project.$id}/sites/create-site/templates/template-${data.template.key}`;
+            return getProjectRoute(
+                project,
+                `/sites/create-site/templates/template-${data.template.key}`
+            );
         } else {
-            return `${base}/project-${project.region}-${project.$id}/functions/create-function/templates/template-${data.template.name}`;
+            return getProjectRoute(
+                project,
+                `/functions/create-function/templates/template-${data.template.name}`
+            );
         }
     }