diff --git a/src/components/JsonEditor.tsx b/src/components/JsonEditor.tsx
index 6da1f8c..d24184a 100644
--- a/src/components/JsonEditor.tsx
+++ b/src/components/JsonEditor.tsx
@@ -86,6 +86,14 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
           "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
         fontSize: "14px",
       },
+      ".cm-editor": {
+        border: "1px solid hsl(var(--border))",
+        borderRadius: "0.5rem",
+      },
+      ".cm-editor.cm-focused": {
+        outline: "none",
+        borderColor: "hsl(var(--primary))",
+      },
     });
 
     const extensions = [
diff --git a/src/components/settings/AboutSection.tsx b/src/components/settings/AboutSection.tsx
index 435f626..8b86082 100644
--- a/src/components/settings/AboutSection.tsx
+++ b/src/components/settings/AboutSection.tsx
@@ -140,7 +140,7 @@ export function AboutSection({ isPortable }: AboutSectionProps) {
         </p>
       </header>
 
-      <div className="space-y-4 rounded-lg border border-border p-4">
+      <div className="space-y-4 rounded-lg border border-border-default p-4">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
           <div className="space-y-1">
             <p className="text-sm font-medium text-foreground">CC Switch</p>
diff --git a/src/components/settings/ImportExportSection.tsx b/src/components/settings/ImportExportSection.tsx
index 44dba27..56d6b1d 100644
--- a/src/components/settings/ImportExportSection.tsx
+++ b/src/components/settings/ImportExportSection.tsx
@@ -51,7 +51,7 @@ export function ImportExportSection({
         </p>
       </header>
 
-      <div className="space-y-3 rounded-lg border border-border p-4">
+      <div className="space-y-3 rounded-lg border border-border-default p-4">
         <Button
           type="button"
           className="w-full"
@@ -138,7 +138,7 @@ function ImportStatusMessage({
 
   if (status === "importing") {
     return (
-      <div className={`${baseClass} border-border bg-muted/40`}>
+      <div className={`${baseClass} border-border-default bg-muted/40`}>
         <Loader2 className="mt-0.5 h-4 w-4 animate-spin text-muted-foreground" />
         <div>
           <p className="font-medium">{t("settings.importing")}</p>
diff --git a/src/components/settings/LanguageSettings.tsx b/src/components/settings/LanguageSettings.tsx
index 56da518..dd86400 100644
--- a/src/components/settings/LanguageSettings.tsx
+++ b/src/components/settings/LanguageSettings.tsx
@@ -18,7 +18,7 @@ export function LanguageSettings({ value, onChange }: LanguageSettingsProps) {
           {t("settings.languageHint")}
         </p>
       </header>
-      <div className="inline-flex gap-1 rounded-md border border-border bg-background p-1">
+      <div className="inline-flex gap-1 rounded-md border border-border-default bg-background p-1">
         <LanguageButton active={value === "zh"} onClick={() => onChange("zh")}>
           {t("settings.languageOptionChinese")}
         </LanguageButton>
diff --git a/src/components/settings/ThemeSettings.tsx b/src/components/settings/ThemeSettings.tsx
index 1f0e7ce..7dd3f39 100644
--- a/src/components/settings/ThemeSettings.tsx
+++ b/src/components/settings/ThemeSettings.tsx
@@ -16,7 +16,7 @@ export function ThemeSettings() {
           {t("settings.themeHint")}
         </p>
       </header>
-      <div className="inline-flex gap-1 rounded-md border border-border bg-background p-1">
+      <div className="inline-flex gap-1 rounded-md border border-border-default bg-background p-1">
         <ThemeButton
           active={theme === "light"}
           onClick={() => setTheme("light")}
diff --git a/src/components/settings/WindowSettings.tsx b/src/components/settings/WindowSettings.tsx
index cb6e19f..94ec79a 100644
--- a/src/components/settings/WindowSettings.tsx
+++ b/src/components/settings/WindowSettings.tsx
@@ -52,7 +52,7 @@ function ToggleRow({
   onCheckedChange,
 }: ToggleRowProps) {
   return (
-    <div className="flex items-start justify-between gap-4 rounded-lg border border-border p-4">
+    <div className="flex items-start justify-between gap-4 rounded-lg border border-border-default p-4">
       <div className="space-y-1">
         <p className="text-sm font-medium leading-none">{title}</p>
         {description ? (
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index d658a85..37cb41c 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -78,7 +78,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left px-6 py-5 border-b border-border bg-muted/20 flex-shrink-0",
+      "flex flex-col space-y-1.5 text-center sm:text-left px-6 py-5 border-b border-border-default bg-muted/20 flex-shrink-0",
       className,
     )}
     {...props}
@@ -92,7 +92,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:items-center px-6 py-5 border-t border-border bg-muted/20 flex-shrink-0",
+      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:items-center px-6 py-5 border-t border-border-default bg-muted/20 flex-shrink-0",
       className,
     )}
     {...props}