diff --git a/client/web/src/components/QuickSwitcher/index.tsx b/client/web/src/components/QuickSwitcher/index.tsx
index 72712086..fd5dde5c 100644
--- a/client/web/src/components/QuickSwitcher/index.tsx
+++ b/client/web/src/components/QuickSwitcher/index.tsx
@@ -80,16 +80,27 @@ const QuickSwitcher: React.FC = React.memo(() => {
         {filteredActions.map((action, i) => (
           <div
             key={action.key}
-            className={clsx('truncate px-2 py-1 rounded', {
-              'bg-black bg-opacity-20 dark:bg-white dark:bg-opacity-20':
-                selectedIndex === i,
-            })}
+            className={clsx(
+              'truncate px-2 py-1 rounded cursor-pointer mb-0.5 group transition-all',
+              'hover:bg-black hover:bg-opacity-20 dark:hover:bg-white dark:hover:bg-opacity-20',
+              {
+                'bg-black bg-opacity-20 dark:bg-white dark:bg-opacity-20':
+                  selectedIndex === i,
+              }
+            )}
+            onClick={() => {
+              action.action(actionContext);
+              handleClose();
+            }}
           >
             <div className="text-lg">{action.label}</div>
             <div
-              className={clsx('opacity-0 text-gray-400 text-xs', {
-                'opacity-100': selectedIndex === i,
-              })}
+              className={clsx(
+                'opacity-0 text-gray-400 text-xs group-hover:opacity-100 transition-all',
+                {
+                  'opacity-100': selectedIndex === i,
+                }
+              )}
             >
               {action.source}
             </div>