diff --git a/addon/components/s-modal.js b/addon/components/s-modal.js
index e07146f..38f0aca 100644
--- a/addon/components/s-modal.js
+++ b/addon/components/s-modal.js
@@ -3,6 +3,15 @@ import layout from '../templates/components/s-modal';
 
 export default Component.extend({
     layout,
-    classNames: ['s-modal']
+    classNames: ['s-modal'],
+    isVisible: true,
+    actions: {
+        onCancel() {
+            this.set('isVisible', false);
+            if (this.get('onCancelAction')) {
+                this.get('onCancelAction')();
+            }
+        }
+    }
 
 });
diff --git a/addon/templates/components/s-modal.hbs b/addon/templates/components/s-modal.hbs
index c2d2bdd..1515cbd 100644
--- a/addon/templates/components/s-modal.hbs
+++ b/addon/templates/components/s-modal.hbs
@@ -1,7 +1,9 @@
+
 <div
   data-test-id={{data-test-id}}
-  class="modal fade show d-block"
+  class="modal fade {{if isVisible "show d-block"}}"
   role="dialog"
+  style="{{unless isVisible "display:none;"}}"
   aria-labelledby="exampleModalLabel"
   aria-hidden="true">
   <div
@@ -12,25 +14,23 @@
       {{#if header}}
         <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLabel">{{header}}</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <button type="button" onClick={{action 'onCancel'}} class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
       {{/if}}
-      <div  class="modal-body">
+      <div class="modal-body">
         {{yield}}
       </div>
       <div class="modal-footer">
-        {{#if onCancel }}
           {{#s-button
-            onClick=(action onCancel)
+            onClick=(action 'onCancel')
             cssClasses="float-left"
             color= "secondary"
             data-dismiss="modal"
           }}
             {{cancelText}}
           {{/s-button}}
-        {{/if}}
         {{#if onOK }}
           {{#s-button
             color="primary"
diff --git a/tests/dummy/app/templates/docs/modal.md b/tests/dummy/app/templates/docs/modal.md
index 4be2594..4ef9189 100644
--- a/tests/dummy/app/templates/docs/modal.md
+++ b/tests/dummy/app/templates/docs/modal.md
@@ -19,7 +19,6 @@
             header="Modal Header"
             onOK=(action "onOk")
             okText="OK"
-            onCancel=(action "toggleModal")
             cancelText="Close"
             }}
                 {{pressed}}
@@ -36,6 +35,6 @@
 | header   | Modal header                             | String | ""    |
 | onOK  | action callback on ok click                | event  | null    |
 | okText  |Ok button text                | String  | ""    |
-| onCancel  | action callback on ok cancel               | event  | null    |
+| onCancelAction  | action callback on ok cancel               | event  | null    |
 | cancelText  | Cancel button text                       | event  | null    |
 | modelDialogClassNames  | css Class on container         | String  | ""    |