diff --git a/app/controllers/contact_controller.rb b/app/controllers/contact_controller.rb
index ddc2203..b3108c4 100644
--- a/app/controllers/contact_controller.rb
+++ b/app/controllers/contact_controller.rb
@@ -1,7 +1,14 @@
 # coding: utf-8
 class ContactController < ApplicationController
 
+#  skip_before_action :check_xhr, raise: false
+  skip_before_action :check_xhr,
+                     #:verify_authenticity_token,
+                     #:redirect_to_login_if_required,
+                     raise: false
+
+
   def index
-        Rails.logger.info '🚂 Called the `NotebookController#index` method.'
+    Rails.logger.info '🚂 Called the `ContactController#index` method.'
   end
 end
diff --git a/app/controllers/contacts_controller.rb b/app/controllers/contacts_controller.rb
index da5175b..174e5ad 100644
--- a/app/controllers/contacts_controller.rb
+++ b/app/controllers/contacts_controller.rb
@@ -1,4 +1,11 @@
 class ContactsController < ApplicationController
+
+  skip_before_action :check_xhr,
+                     :verify_authenticity_token,
+                     :redirect_to_login_if_required,
+                     raise: false
+
+
   def index
     Rails.logger.info 'Called ContactsController#index'
     contacts = ContactStore.get_contacts()
@@ -21,15 +28,22 @@ def update
 
     ContactStore.add_contact(contact_id, contact)
 
-    @date=Time.now.strftime('%a, %-d %b %Y %H:%M:%S %z')
+    @date=Time.now.strftime('%a, %-d %b %Y %H:%M:%S')
 
     @mail="
 Date: #{@date}
-From: #{contact['email']}
+From: #{contact['email'] || "unknown@example.com"}
 To: jons-biography@beta.buildcivitas.com
-Subject: #{contact['name']} - #{@date}
+Subject: Contact from #{contact['name']} - #{@date}
+
+
+Name:  #{contact['name']}
+Phone: #{contact['phone']}
+Email: #{contact['email']}
+
+Message:
 
-#{contact['message']}"
+> #{contact['message']}"
 
 
     Mail.new(@mail).message_id.presence
diff --git a/assets/javascripts/discourse/components/contact-form.hbs b/assets/javascripts/discourse/components/contact-form.hbs
new file mode 100644
index 0000000..b920a42
--- /dev/null
+++ b/assets/javascripts/discourse/components/contact-form.hbs
@@ -0,0 +1,25 @@
+<form {{  action 'createContact' name email phone message on='submit' }}>
+  <label>
+      {{ i18n 'contact.create_contact.text_name_label' }}
+      {{ input required="required" class="form-control" type="text" value=name }}
+  </label>
+
+  <label>
+    {{ i18n 'contact.create_contact.text_email_label' }}
+    {{ input required=true type="text" value=email }}
+  </label>
+
+  <label>
+    {{ i18n 'contact.create_contact.text_phone_label' }}
+    {{ input type="text" value=phone }}
+  </label>
+
+  <label>
+    {{ i18n 'contact.create_contact.text_message_label' }}
+    {{ textarea value=message }}
+  </label>
+
+  <button type='submit' class='btn btn-primary'>
+    {{ i18n 'contact.create_contact.submit_label' }}
+  </button>
+</form>
diff --git a/assets/javascripts/discourse/components/contact-form.js b/assets/javascripts/discourse/components/contact-form.js
new file mode 100644
index 0000000..a670834
--- /dev/null
+++ b/assets/javascripts/discourse/components/contact-form.js
@@ -0,0 +1,47 @@
+import Component from '@ember/component';
+import Controller from '@ember/controller';
+
+export default Component.extend({
+  init() {
+    this._super();
+    this.set('contacts', []);
+    this.fetchContacts();
+  },
+
+  fetchContacts() {
+    this.store.findAll('contact')
+      .then(result => {
+        for (const contact of result.content) {
+          this.contacts.pushObject(contact);
+        }
+      })
+      .catch(console.error);
+  },
+
+  actions: {
+    createContact(name, email, phone, message) {
+
+      const contactRecord = this.store.createRecord('contact', {
+        id: Date.now(),
+        name: name,
+        email: email,
+        phone: phone,
+        message: message
+      });
+
+      contactRecord.save()
+        .then(result => {
+          this.contacts.pushObject(result.target);
+        })
+        .catch(console.error);
+    },
+
+    deleteContact(contact) {
+      this.store.destroyRecord('contact', contact)
+        .then(() => {
+          this.contacts.removeObject(contact);
+        })
+        .catch(console.error);
+    }
+  }
+})
diff --git a/assets/javascripts/discourse/components/hello.hbs b/assets/javascripts/discourse/components/hello.hbs
new file mode 100644
index 0000000..3b2634d
--- /dev/null
+++ b/assets/javascripts/discourse/components/hello.hbs
@@ -0,0 +1 @@
+<h1>Hello</h1>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/connectors/topic-above-posts/contact.hbs b/assets/javascripts/discourse/connectors/topic-above-posts/contact.hbs
index 694895b..700bd88 100644
--- a/assets/javascripts/discourse/connectors/topic-above-posts/contact.hbs
+++ b/assets/javascripts/discourse/connectors/topic-above-posts/contact.hbs
@@ -1,30 +1,6 @@
 {{#if (includes @outletArgs.model.tags 'contact')}}
 
+<ContactForm />
 
-<form {{ action 'createContact' name email phone message on='submit' }}>
-  <label>
-    {{ i18n 'contact.create_contact.text_name_label' }}:
 
-  </label>
-  {{ input type="text" value=name name='name' }}
-
-  <label>
-    {{ i18n 'contact.create_contact.text_email_label' }}
-  </label>
-  {{ input type="text" value=email name='email' }}
-
-  <label>
-    {{ i18n 'contact.create_contact.text_phone_label' }}
-  </label>
-  {{ input type="text" value=phone }}
-
-  <label>
-    {{ i18n 'contact.create_contact.text_message_label' }}
-  </label>
-  {{ textarea value=message }}
-
-  <button type='submit' class='btn btn-primary'>
-    {{ i18n 'contact.create_contact.submit_label' }}
-  </button>
-</form>
 {{/if}}
diff --git a/assets/javascripts/discourse/controllers/contact.js.es6 b/assets/javascripts/discourse/controllers/contact.js.es6
index e2716b7..83b7033 100644
--- a/assets/javascripts/discourse/controllers/contact.js.es6
+++ b/assets/javascripts/discourse/controllers/contact.js.es6
@@ -2,6 +2,7 @@ import Component from '@ember/component';
 import Controller from '@ember/controller';
 
 export default Controller.extend({
+
   init() {
     this._super();
     this.set('contacts', []);
diff --git a/assets/javascripts/discourse/helpers/sample.js b/assets/javascripts/discourse/helpers/sample.js
deleted file mode 100644
index 0d2c435..0000000
--- a/assets/javascripts/discourse/helpers/sample.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { registerUnbound } from "discourse-common/lib/helpers";
-
-registerUnbound("sample", function() {
-  console.log("test");
-  return 'sample';
-});
diff --git a/assets/javascripts/discourse/routes/contact.js.es6 b/assets/javascripts/discourse/routes/contact.js.es6
index 59dffa4..d78cbd2 100644
--- a/assets/javascripts/discourse/routes/contact.js.es6
+++ b/assets/javascripts/discourse/routes/contact.js.es6
@@ -6,7 +6,7 @@ import DiscourseRoute from 'discourse/routes/discourse';
 
 export default DiscourseRoute.extend({
   renderTemplate() {
-    // Renders the template `../templates/contact.hbs` Blagh
-    this.render('contact');
+    // Renders the template `../templates/contact.hbs`
+    this.render('ContactForm');
   }
 });
diff --git a/assets/javascripts/discourse/templates/contact.hbs b/assets/javascripts/discourse/templates/contact.hbs
index a827570..f65714d 100644
--- a/assets/javascripts/discourse/templates/contact.hbs
+++ b/assets/javascripts/discourse/templates/contact.hbs
@@ -1,5 +1,7 @@
 <h1>{{ i18n 'contact.title' }}</h1>
 
+<Hello />
+
 <form {{ action 'createContact' name email phone message on='submit' }}>
   <label>
     {{ i18n 'contact.create_contact.text_name_label' }}:
diff --git a/assets/stylesheets/contact.scss b/assets/stylesheets/contact.scss
index 919fa94..fe7b3a2 100644
--- a/assets/stylesheets/contact.scss
+++ b/assets/stylesheets/contact.scss
@@ -3,3 +3,8 @@ textarea {
   min-width: 500px;
   resize: vertical;
 }
+
+/* https://stackoverflow.com/questions/6046110/styling-form-with-label-above-inputs/6046196#6046196 */
+input, input {
+  display: block;
+}