diff --git a/web/app/(commonLayout)/datasets/dataset-card.tsx b/web/app/(commonLayout)/datasets/dataset-card.tsx
index 2f0563d47e..3e913ca52f 100644
--- a/web/app/(commonLayout)/datasets/dataset-card.tsx
+++ b/web/app/(commonLayout)/datasets/dataset-card.tsx
@@ -216,8 +216,8 @@ const DatasetCard = ({
               }
               btnClassName={open =>
                 cn(
-                  open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
-                  'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
+                  open ? '!bg-state-base-hover !shadow-none' : '!bg-transparent',
+                  'h-8 w-8 rounded-md border-none !p-2 hover:!bg-state-base-hover',
                 )
               }
               className={'!z-20 h-fit !w-[128px]'}
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index 688da4c25d..ee9230af12 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -407,8 +407,8 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                   }
                   btnClassName={open =>
                     cn(
-                      open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
-                      'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
+                      open ? '!bg-state-base-hover !shadow-none' : '!bg-transparent',
+                      'h-8 w-8 rounded-md border-none !p-2 hover:!bg-state-base-hover',
                     )
                   }
                   popupClassName={