diff --git a/src/app/convert/controllers/ConvertThumbnailController.php b/src/app/convert/controllers/ConvertThumbnailController.php
index ef30878ab1f9646e7477e5e9e11e91930d174061..ac8cc6e47467b5c7260b916ff254f2591ec8e175 100644
--- a/src/app/convert/controllers/ConvertThumbnailController.php
+++ b/src/app/convert/controllers/ConvertThumbnailController.php
@@ -14,7 +14,6 @@
 
 namespace Convert\controllers;
 
-
 use Attachment\models\AttachmentModel;
 use Convert\models\AdrModel;
 use Docserver\controllers\DocserverController;
@@ -37,8 +36,10 @@ class ConvertThumbnailController
         if ($aArgs['collId'] == 'letterbox_coll') {
             if (empty($aArgs['outgoingId'])) {
                 $resource = ResModel::getById(['resId' => $aArgs['resId'], 'select' => ['docserver_id', 'path', 'filename']]);
+                $convertedDocument = ResModel::getConvertedPdfById(['select' => ['docserver_id', 'path', 'filename'], 'resId' => $aArgs['resId']]);
             } else {
                 $resource = AttachmentModel::getById(['id' => $aArgs['outgoingId'], 'isVersion' => $aArgs['isOutgoingVersion'], 'select' => ['docserver_id', 'path', 'filename']]);
+                $convertedDocument =  AttachmentModel::getConvertedPdfById(['select' => ['docserver_id', 'path', 'filename'], 'resId' => $aArgs['outgoingId'], 'isVersion' => $aArgs['isOutgoingVersion']]);
             }
         }
 
@@ -46,14 +47,22 @@ class ConvertThumbnailController
             return ['errors' => '[ConvertThumbnail] Resource does not exist'];
         }
 
-        $docserver = DocserverModel::getByDocserverId(['docserverId' => $resource['docserver_id'], 'select' => ['path_template']]);
-        if (empty($docserver['path_template']) || !file_exists($docserver['path_template'])) {
-            return ['errors' => '[ConvertThumbnail] Docserver does not exist'];
-        }
+        if (empty($convertedDocument)) {
+            $docserver = DocserverModel::getByDocserverId(['docserverId' => $resource['docserver_id'], 'select' => ['path_template']]);
+            if (empty($docserver['path_template']) || !file_exists($docserver['path_template'])) {
+                return ['errors' => '[ConvertThumbnail] Docserver does not exist'];
+            }
 
-        $pathToDocument = $docserver['path_template'] . str_replace('#', DIRECTORY_SEPARATOR, $resource['path']) . $resource['filename'];
-        if (!file_exists($pathToDocument)) {
-            return ['errors' => '[ConvertThumbnail] Document does not exist on docserver'];
+            $pathToDocument = $docserver['path_template'] . str_replace('#', DIRECTORY_SEPARATOR, $resource['path']) . $resource['filename'];
+            if (!file_exists($pathToDocument)) {
+                return ['errors' => '[ConvertThumbnail] Document does not exist on docserver'];
+            }
+        } else {
+            $docserver = DocserverModel::getByDocserverId(['docserverId' => $convertedDocument['docserver_id'], 'select' => ['path_template']]);
+            $pathToDocument = $docserver['path_template'] . str_replace('#', DIRECTORY_SEPARATOR, $convertedDocument['path']) . $convertedDocument['filename'];
+            if (!file_exists($pathToDocument)) {
+                return ['errors' => '[ConvertThumbnail] Document does not exist on docserver'];
+            }
         }
 
         $ext = pathinfo($pathToDocument, PATHINFO_EXTENSION);
diff --git a/src/frontend/app/home.component.html b/src/frontend/app/home.component.html
index bf1916e0b6db95195201fee49c01db90456f6502..9da7aba6c2c2ef13170f5abdd038eba97ecb0b07 100755
--- a/src/frontend/app/home.component.html
+++ b/src/frontend/app/home.component.html
@@ -7,9 +7,9 @@
             <basket-home *ngIf="homeData" [homeData]="homeData" [snavL]="snav"></basket-home>
             <mat-divider></mat-divider>
         </mat-sidenav>
-        <mat-sidenav-content>
+        <mat-sidenav-content id="listContent">
             <mat-card class="card-app-content">
-                <mat-card id="viewThumbnail" style="display:none;position: absolute;z-index: 2;height: 600px;width: 400px;"></mat-card>
+                <mat-card id="viewThumbnail" style="display:none;position: absolute;z-index: 2;"><img src="{{thumbnailUrl}}"/></mat-card>
                 <mat-card>
                     <div style="display: flex">
                         <div *ngIf="!mobileMode" style="text-align:center;flex: 1;background: url(static.php?filename=logo_only.svg);background-size: auto auto;height: 70px;background-size: contain;background-repeat: no-repeat;background-position: center;">
diff --git a/src/frontend/app/home.component.ts b/src/frontend/app/home.component.ts
index 01c136df8fc934eb5cf17813f30906e34f76b3b8..a10c81f251c6438d809f189a9f42e9307dcb84f5 100755
--- a/src/frontend/app/home.component.ts
+++ b/src/frontend/app/home.component.ts
@@ -23,6 +23,7 @@ export class HomeComponent extends AutoCompletePlugin implements OnInit {
     mobileQuery: MediaQueryList;
     mobileMode: boolean   = false;
     coreUrl: string;
+    thumbnailUrl: string;
     lang: any = LANG;
 
     loading: boolean = false;
@@ -92,13 +93,14 @@ export class HomeComponent extends AutoCompletePlugin implements OnInit {
     }
 
     viewThumbnail(row:any) {
-        $j('#viewThumbnail').css({'background':'white url('+this.coreUrl+'rest/res/' + row.res_id + '/thumbnail) no-repeat 100%'});
-        $j('#viewThumbnail').css({'background-size': '100%'});
+        this.thumbnailUrl = this.coreUrl+'rest/res/' + row.res_id + '/thumbnail';
         $j('#viewThumbnail').show();
+        $j('#listContent').css({"overflow":"hidden"});
     }
 
     closeThumbnail() {
         $j('#viewThumbnail').hide();
+        $j('#listContent').css({"overflow":"auto"});
     }
 
     goToDetail(row:any){