diff --git a/apps/mcp-server/index.ts b/apps/mcp-server/index.ts
index be333c2..9233d13 100644
--- a/apps/mcp-server/index.ts
+++ b/apps/mcp-server/index.ts
@@ -7,7 +7,7 @@ import {
 import axios from "axios";
 import * as FormData from "form-data";
 
-const BACKEND_URL = "http://localhost:3051/api";
+let BACKEND_URL = "http://localhost:3051/api";
 const ADMIN_USERNAME = process.env.ADMIN_USERNAME || "admin";
 const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || "homaroma123"; // เปลี่ยนรหัสผ่านตรงนี้ให้ตรงกับ Production ด้วยนะครับ
 
@@ -58,6 +58,17 @@ const server = new Server(
 server.setRequestHandler(ListToolsRequestSchema, async () => {
   return {
     tools: [
+      {
+        name: "set_target_environment",
+        description: "Switch the target environment for the MCP server (local or production)",
+        inputSchema: {
+          type: "object",
+          properties: {
+            env: { type: "string", enum: ["local", "production"] }
+          },
+          required: ["env"]
+        }
+      },
       {
         name: "ping_backend",
         description: "Ping the backend to verify connection and authentication",
@@ -433,6 +444,24 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
 
   try {
     switch (request.params.name) {
+      case "set_target_environment": {
+        const env = params.env;
+        if (env === "production") {
+          BACKEND_URL = "https://api.homaroma.shop/api";
+        } else {
+          BACKEND_URL = "http://localhost:3051/api";
+        }
+        api.defaults.baseURL = BACKEND_URL;
+        authToken = ""; // reset token so it logs in again on next request
+        return {
+          content: [
+            {
+              type: "text",
+              text: `✅ MCP Server target environment switched to [${env}]. Base URL is now: ${BACKEND_URL}`
+            }
+          ]
+        };
+      }
       case "ping_backend": {
         const res = await api.get("/products?limit=1");
         return { content: [{ type: "text", text: `Connection successful!` }] };
diff --git a/apps/spa/index.html b/apps/spa/index.html
index 6ea120b..f6523b2 100644
--- a/apps/spa/index.html
+++ b/apps/spa/index.html
@@ -7,7 +7,7 @@
     <title>website</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
     <script src="https://cdn.omise.co/omise.js"></script>
   </head>
   <body>
diff --git a/apps/spa/src/App.tsx b/apps/spa/src/App.tsx
index 6a6e8ab..5bf2cff 100644
--- a/apps/spa/src/App.tsx
+++ b/apps/spa/src/App.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import ScrollToTop from './components/ScrollToTop'
 import { initLiff } from './lib/liff'
@@ -23,6 +24,8 @@ import ProfilePage from './pages/ProfilePage'
 import CartDrawer from './components/CartDrawer'
 
 function App() {
+  const { i18n } = useTranslation();
+
   useEffect(() => {
     const liffId = import.meta.env.VITE_LIFF_ID;
     if (liffId) {
@@ -32,6 +35,19 @@ function App() {
     }
   }, []);
 
+  useEffect(() => {
+    const lang = i18n.language;
+    document.body.classList.remove('font-sans-ja', 'font-sans-zh', 'font-sans-ko');
+    
+    if (lang === 'ja') {
+      document.body.classList.add('font-sans-ja');
+    } else if (lang === 'zh') {
+      document.body.classList.add('font-sans-zh');
+    } else if (lang === 'ko') {
+      document.body.classList.add('font-sans-ko');
+    }
+  }, [i18n.language]);
+
   return (
     <BrowserRouter>
       <ScrollToTop />
diff --git a/apps/spa/tailwind.config.js b/apps/spa/tailwind.config.js
index 949739f..d74c232 100644
--- a/apps/spa/tailwind.config.js
+++ b/apps/spa/tailwind.config.js
@@ -9,6 +9,10 @@ export default {
       fontFamily: {
         sans: ['Sarabun', 'sans-serif'],
         heading: ['Prompt', 'sans-serif'],
+        serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'Prompt', 'serif'],
+        'sans-ja': ['"Noto Sans JP"', 'sans-serif'],
+        'sans-zh': ['"Noto Sans SC"', 'sans-serif'],
+        'sans-ko': ['"Noto Sans KR"', 'sans-serif'],
       },
       colors: {
         pop: {