diff --git a/app/about/cn/page.tsx b/app/about/cn/page.tsx
index 6c74ae61..d0a2f408 100644
--- a/app/about/cn/page.tsx
+++ b/app/about/cn/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 import { FaGithub } from "react-icons/fa"
+import nextConfig from "@/next.config"
 
 export const metadata: Metadata = {
     title: "关于 - Next AI Draw.io",
@@ -270,7 +271,7 @@ export default function AboutCN() {
                                 <strong>动画连接器</strong>的Transformer架构图。
                             </p>
                             <Image
-                                src="/animated_connectors.svg"
+                                src={`${nextConfig.basePath}/animated_connectors.svg`}
                                 alt="带动画连接器的Transformer架构"
                                 width={480}
                                 height={360}
@@ -290,7 +291,7 @@ export default function AboutCN() {
                                     生成一个GCP架构图。用户连接到托管在实例上的前端。
                                 </p>
                                 <Image
-                                    src="/gcp_demo.svg"
+                                    src={`${nextConfig.basePath}/gcp_demo.svg`}
                                     alt="GCP架构图"
                                     width={400}
                                     height={300}
@@ -307,7 +308,7 @@ export default function AboutCN() {
                                     生成一个AWS架构图。用户连接到托管在实例上的前端。
                                 </p>
                                 <Image
-                                    src="/aws_demo.svg"
+                                    src={`${nextConfig.basePath}/aws_demo.svg`}
                                     alt="AWS架构图"
                                     width={400}
                                     height={300}
@@ -324,7 +325,7 @@ export default function AboutCN() {
                                     生成一个Azure架构图。用户连接到托管在实例上的前端。
                                 </p>
                                 <Image
-                                    src="/azure_demo.svg"
+                                    src={`${nextConfig.basePath}/azure_demo.svg`}
                                     alt="Azure架构图"
                                     width={400}
                                     height={300}
@@ -340,7 +341,7 @@ export default function AboutCN() {
                                     给我画一只可爱的猫。
                                 </p>
                                 <Image
-                                    src="/cat_demo.svg"
+                                    src={`${nextConfig.basePath}/cat_demo.svg`}
                                     alt="猫咪绘图"
                                     width={240}
                                     height={240}
diff --git a/app/about/ja/page.tsx b/app/about/ja/page.tsx
index c8beb44c..7529a8a3 100644
--- a/app/about/ja/page.tsx
+++ b/app/about/ja/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 import { FaGithub } from "react-icons/fa"
+import nextConfig from "@/next.config"
 
 export const metadata: Metadata = {
     title: "概要 - Next AI Draw.io",
@@ -280,7 +281,7 @@ export default function AboutJA() {
                                 付きのTransformerアーキテクチャ図を作成してください。
                             </p>
                             <Image
-                                src="/animated_connectors.svg"
+                                src={`${nextConfig.basePath}/animated_connectors.svg`}
                                 alt="アニメーションコネクタ付きTransformerアーキテクチャ"
                                 width={480}
                                 height={360}
@@ -300,7 +301,7 @@ export default function AboutJA() {
                                     を使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                 </p>
                                 <Image
-                                    src="/gcp_demo.svg"
+                                    src={`${nextConfig.basePath}/gcp_demo.svg`}
                                     alt="GCPアーキテクチャ図"
                                     width={400}
                                     height={300}
@@ -317,7 +318,7 @@ export default function AboutJA() {
                                     を使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                 </p>
                                 <Image
-                                    src="/aws_demo.svg"
+                                    src={`${nextConfig.basePath}/aws_demo.svg`}
                                     alt="AWSアーキテクチャ図"
                                     width={400}
                                     height={300}
@@ -334,7 +335,7 @@ export default function AboutJA() {
                                     を使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                 </p>
                                 <Image
-                                    src="/azure_demo.svg"
+                                    src={`${nextConfig.basePath}/azure_demo.svg`}
                                     alt="Azureアーキテクチャ図"
                                     width={400}
                                     height={300}
@@ -350,7 +351,7 @@ export default function AboutJA() {
                                     かわいい猫を描いてください。
                                 </p>
                                 <Image
-                                    src="/cat_demo.svg"
+                                    src={`${nextConfig.basePath}/cat_demo.svg`}
                                     alt="猫の絵"
                                     width={240}
                                     height={240}
diff --git a/app/about/page.tsx b/app/about/page.tsx
index 7192bce5..e991c4ad 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 import { FaGithub } from "react-icons/fa"
+import nextConfig from "@/next.config"
 
 export const metadata: Metadata = {
     title: "About - Next AI Draw.io",
@@ -301,7 +302,7 @@ export default function About() {
                                 transformer&apos;s architecture.
                             </p>
                             <Image
-                                src="/animated_connectors.svg"
+                                src={`${nextConfig.basePath}/animated_connectors.svg`}
                                 alt="Transformer Architecture with Animated Connectors"
                                 width={480}
                                 height={360}
@@ -322,7 +323,7 @@ export default function About() {
                                     a frontend hosted on an instance.
                                 </p>
                                 <Image
-                                    src="/gcp_demo.svg"
+                                    src={`${nextConfig.basePath}/gcp_demo.svg`}
                                     alt="GCP Architecture Diagram"
                                     width={400}
                                     height={300}
@@ -340,7 +341,7 @@ export default function About() {
                                     a frontend hosted on an instance.
                                 </p>
                                 <Image
-                                    src="/aws_demo.svg"
+                                    src={`${nextConfig.basePath}/aws_demo.svg`}
                                     alt="AWS Architecture Diagram"
                                     width={400}
                                     height={300}
@@ -358,7 +359,7 @@ export default function About() {
                                     to a frontend hosted on an instance.
                                 </p>
                                 <Image
-                                    src="/azure_demo.svg"
+                                    src={`${nextConfig.basePath}/azure_demo.svg`}
                                     alt="Azure Architecture Diagram"
                                     width={400}
                                     height={300}
@@ -374,7 +375,7 @@ export default function About() {
                                     me.
                                 </p>
                                 <Image
-                                    src="/cat_demo.svg"
+                                    src={`${nextConfig.basePath}/cat_demo.svg`}
                                     alt="Cat Drawing"
                                     width={240}
                                     height={240}
diff --git a/components/chat-example-panel.tsx b/components/chat-example-panel.tsx
index 1b547cf7..1766138e 100644
--- a/components/chat-example-panel.tsx
+++ b/components/chat-example-panel.tsx
@@ -8,6 +8,7 @@ import {
     Terminal,
     Zap,
 } from "lucide-react"
+import nextConfig from "@/next.config"
 
 interface ExampleCardProps {
     icon: React.ReactNode
@@ -74,7 +75,7 @@ export default function ExamplePanel({
         setInput("Replicate this flowchart.")
 
         try {
-            const response = await fetch("/example.png")
+            const response = await fetch(`${nextConfig.basePath}/example.png`)
             const blob = await response.blob()
             const file = new File([blob], "example.png", { type: "image/png" })
             setFiles([file])
@@ -87,7 +88,9 @@ export default function ExamplePanel({
         setInput("Replicate this in aws style")
 
         try {
-            const response = await fetch("/architecture.png")
+            const response = await fetch(
+                `${nextConfig.basePath}/architecture.png`,
+            )
             const blob = await response.blob()
             const file = new File([blob], "architecture.png", {
                 type: "image/png",
@@ -102,7 +105,9 @@ export default function ExamplePanel({
         setInput("Summarize this paper as a diagram")
 
         try {
-            const response = await fetch("/chain-of-thought.txt")
+            const response = await fetch(
+                `${nextConfig.basePath}/chain-of-thought.txt`,
+            )
             const blob = await response.blob()
             const file = new File([blob], "chain-of-thought.txt", {
                 type: "text/plain",
diff --git a/components/chat-message-display.tsx b/components/chat-message-display.tsx
index b2dafadb..bda62a50 100644
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -34,6 +34,7 @@ import {
     replaceNodes,
     validateAndFixXml,
 } from "@/lib/utils"
+import nextConfig from "@/next.config"
 import ExamplePanel from "./chat-example-panel"
 import { CodeBlock } from "./code-block"
 
@@ -291,7 +292,7 @@ export function ChatMessageDisplay({
         setFeedback((prev) => ({ ...prev, [messageId]: value }))
 
         try {
-            await fetch("/api/log-feedback", {
+            await fetch(`${nextConfig.basePath}/api/log-feedback`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index b7408b0b..d2966635 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -27,6 +27,7 @@ import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
 import { useQuotaManager } from "@/lib/use-quota-manager"
 import { formatXML, isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
+import nextConfig from "@/next.config"
 import { ChatMessageDisplay } from "./chat-message-display"
 
 // localStorage keys for persistence
@@ -150,7 +151,7 @@ export default function ChatPanel({
 
     // Check config on mount
     useEffect(() => {
-        fetch("/api/config")
+        fetch(`${nextConfig.basePath}/api/config`)
             .then((res) => res.json())
             .then((data) => {
                 setAccessCodeRequired(data.accessCodeRequired)
@@ -225,7 +226,7 @@ export default function ChatPanel({
         setMessages,
     } = useChat({
         transport: new DefaultChatTransport({
-            api: "/api/chat",
+            api: `${nextConfig.basePath}/api/chat`,
         }),
         async onToolCall({ toolCall }) {
             if (DEBUG) {
diff --git a/components/settings-dialog.tsx b/components/settings-dialog.tsx
index 30381f59..d97c85e7 100644
--- a/components/settings-dialog.tsx
+++ b/components/settings-dialog.tsx
@@ -20,6 +20,7 @@ import {
     SelectValue,
 } from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
+import nextConfig from "@/next.config"
 
 interface SettingsDialogProps {
     open: boolean
@@ -71,7 +72,7 @@ export function SettingsDialog({
         // Only fetch if not cached in localStorage
         if (getStoredAccessCodeRequired() !== null) return
 
-        fetch("/api/config")
+        fetch(`${nextConfig.basePath}/api/config`)
             .then((res) => {
                 if (!res.ok) throw new Error(`HTTP ${res.status}`)
                 return res.json()
@@ -119,12 +120,15 @@ export function SettingsDialog({
         setIsVerifying(true)
 
         try {
-            const response = await fetch("/api/verify-access-code", {
-                method: "POST",
-                headers: {
-                    "x-access-code": accessCode.trim(),
+            const response = await fetch(
+                `${nextConfig.basePath}/api/verify-access-code`,
+                {
+                    method: "POST",
+                    headers: {
+                        "x-access-code": accessCode.trim(),
+                    },
                 },
-            })
+            )
 
             const data = await response.json()
 
diff --git a/contexts/diagram-context.tsx b/contexts/diagram-context.tsx
index a7cd4abd..7381cc11 100644
--- a/contexts/diagram-context.tsx
+++ b/contexts/diagram-context.tsx
@@ -5,6 +5,7 @@ import { createContext, useContext, useRef, useState } from "react"
 import type { DrawIoEmbedRef } from "react-drawio"
 import { STORAGE_DIAGRAM_XML_KEY } from "@/components/chat-panel"
 import type { ExportFormat } from "@/components/save-dialog"
+import nextConfig from "@/next.config"
 import { extractDiagramXML, validateAndFixXml } from "../lib/utils"
 
 interface DiagramContextType {
@@ -284,7 +285,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         sessionId?: string,
     ) => {
         try {
-            await fetch("/api/log-save", {
+            await fetch(`${nextConfig.basePath}/api/log-save`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({ filename, format, sessionId }),
diff --git a/docker-compose.yml b/docker-compose.yml
index 84970bca..115b098d 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,5 +8,7 @@ services:
       args:
         - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
     ports: ["3000:3000"]
+    environment:
+      - NEXT_PUBLIC_BASE_PATH=/nextaidrawio
     env_file: .env
-    depends_on: [drawio]
+    depends_on: [drawio]
\ No newline at end of file
diff --git a/next.config.ts b/next.config.ts
index 8c0356a6..9db90227 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,6 +3,7 @@ import type { NextConfig } from "next"
 const nextConfig: NextConfig = {
     /* config options here */
     output: "standalone",
+    basePath: process.env.NEXT_PUBLIC_BASE_PATH || "",
 }
 
 export default nextConfig