diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index 9e1f10e..9b83338 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -165,6 +165,7 @@ const Card = ({
 
           {hasHoverButtons && (
             <>
+              {rest.details.starred && <div className="corner-triangle" />}
               <PlayOverlayButton
                 size="lg"
                 circle
diff --git a/src/components/card/styled.tsx b/src/components/card/styled.tsx
index cce44ca..276cc2a 100644
--- a/src/components/card/styled.tsx
+++ b/src/components/card/styled.tsx
@@ -90,6 +90,19 @@ export const Overlay = styled.div<Card>`
   &:hover {
     cursor: pointer;
   }
+
+  .corner-triangle {
+    position: absolute;
+    background-color: ${(props) => props.theme.primary.main};
+    box-shadow: 0 0 10px 8px rgba(0, 0, 0, 0.8);
+    height: 80px;
+    left: -50px;
+    top: -50px;
+    width: 80px;
+
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+  }
 `;
 
 const OverlayButton = styled(IconButton)`