From 6b5e84b7d70ceb8d2ca566cde6ee757d9d792256 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Mon, 20 Apr 2026 15:01:33 +0800
Subject: [PATCH] style: update UI components to use white background and
 consistent border radius

- Change dialog surfaces, drawers, and confirm dialogs from off-white (#F4F3EB) to white background
- Standardize border radius from 3xl/36px to 2xl across multiple components
- Update default setting view from 'account' to 'general' for better user experience
- Adjust input field heights and backgrounds for improved visual consistency
---
 src/pages/Agents/components/AddAgentDialog.tsx         |  2 +-
 src/pages/Agents/components/AgentSettingsDialog.tsx    |  6 +++---
 src/pages/Agents/components/AgentsConfirmDialog.tsx    |  2 +-
 src/pages/Agents/components/AgentsDialogSurface.tsx    |  2 +-
 src/pages/Agents/index.tsx                             |  8 ++++----
 src/pages/Cron/index.tsx                               | 10 +++++-----
 src/pages/Home/components/ConversationDeleteDialog.tsx |  2 +-
 src/pages/Home/components/DialogSurface.tsx            |  2 +-
 .../Knowledge/components/KnowledgeConfirmDialog.tsx    |  2 +-
 src/pages/Knowledge/components/KnowledgePageHeader.tsx |  4 ++--
 src/pages/Knowledge/index.tsx                          |  2 +-
 src/pages/Models/components/DialogSurface.tsx          |  2 +-
 src/pages/Models/components/ProviderEditorDialog.tsx   |  4 ++--
 src/pages/Scripts/components/ScriptDialogs.tsx         |  2 +-
 src/pages/Setting/index.tsx                            |  2 +-
 src/pages/Skills/components/MarketplaceDrawer.tsx      |  2 +-
 src/pages/Skills/components/SkillDetailDrawer.tsx      |  4 ++--
 17 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/pages/Agents/components/AddAgentDialog.tsx b/src/pages/Agents/components/AddAgentDialog.tsx
index e1296d4..390209b 100644
--- a/src/pages/Agents/components/AddAgentDialog.tsx
+++ b/src/pages/Agents/components/AddAgentDialog.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import AgentsDialogSurface from './AgentsDialogSurface';
 
 const INPUT_CLASS_NAME = [
-  'h-[88px] w-full rounded-[26px] border border-black/10 bg-[#F8F4EC] px-7',
+  'h-[44px] w-full rounded-xl border border-black/10 bg-white px-7',
   'text-[22px] text-[#171717] outline-none transition-colors placeholder:text-[#9A958C]',
   'focus:border-black/20 dark:border-white/10 dark:bg-[#222225] dark:text-[#f3f4f6] dark:placeholder:text-gray-500',
 ].join(' ');
diff --git a/src/pages/Agents/components/AgentSettingsDialog.tsx b/src/pages/Agents/components/AgentSettingsDialog.tsx
index 94c81a4..c8d8c4e 100644
--- a/src/pages/Agents/components/AgentSettingsDialog.tsx
+++ b/src/pages/Agents/components/AgentSettingsDialog.tsx
@@ -15,7 +15,7 @@ import qqIcon from '../../../assets/channels/qq.svg';
 import AgentsConfirmDialog from './AgentsConfirmDialog';
 
 const inputClasses = [
-  'h-[44px] flex-1 rounded-xl border border-black/10 bg-[#F8F4EC] px-4 text-[14px] text-[#171717]',
+  'h-[44px] flex-1 rounded-xl border border-black/10 bg-white px-4 text-[14px] text-[#171717]',
   'outline-none transition-colors placeholder:text-[#99A0AE] focus:border-black/20',
   'disabled:cursor-not-allowed disabled:opacity-65 dark:border-white/10 dark:bg-[#222225] dark:text-[#f3f4f6] dark:placeholder:text-gray-500 dark:focus:border-white/20',
 ].join(' ');
@@ -318,7 +318,7 @@ function AgentModelDialog({
   return (
     <>
       <div className="fixed inset-0 z-60 flex items-center justify-center bg-black/50 p-4">
-        <div className="w-full max-w-xl overflow-hidden rounded-3xl bg-[#f3f1e9] shadow-2xl dark:bg-[#1f1f22]">
+        <div className="w-full max-w-xl overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-[#1f1f22]">
           <div className="flex items-start justify-between gap-4 px-6 pb-2 pt-6">
             <div>
               <h3
@@ -537,7 +537,7 @@ export default function AgentSettingsDialog({
   return (
     <>
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-        <div className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-3xl bg-[#f3f1e9] shadow-2xl dark:bg-[#1f1f22]">
+        <div className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-[#1f1f22]">
           <div className="flex shrink-0 flex-row items-start justify-between px-6 pb-2 pt-6">
             <div>
               <h2
diff --git a/src/pages/Agents/components/AgentsConfirmDialog.tsx b/src/pages/Agents/components/AgentsConfirmDialog.tsx
index 04ec2c0..77433ad 100644
--- a/src/pages/Agents/components/AgentsConfirmDialog.tsx
+++ b/src/pages/Agents/components/AgentsConfirmDialog.tsx
@@ -32,7 +32,7 @@ export default function AgentsConfirmDialog({
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 z-60 bg-black/45 backdrop-blur-[2px]" />
         <Dialog.Content
-          className="fixed left-1/2 top-1/2 z-70 w-[calc(100vw-32px)] max-w-126 -translate-x-1/2 -translate-y-1/2 rounded-3xl bg-[#F4F3EB] p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
+          className="fixed left-1/2 top-1/2 z-70 w-[calc(100vw-32px)] max-w-126 -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white  p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
           onEscapeKeyDown={(event) => {
             if (busy) {
               event.preventDefault();
diff --git a/src/pages/Agents/components/AgentsDialogSurface.tsx b/src/pages/Agents/components/AgentsDialogSurface.tsx
index 4a56486..191b5cd 100644
--- a/src/pages/Agents/components/AgentsDialogSurface.tsx
+++ b/src/pages/Agents/components/AgentsDialogSurface.tsx
@@ -26,7 +26,7 @@ export default function AgentsDialogSurface({
     >
       <div
         className={[
-          'w-full overflow-hidden rounded-[36px] bg-[#F4F0E8] shadow-[0_30px_80px_rgba(15,23,42,0.18)] dark:bg-[#1f1f22]',
+          'w-full overflow-hidden rounded-2xl bg-white  shadow-[0_30px_80px_rgba(15,23,42,0.18)] dark:bg-[#1f1f22]',
           widthClassName,
         ].join(' ')}
         onClick={(event) => event.stopPropagation()}
diff --git a/src/pages/Agents/index.tsx b/src/pages/Agents/index.tsx
index 383f3ce..854381f 100644
--- a/src/pages/Agents/index.tsx
+++ b/src/pages/Agents/index.tsx
@@ -388,7 +388,7 @@ export default function AgentsPage() {
           {feedback ? (
             <div
               className={[
-                'rounded-3xl border px-5 py-4 text-[15px]',
+                'rounded-2xl border px-5 py-4 text-[15px]',
                 feedback.tone === 'success' ? 'border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300' : '',
                 feedback.tone === 'error' ? 'border-red-500/25 bg-red-500/10 text-red-700 dark:text-red-300' : '',
                 feedback.tone === 'info' ? 'border-black/10 bg-white text-[#525866] dark:border-gray-700 dark:bg-[#222225] dark:text-gray-300' : '',
@@ -399,7 +399,7 @@ export default function AgentsPage() {
           ) : null}
 
           {warning ? (
-            <div className="rounded-3xl border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
+            <div className="rounded-2xl border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
               <div className="flex items-start gap-3">
                 <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
                 <span>{warning}</span>
@@ -408,7 +408,7 @@ export default function AgentsPage() {
           ) : null}
 
           {error ? (
-            <div className="rounded-3xl border border-red-500/25 bg-red-500/10 px-5 py-4 text-[15px] text-red-700 dark:text-red-300">
+            <div className="rounded-2xl border border-red-500/25 bg-red-500/10 px-5 py-4 text-[15px] text-red-700 dark:text-red-300">
               <div className="flex items-start gap-3">
                 <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
                 <span>{message('agents.errorPrefix', '加载 Agents 失败：{error}', { error })}</span>
@@ -417,7 +417,7 @@ export default function AgentsPage() {
           ) : null}
 
           {providerError ? (
-            <div className="rounded-3xl border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
+            <div className="rounded-2xl border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
               <div className="flex items-start gap-3">
                 <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
                 <span>{`${message('agents.settings.providerLoadErrorPrefix', '加载 Provider 账号失败：')}${providerError}`}</span>
diff --git a/src/pages/Cron/index.tsx b/src/pages/Cron/index.tsx
index b2534f0..38ad3e3 100644
--- a/src/pages/Cron/index.tsx
+++ b/src/pages/Cron/index.tsx
@@ -1097,7 +1097,7 @@ function StatCard({ label, value, tone, icon: Icon }: StatCardProps) {
           : 'bg-[#E8E6DE] text-[#7A7668] dark:bg-[#2a2a2d] dark:text-gray-400';
 
   return (
-    <div className="min-h-[130px] rounded-[24px] border border-transparent bg-[#F4F3EB]/60 p-5 transition-colors hover:bg-[#F4F3EB] dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:hover:bg-[#222225]">
+    <div className="min-h-[130px] rounded-[24px] border border-transparent bg-white /60 p-5 transition-colors hover:bg-white  dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:hover:bg-[#222225]">
       <div className="flex items-center justify-between">
         <div className={cn('flex h-11 w-11 items-center justify-center rounded-full', iconWrapperClass)}>
           <Icon className="h-5 w-5" />
@@ -1193,7 +1193,7 @@ function CronJobCard({
           <p className="line-clamp-2 text-[13.5px] leading-[1.5] text-[#525866] dark:text-gray-400">{job.message}</p>
         </div>
 
-        <div className="mb-3 grid gap-2 rounded-2xl bg-[#F4F3EB]/70 px-3.5 py-3 text-[12.5px] dark:bg-[#222225]">
+        <div className="mb-3 grid gap-2 rounded-2xl bg-white /70 px-3.5 py-3 text-[12.5px] dark:bg-[#222225]">
           <div className="flex items-start gap-2 text-[#525866] dark:text-gray-400">
             <BotIcon className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[#99A0AE] dark:text-gray-500" />
             <span className="min-w-0">
@@ -1548,8 +1548,8 @@ function CronTaskDialog({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4 backdrop-blur-[1px]">
-      <div className="max-h-[calc(100vh-48px)] w-full max-w-[720px] overflow-hidden rounded-[20px] bg-[#F4F3EB] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]">
-        <div className="flex items-start justify-between border-b border-black/5 bg-[#F4F3EB] px-8 py-6 dark:border-[#2a2a2d] dark:bg-[#1f1f22]">
+      <div className="max-h-[calc(100vh-48px)] w-full max-w-[720px] overflow-hidden rounded-[20px] bg-white  shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]">
+        <div className="flex items-start justify-between border-b border-black/5 bg-white  px-8 py-6 dark:border-[#2a2a2d] dark:bg-[#1f1f22]">
           <div>
             <h2
               className="mb-2 text-[24px] font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6]"
@@ -2149,7 +2149,7 @@ export default function CronPage() {
                 </div>
 
                 {jobs.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center rounded-3xl border border-transparent bg-[#F4F3EB]/40 py-20 text-[#525866] dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:text-gray-400">
+                  <div className="flex flex-col items-center justify-center rounded-2xl border border-transparent bg-white /40 py-20 text-[#525866] dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:text-gray-400">
                     <ClockIcon className="mb-4 h-10 w-10 opacity-50" />
                     <h3 className="mb-2 text-lg font-medium text-[#171717] dark:text-[#f3f4f6]">还没有定时任务</h3>
                     <p className="mb-6 max-w-md text-center text-[14px]">
diff --git a/src/pages/Home/components/ConversationDeleteDialog.tsx b/src/pages/Home/components/ConversationDeleteDialog.tsx
index f354e66..13fda4e 100644
--- a/src/pages/Home/components/ConversationDeleteDialog.tsx
+++ b/src/pages/Home/components/ConversationDeleteDialog.tsx
@@ -27,7 +27,7 @@ export default function ConversationDeleteDialog({
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px]" />
         <Dialog.Content
-          className="fixed left-1/2 top-1/2 z-60 w-[calc(100vw-32px)] max-w-140 -translate-x-1/2 -translate-y-1/2 rounded-3xl bg-[#F4F3EB] p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
+          className="fixed left-1/2 top-1/2 z-60 w-[calc(100vw-32px)] max-w-140 -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white  p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
           onEscapeKeyDown={(event) => {
             if (busy) {
               event.preventDefault();
diff --git a/src/pages/Home/components/DialogSurface.tsx b/src/pages/Home/components/DialogSurface.tsx
index 10a6fdf..95fe4ab 100644
--- a/src/pages/Home/components/DialogSurface.tsx
+++ b/src/pages/Home/components/DialogSurface.tsx
@@ -24,7 +24,7 @@ export default function DialogSurface({
     >
       <div
         className={[
-          'w-full rounded-[20px] bg-[#F4F3EB] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
+          'w-full rounded-[20px] bg-white  shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
           widthClassName,
         ].join(' ')}
         onClick={(event) => event.stopPropagation()}
diff --git a/src/pages/Knowledge/components/KnowledgeConfirmDialog.tsx b/src/pages/Knowledge/components/KnowledgeConfirmDialog.tsx
index bb9097d..6b30f2b 100644
--- a/src/pages/Knowledge/components/KnowledgeConfirmDialog.tsx
+++ b/src/pages/Knowledge/components/KnowledgeConfirmDialog.tsx
@@ -40,7 +40,7 @@ export default function KnowledgeConfirmDialog({
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px]" />
         <Dialog.Content
-          className="fixed left-1/2 top-1/2 z-60 w-[calc(100vw-32px)] max-w-130 -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-[#F4F3EB] p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
+          className="fixed left-1/2 top-1/2 z-60 w-[calc(100vw-32px)] max-w-130 -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white  p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
           onEscapeKeyDown={(event) => {
             if (busy) {
               event.preventDefault();
diff --git a/src/pages/Knowledge/components/KnowledgePageHeader.tsx b/src/pages/Knowledge/components/KnowledgePageHeader.tsx
index 72fc7e5..adacff7 100644
--- a/src/pages/Knowledge/components/KnowledgePageHeader.tsx
+++ b/src/pages/Knowledge/components/KnowledgePageHeader.tsx
@@ -28,11 +28,11 @@ export default function KnowledgePageHeader({
       </div>
 
       <div className="grid gap-3 sm:grid-cols-2 md:mt-2 md:min-w-[320px]">
-        <div className="rounded-3xl bg-[#f4f7fb] px-5 py-4 dark:bg-[#222225]">
+        <div className="rounded-2xl bg-[#f4f7fb] px-5 py-4 dark:bg-[#222225]">
           <div className="text-xs uppercase tracking-[0.18em] text-[#99A0AE] dark:text-gray-500">{documentsLabel}</div>
           <div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalCount}</div>
         </div>
-        <div className="rounded-3xl bg-[#fff7ed] px-5 py-4 dark:bg-[#31251a]">
+        <div className="rounded-2xl bg-[#fff7ed] px-5 py-4 dark:bg-[#31251a]">
           <div className="text-xs uppercase tracking-[0.18em] text-[#6b7280] dark:text-gray-400">{storageLabel}</div>
           <div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalSize}</div>
         </div>
diff --git a/src/pages/Knowledge/index.tsx b/src/pages/Knowledge/index.tsx
index 7d44476..1fb6eb9 100644
--- a/src/pages/Knowledge/index.tsx
+++ b/src/pages/Knowledge/index.tsx
@@ -378,7 +378,7 @@ export default function KnowledgePage() {
             ) : null}
 
             {loading && docs.length === 0 ? (
-              <div className="flex min-h-105 items-center justify-center rounded-3xl border border-black/5 bg-[#fcfcfd] dark:border-[#2a2a2d] dark:bg-[#222225]">
+              <div className="flex min-h-105 items-center justify-center rounded-2xl border border-black/5 bg-[#fcfcfd] dark:border-[#2a2a2d] dark:bg-[#222225]">
                 <div className="text-center text-[#99A0AE] dark:text-gray-500">{t('knowledge.status.loading')}</div>
               </div>
             ) : docs.length === 0 ? (
diff --git a/src/pages/Models/components/DialogSurface.tsx b/src/pages/Models/components/DialogSurface.tsx
index 8fd7fa9..3ef8b48 100644
--- a/src/pages/Models/components/DialogSurface.tsx
+++ b/src/pages/Models/components/DialogSurface.tsx
@@ -28,7 +28,7 @@ export default function DialogSurface({
     >
       <div
         className={[
-          'w-full rounded-[20px] bg-[#F4F3EB] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
+          'w-full rounded-[20px] bg-white  shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
           widthClassName,
         ].join(' ')}
         onClick={(event) => event.stopPropagation()}
diff --git a/src/pages/Models/components/ProviderEditorDialog.tsx b/src/pages/Models/components/ProviderEditorDialog.tsx
index b37c7a8..a2b487a 100644
--- a/src/pages/Models/components/ProviderEditorDialog.tsx
+++ b/src/pages/Models/components/ProviderEditorDialog.tsx
@@ -16,7 +16,7 @@ type ProviderEditorDialogProps = {
 };
 
 const FIELD_CLASS_NAME = [
-  'w-full rounded-[12px] border border-black/10 bg-[#F4F3EB] px-4 py-3 text-[14px] text-[#171717]',
+  'w-full rounded-[12px] border border-black/10 bg-white  px-4 py-3 text-[14px] text-[#171717]',
   'outline-none transition-colors placeholder:text-[#99A0AE] focus:border-black/20',
   'dark:border-white/10 dark:bg-[#222225] dark:text-[#f3f4f6] dark:placeholder:text-gray-500 dark:focus:border-white/20',
 ].join(' ');
@@ -66,7 +66,7 @@ export default function ProviderEditorDialog({
     >
       <div className="space-y-6">
         <div className="flex items-center gap-4 rounded-[16px] bg-white p-5 shadow-sm dark:bg-[#1f1f22]">
-          <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-[14px] bg-[#F4F3EB] text-[24px] dark:bg-[#222225]">
+          <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-[14px] bg-white  text-[24px] dark:bg-[#222225]">
             {provider?.icon || t('models.common.ai')}
           </div>
 
diff --git a/src/pages/Scripts/components/ScriptDialogs.tsx b/src/pages/Scripts/components/ScriptDialogs.tsx
index 2302c39..b73f654 100644
--- a/src/pages/Scripts/components/ScriptDialogs.tsx
+++ b/src/pages/Scripts/components/ScriptDialogs.tsx
@@ -106,7 +106,7 @@ function ModalFrame({
     >
       <div
         className={[
-          'max-h-full w-full overflow-hidden rounded-[24px] bg-[#f4f3eb] shadow-[0_24px_80px_rgba(15,23,42,0.18)] dark:bg-[#1f1f22]',
+          'max-h-full w-full overflow-hidden rounded-[24px] bg-white  shadow-[0_24px_80px_rgba(15,23,42,0.18)] dark:bg-[#1f1f22]',
           widthClassName,
         ].join(' ')}
         onClick={(event) => event.stopPropagation()}
diff --git a/src/pages/Setting/index.tsx b/src/pages/Setting/index.tsx
index 61f5bf5..1a1fb91 100644
--- a/src/pages/Setting/index.tsx
+++ b/src/pages/Setting/index.tsx
@@ -7,7 +7,7 @@ import SettingMenu, { type SettingView } from './components/SettingMenu';
 import { useSettingUpdateState } from './useSettingUpdateState';
 
 export default function SettingPage() {
-  const [currentView, setCurrentView] = useState<SettingView>('account');
+  const [currentView, setCurrentView] = useState<SettingView>('general');
   const themeMode = useSettingsStore((state) => state.themeMode);
   const language = useSettingsStore((state) => state.language);
   const updateState = useSettingUpdateState();
diff --git a/src/pages/Skills/components/MarketplaceDrawer.tsx b/src/pages/Skills/components/MarketplaceDrawer.tsx
index 586cbc6..7016a89 100644
--- a/src/pages/Skills/components/MarketplaceDrawer.tsx
+++ b/src/pages/Skills/components/MarketplaceDrawer.tsx
@@ -68,7 +68,7 @@ export default function MarketplaceDrawer({
       onClick={onClose}
     >
       <aside
-        className="flex h-full w-full max-w-[560px] flex-col bg-[#f3f1e9] shadow-[-18px_0_30px_rgba(15,23,42,0.12)] dark:bg-[#1b1b1d]"
+        className="flex h-full w-full max-w-[560px] flex-col bg-white shadow-[-18px_0_30px_rgba(15,23,42,0.12)] dark:bg-[#1b1b1d]"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="border-b border-black/10 px-7 py-6 dark:border-gray-700">
diff --git a/src/pages/Skills/components/SkillDetailDrawer.tsx b/src/pages/Skills/components/SkillDetailDrawer.tsx
index 0b7e5ea..9290497 100644
--- a/src/pages/Skills/components/SkillDetailDrawer.tsx
+++ b/src/pages/Skills/components/SkillDetailDrawer.tsx
@@ -100,7 +100,7 @@ export default function SkillDetailDrawer({
       onClick={onClose}
     >
       <aside
-        className="flex h-full w-full max-w-[450px] flex-col bg-[#f3f1e9] shadow-[-18px_0_30px_rgba(15,23,42,0.12)] dark:bg-[#1b1b1d]"
+        className="flex h-full w-full max-w-[450px] flex-col bg-white shadow-[-18px_0_30px_rgba(15,23,42,0.12)] dark:bg-[#1b1b1d]"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="flex items-center justify-end px-5 pt-5">
@@ -119,7 +119,7 @@ export default function SkillDetailDrawer({
             <div className="relative mb-4 flex h-16 w-16 shrink-0 items-center justify-center rounded-full border border-black/5 bg-white text-3xl shadow-sm dark:border-gray-700 dark:bg-[#222225]">
               <span className="text-3xl leading-none">{skill.icon || '🔧'}</span>
               {skill.isCore ? (
-                <div className="absolute -bottom-1 -right-1 rounded-full border border-black/5 bg-[#f3f1e9] p-1 shadow-sm dark:border-gray-700 dark:bg-[#1b1b1d]">
+                <div className="absolute -bottom-1 -right-1 rounded-full border border-black/5 bg-white p-1 shadow-sm dark:border-gray-700 dark:bg-[#1b1b1d]">
                   <LockIcon className="h-3 w-3 text-[#525866] dark:text-gray-400" />
                 </div>
               ) : null}