diff --git a/app/components/Ability.tsx b/app/components/Ability.tsx
index eff56de74..19afa513c 100644
--- a/app/components/Ability.tsx
+++ b/app/components/Ability.tsx
@@ -13,6 +13,7 @@ const sizeMap = {
 export function Ability({
   ability,
   size,
+  readonly = false,
   dragStarted = false,
   dropAllowed = false,
   onClick,
@@ -20,6 +21,7 @@ export function Ability({
 }: {
   ability: AbilityWithUnknown;
   size: keyof typeof sizeMap;
+  readonly?: boolean;
   dragStarted?: boolean;
   dropAllowed?: boolean;
   onClick?: () => void;
@@ -44,6 +46,7 @@ export function Ability({
         "is-drag-target": isDragTarget,
         "drag-started": dragStarted,
         "drop-allowed": dropAllowed,
+        readonly,
       })}
       style={
         {
@@ -58,6 +61,7 @@ export function Ability({
         setIsDragTarget(false);
         onDrop?.(event);
       }}
+      tabIndex={readonly ? -1 : undefined}
       type="button"
     >
       <Image alt="" path={abilityImageUrl(ability)} />
diff --git a/app/components/BuildCard.tsx b/app/components/BuildCard.tsx
index a1258051f..cb08b1a30 100644
--- a/app/components/BuildCard.tsx
+++ b/app/components/BuildCard.tsx
@@ -213,7 +213,12 @@ function AbilitiesRowWithGear({
         className="build__gear"
       />
       {abilities.map((ability, i) => (
-        <Ability key={i} ability={ability} size={i === 0 ? "MAIN" : "SUB"} />
+        <Ability
+          key={i}
+          ability={ability}
+          size={i === 0 ? "MAIN" : "SUB"}
+          readonly
+        />
       ))}
     </>
   );
diff --git a/app/styles/common.css b/app/styles/common.css
index d789e49b3..3e571e2e7 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -807,6 +807,12 @@ dialog::backdrop {
   pointer-events: none;
 }
 
+.build__ability.readonly,
+.build__ability.readonly:active {
+  cursor: default;
+  transform: none;
+}
+
 .build__bottom-row {
   display: flex;
   height: 100%;