diff --git a/app/components/InfoPopover.tsx b/app/components/InfoPopover.tsx
index 9a70ce994..d32733753 100644
--- a/app/components/InfoPopover.tsx
+++ b/app/components/InfoPopover.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { SendouButton } from "./elements/Button";
+import { Button } from "react-aria-components";
 import { SendouPopover } from "./elements/Popover";
 
 export function InfoPopover({
@@ -9,13 +9,13 @@ export function InfoPopover({
 	return (
 		<SendouPopover
 			trigger={
-				<SendouButton
-					className={clsx("info-popover__trigger", {
+				<Button
+					className={clsx("react-aria-Button", "info-popover__trigger", {
 						"info-popover__trigger__tiny": tiny,
 					})}
 				>
 					?
-				</SendouButton>
+				</Button>
 			}
 		>
 			{children}
diff --git a/app/styles/common.css b/app/styles/common.css
index 02c53e61f..d7cebb762 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -598,6 +598,9 @@ abbr[title] {
 	padding: var(--s-0-5);
 	width: 28px;
 	height: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .react-aria-Button.info-popover__trigger__tiny {