diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js
index 70a2c2ba..b19470a0 100644
--- a/client/src/app/demo/components-demo-page.js
+++ b/client/src/app/demo/components-demo-page.js
@@ -173,7 +173,10 @@ let DemoPage = React.createClass({
         {
             title: 'InfoTooltip',
             render: (
-                <InfoTooltip type="warning" text="Some helping text" />
+                <div>
+                    <InfoTooltip text="You should read the manual" />
+                    <InfoTooltip type="warning" text="No staff member is assigned to this department." />
+                </div>
             )
         }
 	],
diff --git a/client/src/core-components/info-tooltip.js b/client/src/core-components/info-tooltip.js
index a634ab44..6e78f557 100644
--- a/client/src/core-components/info-tooltip.js
+++ b/client/src/core-components/info-tooltip.js
@@ -31,8 +31,12 @@ class InfoTooltip extends React.Component {
     }
 
     renderText() {
+        let message = (this.props.type === 'default') ? 'Information' : 'Warning';
         return (
             <div className="info-tooltip__text">
+                <div className="info-tooltip__text__title">
+                    {message}
+                </div>
                 {this.props.text}
             </div>
         );
diff --git a/client/src/core-components/info-tooltip.scss b/client/src/core-components/info-tooltip.scss
index 432b932c..4fc65c39 100644
--- a/client/src/core-components/info-tooltip.scss
+++ b/client/src/core-components/info-tooltip.scss
@@ -2,7 +2,10 @@
 
 .info-tooltip {
     &__text {
-
+        &__title {
+            color: $secondary-blue;
+            font-size: $font-size--md;
+        }
     }
 
     &__icon {
@@ -13,5 +16,11 @@
         .info-tooltip__icon {
             color: $primary-red;
         }
+
+        .info-tooltip__text {
+            &__title {
+                color: $primary-red;
+            }
+        }
     }
 }