diff --git a/packages/pancake-uikit/src/components/Card/CardRibbon.tsx b/packages/pancake-uikit/src/components/Card/CardRibbon.tsx
index ae0986426..f7eec83b6 100644
--- a/packages/pancake-uikit/src/components/Card/CardRibbon.tsx
+++ b/packages/pancake-uikit/src/components/Card/CardRibbon.tsx
@@ -13,10 +13,14 @@ const StyledCardRibbon = styled.div<Partial<StyledCardRibbonProps>>`
   padding: 0;
   padding: 8px 0;
   position: absolute;
-  right: 0;
+  right: ${({ ribbonPosition }) => (ribbonPosition === "right" ? 0 : "auto")};
   top: 0;
   text-align: center;
   transform: translateX(30%) translateY(0%) rotate(45deg);
+  transform: ${({ ribbonPosition }) =>
+    ribbonPosition === "right"
+      ? "translateX(30%) translateY(0%) rotate(45deg)"
+      : "translateX(0%) translateY(200%) rotate(-45deg)"};
   transform-origin: top left;
   width: 96px;
 
@@ -47,12 +51,16 @@ const StyledCardRibbon = styled.div<Partial<StyledCardRibbonProps>>`
   }
 `;
 
-const CardRibbon: React.FC<CardRibbonProps> = ({ variantColor, text }) => {
+const CardRibbon: React.FC<CardRibbonProps> = ({ variantColor, text, ribbonPosition }) => {
   return (
-    <StyledCardRibbon variantColor={variantColor}>
+    <StyledCardRibbon variantColor={variantColor} ribbonPosition={ribbonPosition}>
       <div title={text}>{text}</div>
     </StyledCardRibbon>
   );
 };
 
+CardRibbon.defaultProps = {
+  ribbonPosition: "right",
+};
+
 export default CardRibbon;
diff --git a/packages/pancake-uikit/src/components/Card/index.stories.tsx b/packages/pancake-uikit/src/components/Card/index.stories.tsx
index 49a63dcfe..c2d2fe661 100644
--- a/packages/pancake-uikit/src/components/Card/index.stories.tsx
+++ b/packages/pancake-uikit/src/components/Card/index.stories.tsx
@@ -113,6 +113,11 @@ export const Ribbon: React.FC = () => {
           <CardBody style={{ height: "150px" }}>Any Color in the theme</CardBody>
         </Card>
       </Row>
+      <Row>
+        <Card ribbon={<CardRibbon variantColor="failure" text="Failure" ribbonPosition="left" />}>
+          <CardBody style={{ height: "150px" }}>Any Color in the theme</CardBody>
+        </Card>
+      </Row>
     </div>
   );
 };
diff --git a/packages/pancake-uikit/src/components/Card/types.ts b/packages/pancake-uikit/src/components/Card/types.ts
index b0a78e95f..fd1e248cb 100644
--- a/packages/pancake-uikit/src/components/Card/types.ts
+++ b/packages/pancake-uikit/src/components/Card/types.ts
@@ -5,6 +5,7 @@ import { Colors } from "../../theme/types";
 export interface CardRibbonProps {
   variantColor?: keyof Colors;
   text: string;
+  ribbonPosition?: "right" | "left";
 }
 
 export type CardTheme = {