diff --git a/web/frontend/src/components/channels/channel-forms/discord-form.tsx b/web/frontend/src/components/channels/channel-forms/discord-form.tsx
index e59d9483a..ec77beaa5 100644
--- a/web/frontend/src/components/channels/channel-forms/discord-form.tsx
+++ b/web/frontend/src/components/channels/channel-forms/discord-form.tsx
@@ -2,11 +2,7 @@ import { useTranslation } from "react-i18next"
 
 import type { ChannelConfig } from "@/api/channels"
 import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder"
-import {
-  Field,
-  KeyInput,
-  SwitchCardField,
-} from "@/components/models/shared-form"
+import { Field, KeyInput, SwitchCardField } from "@/components/shared-form"
 import { Input } from "@/components/ui/input"
 
 interface DiscordFormProps {
diff --git a/web/frontend/src/components/channels/channel-forms/feishu-form.tsx b/web/frontend/src/components/channels/channel-forms/feishu-form.tsx
index 2fb4a0153..2262b7ea5 100644
--- a/web/frontend/src/components/channels/channel-forms/feishu-form.tsx
+++ b/web/frontend/src/components/channels/channel-forms/feishu-form.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next"
 
 import type { ChannelConfig } from "@/api/channels"
 import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder"
-import { Field, KeyInput } from "@/components/models/shared-form"
+import { Field, KeyInput } from "@/components/shared-form"
 import { Input } from "@/components/ui/input"
 
 interface FeishuFormProps {
diff --git a/web/frontend/src/components/channels/channel-forms/generic-form.tsx b/web/frontend/src/components/channels/channel-forms/generic-form.tsx
index 57cd1bd06..b120fa612 100644
--- a/web/frontend/src/components/channels/channel-forms/generic-form.tsx
+++ b/web/frontend/src/components/channels/channel-forms/generic-form.tsx
@@ -2,11 +2,7 @@ import { useTranslation } from "react-i18next"
 
 import type { ChannelConfig } from "@/api/channels"
 import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder"
-import {
-  Field,
-  KeyInput,
-  SwitchCardField,
-} from "@/components/models/shared-form"
+import { Field, KeyInput, SwitchCardField } from "@/components/shared-form"
 import { Input } from "@/components/ui/input"
 
 interface GenericFormProps {
diff --git a/web/frontend/src/components/channels/channel-forms/slack-form.tsx b/web/frontend/src/components/channels/channel-forms/slack-form.tsx
index 811ee5128..b2ad7ce48 100644
--- a/web/frontend/src/components/channels/channel-forms/slack-form.tsx
+++ b/web/frontend/src/components/channels/channel-forms/slack-form.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next"
 
 import type { ChannelConfig } from "@/api/channels"
 import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder"
-import { Field, KeyInput } from "@/components/models/shared-form"
+import { Field, KeyInput } from "@/components/shared-form"
 import { Input } from "@/components/ui/input"
 
 interface SlackFormProps {
diff --git a/web/frontend/src/components/channels/channel-forms/telegram-form.tsx b/web/frontend/src/components/channels/channel-forms/telegram-form.tsx
index 3b475bcff..d01e7d3eb 100644
--- a/web/frontend/src/components/channels/channel-forms/telegram-form.tsx
+++ b/web/frontend/src/components/channels/channel-forms/telegram-form.tsx
@@ -2,11 +2,7 @@ import { useTranslation } from "react-i18next"
 
 import type { ChannelConfig } from "@/api/channels"
 import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder"
-import {
-  Field,
-  KeyInput,
-  SwitchCardField,
-} from "@/components/models/shared-form"
+import { Field, KeyInput, SwitchCardField } from "@/components/shared-form"
 import { Input } from "@/components/ui/input"
 
 interface TelegramFormProps {
diff --git a/web/frontend/src/components/models/add-model-sheet.tsx b/web/frontend/src/components/models/add-model-sheet.tsx
index b5c96dedf..c61b59463 100644
--- a/web/frontend/src/components/models/add-model-sheet.tsx
+++ b/web/frontend/src/components/models/add-model-sheet.tsx
@@ -3,6 +3,12 @@ import { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import { addModel, setDefaultModel } from "@/api/models"
+import {
+  AdvancedSection,
+  Field,
+  KeyInput,
+  SwitchCardField,
+} from "@/components/shared-form"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -13,9 +19,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet"
-import { Switch } from "@/components/ui/switch"
-
-import { AdvancedSection, Field, KeyInput } from "./shared-form"
 
 interface AddForm {
   modelName: string
@@ -187,21 +190,12 @@ export function AddModelSheet({ open, onClose, onSaved }: AddModelSheetProps) {
               />
             </Field>
 
-            <div className="space-y-2">
-              <div className="border-input flex h-9 items-center justify-between rounded-md border px-2.5">
-                <span className="text-sm font-medium">
-                  {t("models.defaultOnSave.label")}
-                </span>
-                <Switch
-                  checked={setAsDefault}
-                  onCheckedChange={setSetAsDefault}
-                  aria-label={t("models.defaultOnSave.label")}
-                />
-              </div>
-              <p className="text-muted-foreground text-xs">
-                {t("models.defaultOnSave.description")}
-              </p>
-            </div>
+            <SwitchCardField
+              label={t("models.defaultOnSave.label")}
+              hint={t("models.defaultOnSave.description")}
+              checked={setAsDefault}
+              onCheckedChange={setSetAsDefault}
+            />
 
             <AdvancedSection>
               <Field
diff --git a/web/frontend/src/components/models/edit-model-sheet.tsx b/web/frontend/src/components/models/edit-model-sheet.tsx
index 543e300bc..cd8d2a41c 100644
--- a/web/frontend/src/components/models/edit-model-sheet.tsx
+++ b/web/frontend/src/components/models/edit-model-sheet.tsx
@@ -3,6 +3,12 @@ import { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import { type ModelInfo, setDefaultModel, updateModel } from "@/api/models"
+import {
+  AdvancedSection,
+  Field,
+  KeyInput,
+  SwitchCardField,
+} from "@/components/shared-form"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -13,9 +19,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet"
-import { Switch } from "@/components/ui/switch"
-
-import { AdvancedSection, Field, KeyInput } from "./shared-form"
 
 interface EditForm {
   apiKey: string
@@ -168,21 +171,12 @@ export function EditModelSheet({
               />
             </Field>
 
-            <div className="space-y-2">
-              <div className="border-input flex h-9 items-center justify-between rounded-md border px-2.5">
-                <span className="text-sm font-medium">
-                  {t("models.defaultOnSave.label")}
-                </span>
-                <Switch
-                  checked={setAsDefault}
-                  onCheckedChange={setSetAsDefault}
-                  aria-label={t("models.defaultOnSave.label")}
-                />
-              </div>
-              <p className="text-muted-foreground text-xs">
-                {t("models.defaultOnSave.description")}
-              </p>
-            </div>
+            <SwitchCardField
+              label={t("models.defaultOnSave.label")}
+              hint={t("models.defaultOnSave.description")}
+              checked={setAsDefault}
+              onCheckedChange={setSetAsDefault}
+            />
 
             <AdvancedSection>
               <Field
diff --git a/web/frontend/src/components/models/shared-form.tsx b/web/frontend/src/components/shared-form.tsx
similarity index 100%
rename from web/frontend/src/components/models/shared-form.tsx
rename to web/frontend/src/components/shared-form.tsx