diff --git a/src/TipBox.vue b/src/TipBox.vue
index ce22a1a3..3ba58c42 100644
--- a/src/TipBox.vue
+++ b/src/TipBox.vue
@@ -1,16 +1,26 @@
 <template>
-    <div class="alert container" :class="[boxStyle, addClass, lightStyle]" :style="customStyle">
-        <div v-if="!isDefault" class="icon-wrapper">
-            <span v-html="iconType"></span>
+    <div class="alert box-container" :class="[boxStyle, addClass, lightStyle]" :style="customStyle" ref="boxContainer">
+        <div v-if="hasHeaderBool" :class="['tipbox-header-wrapper', headingStyle, { 'alert-dismissible': dismissible }]">
+            <div v-show="!isDefault" class="icon-wrapper">
+                <span v-html="iconType"></span>
+            </div>
+            <div class="box-heading" ref="headerContainer" v-html="headingContent"></div>
+            <button v-show="dismissible" type="button" class="close close-with-heading" data-dismiss="alert"
+                    aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
         </div>
-        <div class="contents" :class="fontBlack">
-            <h6 v-if="heading" class="heading">{{ heading }}</h6>
-            <button v-if="dismissible" type="button" class="close dismiss-button" data-dismiss="alert" aria-label="Close">
+        <div :class="['tipbox-body-wrapper', { 'alert-dismissible': dismissible && !hasHeaderBool, 'tipbox-body-wrapper-with-heading': hasHeaderBool }]">
+            <div v-show="!isDefault && !hasHeaderBool" class="icon-wrapper">
+                <span v-html="iconType"></span>
+            </div>
+            <div class="contents" :class="fontBlack">
+                <slot></slot>
+            </div>
+            <button v-show="dismissible && !hasHeaderBool" type="button" class="close" data-dismiss="alert" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
             </button>
-            <slot></slot>
         </div>
-
     </div>
 </template>
 
@@ -53,14 +63,17 @@
       },
       heading: {
         type: String,
-        default: null,
-      }, 
+        default: '',
+      },
       light: {
         type: Boolean,
         default: false,
       }
     },
     computed: {
+      hasHeaderBool() {
+        return !!this.heading;
+      },
       isDefault() {
         return this.type === 'none'
       },
@@ -83,24 +96,45 @@
       },
       lightStyle() {
         if (this.light) {
-            switch (this.type) {
+          switch (this.type) {
             case 'warning':
-                return 'border-warning text-warning alert-border-left';
+              return 'border-warning text-warning alert-border-left';
             case 'info':
             case 'definition':
-                return 'border-info text-info alert-border-left';
+              return 'border-info text-info alert-border-left';
             case 'success':
             case 'tip':
-                return 'border-sucess text-success alert-border-left';
+              return 'border-success text-success alert-border-left';
             case 'important':
             case 'wrong':
-                return 'border-danger text-danger alert-border-left';
+              return 'border-danger text-danger alert-border-left';
             default:
-                return '';
-            }
+              return 'alert-border-left';
+          }
         }
         return '';
       },
+      headingStyle() {
+        if (this.light) {
+          return '';
+        }
+
+        switch (this.type) {
+          case 'warning':
+            return 'alert-warning-darker';
+          case 'info':
+          case 'definition':
+            return 'alert-info-darker';
+          case 'success':
+          case 'tip':
+            return 'alert-success-darker';
+          case 'important':
+          case 'wrong':
+            return 'alert-danger-darker';
+          default:
+            return 'alert-default-darker';
+        }
+      },
       customStyle() {
         var style = {};
         if (this.backgroundColor) {
@@ -146,40 +180,47 @@
           default:
             return '<i class="fas fa-exclamation"></i>';
         }
+      },
+      headingContent() {
+        return md.renderInline(this.heading);
       }
     }
   }
 </script>
 
 <style scoped>
-    .container {
+    .box-container {
+        width: 100%;
+        padding: 0;
+        border-radius: 6px;
+    }
+
+    .tipbox-header-wrapper {
         display: flex;
         flex-direction: row;
+        align-items: center;
         width: 100%;
-        border-radius: 6px;
+        padding: 0.28em 1.25rem;
+        border-radius: 6px 6px 0 0;
+    }
+
+    .tipbox-body-wrapper {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        padding: 0.75rem 1.25rem;
     }
 
-    .heading {
-        display: inline;
-        float: right;
-        font-weight: normal;
-        color: inherit;
-        background-color: rgba(240, 240, 240, 0.6);
-        width: auto;
-        padding: 3px 5px 4px 5px;
-        border-width: 0;
-        border-radius: 0 6px 0 6px;
-        margin: -13px -27px 0 15px;
+    .tipbox-body-wrapper-with-heading {
+        padding-top: 0.5rem
     }
 
-    .dismiss-button {
-        position: relative;
-        top: -2px;
-        clear: right;
-        color: inherit;
-        height: 100%;
-        margin-right: -6px;
-        margin-left: 21px;
+    .alert-dismissible {
+        padding-right: 4rem;
+    }
+
+    .box-heading {
+        font-weight: 500;
     }
 
     .icon-wrapper {
@@ -189,6 +230,15 @@
         height: 22px;
     }
 
+    .close-with-heading {
+        top: auto;
+        padding: 0 1.25rem;
+    }
+
+    .close-with-heading > span {
+        vertical-align: text-top;
+    }
+
     .contents {
         padding: 0 6px;
         width: 100%;
@@ -197,16 +247,23 @@
     .alert-default {
         color: #24292e;
         background-color: #f6f8fa;
-        border-color: #e8ebef;
+        border-color: #e8ebef !important;
     }
-    
+
     .alert-border-left {
         background-color: #f9f8f8;
         border-left: solid;
         border-width: 0px 0px 0px 5px;
     }
-        
+
     .font-black {
         color: #24292e;
     }
 </style>
+
+<!-- TODO move this once we upgrade vue-loader version for scoped deep selectors -->
+<style>
+    div.box-heading > * {
+        margin-bottom: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index cbcf61e3..707373ea 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,6 +17,7 @@ import tipBox from './TipBox.vue'
 import tooltip from './Tooltip.vue'
 import trigger from './trigger.vue'
 import typeahead from './Typeahead.vue'
+import stylesheetSwitcher from "./stylesheetSwitcher.vue";
 
 const components = {
   affix,
@@ -38,6 +39,7 @@ const components = {
   tooltip,
   trigger,
   typeahead,
+  styleswitcher: stylesheetSwitcher,
 }
 
 const directives = {
diff --git a/src/stylesheetSwitcher.vue b/src/stylesheetSwitcher.vue
new file mode 100644
index 00000000..dfa4b81a
--- /dev/null
+++ b/src/stylesheetSwitcher.vue
@@ -0,0 +1,62 @@
+<template>
+  <div v-if="dev">
+    <div style="font-size: 1.5em; font-weight: bold;">
+      StyleSwitcher
+      <br/>
+      <span style="font-size: 0.67em;">Refresh the page to see the default style again</span>
+    </div>
+    <button @click="increaseIndex">
+      Increase
+    </button>
+    <button @click="decreaseIndex">
+      Decrease
+    </button>
+    <input
+      v-model="index"
+      type="text"
+      placeholder="1 to 16 (press enter)"
+      @change="changeStylesheet" />
+    Current: {{ index }}
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  props: {
+    dev: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      index: 0,
+      bootstrapThemeLink: null,
+      bootstrapExtraThemeLink: null,
+    };
+  },
+  methods: {
+    changeStylesheet() {
+      this.bootstrapThemeLink.attr('href', `markbind/dev/css/bootswatch/${this.index}/bootstrap.min.css`);
+      // eslint-disable-next-line max-len
+      this.bootstrapExtraThemeLink.attr('href', `markbind/dev/css/bootswatchExtras/${this.index}/bootstrap-markbind.css`);
+    },
+    increaseIndex() {
+      this.index += 1;
+      this.changeStylesheet();
+    },
+    decreaseIndex() {
+      this.index -= 1;
+      this.changeStylesheet();
+    },
+  },
+  mounted() {
+    // eslint-disable-next-line no-undef
+    this.bootstrapThemeLink = jQuery('link[href="markbind/css/bootstrap.min.css"]');
+    // eslint-disable-next-line no-undef
+    this.bootstrapExtraThemeLink = jQuery('link[href="markbind/css/bootstrap-markbind.css"]');
+  },
+};
+</script>