diff --git a/src/components/pill/alertMastercard.js b/src/components/pill/alertMastercard.js
index f0954eaa1..ba042dc61 100644
--- a/src/components/pill/alertMastercard.js
+++ b/src/components/pill/alertMastercard.js
@@ -63,12 +63,14 @@ const AlertMasterCard = forwardRef(
       zIndex: 2,
       ...pillProps,
       ...pillRight,
+      round: "0 12px 12px 0",
     }
     const pillEndProps = pillEnd && {
       background: pillEndBackground,
       margin: [0, 0, 0, -3],
       padding: [1, 2, 1, 4],
       zIndex: 1,
+      round: "0 12px 12px 0",
       ...pillProps,
       ...pillEnd,
     }
diff --git a/src/components/pill/index.stories.js b/src/components/pill/index.stories.js
index 5df75cd77..d3c5b9d70 100644
--- a/src/components/pill/index.stories.js
+++ b/src/components/pill/index.stories.js
@@ -208,6 +208,7 @@ const MasterCards = () => (
       <MasterCard
         pillLeft={{ flavour: "error", text: "3" }}
         pillRight={{ flavour: "warning", text: "2" }}
+        pillEnd={{ flavour: "clear", text: "223" }}
       />
       <MasterCard />
     </Flex>
@@ -215,6 +216,7 @@ const MasterCards = () => (
       <MasterCard
         pillLeft={{ flavour: "error", text: "3" }}
         pillRight={{ flavour: "warning", text: "2" }}
+        pillEnd={{ flavour: "clear", text: "223" }}
         size="large"
       />
       <MasterCard size="large" />
@@ -229,6 +231,7 @@ const AlertMasterCards = () => (
         onClick={() => console.log("test")}
         pillLeft={{ flavour: "error", text: "3" }}
         pillRight={{ flavour: "warning", text: "2" }}
+        pillEnd={{ flavour: "clear", text: "223" }}
       />
       <AlertMasterCard />
     </Flex>
@@ -236,6 +239,7 @@ const AlertMasterCards = () => (
       <AlertMasterCard
         pillLeft={{ flavour: "error", text: "3" }}
         pillRight={{ flavour: "warning", text: "2" }}
+        pillEnd={{ flavour: "clear", text: "223" }}
         size="large"
       />
       <AlertMasterCard size="large" />
diff --git a/src/components/pill/mastercard.js b/src/components/pill/mastercard.js
index 82a10b568..aed15479e 100644
--- a/src/components/pill/mastercard.js
+++ b/src/components/pill/mastercard.js
@@ -4,7 +4,7 @@ import { getMasterCardBackground } from "./mixins/background"
 import { MasterCardContainer } from "./styled"
 
 const minWidths = {
-  default: "29px",
+  default: "22px",
   large: "37px",
 }
 
@@ -21,6 +21,7 @@ const MasterCard = forwardRef(
       pillEnd,
       round,
       size,
+      zIndex,
       ...rest
     },
     ref
@@ -37,35 +38,37 @@ const MasterCard = forwardRef(
 
     const pillLeftProps = {
       background: getMasterCardBackground(pillLeft.background, pillLeft.flavour || "disabledError"),
-      padding: [1, 3],
+      padding: [0, 3],
       position: "relative",
       width: { min: minWidths[rest.size] || minWidths.default },
       ...pillProps,
       ...pillLeft,
+      round: "12px",
+      zIndex: 3,
     }
     const pillRightProps = {
       background: pillRightBackground,
-      margin: [0, 0, 0, -1],
-      padding: [1, 2],
+      margin: [0, 0, 0, -1.5],
+      padding: [0, 2],
+      width: { min: minWidths[rest.size] || minWidths.default },
       ...pillProps,
       ...pillRight,
+      round: "0 12px 12px 0",
+      zIndex: 2,
     }
     const pillEndProps = pillEnd && {
       background: pillEndBackground,
-      margin: [0, 0, 0, -1],
-      padding: [1, 2],
+      margin: [0, 0, 0, -1.5],
+      padding: [0, 2],
+      width: { min: minWidths[rest.size] || minWidths.default },
       ...pillProps,
       ...pillEnd,
+      round: "0 12px 12px 0",
+      zIndex: 1,
     }
 
     return (
-      <MasterCardContainer
-        background={pillEndBackground || pillRightBackground}
-        data-testid={testId}
-        onClick={onClick}
-        ref={ref}
-        {...commonProps}
-      >
+      <MasterCardContainer data-testid={testId} onClick={onClick} ref={ref} {...commonProps}>
         {children || (
           <>
             <MasterCardPill data-testid={`${testId}-left-pill`} {...pillLeftProps} />
diff --git a/src/components/pill/styled.js b/src/components/pill/styled.js
index 7bc8f35ea..6e2f731e1 100644
--- a/src/components/pill/styled.js
+++ b/src/components/pill/styled.js
@@ -34,6 +34,7 @@ export const PillContainer = styled(Flex).attrs(
     width,
     height,
     position,
+    zIndex,
   }) => ({
     padding: getPillPadding(padding, size, tiny),
     round,
@@ -48,6 +49,7 @@ export const PillContainer = styled(Flex).attrs(
     justifyContent: "center",
     alignItems: "center",
     position,
+    zIndex,
   })
 )`
   ${getPillBackground};