diff --git a/addon/components/uk-modal.js b/addon/components/uk-modal.js
index 6d9e0d79..1b35ece4 100644
--- a/addon/components/uk-modal.js
+++ b/addon/components/uk-modal.js
@@ -10,6 +10,8 @@ const noop = () => {};
 export default Component.extend({
   layout,
 
+  modalClass: "",
+  dialogClass: "",
   btnClose: true,
   escClose: true,
   bgClose: true,
diff --git a/addon/components/uk-modal/body.js b/addon/components/uk-modal/body.js
new file mode 100644
index 00000000..98c4ab78
--- /dev/null
+++ b/addon/components/uk-modal/body.js
@@ -0,0 +1,10 @@
+import Component from "@ember/component";
+import layout from "../../templates/components/uk-modal/body";
+
+export default Component.extend({
+  layout,
+
+  tagName: "div",
+
+  classNames: ["uk-modal-body"]
+});
diff --git a/addon/components/uk-modal/footer.js b/addon/components/uk-modal/footer.js
new file mode 100644
index 00000000..dee646ba
--- /dev/null
+++ b/addon/components/uk-modal/footer.js
@@ -0,0 +1,10 @@
+import Component from "@ember/component";
+import layout from "../../templates/components/uk-modal/footer";
+
+export default Component.extend({
+  layout,
+
+  tagName: "div",
+
+  classNames: ["uk-modal-footer"]
+});
diff --git a/addon/components/uk-modal/header.js b/addon/components/uk-modal/header.js
new file mode 100644
index 00000000..7d5ca7ce
--- /dev/null
+++ b/addon/components/uk-modal/header.js
@@ -0,0 +1,10 @@
+import Component from "@ember/component";
+import layout from "../../templates/components/uk-modal/header";
+
+export default Component.extend({
+  layout,
+
+  tagName: "div",
+
+  classNames: ["uk-modal-header"]
+});
diff --git a/addon/templates/components/uk-modal.hbs b/addon/templates/components/uk-modal.hbs
index 93f024d3..73515609 100644
--- a/addon/templates/components/uk-modal.hbs
+++ b/addon/templates/components/uk-modal.hbs
@@ -1,10 +1,12 @@
 {{#-in-element containerElement}}
-  <div id={{this.modalId}}>
-    <div class="uk-modal-dialog">
-      {{#if @btnClose}}<button class="uk-modal-close-default" type="button" uk-close></button>{{/if}}
-      <div class="uk-modal-body">
-        {{yield}}
-      </div>
+  <div id={{this.modalId}} class={{@modalClass}}>
+    <div class="uk-modal-dialog {{@dialogClass}}">
+      {{#if this.btnClose}}<button class="uk-modal-close-default" type="button" uk-close></button>{{/if}}
+      {{yield (hash
+        header = (component "uk-modal/header")
+        body = (component "uk-modal/body")
+        footer = (component "uk-modal/footer")
+      )}}
     </div>
   </div>
-{{/-in-element}}
\ No newline at end of file
+{{/-in-element}}
diff --git a/addon/templates/components/uk-modal/body.hbs b/addon/templates/components/uk-modal/body.hbs
new file mode 100644
index 00000000..889d9eea
--- /dev/null
+++ b/addon/templates/components/uk-modal/body.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/addon/templates/components/uk-modal/footer.hbs b/addon/templates/components/uk-modal/footer.hbs
new file mode 100644
index 00000000..889d9eea
--- /dev/null
+++ b/addon/templates/components/uk-modal/footer.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/addon/templates/components/uk-modal/header.hbs b/addon/templates/components/uk-modal/header.hbs
new file mode 100644
index 00000000..889d9eea
--- /dev/null
+++ b/addon/templates/components/uk-modal/header.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/addon/templates/components/uk-modal/modal.hbs b/addon/templates/components/uk-modal/modal.hbs
deleted file mode 100644
index fb5c4b15..00000000
--- a/addon/templates/components/uk-modal/modal.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{yield}}
\ No newline at end of file
diff --git a/app/components/uk-modal/body.js b/app/components/uk-modal/body.js
new file mode 100644
index 00000000..b8134ff7
--- /dev/null
+++ b/app/components/uk-modal/body.js
@@ -0,0 +1 @@
+export { default } from "ember-uikit/components/uk-modal/body";
diff --git a/app/components/uk-modal/footer.js b/app/components/uk-modal/footer.js
new file mode 100644
index 00000000..951621a1
--- /dev/null
+++ b/app/components/uk-modal/footer.js
@@ -0,0 +1 @@
+export { default } from "ember-uikit/components/uk-modal/footer";
diff --git a/app/components/uk-modal/header.js b/app/components/uk-modal/header.js
new file mode 100644
index 00000000..5dfaed19
--- /dev/null
+++ b/app/components/uk-modal/header.js
@@ -0,0 +1 @@
+export { default } from "ember-uikit/components/uk-modal/header";
diff --git a/config/ember-try.js b/config/ember-try.js
index 3dbd7189..6a0f77ed 100644
--- a/config/ember-try.js
+++ b/config/ember-try.js
@@ -4,6 +4,7 @@ const getChannelURL = require("ember-source-channel-url");
 
 module.exports = async function() {
   return {
+    useYarn: true,
     scenarios: [
       {
         name: "ember-lts-3.8",
diff --git a/tests/dummy/app/controllers/docs/components/modal.js b/tests/dummy/app/controllers/docs/components/modal.js
index 25d1163b..c045d6fd 100644
--- a/tests/dummy/app/controllers/docs/components/modal.js
+++ b/tests/dummy/app/controllers/docs/components/modal.js
@@ -2,7 +2,10 @@ import Controller from "@ember/controller";
 
 export default Controller.extend({
   visible: false,
+  btnClose: true,
   closable: true,
+  modalClass: "",
+  dialogClass: "",
 
   actions: {
     submit() {
diff --git a/tests/dummy/app/snippets/modal.hbs b/tests/dummy/app/snippets/modal.hbs
index 3814f881..1ab4dd0b 100644
--- a/tests/dummy/app/snippets/modal.hbs
+++ b/tests/dummy/app/snippets/modal.hbs
@@ -1,9 +1,13 @@
-{{#uk-modal visible=visible on-hide=(action (mut visible) false)}}
-  <h2 class="uk-modal-title">Attention</h2>
-  <p>Do you really want to proceed?</p>
-  <p class="uk-text-right">
+{{#uk-modal visible=visible on-hide=(action (mut visible) false) as |modal|}}
+  {{#modal.header}}
+    <h2 class="uk-modal-title">Attention</h2>
+  {{/modal.header}}
+  {{#modal.body}}
+    <p>Do you really want to proceed?</p>
+  {{/modal.body}}
+  {{#modal.footer class="uk-text-right"}}
     {{uk-button color="primary" label="Ok" on-click=(action "submit")}}
-  </p>
+  {{/modal.footer}}
 {{/uk-modal}}
 
-{{uk-button label="Open modal" on-click=(action (mut visible) true)}}
\ No newline at end of file
+{{uk-button label="Open modal" on-click=(action (mut visible) true)}}
diff --git a/tests/dummy/app/templates/docs/components/modal.hbs b/tests/dummy/app/templates/docs/components/modal.hbs
index 2239f694..5d1e13b0 100644
--- a/tests/dummy/app/templates/docs/components/modal.hbs
+++ b/tests/dummy/app/templates/docs/components/modal.hbs
@@ -3,14 +3,23 @@
 <div class="uk-padding uk-box-shadow-medium uk-margin">
   {{#uk-modal
     visible=visible
+    btnClose=btnClose
+    modalClass=modalClass
+    dialogClass=dialogClass
     on-show=(action (mut visible) true)
     on-hide=(action (mut visible) false)
+    as |modal|
   }}
-    <h2 class="uk-modal-title">Test</h2>
-    <p>Lorem Ipsum</p>
-    <p class="uk-text-right">
+
+    {{#modal.header}}
+      <h2 class="uk-modal-title">Test</h2>
+    {{/modal.header}}
+    {{#modal.body uk-modal-overflow-auto}}
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    {{/modal.body}}
+    {{#modal.footer class="uk-text-right"}}
       {{uk-button color="primary" label="Submit" on-click=(action "submit")}}
-    </p>
+    {{/modal.footer}}
   {{/uk-modal}}
 
   {{uk-button label="Open modal" on-click=(action (mut visible true))}}
@@ -47,6 +56,29 @@
                 {{input type="checkbox" class="uk-checkbox" checked=visible}}
               </td>
             </tr>
+            <tr>
+              <td><code>btnClose</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>true</code></td>
+              <td>Whether a button to close the modal should show up in the top right corner or not</td>
+              <td>
+                {{input type="checkbox" class="uk-checkbox" checked=btnClose}}
+              </td>
+            </tr>
+            <tr>
+              <td><code>modalClass</code></td>
+              <td><code>String</code></td>
+              <td><code>""</code></td>
+              <td>Add CSS classes to the modal.</td>
+              <td>{{input class="uk-input" value=modalClass}}</td>
+            </tr>
+            <tr>
+              <td><code>dialogClass</code></td>
+              <td><code>String</code></td>
+              <td><code>""</code></td>
+              <td>Add CSS classes to the dialog.</td>
+              <td>{{input class="uk-input" value=dialogClass}}</td>
+            </tr>
             <tr>
               <td><code>escClose</code></td>
               <td><code>Boolean</code></td>
diff --git a/tests/integration/components/uk-modal-test.js b/tests/integration/components/uk-modal-test.js
index c9cf92a8..c800688f 100644
--- a/tests/integration/components/uk-modal-test.js
+++ b/tests/integration/components/uk-modal-test.js
@@ -10,8 +10,10 @@ module("Integration | Component | uk-modal", function(hooks) {
     assert.expect(1);
 
     await render(hbs`
-      {{#uk-modal}}
-        <h2>Test</h2>
+      {{#uk-modal as |modal|}}
+        {{#modal.header}}
+          <h2>Test</h2>
+        {{/modal.header}}
       {{/uk-modal}}
     `);
 
@@ -25,7 +27,15 @@ module("Integration | Component | uk-modal", function(hooks) {
 
     await render(hbs`
       {{#uk-modal visible=true}}
-        <h2>Test</h2>
+        {{#modal.header}}
+          <h2>Test</h2>
+        {{/modal.header}}
+        {{#modal.body}}
+          <p>Lorem ipsum</p>
+        {{/modal.body}}
+        {{#modal.footer class="uk-text-right"}}
+          <button></button>
+        {{/modal.footer}}
       {{/uk-modal}}
     `);
 
@@ -41,7 +51,9 @@ module("Integration | Component | uk-modal", function(hooks) {
 
     await render(hbs`
       {{#uk-modal visible=true on-hide=hide}}
-        <h2>Test</h2>
+        {{#modal.header}}
+          <h2>Test</h2>
+        {{/modal.header}}
       {{/uk-modal}}
     `);
 
diff --git a/tests/integration/components/uk-modal/body-test.js b/tests/integration/components/uk-modal/body-test.js
new file mode 100644
index 00000000..f405b419
--- /dev/null
+++ b/tests/integration/components/uk-modal/body-test.js
@@ -0,0 +1,26 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+module("Integration | Component | uk-modal/body", function(hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{uk-modal/body}}`);
+
+    assert.equal(this.element.textContent.trim(), "");
+
+    // Template block usage:
+    await render(hbs`
+      {{#uk-modal/body}}
+        template block text
+      {{/uk-modal/body}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), "template block text");
+  });
+});
diff --git a/tests/integration/components/uk-modal/footer-test.js b/tests/integration/components/uk-modal/footer-test.js
new file mode 100644
index 00000000..2251bd3f
--- /dev/null
+++ b/tests/integration/components/uk-modal/footer-test.js
@@ -0,0 +1,26 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+module("Integration | Component | uk-modal/header", function(hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{uk-modal/footer}}`);
+
+    assert.equal(this.element.textContent.trim(), "");
+
+    // Template block usage:
+    await render(hbs`
+      {{#uk-modal/footer}}
+        template block text
+      {{/uk-modal/footer}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), "template block text");
+  });
+});
diff --git a/tests/integration/components/uk-modal/header-test.js b/tests/integration/components/uk-modal/header-test.js
new file mode 100644
index 00000000..75970f93
--- /dev/null
+++ b/tests/integration/components/uk-modal/header-test.js
@@ -0,0 +1,26 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+module("Integration | Component | uk-modal/footer", function(hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{uk-modal/header}}`);
+
+    assert.equal(this.element.textContent.trim(), "");
+
+    // Template block usage:
+    await render(hbs`
+      {{#uk-modal/header}}
+        template block text
+      {{/uk-modal/header}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), "template block text");
+  });
+});