diff --git a/src/components/admin/admin-templates-list.tsx b/src/components/admin/admin-templates-list.tsx
index 1446803..a13e6e7 100644
--- a/src/components/admin/admin-templates-list.tsx
+++ b/src/components/admin/admin-templates-list.tsx
@@ -24,6 +24,7 @@ import {
   X
 } from 'lucide-react'
 import { adminApi, formatDate, getComplexityColor } from '@/lib/api/admin'
+import { BACKEND_URL } from '@/config/backend'
 import { AdminTemplate, AdminStats } from '@/types/admin.types'
 import { AdminFeatureSelection } from './admin-feature-selection'
 
@@ -137,7 +138,7 @@ export function AdminTemplatesList({ onTemplateSelect }: AdminTemplatesListProps
       }
       
       // Call API to create template (you'll need to implement this endpoint)
-      const response = await fetch('/api/templates', {
+      const response = await fetch(`${BACKEND_URL}/api/templates`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
diff --git a/src/components/prompt-side-panel.tsx b/src/components/prompt-side-panel.tsx
index 9c7538c..e405e52 100644
--- a/src/components/prompt-side-panel.tsx
+++ b/src/components/prompt-side-panel.tsx
@@ -6,7 +6,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { SelectDevice } from "@/components/ui/select-device"
 import { cn } from "@/lib/utils"
-import { getHealthUrl, config } from "@/lib/config"
+import { getAIMockupHealthUrl, AI_MOCKUP_CONFIG } from "@/lib/api-config"
 
 export function PromptSidePanel({ 
   className,
@@ -43,7 +43,7 @@ export function PromptSidePanel({
     const checkBackendStatus = async () => {
       try {
         setBackendStatus('checking')
-        const response = await fetch(getHealthUrl(), {
+        const response = await fetch(getAIMockupHealthUrl(), {
           method: 'GET',
           headers: { 'Content-Type': 'application/json' },
         })
@@ -62,7 +62,7 @@ export function PromptSidePanel({
     checkBackendStatus()
     
     // Check status every 10 seconds
-    const interval = setInterval(checkBackendStatus, config.ui.statusCheckInterval)
+    const interval = setInterval(checkBackendStatus, AI_MOCKUP_CONFIG.ui.statusCheckInterval)
     return () => clearInterval(interval)
   }, [])
 
diff --git a/src/components/wireframe-canvas.tsx b/src/components/wireframe-canvas.tsx
index c2fb83e..9d39ccf 100644
--- a/src/components/wireframe-canvas.tsx
+++ b/src/components/wireframe-canvas.tsx
@@ -6,7 +6,7 @@ import "@tldraw/tldraw/tldraw.css"
 import { Tldraw, type Editor, createShapeId, toRichText } from "@tldraw/tldraw"
 import { useEffect, useRef, useState } from "react"
 import { cn } from "@/lib/utils"
-import { getWireframeGenerationUrl, getWireframeUrl, getWireframeByIdUrl } from "@/lib/config"
+import { getWireframeGenerationUrl, getWireframeUrl, getWireframeByIdUrl } from "@/lib/api-config"
 import { useAuth } from "@/contexts/auth-context"
 import { getAccessToken } from "@/components/apis/authApiClients"
 import { authApiClient, getRefreshToken, setTokens, clearTokens } from "@/components/apis/authApiClients"
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 41ca5c4..ff8f03a 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -2,7 +2,7 @@
 export const config = {
   // Backend API configuration
   backend: {
-    baseUrl: process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8021',
+    baseUrl: process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000',
     endpoints: {
       health: '/health',
       generateWireframe: '/generate-wireframe',