diff --git a/frontend/src/components/button.tsx b/frontend/src/components/button.tsx
index 1882b76c..2470def5 100644
--- a/frontend/src/components/button.tsx
+++ b/frontend/src/components/button.tsx
@@ -52,6 +52,7 @@ export function IconButton({
   size,
   iconClassName,
   iconAfter = false,
+  discreet = false,
   ...props
 }: {
   icon: IconType;
@@ -59,6 +60,7 @@ export function IconButton({
   size?: number;
   iconClassName?: string;
   iconAfter?: boolean;
+  discreet?: boolean;
 } & ComponentProps<'button'>) {
   const Icon = icon;
 
@@ -68,9 +70,8 @@ export function IconButton({
       title={label}
       aria-label={label}
       className={clsx(
-        'hover:bg-gray-200 dark:hover:bg-neutral-700',
+        !discreet && 'p-2 hover:bg-gray-200 dark:hover:bg-neutral-700',
         'rounded-full',
-        'p-2',
         props.className,
       )}
     >
diff --git a/frontend/src/components/popup.tsx b/frontend/src/components/popup.tsx
index c9a06f37..6440de37 100644
--- a/frontend/src/components/popup.tsx
+++ b/frontend/src/components/popup.tsx
@@ -136,7 +136,8 @@ export function HelpPopup({ children, className }: { children?: ReactNode; class
       popupClassName="w-[300px]"
       button={
         <IconButton
-          className="inline-block !p-0 !bg-transparent"
+          className="inline-block"
+          discreet={true}
           icon={IoHelpCircleOutline}
           label={`help`}
         />