diff --git a/src/components/common/CreatorCard.tsx b/src/components/common/CreatorCard.tsx
index f530242a..a02e8662 100644
--- a/src/components/common/CreatorCard.tsx
+++ b/src/components/common/CreatorCard.tsx
@@ -7,6 +7,8 @@ import { ShoppingCart, Link as LinkIcon, TrendingUp } from 'lucide-react';
 import toast from 'react-hot-toast';
 import showToast from '@/utils/toast.util';
 import TransactionRetryNotice from '@/components/common/TransactionRetryNotice';
+import TransactionFailureDrawer from '@/components/common/TransactionFailureDrawer';
+import type { TransactionFailureDetails } from '@/components/common/TransactionFailureDrawer';
 import CardMetaRow from '@/components/common/CardMetaRow';
 import VerifiedBadge from '@/components/common/VerifiedBadge';
 import CreatorInitialsAvatar from '@/components/common/CreatorInitialsAvatar';
@@ -30,6 +32,10 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 	const [transactionState, setTransactionState] = useState<
 		'idle' | 'submitting' | 'failed' | 'success'
 	>('idle');
+	const [failureDrawerOpen, setFailureDrawerOpen] = useState(false);
+	const [failureDetails, setFailureDetails] = useState<TransactionFailureDetails>({
+		errorMessage: '',
+	});
 	const hasFailedOnceRef = useRef(false);
 
 	const runPurchaseAttempt = () => {
@@ -42,6 +48,18 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 			if (!hasFailedOnceRef.current) {
 				hasFailedOnceRef.current = true;
 				setTransactionState('failed');
+				setFailureDetails({
+					errorMessage: 'Transaction failed: Insufficient balance to complete the purchase.',
+					errorCode: 'ERR_INSUFFICIENT_BALANCE',
+					txHash: '0xabcd1234...failed',
+					developerDetails: {
+						requiredAmount: '0.05 ETH',
+						availableBalance: '0.02 ETH',
+						gasEstimate: '0.001 ETH',
+					},
+					timestamp: Date.now(),
+				});
+				setFailureDrawerOpen(true);
 				return;
 			}
 
@@ -234,6 +252,14 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 					onRetry={runPurchaseAttempt}
 				/>
 			)}
+
+			<TransactionFailureDrawer
+				open={failureDrawerOpen}
+				onOpenChange={setFailureDrawerOpen}
+				failureDetails={failureDetails}
+				onRetry={runPurchaseAttempt}
+				onDismiss={() => setFailureDrawerOpen(false)}
+			/>
 		</div>
 	);
 };
diff --git a/src/components/common/CreatorOnboardingForm.tsx b/src/components/common/CreatorOnboardingForm.tsx
new file mode 100644
index 00000000..77023c7b
--- /dev/null
+++ b/src/components/common/CreatorOnboardingForm.tsx
@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from 'react';
+import { FormInput } from './FormInput';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export interface CreatorOnboardingFormData {
+	name: string;
+	email: string;
+	bio: string;
+	category: string;
+}
+
+export interface CreatorOnboardingFormProps {
+	onSubmit?: (data: CreatorOnboardingFormData) => void;
+	initialData?: Partial<CreatorOnboardingFormData>;
+	className?: string;
+}
+
+export const CreatorOnboardingForm: React.FC<
+	CreatorOnboardingFormProps
+> = ({ onSubmit, initialData, className }) => {
+	const [formData, setFormData] = useState<CreatorOnboardingFormData>({
+		name: initialData?.name || '',
+		email: initialData?.email || '',
+		bio: initialData?.bio || '',
+		category: initialData?.category || '',
+	});
+
+	const [isDirty, setIsDirty] = useState(false);
+	const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+	const initialDataRef = React.useRef(formData);
+
+	useEffect(() => {
+		initialDataRef.current = {
+			name: initialData?.name || '',
+			email: initialData?.email || '',
+			bio: initialData?.bio || '',
+			category: initialData?.category || '',
+		};
+		setFormData(initialDataRef.current);
+		setIsDirty(false);
+	}, [initialData]);
+
+	useEffect(() => {
+		const hasChanged = JSON.stringify(formData) !== JSON.stringify(initialDataRef.current);
+		setIsDirty(hasChanged);
+	}, [formData]);
+
+	useEffect(() => {
+		const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+			if (isDirty) {
+				e.preventDefault();
+				e.returnValue = '';
+			}
+		};
+
+		window.addEventListener('beforeunload', handleBeforeUnload);
+		return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+	}, [isDirty]);
+
+	const handleChange = (field: keyof CreatorOnboardingFormData, value: string) => {
+		setFormData(prev => ({ ...prev, [field]: value }));
+		setTouched(prev => ({ ...prev, [field]: true }));
+	};
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		onSubmit?.(formData);
+		setIsDirty(false);
+		initialDataRef.current = { ...formData };
+	};
+
+	const handleReset = () => {
+		if (isDirty && !confirm('Discard unsaved changes?')) {
+			return;
+		}
+		setFormData(initialDataRef.current);
+		setTouched({});
+		setIsDirty(false);
+	};
+
+	return (
+		<form onSubmit={handleSubmit} className={cn('space-y-6', className)}>
+			<FormInput
+				label="Creator Name"
+				value={formData.name}
+				onChange={value => handleChange('name', value)}
+				placeholder="Your creator name"
+				required
+				touched={touched.name}
+			/>
+
+			<FormInput
+				label="Email"
+				type="email"
+				value={formData.email}
+				onChange={value => handleChange('email', value)}
+				placeholder="your@email.com"
+				required
+				touched={touched.email}
+			/>
+
+			<FormInput
+				label="Bio"
+				type="textarea"
+				value={formData.bio}
+				onChange={value => handleChange('bio', value)}
+				placeholder="Tell us about yourself..."
+				touched={touched.bio}
+				rows={4}
+			/>
+
+			<FormInput
+				label="Category"
+				value={formData.category}
+				onChange={value => handleChange('category', value)}
+				placeholder="e.g., Art, Music, Tech"
+				touched={touched.category}
+			/>
+
+			<div className="flex gap-3 pt-4">
+				<Button type="submit" className="flex-1">
+					Save Profile
+				</Button>
+				<Button
+					type="button"
+					variant="outline"
+					onClick={handleReset}
+					disabled={!isDirty}
+				>
+					Discard
+				</Button>
+			</div>
+
+			{isDirty && (
+				<div className="rounded-lg bg-amber-500/10 border border-amber-500/30 px-4 py-3 text-sm text-amber-100">
+					You have unsaved changes. They will be lost if you leave this page.
+				</div>
+			)}
+		</form>
+	);
+};
+
+export default CreatorOnboardingForm;
diff --git a/src/components/common/ProfileTabPill.tsx b/src/components/common/ProfileTabPill.tsx
index 6340dcf4..8a18899e 100644
--- a/src/components/common/ProfileTabPill.tsx
+++ b/src/components/common/ProfileTabPill.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
@@ -67,6 +67,7 @@ export interface ProfileTabPillGroupProps {
 	activeTab: string;
 	onTabChange: (value: string) => void;
 	className?: string;
+	enableHashRouting?: boolean;
 }
 
 export const ProfileTabPillGroup: React.FC<ProfileTabPillGroupProps> = ({
@@ -74,7 +75,40 @@ export const ProfileTabPillGroup: React.FC<ProfileTabPillGroupProps> = ({
 	activeTab,
 	onTabChange,
 	className,
+	enableHashRouting = false,
 }) => {
+	useEffect(() => {
+		if (!enableHashRouting) return;
+
+		const handleHashChange = () => {
+			const hash = window.location.hash.slice(1);
+			const validTab = tabs.find(tab => tab.value === hash);
+			if (validTab && hash !== activeTab) {
+				onTabChange(hash);
+			}
+		};
+
+		window.addEventListener('hashchange', handleHashChange);
+		return () => window.removeEventListener('hashchange', handleHashChange);
+	}, [enableHashRouting, tabs, activeTab, onTabChange]);
+
+	const handleTabClick = (value: string) => {
+		onTabChange(value);
+		if (enableHashRouting) {
+			window.location.hash = value;
+		}
+	};
+
+	useEffect(() => {
+		if (!enableHashRouting) return;
+
+		const hash = window.location.hash.slice(1);
+		const validTab = tabs.find(tab => tab.value === hash);
+		if (validTab && hash !== activeTab) {
+			onTabChange(hash);
+		}
+	}, [enableHashRouting, tabs, activeTab, onTabChange]);
+
 	return (
 		<nav
 			role="tablist"
@@ -88,7 +122,7 @@ export const ProfileTabPillGroup: React.FC<ProfileTabPillGroupProps> = ({
 					aria-selected={activeTab === tab.value}
 					isActive={activeTab === tab.value}
 					icon={tab.icon}
-					onClick={() => onTabChange(tab.value)}
+					onClick={() => handleTabClick(tab.value)}
 				>
 					{tab.label}
 				</ProfileTabPill>
diff --git a/src/components/common/TransactionFailureDrawer.tsx b/src/components/common/TransactionFailureDrawer.tsx
new file mode 100644
index 00000000..8559c218
--- /dev/null
+++ b/src/components/common/TransactionFailureDrawer.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AlertCircle, Copy } from 'lucide-react';
+import toast from 'react-hot-toast';
+
+export interface TransactionFailureDetails {
+	txHash?: string;
+	errorCode?: string;
+	errorMessage: string;
+	developerDetails?: Record<string, unknown>;
+	timestamp?: number;
+}
+
+export interface TransactionFailureDrawerProps {
+	open: boolean;
+	onOpenChange?: (open: boolean) => void;
+	failureDetails: TransactionFailureDetails;
+	onRetry?: () => void;
+	onDismiss?: () => void;
+}
+
+const TransactionFailureDrawer: React.FC<TransactionFailureDrawerProps> = ({
+	open,
+	onOpenChange,
+	failureDetails,
+	onRetry,
+	onDismiss,
+}) => {
+	const copyToClipboard = (text: string) => {
+		navigator.clipboard.writeText(text);
+		toast.success('Copied to clipboard');
+	};
+
+	const handleClose = () => {
+		onDismiss?.();
+		onOpenChange?.(false);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="max-w-md">
+				<DialogHeader>
+					<div className="flex items-center gap-3 mb-3">
+						<div className="rounded-full bg-red-500/15 p-3">
+							<AlertCircle className="size-6 text-red-400" />
+						</div>
+						<div>
+							<DialogTitle>Transaction Failed</DialogTitle>
+						</div>
+					</div>
+				</DialogHeader>
+
+				<div className="space-y-4 border-t border-white/5 pt-4">
+					<div>
+						<p className="text-sm font-medium text-white/70 mb-2">
+							Error Message
+						</p>
+						<p className="text-sm text-white/90 rounded-lg bg-white/5 p-3 break-words">
+							{failureDetails.errorMessage}
+						</p>
+					</div>
+
+					{failureDetails.errorCode && (
+						<div>
+							<p className="text-sm font-medium text-white/70 mb-2">
+								Error Code
+							</p>
+							<div className="flex items-center gap-2 rounded-lg bg-white/5 p-3">
+								<code className="text-sm text-amber-400 font-mono flex-1 break-all">
+									{failureDetails.errorCode}
+								</code>
+								<button
+									onClick={() =>
+										copyToClipboard(failureDetails.errorCode!)
+									}
+									className="shrink-0 p-2 hover:bg-white/10 rounded transition-colors"
+									aria-label="Copy error code"
+								>
+									<Copy className="size-4 text-white/60" />
+								</button>
+							</div>
+						</div>
+					)}
+
+					{failureDetails.txHash && (
+						<div>
+							<p className="text-sm font-medium text-white/70 mb-2">
+								Transaction Hash
+							</p>
+							<div className="flex items-center gap-2 rounded-lg bg-white/5 p-3">
+								<code className="text-sm text-white/60 font-mono flex-1 truncate">
+									{failureDetails.txHash}
+								</code>
+								<button
+									onClick={() =>
+										copyToClipboard(failureDetails.txHash!)
+									}
+									className="shrink-0 p-2 hover:bg-white/10 rounded transition-colors"
+									aria-label="Copy transaction hash"
+								>
+									<Copy className="size-4 text-white/60" />
+								</button>
+							</div>
+						</div>
+					)}
+
+					{failureDetails.developerDetails &&
+						Object.keys(failureDetails.developerDetails).length > 0 && (
+							<details className="text-sm cursor-pointer group">
+								<summary className="font-medium text-white/70 group-open:text-white/90 transition-colors">
+									Developer Details
+								</summary>
+								<pre className="mt-2 rounded-lg bg-white/5 p-3 overflow-auto text-xs text-white/60 font-mono">
+									{JSON.stringify(
+										failureDetails.developerDetails,
+										null,
+										2
+									)}
+								</pre>
+							</details>
+						)}
+				</div>
+
+				<DialogFooter className="sm:justify-between">
+					<Button variant="ghost" size="sm" onClick={handleClose}>
+						Dismiss
+					</Button>
+					{onRetry && (
+						<Button size="sm" onClick={onRetry}>
+							Retry Transaction
+						</Button>
+					)}
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default TransactionFailureDrawer;
diff --git a/src/hooks/useProfileCache.ts b/src/hooks/useProfileCache.ts
new file mode 100644
index 00000000..be7325f4
--- /dev/null
+++ b/src/hooks/useProfileCache.ts
@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { cacheManager } from '@/utils/cache.utils';
+
+export const useProfileCache = () => {
+	useEffect(() => {
+		const handleFocus = () => {
+			cacheManager.invalidateAll();
+		};
+
+		window.addEventListener('focus', handleFocus);
+		return () => window.removeEventListener('focus', handleFocus);
+	}, []);
+
+	const invalidateProfileCache = () => {
+		cacheManager.invalidateAll();
+	};
+
+	return { invalidateProfileCache };
+};
diff --git a/src/services/course.service.ts b/src/services/course.service.ts
index d45a633b..52d69d6c 100644
--- a/src/services/course.service.ts
+++ b/src/services/course.service.ts
@@ -1,5 +1,6 @@
 // src/services/course.service.ts
 import { BaseApiService, type APIResponse } from './api.service';
+import { cacheManager } from '@/utils/cache.utils';
 
 export interface Course {
 	id: string;
@@ -25,15 +26,23 @@ export interface GetCoursesParams {
 }
 
 class CourseService extends BaseApiService {
+	private readonly PROFILE_CACHE_TTL = 30000; // 30 seconds
+
 	// Get all courses - GET /courses
 	async getCourses(params?: GetCoursesParams): Promise<Course[]> {
+		const cacheKey = `courses_${JSON.stringify(params || {})}`;
+		const cached = cacheManager.get<Course[]>(cacheKey);
+		if (cached) return cached;
+
 		try {
 			const response = await this.api.get<APIResponse<Course[]>>(
 				'/courses',
 				{ params }
 			);
 
-			return response.data.data;
+			const data = response.data.data;
+			cacheManager.set(cacheKey, data, this.PROFILE_CACHE_TTL);
+			return data;
 		} catch (error) {
 			throw this.handleError(error);
 		}
@@ -41,12 +50,18 @@ class CourseService extends BaseApiService {
 
 	// Get single course - GET /courses/:id
 	async getCourse(courseId: string): Promise<Course> {
+		const cacheKey = `course_${courseId}`;
+		const cached = cacheManager.get<Course>(cacheKey);
+		if (cached) return cached;
+
 		try {
 			const response = await this.api.get<APIResponse<Course>>(
 				`/courses/${courseId}`
 			);
 
-			return response.data.data;
+			const data = response.data.data;
+			cacheManager.set(cacheKey, data, this.PROFILE_CACHE_TTL);
+			return data;
 		} catch (error) {
 			throw this.handleError(error);
 		}
diff --git a/src/utils/cache.utils.ts b/src/utils/cache.utils.ts
new file mode 100644
index 00000000..7b849e16
--- /dev/null
+++ b/src/utils/cache.utils.ts
@@ -0,0 +1,40 @@
+interface CacheEntry<T> {
+	data: T;
+	timestamp: number;
+	ttl: number;
+}
+
+class CacheManager {
+	private cache = new Map<string, CacheEntry<unknown>>();
+
+	set<T>(key: string, data: T, ttlMs: number): void {
+		this.cache.set(key, {
+			data,
+			timestamp: Date.now(),
+			ttl: ttlMs,
+		});
+	}
+
+	get<T>(key: string): T | null {
+		const entry = this.cache.get(key) as CacheEntry<T> | undefined;
+		if (!entry) return null;
+
+		const isExpired = Date.now() - entry.timestamp > entry.ttl;
+		if (isExpired) {
+			this.cache.delete(key);
+			return null;
+		}
+
+		return entry.data;
+	}
+
+	invalidate(key: string): void {
+		this.cache.delete(key);
+	}
+
+	invalidateAll(): void {
+		this.cache.clear();
+	}
+}
+
+export const cacheManager = new CacheManager();