diff --git a/src/TipBox.vue b/src/TipBox.vue
index 39046b48..b129bc5f 100644
--- a/src/TipBox.vue
+++ b/src/TipBox.vue
@@ -12,7 +12,7 @@
             <button v-if="dismissible" type="button" class="close dismiss-button" data-dismiss="alert" aria-label="Close">
 =======
     <div class="alert box-container" :class="[boxStyle, addClass]" :style="customStyle" ref="boxContainer">
-        <div v-show="hasHeaderBool" :class="['header-wrapper', 'transparent-header', { 'alert-dismissible': dismissible }]">
+        <div v-show="hasHeaderBool" :class="['header-wrapper', headerBoxStyle, { 'alert-dismissible': dismissible }]">
             <div v-show="!isDefault" class="icon-wrapper">
                 <span v-html="iconType"></span>
             </div>
@@ -116,11 +116,30 @@
       isDefault() {
         return this.type === 'none'
       },
+<<<<<<< HEAD
       isSeamless() {
         return toBoolean(this.seamless);
       },
       headerContent() {
         return this.header || this.heading;
+=======
+      headerBoxStyle() {
+        switch (this.type) {
+          case 'warning':
+            return 'bg-warning'
+          case 'info':
+          case 'definition':
+            return 'bg-info box-heading-whiter'
+          case 'success':
+          case 'tip':
+            return 'bg-success box-heading-whiter'
+          case 'important':
+          case 'wrong':
+            return 'bg-danger box-heading-whiter'
+          default:
+            return 'alert-default-header'
+          }
+>>>>>>> theme specific style
       },
       boxStyle() {
         switch (this.type) {
@@ -298,6 +317,10 @@
         font-weight: 500;
     }
 
+    .box-heading-whiter {
+        color: #e8ebef;
+    }
+
     .icon-wrapper {
         display: flex;
         margin-right: .5em;
@@ -326,8 +349,15 @@
         border-bottom-width: 1px;
         border-bottom-style: solid;
         border-bottom-color: inherit;
+<<<<<<< HEAD
         filter: saturate(150%) grayscale(8%);
 >>>>>>> Tweak box component heading
+=======
+    }
+
+    .transparent-header > * {
+        margin-bottom: 0;
+>>>>>>> theme specific style
     }
 
     .alert-default {
@@ -336,6 +366,7 @@
         border-color: #e8ebef;
     }
 
+<<<<<<< HEAD
     .alert-border-left {
         background-color: #f9f8f8;
         border-left: solid;
@@ -348,11 +379,40 @@
 
     .vertical-divider {
         width: 4px;
+=======
+    .alert-warning-header {
+        color: #7f6537;
+        background-color: #fde9a5;
+    }
+
+    .alert-info-header {
+        color: #234261;
+        background-color: #6ec5d2;
+    }
+
+    .alert-success-header {
+        color: #356736;
+        background-color: #8cdc9e;
+    }
+
+    .alert-danger-header {
+        color: #832e2c;
+        background-color: #f7a4ab;
+    }
+
+    .alert-default-header {
+        color: #24292e;
+        background-color: #dee2e6;
+    }
+
+    div.box-heading >>> * {
+        margin-bottom: 0;
+>>>>>>> theme specific style
     }
 </style>
 
 <style>
-    div.box-heading > * {
-        margin-bottom: 0;
+    .box-heading > * {
+        margin-bottom: 0 !important;
     }
-</style>
\ No newline at end of file
+</style>