diff --git a/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts b/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts
index 69823f0a2f..cdd5eed890 100644
--- a/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts
+++ b/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts
@@ -22,7 +22,9 @@ export function useAppThemeMode() {
       setIsDark(darkModeMediaQuery.matches);
     }
 
-    detectColorScheme();
+    if (localStorage.getItem('dark-mode') === null) {
+      detectColorScheme();
+    }
 
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', detectColorScheme);
     return () => {
diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/bulleted-list/BulletedListIcon.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/bulleted-list/BulletedListIcon.tsx
index 2494f3de99..252452495e 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/blocks/bulleted-list/BulletedListIcon.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/bulleted-list/BulletedListIcon.tsx
@@ -2,6 +2,9 @@ import { BulletedListNode } from '@/components/editor/editor.type';
 import { getListLevel } from '@/components/editor/utils/list';
 import React, { useMemo } from 'react';
 import { ReactEditor, useSlateStatic } from 'slate-react';
+import { ReactComponent as DiscIcon } from '@/assets/bulleted_list_icon_1.svg';
+import { ReactComponent as CircleIcon } from '@/assets/bulleted_list_icon_2.svg';
+import { ReactComponent as SquareIcon } from '@/assets/bulleted_list_icon_3.svg';
 
 enum Letter {
   Disc,
@@ -25,7 +28,7 @@ export function BulletedListIcon({ block, className }: { block: BulletedListNode
     }
   }, [block.type, staticEditor, path]);
 
-  const dataLetter = useMemo(() => {
+  const Icon = useMemo(() => {
     switch (letter) {
       case Letter.Disc:
         return 'disc';
@@ -37,12 +40,22 @@ export function BulletedListIcon({ block, className }: { block: BulletedListNode
   }, [letter]);
 
   return (
+    // <span
+    //   onMouseDown={(e) => {
+    //     e.preventDefault();
+    //   }}
+    //   contentEditable={false}
+    //   className={`${className} bulleted-icon ${dataLetter} flex min-w-[24px] justify-center pr-1 font-medium`}
+    // />
     <span
+      data-playwright-selected={false}
+      contentEditable={false}
       onMouseDown={(e) => {
         e.preventDefault();
       }}
-      contentEditable={false}
-      className={`${className} bulleted-icon ${dataLetter} flex min-w-[24px] justify-center pr-1 font-medium`}
-    />
+      className={`${className} cursor-pointer pr-1 text-xl hover:text-fill-default`}
+    >
+      {Icon === 'disc' ? <DiscIcon /> : Icon === 'circle' ? <CircleIcon /> : <SquareIcon />}
+    </span>
   );
 }
diff --git a/frontend/appflowy_web_app/src/components/editor/editor.scss b/frontend/appflowy_web_app/src/components/editor/editor.scss
index c892aec847..a3700d3288 100644
--- a/frontend/appflowy_web_app/src/components/editor/editor.scss
+++ b/frontend/appflowy_web_app/src/components/editor/editor.scss
@@ -196,24 +196,6 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) {
   }
 }
 
-.bulleted-icon {
-  background-repeat: no-repeat;
-  background-size: 16px 16px;
-  background-position: center;
-
-  &.disc {
-    background-image: url('../../assets/bulleted_list_icon_1.svg');
-  }
-
-  &.circle {
-    background-image: url('../../assets/bulleted_list_icon_2.svg');
-  }
-
-  &.square {
-    background-image: url('../../assets/bulleted_list_icon_3.svg');
-  }
-
-}
 
 .numbered-icon {
   &:after {