diff --git a/apps/mobile/src/features/approver/components/fees/base-fee-option.tsx b/apps/mobile/src/features/approver/components/fees/base-fee-option.tsx
index 9af560f8d..91160e5ba 100644
--- a/apps/mobile/src/features/approver/components/fees/base-fee-option.tsx
+++ b/apps/mobile/src/features/approver/components/fees/base-fee-option.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { Avatar, ItemLayout, Pressable } from '@leather.io/ui/native';
+import { Avatar, Box, ItemLayout, Pressable } from '@leather.io/ui/native';
 
 interface BaseFeeOptionProps {
   onPress(): void;
@@ -24,24 +24,37 @@ export function BaseFeeOption({
   balanceUsd,
 }: BaseFeeOptionProps) {
   return (
-    <Pressable
-      borderColor={isSelected ? 'ink.text-primary' : 'ink.border-default'}
-      borderWidth={1}
-      borderRadius="xs"
-      flexDirection="row"
-      alignItems="center"
-      p="3"
-      gap="3"
-      onPress={onPress}
-      disabled={disabled}
-    >
-      <Avatar>{icon}</Avatar>
-      <ItemLayout
-        titleLeft={title}
-        captionLeft={time}
-        titleRight={balance}
-        captionRight={balanceUsd}
-      />
-    </Pressable>
+    <>
+      <Pressable
+        borderColor={isSelected ? 'ink.text-primary' : 'ink.border-default'}
+        borderWidth={1}
+        borderRadius="xs"
+        flexDirection="row"
+        alignItems="center"
+        p="3"
+        gap="3"
+        onPress={onPress}
+        disabled={disabled}
+      >
+        <Avatar>{icon}</Avatar>
+        <ItemLayout
+          titleLeft={title}
+          captionLeft={time}
+          titleRight={balance}
+          captionRight={balanceUsd}
+        />
+        {disabled && (
+          <Box
+            top={0}
+            bottom={0}
+            right={0}
+            left={0}
+            position="absolute"
+            backgroundColor="ink.background-overlay"
+            opacity={0.1}
+          />
+        )}
+      </Pressable>
+    </>
   );
 }