diff --git a/apps/web-client/src/components/header/Notification/Notification.tsx b/apps/web-client/src/components/header/Notification/Notification.tsx
index 3dbaaa5..928cc8b 100644
--- a/apps/web-client/src/components/header/Notification/Notification.tsx
+++ b/apps/web-client/src/components/header/Notification/Notification.tsx
@@ -28,11 +28,8 @@ const useStyles = createStyles(() => ({
     margin: '0',
     border: '0',
   },
-  dropdownShape: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
+  dropdownShape: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+
   dropdownAvatar: {
     padding: '2px',
     display: 'flex',
@@ -46,7 +43,7 @@ const useStyles = createStyles(() => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    background: '#f1f3f5',
+    background: 'rgba(0, 0, 0, 0.06)',
     borderRadius: '8px',
   },
   notificationHeader: {
@@ -127,9 +124,8 @@ export default function Notification() {
               <Spin size="small" className={styles.notificationSpinner} />
             </div>
           ) : (
-            <Button
-              htmlType="button"
-              size="small"
+            <button
+              type="button"
               className={styles.notificationClearButton}
               onClick={() => {
                 updateAllNotiReadStatus(undefined, {
@@ -140,7 +136,7 @@ export default function Notification() {
               }}
             >
               Clear All
-            </Button>
+            </button>
           )}
         </div>
         <div className={styles.dropdownMenu}>{menu}</div>