diff --git a/web/package-lock.json b/web/package-lock.json
index 859710d8..41eb09a5 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -114,6 +114,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -603,6 +604,7 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -1723,6 +1725,7 @@
       "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
       "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": "^14.21.3 || >=16"
       },
@@ -2669,6 +2672,7 @@
       "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -2679,6 +2683,7 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2756,6 +2761,7 @@
       "integrity": "sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.52.0",
         "@typescript-eslint/types": "8.52.0",
@@ -3045,6 +3051,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3316,6 +3323,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4232,6 +4240,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6562,6 +6571,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -6758,6 +6768,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6767,6 +6778,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -6786,6 +6798,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -6912,7 +6925,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -7756,6 +7770,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7934,6 +7949,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -8239,6 +8255,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
       "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/web/src/assets/icons/duckcoding.gif b/web/src/assets/icons/duckcoding.gif
new file mode 100644
index 00000000..b8106456
Binary files /dev/null and b/web/src/assets/icons/duckcoding.gif differ
diff --git a/web/src/pages/providers/components/select-type-step.tsx b/web/src/pages/providers/components/select-type-step.tsx
index 94371506..23266ce1 100644
--- a/web/src/pages/providers/components/select-type-step.tsx
+++ b/web/src/pages/providers/components/select-type-step.tsx
@@ -45,17 +45,17 @@ export function SelectTypeStep({
       </div>
 
       <div className="flex-1 overflow-y-auto p-6">
-        <div className="container mx-auto max-w-[1600px] space-y-10">
+        <div className="space-y-10">
           {/* Section: Service Provider */}
           <div className="space-y-4">
             <h3 className="text-lg font-semibold text-foreground border-b border-border pb-2">
               1. Choose Service Provider
             </h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
               <Button
                 onClick={() => onSelectType('antigravity')}
                 variant="ghost"
-                className={`group p-0 rounded-lg border text-left transition-all h-auto ${
+                className={`group p-0 rounded-lg border text-left transition-all h-auto w-full ${
                   formData.type === 'antigravity'
                     ? 'border-provider-antigravity bg-provider-antigravity/10'
                     : 'border-border bg-card hover:bg-muted'
@@ -84,7 +84,7 @@ export function SelectTypeStep({
               <Button
                 onClick={() => onSelectType('custom')}
                 variant="ghost"
-                className={`group p-0 rounded-lg border text-left transition-all h-auto ${
+                className={`group p-0 rounded-lg border text-left transition-all h-auto w-full ${
                   formData.type === 'custom'
                     ? 'border-provider-custom bg-provider-custom/10'
                     : 'border-border bg-card hover:bg-muted'
@@ -124,19 +124,27 @@ export function SelectTypeStep({
                 </h3>
               </div>
 
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 items-start">
                 {/* Empty Template Card */}
                 <Button
                   onClick={onSkipToConfig}
                   variant="ghost"
-                  className="group p-0 rounded-lg border border-dashed border-border bg-card hover:bg-muted transition-all h-auto"
+                  className="text-left group p-0 rounded-lg border border-dashed border-border bg-card hover:bg-muted transition-all h-full w-full"
+                  style={{ minHeight: '140px' }}
                 >
-                  <div className="p-4 flex flex-col gap-3">
-                    <div className="w-10 h-10 rounded-md bg-muted flex items-center justify-center">
-                      <FilePlus size={20} className="text-muted-foreground group-hover:text-primary transition-colors" />
+                  <div className="p-4 flex flex-col gap-3 h-full w-full">
+                    <div className="flex items-center justify-between w-full">
+                      <div
+                        className={`w-10 h-10 rounded-md flex items-center justify-center transition-colors bg-muted group-hover:bg-primary/10`}
+                      >
+                        <FilePlus
+                          size={20}
+                          className="text-muted-foreground group-hover:text-primary transition-colors"
+                        />
+                      </div>
                     </div>
 
-                    <div>
+                    <div className="flex-1">
                       <h4 className="text-body font-semibold text-foreground mb-0.5">
                         Empty Template
                       </h4>
@@ -148,43 +156,53 @@ export function SelectTypeStep({
                 </Button>
 
                 {quickTemplates.map(template => {
-                  const Icon = template.icon === 'grid' ? Grid3X3 : Layers
+                  const Icon =
+                    template.icon === 'duck' ? DuckIcon : template.icon === 'grid' ? Grid3X3 : Layers
                   const isSelected = formData.selectedTemplate === template.id
                   return (
                     <Button
                       key={template.id}
                       onClick={() => onApplyTemplate(template.id)}
                       variant="ghost"
-                      className={`group p-0 rounded-lg border text-left transition-all h-auto ${
+                      className={`group p-0 rounded-lg border text-left transition-all h-full w-full ${
                         isSelected
                           ? 'border-primary bg-primary/10'
                           : 'border-border bg-card hover:bg-muted'
                       }`}
+                      style={{ minHeight: '140px' }}
                     >
-                      <div className="p-4 flex flex-col gap-3">
-                        <div className="flex items-center justify-between">
+                      <div className="p-4 flex flex-col gap-3 h-full w-full">
+                        <div className="flex items-center justify-between w-full">
                           <div
-                            className={`w-10 h-10 rounded-md flex items-center justify-center transition-colors ${
+                            className={`w-10 h-10 rounded-md flex items-center justify-center transition-colors overflow-hidden ${
                               isSelected
                                 ? 'bg-primary/15'
                                 : 'bg-muted group-hover:bg-primary/10'
                             }`}
                           >
-                            <Icon
-                              size={20}
-                              className={
-                                isSelected
-                                  ? 'text-primary'
-                                  : 'text-muted-foreground group-hover:text-primary transition-colors'
-                              }
-                            />
+                            {template.logoUrl ? (
+                              <img
+                                src={template.logoUrl}
+                                alt={template.name}
+                                className="w-full h-full object-contain"
+                              />
+                            ) : (
+                              <Icon
+                                size={20}
+                                className={
+                                  isSelected
+                                    ? 'text-primary'
+                                    : 'text-muted-foreground group-hover:text-primary transition-colors'
+                                }
+                              />
+                            )}
                           </div>
                           {isSelected && (
                             <CheckCircle2 size={18} className="text-primary" />
                           )}
                         </div>
 
-                        <div>
+                        <div className="flex-1">
                           <h4
                             className={`text-body font-semibold mb-0.5 transition-colors ${
                               isSelected ? 'text-primary' : 'text-foreground'
diff --git a/web/src/pages/providers/types.ts b/web/src/pages/providers/types.ts
index 24aea5c2..0c9acd76 100644
--- a/web/src/pages/providers/types.ts
+++ b/web/src/pages/providers/types.ts
@@ -1,5 +1,6 @@
 import type { ClientType } from '@/lib/transport';
 import { getProviderColorVar } from '@/lib/theme';
+import duckcodingLogo from '@/assets/icons/duckcoding.gif';
 
 // Antigravity brand color - 从 CSS 变量获取
 export const ANTIGRAVITY_COLOR = getProviderColorVar('antigravity');
@@ -10,6 +11,7 @@ export type QuickTemplate = {
   name: string;
   description: string;
   icon: 'grid' | 'layers';
+  logoUrl?: string; // 可选的 logo 图片 URL
   supportedClients: ClientType[];
   clientBaseURLs: Partial<Record<ClientType, string>>;
 };
@@ -39,6 +41,19 @@ export const quickTemplates: QuickTemplate[] = [
       gemini: 'https://api.aicodemirror.com/api/gemini',
     },
   },
+  {
+    id: 'duckcoding',
+    name: 'DuckCoding',
+    description: 'Claude + Codex + Gemini',
+    icon: 'grid',
+    logoUrl: duckcodingLogo,
+    supportedClients: ['claude', 'codex', 'gemini'],
+    clientBaseURLs: {
+      claude: 'https://jp.duckcoding.com',
+      codex: 'https://jp.duckcoding.com/v1',
+      gemini: 'https://jp.duckcoding.com',
+    },
+  },
 ];
 
 // Client config