diff --git a/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts b/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts
index a9b8b49..a7388c3 100644
--- a/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts
+++ b/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts
@@ -20,7 +20,7 @@ class BaseLayoutElement extends HTMLElement {
     };
 
     setElement = (newTag: string) => {
-        const _appSlot = `<${newTag}></${newTag}>`;
+        const _appSlot = `<div data-target="base-layout.content"><${newTag}></${newTag}></div>`;
         this._appSlot = _appSlot;
         this.appSlot.innerHTML = _appSlot;
     };
diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts
index 5e6dc06..04a59fd 100644
--- a/src/components/app-link/AppLinkElement.ts
+++ b/src/components/app-link/AppLinkElement.ts
@@ -51,16 +51,20 @@ class AppLinkElement extends HTMLElement {
 
     render = () => {
         return html`${this.disabled
-            ? html`<span data-target="app-link.main" style="color:grey"
+            ? html`<span
+                  class="btn btn-link btn-disabled"
+                  data-target="app-link.main"
+                  style="color:grey"
                   >${this.title}</span
               >`
             : html`<span
+                  class="btn btn-link btn-disabled"
                   data-target="app-link.main"
                   data-action="click:app-link#goTo"
                   style="text-decoration: underline; cursor: pointer;"
                   >${this.title}</span
               >`}`;
-    }
+    };
 
     update = () => {
         render(this.render(), this);
diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts
index e44a40b..f403cc8 100644
--- a/src/components/app-main/AppMainElement.ts
+++ b/src/components/app-main/AppMainElement.ts
@@ -77,17 +77,44 @@ class AppMainElement extends HTMLElement {
     };
 
     createModal = (element: string) => {
-        console.log(this.appModal);
         this.closeModal();
-        const _appModal = document.createElement("app-modal");
-        _appModal.setAttribute("data-target", "app-main.appModal");
-        const _modalElement = document.createElement(element);
-        _modalElement.setAttribute("data-target", "app-modal.modalElement");
-        _appModal.appendChild(_modalElement);
+
+        const _appModal = this.createAppModal();
+        const _modalContent = this.createModalContent(element);
+        const _modalOverlay = this.createModalOverlay();
+
+        _modalOverlay.appendChild(_modalContent);
+        _appModal.appendChild(_modalOverlay);
         this.appendChild(_appModal);
     };
 
-    createMainRoot = () => {
+    private createAppModal = () => {
+        const _appModal = document.createElement("app-modal");
+        _appModal.setAttribute("data-target", "app-main.appModal");
+        return _appModal;
+    };
+
+    private createModalContent = (element: string) => {
+        const _modalElement = document.createElement(element);
+        const _divEl = document.createElement("div");
+        _modalElement.setAttribute("data-target", "app-modal.modalElement");
+        _modalElement.setAttribute(
+            "data-action",
+            "click:app-main#preventClosing"
+        );
+        _divEl.setAttribute("data-target", "app-modal.modalContent");
+        _divEl.appendChild(_modalElement);
+        return _divEl;
+    };
+
+    private createModalOverlay = () => {
+        const _divOverlay = document.createElement("div");
+        _divOverlay.setAttribute("data-target", "app-modal.modalOverlay");
+        _divOverlay.setAttribute("data-action", "click:app-main#closeModal");
+        return _divOverlay;
+    };
+
+    private createMainRoot = () => {
         if (this.mainRoot) this.removeChild(this.mainRoot);
         const _mainRoot = document.createElement("app-root");
         _mainRoot.setAttribute("data-target", "app-main.mainRoot");
@@ -95,6 +122,10 @@ class AppMainElement extends HTMLElement {
         return _mainRoot;
     };
 
+    preventClosing = (e: Event) => {
+        e.stopPropagation();
+    };
+
     closeModal = () => {
         if (this.appModal) this.removeChild(this.appModal);
     };
diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts
index aad891e..cfd8c05 100644
--- a/src/components/app-menu/AppMenuElement.ts
+++ b/src/components/app-menu/AppMenuElement.ts
@@ -59,49 +59,55 @@ class AppMenuElement extends HTMLElement {
 
     render = () => {
         return html`
-            <ul>
-                <li>
-                    <app-link data-to="/">Home</app-link>
-                </li>
-                ${this.isAuth
-                    ? html` <li>
-                          <app-link data-to="/history">History</app-link>
-                      </li>`
-                    : null}
-                ${this.isAuth && this.totalWallets > 0
-                    ? this.walletData.map((wallet) => {
-                          return html`
+            <div data-target="app-menu.sidebar">
+                <ul>
+                    <li>
+                        <app-link data-to="/">Home</app-link>
+                    </li>
+                    ${this.isAuth
+                        ? html` <li>
+                              <app-link data-to="/history">History</app-link>
+                          </li>`
+                        : null}
+                    ${this.isAuth && this.totalWallets > 0
+                        ? this.walletData.map((wallet) => {
+                              return html`
+                                  <li>
+                                      <app-link data-to="/wallet/${wallet.id}"
+                                          >${wallet.name}</app-link
+                                      >
+                                  </li>
+                              `;
+                          })
+                        : null}
+                    ${this.isAuth && this.totalWallets > 2
+                        ? html`
                               <li>
-                                  <app-link data-to="/wallet/${wallet.id}"
-                                      >${wallet.name}</app-link
+                                  <app-link data-to="/wallet/all"
+                                      >Other</app-link
                                   >
                               </li>
-                          `;
-                      })
-                    : null}
-                ${this.isAuth && this.totalWallets > 2
-                    ? html`
-                          <li>
-                              <app-link data-to="/wallet/all">Other</app-link>
-                          </li>
-                      `
-                    : null}
-                ${this.isAuth
-                    ? html` <li>
-                          <app-link data-to="/logout">Logout</app-link>
-                      </li>`
-                    : null}
-                ${!this.isAuth
-                    ? html`
-                          <li>
-                              <app-link data-to="/login">Login</app-link>
-                          </li>
-                          <li>
-                              <app-link data-to="/register">Register</app-link>
-                          </li>
-                      `
-                    : null}
-            </ul>
+                          `
+                        : null}
+                    ${this.isAuth
+                        ? html` <li>
+                              <app-link data-to="/logout">Logout</app-link>
+                          </li>`
+                        : null}
+                    ${!this.isAuth
+                        ? html`
+                              <li>
+                                  <app-link data-to="/login">Login</app-link>
+                              </li>
+                              <li>
+                                  <app-link data-to="/register"
+                                      >Register</app-link
+                                  >
+                              </li>
+                          `
+                        : null}
+                </ul>
+            </div>
         `;
     };
 }