diff --git a/apps/site/src/content/design-system/components/flexi-cell/code.mdoc b/apps/site/src/content/design-system/components/flexi-cell/code.mdoc
index 9f5182113..1c79e8f24 100644
--- a/apps/site/src/content/design-system/components/flexi-cell/code.mdoc
+++ b/apps/site/src/content/design-system/components/flexi-cell/code.mdoc
@@ -35,7 +35,6 @@
       <FlexiCell.Hint>avail $9,999.99</FlexiCell.Hint>
     </FlexiCell.Adornment>
   }
-  size={{ initial: "default", sm: "large" }}
 >
   <FlexiCell.Label tag="h3">Credit card</FlexiCell.Label>
   <FlexiCell.Hint>Card ending in 1234</FlexiCell.Hint>
@@ -56,7 +55,6 @@
       </FlexiCell.Label>
     </FlexiCell.Adornment>
   }
-  size={{ initial: "default", sm: "large" }}
 >
   <FlexiCell.Label tag="h3">Account</FlexiCell.Label>
   <FlexiCell.Hint>032-123 12345678</FlexiCell.Hint>
@@ -75,13 +73,12 @@
     </FlexiCell.Adornment>
   }
   before={
-    <FlexiCell.Circle className="bg-muted text-white max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6" aria-label="Walter White">
+    <FlexiCell.Circle className="bg-muted text-white" aria-label="Walter White">
       WW
     </FlexiCell.Circle>
   }
   tag="a"
   href="#"
-  size={{ initial: "default", sm: "large" }}
 >
   <FlexiCell.Label tag="h3">With Circle and Info Button</FlexiCell.Label>
   <FlexiCell.Hint>Payee Details</FlexiCell.Hint>
@@ -98,13 +95,12 @@
     </FlexiCell.Adornment>
   }
   before={
-    <FlexiCell.Circle className="bg-muted text-white max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6" aria-label="Walter White">
+    <FlexiCell.Circle className="bg-muted text-white" aria-label="Walter White">
       WW
     </FlexiCell.Circle>
   }
   dualAction
   href="#"
-  size={{ initial: "default", sm: "large" }}
 >
   <FlexiCell.Label tag="h3">With Circle and Info Button</FlexiCell.Label>
   <FlexiCell.Hint>Payee Details</FlexiCell.Hint>
@@ -123,7 +119,7 @@
   before={
     <FlexiCell.Adornment>
       <svg
-        className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
+        className="h-4 w-4"
         viewBox="0 0 640 480"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -137,7 +133,6 @@
   }
   dualAction
   href="#"
-  size={{ initial: 'default', sm: 'large' }}
 >
   <FlexiCell.Label tag="h3">With Flag and Info Button</FlexiCell.Label>
   <FlexiCell.Hint>Payee Details</FlexiCell.Hint>
@@ -151,7 +146,7 @@
   before={
     <FlexiCell.Adornment>
       <svg
-        className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
+        className="h-4 w-4"
         viewBox="0 0 640 480"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -166,9 +161,8 @@
   withBorder
   tag="a"
   href="#"
-  size={{ initial: 'default', sm: 'large' }}
 >
-  <FlexiCell.Label className="max-sm:mt-0.5 sm:mt-1" tag="h3">
+  <FlexiCell.Label tag="h3">
     List Item
   </FlexiCell.Label>
 </FlexiCell>
@@ -195,7 +189,6 @@
       <GiftIcon look="outlined" color="hero" />
     </FlexiCell.Adornment>
   }
-  size={{ initial: 'default', sm: 'large' }}
 >
   <GiftIcon className="sm:hidden" />
   <FlexiCell.Label className="text-hero" tag="h4">
@@ -219,8 +212,7 @@
       </FlexiCell.Circle>
     </FlexiCell.Adornment>
   }
-  topBadge={props => <Badge {...props}>Corner flag</Badge>}
-  size={{ initial: 'default', sm: 'large' }}
+  topBadge={({ className }) => <Badge className={className + " leading-normal"}>Corner flag</Badge>}
 >
   <FlexiCell.Label className="text-[12px] font-normal text-muted" tag="p">
     MYER
@@ -305,7 +297,6 @@
                     <FlexiCell.Hint>available $9,999</FlexiCell.Hint>
                   </FlexiCell.Adornment>
                 }
-                size={{ initial: 'default', sm: 'large' }}
               >
                 <FlexiCell.Label className="font-normal" tag="h4">
                   {name}
@@ -387,7 +378,7 @@
                 href="#"
                 key={name}
                 before={
-                  <FlexiCell.Circle className="bg-muted text-white max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6">
+                  <FlexiCell.Circle className="bg-muted text-white">
                     {initials}
                   </FlexiCell.Circle>
                 }
@@ -398,7 +389,6 @@
                     </FlexiCell.Label>
                   </FlexiCell.Adornment>
                 }
-                size={{ initial: 'default', sm: 'large' }}
               >
                 <FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
                 <FlexiCell.Hint>{number}</FlexiCell.Hint>
@@ -409,12 +399,11 @@
                 dualAction
                 key={name}
                 before={
-                  <FlexiCell.Circle className="bg-muted text-white max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6">
+                  <FlexiCell.Circle className="bg-muted text-white">
                     {initials}
                   </FlexiCell.Circle>
                 }
                 after={<FlexiCell.Button icon={() => <InfoIcon look="outlined" />} />}
-                size={{ initial: 'default', sm: 'large' }}
               >
                 <FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
                 <FlexiCell.Hint>{number}</FlexiCell.Hint>
@@ -491,7 +480,7 @@
                   before={
                     <FlexiCell.Adornment>
                       <svg
-                        className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
+                        className="h-4 w-4"
                         viewBox="0 0 640 480"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
@@ -503,9 +492,8 @@
                       </svg>
                     </FlexiCell.Adornment>
                   }
-                  size={{ initial: 'default', sm: 'large' }}
                 >
-                  <FlexiCell.Label className="max-sm:mt-0.5 sm:mt-1" tag="span">{name}</FlexiCell.Label>
+                  <FlexiCell.Label tag="span">{name}</FlexiCell.Label>
                 </FlexiCell>
               );
             })}
@@ -592,7 +580,7 @@
                 before={
                   <FlexiCell.Adornment>
                     <svg
-                      className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
+                      className="h-4 w-4"
                       viewBox="0 0 640 480"
                       fill="none"
                       xmlns="http://www.w3.org/2000/svg"
@@ -611,7 +599,6 @@
                     </FlexiCell.Label>
                   </FlexiCell.Adornment>
                 }
-                size={{ initial: 'default', sm: 'large' }}
               >
                 <FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
                 <FlexiCell.Hint className="-mb-1">{number}</FlexiCell.Hint>
@@ -626,7 +613,7 @@
                 before={
                   <FlexiCell.Adornment>
                     <svg
-                      className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
+                      className="h-4 w-4"
                       viewBox="0 0 640 480"
                       fill="none"
                       xmlns="http://www.w3.org/2000/svg"
@@ -639,7 +626,6 @@
                   </FlexiCell.Adornment>
                 }
                 after={<FlexiCell.Button icon={() => <InfoIcon look="outlined" />} />}
-                size={{ initial: 'default', sm: 'large' }}
               >
                 <FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
                 <FlexiCell.Hint className="-mb-1">{number}</FlexiCell.Hint>
@@ -694,7 +680,6 @@
               Corner flag
             </Badge>
           )}
-          size={{ initial: 'default', sm: 'large' }}
         >
           <FlexiCell.Label className="text-[12px] font-normal text-muted" tag="p">
             MYER
@@ -747,7 +732,6 @@
               Corner flag
             </Badge>
           )}
-          size={{ initial: 'default', sm: 'large' }}
         >
           <FlexiCell.Adornment className="mb-1">
             <img
@@ -794,8 +778,11 @@
           <GiftIcon look="outlined" color="hero" />
         </FlexiCell.Adornment>
       }
-      after={<WarningIcon look="outlined" color="danger" />}
-      size={{ initial: 'default', sm: 'large' }}
+      after={
+        <Badge className="h-fit w-fit" color="success">
+          Completed
+        </Badge>
+      }
     >
       <GiftIcon className="sm:hidden" look="outlined" color="hero" />
       <FlexiCell.Label className="text-hero" tag="h4">
@@ -814,8 +801,11 @@
           <PadlockIcon look="outlined" color="hero" />
         </FlexiCell.Adornment>
       }
-      after={<SuccessIcon look="outlined" color="success" />}
-      size={{ initial: 'default', sm: 'large' }}
+      after={
+        <Badge className="h-fit w-fit" color="success">
+          Completed
+        </Badge>
+      }
     >
       <PadlockIcon className="sm:hidden" look="outlined" color="hero" />
       <FlexiCell.Label className="text-hero" tag="h4">
diff --git a/packages/ui/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.ts b/packages/ui/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.ts
index 50f709ca5..182dcf132 100644
--- a/packages/ui/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.ts
+++ b/packages/ui/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    slots: { base: 'pointer-events-none text-[12px] font-bold text-muted' },
+    slots: { base: 'pointer-events-none h-4 w-4 text-[12px] font-bold text-muted' },
     variants: {},
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
diff --git a/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx b/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx
index 1758f0056..fa94ea3ba 100644
--- a/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx
+++ b/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx
@@ -46,6 +46,8 @@ const meta: Meta<typeof FlexiCell> = {
 export default meta;
 type Story = StoryObj<unknown>;
 
+const responsiveString = ' (Responsive)';
+
 /**
  * > Default usage example
  */
@@ -86,7 +88,6 @@ export const CreditCard: Story = {
           href="#"
           tag="a"
           withBorder
-          size={{ initial: 'default', sm: 'large' }}
         >
           <FlexiCell.Label tag="h3">Credit card Base Styles</FlexiCell.Label>
           <FlexiCell.Hint>Card ending in 1234</FlexiCell.Hint>
@@ -94,7 +95,7 @@ export const CreditCard: Story = {
         <FlexiCell
           after={
             <FlexiCell.Adornment align="top">
-              <FlexiCell.Label tag="h3" className="font-medium" rightLabel>
+              <FlexiCell.Label tag="h3" rightLabel>
                 $9,999.99
               </FlexiCell.Label>
               <FlexiCell.Hint>avail $9,999.99</FlexiCell.Hint>
@@ -104,6 +105,22 @@ export const CreditCard: Story = {
           tag="a"
           withBorder
           size={{ initial: 'default', sm: 'large' }}
+        >
+          <FlexiCell.Label tag="h3">Responsive Credit card Base Styles</FlexiCell.Label>
+          <FlexiCell.Hint>Card ending in 1234</FlexiCell.Hint>
+        </FlexiCell>
+        <FlexiCell
+          after={
+            <FlexiCell.Adornment align="top">
+              <FlexiCell.Label tag="h3" className="font-medium" rightLabel>
+                $9,999.99
+              </FlexiCell.Label>
+              <FlexiCell.Hint>avail $9,999.99</FlexiCell.Hint>
+            </FlexiCell.Adornment>
+          }
+          href="#"
+          tag="a"
+          withBorder
         >
           <FlexiCell.Label className="font-normal" tag="h3">
             Credit card different styles
@@ -122,7 +139,6 @@ export const CreditCard: Story = {
           href="#"
           tag="a"
           withBorder
-          size={{ initial: 'default', sm: 'large' }}
         >
           <FlexiCell.Label tag="h3">Wrapping Credit CardCredit CardCredit CardCredit Card</FlexiCell.Label>
           <FlexiCell.Hint>
@@ -141,7 +157,6 @@ export const CreditCard: Story = {
           href="#"
           tag="a"
           withBorder
-          size={{ initial: 'default', sm: 'large' }}
         >
           <FlexiCell.Label tag="h3" truncateText>
             Truncating Credit CardCredit CardCredit CardCredit Card
@@ -178,31 +193,10 @@ export const PayeeDetails: Story = {
           }
           tag="a"
           href="#"
-          size={{ initial: 'default', sm: 'large' }}
         >
           <FlexiCell.Label tag="h3"> Default With Icon</FlexiCell.Label>
           <FlexiCell.Hint>Payee Details</FlexiCell.Hint>
         </FlexiCell>
-        <FlexiCell
-          after={
-            <FlexiCell.Adornment align="center">
-              <FlexiCell.Label tag="h3" rightLabel>
-                Fri 5 Aug
-              </FlexiCell.Label>
-            </FlexiCell.Adornment>
-          }
-          before={
-            <FlexiCell.Adornment>
-              <BpayIcon color="hero" className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6" />
-            </FlexiCell.Adornment>
-          }
-          tag="a"
-          href="#"
-          size={{ initial: 'default', sm: 'large' }}
-        >
-          <FlexiCell.Label tag="h3"> Customised With Icon</FlexiCell.Label>
-          <FlexiCell.Hint>Payee Details</FlexiCell.Hint>
-        </FlexiCell>
         <FlexiCell
           after={
             <FlexiCell.Adornment align="center">
@@ -210,16 +204,12 @@ export const PayeeDetails: Story = {
             </FlexiCell.Adornment>
           }
           before={
-            <FlexiCell.Circle
-              className="bg-muted text-white max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
-              aria-label="Walter White"
-            >
+            <FlexiCell.Circle className="bg-muted text-white" aria-label="Walter White">
               WW
             </FlexiCell.Circle>
           }
           dualAction
           href="#"
-          size={{ initial: 'default', sm: 'large' }}
         >
           <FlexiCell.Label tag="h3">With Circle and Info Button</FlexiCell.Label>
           <FlexiCell.Hint>Payee Details</FlexiCell.Hint>
@@ -235,7 +225,7 @@ export const PayeeDetails: Story = {
           before={
             <FlexiCell.Adornment>
               <svg
-                className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
+                className="h-4 w-4"
                 viewBox="0 0 640 480"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -249,11 +239,30 @@ export const PayeeDetails: Story = {
           }
           tag="a"
           href="#"
-          size={{ initial: 'default', sm: 'large' }}
         >
           <FlexiCell.Label tag="h3">With Flag</FlexiCell.Label>
           <FlexiCell.Hint>Payee Details</FlexiCell.Hint>
         </FlexiCell>
+        <FlexiCell
+          after={
+            <FlexiCell.Adornment align="center">
+              <FlexiCell.Label tag="h3" rightLabel>
+                Fri 5 Aug
+              </FlexiCell.Label>
+            </FlexiCell.Adornment>
+          }
+          before={
+            <FlexiCell.Adornment>
+              <BpayIcon color="hero" className="max-sm:h-4 max-sm:w-4 sm:h-6 sm:w-6" />
+            </FlexiCell.Adornment>
+          }
+          tag="a"
+          href="#"
+          size={{ initial: 'default', sm: 'large' }}
+        >
+          <FlexiCell.Label tag="h3"> Responsive With Resposive Icon</FlexiCell.Label>
+          <FlexiCell.Hint>Payee Details</FlexiCell.Hint>
+        </FlexiCell>
       </>
     );
   },
@@ -267,14 +276,36 @@ export const ListItems: Story = {
   render: () => {
     return (
       <>
-        <FlexiCell tag="a" href="#" withBorder size={{ initial: 'default', sm: 'large' }}>
+        <FlexiCell tag="a" href="#" withBorder>
           <FlexiCell.Label tag="h3">List Item</FlexiCell.Label>
         </FlexiCell>
         <FlexiCell
           before={
             <FlexiCell.Adornment>
               <svg
-                className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
+                className="h-4 w-4"
+                viewBox="0 0 640 480"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-label="French flag"
+              >
+                <path d="M0 0H640V480H0V0Z" fill="white" />
+                <path d="M0 0H213.3V480H0V0Z" fill="#002654" />
+                <path d="M426.7 0H640V480H426.7V0Z" fill="#CE1126" />
+              </svg>
+            </FlexiCell.Adornment>
+          }
+          tag="a"
+          href="#"
+          withBorder
+        >
+          <FlexiCell.Label tag="h3">List Item With Flag</FlexiCell.Label>
+        </FlexiCell>
+        <FlexiCell
+          before={
+            <FlexiCell.Adornment>
+              <svg
+                className="max-sm:h-4 max-sm:w-4 sm:h-6 sm:w-6"
                 viewBox="0 0 640 480"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -292,7 +323,7 @@ export const ListItems: Story = {
           size={{ initial: 'default', sm: 'large' }}
         >
           <FlexiCell.Label className="max-sm:mt-0.5 sm:mt-1" tag="h3">
-            List Item With Flag
+            Responsive List Item With Responsive Flag
           </FlexiCell.Label>
         </FlexiCell>
       </>
@@ -468,7 +499,7 @@ export const PayeeList: Story = {
                   }
                   size={{ initial: 'default', sm: 'large' }}
                 >
-                  <FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
+                  <FlexiCell.Label tag="h4">{name + responsiveString}</FlexiCell.Label>
                   <FlexiCell.Hint>{number}</FlexiCell.Hint>
                 </FlexiCell>
               ) : (
@@ -476,13 +507,8 @@ export const PayeeList: Story = {
                   href="#"
                   dualAction
                   key={name}
-                  before={
-                    <FlexiCell.Circle className="bg-muted text-white max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6">
-                      {initials}
-                    </FlexiCell.Circle>
-                  }
+                  before={<FlexiCell.Circle className="bg-muted text-white">{initials}</FlexiCell.Circle>}
                   after={<FlexiCell.Button icon={() => <InfoIcon look="outlined" />} />}
-                  size={{ initial: 'default', sm: 'large' }}
                 >
                   <FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
                   <FlexiCell.Hint>{number}</FlexiCell.Hint>
@@ -594,7 +620,7 @@ export const ForeinCurrencyPayeeList: Story = {
                   }
                   size={{ initial: 'default', sm: 'large' }}
                 >
-                  <FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
+                  <FlexiCell.Label tag="h4">{name + responsiveString}</FlexiCell.Label>
                   <FlexiCell.Hint className="-mb-1">{number}</FlexiCell.Hint>
                   <FlexiCell.Hint className="-mb-1">{bank}</FlexiCell.Hint>
                   <FlexiCell.Hint>{code}</FlexiCell.Hint>
@@ -607,7 +633,7 @@ export const ForeinCurrencyPayeeList: Story = {
                   before={
                     <FlexiCell.Adornment>
                       <svg
-                        className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
+                        className="h-4 w-4"
                         viewBox="0 0 640 480"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
@@ -620,7 +646,6 @@ export const ForeinCurrencyPayeeList: Story = {
                     </FlexiCell.Adornment>
                   }
                   after={<FlexiCell.Button icon={() => <InfoIcon look="outlined" />} />}
-                  size={{ initial: 'default', sm: 'large' }}
                 >
                   <FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
                   <FlexiCell.Hint className="-mb-1">{number}</FlexiCell.Hint>
@@ -699,8 +724,11 @@ export const ProductTilesWithExtraIcon: Story = {
               <GiftIcon look="outlined" color="hero" />
             </FlexiCell.Adornment>
           }
-          after={<WarningIcon look="outlined" color="danger" />}
-          size={{ initial: 'default', sm: 'large' }}
+          after={
+            <Badge className="h-fit w-fit" color="success">
+              Completed
+            </Badge>
+          }
         >
           <GiftIcon className="sm:hidden" look="outlined" color="hero" />
           <FlexiCell.Label className="text-hero" tag="h4">
@@ -719,12 +747,16 @@ export const ProductTilesWithExtraIcon: Story = {
               <PadlockIcon look="outlined" color="hero" />
             </FlexiCell.Adornment>
           }
-          after={<SuccessIcon look="outlined" color="success" />}
+          after={
+            <Badge className="h-fit w-fit" color="success">
+              Completed
+            </Badge>
+          }
           size={{ initial: 'default', sm: 'large' }}
         >
           <PadlockIcon className="sm:hidden" look="outlined" color="hero" />
           <FlexiCell.Label className="text-hero" tag="h4">
-            {title}
+            {title + responsiveString}
           </FlexiCell.Label>
           <FlexiCell.Hint>{subtitle}</FlexiCell.Hint>
         </FlexiCell>
@@ -777,7 +809,6 @@ export const PromotilesHorizontalList: Story = {
                 {stars ? '✭' : 'Corner flag'}
               </Badge>
             )}
-            size={{ initial: 'default', sm: 'large' }}
           >
             <FlexiCell.Label className="text-[12px] font-normal text-muted" tag="p">
               MYER
@@ -828,7 +859,6 @@ export const PromotilesVerticalList: Story = {
             tag="a"
             withBorder
             topBadge={({ className }) => <Badge className={className + ' leading-normal'}>Corner flag</Badge>}
-            size={{ initial: 'default', sm: 'large' }}
           >
             <FlexiCell.Adornment className="mb-1">
               <img
diff --git a/packages/ui/src/components/flexi-cell/flexi-cell.styles.ts b/packages/ui/src/components/flexi-cell/flexi-cell.styles.ts
index dafbfd2cb..600fe77ed 100644
--- a/packages/ui/src/components/flexi-cell/flexi-cell.styles.ts
+++ b/packages/ui/src/components/flexi-cell/flexi-cell.styles.ts
@@ -12,6 +12,7 @@ export const styles = tv(
         true: {
           base: 'rounded border border-borderDark',
         },
+        false: { base: '!px-0' },
       },
       isLink: {
         true: {