diff --git a/src/lib/components/collection/CollectionArtifactDetailPane.svelte b/src/lib/components/collection/CollectionArtifactDetailPane.svelte
index cbe6923b..e2bd2356 100644
--- a/src/lib/components/collection/CollectionArtifactDetailPane.svelte
+++ b/src/lib/components/collection/CollectionArtifactDetailPane.svelte
@@ -15,7 +15,7 @@
 	import { useDeleteCollectionArtifact } from '$lib/api/mutations/artifact.mutations'
 	import { usePaneStack, type PaneConfig, type ElementType } from '$lib/stores/paneStack.svelte'
 	import { sidebar } from '$lib/stores/sidebar.svelte'
-	import { getArtifactImage } from '$lib/utils/images'
+	import { getArtifactImage, getBasePath } from '$lib/utils/images'
 	import DetailsSection from '$lib/components/sidebar/details/DetailsSection.svelte'
 	import DetailRow from '$lib/components/sidebar/details/DetailRow.svelte'
 	import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
@@ -45,6 +45,7 @@
 
 	// Wide image for header
 	const wideImageUrl = $derived(getArtifactImage(artifact.artifact?.granblueId, 'wide'))
+	const reliefBackgroundUrl = `${getBasePath()}/relief.png`
 
 	// Artifact properties
 	const isQuirk = $derived(isQuirkArtifact(artifact.artifact))
@@ -125,7 +126,7 @@
 </script>
 
 <div class="artifact-detail-pane">
-	<div class="artifact-header">
+	<div class="artifact-header" style:background="url({reliefBackgroundUrl}), linear-gradient(to right, #000, #484440, #000)">
 		<img src={wideImageUrl} alt="" class="artifact-image" />
 	</div>
 
@@ -189,7 +190,6 @@
 		min-height: 120px;
 		margin: 0 $unit-2x;
 		border-radius: $card-corner;
-		background: url('/images/relief.png'), linear-gradient(to right, #000, #484440, #000);
 		background-size: 420px 731px;
 		background-position: -20px -20px;
 		overflow: hidden;
diff --git a/src/lib/components/job/JobSection.svelte b/src/lib/components/job/JobSection.svelte
index f0ad67c8..65b6300d 100644
--- a/src/lib/components/job/JobSection.svelte
+++ b/src/lib/components/job/JobSection.svelte
@@ -10,7 +10,7 @@
 		isSkillSlotAvailable,
 		isSkillSlotLocked
 	} from '$lib/utils/jobUtils'
-	import { getAccessoryImage } from '$lib/utils/images'
+	import { getAccessoryImage, getBasePath } from '$lib/utils/images'
 	import Icon from '$lib/components/Icon.svelte'
 
 	interface Props {
@@ -42,6 +42,7 @@
 	const slotCount = $derived(getJobSkillSlotCount(job))
 	const jobIconUrl = $derived(job ? getJobIconUrl(job.granblueId) : '')
 	const jobImageUrl = $derived(job ? getJobFullImageUrl(job, gender) : '')
+	const jobBackgroundUrl = `${getBasePath()}/background_a.jpg`
 
 	function handleSelectSkill(slot: number) {
 		if (onSelectSkill) {
@@ -57,7 +58,7 @@
 </script>
 
 <div class="job-section">
-	<div class="job-image-container">
+	<div class="job-image-container" style:background-image="url({jobBackgroundUrl})">
 		{#if job}
 			<img class="job-portrait" src={jobImageUrl} alt={job.name.en} />
 			<div class="overlay"></div>
@@ -205,7 +206,6 @@
 		max-width: 100%;
 		height: 252px;
 		aspect-ratio: 7/4;
-		background: url('/images/background_a.jpg');
 		background-size: 500px 281px;
 		background-position: center;
 		border-radius: layout.$item-corner;
diff --git a/src/lib/components/sidebar/details/ItemHeader.svelte b/src/lib/components/sidebar/details/ItemHeader.svelte
index 7ba78b9a..064133d6 100644
--- a/src/lib/components/sidebar/details/ItemHeader.svelte
+++ b/src/lib/components/sidebar/details/ItemHeader.svelte
@@ -4,7 +4,8 @@
 		getCharacterDetailImage,
 		getWeaponBaseImage,
 		getSummonDetailImage,
-		getCharacterPose
+		getCharacterPose,
+		getBasePath
 	} from '$lib/utils/images'
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 
@@ -65,10 +66,12 @@
 
 	// Special characters have different star counts (SR characters, etc.)
 	const special = $derived(type === 'character' && (itemData?.rarity ?? 3) < 3)
+
+	const reliefBackgroundUrl = `${getBasePath()}/relief.png`
 </script>
 
 <div class="item-header-container">
-	<div class="item-header">
+	<div class="item-header" style:background="url({reliefBackgroundUrl}), linear-gradient(to right, #000, #484440, #000)">
 		<div class="uncap-overlay">
 			<UncapIndicator
 				{type}
@@ -99,7 +102,6 @@
 			border-radius: layout.$card-corner;
 			align-items: center;
 			justify-content: center;
-			background: url('/images/relief.png'), linear-gradient(to right, #000, #484440, #000);
 			background-size: 420px 731px;
 			background-position: -20px -20px;
 			transition: background 0.3s ease;
diff --git a/src/lib/components/sidebar/edit/PerpetuityToggle.svelte b/src/lib/components/sidebar/edit/PerpetuityToggle.svelte
index 6f7f5513..2dab5027 100644
--- a/src/lib/components/sidebar/edit/PerpetuityToggle.svelte
+++ b/src/lib/components/sidebar/edit/PerpetuityToggle.svelte
@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import Checkbox from '$lib/components/ui/checkbox/Checkbox.svelte'
+	import { getBasePath } from '$lib/utils/images'
 
 	interface Props {
 		/** Whether perpetuity is enabled */
@@ -16,6 +17,8 @@
 
 	let localValue = $state(value)
 
+	const perpetuityImageUrl = `${getBasePath()}/perpetuity.png`
+
 	function handleChange(checked: boolean) {
 		localValue = checked
 		onChange?.(checked)
@@ -32,7 +35,7 @@
 		/>
 		<div class="toggle-content">
 			<img
-				src="/images/perpetuity.png"
+				src={perpetuityImageUrl}
 				alt="Perpetuity Ring"
 				class="perpetuity-icon"
 			/>
diff --git a/src/lib/utils/avatar.ts b/src/lib/utils/avatar.ts
index 329d52df..24e88c1a 100644
--- a/src/lib/utils/avatar.ts
+++ b/src/lib/utils/avatar.ts
@@ -1,3 +1,5 @@
+import { getImageBaseUrl } from '$lib/api/adapters/config'
+
 /**
  * Ensures a filename has a .png extension
  */
@@ -12,11 +14,21 @@ export function to2x(name: string): string {
 	return /\.png$/i.test(name) ? name.replace(/\.png$/i, '@2x.png') : `${name}@2x.png`
 }
 
+/**
+ * Gets the base path for profile images
+ * Uses AWS URL in production, local /profile path in development
+ */
+function getProfileBasePath(): string {
+	const remoteUrl = getImageBaseUrl()
+	return remoteUrl ? `${remoteUrl}/profile` : '/profile'
+}
+
 /**
  * Gets the avatar source path
  */
 export function getAvatarSrc(avatarFile: string | undefined | null): string {
-	return avatarFile ? `/profile/${ensurePng(avatarFile)}` : ''
+	if (!avatarFile) return ''
+	return `${getProfileBasePath()}/${ensurePng(avatarFile)}`
 }
 
 /**
@@ -24,6 +36,7 @@ export function getAvatarSrc(avatarFile: string | undefined | null): string {
  */
 export function getAvatarSrcSet(avatarFile: string | undefined | null): string {
 	if (!avatarFile) return ''
-	const src = `/profile/${ensurePng(avatarFile)}`
-	return `${src} 1x, /profile/${to2x(avatarFile)} 2x`
+	const basePath = getProfileBasePath()
+	const src = `${basePath}/${ensurePng(avatarFile)}`
+	return `${src} 1x, ${basePath}/${to2x(avatarFile)} 2x`
 }
\ No newline at end of file