diff --git a/src/page-components/scheme/ColorEntry.module.css b/src/page-components/scheme/ColorEntry.module.css
new file mode 100644
index 0000000..0c14011
--- /dev/null
+++ b/src/page-components/scheme/ColorEntry.module.css
@@ -0,0 +1,13 @@
+@layer components {
+  .delete_btn {
+    font-size: var(--font-size-xs);
+    color: var(--color-yuebai);
+    background-color: oklch(from var(--color-danger) l c h / 0.25);
+    &:hover {
+      background-color: oklch(from var(--color-danger-hover) l c h / 0.65);
+    }
+    &:active {
+      background-color: oklch(from var(--color-danger-active) l c h / 0.65);
+    }
+  }
+}
diff --git a/src/page-components/scheme/ColorEntry.tsx b/src/page-components/scheme/ColorEntry.tsx
new file mode 100644
index 0000000..11a3b8e
--- /dev/null
+++ b/src/page-components/scheme/ColorEntry.tsx
@@ -0,0 +1,38 @@
+import { isEmpty } from 'lodash-es';
+import { ActionIcon } from '../../components/ActionIcon';
+import { FloatColorPicker } from '../../components/FloatcolorPicker';
+import styles from './colorEntry.module.css';
+
+export type IdenticalColorEntry = {
+  id: string;
+  name: string;
+  color: string;
+};
+
+type ColorEntryProps = {
+  entry: IdenticalColorEntry;
+  onDelete?: (index: string) => void;
+};
+
+export function ColorEntry({ entry, onDelete }: ColorEntryProps) {
+  return (
+    <>
+      <div className="input_wrapper">
+        <input type="text" name={`name_${entry.id}`} defaultValue={entry.name} />
+      </div>
+      <div>
+        <FloatColorPicker
+          name={`color_${entry.id}`}
+          color={isEmpty(entry.color) ? undefined : entry.color}
+        />
+      </div>
+      <div>
+        <ActionIcon
+          icon="tabler:trash"
+          extendClassName={styles.delete_btn}
+          onClick={() => onDelete?.(entry.id)}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/page-components/scheme/swatch-scheme/Builder.tsx b/src/page-components/scheme/swatch-scheme/Builder.tsx
index 9d6e301..b5a386a 100644
--- a/src/page-components/scheme/swatch-scheme/Builder.tsx
+++ b/src/page-components/scheme/swatch-scheme/Builder.tsx
@@ -6,50 +6,15 @@ import {
   SwatchSchemeSetting,
 } from '../../../color_functions/color_module';
 import { useColorFunction } from '../../../ColorFunctionContext';
-import { ActionIcon } from '../../../components/ActionIcon';
-import { FloatColorPicker } from '../../../components/FloatColorPicker';
 import { ScrollArea } from '../../../components/ScrollArea';
 import { Switch } from '../../../components/Switch';
 import { SchemeContent } from '../../../models';
 import { useUpdateScheme } from '../../../stores/schemes';
 import { QSwatchEntry, QSwatchSchemeSetting, SwatchSchemeStorage } from '../../../swatch_scheme';
 import { mapToObject } from '../../../utls';
+import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
 import styles from './Builder.module.css';
 
-type IdenticalColorEntry = {
-  id: string;
-  name: string;
-  color: string;
-};
-
-type ColorEntryProps = {
-  entry: IdenticalColorEntry;
-  onDelete?: (index: string) => void;
-};
-
-function ColorEntry({ entry, onDelete }: ColorEntryProps) {
-  return (
-    <>
-      <div className="input_wrapper">
-        <input type="text" name={`name_${entry.id}`} defaultValue={entry.name} />
-      </div>
-      <div>
-        <FloatColorPicker
-          name={`color_${entry.id}`}
-          color={isEmpty(entry.color) ? undefined : entry.color}
-        />
-      </div>
-      <div>
-        <ActionIcon
-          icon="tabler:trash"
-          extendClassName={styles.delete_btn}
-          onClick={() => onDelete?.(entry.id)}
-        />
-      </div>
-    </>
-  );
-}
-
 type SwatchSchemeBuilderProps = {
   scheme: SchemeContent<SwatchSchemeStorage>;
   onBuildCompleted?: () => void;