diff --git a/utils/modal/full-screen-modal/full-screen-modal.component.ts b/utils/modal/full-screen-modal/full-screen-modal.component.ts
index 59fb76b9..1eaddbb7 100644
--- a/utils/modal/full-screen-modal/full-screen-modal.component.ts
+++ b/utils/modal/full-screen-modal/full-screen-modal.component.ts
@@ -1,35 +1,25 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import {Component, ElementRef, EventEmitter, OnInit, Output} from "@angular/core";
+import {fromEvent, Subscription} from 'rxjs';
+import {delay} from "rxjs/operators";
 
 @Component({
   selector: 'fs-modal',
   template: `
-    <div class="fs-modal">
-      <a class="close" (click)="close()">
-        <icon name="close" ratio="2"></icon>
-      </a>
-      <div class="header">
-        <div class="uk-position-relative uk-height-1-1">
-          <h5 *ngIf="title" class="uk-position-center">
-            {{title}}
-          </h5>
-          <div *ngIf="keys" class="uk-position-center-right uk-visible@m">
-            <button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>
-            <button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>
-          </div>
+    <div class="fs-modal" (click)="close()">
+      <div id="fs-modal" (click)="$event.stopPropagation()" class="fs-modal-dialog">
+        <a class="close" (click)="close()">
+          <icon name="close"></icon>
+        </a>
+        <div class="header">
+          <h6 *ngIf="title">{{title}}</h6>
         </div>
-      </div>
-      <div class="content">
-        <div class="content-header">
-          <div *ngIf="keys" class="uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-bottom uk-hidden@m">
-            <button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>
-            <button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>
-          </div>
-          <ng-content select="[header]">
-          </ng-content>
-        </div>
-        <div class="content-inner">
+        <div class="content" [class.hasFooter]="keys">
           <ng-content></ng-content>
         </div>
+        <div *ngIf="keys" class="footer uk-flex uk-flex-right">
+          <button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>
+          <button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>
+        </div>
       </div>
     </div>
   `
@@ -45,30 +35,39 @@ export class FullScreenModalComponent implements OnInit {
   cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   opened: boolean = false;
   private readonly element: any;
+  private subscriptions: any[] = [];
   
   constructor(private el: ElementRef) {
     this.element = el.nativeElement;
   }
   
   ngOnInit() {
-    if(typeof document !== "undefined") {
+    if (typeof document !== "undefined") {
       document.body.appendChild(this.element);
+      this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {
+        this.close();
+      }));
     }
   }
   
   ngOnDestroy(): void {
     this.element.remove();
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      }
+    })
   }
   
   open() {
-    if(typeof document !== "undefined") {
+    if (typeof document !== "undefined") {
       this.opened = true;
       document.getElementsByTagName('html')[0].classList.add('fs-modal-open');
     }
   }
   
   close() {
-    if(typeof document !== "undefined") {
+    if (typeof document !== "undefined") {
       this.opened = false;
       document.getElementsByTagName('html')[0].classList.remove('fs-modal-open');
       this.cancelEmitter.emit();