diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
index 3e1105e23b6..49e793ec9eb 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
@@ -1,4 +1,4 @@
-import Router from 'next/router'
+import { BASE_PATH } from 'lib/constants'
 import { FC, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Button, Input, InputNumber, Toggle, Listbox, IconEye, IconEyeOff } from 'ui'
@@ -125,7 +125,7 @@ const FormField: FC<Props> = ({ name, properties, formValues, disabled = false }
                 label={option.label}
                 value={option.value}
                 addOnBefore={() => (
-                  <img className="h-6 w-6" src={`${Router.basePath}/img/icons/${option.icon}`} />
+                  <img className="h-6 w-6" src={`${BASE_PATH}/img/icons/${option.icon}`} />
                 )}
               >
                 {option.label}
diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index c845340e38c..f2909a7f4de 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -1,11 +1,11 @@
 import { FC, useState } from 'react'
-import Router from 'next/router'
 import ReactMarkdown from 'react-markdown'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Alert, Button, Collapsible, Form, IconCheck, IconChevronUp, Input } from 'ui'
 
 import { useStore, checkPermissions } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 import { Provider } from './AuthProvidersForm.types'
 import { ProviderCollapsibleClasses } from './AuthProvidersForm.constants'
 import FormField from './FormField'
@@ -79,7 +79,7 @@ const ProviderForm: FC<Props> = ({ provider }) => {
               width={14}
             />
             <img
-              src={`${Router.basePath}/img/icons/${provider.misc.iconKey}.svg`}
+              src={`${BASE_PATH}/img/icons/${provider.misc.iconKey}.svg`}
               width={18}
               alt={`${provider.title} auth icon`}
             />
diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
index 27a0d43b710..f45b945ca9d 100644
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
+++ b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
@@ -5,7 +5,7 @@ import { Listbox, IconLoader, Button, IconPlus, IconAlertCircle, IconCreditCard
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore } from 'hooks'
-import { PRICING_TIER_PRODUCT_IDS, STRIPE_PRODUCT_IDS } from 'lib/constants'
+import { BASE_PATH, PRICING_TIER_PRODUCT_IDS, STRIPE_PRODUCT_IDS } from 'lib/constants'
 import { SubscriptionPreview } from '../Billing.types'
 import { getProductPrice, validateSubscriptionUpdatePayload } from '../Billing.utils'
 import PaymentTotal from './PaymentTotal'
@@ -401,7 +401,7 @@ const PaymentSummaryPanel: FC<Props> = ({
                     addOnBefore={() => {
                       return (
                         <img
-                          src={`${Router.basePath}/img/payment-methods/${method.card.brand
+                          src={`${BASE_PATH}/img/payment-methods/${method.card.brand
                             .replace(' ', '-')
                             .toLowerCase()}.png`}
                           width="32"
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx
index a8df48d6ae7..a576e35ff3b 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx
@@ -1,8 +1,8 @@
 import Image from 'next/image'
-import Router from 'next/router'
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
 import { Radio, Badge } from 'ui'
+import { BASE_PATH } from 'lib/constants'
 import { CreateHookContext } from '../'
 
 interface Props {
@@ -28,7 +28,7 @@ const RadioHookService: FC<Props> = observer(
             <div className="flex items-center space-x-5">
               {/* <div className="h-3 w-3"> */}
               <Image
-                src={`${Router.basePath}/img/function-providers/${img_url}`}
+                src={`${BASE_PATH}/img/function-providers/${img_url}`}
                 layout="fixed"
                 width="32"
                 height="32"
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx
index 3235d570368..3e46504f3f9 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import Router from 'next/router'
 import SVG from 'react-inlinesvg'
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
@@ -7,6 +6,7 @@ import { Input, Listbox } from 'ui'
 
 import { CreateHookContext } from './'
 import { useStore } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 
 const TableSelection: FC = observer(({}) => {
   const { ui } = useStore()
@@ -74,7 +74,7 @@ const TableSelection: FC = observer(({}) => {
             addOnBefore={() => (
               <div className="flex items-center justify-center rounded bg-scale-1200 p-1 text-scale-100 ">
                 <SVG
-                  src={`${Router.basePath}/img/table-editor.svg`}
+                  src={`${BASE_PATH}/img/table-editor.svg`}
                   style={{ width: `16px`, height: `16px`, strokeWidth: '1px' }}
                   preProcessor={(code) =>
                     code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
diff --git a/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx b/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
index 506f899d38a..335f05f6021 100644
--- a/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
+++ b/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
@@ -14,13 +14,14 @@ import {
   Button,
 } from 'ui'
 import { Dictionary } from 'components/grid'
-import Router, { useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 import SVG from 'react-inlinesvg'
 
 import ChooseFunctionForm from './ChooseFunctionForm'
 import FormEmptyBox from 'components/ui/FormBoxEmpty'
 import NoTableState from 'components/ui/States/NoTableState'
 import { useStore } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 
 class CreateTriggerFormState {
   id: number | undefined
@@ -545,7 +546,7 @@ const ListboxTable: FC = observer(({}) => {
             addOnBefore={() => (
               <div className="flex items-center justify-center rounded bg-scale-1200 p-1 text-scale-100 ">
                 <SVG
-                  src={`${Router.basePath}/img/table-editor.svg`}
+                  src={`${BASE_PATH}/img/table-editor.svg`}
                   style={{ width: `16px`, height: `16px`, strokeWidth: '1px' }}
                   preProcessor={(code) =>
                     code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
diff --git a/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts b/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts
index a00161aecda..fe05d8bb3ab 100644
--- a/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts
+++ b/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts
@@ -1,4 +1,4 @@
-import Router from 'next/router'
+import { BASE_PATH } from 'lib/constants'
 import { WrapperMeta } from './Wrappers.types'
 
 export const WRAPPERS: WrapperMeta[] = [
@@ -6,7 +6,7 @@ export const WRAPPERS: WrapperMeta[] = [
     name: 'stripe_wrapper',
     handlerName: 'stripe_fdw_handler',
     validatorName: 'stripe_fdw_validator',
-    icon: `${Router.basePath}/img/icons/stripe-icon.svg`,
+    icon: `${BASE_PATH}/img/icons/stripe-icon.svg`,
     extensionName: 'StripeFdw',
     label: 'Stripe',
     docsUrl: 'https://supabase.com/docs/guides/database/wrappers/stripe',
@@ -410,7 +410,7 @@ export const WRAPPERS: WrapperMeta[] = [
     name: 'firebase_wrapper',
     handlerName: 'firebase_fdw_handler',
     validatorName: 'firebase_fdw_validator',
-    icon: `${Router.basePath}/img/icons/firebase-icon.svg`,
+    icon: `${BASE_PATH}/img/icons/firebase-icon.svg`,
     extensionName: 'FirebaseFdw',
     label: 'Firebase',
     docsUrl: 'https://supabase.com/docs/guides/database/wrappers/firebase',
diff --git a/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx b/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
index c715c7db2e8..d80ab7d57c5 100644
--- a/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
+++ b/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import Router from 'next/router'
 import { useState } from 'react'
 import { Button, IconExternalLink } from 'ui'
 import { observer } from 'mobx-react-lite'
@@ -7,6 +6,7 @@ import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useParams, useStore } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 
 const WrappersDisabledState = () => {
   const { ui, meta } = useStore()
@@ -66,8 +66,8 @@ const WrappersDisabledState = () => {
           backgroundSize: '45%',
           backgroundPosition: '105% 40%',
           backgroundImage: ui.isDarkTheme
-            ? `url("${Router.basePath}/img/wrappers-dark.png")`
-            : `url("${Router.basePath}/img/wrappers-light.png")`,
+            ? `url("${BASE_PATH}/img/wrappers-dark.png")`
+            : `url("${BASE_PATH}/img/wrappers-light.png")`,
         }}
       >
         <div className="w-3/5 space-y-8">
diff --git a/studio/components/interfaces/Home/ClientLibrary.tsx b/studio/components/interfaces/Home/ClientLibrary.tsx
index dbcbd7f53b8..59f1d0b4d5f 100644
--- a/studio/components/interfaces/Home/ClientLibrary.tsx
+++ b/studio/components/interfaces/Home/ClientLibrary.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
-import Router from 'next/router'
 import { IconBookOpen, IconGitHub, Button, Badge } from 'ui'
+import { BASE_PATH } from 'lib/constants'
 
 interface Props {
   language: string
@@ -14,7 +14,7 @@ const ClientLibrary: FC<Props> = ({ language, releaseState, officialSupport, doc
   return (
     <div className="flex items-start space-x-6">
       <img
-        src={`${Router.basePath}/img/libraries/${language.toLowerCase()}-icon.svg`}
+        src={`${BASE_PATH}/img/libraries/${language.toLowerCase()}-icon.svg`}
         alt={`${language} logo`}
         width="21"
       />
diff --git a/studio/components/interfaces/Home/ExampleProject.tsx b/studio/components/interfaces/Home/ExampleProject.tsx
index 990f8d19018..32f76b8bfaf 100644
--- a/studio/components/interfaces/Home/ExampleProject.tsx
+++ b/studio/components/interfaces/Home/ExampleProject.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react'
-import Router from 'next/router'
 import { IconChevronRight } from 'ui'
 import { useStore } from 'hooks'
 import Link from 'next/link'
+import { BASE_PATH } from 'lib/constants'
 
 interface Props {
   framework: string
@@ -30,7 +30,7 @@ const ExampleProject: FC<Props> = ({ framework, title, description, url }) => {
           <div className="mr-4 flex flex-col">
             <img
               className="transition-all group-hover:scale-110"
-              src={`${Router.basePath}/img/libraries/${framework.toLowerCase()}${
+              src={`${BASE_PATH}/img/libraries/${framework.toLowerCase()}${
                 ['expo', 'nextjs'].includes(framework.toLowerCase())
                   ? isDarkTheme
                     ? '-dark'
diff --git a/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx b/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx
index 1705b63f5d5..2e22372256a 100644
--- a/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx
@@ -1,5 +1,4 @@
 import { FC, useState } from 'react'
-import Router from 'next/router'
 import {
   Dropdown,
   IconPlus,
@@ -18,7 +17,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { checkPermissions, useStore } from 'hooks'
 import { delete_, patch } from 'lib/common/fetch'
 import { getURL } from 'lib/helpers'
-import { API_URL } from 'lib/constants'
+import { API_URL, BASE_PATH } from 'lib/constants'
 import Panel from 'components/ui/Panel'
 import { AddNewPaymentMethodModal } from 'components/interfaces/Billing'
 import NoPermission from 'components/ui/NoPermission'
@@ -159,7 +158,7 @@ const PaymentMethods: FC<Props> = ({
                       <div key={paymentMethod.id} className="flex items-center justify-between">
                         <div className="flex items-center space-x-8">
                           <img
-                            src={`${Router.basePath}/img/payment-methods/${paymentMethod.card.brand
+                            src={`${BASE_PATH}/img/payment-methods/${paymentMethod.card.brand
                               .replace(' ', '-')
                               .toLowerCase()}.png`}
                             width="32"
diff --git a/studio/components/interfaces/Settings/Vault/VaultToggle.tsx b/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
index 9e1468369e9..4f7c679b2ba 100644
--- a/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
+++ b/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import Router from 'next/router'
 import { observer } from 'mobx-react-lite'
 import { FC, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
@@ -7,6 +6,7 @@ import { Button, IconExternalLink } from 'ui'
 
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { checkPermissions, useParams, useStore } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 
 interface Props {}
 
@@ -64,8 +64,8 @@ const VaultToggle: FC<Props> = () => {
           backgroundSize: isNotAvailable ? '50%' : '40%',
           backgroundPosition: '100% 24%',
           backgroundImage: ui.isDarkTheme
-            ? `url("${Router.basePath}/img/vault-dark.png")`
-            : `url("${Router.basePath}/img/vault-light.png")`,
+            ? `url("${BASE_PATH}/img/vault-dark.png")`
+            : `url("${BASE_PATH}/img/vault-light.png")`,
         }}
       >
         <div className="w-3/5 space-y-8">
diff --git a/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx b/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx
index d5262f54cff..9ac8f17a505 100644
--- a/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx
+++ b/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx
@@ -1,7 +1,7 @@
-import Router from 'next/router'
 import SVG from 'react-inlinesvg'
 import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
 import { IconBook, IconBookOpen } from 'ui'
+import { BASE_PATH } from 'lib/constants'
 
 export const generateDocsMenu = (
   ref: string,
@@ -72,7 +72,7 @@ export const generateDocsMenu = (
                 url: `/project/${ref}/api/graphiql`,
                 icon: (
                   <SVG
-                    src={`${Router.basePath}/img/graphql.svg`}
+                    src={`${BASE_PATH}/img/graphql.svg`}
                     style={{ width: `${16}px`, height: `${16}px` }}
                     className="text-scale-1200"
                     preProcessor={(code) =>
diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
index 478cb2bb431..15c465e3fa5 100644
--- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
+++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
@@ -9,11 +9,10 @@ import {
   IconUsers,
 } from 'ui'
 import SVG from 'react-inlinesvg'
-import Router from 'next/router'
 
 import { ProjectBase } from 'types'
 import { Route } from 'components/ui/ui.types'
-import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
+import { BASE_PATH, IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
 
 export const generateToolRoutes = (ref?: string, project?: ProjectBase): Route[] => {
   const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
@@ -28,7 +27,7 @@ export const generateToolRoutes = (ref?: string, project?: ProjectBase): Route[]
       label: 'Table Editor',
       icon: (
         <SVG
-          src={`${Router.basePath}/img/table-editor.svg`}
+          src={`${BASE_PATH}/img/table-editor.svg`}
           style={{ width: `${18}px`, height: `${18}px` }}
           preProcessor={(code) => code.replace(/svg/, 'svg class="m-auto text-color-inherit"')}
         />
@@ -42,7 +41,7 @@ export const generateToolRoutes = (ref?: string, project?: ProjectBase): Route[]
       label: 'SQL Editor',
       icon: (
         <SVG
-          src={`${Router.basePath}/img/sql-editor.svg`}
+          src={`${BASE_PATH}/img/sql-editor.svg`}
           style={{ width: `${18}px`, height: `${18}px` }}
           preProcessor={(code) => code.replace(/svg/, 'svg class="m-auto text-color-inherit"')}
         />
diff --git a/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx b/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx
index f77e48c1c7a..7de8e7cfaf3 100644
--- a/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx
+++ b/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx
@@ -1,9 +1,9 @@
-import { useStore } from 'hooks'
 import { observer } from 'mobx-react-lite'
 import Image from 'next/image'
 import Link from 'next/link'
-import Router from 'next/router'
 import { PropsWithChildren } from 'react'
+import { useStore } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 
 type ForgotPasswordLayoutProps = {
   heading: string
@@ -34,8 +34,8 @@ const ForgotPasswordLayout = ({
                   <Image
                     src={
                       theme == 'dark'
-                        ? `${Router.basePath}/img/supabase-dark.svg`
-                        : `${Router.basePath}/img/supabase-light.svg`
+                        ? `${BASE_PATH}/img/supabase-dark.svg`
+                        : `${BASE_PATH}/img/supabase-light.svg`
                     }
                     alt=""
                     height={24}
diff --git a/studio/components/layouts/SignInLayout/SignInLayout.tsx b/studio/components/layouts/SignInLayout/SignInLayout.tsx
index d22de13bcc7..96e0b464c10 100644
--- a/studio/components/layouts/SignInLayout/SignInLayout.tsx
+++ b/studio/components/layouts/SignInLayout/SignInLayout.tsx
@@ -1,13 +1,12 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useStore } from 'hooks'
 import { usePushNext } from 'hooks/misc/useAutoAuthRedirect'
-import { IS_PLATFORM } from 'lib/constants'
+import { BASE_PATH, IS_PLATFORM } from 'lib/constants'
 import { auth, getReturnToPath, STORAGE_KEY } from 'lib/gotrue'
 import { observer } from 'mobx-react-lite'
 import Head from 'next/head'
 import Image from 'next/image'
 import Link from 'next/link'
-import Router from 'next/router'
 import { PropsWithChildren, useEffect, useState } from 'react'
 import { tweets } from 'shared-data'
 import { Button, IconFileText } from 'ui'
@@ -97,8 +96,8 @@ const SignInLayout = ({
                     <Image
                       src={
                         theme == 'dark'
-                          ? `${Router.basePath}/img/supabase-dark.svg`
-                          : `${Router.basePath}/img/supabase-light.svg`
+                          ? `${BASE_PATH}/img/supabase-dark.svg`
+                          : `${BASE_PATH}/img/supabase-light.svg`
                       }
                       alt="Supabase Logo"
                       height={24}
diff --git a/studio/components/layouts/VercelIntegrationLayout.tsx b/studio/components/layouts/VercelIntegrationLayout.tsx
index c79e44a6274..f0b3be4d6dc 100644
--- a/studio/components/layouts/VercelIntegrationLayout.tsx
+++ b/studio/components/layouts/VercelIntegrationLayout.tsx
@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react'
 import Head from 'next/head'
-import Router from 'next/router'
 import Divider from 'components/ui/Divider'
+import { BASE_PATH } from 'lib/constants'
 
 interface Props {
   children: ReactNode
@@ -23,7 +23,7 @@ const VercelIntegrationLayout: FC<Props> = ({ children }) => {
                   <span className="sr-only">Supabase</span>
                   <img
                     className="h-6 w-auto sm:h-6"
-                    src={`${Router.basePath}/img/supabase-logo.svg`}
+                    src={`${BASE_PATH}/img/supabase-logo.svg`}
                     alt=""
                   />
                 </div>
diff --git a/studio/components/layouts/WizardLayout.tsx b/studio/components/layouts/WizardLayout.tsx
index 0c9afd5fa5a..9429f38802a 100644
--- a/studio/components/layouts/WizardLayout.tsx
+++ b/studio/components/layouts/WizardLayout.tsx
@@ -1,9 +1,9 @@
 import { FC } from 'react'
 import Link from 'next/link'
-import Router from 'next/router'
 import { IconChevronRight } from 'ui'
 import { withAuth, useFlag } from 'hooks'
 import { observer } from 'mobx-react-lite'
+import { BASE_PATH } from 'lib/constants'
 
 const WizardLayout: FC<any> = ({ organization, project, children }) => {
   const ongoingIncident = useFlag('ongoingIncident')
@@ -36,7 +36,7 @@ const Header: FC<any> = ({ organization, project }) => {
               <Link href="/projects">
                 <a>
                   <img
-                    src={`${Router.basePath}/img/supabase-logo.svg`}
+                    src={`${BASE_PATH}/img/supabase-logo.svg`}
                     alt="Supabase"
                     className="rounded border p-1 hover:border-white dark:border-dark"
                     style={{ height: 24 }}
diff --git a/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx b/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx
index 36aad6cf3a5..091bba0e6e4 100644
--- a/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx
+++ b/studio/components/to-be-cleaned/Docs/Pages/Introduction.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
-import Router from 'next/router'
-import { useStore } from 'hooks'
 import { AutoApiService } from 'data/config/project-api-query'
+import { useStore } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 import Snippets from '../Snippets'
 import CodeSnippet from '../CodeSnippet'
 
@@ -65,7 +65,7 @@ export default function Introduction({ autoApiService, selectedLang }: Props) {
                   "
                 >
                   <Image
-                    src={`${Router.basePath}/img/icons/reference-${
+                    src={`${BASE_PATH}/img/icons/reference-${
                       isDarkTheme ? lib.icon : `${lib.icon}-light`
                     }.svg`}
                     width={16}
diff --git a/studio/components/to-be-cleaned/NoSearchResults.tsx b/studio/components/to-be-cleaned/NoSearchResults.tsx
index 84f0ddc1dda..ba03cab8823 100644
--- a/studio/components/to-be-cleaned/NoSearchResults.tsx
+++ b/studio/components/to-be-cleaned/NoSearchResults.tsx
@@ -1,11 +1,11 @@
-import Router from 'next/router'
 import SVG from 'react-inlinesvg'
+import { BASE_PATH } from 'lib/constants'
 
 export const NoSearchResults = () => {
   return (
     <div className="flex h-64 flex-col items-center justify-center">
       <SVG
-        src={`${Router.basePath}/img/no-search-results.svg`}
+        src={`${BASE_PATH}/img/no-search-results.svg`}
         preProcessor={(code) =>
           code.replace(/svg/, 'svg className="mb-2 w-16 h-16 text-color-inherit"')
         }
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js
index 6cf5ce73e07..8d5d4ac1150 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js
@@ -1,5 +1,4 @@
 import { useState, useRef, useEffect } from 'react'
-import Router from 'next/router'
 import { get, sum } from 'lodash'
 import { Checkbox, IconUpload } from 'ui'
 import { Transition } from '@headlessui/react'
@@ -15,6 +14,7 @@ import {
   CONTEXT_MENU_KEYS,
 } from '../Storage.constants'
 import { formatBytes } from 'lib/helpers'
+import { BASE_PATH } from 'lib/constants'
 
 const DragOverOverlay = ({ isOpen, onDragLeave, onDrop, folderIsEmpty }) => {
   return (
@@ -223,7 +223,7 @@ const FileExplorerColumn = ({
       {column.items.length === 0 && column.status !== STORAGE_ROW_STATUS.LOADING && (
         <div className="h-full w-full flex flex-col items-center justify-center">
           <img
-            src={`${Router.basePath}/img/storage-placeholder.svg`}
+            src={`${BASE_PATH}/img/storage-placeholder.svg`}
             className="opacity-75 pointer-events-none"
           />
           <p className="my-3 opacity-75">Drop your files here</p>
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx
index 9979a78e99a..2b80cbabb77 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.tsx
@@ -1,5 +1,4 @@
 import { FC, useState, useRef, useEffect } from 'react'
-import Router from 'next/router'
 import { find, has, isEmpty, isEqual } from 'lodash'
 import {
   Checkbox,
@@ -32,6 +31,7 @@ import {
   URL_EXPIRY_DURATION,
 } from '../Storage.constants'
 import { formatBytes } from 'lib/helpers'
+import { BASE_PATH } from 'lib/constants'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
 
 const RowIcon = ({ view, status, fileType, mimeType }: any) => {
@@ -42,10 +42,10 @@ const RowIcon = ({ view, status, fileType, mimeType }: any) => {
   if (fileType === STORAGE_ROW_TYPES.BUCKET || fileType === STORAGE_ROW_TYPES.FOLDER) {
     const iconSrc =
       fileType === STORAGE_ROW_TYPES.BUCKET
-        ? `${Router.basePath}/img/bucket-filled.svg`
+        ? `${BASE_PATH}/img/bucket-filled.svg`
         : fileType === STORAGE_ROW_TYPES.FOLDER
-        ? `${Router.basePath}/img/folder-filled.svg`
-        : `${Router.basePath}/img/file-filled.svg`
+        ? `${BASE_PATH}/img/folder-filled.svg`
+        : `${BASE_PATH}/img/file-filled.svg`
     return (
       <SVG
         src={iconSrc}
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx
index f0ea7c89fe7..a248ebe4ad4 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx
@@ -11,8 +11,8 @@ import {
   IconChevronDown,
 } from 'ui'
 import SVG from 'react-inlinesvg'
-import Router from 'next/router'
 import { formatBytes } from 'lib/helpers'
+import { BASE_PATH } from 'lib/constants'
 import { Transition } from '@headlessui/react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -25,7 +25,7 @@ const PreviewFile = ({ mimeType, previewUrl }: { mimeType: string; previewUrl: s
   if (!mimeType || !previewUrl) {
     return (
       <SVG
-        src={`${Router.basePath}/img/file-filled.svg`}
+        src={`${BASE_PATH}/img/file-filled.svg`}
         preProcessor={(code) =>
           code.replace(/svg/, 'svg class="mx-auto w-32 h-32 text-color-inherit opacity-75"')
         }
@@ -43,7 +43,7 @@ const PreviewFile = ({ mimeType, previewUrl }: { mimeType: string; previewUrl: s
     return (
       <div className="flex h-full w-full flex-col items-center justify-center">
         <SVG
-          src={`${Router.basePath}/img/file-filled.svg`}
+          src={`${BASE_PATH}/img/file-filled.svg`}
           preProcessor={(code) =>
             code.replace(/svg/, 'svg class="mx-auto w-32 h-32 text-color-inherit opacity-75"')
           }
@@ -86,7 +86,7 @@ const PreviewFile = ({ mimeType, previewUrl }: { mimeType: string; previewUrl: s
   }
   return (
     <SVG
-      src={`${Router.basePath}/img/file-filled.svg`}
+      src={`${BASE_PATH}/img/file-filled.svg`}
       preProcessor={(code) =>
         code.replace(/svg/, 'svg class="mx-auto w-32 h-32 text-color-inherit opacity-75"')
       }
diff --git a/studio/lib/constants/index.ts b/studio/lib/constants/index.ts
index dfcbaed0ef6..24743c4904f 100644
--- a/studio/lib/constants/index.ts
+++ b/studio/lib/constants/index.ts
@@ -7,6 +7,7 @@ export const API_ADMIN_URL = IS_PLATFORM ? process.env.NEXT_PUBLIC_API_ADMIN_URL
 export const PG_META_URL = IS_PLATFORM
   ? process.env.PLATFORM_PG_META_URL
   : process.env.STUDIO_PG_META_URL
+export const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
 
 export const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ'
 
diff --git a/studio/pages/404.tsx b/studio/pages/404.tsx
index ea67c7812f9..853a48bda64 100644
--- a/studio/pages/404.tsx
+++ b/studio/pages/404.tsx
@@ -1,11 +1,11 @@
 import { NextPage } from 'next'
 import Image from 'next/image'
-import Router from 'next/router'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { Button } from 'ui'
 
 import { useStore } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 
 const Error404: NextPage = ({}) => {
   const { ui } = useStore()
@@ -29,8 +29,8 @@ const Error404: NextPage = ({}) => {
                 <Image
                   src={
                     theme == 'dark'
-                      ? `${Router.basePath}/img/supabase-dark.svg`
-                      : `${Router.basePath}/img/supabase-light.svg`
+                      ? `${BASE_PATH}/img/supabase-dark.svg`
+                      : `${BASE_PATH}/img/supabase-light.svg`
                   }
                   alt="supabase"
                   height={24}
diff --git a/studio/pages/org/_/[[...routeSlug]].tsx b/studio/pages/org/_/[[...routeSlug]].tsx
index 801691ae60c..1e53059a44d 100644
--- a/studio/pages/org/_/[[...routeSlug]].tsx
+++ b/studio/pages/org/_/[[...routeSlug]].tsx
@@ -1,10 +1,11 @@
 import Link from 'next/link'
-import Router, { useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 import { NextPage } from 'next'
 import { observer } from 'mobx-react-lite'
 import { Button, IconPlus } from 'ui'
 
 import { withAuth, useStore } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 import CardButton from 'components/ui/CardButton'
 import ShimmeringCard from 'components/interfaces/Home/ProjectList/ShimmeringCard'
 
@@ -15,7 +16,7 @@ const Header = () => {
         <Link href="/projects">
           <a>
             <img
-              src={`${Router.basePath}/img/supabase-logo.svg`}
+              src={`${BASE_PATH}/img/supabase-logo.svg`}
               alt="Supabase"
               className="dark:border-dark rounded border p-1 hover:border-white"
               style={{ height: 24 }}
diff --git a/studio/pages/project/_/[[...routeSlug]].tsx b/studio/pages/project/_/[[...routeSlug]].tsx
index 666105d68cc..5dd5959f40a 100644
--- a/studio/pages/project/_/[[...routeSlug]].tsx
+++ b/studio/pages/project/_/[[...routeSlug]].tsx
@@ -1,10 +1,11 @@
 import { FC } from 'react'
 import Link from 'next/link'
 import { NextPage } from 'next'
-import Router, { useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 
 import { withAuth } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 import ProjectList from 'components/interfaces/Home/ProjectList'
 
 interface Props {}
@@ -16,7 +17,7 @@ const Header: FC<Props> = () => {
         <Link href="/projects">
           <a>
             <img
-              src={`${Router.basePath}/img/supabase-logo.svg`}
+              src={`${BASE_PATH}/img/supabase-logo.svg`}
               alt="Supabase"
               className="dark:border-dark rounded border p-1 hover:border-white"
               style={{ height: 24 }}
diff --git a/studio/pages/support/new.tsx b/studio/pages/support/new.tsx
index 9abb20338cb..4e5ff5c2e5a 100644
--- a/studio/pages/support/new.tsx
+++ b/studio/pages/support/new.tsx
@@ -1,12 +1,12 @@
 import SVG from 'react-inlinesvg'
 import Link from 'next/link'
-import Router from 'next/router'
 import { useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { Button, IconLoader } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 
 import { withAuth, useFlag } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 import { usePlatformStatusQuery } from 'data/platform/platform-status-query'
 import Success from 'components/interfaces/Support/Success'
 import SupportForm from 'components/interfaces/Support/SupportForm'
@@ -29,7 +29,7 @@ const SupportPage = () => {
         <div className="space-y-12 py-8">
           <div className="flex justify-between items-center">
             <div className="flex items-center space-x-3">
-              <SVG src={`${Router.basePath}/img/supabase-logo.svg`} className="h-4 w-4" />
+              <SVG src={`${BASE_PATH}/img/supabase-logo.svg`} className="h-4 w-4" />
               <h1 className="m-0 text-lg">Supabase support</h1>
             </div>
             <div className="flex items-center space-x-3">