diff --git a/src/health-message/demo.html b/src/health-message/demo.html
index e69de29b..82d96137 100644
--- a/src/health-message/demo.html
+++ b/src/health-message/demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>&lt;health-message&gt;</title>
+  </head>
+
+  <body>
+    <h1 class="text-center">Health-Message Component Demo</h1>
+    <br />
+    <h2 class="text-center">alertClass: danger</h2>
+    <div id="demo-html1" style="margin: 20px;"></div>
+    <br />
+    <h2 class="text-center">alertClass: warning</h2>
+    <div id="demo-html2" style="margin: 20px;"></div>
+
+    <script src="../../node_modules/steal/steal.js"
+      data-main="@empty">
+    </script>
+
+    <script type="steal-module">
+      import HealthMessage from "~/src/health-message/"
+      import "~/styles/"
+      import "~/styles.less"
+
+      const HealthMessageComponentDanger = new HealthMessage({viewModel: {message: 'Expected Variable Type (text), found Variable Type (number)', showMessage: true, alertClass: 'danger'}})
+      const HealthMessageComponentWarning = new HealthMessage({viewModel: {message: 'You have no varriable assigned to the current field', showMessage: true, alertClass: 'warning'}})
+
+
+      const demoHtml1 = document.getElementById('demo-html1')
+      const demoHtml2 = document.getElementById('demo-html2')
+
+      demoHtml1.appendChild(HealthMessageComponentDanger.element)
+      demoHtml2.appendChild(HealthMessageComponentWarning.element)
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/health-message/health-message-test.html b/src/health-message/health-message-test.html
index e69de29b..7af2b5c6 100644
--- a/src/health-message/health-message-test.html
+++ b/src/health-message/health-message-test.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+
+<title>Author App Tests</title>
+
+<div id="mocha"></div>
+<div id="test-area"></div>
+
+<script type="text/javascript">
+  window.less = {async: true, fileSync: true};
+</script>
+
+<script src="../../node_modules/steal/steal.js"
+  mocha="bdd"
+  main="~/src/health-message/health-message-test.js"></script>
\ No newline at end of file
diff --git a/src/health-message/health-message-test.js b/src/health-message/health-message-test.js
index e69de29b..a09f6009 100644
--- a/src/health-message/health-message-test.js
+++ b/src/health-message/health-message-test.js
@@ -0,0 +1,60 @@
+import { HealthMessageVM } from './health-message'
+import stache from 'can-stache'
+import canViewModel from 'can-view-model'
+import { assert } from 'chai'
+import $ from 'jquery'
+
+import 'steal-mocha'
+
+describe('<health-message>', () => {
+  describe('viewModel', () => {
+    let vm
+    const testProps = {
+      showMessage: true,
+      alertClass: 'danger',
+      message: 'Danger Zone!'
+    }
+
+    beforeEach(() => {
+      vm = new HealthMessageVM(testProps)
+    })
+
+    it('passes simple smoke test', () => {
+      const expectedMessage = 'Danger Zone!'
+      const expectedAlertClass = 'danger'
+      const expectedShowMessage = true
+
+      assert.equal(vm.message, expectedMessage, 'message should show Danger Zone!')
+      assert.equal(vm.alertClass, expectedAlertClass, 'alertClass should be danger')
+      assert.equal(vm.showMessage, expectedShowMessage, 'showMessage should be true')
+    })
+  })
+
+  describe('Component', () => {
+    // let vm
+
+    afterEach(() => {
+      document.getElementById('test-area').innerHTML = ''
+    })
+
+    it('shows a warning level message', () => {
+      const render = (data) => {
+        const tpl = stache(`
+        <health-message 
+          showMessage:raw="true" 
+          message:raw="This is a warning message" 
+          alertClass:raw="warning"
+        />`)
+
+        document.querySelector('#test-area').appendChild(tpl(data))
+
+        return canViewModel('health-message')
+      }
+
+      render()
+
+      const messageEl = $('health-message')
+      assert.isTrue(messageEl.is(':visible'), 'should be visible')
+    })
+  })
+})
diff --git a/test/test.js b/test/test.js
index c0c77aa1..6195ceaf 100644
--- a/test/test.js
+++ b/test/test.js
@@ -16,6 +16,7 @@ import 'a2jauthor/src/report/report-test'
 import 'a2jauthor/legacy/a2j-legacy-tests'
 import 'a2jauthor/src/utils/tests/'
 import 'a2jauthor/src/vertical-navbar/vertical-navbar-test'
+import 'a2jauthor/src/health-message/health-message-test'
 import 'a2jauthor/src/pages-tab/components/var-picker/field/var-picker-field-test'
 // import 'a2jauthor/src/templates/templates-test'
 // import 'a2jauthor/src/templates/edit/edit-test'
