diff --git a/playbook/app/pb_kits/playbook/pb_card/_card.tsx b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
index 225f40def0..f9f2568d8f 100755
--- a/playbook/app/pb_kits/playbook/pb_card/_card.tsx
+++ b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
@@ -6,7 +6,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
-import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
+import type { ProductColors, CategoryColors, BackgroundColors, StatusColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
 import Flex from '../pb_flex/_flex'
@@ -36,7 +36,7 @@ type CardPropTypes = {
 } & GlobalProps
 
 type CardHeaderProps = {
-  headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
+  headerColor?: BackgroundColors | ProductColors | CategoryColors | StatusColors | "none",
   headerColorStriped?: boolean,
   children: React.ReactChild[] | React.ReactChild,
   className?: string,
@@ -127,12 +127,12 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
   const Tag = tagOptions.includes(tag) ? tag : 'div'
-  
+
   return (
     <>
     {
       draggableItem ? (
-        <Draggable.Item dragId={dragId} 
+        <Draggable.Item dragId={dragId}
             key={dragId}
         >
         <Tag
@@ -140,14 +140,14 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             className={classnames(cardCss, globalProps(props), className)}
             {...restHtmlProps}
-            style={mergedStyles} 
+            style={mergedStyles}
         >
           {subComponentTags('Header')}
           {
             dragHandle ? (
               <Flex>
                 <span className="card_draggable_handle">
-                  <Icon 
+                  <Icon
                       icon="grip-dots-vertical"
                       paddingRight="xs"
                       verticalAlign="middle"
@@ -169,7 +169,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               className={classnames(cardCss, globalProps(props), className)}
               {...restHtmlProps}
-              style={mergedStyles} 
+              style={mergedStyles}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}
diff --git a/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss b/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss
index c6e150ccd8..91f92c9b8f 100755
--- a/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss
+++ b/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss
@@ -24,7 +24,7 @@ $additional_colors: (
   "neutral_subtle": $neutral_subtle,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
-$pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);
+$pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $additional_colors), $category_colors), $status_colors);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb
index 028736d74d..05e4f406a5 100644
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb
@@ -67,4 +67,24 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
\ No newline at end of file
+<% end %>
+
+<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success" }) do %>
+    <%= pb_rails("body", props: { text: "Success", dark: true }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error" }) do %>
+    <%= pb_rails("body", props: { text: "Error", dark: true }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.jsx b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.jsx
index 6cc397e4c7..2589f9ae4c 100644
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.jsx
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.jsx
@@ -181,6 +181,56 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
+
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Status Colors"
+            />
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="success"
+                >
+                    <Body
+                        dark
+                        text="Success"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="error"
+                >
+                    <Body
+                        dark
+                        text="Error"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
         </>
     )
 }
diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.md
index 629123d2a1..5e2856ea90 100644
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.md
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.md
@@ -1 +1 @@
-Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.