diff --git a/packages/design-system/atoms/role/Role.styled.tsx b/packages/design-system/atoms/role/Role.styled.tsx
index cc00b95..8a06761 100644
--- a/packages/design-system/atoms/role/Role.styled.tsx
+++ b/packages/design-system/atoms/role/Role.styled.tsx
@@ -1,3 +1,4 @@
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
 import { palette } from '@roleypoly/design-system/atoms/colors';
 import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
@@ -63,6 +64,11 @@ export const Outer = styled.div<StyledProps>`
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
             ${Circle} svg {
               fill-opacity: 1;
+              ${onSmallScreen(
+                css`
+                  fill-opacity: 0;
+                `
+              )}
             }
           }