diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx
index ac0ba0ffa..4224bf658 100644
--- a/apps/web/src/app/(dashboard)/dashboard/page.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx
@@ -87,9 +87,9 @@ const Dashboard = ({ user }) => {
   const [teams, setTeams] = useState<Team[]>([])
   const [currentTeam, setCurrentTeam] = useState<Team | null>(null)
 
-  const apiUrlState = useLocalStorage(
-    'apiUrl',
-    process.env.NEXT_PUBLIC_API_URL || ''
+  const domainState = useLocalStorage(
+    'e2bDomain',
+    process.env.NEXT_PUBLIC_DOMAIN || ''
   )
 
   const initialTab =
@@ -162,7 +162,7 @@ const Dashboard = ({ user }) => {
             teams={teams}
             setTeams={setTeams}
             setCurrentTeam={setCurrentTeam}
-            apiUrlState={apiUrlState}
+            domainState={domainState}
           />
         </div>
       </>
@@ -250,7 +250,7 @@ function MainContent({
   teams,
   setTeams,
   setCurrentTeam,
-  apiUrlState,
+  domainState,
 }: {
   selectedItem: MenuLabel
   user: E2BUser
@@ -258,29 +258,29 @@ function MainContent({
   teams: Team[]
   setTeams: (teams: Team[]) => void
   setCurrentTeam: (team: Team) => void
-  apiUrlState: [string, (value: string) => void]
+  domainState: [string, (value: string) => void]
 }) {
   switch (selectedItem) {
     case 'personal':
-      return <PersonalContent user={user} apiUrl={apiUrlState[0]} />
+      return <PersonalContent user={user} domain={domainState[0]} />
     case 'keys':
       return (
-        <KeysContent currentTeam={team} user={user} apiUrl={apiUrlState[0]} />
+        <KeysContent currentTeam={team} user={user} domain={domainState[0]} />
       )
     case 'sandboxes':
-      return <SandboxesContent team={team} apiUrl={apiUrlState[0]} />
+      return <SandboxesContent team={team} domain={domainState[0]} />
     case 'templates':
       return (
         <TemplatesContent
           user={user}
           teamId={team.id}
-          apiUrl={apiUrlState[0]}
+          domain={domainState[0]}
         />
       )
     case 'usage':
-      return <UsageContent team={team} apiUrl={apiUrlState[0]} />
+      return <UsageContent team={team} domain={domainState[0]} />
     case 'billing':
-      return <BillingContent team={team} apiUrl={apiUrlState[0]} />
+      return <BillingContent team={team} domain={domainState[0]} />
     case 'team':
       return (
         <TeamContent
@@ -289,11 +289,11 @@ function MainContent({
           teams={teams}
           setTeams={setTeams}
           setCurrentTeam={setCurrentTeam}
-          apiUrl={apiUrlState[0]}
+          domain={domainState[0]}
         />
       )
     case 'developer':
-      return <DeveloperContent domainState={apiUrlState} />
+      return <DeveloperContent domainState={domainState} />
     default:
       return <ErrorContent />
   }
diff --git a/apps/web/src/app/(dashboard)/dashboard/utils.ts b/apps/web/src/app/(dashboard)/dashboard/utils.ts
new file mode 100644
index 000000000..0b8e81e95
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/dashboard/utils.ts
@@ -0,0 +1,27 @@
+export function getBaseUrl(domain: string) {
+  let url = domain
+  if (!domain.startsWith('http')) {
+    const local = domain === 'localhost' || domain.startsWith('127.0.0.')
+    url = `http${local ? '' : 's'}://${domain}`
+  }
+
+  const parsedUrl = new URL(url)
+
+  return parsedUrl.toString()
+}
+
+export function getBillingUrl(domain: string) {
+  let url = domain
+  const local = domain === 'localhost' || domain.startsWith('127.0.0.')
+
+  if (!domain.startsWith('http')) {
+    url = `http${local ? '' : 's'}://${domain}`
+  }
+
+  const parsedUrl = new URL(url)
+  if (!local) {
+    parsedUrl.hostname = `billing.${parsedUrl.hostname}`
+  }
+
+  return parsedUrl.toString()
+}
diff --git a/apps/web/src/components/Dashboard/Billing.tsx b/apps/web/src/components/Dashboard/Billing.tsx
index 97e7c3828..8054794fa 100644
--- a/apps/web/src/components/Dashboard/Billing.tsx
+++ b/apps/web/src/components/Dashboard/Billing.tsx
@@ -12,6 +12,7 @@ import {
 } from '../ui/table'
 import SwitchToHobbyButton from '@/components/Pricing/SwitchToHobbyButton'
 import SwitchToProButton from '@/components/Pricing/SwitchToProButton'
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
 function formatCurrency(value: number) {
   return value.toLocaleString('en-US', {
@@ -29,10 +30,10 @@ interface Invoice {
 
 export const BillingContent = ({
   team,
-  apiUrl,
+  domain,
 }: {
   team: Team
-  apiUrl: string
+  domain: string
 }) => {
   const [invoices, setInvoices] = useState<Invoice[]>([])
   const [credits, setCredits] = useState<number | null>(null)
@@ -41,7 +42,7 @@ export const BillingContent = ({
     const getInvoices = async function getInvoices() {
       setInvoices([])
       const res = await fetch(
-        `https://billing.${apiUrl}/teams/${team.id}/invoices`,
+        `https://billing.${domain}/teams/${team.id}/invoices`,
         {
           headers: {
             'X-Team-API-Key': team.apiKeys[0],
@@ -59,7 +60,7 @@ export const BillingContent = ({
 
       setCredits(null)
       const creditsRes = await fetch(
-        `https://billing.${apiUrl}/teams/${team.id}/usage`,
+        `${getBillingUrl(domain)}/teams/${team.id}/usage`,
         {
           headers: {
             'X-Team-API-Key': team.apiKeys[0],
@@ -71,7 +72,7 @@ export const BillingContent = ({
     }
 
     getInvoices()
-  }, [team])
+  }, [domain, team])
 
   return (
     <div className="flex flex-col w-full">
@@ -114,7 +115,7 @@ export const BillingContent = ({
       <div className="flex flex-col items-start justify-center pb-10">
         <div className="flex items-center space-x-4">
           <h2>Pro tier</h2>
-          <SwitchToProButton apiUrl={apiUrl} team={team} />
+          <SwitchToProButton domain={domain} team={team} />
         </div>
         <ul className="flex flex-col list-disc list-inside text-neutral-400">
           <li>One-time $100 credits</li>
diff --git a/apps/web/src/components/Dashboard/Keys.tsx b/apps/web/src/components/Dashboard/Keys.tsx
index e17b36549..b4fa43ce7 100644
--- a/apps/web/src/components/Dashboard/Keys.tsx
+++ b/apps/web/src/components/Dashboard/Keys.tsx
@@ -28,6 +28,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu'
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
 type TeamApiKey = {
   id: string
@@ -46,11 +47,11 @@ type TeamApiKey = {
 export const KeysContent = ({
   currentTeam,
   user,
-  apiUrl,
+  domain,
 }: {
   currentTeam: Team
   user: E2BUser
-  apiUrl: string
+  domain: string
 }) => {
   const { toast } = useToast()
   const [isKeyDialogOpen, setIsKeyDialogOpen] = useState(false)
@@ -60,11 +61,10 @@ export const KeysContent = ({
   const [newApiKeyInput, setNewApiKeyInput] = useState<string>('')
   const [apiKeys, setApiKeys] = useState<TeamApiKey[]>([])
 
-  console.log(apiUrl)
   useEffect(() => {
     async function fetchApiKeys() {
       const res = await fetch(
-        `https://billing.${apiUrl}/teams/${currentTeam.id}/api-keys`,
+        `${getBillingUrl(domain)}/teams/${currentTeam.id}/api-keys`,
         {
           headers: {
             'X-USER-ACCESS-TOKEN': user.accessToken,
@@ -86,7 +86,7 @@ export const KeysContent = ({
     }
 
     fetchApiKeys()
-  }, [apiUrl, currentTeam])
+  }, [domain, currentTeam, user.accessToken])
 
   async function deleteApiKey() {
     if (apiKeys.length === 1) {
@@ -98,7 +98,9 @@ export const KeysContent = ({
     }
 
     const res = await fetch(
-      `https://billing.${apiUrl}/teams/${currentTeam.id}/api-keys/${currentKey?.id}`,
+      `${getBillingUrl(domain)}/teams/${currentTeam.id}/api-keys/${
+        currentKey?.id
+      }`,
       {
         method: 'DELETE',
         headers: {
@@ -121,7 +123,7 @@ export const KeysContent = ({
 
   async function createApiKey() {
     const res = await fetch(
-      `https://billing.${apiUrl}/teams/${currentTeam.id}/api-keys`,
+      `${getBillingUrl(domain)}/teams/${currentTeam.id}/api-keys`,
       {
         method: 'POST',
         headers: {
@@ -153,7 +155,9 @@ export const KeysContent = ({
 
   async function updateApiKey() {
     const res = await fetch(
-      `https://billing.${apiUrl}/teams/${currentTeam.id}/api-keys/${currentKey?.id}`,
+      `${getBillingUrl(domain)}/teams/${currentTeam.id}/api-keys/${
+        currentKey?.id
+      }`,
       {
         method: 'PATCH',
         headers: {
diff --git a/apps/web/src/components/Dashboard/Personal.tsx b/apps/web/src/components/Dashboard/Personal.tsx
index 10937ae31..85b4c5b66 100644
--- a/apps/web/src/components/Dashboard/Personal.tsx
+++ b/apps/web/src/components/Dashboard/Personal.tsx
@@ -6,13 +6,14 @@ import Link from 'next/link'
 import { useState } from 'react'
 import { Copy } from 'lucide-react'
 import { E2BUser } from '@/utils/useUser'
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
 export const PersonalContent = ({
   user,
-  apiUrl,
+  domain,
 }: {
   user: E2BUser
-  apiUrl: string
+  domain: string
 }) => {
   const { toast } = useToast()
   const [hovered, setHovered] = useState<boolean>(false)
@@ -33,7 +34,7 @@ export const PersonalContent = ({
   }
 
   const updateUserEmail = async () => {
-    const res = await fetch(`https://billing.${apiUrl}/users`, {
+    const res = await fetch(`${getBillingUrl(domain)}/users`, {
       method: 'PATCH',
       headers: {
         'Content-Type': 'application/json',
diff --git a/apps/web/src/components/Dashboard/Sandboxes.tsx b/apps/web/src/components/Dashboard/Sandboxes.tsx
index 0a5e7b90e..50569fc84 100644
--- a/apps/web/src/components/Dashboard/Sandboxes.tsx
+++ b/apps/web/src/components/Dashboard/Sandboxes.tsx
@@ -10,6 +10,7 @@ import {
 import { useState } from 'react'
 import { useEffect } from 'react'
 import { Team } from '@/utils/useUser'
+import { getBaseUrl } from '@/app/(dashboard)/dashboard/utils'
 
 interface Sandbox {
   alias: string
@@ -25,10 +26,10 @@ interface Sandbox {
 
 export function SandboxesContent({
   team,
-  apiUrl,
+  domain,
 }: {
   team: Team
-  apiUrl: string
+  domain: string
 }) {
   const [runningSandboxes, setRunningSandboxes] = useState<Sandbox[]>([])
 
@@ -36,7 +37,7 @@ export function SandboxesContent({
     function f() {
       const apiKey = team.apiKeys[0]
       if (apiKey) {
-        fetchSandboxes(apiUrl, apiKey).then((newSandboxes) => {
+        fetchSandboxes(domain, apiKey).then((newSandboxes) => {
           if (newSandboxes) {
             setRunningSandboxes(newSandboxes)
           }
@@ -101,10 +102,10 @@ export function SandboxesContent({
 }
 
 async function fetchSandboxes(
-  apiUrl: string,
+  domain: string,
   apiKey: string
 ): Promise<Sandbox[]> {
-  const res = await fetch(`${apiUrl}/sandboxes`, {
+  const res = await fetch(`${getBaseUrl(domain)}/sandboxes`, {
     method: 'GET',
     headers: {
       'X-API-KEY': apiKey,
diff --git a/apps/web/src/components/Dashboard/Team.tsx b/apps/web/src/components/Dashboard/Team.tsx
index 574d55085..0171c72da 100644
--- a/apps/web/src/components/Dashboard/Team.tsx
+++ b/apps/web/src/components/Dashboard/Team.tsx
@@ -24,6 +24,7 @@ import {
   AlertDialogTitle,
 } from '../ui/alert-dialog'
 import Spinner from '@/components/Spinner'
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
 interface TeamMember {
   id: string
@@ -45,14 +46,14 @@ export const TeamContent = ({
   teams,
   setTeams,
   setCurrentTeam,
-  apiUrl,
+  domain,
 }: {
   team: Team
   user: E2BUser
   teams: Team[]
   setTeams: (teams: Team[]) => void
   setCurrentTeam: (team: Team) => void
-  apiUrl: string
+  domain: string
 }) => {
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [currentMemberId, setCurrentMemberId] = useState<string | null>(null)
@@ -65,7 +66,7 @@ export const TeamContent = ({
   useEffect(() => {
     const getTeamMembers = async () => {
       const res = await fetch(
-        `https://billing.${apiUrl}/teams/${team.id}/users`,
+        `${getBillingUrl(domain)}/teams/${team.id}/users`,
         {
           headers: {
             'X-User-Access-Token': user.accessToken,
@@ -91,7 +92,7 @@ export const TeamContent = ({
     }
 
     getTeamMembers()
-  }, [user, userAdded, team])
+  }, [user, userAdded, team, domain])
 
   useEffect(() => {
     setTeamName(team.name)
@@ -104,17 +105,14 @@ export const TeamContent = ({
   }
 
   const deleteUserFromTeam = async () => {
-    const res = await fetch(
-      `https://billing.${apiUrl}/teams/${team.id}/users`,
-      {
-        method: 'DELETE',
-        headers: {
-          'X-User-Access-Token': user.accessToken,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ user_id: currentMemberId }),
-      }
-    )
+    const res = await fetch(`${getBillingUrl(domain)}/teams/${team.id}/users`, {
+      method: 'DELETE',
+      headers: {
+        'X-User-Access-Token': user.accessToken,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ user_id: currentMemberId }),
+    })
 
     if (!res.ok) {
       toast({
@@ -130,7 +128,7 @@ export const TeamContent = ({
   }
 
   const changeTeamName = async () => {
-    const res = await fetch(`https://billing.${apiUrl}/teams/${team.id}`, {
+    const res = await fetch(`${getBillingUrl(domain)}/teams/${team.id}`, {
       headers: {
         'X-Team-API-Key': team.apiKeys[0],
         'Content-Type': 'application/json',
@@ -167,17 +165,14 @@ export const TeamContent = ({
       return
     }
 
-    const res = await fetch(
-      `https://billing.${apiUrl}/teams/${team.id}/users`,
-      {
-        headers: {
-          'X-User-Access-Token': user.accessToken,
-          'Content-Type': 'application/json',
-        },
-        method: 'POST',
-        body: JSON.stringify({ user_email: userToAdd.trim() }),
-      }
-    )
+    const res = await fetch(`${getBillingUrl(domain)}/teams/${team.id}/users`, {
+      headers: {
+        'X-User-Access-Token': user.accessToken,
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+      body: JSON.stringify({ user_email: userToAdd.trim() }),
+    })
 
     if (!res.ok) {
       toast({
diff --git a/apps/web/src/components/Dashboard/Templates.tsx b/apps/web/src/components/Dashboard/Templates.tsx
index 939df885c..a1bcdd573 100644
--- a/apps/web/src/components/Dashboard/Templates.tsx
+++ b/apps/web/src/components/Dashboard/Templates.tsx
@@ -28,6 +28,7 @@ import {
   AlertDialogAction,
 } from '../ui/alert-dialog'
 import { toast } from '../ui/use-toast'
+import { getBaseUrl } from '@/app/(dashboard)/dashboard/utils'
 
 interface Template {
   aliases: string[]
@@ -47,11 +48,11 @@ interface Template {
 export function TemplatesContent({
   user,
   teamId,
-  apiUrl,
+  domain,
 }: {
   user: E2BUser
   teamId: string
-  apiUrl: string
+  domain: string
 }) {
   const [templates, setTemplates] = useState<Template[]>([])
   const [currentTemplate, setCurrentTemplate] = useState<Template | null>(null)
@@ -64,7 +65,7 @@ export function TemplatesContent({
     async function f() {
       const accessToken = user.accessToken
       if (accessToken) {
-        fetchTemplates(apiUrl, accessToken, teamId).then((newTemplates) => {
+        fetchTemplates(domain, accessToken, teamId).then((newTemplates) => {
           if (newTemplates) {
             setTemplates(newTemplates)
           }
@@ -73,11 +74,11 @@ export function TemplatesContent({
     }
 
     f()
-  }, [user, teamId])
+  }, [domain, user, teamId])
 
-  async function deleteTemplate() {
+  async function deleteTemplate(domain: string) {
     const res = await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/templates/${currentTemplate?.templateID}`,
+      `${getBaseUrl(domain)}/templates/${currentTemplate?.templateID}`,
       {
         method: 'DELETE',
         headers: {
@@ -102,9 +103,9 @@ export function TemplatesContent({
     setIsDeleteTemplateDialogOpen(false)
   }
 
-  async function publishTemplate() {
+  async function publishTemplate(domain: string) {
     const res = await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/templates/${currentTemplate?.templateID}`,
+      `${getBaseUrl(domain)}/templates/${currentTemplate?.templateID}`,
       {
         method: 'PATCH',
         headers: {
@@ -256,7 +257,7 @@ export function TemplatesContent({
             >
               Cancel
             </AlertDialogCancel>
-            <AlertDialogAction onClick={publishTemplate}>
+            <AlertDialogAction onClick={() => publishTemplate(domain)}>
               {currentTemplate?.public ? 'Unpublish' : 'Publish'}
             </AlertDialogAction>
           </AlertDialogFooter>
@@ -289,7 +290,7 @@ export function TemplatesContent({
             </AlertDialogCancel>
             <AlertDialogAction
               className="bg-red-500 text-white hover:bg-red-600"
-              onClick={deleteTemplate}
+              onClick={() => deleteTemplate(domain)}
             >
               Delete
             </AlertDialogAction>
@@ -301,11 +302,11 @@ export function TemplatesContent({
 }
 
 async function fetchTemplates(
-  apiUrl: string,
+  domain: string,
   accessToken: string,
   teamId: string
 ): Promise<Template[]> {
-  const res = await fetch(`${apiUrl}/templates?teamID=${teamId}`, {
+  const res = await fetch(`${getBaseUrl(domain)}/templates?teamID=${teamId}`, {
     method: 'GET',
     headers: {
       Authorization: `Bearer ${accessToken}`,
diff --git a/apps/web/src/components/Dashboard/Usage.tsx b/apps/web/src/components/Dashboard/Usage.tsx
index 74106513e..9f3961943 100644
--- a/apps/web/src/components/Dashboard/Usage.tsx
+++ b/apps/web/src/components/Dashboard/Usage.tsx
@@ -4,6 +4,7 @@ import LineChart from '@/components/Dashboard/Chart'
 import Spinner from '@/components/Spinner'
 import { toast } from '@/components/ui/use-toast'
 import { Team } from '@/utils/useUser'
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
 type Usage = {
   month: number
@@ -23,10 +24,10 @@ type Series = {
 
 export const UsageContent = ({
   team,
-  apiUrl,
+  domain,
 }: {
   team: Team
-  apiUrl: string
+  domain: string
 }) => {
   const [vcpuData, setVcpuData] = useState<Series[]>([])
   const [vcpuHoursThisMonth, setVcpuHoursThisMonth] = useState<
@@ -46,7 +47,7 @@ export const UsageContent = ({
       setCostUsage([])
 
       const response = await fetch(
-        `https://billing.${apiUrl}/teams/${team.id}/usage`,
+        `${getBillingUrl(domain)}/teams/${team.id}/usage`,
         {
           headers: {
             'X-Team-API-Key': team.apiKeys[0],
@@ -79,7 +80,7 @@ export const UsageContent = ({
     }
 
     getUsage()
-  }, [team])
+  }, [team, domain])
 
   return (
     <div className="flex flex-col w-full">
diff --git a/apps/web/src/components/Pricing/SwitchToProButton.tsx b/apps/web/src/components/Pricing/SwitchToProButton.tsx
index 98558a8cf..0a4b26b63 100644
--- a/apps/web/src/components/Pricing/SwitchToProButton.tsx
+++ b/apps/web/src/components/Pricing/SwitchToProButton.tsx
@@ -8,9 +8,10 @@ import { tiers } from '@/utils/consts'
 import Spinner from '@/components/Spinner'
 
 import { TierActiveTag } from './TierActiveTag'
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
-function createCheckout(apiUrl: string, tierID: string, teamID: string) {
-  return fetch(`https://billing.${apiUrl}/checkouts`, {
+function createCheckout(domain: string, tierID: string, teamID: string) {
+  return fetch(`${getBillingUrl(domain)}/checkouts`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -22,7 +23,7 @@ function createCheckout(apiUrl: string, tierID: string, teamID: string) {
   })
 }
 
-function SwitchTierButton({ team, apiUrl }: { team: Team; apiUrl: string }) {
+function SwitchTierButton({ team, domain }: { team: Team; domain: string }) {
   const { user, isLoading } = useUser()
   const [error, setError] = useState('')
 
@@ -34,7 +35,7 @@ function SwitchTierButton({ team, apiUrl }: { team: Team; apiUrl: string }) {
     }
 
     const response = await createCheckout(
-      apiUrl,
+      domain,
       tiers.pro.id,
       user.teams[0].id
     )
@@ -61,7 +62,7 @@ function SwitchTierButton({ team, apiUrl }: { team: Team; apiUrl: string }) {
 
   // Only show the button if the user is on the base_v1 tier.
   // Teams can have custom tiers. We only want the button to users on the free tier.
-  if (!apiUrl || (team.tier !== tiers.hobby.id && team.tier !== tiers.pro.id)) {
+  if (!domain || (team.tier !== tiers.hobby.id && team.tier !== tiers.pro.id)) {
     return
   }