diff --git a/scm-ui-components/packages/ui-components/src/modals/Modal.js b/scm-ui-components/packages/ui-components/src/modals/Modal.js
index 960f8277f0..01da67c49b 100644
--- a/scm-ui-components/packages/ui-components/src/modals/Modal.js
+++ b/scm-ui-components/packages/ui-components/src/modals/Modal.js
@@ -8,12 +8,17 @@ type Props = {
   body: any,
   footer?: any,
   active: boolean,
-  className?: string
+  className?: string,
+  headColor?: string
 };
 
 class Modal extends React.Component<Props> {
+  static defaultProps = {
+    headColor: "light"
+  };
+
   render() {
-    const { title, closeFunction, body, footer, active, className } = this.props;
+    const { title, closeFunction, body, footer, active, className, headColor } = this.props;
 
     const isActive = active ? "is-active" : null;
 
@@ -26,7 +31,7 @@ class Modal extends React.Component<Props> {
       <div className={classNames("modal", className, isActive)}>
         <div className="modal-background" />
         <div className="modal-card">
-          <header className="modal-card-head">
+          <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
             <p className="modal-card-title is-marginless">{title}</p>
             <button
               className="delete"