diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index fb463b9e..99aea0a9 100644
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -4,7 +4,6 @@ import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useSta
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
 import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useConfirm } from '../hooks/useConfirm';
 import { useRequests } from '../hooks/useRequests';
 import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
@@ -28,7 +27,6 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
   const sidebarRef = useRef<HTMLDivElement>(null);
   const unorderedRequests = useRequests();
   const activeRequest = useActiveRequest();
-  const confirm = useConfirm();
   const requests = useMemo(
     () => [...unorderedRequests].sort((a, b) => a.sortPriority - b.sortPriority),
     [unorderedRequests],
@@ -218,8 +216,8 @@ const _SidebarItem = forwardRef(function SidebarItem(
             title="Request Options"
             icon="dotsH"
             className={classnames(
-              'absolute right-0 top-0 transition-opacity opacity-0',
-              'group-hover/item:opacity-100 focus-visible:opacity-100',
+              'absolute right-0 top-0 transition-opacity !opacity-0',
+              'group-hover/item:!opacity-100 focus-visible:!opacity-100',
             )}
           />
         </RequestActionsDropdown>
diff --git a/src-web/components/core/Button.tsx b/src-web/components/core/Button.tsx
index bd53dd53..1adae345 100644
--- a/src-web/components/core/Button.tsx
+++ b/src-web/components/core/Button.tsx
@@ -5,13 +5,14 @@ import { Link } from 'react-router-dom';
 import { Icon } from './Icon';
 
 const colorStyles = {
-  custom: '',
-  default: 'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-1000',
-  gray: 'text-gray-800 bg-highlight enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-1000',
-  primary: 'bg-blue-400 text-white enabled:hocus:bg-blue-500',
-  secondary: 'bg-violet-400 text-white enabled:hocus:bg-violet-500',
-  warning: 'bg-orange-400 text-white enabled:hocus:bg-orange-500',
-  danger: 'bg-red-400 text-white enabled:hocus:bg-red-500',
+  custom: 'ring-blue-500/50',
+  default:
+    'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-1000 ring-blue-500/50',
+  gray: 'text-gray-800 bg-highlight enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-1000 ring-blue-500/50',
+  primary: 'bg-blue-400 text-white enabled:hocus:bg-blue-500 ring-blue-500/50',
+  secondary: 'bg-violet-400 text-white enabled:hocus:bg-violet-500 ring-violet-500/50',
+  warning: 'bg-orange-400 text-white enabled:hocus:bg-orange-500 ring-orange-500/50',
+  danger: 'bg-red-400 text-white enabled:hocus:bg-red-500 ring-red-500/50',
 };
 
 export type ButtonProps = HTMLAttributes<HTMLElement> & {
@@ -43,9 +44,9 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     () =>
       classnames(
         className,
+        'opacity-90 hover:opacity-100',
         'outline-none whitespace-nowrap',
-        // 'border border-transparent focus-visible:border-focus',
-        'focus-visible-or-class:ring ring-blue-300',
+        'focus-visible-or-class:ring',
         'rounded-md flex items-center',
         colorStyles[color || 'default'],
         justify === 'start' && 'justify-start',