diff --git a/src/components/proxy/ProxyPanel.tsx b/src/components/proxy/ProxyPanel.tsx
index e874e0cdb..1052f2ece 100644
--- a/src/components/proxy/ProxyPanel.tsx
+++ b/src/components/proxy/ProxyPanel.tsx
@@ -7,11 +7,14 @@ import {
   ListOrdered,
   Save,
   Loader2,
+  Zap,
+  Power,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
+import { ToggleRow } from "@/components/ui/toggle-row";
 import { useProxyStatus } from "@/hooks/useProxyStatus";
 import { toast } from "sonner";
 import { useFailoverQueue } from "@/lib/query/failover";
@@ -25,8 +28,21 @@ import {
 } from "@/lib/query/proxy";
 import type { ProxyStatus } from "@/types/proxy";
 import { useTranslation } from "react-i18next";
+import { AnimatePresence, motion } from "framer-motion";
 
-export function ProxyPanel() {
+interface ProxyPanelProps {
+  enableLocalProxy: boolean;
+  onEnableLocalProxyChange: (checked: boolean) => void;
+  onToggleProxy: (checked: boolean) => Promise<void>;
+  isProxyPending: boolean;
+}
+
+export function ProxyPanel({
+  enableLocalProxy,
+  onEnableLocalProxyChange,
+  onToggleProxy,
+  isProxyPending,
+}: ProxyPanelProps) {
   const { t } = useTranslation();
   const { status, isRunning } = useProxyStatus();
 
@@ -183,9 +199,98 @@ export function ProxyPanel() {
 
   return (
     <>
-      <section className="space-y-6">
+      <section className="space-y-4">
+        {/* [1] Enable proxy button on main page — always visible */}
+        <ToggleRow
+          icon={<Zap className="h-4 w-4 text-green-500" />}
+          title={t("settings.advanced.proxy.enableFeature")}
+          description={t("settings.advanced.proxy.enableFeatureDescription")}
+          checked={enableLocalProxy}
+          onCheckedChange={onEnableLocalProxyChange}
+        />
+
+        {/* [2] Proxy service toggle — always visible */}
+        <div className="flex items-center justify-between rounded-xl border border-border bg-card/50 p-4 transition-colors hover:bg-muted/50">
+          <div className="flex items-center gap-3">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-background ring-1 ring-border">
+              <Power className="h-4 w-4 text-green-500" />
+            </div>
+            <div className="space-y-1">
+              <p className="text-sm font-medium leading-none">
+                {t("proxyConfig.proxyEnabled", {
+                  defaultValue: "代理服务",
+                })}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {isRunning
+                  ? t("settings.advanced.proxy.running")
+                  : t("settings.advanced.proxy.stopped")}
+              </p>
+            </div>
+          </div>
+          <Switch
+            checked={isRunning}
+            onCheckedChange={onToggleProxy}
+            disabled={isProxyPending}
+          />
+        </div>
+
+        {/* [3] App takeover switches — animated, visible only when proxy is running */}
+        <AnimatePresence>
+          {isRunning && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: "auto" }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.25, ease: "easeInOut" }}
+              className="overflow-hidden"
+            >
+              <div className="rounded-xl border-2 border-primary/20 bg-primary/5 p-4 space-y-3">
+                <p className="text-xs font-medium text-primary">
+                  {t("proxyConfig.appTakeover", {
+                    defaultValue: "应用接管",
+                  })}
+                </p>
+                <div className="grid gap-2 sm:grid-cols-3">
+                  {(["claude", "codex", "gemini"] as const).map((appType) => {
+                    const isEnabled =
+                      takeoverStatus?.[
+                        appType as keyof typeof takeoverStatus
+                      ] ?? false;
+                    return (
+                      <div
+                        key={appType}
+                        className="flex items-center justify-between rounded-md border border-primary/20 bg-background/60 px-3 py-2"
+                      >
+                        <span className="text-sm font-medium capitalize">
+                          {appType}
+                        </span>
+                        <Switch
+                          checked={isEnabled}
+                          onCheckedChange={(checked) =>
+                            handleTakeoverChange(appType, checked)
+                          }
+                          disabled={setTakeoverForApp.isPending}
+                        />
+                      </div>
+                    );
+                  })}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {t("proxy.takeover.hint", {
+                    defaultValue:
+                      "选择要接管的应用，启用后该应用的请求将通过本地代理转发",
+                  })}
+                </p>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Running state: service info + stats */}
         {isRunning && status ? (
           <div className="space-y-6">
+            {/* [4] Running info: address + current provider */}
             <div className="rounded-lg border border-border bg-muted/40 p-4 space-y-4">
               <div>
                 <p className="text-xs text-muted-foreground mb-2">
@@ -263,41 +368,7 @@ export function ProxyPanel() {
                 )}
               </div>
 
-              {/* 应用接管开关 */}
-              <div className="pt-3 border-t border-border space-y-3">
-                <p className="text-xs text-muted-foreground">
-                  {t("proxyConfig.appTakeover", {
-                    defaultValue: "应用接管",
-                  })}
-                </p>
-                <div className="grid gap-2 sm:grid-cols-3">
-                  {(["claude", "codex", "gemini"] as const).map((appType) => {
-                    const isEnabled =
-                      takeoverStatus?.[
-                        appType as keyof typeof takeoverStatus
-                      ] ?? false;
-                    return (
-                      <div
-                        key={appType}
-                        className="flex items-center justify-between rounded-md border border-border bg-background/60 px-3 py-2"
-                      >
-                        <span className="text-sm font-medium capitalize">
-                          {appType}
-                        </span>
-                        <Switch
-                          checked={isEnabled}
-                          onCheckedChange={(checked) =>
-                            handleTakeoverChange(appType, checked)
-                          }
-                          disabled={setTakeoverForApp.isPending}
-                        />
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-
-              {/* 日志记录开关 */}
+              {/* [5] Logging toggle */}
               <div className="pt-3 border-t border-border">
                 <div className="flex items-center justify-between rounded-md border border-border bg-background/60 px-3 py-2">
                   <div className="space-y-0.5">
@@ -320,7 +391,7 @@ export function ProxyPanel() {
                 </div>
               </div>
 
-              {/* 供应商队列 - 按应用类型分组展示 */}
+              {/* [6] Provider queues */}
               {(claudeQueue.length > 0 ||
                 codexQueue.length > 0 ||
                 geminiQueue.length > 0) && (
@@ -332,7 +403,6 @@ export function ProxyPanel() {
                     </p>
                   </div>
 
-                  {/* Claude 队列 */}
                   {claudeQueue.length > 0 && (
                     <ProviderQueueGroup
                       appType="claude"
@@ -345,7 +415,6 @@ export function ProxyPanel() {
                     />
                   )}
 
-                  {/* Codex 队列 */}
                   {codexQueue.length > 0 && (
                     <ProviderQueueGroup
                       appType="codex"
@@ -358,7 +427,6 @@ export function ProxyPanel() {
                     />
                   )}
 
-                  {/* Gemini 队列 */}
                   {geminiQueue.length > 0 && (
                     <ProviderQueueGroup
                       appType="gemini"
@@ -374,6 +442,7 @@ export function ProxyPanel() {
               )}
             </div>
 
+            {/* [7] Stats cards */}
             <div className="grid gap-3 md:grid-cols-4">
               <StatCard
                 icon={<Activity className="h-4 w-4" />}
@@ -408,7 +477,7 @@ export function ProxyPanel() {
           </div>
         ) : (
           <div className="space-y-6">
-            {/* 基础设置 - 监听地址/端口 */}
+            {/* [8] Basic settings — address/port (only when stopped) */}
             <div className="rounded-lg border border-border bg-muted/40 p-4 space-y-4">
               <div>
                 <h4 className="text-sm font-semibold">
@@ -496,7 +565,7 @@ export function ProxyPanel() {
               </div>
             </div>
 
-            {/* 代理服务已停止提示 */}
+            {/* Stopped hint */}
             <div className="text-center py-6 text-muted-foreground">
               <div className="mx-auto w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
                 <Server className="h-8 w-8" />
@@ -508,7 +577,7 @@ export function ProxyPanel() {
               </p>
               <p className="text-sm text-muted-foreground">
                 {t("proxy.panel.stoppedDescription", {
-                  defaultValue: "使用右上角开关即可启动服务",
+                  defaultValue: "使用上方开关即可启动服务",
                 })}
               </p>
             </div>
diff --git a/src/components/settings/ProxyTabContent.tsx b/src/components/settings/ProxyTabContent.tsx
index 825f34b3e..3d99aae35 100644
--- a/src/components/settings/ProxyTabContent.tsx
+++ b/src/components/settings/ProxyTabContent.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { Server, Activity, ChevronDown, Zap, Globe } from "lucide-react";
+import { Server, Activity, Zap, Globe } from "lucide-react";
 import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import {
@@ -10,8 +9,6 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Switch } from "@/components/ui/switch";
-import { ToggleRow } from "@/components/ui/toggle-row";
 import { Badge } from "@/components/ui/badge";
 import { ProxyPanel } from "@/components/proxy";
 import { AutoFailoverConfigPanel } from "@/components/proxy/AutoFailoverConfigPanel";
@@ -76,28 +73,22 @@ export function ProxyTabContent({
         {/* Local Proxy */}
         <AccordionItem
           value="proxy"
-          className="rounded-xl glass-card overflow-hidden [&[data-state=open]>.accordion-header]:bg-muted/50"
+          className="rounded-xl glass-card overflow-hidden"
         >
-          <AccordionPrimitive.Header className="accordion-header flex items-center justify-between px-6 py-4 hover:bg-muted/50">
-            <AccordionPrimitive.Trigger className="flex flex-1 items-center justify-between hover:no-underline [&[data-state=open]>svg]:rotate-180">
-              <div className="flex items-center gap-3">
-                <Server className="h-5 w-5 text-green-500" />
-                <div className="text-left">
-                  <h3 className="text-base font-semibold">
-                    {t("settings.advanced.proxy.title")}
-                  </h3>
-                  <p className="text-sm text-muted-foreground font-normal">
-                    {t("settings.advanced.proxy.description")}
-                  </p>
-                </div>
+          <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
+            <div className="flex items-center gap-3">
+              <Server className="h-5 w-5 text-green-500" />
+              <div className="text-left">
+                <h3 className="text-base font-semibold">
+                  {t("settings.advanced.proxy.title")}
+                </h3>
+                <p className="text-sm text-muted-foreground font-normal">
+                  {t("settings.advanced.proxy.description")}
+                </p>
               </div>
-              <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-            </AccordionPrimitive.Trigger>
-
-            <div className="flex items-center gap-4 pl-4">
               <Badge
                 variant={isRunning ? "default" : "secondary"}
-                className="gap-1.5 h-6"
+                className="gap-1.5 h-6 ml-auto mr-2"
               >
                 <Activity
                   className={`h-3 w-3 ${isRunning ? "animate-pulse" : ""}`}
@@ -106,28 +97,17 @@ export function ProxyTabContent({
                   ? t("settings.advanced.proxy.running")
                   : t("settings.advanced.proxy.stopped")}
               </Badge>
-              <Switch
-                checked={isRunning}
-                onCheckedChange={handleToggleProxy}
-                disabled={isProxyPending}
-              />
             </div>
-          </AccordionPrimitive.Header>
+          </AccordionTrigger>
           <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
-            <ToggleRow
-              icon={<Zap className="h-4 w-4 text-green-500" />}
-              title={t("settings.advanced.proxy.enableFeature")}
-              description={t(
-                "settings.advanced.proxy.enableFeatureDescription",
-              )}
-              checked={settings?.enableLocalProxy ?? false}
-              onCheckedChange={(checked) =>
+            <ProxyPanel
+              enableLocalProxy={settings?.enableLocalProxy ?? false}
+              onEnableLocalProxyChange={(checked) =>
                 onAutoSave({ enableLocalProxy: checked })
               }
+              onToggleProxy={handleToggleProxy}
+              isProxyPending={isProxyPending}
             />
-            <div className="mt-4">
-              <ProxyPanel />
-            </div>
           </AccordionContent>
         </AccordionItem>
 
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 6ed487f3d..fccbaa456 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1582,7 +1582,7 @@
       "currentProvider": "Current Provider:",
       "waitingFirstRequest": "Current Provider: Waiting for first request...",
       "stoppedTitle": "Proxy Service Stopped",
-      "stoppedDescription": "Use the toggle in the top right to start the service",
+      "stoppedDescription": "Use the toggle above to start the service",
       "openSettings": "Configure Proxy Service",
       "stats": {
         "activeConnections": "Active Connections",
@@ -1673,6 +1673,12 @@
       "restartRequired": "Restart proxy service for address or port changes to take effect"
     },
     "switchFailed": "Switch failed: {{error}}",
+    "takeover": {
+      "hint": "Select apps to take over — once enabled, requests from that app will be routed through the local proxy",
+      "enabled": "{{app}} takeover enabled",
+      "disabled": "{{app}} takeover disabled",
+      "failed": "Failed to toggle takeover"
+    },
     "failover": {
       "proxyRequired": "Proxy service must be started to configure failover",
       "autoSwitch": "Auto Failover",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index 0b985a535..f6b5508d6 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -1582,7 +1582,7 @@
       "currentProvider": "現在のプロバイダー:",
       "waitingFirstRequest": "現在のプロバイダー: 最初のリクエスト待ち...",
       "stoppedTitle": "プロキシサービス停止中",
-      "stoppedDescription": "右上のトグルでサービスを開始できます",
+      "stoppedDescription": "上のトグルでサービスを開始できます",
       "openSettings": "プロキシサービスを設定",
       "stats": {
         "activeConnections": "アクティブ接続",
@@ -1673,6 +1673,12 @@
       "restartRequired": "アドレスまたはポートの変更を反映するにはプロキシサービスの再起動が必要です"
     },
     "switchFailed": "切り替えに失敗しました: {{error}}",
+    "takeover": {
+      "hint": "テイクオーバーするアプリを選択します。有効にすると、そのアプリのリクエストはローカルプロキシ経由で転送されます",
+      "enabled": "{{app}} テイクオーバー有効",
+      "disabled": "{{app}} テイクオーバー無効",
+      "failed": "テイクオーバーの切り替えに失敗しました"
+    },
     "failover": {
       "proxyRequired": "フェイルオーバーを設定するには、プロキシサービスを先に起動する必要があります",
       "autoSwitch": "自動フェイルオーバー",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index d4351bdf6..0fe3901c3 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -1582,7 +1582,7 @@
       "currentProvider": "当前 Provider：",
       "waitingFirstRequest": "当前 Provider：等待首次请求…",
       "stoppedTitle": "代理服务已停止",
-      "stoppedDescription": "使用右上角开关即可启动服务",
+      "stoppedDescription": "使用上方开关即可启动服务",
       "openSettings": "配置代理服务",
       "stats": {
         "activeConnections": "活跃连接",
@@ -1673,6 +1673,12 @@
       "restartRequired": "修改地址或端口后需要重启代理服务才能生效"
     },
     "switchFailed": "切换失败: {{error}}",
+    "takeover": {
+      "hint": "选择要接管的应用，启用后该应用的请求将通过本地代理转发",
+      "enabled": "{{app}} 接管已启用",
+      "disabled": "{{app}} 接管已关闭",
+      "failed": "切换接管状态失败"
+    },
     "failover": {
       "proxyRequired": "需要先启动代理服务才能配置故障转移",
       "autoSwitch": "自动故障转移",