diff --git a/common/loginpage/src/css/styles.less b/common/loginpage/src/css/styles.less
index cadf521a8..ef5025c50 100644
--- a/common/loginpage/src/css/styles.less
+++ b/common/loginpage/src/css/styles.less
@@ -1880,6 +1880,7 @@ li.menu-item {
     .btn.btn--big.btn--svg.login {
       margin: 7px;
       padding: 0;
+      background-color: @background-action-panel;
     }
   }
 
@@ -1887,6 +1888,7 @@ li.menu-item {
     .btn.btn--big.btn--svg.login {
       width: 330px;
       height: 48px;
+      background-color: @background-action-panel;
     }
   }
 
@@ -2444,6 +2446,7 @@ li.menu-item {
     flex-direction: column;
     
     .name {
+      color: @text-normal;
       font-weight: bold;
       font-size: 14px;
       margin: 4px 0 10px;
diff --git a/common/loginpage/src/css/window.less b/common/loginpage/src/css/window.less
index 6d039d74f..a48fc9068 100644
--- a/common/loginpage/src/css/window.less
+++ b/common/loginpage/src/css/window.less
@@ -47,81 +47,85 @@ dialog {
         }
     }
 
-    &.dlg-about {
-        .title {
-            font-size: 18px;
-            display: flex;
-            justify-content: space-between;
-            padding: 30px 16px 16px 32px;
-            background: none;
-        }
-
-        .body {
-            padding: 0px 30px 28px;
-        }
-
-        .separator {
-            padding-top: 5px;
-            border-bottom: @scaled-one-px solid @border-divider;
-        }
-    }
-
-    &.dlg-template-preview {
-        overflow: hidden;
-        background-color: @background-action-panel;
-        .title {
-            height: 48px;
-            padding: 12px 16px;
-            background-color: @background-action-panel;
-        }
-
-        .body {
-            padding: 0 24px 24px;
-        }
-
-        .separator {
-            padding-top: 15px;
-            border-top: @scaled-one-px solid @border-divider;
-        }
-    }
-
-    &.dlg-providers, &.dlg-connect-to, &.dlg-template-preview, &.dlg-about {
+    &.dlg {
         border-radius: 8px;
+        background-color: @background-action-panel;
         .title {
             border-bottom: initial;
             font-weight: bold;
-        }
-    }
-
-    &.dlg-providers {
-        overflow: hidden;
-        .title, .body,  .empty .btn.btn--big.btn--svg.login {
             background-color: @background-action-panel;
         }
-        .body {
-            padding: 10px 25px;
-        }
-    }
 
-    &.dlg-connect-to {
-        background-color: @background-action-panel;
-        will-change: transform;
-        .title {
-            height: 56px;
-            padding: 16px 16px 16px 32px;
-            .rtl &{
-                padding: 16px 32px 16px 16px;
+        &.dlg-about {
+            will-change: transform;
+            .title {
+                font-size: 18px;
+                display: flex;
+                justify-content: space-between;
+                padding: 30px 16px 16px 32px;
+                background: none;
+                .rtl &{
+                    padding: 30px 32px 16px 16px;
+                }
+            }
+
+            .body {
+                padding: 0px 30px 28px;
+                .separator {
+                    padding-top: 5px;
+                    border-bottom: @scaled-one-px solid @border-divider;
+                }
             }
         }
-        .body {
-            padding: 0 32px 16px;
+
+        &.dlg-template-preview {
+            overflow: hidden;
+            .title {
+                height: 48px;
+                padding: 12px 16px;
+            }
+
+            .body {
+                padding: 0 24px 24px;
+                .separator {
+                    padding-top: 15px;
+                    border-top: @scaled-one-px solid @border-divider;
+                }
+            }
         }
-        .title, .body {
-            background-color: transparent;
+
+        &.dlg-providers {
+            overflow: hidden;
+            will-change: transform;
+            .body {
+                padding: 10px 25px;
+            }
         }
-        .box-cmp-select .btn, .tbox,
-        button.btn.btn--landing {
-            border-radius: 4px;
+
+        &.dlg-connect-to {
+            will-change: transform;
+            .title {
+                height: 56px;
+                padding: 16px 16px 16px 32px;
+                .rtl &{
+                    padding: 16px 32px 16px 16px;
+                }
+            }
+
+            .body {
+                padding: 0 32px 16px;
+                .btn, .tbox {
+                border-radius: 4px;
+                }
+
+                .box-cmp-select {
+                    width: 100%;
+                }
+            }
+
+            .title, .body {
+                background-color: transparent;
+            }
         }
     }
 
@@ -265,12 +269,6 @@ dialog {
     }
 }
 
-.dlg-connect-to {
-    .box-cmp-select {
-        width: 100%;
-    }
-}
-
 .lr-flex {
     display: flex;
     justify-content: space-between;
@@ -332,6 +330,3 @@ dialog {
     }
 }
 
-dialog.dlg-about {
-    will-change: transform;
-}
diff --git a/common/loginpage/src/dialogpreview.js b/common/loginpage/src/dialogpreview.js
index 16b37e951..212cc6926 100644
--- a/common/loginpage/src/dialogpreview.js
+++ b/common/loginpage/src/dialogpreview.js
@@ -1,9 +1,47 @@
 function PreviewTemplateDialog(model, params = {}) {
+    const type = utils.parseFileFormat(model.type);
+    const size = formatSize(model.size);
+
+    const bodyTemplate = `
+        <div class="template-preview-body">
+            <div class="img-container">
+                <svg class='icon--default'><use xlink:href='#template-item'></use></svg>
+                <img class="icon" src="${model.preview}" style="display:none;">
+            </div>
+            <div class="description">
+                <h3 class="name">${model.name}</h3>
+                <p class="pricing" l10n>${utils.Lang.tplFree}</p>
+                <p class="descr">${model.descr}</p>
+                <div class="file-info separator">
+                    <div>
+                        <span class="label" l10n>${utils.Lang.tplFileSize}:</span>
+                        <span class="value">${size}</span>
+                    </div>
+                    <div>
+                        <span class="label" l10n>${utils.Lang.tplFileType}:</span>
+                        <span class="value">${type}</span>
+                    </div>
+                </div>
+                <button class="btn btn--landing" l10n>${utils.Lang.tplUseTemplate}</button>
+            </div>
+        </div>
+    `;
+
+    function formatSize(size) {
+        if (!size) return '';
+        if (size < 1024) {
+            return Math.round(size) + ' kb';
+        } else {
+            return Math.round(size / 1024) + ' mb';
+        }
+    }
+
     params = {
         ...params,
         dialogClass: 'dlg-template-preview',
         titleText: utils.Lang.actPreviewTemplates,
         defaultWidth: 800,
+        bodyTemplate: bodyTemplate
     };
 
     Dialog.call(this, params);
@@ -17,6 +55,13 @@ PreviewTemplateDialog.prototype.show = function(width) {
     Dialog.prototype.show.call(this, width);
 
     const {$el} = this.getElements();
+    const $img = $el.find('img.icon');
+    const $icon = $el.find('svg.icon--default');
+
+    $img.on('load', () => {
+        $icon.hide();
+        $img.show();
+    });
 
     $el.find('.btn.btn--landing').on('click', () => {
         this.close();
diff --git a/common/loginpage/src/paneltemplates.js b/common/loginpage/src/paneltemplates.js
index cdb83efe0..8b553f55b 100644
--- a/common/loginpage/src/paneltemplates.js
+++ b/common/loginpage/src/paneltemplates.js
@@ -149,48 +149,9 @@
                             ${cloudIcon}
                         </div>
                     </div>`;
-        },
-
-        templateDialogBody: function(model) {
-            const type = utils.parseFileFormat(model.type);
-            const size = formatSize(model.size);
-
-            return `
-                <div class="template-preview-body">
-                    <div class="img-container">
-                        <svg class='icon--default'><use xlink:href='#template-item'></use></svg>
-                        <img class="icon" src="${model.preview}">
-                    </div>
-                    <div class="description">
-                        <h3 class="name">${model.name}</h3>
-                        <p class="pricing" l10n>${utils.Lang.tplFree}</p>
-                        <p class="descr">${model.descr}</p>
-                        <div class="file-info separator">
-                            <div>
-                                <span class="label" l10n>${utils.Lang.tplFileSize}:</span>
-                                <span class="value">${size}</span>
-                            </div>
-                            <div>
-                                <span class="label" l10n>${utils.Lang.tplFileType}:</span>
-                                <span class="value">${type}</span>
-                            </div>
-                        </div>
-                        <button class="btn btn--landing" l10n>${utils.Lang.tplUseTemplate}</button>
-                    </div>
-                </div>
-            `;
         }
     });
 
-    function formatSize(size) {
-        if (!size) return '';
-        if (size < 1024) {
-            return Math.round(size) + ' kb';
-        } else {
-            return Math.round(size / 1024) + ' mb';
-        }
-    }
-
     utils.fn.extend(ControllerTemplates.prototype, (function() {
         let isCloudTmplsLoading = false;
 
@@ -257,17 +218,7 @@
 
                 collection.events.click.attach((col, model) => {
                     if (model.isCloud) {
-                        const body = this.view.templateDialogBody(model);
-                        const $body = $(body);
-                        const $img = $body.find('img.icon');
-                        const $icon = $body.find('.icon--default');
-
-                        $img.on('load', () => {
-                            $icon.hide();
-                            $img.show();
-                        });
-
-                        new PreviewTemplateDialog(model, { bodyTemplate: $body }).show();
+                        new PreviewTemplateDialog(model).show();
                     } else {
                         sdk.command('create:new', JSON.stringify({
                             template: {