diff --git a/functions/package-lock.json b/functions/package-lock.json
index 617b6eb9..2c82029d 100644
--- a/functions/package-lock.json
+++ b/functions/package-lock.json
@@ -13,12 +13,12 @@
         "cors": "^2.8.5",
         "deepl-node": "^1.15.0",
         "express": "^4.21.2",
-        "firebase-admin": "^13.0.1",
-        "firebase-functions": "^6.1.1",
+        "firebase-admin": "^13.0.2",
+        "firebase-functions": "^6.2.0",
         "sharp": "^0.33.5",
         "stripe": "^17.4.0",
-        "uuid": "^11.0.3",
-        "zod": "^3.23.8"
+        "uuid": "^11.0.5",
+        "zod": "^3.24.1"
       },
       "devDependencies": {
         "@types/express": "^4.17.21",
@@ -3071,9 +3071,9 @@
       }
     },
     "node_modules/firebase-admin": {
-      "version": "13.0.1",
-      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-13.0.1.tgz",
-      "integrity": "sha512-sKQ/Yw8o/WdC9qTKvuLMBjTbdcBISIXW4+M9PXk0bNjxEbZf1Er7EVq47eRb5+bnKof10xlns6zAIbj4tmSexg==",
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-13.0.2.tgz",
+      "integrity": "sha512-YWVpoN+tZVSRXF0qC0gojoF5bSqvBRbnBk8+xUtFiguM2L4vB7f0moAwV1VVWDDHvTnvQ68OyTMpdp6wKo/clw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@fastify/busboy": "^3.0.0",
@@ -3091,14 +3091,14 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@google-cloud/firestore": "^7.10.0",
+        "@google-cloud/firestore": "^7.11.0",
         "@google-cloud/storage": "^7.14.0"
       }
     },
     "node_modules/firebase-functions": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/firebase-functions/-/firebase-functions-6.1.1.tgz",
-      "integrity": "sha512-q+4zsQhX04YJUz6hqaiH/j5kixljPj0PMxkm8KN3juYp3I4NC6CZ4qfy5JRfwvV8VfXM2KkJrZuyJtLyZr97aw==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/firebase-functions/-/firebase-functions-6.2.0.tgz",
+      "integrity": "sha512-vfyyVHS8elxplzEQ9To+NaINRPFUsDasQrasTa2eFJBYSPzdhkw6rwLmvwyYw622+ze+g4sDIb14VZym+afqXQ==",
       "license": "MIT",
       "dependencies": {
         "@types/cors": "^2.8.5",
@@ -6082,9 +6082,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.3.tgz",
-      "integrity": "sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==",
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.5.tgz",
+      "integrity": "sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
@@ -6309,9 +6309,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.23.8",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
-      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/functions/package.json b/functions/package.json
index f07f90fa..798a4a48 100644
--- a/functions/package.json
+++ b/functions/package.json
@@ -24,12 +24,12 @@
     "cors": "^2.8.5",
     "deepl-node": "^1.15.0",
     "express": "^4.21.2",
-    "firebase-admin": "^13.0.1",
-    "firebase-functions": "^6.1.1",
+    "firebase-admin": "^13.0.2",
+    "firebase-functions": "^6.2.0",
     "sharp": "^0.33.5",
     "stripe": "^17.4.0",
-    "uuid": "^11.0.3",
-    "zod": "^3.23.8"
+    "uuid": "^11.0.5",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "openapi3-ts": "^4.4.0",
diff --git a/functions/src/contents.ts b/functions/src/contents.ts
index bacc4bcd..f6faf486 100644
--- a/functions/src/contents.ts
+++ b/functions/src/contents.ts
@@ -317,6 +317,19 @@ const onContentWrite = onDocumentWritten('spaces/{spaceId}/contents/{contentId}'
   }
 
   await findContentsHistory(spaceId, contentId).add(addHistory);
+  const countSnapshot = await findContentsHistory(spaceId, contentId).count().get();
+  const { count } = countSnapshot.data();
+  if (count > 30) {
+    const historySnapshot = await findContentsHistory(spaceId, contentId)
+      .orderBy('createdAt', 'asc')
+      .limit(count - 30)
+      .get();
+    if (historySnapshot.size > 0) {
+      const batch = firestoreService.batch();
+      historySnapshot.docs.forEach(doc => batch.delete(doc.ref));
+      await batch.commit();
+    }
+  }
   return;
 });
 
diff --git a/functions/src/models/content.zod.ts b/functions/src/models/content.zod.ts
index 7769cacc..97246a5a 100644
--- a/functions/src/models/content.zod.ts
+++ b/functions/src/models/content.zod.ts
@@ -18,7 +18,7 @@ export const contentBaseSchema = z.object({
 export const contentDocumentSchema = contentBaseSchema.extend({
   kind: z.literal(ContentKind.DOCUMENT),
   schema: z.string(),
-  data: contentDataSchema.optional(),
+  data: z.string().optional().or(contentDataSchema.optional()),
 });
 
 export const contentFolderSchema = contentBaseSchema.extend({
diff --git a/functions/src/services/open-api.service.ts b/functions/src/services/open-api.service.ts
index 401edb42..958a5807 100644
--- a/functions/src/services/open-api.service.ts
+++ b/functions/src/services/open-api.service.ts
@@ -692,6 +692,16 @@ export function generateOpenApi(schemasById: Map<string, Schema>): OpenAPIObject
                 example: false,
               },
             },
+            {
+              name: 'thumbnail',
+              in: 'query',
+              description: 'In case you have animated image like WebP/Gif, and you wish to generate non animated thumbnail.',
+              required: false,
+              schema: {
+                type: 'boolean',
+                example: false,
+              },
+            },
           ],
           responses: {
             '200': {
diff --git a/functions/src/translations.ts b/functions/src/translations.ts
index 5220e027..1ecce578 100644
--- a/functions/src/translations.ts
+++ b/functions/src/translations.ts
@@ -3,7 +3,7 @@ import { HttpsError, onCall } from 'firebase-functions/v2/https';
 import { onDocumentCreated, onDocumentWritten } from 'firebase-functions/v2/firestore';
 import { FieldValue, WithFieldValue } from 'firebase-admin/firestore';
 import { canPerform } from './utils/security-utils';
-import { bucket } from './config';
+import { bucket, firestoreService } from './config';
 import { PublishTranslationsData, Space, Translation, TranslationHistory, TranslationHistoryType, UserPermission } from './models';
 import { findSpaceById, findTranslations, findTranslationsHistory } from './services';
 import { translateCloud } from './services/translate.service';
@@ -147,6 +147,19 @@ const onWriteToHistory = onDocumentWritten('spaces/{spaceId}/translations/{trans
     addHistory.name = afterData.updatedBy.name;
   }
   await findTranslationsHistory(spaceId).add(addHistory);
+  const countSnapshot = await findTranslationsHistory(spaceId).count().get();
+  const { count } = countSnapshot.data();
+  if (count > 30) {
+    const historySnapshot = await findTranslationsHistory(spaceId)
+      .orderBy('createdAt', 'asc')
+      .limit(count - 30)
+      .get();
+    if (historySnapshot.size > 0) {
+      const batch = firestoreService.batch();
+      historySnapshot.docs.forEach(doc => batch.delete(doc.ref));
+      await batch.commit();
+    }
+  }
   return;
 });
 
diff --git a/functions/src/v1.ts b/functions/src/v1.ts
index b2a9f629..3f6e040e 100644
--- a/functions/src/v1.ts
+++ b/functions/src/v1.ts
@@ -347,7 +347,7 @@ expressApp.get('/api/v1/spaces/:spaceId/assets/:assetId', async (req, res) => {
   logger.info('v1 spaces asset params: ' + JSON.stringify(req.params));
   logger.info('v1 spaces asset query: ' + JSON.stringify(req.query));
   const { spaceId, assetId } = req.params;
-  const { w: width, download } = req.query;
+  const { w: width, download, thumbnail } = req.query;
 
   const assetFile = bucket.file(`spaces/${spaceId}/assets/${assetId}/original`);
   const [exists] = await assetFile.exists();
@@ -362,15 +362,25 @@ expressApp.get('/api/v1/spaces/:spaceId/assets/:assetId', async (req, res) => {
       if (asset.type === 'image/webp' || asset.type === 'image/gif') {
         // possible animated or single frame webp/gif
         const [file] = await assetFile.download();
-        const sharpFile = sharp(file);
+        let sharpFile = sharp(file);
         const sharpFileMetadata = await sharpFile.metadata();
-        if (sharpFileMetadata.pages) {
-          // animated webp/gif
-          await assetFile.download({ destination: tempFilePath });
-        } else {
+        const isAnimated = sharpFileMetadata.pages !== undefined;
+        if (thumbnail && isAnimated) {
+          // Thumbnail with Animation: Remove animations, to reduce load
+          filename = `${asset.name}-w${width}-thumbnail${asset.extension}`;
+          sharpFile = sharp(file, { page: 0, pages: 1 });
+          await sharpFile.resize(parseInt(width.toString(), 10)).toFile(tempFilePath);
+        } else if (thumbnail && !isAnimated) {
+          // thumbnail without Animation
+          filename = `${asset.name}-w${width}-thumbnail${asset.extension}`;
           // single frame webp/gif
-          filename = `${asset.name}-w${width}${asset.extension}`;
           await sharpFile.resize(parseInt(width.toString(), 10)).toFile(tempFilePath);
+        } else {
+          // Animated
+          filename = `${asset.name}-w${width}${asset.extension}`;
+          // animated webp/gif
+          // TODO no way now to resize animated files
+          await assetFile.download({ destination: tempFilePath });
         }
       } else if (asset.type === 'image/svg+xml') {
         // svg, cannot resize
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 25f22f90..c84cd320 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -97,7 +97,8 @@ import { provideRemoteConfig, getRemoteConfig } from '@angular/fire/remote-confi
       useValue: (config: ImageLoaderConfig) => {
         // optimize image for API assets
         if (config.src.startsWith('/api/') && config.width) {
-          return `${config.src}?w=${config.width}`;
+          const thumbnailParam = config.loaderParams && config.loaderParams['thumbnail'] ? '&thumbnail=true' : '';
+          return `${config.src}?w=${config.width}${thumbnailParam}`;
         } else {
           return config.src;
         }
diff --git a/src/app/features/admin/settings/ui/ui.component.html b/src/app/features/admin/settings/ui/ui.component.html
index 29f859aa..4780f812 100644
--- a/src/app/features/admin/settings/ui/ui.component.html
+++ b/src/app/features/admin/settings/ui/ui.component.html
@@ -2,10 +2,12 @@
   <mat-toolbar-row>
     User Interface
     <span class="spacer"></span>
-    <button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
-      <mat-icon>save</mat-icon>
-      Save
-    </button>
+    <div class="actions">
+      <button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
+        <mat-icon>save</mat-icon>
+        Save
+      </button>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 
diff --git a/src/app/features/admin/spaces/spaces.component.html b/src/app/features/admin/spaces/spaces.component.html
index 8f7f4d35..e36b917f 100644
--- a/src/app/features/admin/spaces/spaces.component.html
+++ b/src/app/features/admin/spaces/spaces.component.html
@@ -2,10 +2,12 @@
   <mat-toolbar-row>
     Spaces
     <span class="spacer"></span>
-    <button mat-stroked-button color="primary" (click)="openAddDialog()">
-      <mat-icon>add</mat-icon>
-      Add Space
-    </button>
+    <div class="actions">
+      <button mat-stroked-button color="primary" (click)="openAddDialog()">
+        <mat-icon>add</mat-icon>
+        Add Space
+      </button>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 @if (isLoading) {
@@ -58,5 +60,5 @@
     <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </mat-table>
-  <mat-paginator></mat-paginator>
+  <mat-paginator class="mat-paginator-sticky"></mat-paginator>
 </div>
diff --git a/src/app/features/admin/users/users.component.html b/src/app/features/admin/users/users.component.html
index 41d8c922..285e36fe 100644
--- a/src/app/features/admin/users/users.component.html
+++ b/src/app/features/admin/users/users.component.html
@@ -2,15 +2,17 @@
   <mat-toolbar-row>
     Users
     <span class="spacer"></span>
-    <button mat-stroked-button color="accent" matTooltip="Synchronize Users with Database." (click)="sync()">
-      <ll-icon [animate]="isSyncLoading()" start="sync" end="sync" />
-      Sync
-    </button>
+    <div class="actions">
+      <button mat-stroked-button color="accent" matTooltip="Synchronize Users with Database." (click)="sync()">
+        <ll-icon [animate]="isSyncLoading()" start="sync" end="sync" />
+        Sync
+      </button>
 
-    <button mat-stroked-button color="primary" (click)="inviteDialog()">
-      <mat-icon>person_add</mat-icon>
-      Invite
-    </button>
+      <button mat-stroked-button color="primary" (click)="inviteDialog()">
+        <mat-icon>person_add</mat-icon>
+        Invite
+      </button>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 @if (isLoading()) {
@@ -102,5 +104,5 @@
     <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </mat-table>
-  <mat-paginator></mat-paginator>
+  <mat-paginator class="mat-paginator-sticky"></mat-paginator>
 </div>
diff --git a/src/app/features/features.component.ts b/src/app/features/features.component.ts
index b2e93bdf..b972867c 100644
--- a/src/app/features/features.component.ts
+++ b/src/app/features/features.component.ts
@@ -12,7 +12,6 @@ import {
   signal,
   Signal,
 } from '@angular/core';
-import { Observable } from 'rxjs';
 
 import { LocalStorageService } from '@core/core.module';
 import { Auth, signOut } from '@angular/fire/auth';
@@ -91,9 +90,6 @@ export class FeaturesComponent implements OnInit {
     { link: 'https://github.com/Lessify/localess/issues', label: 'Feedback', icon: 'forum' },
   ];
 
-  stickyHeader$: Observable<boolean> | undefined;
-  language$: Observable<string> | undefined;
-
   private destroyRef = inject(DestroyRef);
   spaceStore = inject(SpaceStore);
   userStore = inject(UserStore);
diff --git a/src/app/features/spaces/assets/add-folder-dialog/add-folder-dialog.component.html b/src/app/features/spaces/assets/add-folder-dialog/add-folder-dialog.component.html
index d4abff54..73048229 100644
--- a/src/app/features/spaces/assets/add-folder-dialog/add-folder-dialog.component.html
+++ b/src/app/features/spaces/assets/add-folder-dialog/add-folder-dialog.component.html
@@ -4,8 +4,8 @@ <h2 mat-dialog-title>Create new Folder</h2>
   <form [formGroup]="form">
     <mat-form-field>
       <mat-label>Name</mat-label>
-      <input matInput type="text" formControlName="name" maxlength="50" autocomplete="off" />
-      <mat-hint align="end">{{ form.controls['name'].value?.length || 0 }}/50</mat-hint>
+      <input matInput type="text" formControlName="name" maxlength="100" autocomplete="off" />
+      <mat-hint align="end">{{ form.controls['name'].value?.length || 0 }}/100</mat-hint>
       @if (form.controls['name'].errors; as errors) {
         <mat-error>{{ fe.errors(errors) }}</mat-error>
       }
diff --git a/src/app/features/spaces/assets/assets.component.html b/src/app/features/spaces/assets/assets.component.html
index b8819d24..3b4ddb0c 100644
--- a/src/app/features/spaces/assets/assets.component.html
+++ b/src/app/features/spaces/assets/assets.component.html
@@ -5,39 +5,55 @@
       <mat-icon>help</mat-icon>
     </a>
     <span class="spacer"></span>
-    @if ('ASSET_CREATE' | canUserPerform | async) {
-      <button mat-stroked-button color="primary" (click)="fileInput.click()">
-        <mat-icon>upload_file</mat-icon>
-        Upload Assets
-      </button>
-      <input hidden type="file" multiple #fileInput (change)="onFileUpload($event)" />
-
-      <button mat-stroked-button color="primary" (click)="openAddFolderDialog()">
-        <mat-icon>add</mat-icon>
-        Create Folder
-      </button>
-    }
-
-    @if (['ASSET_IMPORT', 'ASSET_EXPORT'] | canUserPerform | async) {
-      <button mat-icon-button [matMenuTriggerFor]="extraMenu">
-        <mat-icon>more_vert</mat-icon>
-      </button>
-    }
+    <div class="actions">
+      @if (fileUploadQueue().length > 0) {
+        <ll-icon [animate]="true" start="save" end="progress_activity" [matBadge]="fileUploadQueue().length" />
+      }
+      <mat-button-toggle-group
+        hideSingleSelectionIndicator="true"
+        (change)="settingsStore.setAssetLayout($event.value)"
+        [value]="settingsStore.assetLayout()">
+        <mat-button-toggle value="list" matTooltip="List Layout">
+          <mat-icon>view_list</mat-icon>
+        </mat-button-toggle>
+        <mat-button-toggle value="grid" matTooltip="Grid Layout">
+          <mat-icon>grid_view</mat-icon>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+      @if ('ASSET_CREATE' | canUserPerform | async) {
+        <button mat-stroked-button color="primary" (click)="fileInput.click()">
+          <mat-icon>upload_file</mat-icon>
+          Upload Assets
+        </button>
+        <input hidden type="file" multiple #fileInput (change)="onFileUpload($event)" />
 
-    <mat-menu #extraMenu="matMenu">
-      @if ('ASSET_IMPORT' | canUserPerform | async) {
-        <button mat-menu-item (click)="openImportDialog()">
-          <mat-icon>cloud_upload</mat-icon>
-          <span>Import</span>
+        <button mat-stroked-button color="primary" (click)="openAddFolderDialog()">
+          <mat-icon>add</mat-icon>
+          Create Folder
         </button>
       }
-      @if ('ASSET_EXPORT' | canUserPerform | async) {
-        <button mat-menu-item (click)="openExportDialog()">
-          <mat-icon>cloud_download</mat-icon>
-          <span>Export</span>
+
+      @if (['ASSET_IMPORT', 'ASSET_EXPORT'] | canUserPerform | async) {
+        <button mat-icon-button [matMenuTriggerFor]="extraMenu">
+          <mat-icon>more_vert</mat-icon>
         </button>
       }
-    </mat-menu>
+
+      <mat-menu #extraMenu="matMenu">
+        @if ('ASSET_IMPORT' | canUserPerform | async) {
+          <button mat-menu-item (click)="openImportDialog()">
+            <mat-icon>cloud_upload</mat-icon>
+            <span>Import</span>
+          </button>
+        }
+        @if ('ASSET_EXPORT' | canUserPerform | async) {
+          <button mat-menu-item (click)="openExportDialog()">
+            <mat-icon>cloud_download</mat-icon>
+            <span>Export</span>
+          </button>
+        }
+      </mat-menu>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 @if (isLoading()) {
@@ -51,162 +67,262 @@
       </ll-breadcrumb-item>
     }
   </ll-breadcrumb>
+  <div llFileDragDrop (filesChanges)="filesDragAndDrop($event)">
+    @if (settingsStore.assetLayout() === 'list') {
+      <mat-table [dataSource]="dataSource" matSort>
+        <!-- Checkbox Column -->
+        <ng-container matColumnDef="select">
+          <mat-header-cell *matHeaderCellDef>
+            <mat-checkbox
+              (change)="$event ? toggleAllRows() : null"
+              [checked]="selection.hasValue() && isAllSelected()"
+              [indeterminate]="selection.hasValue() && !isAllSelected()">
+            </mat-checkbox>
+          </mat-header-cell>
+          <mat-cell *matCellDef="let row">
+            <mat-checkbox
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)">
+            </mat-checkbox>
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="icon">
+          <mat-header-cell *matHeaderCellDef> Icon</mat-header-cell>
+          <mat-cell *matCellDef="let element">
+            @switch (element.kind) {
+              @case ('FILE') {
+                <mat-icon>{{ fileIcon(element.type) }}</mat-icon>
+              }
+              @case ('FOLDER') {
+                <mat-icon>folder</mat-icon>
+              }
+            }
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="preview">
+          <mat-header-cell *matHeaderCellDef> Preview</mat-header-cell>
+          <mat-cell *matCellDef="let element">
+            @if (element.kind === 'FILE' && filePreview(element.type)) {
+              @if (element.inProgress) {
+                <mat-progress-spinner mode="indeterminate" />
+              } @else {
+                <img
+                  class="border object-contain rounded bg-stripes-gray"
+                  width="200"
+                  height="200"
+                  loading="lazy"
+                  alt="thumbnail"
+                  [loaderParams]="{ thumbnail: true }"
+                  ngSrc="/api/v1/spaces/{{ spaceId() }}/assets/{{ element.id }}" />
+              }
+            }
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="name">
+          <mat-header-cell *matHeaderCellDef mat-sort-header="name"> Name</mat-header-cell>
+          <mat-cell *matCellDef="let element">
+            <div>
+              <div class="break-all">{{ element.name }}{{ element.extension }}</div>
+              @if (element.metadata; as metadata) {
+                @if (metadata.width && metadata.height) {
+                  <code class="fw-light"> W{{ metadata.width }} x H{{ metadata.height }} </code>
+                }
+                @if (metadata.animated) {
+                  <p matTooltip="Animated image"><mat-icon>animated_images</mat-icon></p>
+                }
+              }
+            </div>
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="size">
+          <mat-header-cell *matHeaderCellDef mat-sort-header="size"> File Size</mat-header-cell>
+          <mat-cell *matCellDef="let element">
+            @if (element.size) {
+              {{ element.size | formatFileSize }}
+            } @else {
+              <mat-icon>remove</mat-icon>
+            }
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="type">
+          <mat-header-cell *matHeaderCellDef mat-sort-header="type"> Type</mat-header-cell>
+          <mat-cell *matCellDef="let element">
+            @if (element.kind === 'FILE') {
+              @if (element.type) {
+                {{ element.type }}
+              } @else {
+                unknown
+              }
+            } @else {
+              Folder
+            }
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="createdAt">
+          <mat-header-cell *matHeaderCellDef mat-sort-header="createdAt"> Created At</mat-header-cell>
+          <mat-cell *matCellDef="let element" [matTooltip]="element.createdAt?.toDate() | date: 'medium'">
+            {{ element.createdAt?.toDate() | date: 'mediumDate' }}
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="updatedAt">
+          <mat-header-cell *matHeaderCellDef mat-sort-header="updatedAt"> Updated At</mat-header-cell>
+          <mat-cell *matCellDef="let element" [matTooltip]="element.updatedAt?.toDate() | date: 'medium'">
+            {{ element.updatedAt?.toDate() | date: 'mediumDate' }}
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="actions">
+          <mat-header-cell mat-header-cell *matHeaderCellDef> Actions</mat-header-cell>
+          <mat-cell *matCellDef="let element">
+            <button
+              mat-icon-button
+              (click)="onDownload($event, element)"
+              [disabled]="element.kind === 'FOLDER' || element.inProgress === true"
+              matTooltip="Download">
+              <mat-icon>download</mat-icon>
+            </button>
+            @if ('ASSET_UPDATE' | canUserPerform | async) {
+              <button mat-icon-button (click)="openEditDialog($event, element)" [disabled]="element.inProgress === true" matTooltip="Edit">
+                <mat-icon>edit</mat-icon>
+              </button>
+            }
+            @if ('ASSET_UPDATE' | canUserPerform | async) {
+              <button mat-icon-button (click)="openMoveDialog($event, element)" [disabled]="element.kind === 'FOLDER'" matTooltip="Move">
+                <mat-icon>drive_file_move</mat-icon>
+              </button>
+            }
+            @if ('ASSET_DELETE' | canUserPerform | async) {
+              <button
+                mat-icon-button
+                (click)="openDeleteDialog($event, element)"
+                [disabled]="element.inProgress === true && now - (element.createdAt?.toMillis() || 0) < 600000"
+                matTooltip="Delete">
+                <mat-icon>delete</mat-icon>
+              </button>
+            }
+          </mat-cell>
+        </ng-container>
 
-  <mat-table [dataSource]="dataSource" matSort llFileDragDrop (filesChanges)="filesDragAndDrop($event)">
-    <!-- Checkbox Column -->
-    <ng-container matColumnDef="select">
-      <mat-header-cell *matHeaderCellDef>
-        <mat-checkbox
-          (change)="$event ? toggleAllRows() : null"
-          [checked]="selection.hasValue() && isAllSelected()"
-          [indeterminate]="selection.hasValue() && !isAllSelected()">
-        </mat-checkbox>
-      </mat-header-cell>
-      <mat-cell *matCellDef="let row">
-        <mat-checkbox
-          (click)="$event.stopPropagation()"
-          (change)="$event ? selection.toggle(row) : null"
-          [checked]="selection.isSelected(row)">
-        </mat-checkbox>
-      </mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="icon">
-      <mat-header-cell *matHeaderCellDef> Icon</mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        @switch (element.kind) {
-          @case ('FILE') {
-            <mat-icon>{{ fileIcon(element.type) }}</mat-icon>
-          }
-          @case ('FOLDER') {
-            <mat-icon>folder</mat-icon>
-          }
-        }
-      </mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="preview">
-      <mat-header-cell *matHeaderCellDef> Preview</mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        @if (element.kind === 'FILE' && filePreview(element.type)) {
-          @if (element.inProgress) {
-            <mat-progress-spinner mode="indeterminate" />
-          } @else {
-            <img
-              class="border object-contain rounded bg-stripes-gray"
-              width="115"
-              height="115"
-              loading="lazy"
-              alt="thumbnail"
-              ngSrc="/api/v1/spaces/{{ spaceId() }}/assets/{{ element.id }}" />
-          }
+        <!--    <ng-container matColumnDef="actions">-->
+        <!--      <mat-header-cell mat-header-cell *matHeaderCellDef>-->
+        <!--        <button mat-stroked-button-->
+        <!--                *ngIf="'ASSET_UPDATE' | canUserPerform | async"-->
+        <!--                [disabled]="selection.selected.length !== 1 || selection.selected[0].kind !== 'FOLDER'"-->
+        <!--                (click)="openEditFolderDialog(selection.selected[0])">-->
+        <!--          <mat-icon>edit</mat-icon>-->
+        <!--          Edit-->
+        <!--        </button>-->
+        <!--        <button mat-stroked-button-->
+        <!--                *ngIf="'ASSET_DELETE' | canUserPerform | async"-->
+        <!--                [disabled]="selection.selected.length !== 1"-->
+        <!--                (click)="openDeleteDialog(selection.selected[0])">-->
+        <!--          <mat-icon>delete</mat-icon>-->
+        <!--          Delete-->
+        <!--        </button>-->
+        <!--      </mat-header-cell>-->
+        <!--    </ng-container>-->
+
+        <!--    <mat-header-row *matHeaderRowDef="['actions']"></mat-header-row>-->
+        <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns" (click)="onAssetSelect(row)" class="cursor-pointer"></mat-row>
+        @if (!isLoading()) {
+          <ng-container *matNoDataRow>
+            <div class="text-center align-middle">
+              <br />
+              <br />
+              Drag and Drop a file here or use the "Upload Asset" button
+              <br />
+              <br />
+              <br />
+            </div>
+          </ng-container>
         }
-      </mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="name">
-      <mat-header-cell *matHeaderCellDef mat-sort-header="name"> Name</mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        <div>
-          <div class="break-all">{{ element.name }}{{ element.extension }}</div>
-          @if (element.metadata; as metadata) {
-            <code class="fw-light">
-              @if (metadata.width && metadata.height) {
-                W{{ metadata.width }} x H{{ metadata.height }}
+      </mat-table>
+    } @else {
+      <div class="flex flex-wrap gap-2 justify-start">
+        @for (item of dataSource.connect() | async; track item.id) {
+          <mat-card class="digital-asset-card cursor-pointer" appearance="outlined" (click)="onAssetSelect(item)">
+            @if (item.inProgress) {
+              <div class="progress">
+                <mat-progress-spinner mode="indeterminate" />
+              </div>
+            } @else if (item.kind === 'FILE' && filePreview(item.type)) {
+              <img
+                class="object-contain bg-stripes-gray"
+                width="600"
+                height="600"
+                loading="lazy"
+                alt="thumbnail"
+                [loaderParams]="{ thumbnail: true }"
+                ngSrc="/api/v1/spaces/{{ spaceId() }}/assets/{{ item.id }}" />
+            } @else if (item.kind === 'FILE') {
+              <img mat-card-image ngSrc="assets/icons/{{ fileIcon(item.type) }}.svg" alt="File" width="240" height="240" />
+            } @else {
+              <img mat-card-image ngSrc="assets/icons/folder.svg" alt="Folder" width="240" height="240" />
+            }
+            <mat-card-header>
+              <mat-card-subtitle class="break-all">{{ item.name }}{{ item.extension }}</mat-card-subtitle>
+            </mat-card-header>
+            <mat-card-content>
+              @if (item.kind === 'FILE') {
+                @if (item.size; as size) {
+                  <p>{{ size | formatFileSize }}</p>
+                }
+                @if (item.metadata; as metadata) {
+                  @if (metadata.width && metadata.height) {
+                    <code class="fw-light"> W{{ metadata.width }} x H{{ metadata.height }} </code>
+                  }
+                }
               }
-            </code>
-          }
-        </div>
-      </mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="size">
-      <mat-header-cell *matHeaderCellDef mat-sort-header="size"> Size</mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.size | digitalStore }}</mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="type">
-      <mat-header-cell *matHeaderCellDef mat-sort-header="type"> Type</mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.type }}</mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="createdAt">
-      <mat-header-cell *matHeaderCellDef mat-sort-header="createdAt"> Created At</mat-header-cell>
-      <mat-cell *matCellDef="let element" [matTooltip]="element.createdAt?.toDate() | date: 'medium'">
-        {{ element.createdAt?.toDate() | date: 'mediumDate' }}
-      </mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="updatedAt">
-      <mat-header-cell *matHeaderCellDef mat-sort-header="updatedAt"> Updated At</mat-header-cell>
-      <mat-cell *matCellDef="let element" [matTooltip]="element.updatedAt?.toDate() | date: 'medium'">
-        {{ element.updatedAt?.toDate() | date: 'mediumDate' }}
-      </mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="actions">
-      <mat-header-cell mat-header-cell *matHeaderCellDef> Actions</mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        <button
-          mat-icon-button
-          (click)="onDownload($event, element)"
-          [disabled]="element.kind === 'FOLDER' || element.inProgress === true"
-          matTooltip="Download">
-          <mat-icon>download</mat-icon>
-        </button>
-        @if ('ASSET_UPDATE' | canUserPerform | async) {
-          <button mat-icon-button (click)="openEditDialog($event, element)" [disabled]="element.inProgress === true" matTooltip="Edit">
-            <mat-icon>edit</mat-icon>
-          </button>
-        }
-        @if ('ASSET_UPDATE' | canUserPerform | async) {
-          <button mat-icon-button (click)="openMoveDialog($event, element)" [disabled]="element.kind === 'FOLDER'" matTooltip="Move">
-            <mat-icon>drive_file_move</mat-icon>
-          </button>
-        }
-        @if ('ASSET_DELETE' | canUserPerform | async) {
-          <button
-            mat-icon-button
-            (click)="openDeleteDialog($event, element)"
-            [disabled]="element.inProgress === true && now - (element.createdAt?.toMillis() || 0) < 600000"
-            matTooltip="Delete">
-            <mat-icon>delete</mat-icon>
-          </button>
+              <p [matTooltip]="item.updatedAt?.toDate() | date: 'medium'">
+                {{ item.updatedAt?.toDate() | date: 'mediumDate' }}
+              </p>
+            </mat-card-content>
+            <span class="spacer"></span>
+            <mat-card-actions align="end">
+              <button
+                mat-icon-button
+                (click)="onDownload($event, item)"
+                [disabled]="item.kind === 'FOLDER' || item.inProgress === true"
+                matTooltip="Download">
+                <mat-icon>download</mat-icon>
+              </button>
+              @if ('ASSET_UPDATE' | canUserPerform | async) {
+                <button mat-icon-button (click)="openEditDialog($event, item)" [disabled]="item.inProgress === true" matTooltip="Edit">
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
+              @if ('ASSET_UPDATE' | canUserPerform | async) {
+                <button mat-icon-button (click)="openMoveDialog($event, item)" [disabled]="item.kind === 'FOLDER'" matTooltip="Move">
+                  <mat-icon>drive_file_move</mat-icon>
+                </button>
+              }
+              @if ('ASSET_DELETE' | canUserPerform | async) {
+                <button
+                  mat-icon-button
+                  (click)="openDeleteDialog($event, item)"
+                  [disabled]="item.inProgress === true && now - (item.createdAt?.toMillis() || 0) < 600000"
+                  matTooltip="Delete">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              }
+            </mat-card-actions>
+          </mat-card>
+        } @empty {
+          <div class="basis-full text-center align-middle">
+            <br />
+            <br />
+            Drag and Drop a file here or use the "Upload Asset" button
+            <br />
+            <br />
+            <br />
+          </div>
         }
-      </mat-cell>
-    </ng-container>
-
-    <!--    <ng-container matColumnDef="actions">-->
-    <!--      <mat-header-cell mat-header-cell *matHeaderCellDef>-->
-    <!--        <button mat-stroked-button-->
-    <!--                *ngIf="'ASSET_UPDATE' | canUserPerform | async"-->
-    <!--                [disabled]="selection.selected.length !== 1 || selection.selected[0].kind !== 'FOLDER'"-->
-    <!--                (click)="openEditFolderDialog(selection.selected[0])">-->
-    <!--          <mat-icon>edit</mat-icon>-->
-    <!--          Edit-->
-    <!--        </button>-->
-    <!--        <button mat-stroked-button-->
-    <!--                *ngIf="'ASSET_DELETE' | canUserPerform | async"-->
-    <!--                [disabled]="selection.selected.length !== 1"-->
-    <!--                (click)="openDeleteDialog(selection.selected[0])">-->
-    <!--          <mat-icon>delete</mat-icon>-->
-    <!--          Delete-->
-    <!--        </button>-->
-    <!--      </mat-header-cell>-->
-    <!--    </ng-container>-->
-
-    <!--    <mat-header-row *matHeaderRowDef="['actions']"></mat-header-row>-->
-    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-    <mat-row
-      *matRowDef="let row; columns: displayedColumns"
-      (click)="onRowSelect(row)"
-      [class.row-folder]="row.kind === 'FOLDER'"></mat-row>
-    @if (!isLoading()) {
-      <ng-container *matNoDataRow>
-        <div class="text-center align-middle">
-          <br />
-          <br />
-          Drag and Drop a file here or use the "Upload Asset" button
-          <br />
-          <br />
-        </div>
-      </ng-container>
+      </div>
     }
-  </mat-table>
-  <mat-paginator></mat-paginator>
-  @if (fileUploadQueue.length > 0) {
+  </div>
+  <mat-paginator class="mat-paginator-sticky"></mat-paginator>
+  @if (false || fileUploadQueue().length > 0) {
     <div class="file-progress-upload">
       <mat-card>
         <mat-card-header>
@@ -215,7 +331,7 @@
         <mat-card-content>
           <mat-divider></mat-divider>
           <mat-list role="list">
-            @for (file of fileUploadQueue; track file.name; let idx = $index) {
+            @for (file of fileUploadQueue(); track file.name; let idx = $index) {
               <mat-list-item role="listitem">
                 {{ file.name.length < 30 ? file.name : file.name.slice(0, 27).concat('...') }}
                 @if (idx === 0) {
@@ -224,7 +340,7 @@
                   <mat-progress-bar mode="buffer" />
                 }
                 <mat-action-list matListItemMeta>
-                  {{ file.size | digitalStore }}
+                  {{ file.size | formatFileSize }}
                 </mat-action-list>
               </mat-list-item>
             }
diff --git a/src/app/features/spaces/assets/assets.component.scss b/src/app/features/spaces/assets/assets.component.scss
index 81ceaac4..f0e9cc82 100644
--- a/src/app/features/spaces/assets/assets.component.scss
+++ b/src/app/features/spaces/assets/assets.component.scss
@@ -1,9 +1,8 @@
-@use '@angular/material' as mat;
-
 table {
   width: 100%;
 }
 
+
 //mat-header-cell {
 //  &.mat-column-actions {
 //    text-align: center;
@@ -15,11 +14,11 @@ table {
 //  }
 //}
 
-mat-row {
-  &.row-folder {
-    cursor: pointer;
-  }
-}
+//mat-row {
+//  &.row-folder {
+//    cursor: pointer;
+//  }
+//}
 
 mat-cell {
   &.mat-column-preview {
diff --git a/src/app/features/spaces/assets/assets.component.ts b/src/app/features/spaces/assets/assets.component.ts
index 751aac8f..31186180 100644
--- a/src/app/features/spaces/assets/assets.component.ts
+++ b/src/app/features/spaces/assets/assets.component.ts
@@ -11,7 +11,15 @@ import { ConfirmationDialogModel } from '@shared/components/confirmation-dialog/
 import { ObjectUtils } from '@core/utils/object-utils.service';
 import { SelectionModel } from '@angular/cdk/collections';
 import { AssetService } from '@shared/services/asset.service';
-import { Asset, AssetFile, AssetFileUpdate, AssetFolderCreate, AssetFolderUpdate, AssetKind } from '@shared/models/asset.model';
+import {
+  Asset,
+  AssetFile,
+  AssetFileUpdate,
+  AssetFolder,
+  AssetFolderCreate,
+  AssetFolderUpdate,
+  AssetKind,
+} from '@shared/models/asset.model';
 import { AddFolderDialogModel } from './add-folder-dialog/add-folder-dialog.model';
 import { AddFolderDialogComponent } from './add-folder-dialog/add-folder-dialog.component';
 import { EditFolderDialogComponent } from './edit-folder-dialog/edit-folder-dialog.component';
@@ -26,6 +34,9 @@ import { EditFileDialogModel } from './edit-file-dialog/edit-file-dialog.model';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { PathItem, SpaceStore } from '@shared/stores/space.store';
 import { MoveDialogComponent, MoveDialogModel, MoveDialogReturn } from './move-dialog';
+import { LocalSettingsStore } from '@shared/stores/local-settings.store';
+import { ImagePreviewDialogComponent } from './image-preview-dialog/image-preview-dialog.component';
+import { ImagePreviewDialogModel } from './image-preview-dialog/image-preview-dialog.model';
 
 @Component({
   selector: 'll-assets',
@@ -34,7 +45,7 @@ import { MoveDialogComponent, MoveDialogModel, MoveDialogReturn } from './move-d
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AssetsComponent implements OnInit {
-  sort = viewChild.required(MatSort);
+  sort = viewChild(MatSort);
   paginator = viewChild.required(MatPaginator);
 
   // Input
@@ -45,9 +56,9 @@ export class AssetsComponent implements OnInit {
   private destroyRef = inject(DestroyRef);
   dataSource: MatTableDataSource<Asset> = new MatTableDataSource<Asset>([]);
   displayedColumns: string[] = [/*'select',*/ 'icon', 'preview', 'name', 'size', 'type', /*'createdAt',*/ 'updatedAt', 'actions'];
-  selection = new SelectionModel<Asset>(true, []);
+  selection = new SelectionModel<Asset>(true, [], undefined, (o1, o2) => o1.id === o2.id);
   assets: Asset[] = [];
-  fileUploadQueue: File[] = [];
+  fileUploadQueue = signal<File[]>([]);
   now = Date.now();
 
   get parentPath(): string {
@@ -63,6 +74,8 @@ export class AssetsComponent implements OnInit {
 
   // Loading
   isLoading = signal(true);
+  // Local Settings
+  settingsStore = inject(LocalSettingsStore);
 
   constructor(
     private readonly assetService: AssetService,
@@ -79,9 +92,10 @@ export class AssetsComponent implements OnInit {
       )
       .subscribe({
         next: assets => {
+          console.log(assets);
           this.assets = assets;
           this.dataSource = new MatTableDataSource<Asset>(assets);
-          this.dataSource.sort = this.sort();
+          this.dataSource.sort = this.sort() || null;
           this.dataSource.paginator = this.paginator();
           this.isLoading.set(false);
           this.selection.clear();
@@ -99,7 +113,10 @@ export class AssetsComponent implements OnInit {
       )
       .subscribe({
         next: () => {
-          this.fileUploadQueue.shift();
+          this.fileUploadQueue.update(files => {
+            files.shift();
+            return files;
+          });
         },
         error: () => {
           this.notificationService.error(`Asset can not be uploaded.`);
@@ -113,7 +130,10 @@ export class AssetsComponent implements OnInit {
       if (target.files && target.files.length > 0) {
         for (let idx = 0; idx < target.files.length; idx++) {
           const file = target.files[idx];
-          this.fileUploadQueue.push(file);
+          this.fileUploadQueue.update(files => {
+            files.push(file);
+            return files;
+          });
           this.fileUploadQueue$.next(file);
         }
       }
@@ -160,7 +180,7 @@ export class AssetsComponent implements OnInit {
         panelClass: 'sm',
         data: {
           reservedNames: this.assets.map(it => it.name),
-          asset: ObjectUtils.clone(element),
+          asset: ObjectUtils.clone(element) as AssetFolder,
         },
       })
       .afterClosed()
@@ -189,7 +209,7 @@ export class AssetsComponent implements OnInit {
         panelClass: 'sm',
         data: {
           reservedNames: this.assets.map(it => it.name),
-          asset: ObjectUtils.clone(element),
+          asset: ObjectUtils.clone(element) as AssetFile,
         },
       })
       .afterClosed()
@@ -294,19 +314,24 @@ export class AssetsComponent implements OnInit {
     this.selection.select(...this.dataSource.data);
   }
 
-  onRowSelect(element: Asset): void {
-    // if (element.kind === AssetKind.FILE) {
-    //   element.publishedAt
-    //   if (this.schemasMap.has(element.schema)) {
-    //     this.router.navigate(['features', 'contents', element.id]);
-    //   } else {
-    //     this.notificationService.warn(`Content Schema can not be found.`);
-    //   }
-    //   return;
-    // }
-
-    this.isLoading.set(true);
-    if (element.kind === AssetKind.FOLDER) {
+  onAssetSelect(element: Asset): void {
+    if (element.kind === AssetKind.FILE && element.type.startsWith('image/')) {
+      this.dialog
+        .open<ImagePreviewDialogComponent, ImagePreviewDialogModel, void>(ImagePreviewDialogComponent, {
+          panelClass: 'image-preview',
+          data: {
+            spaceId: this.spaceId(),
+            asset: element,
+          },
+        })
+        .afterClosed()
+        .subscribe({
+          next: () => {
+            console.log('close');
+          },
+        });
+    } else if (element.kind === AssetKind.FOLDER) {
+      this.isLoading.set(true);
       this.selection.clear();
       const assetPath = ObjectUtils.clone(this.spaceStore.assetPath() || []);
       assetPath.push({
@@ -394,16 +419,20 @@ export class AssetsComponent implements OnInit {
       });
   }
 
-  onDownload(event: Event, element: AssetFile): void {
+  onDownload(event: Event, element: Asset): void {
     // Prevent Default
     event.preventDefault();
     event.stopImmediatePropagation();
+    if (element.kind !== AssetKind.FILE) return;
     window.open(`/api/v1/spaces/${this.spaceId()}/assets/${element.id}?download`);
   }
 
   filesDragAndDrop(event: File[]) {
     event.forEach(file => {
-      this.fileUploadQueue.push(file);
+      this.fileUploadQueue.update(files => {
+        files.push(file);
+        return files;
+      });
       this.fileUploadQueue$.next(file);
     });
   }
diff --git a/src/app/features/spaces/assets/assets.module.ts b/src/app/features/spaces/assets/assets.module.ts
index a09979c1..cf78234f 100644
--- a/src/app/features/spaces/assets/assets.module.ts
+++ b/src/app/features/spaces/assets/assets.module.ts
@@ -12,6 +12,7 @@ import { ImportDialogComponent } from './import-dialog/import-dialog.component';
 import { TaskService } from '@shared/services/task.service';
 import { EditFileDialogComponent } from './edit-file-dialog/edit-file-dialog.component';
 import { MoveDialogComponent } from './move-dialog';
+import { ImagePreviewDialogComponent } from './image-preview-dialog/image-preview-dialog.component';
 
 @NgModule({
   declarations: [
@@ -22,6 +23,7 @@ import { MoveDialogComponent } from './move-dialog';
     ExportDialogComponent,
     ImportDialogComponent,
     MoveDialogComponent,
+    ImagePreviewDialogComponent,
   ],
   imports: [SharedModule, AssetsRoutingModule],
   providers: [SpaceService, AssetService, TaskService],
diff --git a/src/app/features/spaces/assets/edit-file-dialog/edit-file-dialog.component.html b/src/app/features/spaces/assets/edit-file-dialog/edit-file-dialog.component.html
index 064b0dd5..22751d52 100644
--- a/src/app/features/spaces/assets/edit-file-dialog/edit-file-dialog.component.html
+++ b/src/app/features/spaces/assets/edit-file-dialog/edit-file-dialog.component.html
@@ -4,8 +4,9 @@ <h2 mat-dialog-title>Edit File</h2>
   <form [formGroup]="form">
     <mat-form-field>
       <mat-label>Name</mat-label>
-      <input matInput type="text" formControlName="name" maxlength="50" autocomplete="off" />
-      <mat-hint align="end">{{ form.controls['name'].value?.length || 0 }}/50</mat-hint>
+      <input matInput type="text" formControlName="name" maxlength="100" autocomplete="off" />
+      <span matTextSuffix>{{ data.asset.extension }}</span>
+      <mat-hint align="end">{{ form.controls['name'].value?.length || 0 }}/100</mat-hint>
       @if (form.controls['name'].errors; as errors) {
         <mat-error>{{ fe.errors(errors) }}</mat-error>
       }
diff --git a/src/app/features/spaces/assets/edit-file-dialog/edit-file-dialog.model.ts b/src/app/features/spaces/assets/edit-file-dialog/edit-file-dialog.model.ts
index 51de90bc..cf1e6fa9 100644
--- a/src/app/features/spaces/assets/edit-file-dialog/edit-file-dialog.model.ts
+++ b/src/app/features/spaces/assets/edit-file-dialog/edit-file-dialog.model.ts
@@ -1,6 +1,6 @@
-import { Asset } from '@shared/models/asset.model';
+import { AssetFile } from '@shared/models/asset.model';
 
 export interface EditFileDialogModel {
-  asset: Asset;
+  asset: AssetFile;
   reservedNames: string[];
 }
diff --git a/src/app/features/spaces/assets/edit-folder-dialog/edit-folder-dialog.component.html b/src/app/features/spaces/assets/edit-folder-dialog/edit-folder-dialog.component.html
index b1cdb460..4367f8a2 100644
--- a/src/app/features/spaces/assets/edit-folder-dialog/edit-folder-dialog.component.html
+++ b/src/app/features/spaces/assets/edit-folder-dialog/edit-folder-dialog.component.html
@@ -4,8 +4,8 @@ <h2 mat-dialog-title>Edit Folder</h2>
   <form [formGroup]="form">
     <mat-form-field>
       <mat-label>Name</mat-label>
-      <input matInput type="text" formControlName="name" maxlength="50" autocomplete="off" />
-      <mat-hint align="end">{{ form.controls['name'].value?.length || 0 }}/50</mat-hint>
+      <input matInput type="text" formControlName="name" maxlength="100" autocomplete="off" />
+      <mat-hint align="end">{{ form.controls['name'].value?.length || 0 }}/100</mat-hint>
       @if (form.controls['name'].errors; as errors) {
         <mat-error>{{ fe.errors(errors) }}</mat-error>
       }
diff --git a/src/app/features/spaces/assets/edit-folder-dialog/edit-folder-dialog.model.ts b/src/app/features/spaces/assets/edit-folder-dialog/edit-folder-dialog.model.ts
index eae0e88c..e04c351d 100644
--- a/src/app/features/spaces/assets/edit-folder-dialog/edit-folder-dialog.model.ts
+++ b/src/app/features/spaces/assets/edit-folder-dialog/edit-folder-dialog.model.ts
@@ -1,6 +1,6 @@
-import { Asset } from '@shared/models/asset.model';
+import { AssetFolder } from '@shared/models/asset.model';
 
 export interface EditFolderDialogModel {
-  asset: Asset;
+  asset: AssetFolder;
   reservedNames: string[];
 }
diff --git a/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.component.html b/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.component.html
new file mode 100644
index 00000000..b56296d9
--- /dev/null
+++ b/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.component.html
@@ -0,0 +1,13 @@
+<mat-dialog-content>
+  <img
+    class="object-contain bg-stripes-gray"
+    width="1000"
+    height="1000"
+    loading="lazy"
+    alt="thumbnail"
+    [loaderParams]="{ thumbnail: true }"
+    ngSrc="/api/v1/spaces/{{ data.spaceId }}/assets/{{ data.asset.id }}" />
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button [mat-dialog-close]="undefined">Close</button>
+</mat-dialog-actions>
diff --git a/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.component.scss b/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.component.ts b/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.component.ts
new file mode 100644
index 00000000..8de257d5
--- /dev/null
+++ b/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ImagePreviewDialogModel } from './image-preview-dialog.model';
+
+@Component({
+  selector: 'll-asset-image-preview-dialog',
+  templateUrl: './image-preview-dialog.component.html',
+  styleUrls: ['./image-preview-dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ImagePreviewDialogComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: ImagePreviewDialogModel) {}
+}
diff --git a/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.model.ts b/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.model.ts
new file mode 100644
index 00000000..7e58c746
--- /dev/null
+++ b/src/app/features/spaces/assets/image-preview-dialog/image-preview-dialog.model.ts
@@ -0,0 +1,6 @@
+import { AssetFile } from '@shared/models/asset.model';
+
+export interface ImagePreviewDialogModel {
+  spaceId: string;
+  asset: AssetFile;
+}
diff --git a/src/app/features/spaces/contents/contents.component.html b/src/app/features/spaces/contents/contents.component.html
index 551815e2..4a170d72 100644
--- a/src/app/features/spaces/contents/contents.component.html
+++ b/src/app/features/spaces/contents/contents.component.html
@@ -5,48 +5,49 @@
       <mat-icon>help</mat-icon>
     </a>
     <span class="spacer"></span>
-
-    @if ('CONTENT_CREATE' | canUserPerform | async) {
-      <button mat-stroked-button color="primary" [matMenuTriggerFor]="contentCreateMenu">
-        <mat-icon>add</mat-icon>
-        Add Content
-      </button>
-      <mat-menu #contentCreateMenu="matMenu">
-        <button mat-menu-item (click)="openAddDocumentDialog()">
-          <mat-icon>post_add</mat-icon>
-          <span>Document</span>
-        </button>
-        <button mat-menu-item (click)="openAddFolderDialog()">
-          <mat-icon>create_new_folder</mat-icon>
-          <span>Folder</span>
+    <div class="actions">
+      @if ('CONTENT_CREATE' | canUserPerform | async) {
+        <button mat-stroked-button color="primary" [matMenuTriggerFor]="contentCreateMenu">
+          <mat-icon>add</mat-icon>
+          Add Content
         </button>
-      </mat-menu>
-    }
-
-    <button mat-icon-button [matMenuTriggerFor]="extraMenu">
-      <mat-icon>more_vert</mat-icon>
-    </button>
+        <mat-menu #contentCreateMenu="matMenu">
+          <button mat-menu-item (click)="openAddDocumentDialog()">
+            <mat-icon>post_add</mat-icon>
+            <span>Document</span>
+          </button>
+          <button mat-menu-item (click)="openAddFolderDialog()">
+            <mat-icon>create_new_folder</mat-icon>
+            <span>Folder</span>
+          </button>
+        </mat-menu>
+      }
 
-    <mat-menu #extraMenu="matMenu">
-      <button mat-menu-item (click)="openLinksInNewTab()">
-        <mat-icon>link</mat-icon>
-        <span>Links</span>
+      <button mat-icon-button [matMenuTriggerFor]="extraMenu">
+        <mat-icon>more_vert</mat-icon>
       </button>
 
-      <mat-divider></mat-divider>
-      @if ('CONTENT_IMPORT' | canUserPerform | async) {
-        <button mat-menu-item (click)="openImportDialog()">
-          <mat-icon>cloud_upload</mat-icon>
-          <span>Import</span>
+      <mat-menu #extraMenu="matMenu">
+        <button mat-menu-item (click)="openLinksInNewTab()">
+          <mat-icon>link</mat-icon>
+          <span>Links</span>
         </button>
-      }
-      @if ('CONTENT_EXPORT' | canUserPerform | async) {
-        <button mat-menu-item (click)="openExportDialog()">
-          <mat-icon>cloud_download</mat-icon>
-          <span>Export</span>
-        </button>
-      }
-    </mat-menu>
+
+        <mat-divider></mat-divider>
+        @if ('CONTENT_IMPORT' | canUserPerform | async) {
+          <button mat-menu-item (click)="openImportDialog()">
+            <mat-icon>cloud_upload</mat-icon>
+            <span>Import</span>
+          </button>
+        }
+        @if ('CONTENT_EXPORT' | canUserPerform | async) {
+          <button mat-menu-item (click)="openExportDialog()">
+            <mat-icon>cloud_download</mat-icon>
+            <span>Export</span>
+          </button>
+        }
+      </mat-menu>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 @if (isLoading()) {
@@ -201,5 +202,5 @@
     <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns" (click)="onRowSelect(row)"></mat-row>
   </mat-table>
-  <mat-paginator></mat-paginator>
+  <mat-paginator class="mat-paginator-sticky"></mat-paginator>
 </div>
diff --git a/src/app/features/spaces/contents/contents.component.ts b/src/app/features/spaces/contents/contents.component.ts
index f9f49675..6e7f55a2 100644
--- a/src/app/features/spaces/contents/contents.component.ts
+++ b/src/app/features/spaces/contents/contents.component.ts
@@ -52,7 +52,7 @@ export class ContentsComponent {
   isLoading = signal(true);
   dataSource: MatTableDataSource<Content> = new MatTableDataSource<Content>([]);
   displayedColumns: string[] = [/*'select',*/ 'status', 'name', 'slug', 'schema', /*'publishedAt', 'createdAt',*/ 'updatedAt', 'actions'];
-  selection = new SelectionModel<Content>(true, []);
+  selection = new SelectionModel<Content>(true, [], undefined, (o1, o2) => o1.id === o2.id);
 
   schemas: Schema[] = [];
   schemasMapById: Map<string, Schema> = new Map<string, Schema>();
diff --git a/src/app/features/spaces/contents/edit-document/edit-document.component.html b/src/app/features/spaces/contents/edit-document/edit-document.component.html
index f5bf6bc3..95e0b322 100644
--- a/src/app/features/spaces/contents/edit-document/edit-document.component.html
+++ b/src/app/features/spaces/contents/edit-document/edit-document.component.html
@@ -7,103 +7,106 @@
     &nbsp;
     <span class="subtitle">#{{ document?.slug }}</span>
     <span class="spacer"></span>
-    <mat-button-toggle-group
-      hideSingleSelectionIndicator="true"
-      (change)="settingsStore.setEditorEnabled(!settingsStore.editorEnabled())"
-      [value]="settingsStore.editorEnabled()">
-      <mat-button-toggle [value]="true" matTooltip="Design Mode">
-        <mat-icon>design_services</mat-icon>
-      </mat-button-toggle>
-      <mat-button-toggle [value]="false" matTooltip="Form Mode">
-        <mat-icon>edit_note</mat-icon>
-      </mat-button-toggle>
-    </mat-button-toggle-group>
+    <div class="actions">
+      <mat-button-toggle-group
+        hideSingleSelectionIndicator="true"
+        (change)="settingsStore.setEditorEnabled(!settingsStore.editorEnabled())"
+        [value]="settingsStore.editorEnabled()">
+        <mat-button-toggle [value]="true" matTooltip="Design Mode">
+          <mat-icon>design_services</mat-icon>
+        </mat-button-toggle>
+        <mat-button-toggle [value]="false" matTooltip="Form Mode">
+          <mat-icon>edit_note</mat-icon>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
 
-    <button mat-stroked-button [matMenuTriggerFor]="localesMenu" matTooltip="Select a locale">
-      {{ selectedLocale.name }}
-      <mat-icon iconPositionEnd>arrow_drop_down</mat-icon>
-    </button>
-
-    <mat-menu #localesMenu="matMenu">
-      @for (locale of availableLocales; track locale.id) {
-        <button mat-menu-item (click)="onLocaleChanged(locale)">
-          <span [class.fw-semibold]="locale.id === selectedLocale.id">
-            {{ locale.name }}
-          </span>
-        </button>
-      }
-    </mat-menu>
-
-    @if (contentErrors.length > 0) {
-      <button mat-icon-button [matMenuTriggerFor]="contentErrorsMenu">
-        <mat-icon color="warn" [matBadge]="contentErrors.length" matBadgeColor="warn">error_outline</mat-icon>
+      <button mat-stroked-button [matMenuTriggerFor]="localesMenu" matTooltip="Select a locale">
+        {{ selectedLocale.name }}
+        <mat-icon iconPositionEnd>arrow_drop_down</mat-icon>
       </button>
-    }
 
-    <mat-menu class="mat-menu-error-messages" #contentErrorsMenu="matMenu" xPosition="before">
-      <div class="vstack gap-1">
-        @for (error of contentErrors; track error.contentId) {
-          <div class="p-2">
-            <mat-icon color="accent">warning</mat-icon>
-            In <b>{{ error.schema }}</b> the <b>{{ error.fieldDisplayName || error.fieldName }}</b> {{ fe.errors(error.errors) }} for Locale
-            {{ availableLocalesMap.get(error.locale) }}
-          </div>
+      <mat-menu #localesMenu="matMenu">
+        @for (locale of availableLocales; track locale.id) {
+          <button mat-menu-item (click)="onLocaleChanged(locale)">
+            <span [class.fw-semibold]="locale.id === selectedLocale.id">
+              {{ locale.name }}
+            </span>
+          </button>
         }
-      </div>
-    </mat-menu>
-    @if ('CONTENT_UPDATE' | canUserPerform | async) {
-      <button
-        mat-stroked-button
-        color="primary"
-        matTooltip="Save the changes."
-        [disabled]="isSaveLoading() || isPublishLoading()"
-        (click)="save()">
-        <ll-icon [animate]="isSaveLoading()" start="save" end="sync" />
-        Save
-      </button>
-    }
-    @if ('CONTENT_PUBLISH' | canUserPerform | async) {
-      <button
-        mat-stroked-button
-        color="accent"
-        matTooltip="Publish to be available via API call"
-        [disabled]="isPublishLoading() || isSaveLoading()"
-        (click)="publish()">
-        <ll-icon [animate]="isPublishLoading()" start="publish" end="sync" />
-        Publish
-      </button>
-    }
-    @if (document?.publishedAt === undefined) {
-      <ll-status mode="offline" matTooltip="Not published" />
-    } @else if (document?.publishedAt?.seconds > document?.updatedAt?.seconds) {
-      <ll-status mode="online" matTooltip="Published" />
-    } @else if (document?.publishedAt && document?.publishedAt?.seconds < document?.updatedAt?.seconds) {
-      <ll-status mode="away" matTooltip="Draft" />
-    }
+      </mat-menu>
 
-    <button mat-icon-button (click)="showHistory = !showHistory" matTooltip="History">
-      <mat-icon>history</mat-icon>
-    </button>
-
-    <button mat-icon-button [matMenuTriggerFor]="importMenu">
-      <mat-icon>more_vert</mat-icon>
-    </button>
+      @if (contentErrors.length > 0) {
+        <button mat-icon-button [matMenuTriggerFor]="contentErrorsMenu">
+          <mat-icon color="warn" [matBadge]="contentErrors.length" matBadgeColor="warn">error_outline</mat-icon>
+        </button>
+      }
 
-    <mat-menu #importMenu="matMenu">
-      @for (locale of selectedSpace?.locales; track locale.id) {
-        <button mat-menu-item (click)="openDraftInNewTab(locale.id)">
-          <mat-icon>mode_edit</mat-icon>
-          <span>Draft {{ locale.name }} JSON</span>
+      <mat-menu class="mat-menu-error-messages" #contentErrorsMenu="matMenu" xPosition="before">
+        <div class="vstack gap-1">
+          @for (error of contentErrors; track error.contentId) {
+            <div class="p-2">
+              <mat-icon color="accent">warning</mat-icon>
+              In <b>{{ error.schema }}</b> the <b>{{ error.fieldDisplayName || error.fieldName }}</b> {{ fe.errors(error.errors) }} for
+              Locale
+              {{ availableLocalesMap.get(error.locale) }}
+            </div>
+          }
+        </div>
+      </mat-menu>
+      @if ('CONTENT_UPDATE' | canUserPerform | async) {
+        <button
+          mat-stroked-button
+          color="primary"
+          matTooltip="Save the changes."
+          [disabled]="isSaveLoading() || isPublishLoading()"
+          (click)="save()">
+          <ll-icon [animate]="isSaveLoading()" start="save" end="sync" />
+          Save
         </button>
       }
-      <mat-divider />
-      @for (locale of selectedSpace?.locales; track locale.id) {
-        <button mat-menu-item (click)="openPublishedInNewTab(locale.id)">
-          <mat-icon>public</mat-icon>
-          <span>Published {{ locale.name }} JSON</span>
+      @if ('CONTENT_PUBLISH' | canUserPerform | async) {
+        <button
+          mat-stroked-button
+          color="accent"
+          matTooltip="Publish to be available via API call"
+          [disabled]="isPublishLoading() || isSaveLoading()"
+          (click)="publish()">
+          <ll-icon [animate]="isPublishLoading()" start="publish" end="sync" />
+          Publish
         </button>
       }
-    </mat-menu>
+      @if (document?.publishedAt === undefined) {
+        <ll-status mode="offline" matTooltip="Not published" />
+      } @else if (document?.publishedAt?.seconds > document?.updatedAt?.seconds) {
+        <ll-status mode="online" matTooltip="Published" />
+      } @else if (document?.publishedAt && document?.publishedAt?.seconds < document?.updatedAt?.seconds) {
+        <ll-status mode="away" matTooltip="Draft" />
+      }
+
+      <button mat-icon-button (click)="showHistory = !showHistory" matTooltip="History">
+        <mat-icon>history</mat-icon>
+      </button>
+
+      <button mat-icon-button [matMenuTriggerFor]="importMenu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+
+      <mat-menu #importMenu="matMenu">
+        @for (locale of selectedSpace?.locales; track locale.id) {
+          <button mat-menu-item (click)="openDraftInNewTab(locale.id)">
+            <mat-icon>mode_edit</mat-icon>
+            <span>Draft {{ locale.name }} JSON</span>
+          </button>
+        }
+        <mat-divider />
+        @for (locale of selectedSpace?.locales; track locale.id) {
+          <button mat-menu-item (click)="openPublishedInNewTab(locale.id)">
+            <mat-icon>public</mat-icon>
+            <span>Published {{ locale.name }} JSON</span>
+          </button>
+        }
+      </mat-menu>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 
@@ -211,117 +214,119 @@
     </div>
   </mat-sidenav-content>
   <mat-sidenav position="end" [opened]="showHistory" (openedChange)="showHistory = $event">
-    <div class="flow-root m-4">
-      <ul role="list" class="-mb-8">
-        @for (item of history$ | async; track item.id; let isLast = $last) {
-          <li>
-            <div class="relative pb-5">
-              <div class="relative flex space-x-3">
-                @switch (item.type) {
-                  @case ('PUBLISHED') {
-                    <div>
-                      <span class="h-8 w-8 rounded-full flex items-center justify-center">
-                        <mat-icon>publish</mat-icon>
-                      </span>
-                    </div>
-                    <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+    @if (showHistory) {
+      <div class="flow-root m-4">
+        <ul role="list" class="-mb-8">
+          @for (item of history$ | async; track item.id; let isLast = $last) {
+            <li>
+              <div class="relative pb-5">
+                <div class="relative flex space-x-3">
+                  @switch (item.type) {
+                    @case ('PUBLISHED') {
                       <div>
-                        <p class="text-sm">
-                          Published by
-                          <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
-                            {{ item.name || 'Unknown' }}
-                          </span>
-                        </p>
+                        <span class="h-8 w-8 rounded-full flex items-center justify-center">
+                          <mat-icon>publish</mat-icon>
+                        </span>
                       </div>
-                      <div class="whitespace-nowrap text-right text-sm">
-                        <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                      <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                        <div>
+                          <p class="text-sm">
+                            Published by
+                            <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
+                              {{ item.name || 'Unknown' }}
+                            </span>
+                          </p>
+                        </div>
+                        <div class="whitespace-nowrap text-right text-sm">
+                          <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                        </div>
                       </div>
-                    </div>
-                  }
-                  @case ('CREATE') {
-                    <div>
-                      <span class="h-8 w-8 rounded-full flex items-center justify-center">
-                        <mat-icon>add</mat-icon>
-                      </span>
-                    </div>
-                    <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                    }
+                    @case ('CREATE') {
                       <div>
-                        <p class="text-sm">
-                          Created with name <span class="font-medium break-all">{{ item.cName }}</span> and slug
-                          <span class="font-medium break-all">{{ item.cSlug }}</span> by
-                          <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
-                            {{ item.name || 'Unknown' }}
-                          </span>
-                        </p>
+                        <span class="h-8 w-8 rounded-full flex items-center justify-center">
+                          <mat-icon>add</mat-icon>
+                        </span>
                       </div>
-                      <div class="whitespace-nowrap text-right text-sm">
-                        <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                      <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                        <div>
+                          <p class="text-sm">
+                            Created with name <span class="font-medium break-all">{{ item.cName }}</span> and slug
+                            <span class="font-medium break-all">{{ item.cSlug }}</span> by
+                            <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
+                              {{ item.name || 'Unknown' }}
+                            </span>
+                          </p>
+                        </div>
+                        <div class="whitespace-nowrap text-right text-sm">
+                          <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                        </div>
                       </div>
-                    </div>
-                  }
-                  @case ('UPDATE') {
-                    <div>
-                      <span class="h-8 w-8 rounded-full flex items-center justify-center">
-                        <mat-icon>edit</mat-icon>
-                      </span>
-                    </div>
-                    <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                    }
+                    @case ('UPDATE') {
                       <div>
-                        <p class="text-sm">
-                          Updated with
-                          @if (item.cName) {
-                            name <span class="font-medium break-all">{{ item.cName }}</span>
-                          }
-                          @if (item.cSlug) {
+                        <span class="h-8 w-8 rounded-full flex items-center justify-center">
+                          <mat-icon>edit</mat-icon>
+                        </span>
+                      </div>
+                      <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                        <div>
+                          <p class="text-sm">
+                            Updated with
                             @if (item.cName) {
-                              and
+                              name <span class="font-medium break-all">{{ item.cName }}</span>
                             }
-                            slug <span class="font-medium break-all">{{ item.cSlug }}</span>
-                          }
-                          @if (item.cParentSlug) {
-                            parent slug <span class="font-medium break-all">{{ item.cParentSlug }}</span>
-                          } @else if (item.cData) {
-                            content
-                          } @else {
-                            nothing
-                          }
-                          by
-                          <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
-                            {{ item.name || 'Unknown' }}
-                          </span>
-                        </p>
-                      </div>
-                      <div class="whitespace-nowrap text-right text-sm">
-                        <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                            @if (item.cSlug) {
+                              @if (item.cName) {
+                                and
+                              }
+                              slug <span class="font-medium break-all">{{ item.cSlug }}</span>
+                            }
+                            @if (item.cParentSlug) {
+                              parent slug <span class="font-medium break-all">{{ item.cParentSlug }}</span>
+                            } @else if (item.cData) {
+                              content
+                            } @else {
+                              nothing
+                            }
+                            by
+                            <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
+                              {{ item.name || 'Unknown' }}
+                            </span>
+                          </p>
+                        </div>
+                        <div class="whitespace-nowrap text-right text-sm">
+                          <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                        </div>
                       </div>
-                    </div>
-                  }
-                  @default {
-                    <div>
-                      <span class="h-8 w-8 rounded-full flex items-center justify-center">
-                        <mat-icon>question_mark</mat-icon>
-                      </span>
-                    </div>
-                    <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                    }
+                    @default {
                       <div>
-                        <p class="text-sm">Unknown</p> by
-                        <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
-                          {{ item.name || 'Unknown' }}
+                        <span class="h-8 w-8 rounded-full flex items-center justify-center">
+                          <mat-icon>question_mark</mat-icon>
                         </span>
                       </div>
-                      <div class="whitespace-nowrap text-right text-sm">
-                        <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                      <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                        <div>
+                          <p class="text-sm">Unknown</p> by
+                          <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
+                            {{ item.name || 'Unknown' }}
+                          </span>
+                        </div>
+                        <div class="whitespace-nowrap text-right text-sm">
+                          <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                        </div>
                       </div>
-                    </div>
+                    }
                   }
-                }
+                </div>
               </div>
-            </div>
-          </li>
-        } @empty {
-          No Records found
-        }
-      </ul>
-    </div>
+            </li>
+          } @empty {
+            No Records found
+          }
+        </ul>
+      </div>
+    }
   </mat-sidenav>
 </mat-sidenav-container>
diff --git a/src/app/features/spaces/contents/edit-document/edit-document.component.ts b/src/app/features/spaces/contents/edit-document/edit-document.component.ts
index 0c1e6879..a2dee531 100644
--- a/src/app/features/spaces/contents/edit-document/edit-document.component.ts
+++ b/src/app/features/spaces/contents/edit-document/edit-document.component.ts
@@ -164,7 +164,7 @@ export class EditDocumentComponent implements OnInit, DirtyFormGuardComponent {
   }
 
   get isFormDirty(): boolean {
-    return !ObjectUtils.isEqual(this.document?.data, JSON.stringify(this.contentHelperService.clone(this.documentData)));
+    return JSON.stringify(this.document?.data) !== JSON.stringify(this.contentHelperService.clone(this.documentData));
   }
 
   publish(): void {
diff --git a/src/app/features/spaces/contents/shared/asset-select/asset-select.component.html b/src/app/features/spaces/contents/shared/asset-select/asset-select.component.html
index eff1b6a4..1445ec74 100644
--- a/src/app/features/spaces/contents/shared/asset-select/asset-select.component.html
+++ b/src/app/features/spaces/contents/shared/asset-select/asset-select.component.html
@@ -30,13 +30,14 @@
                 height="200"
                 alt="thumbnail"
                 loading="lazy"
+                [loaderParams]="{ thumbnail: true }"
                 ngSrc="/api/v1/spaces/{{ space().id }}/assets/{{ asset.id }}" />
             } @else {
               <mat-icon matListItemIcon>file_present</mat-icon>
             }
             <div matListItemTitle>{{ asset.name }}{{ asset.extension }}</div>
             <code matListItemLine>
-              {{ asset.size | digitalStore }}
+              {{ asset.size | formatFileSize }}
               @if (asset.metadata; as metadata) {
                 | W{{ metadata.width }} x H{{ metadata.height }}
               }
diff --git a/src/app/features/spaces/contents/shared/asset-select/asset-select.component.ts b/src/app/features/spaces/contents/shared/asset-select/asset-select.component.ts
index 0b3bb6eb..9d56242c 100644
--- a/src/app/features/spaces/contents/shared/asset-select/asset-select.component.ts
+++ b/src/app/features/spaces/contents/shared/asset-select/asset-select.component.ts
@@ -55,7 +55,7 @@ export class AssetSelectComponent implements OnInit {
   openAssetSelectDialog(): void {
     this.dialog
       .open<AssetsSelectDialogComponent, AssetsSelectDialogModel, Asset[] | undefined>(AssetsSelectDialogComponent, {
-        panelClass: 'xl',
+        panelClass: 'full-screen',
         data: {
           spaceId: this.space().id,
           multiple: false,
diff --git a/src/app/features/spaces/contents/shared/assets-select/assets-select.component.html b/src/app/features/spaces/contents/shared/assets-select/assets-select.component.html
index 11c4311a..c5d2a0fa 100644
--- a/src/app/features/spaces/contents/shared/assets-select/assets-select.component.html
+++ b/src/app/features/spaces/contents/shared/assets-select/assets-select.component.html
@@ -29,13 +29,14 @@
               height="200"
               alt="thumbnail"
               loading="lazy"
+              [loaderParams]="{ thumbnail: true }"
               ngSrc="/api/v1/spaces/{{ space().id }}/assets/{{ asset.id }}" />
           } @else {
             <mat-icon matListItemIcon>file_present</mat-icon>
           }
           <div matListItemTitle>{{ asset.name }}{{ asset.extension }}</div>
           <code matListItemLine>
-            {{ asset.size | digitalStore }}
+            {{ asset.size | formatFileSize }}
             @if (asset.metadata; as metadata) {
               | W{{ metadata.width }} x H{{ metadata.height }}
             }
diff --git a/src/app/features/spaces/contents/shared/assets-select/assets-select.component.ts b/src/app/features/spaces/contents/shared/assets-select/assets-select.component.ts
index 9ca9f029..be2b5731 100644
--- a/src/app/features/spaces/contents/shared/assets-select/assets-select.component.ts
+++ b/src/app/features/spaces/contents/shared/assets-select/assets-select.component.ts
@@ -64,7 +64,7 @@ export class AssetsSelectComponent implements OnInit {
   openAssetSelectDialog(): void {
     this.dialog
       .open<AssetsSelectDialogComponent, AssetsSelectDialogModel, AssetFile[] | undefined>(AssetsSelectDialogComponent, {
-        panelClass: 'xl',
+        panelClass: 'full-screen',
         data: {
           spaceId: this.space().id,
           multiple: true,
diff --git a/src/app/features/spaces/dashboard/dashboard.component.html b/src/app/features/spaces/dashboard/dashboard.component.html
index 1970cb4d..58e01cd7 100644
--- a/src/app/features/spaces/dashboard/dashboard.component.html
+++ b/src/app/features/spaces/dashboard/dashboard.component.html
@@ -2,11 +2,13 @@
   <mat-toolbar-row>
     Dashboard
     <span class="spacer"></span>
-    @if ('SPACE_MANAGEMENT' | canUserPerform | async) {
-      <button mat-icon-button (click)="calculateOverview()">
-        <mat-icon>refresh</mat-icon>
-      </button>
-    }
+    <div class="actions">
+      @if ('SPACE_MANAGEMENT' | canUserPerform | async) {
+        <button mat-icon-button (click)="calculateOverview()">
+          <mat-icon>refresh</mat-icon>
+        </button>
+      }
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 <div class="container-full-screen">
@@ -53,25 +55,25 @@ <h3 class="text-base font-semibold leading-6">Storage</h3>
           <div class="overflow-hidden rounded-lg px-4 py-5 shadow dark:border-2 sm:p-6">
             <dt class="truncate text-sm font-medium">Total</dt>
             <dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight">
-              {{ space.overview?.translationSize + space?.overview?.assetsSize + space?.overview?.contentSize | digitalStore }}
+              {{ space.overview?.translationSize + space?.overview?.assetsSize + space?.overview?.contentSize | formatFileSize }}
             </dd>
           </div>
           <div class="overflow-hidden rounded-lg px-4 py-5 shadow dark:border-2 sm:p-6">
             <dt class="truncate text-sm font-medium">Translations</dt>
             <dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight">
-              {{ space.overview?.translationSize || 0 | digitalStore }}
+              {{ space.overview?.translationSize || 0 | formatFileSize }}
             </dd>
           </div>
           <div class="overflow-hidden rounded-lg px-4 py-5 shadow dark:border-2 sm:p-6">
             <dt class="truncate text-sm font-medium">Asset Files</dt>
             <dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight">
-              {{ space.overview?.assetsSize || 0 | digitalStore }}
+              {{ space.overview?.assetsSize || 0 | formatFileSize }}
             </dd>
           </div>
           <div class="overflow-hidden rounded-lg px-4 py-5 shadow dark:border-2 sm:p-6">
             <dt class="truncate text-sm font-medium">Content Documents</dt>
             <dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight">
-              {{ space.overview?.contentSize || 0 | digitalStore }}
+              {{ space.overview?.contentSize || 0 | formatFileSize }}
             </dd>
           </div>
         </dl>
diff --git a/src/app/features/spaces/schemas/schemas.component.html b/src/app/features/spaces/schemas/schemas.component.html
index 56f72dc2..75b8edd4 100644
--- a/src/app/features/spaces/schemas/schemas.component.html
+++ b/src/app/features/spaces/schemas/schemas.component.html
@@ -5,31 +5,33 @@
       <mat-icon>help</mat-icon>
     </a>
     <span class="spacer"></span>
-    @if ('SCHEMA_CREATE' | canUserPerform | async) {
-      <button mat-stroked-button color="primary" (click)="openAddDialog()">
-        <mat-icon>add</mat-icon>
-        Add Schema
-      </button>
-    }
-    @if (['SCHEMA_IMPORT', 'SCHEMA_EXPORT'] | canUserPerform | async) {
-      <button mat-icon-button [matMenuTriggerFor]="extraMenu">
-        <mat-icon>more_vert</mat-icon>
-      </button>
-      <mat-menu #extraMenu="matMenu">
-        @if ('SCHEMA_IMPORT' | canUserPerform | async) {
-          <button mat-menu-item (click)="openImportDialog()">
-            <mat-icon>cloud_upload</mat-icon>
-            <span>Import</span>
-          </button>
-        }
-        @if ('SCHEMA_EXPORT' | canUserPerform | async) {
-          <button mat-menu-item (click)="openExportDialog()">
-            <mat-icon>cloud_download</mat-icon>
-            <span>Export</span>
-          </button>
-        }
-      </mat-menu>
-    }
+    <div class="actions">
+      @if ('SCHEMA_CREATE' | canUserPerform | async) {
+        <button mat-stroked-button color="primary" (click)="openAddDialog()">
+          <mat-icon>add</mat-icon>
+          Add Schema
+        </button>
+      }
+      @if (['SCHEMA_IMPORT', 'SCHEMA_EXPORT'] | canUserPerform | async) {
+        <button mat-icon-button [matMenuTriggerFor]="extraMenu">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #extraMenu="matMenu">
+          @if ('SCHEMA_IMPORT' | canUserPerform | async) {
+            <button mat-menu-item (click)="openImportDialog()">
+              <mat-icon>cloud_upload</mat-icon>
+              <span>Import</span>
+            </button>
+          }
+          @if ('SCHEMA_EXPORT' | canUserPerform | async) {
+            <button mat-menu-item (click)="openExportDialog()">
+              <mat-icon>cloud_download</mat-icon>
+              <span>Export</span>
+            </button>
+          }
+        </mat-menu>
+      }
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 @if (isLoading) {
@@ -106,5 +108,5 @@
     <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns" (click)="onRowSelect(row)"></mat-row>
   </mat-table>
-  <mat-paginator></mat-paginator>
+  <mat-paginator class="mat-paginator-sticky"></mat-paginator>
 </div>
diff --git a/src/app/features/spaces/settings/general/general.component.html b/src/app/features/spaces/settings/general/general.component.html
index 9ecd0601..115b56b1 100644
--- a/src/app/features/spaces/settings/general/general.component.html
+++ b/src/app/features/spaces/settings/general/general.component.html
@@ -2,10 +2,12 @@
   <mat-toolbar-row>
     General
     <span class="spacer"></span>
-    <button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
-      <mat-icon>save</mat-icon>
-      Save
-    </button>
+    <div class="actions">
+      <button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
+        <mat-icon>save</mat-icon>
+        Save
+      </button>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 @if (isLoading()) {
diff --git a/src/app/features/spaces/settings/locales/locales.component.html b/src/app/features/spaces/settings/locales/locales.component.html
index a9d181fd..19f35400 100644
--- a/src/app/features/spaces/settings/locales/locales.component.html
+++ b/src/app/features/spaces/settings/locales/locales.component.html
@@ -2,10 +2,12 @@
   <mat-toolbar-row>
     Locales
     <span class="spacer"></span>
-    <button mat-stroked-button color="primary" (click)="openAddDialog()">
-      <mat-icon>add</mat-icon>
-      Add Locale
-    </button>
+    <div class="actions">
+      <button mat-stroked-button color="primary" (click)="openAddDialog()">
+        <mat-icon>add</mat-icon>
+        Add Locale
+      </button>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 @if (isLoading()) {
@@ -56,5 +58,5 @@
     <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </mat-table>
-  <mat-paginator></mat-paginator>
+  <mat-paginator class="mat-paginator-sticky"></mat-paginator>
 </div>
diff --git a/src/app/features/spaces/settings/tokens/tokens.component.html b/src/app/features/spaces/settings/tokens/tokens.component.html
index 59bacb1c..ebdb29b1 100644
--- a/src/app/features/spaces/settings/tokens/tokens.component.html
+++ b/src/app/features/spaces/settings/tokens/tokens.component.html
@@ -2,10 +2,12 @@
   <mat-toolbar-row>
     Tokens
     <span class="spacer"></span>
-    <button mat-stroked-button color="primary" (click)="openAddDialog()">
-      <mat-icon>add</mat-icon>
-      Add Token
-    </button>
+    <div class="actions">
+      <button mat-stroked-button color="primary" (click)="openAddDialog()">
+        <mat-icon>add</mat-icon>
+        Add Token
+      </button>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 @if (isLoading()) {
@@ -45,5 +47,5 @@
     <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </mat-table>
-  <mat-paginator></mat-paginator>
+  <mat-paginator class="mat-paginator-sticky"></mat-paginator>
 </div>
diff --git a/src/app/features/spaces/settings/visual-editor/visual-editor.component.html b/src/app/features/spaces/settings/visual-editor/visual-editor.component.html
index 7085ec10..4a5599d4 100644
--- a/src/app/features/spaces/settings/visual-editor/visual-editor.component.html
+++ b/src/app/features/spaces/settings/visual-editor/visual-editor.component.html
@@ -2,10 +2,12 @@
   <mat-toolbar-row>
     Visual Editor
     <span class="spacer"></span>
-    <button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
-      <mat-icon>save</mat-icon>
-      Save
-    </button>
+    <div class="actions">
+      <button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
+        <mat-icon>save</mat-icon>
+        Save
+      </button>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 
@@ -18,10 +20,12 @@
     <mat-toolbar-row>
       Preview URL's
       <span class="spacer"></span>
-      <button mat-stroked-button color="primary" (click)="addEnvironment()">
-        <mat-icon>add</mat-icon>
-        Add Environment
-      </button>
+      <div class="actions">
+        <button mat-stroked-button color="primary" (click)="addEnvironment()">
+          <mat-icon>add</mat-icon>
+          Add Environment
+        </button>
+      </div>
     </mat-toolbar-row>
   </mat-toolbar>
 
diff --git a/src/app/features/spaces/tasks/tasks.component.html b/src/app/features/spaces/tasks/tasks.component.html
index 34f7446d..3d1a64e5 100644
--- a/src/app/features/spaces/tasks/tasks.component.html
+++ b/src/app/features/spaces/tasks/tasks.component.html
@@ -70,7 +70,7 @@
         @if (element.file; as file) {
           <div>
             <div>{{ file.name }}</div>
-            <div>Size : {{ file.size | digitalStore }}</div>
+            <div>Size : {{ file.size | formatFileSize }}</div>
           </div>
         }
       </mat-cell>
@@ -133,5 +133,5 @@
     <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </mat-table>
-  <mat-paginator></mat-paginator>
+  <mat-paginator class="mat-paginator-sticky"></mat-paginator>
 </div>
diff --git a/src/app/features/spaces/translations/translations.component.html b/src/app/features/spaces/translations/translations.component.html
index 47f07f6f..af8037c3 100644
--- a/src/app/features/spaces/translations/translations.component.html
+++ b/src/app/features/spaces/translations/translations.component.html
@@ -6,52 +6,54 @@
         <mat-icon>help</mat-icon>
       </a>
       <span class="spacer"></span>
-      @if ('TRANSLATION_CREATE' | canUserPerform | async) {
-        <button mat-stroked-button color="primary" (click)="openAddDialog()">
-          <mat-icon>add</mat-icon>
-          Add Translation
-        </button>
-      }
-      @if ('TRANSLATION_PUBLISH' | canUserPerform | async) {
-        <button
-          mat-stroked-button
-          color="accent"
-          matTooltip="Publish Translations to be available via API call"
-          [disabled]="isPublishLoading()"
-          (click)="publish()">
-          <ll-icon [animate]="isPublishLoading()" start="publish" end="sync" />
-          Publish
-        </button>
-      }
-      <button mat-icon-button (click)="showHistory = !showHistory" matTooltip="History">
-        <mat-icon>history</mat-icon>
-      </button>
-      <button mat-icon-button [matMenuTriggerFor]="importMenu" matTooltip="Import and Export">
-        <mat-icon>more_vert</mat-icon>
-      </button>
-      <mat-menu #importMenu="matMenu">
-        @for (locale of space.locales; track locale.id) {
-          <button mat-menu-item (click)="openPublishedInNewTab(locale.id)">
-            <mat-icon>public</mat-icon>
-            <span>Published {{ locale.name }} JSON</span>
+      <div class="actions">
+        @if ('TRANSLATION_CREATE' | canUserPerform | async) {
+          <button mat-stroked-button color="primary" (click)="openAddDialog()">
+            <mat-icon>add</mat-icon>
+            Add Translation
           </button>
         }
-        @if (['TRANSLATION_IMPORT', 'TRANSLATION_EXPORT'] | canUserPerform | async) {
-          <mat-divider></mat-divider>
-          @if ('TRANSLATION_IMPORT' | canUserPerform | async) {
-            <button mat-menu-item (click)="openImportDialog(space.locales)">
-              <mat-icon>cloud_upload</mat-icon>
-              <span>Import</span>
+        @if ('TRANSLATION_PUBLISH' | canUserPerform | async) {
+          <button
+            mat-stroked-button
+            color="accent"
+            matTooltip="Publish Translations to be available via API call"
+            [disabled]="isPublishLoading()"
+            (click)="publish()">
+            <ll-icon [animate]="isPublishLoading()" start="publish" end="sync" />
+            Publish
+          </button>
+        }
+        <button mat-icon-button (click)="showHistory = !showHistory" matTooltip="History">
+          <mat-icon>history</mat-icon>
+        </button>
+        <button mat-icon-button [matMenuTriggerFor]="importMenu" matTooltip="Import and Export">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #importMenu="matMenu">
+          @for (locale of space.locales; track locale.id) {
+            <button mat-menu-item (click)="openPublishedInNewTab(locale.id)">
+              <mat-icon>public</mat-icon>
+              <span>Published {{ locale.name }} JSON</span>
             </button>
           }
-          @if ('TRANSLATION_EXPORT' | canUserPerform | async) {
-            <button mat-menu-item (click)="openExportDialog(space.locales)">
-              <mat-icon>cloud_download</mat-icon>
-              <span>Export</span>
-            </button>
+          @if (['TRANSLATION_IMPORT', 'TRANSLATION_EXPORT'] | canUserPerform | async) {
+            <mat-divider></mat-divider>
+            @if ('TRANSLATION_IMPORT' | canUserPerform | async) {
+              <button mat-menu-item (click)="openImportDialog(space.locales)">
+                <mat-icon>cloud_upload</mat-icon>
+                <span>Import</span>
+              </button>
+            }
+            @if ('TRANSLATION_EXPORT' | canUserPerform | async) {
+              <button mat-menu-item (click)="openExportDialog(space.locales)">
+                <mat-icon>cloud_download</mat-icon>
+                <span>Export</span>
+              </button>
+            }
           }
-        }
-      </mat-menu>
+        </mat-menu>
+      </div>
     </mat-toolbar-row>
   </mat-toolbar>
   @if (isLoading()) {
@@ -351,117 +353,119 @@
       </div>
     </mat-sidenav-content>
     <mat-sidenav position="end" [opened]="showHistory" (openedChange)="showHistory = $event">
-      <div class="flow-root m-4">
-        <ul role="list" class="-mb-8">
-          @for (item of history$ | async; track item.id; let isLast = $last) {
-            <li>
-              <div class="relative pb-5">
-                <div class="relative flex space-x-3">
-                  @switch (item.type) {
-                    @case ('PUBLISHED') {
-                      <div>
-                        <span class="h-8 w-8 rounded-full flex items-center justify-center">
-                          <mat-icon>publish</mat-icon>
-                        </span>
-                      </div>
-                      <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+      @if (showHistory) {
+        <div class="flow-root m-4">
+          <ul role="list" class="-mb-8">
+            @for (item of history$ | async; track item.id; let isLast = $last) {
+              <li>
+                <div class="relative pb-5">
+                  <div class="relative flex space-x-3">
+                    @switch (item.type) {
+                      @case ('PUBLISHED') {
                         <div>
-                          <p class="text-sm">
-                            Published by
-                            <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
-                              {{ item.name || 'Unknown' }}
-                            </span>
-                          </p>
+                          <span class="h-8 w-8 rounded-full flex items-center justify-center">
+                            <mat-icon>publish</mat-icon>
+                          </span>
                         </div>
-                        <div class="whitespace-nowrap text-right text-sm">
-                          <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                        <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                          <div>
+                            <p class="text-sm">
+                              Published by
+                              <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
+                                {{ item.name || 'Unknown' }}
+                              </span>
+                            </p>
+                          </div>
+                          <div class="whitespace-nowrap text-right text-sm">
+                            <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                          </div>
                         </div>
-                      </div>
-                    }
-                    @case ('CREATE') {
-                      <div>
-                        <span class="h-8 w-8 rounded-full flex items-center justify-center">
-                          <mat-icon>add</mat-icon>
-                        </span>
-                      </div>
-                      <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                      }
+                      @case ('CREATE') {
                         <div>
-                          <p class="text-sm">
-                            Add <span class="font-medium break-all">{{ item.key }}</span> by
-                            <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
-                              {{ item.name || 'Unknown' }}
-                            </span>
-                          </p>
+                          <span class="h-8 w-8 rounded-full flex items-center justify-center">
+                            <mat-icon>add</mat-icon>
+                          </span>
                         </div>
-                        <div class="whitespace-nowrap text-right text-sm">
-                          <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                        <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                          <div>
+                            <p class="text-sm">
+                              Add <span class="font-medium break-all">{{ item.key }}</span> by
+                              <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
+                                {{ item.name || 'Unknown' }}
+                              </span>
+                            </p>
+                          </div>
+                          <div class="whitespace-nowrap text-right text-sm">
+                            <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                          </div>
                         </div>
-                      </div>
-                    }
-                    @case ('UPDATE') {
-                      <div>
-                        <span class="h-8 w-8 rounded-full flex items-center justify-center">
-                          <mat-icon>edit</mat-icon>
-                        </span>
-                      </div>
-                      <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                      }
+                      @case ('UPDATE') {
                         <div>
-                          <p class="text-sm">
-                            Edit <span class="font-medium break-all">{{ item.key }}</span> by
-                            <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
-                              {{ item.name || 'Unknown' }}
-                            </span>
-                          </p>
+                          <span class="h-8 w-8 rounded-full flex items-center justify-center">
+                            <mat-icon>edit</mat-icon>
+                          </span>
                         </div>
-                        <div class="whitespace-nowrap text-right text-sm">
-                          <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                        <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                          <div>
+                            <p class="text-sm">
+                              Edit <span class="font-medium break-all">{{ item.key }}</span> by
+                              <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
+                                {{ item.name || 'Unknown' }}
+                              </span>
+                            </p>
+                          </div>
+                          <div class="whitespace-nowrap text-right text-sm">
+                            <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                          </div>
                         </div>
-                      </div>
-                    }
-                    @case ('DELETE') {
-                      <div>
-                        <span class="h-8 w-8 rounded-full flex items-center justify-center">
-                          <mat-icon>delete</mat-icon>
-                        </span>
-                      </div>
-                      <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                      }
+                      @case ('DELETE') {
                         <div>
-                          <p class="text-sm">
-                            Delete <span class="font-medium break-all">{{ item.key }}</span> by
-                            <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
-                              {{ item.name || 'Unknown' }}
-                            </span>
-                          </p>
+                          <span class="h-8 w-8 rounded-full flex items-center justify-center">
+                            <mat-icon>delete</mat-icon>
+                          </span>
                         </div>
-                        <div class="whitespace-nowrap text-right text-sm">
-                          <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                        <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                          <div>
+                            <p class="text-sm">
+                              Delete <span class="font-medium break-all">{{ item.key }}</span> by
+                              <span class="font-medium" [matTooltip]="item.email || 'Unknown'">
+                                {{ item.name || 'Unknown' }}
+                              </span>
+                            </p>
+                          </div>
+                          <div class="whitespace-nowrap text-right text-sm">
+                            <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                          </div>
                         </div>
-                      </div>
-                    }
-                    @default {
-                      <div>
-                        <span class="h-8 w-8 rounded-full flex items-center justify-center">
-                          <mat-icon>question_mark</mat-icon>
-                        </span>
-                      </div>
-                      <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                      }
+                      @default {
                         <div>
-                          <p class="text-sm">Unknown</p>
+                          <span class="h-8 w-8 rounded-full flex items-center justify-center">
+                            <mat-icon>question_mark</mat-icon>
+                          </span>
                         </div>
-                        <div class="whitespace-nowrap text-right text-sm">
-                          <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                        <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                          <div>
+                            <p class="text-sm">Unknown</p>
+                          </div>
+                          <div class="whitespace-nowrap text-right text-sm">
+                            <time>{{ item.createdAt.toDate() | date: 'MMM dd, HH:mm' }}</time>
+                          </div>
                         </div>
-                      </div>
+                      }
                     }
-                  }
+                  </div>
                 </div>
-              </div>
-            </li>
-          } @empty {
-            No Records found
-          }
-        </ul>
-      </div>
+              </li>
+            } @empty {
+              No Records found
+            }
+          </ul>
+        </div>
+      }
     </mat-sidenav>
   </mat-sidenav-container>
 }
diff --git a/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.html b/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.html
index 1919e9b3..eb0e5173 100644
--- a/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.html
+++ b/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.html
@@ -1,4 +1,32 @@
-<h2 mat-dialog-title>Assets</h2>
+<h2 mat-dialog-title>
+  <span>Assets</span>
+  <div class="header-actions">
+    @if (fileUploadQueue().length > 0) {
+      <ll-icon [animate]="true" start="save" end="progress_activity" [matBadge]="fileUploadQueue().length" />
+    }
+    <mat-button-toggle-group
+      hideSingleSelectionIndicator="true"
+      (change)="settingsStore.setAssetDialogLayout($event.value)"
+      [value]="settingsStore.assetDialogLayout()">
+      <mat-button-toggle value="list" matTooltip="List Layout">
+        <mat-icon>view_list</mat-icon>
+      </mat-button-toggle>
+      <mat-button-toggle value="grid" matTooltip="Grid Layout">
+        <mat-icon>grid_view</mat-icon>
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+    @if ('ASSET_CREATE' | canUserPerform | async) {
+      <button mat-stroked-button color="primary" (click)="fileInput.click()">
+        <mat-icon>upload_file</mat-icon>
+        Upload Assets
+      </button>
+      <input hidden type="file" multiple #fileInput (change)="onFileUpload($event)" />
+    }
+  </div>
+</h2>
+@if (isLoading()) {
+  <mat-progress-bar mode="query" />
+}
 <ll-breadcrumb>
   <span style="padding-left: 1rem">&nbsp;</span>
   @for (pathItem of assetPath; track pathItem.fullSlug; let isFirst = $first) {
@@ -8,83 +36,154 @@ <h2 mat-dialog-title>Assets</h2>
   }
 </ll-breadcrumb>
 <mat-dialog-content>
-  <mat-table [dataSource]="dataSource" matSort>
-    <!-- Checkbox Column -->
-    <ng-container matColumnDef="select">
-      <mat-header-cell *matHeaderCellDef> #</mat-header-cell>
-      <mat-cell *matCellDef="let row">
-        @if (row.kind === 'FILE') {
-          <mat-checkbox
-            (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null"
-            [checked]="selection.isSelected(row)">
-          </mat-checkbox>
-        }
-      </mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="icon">
-      <mat-header-cell *matHeaderCellDef> Icon</mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        @switch (element.kind) {
-          @case ('FILE') {
-            <mat-icon>{{ fileIcon(element.type) }}</mat-icon>
+  @if (settingsStore.assetDialogLayout() === 'list') {
+    <mat-table [dataSource]="dataSource" matSort>
+      <!-- Checkbox Column -->
+      <ng-container matColumnDef="select">
+        <mat-header-cell *matHeaderCellDef> #</mat-header-cell>
+        <mat-cell *matCellDef="let row">
+          @if (row.kind === 'FILE') {
+            <mat-checkbox
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)">
+            </mat-checkbox>
           }
-          @case ('FOLDER') {
-            <mat-icon>folder</mat-icon>
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="icon">
+        <mat-header-cell *matHeaderCellDef> Icon</mat-header-cell>
+        <mat-cell *matCellDef="let element">
+          @switch (element.kind) {
+            @case ('FILE') {
+              <mat-icon>{{ fileIcon(element.type) }}</mat-icon>
+            }
+            @case ('FOLDER') {
+              <mat-icon>folder</mat-icon>
+            }
           }
-        }
-      </mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="preview">
-      <mat-header-cell *matHeaderCellDef> Preview</mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        @if (element.kind === 'FILE' && filePreview(element.type)) {
-          <img
-            class="border object-contain rounded bg-stripes-gray"
-            width="115"
-            height="115"
-            alt="thumbnail"
-            loading="lazy"
-            ngSrc="/api/v1/spaces/{{ data.spaceId }}/assets/{{ element.id }}" />
-        }
-      </mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="name">
-      <mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        <div>
-          <div class="break-all">{{ element.name }}{{ element.extension }}</div>
-          @if (element.metadata; as metadata) {
-            <code class="fw-light">
-              @if (metadata.width && metadata.height) {
-                W{{ metadata.width }} x H{{ metadata.height }}
-              }
-            </code>
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="preview">
+        <mat-header-cell *matHeaderCellDef> Preview</mat-header-cell>
+        <mat-cell *matCellDef="let element">
+          @if (element.kind === 'FILE' && filePreview(element.type)) {
+            <img
+              class="border object-contain rounded bg-stripes-gray"
+              width="200"
+              height="200"
+              alt="thumbnail"
+              loading="lazy"
+              [loaderParams]="{ thumbnail: true }"
+              ngSrc="/api/v1/spaces/{{ data.spaceId }}/assets/{{ element.id }}" />
+          }
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
+        <mat-cell *matCellDef="let element">
+          <div>
+            <div class="break-all">{{ element.name }}{{ element.extension }}</div>
+            @if (element.metadata; as metadata) {
+              <code class="fw-light">
+                @if (metadata.width && metadata.height) {
+                  W{{ metadata.width }} x H{{ metadata.height }}
+                }
+              </code>
+            }
+          </div>
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="size">
+        <mat-header-cell *matHeaderCellDef> File Size</mat-header-cell>
+        <mat-cell *matCellDef="let element">
+          @if (element.size) {
+            {{ element.size | formatFileSize }}
+          } @else {
+            <mat-icon>remove</mat-icon>
+          }
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="type">
+        <mat-header-cell *matHeaderCellDef> Type</mat-header-cell>
+        <mat-cell *matCellDef="let element">
+          @if (element.kind === 'FILE') {
+            @if (element.type) {
+              {{ element.type }}
+            } @else {
+              unknown
+            }
+          } @else {
+            Folder
           }
-        </div>
-      </mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="size">
-      <mat-header-cell *matHeaderCellDef> Size</mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.size | digitalStore }}</mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="type">
-      <mat-header-cell *matHeaderCellDef> Type</mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.type }}</mat-cell>
-    </ng-container>
-    <ng-container matColumnDef="updatedAt">
-      <mat-header-cell *matHeaderCellDef> Updated At</mat-header-cell>
-      <mat-cell *matCellDef="let element" [matTooltip]="element.updatedAt?.toDate() | date: 'medium'">
-        {{ element.updatedAt?.toDate() | date: 'mediumDate' }}
-      </mat-cell>
-    </ng-container>
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="updatedAt">
+        <mat-header-cell *matHeaderCellDef> Updated At</mat-header-cell>
+        <mat-cell *matCellDef="let element" [matTooltip]="element.updatedAt?.toDate() | date: 'medium'">
+          {{ element.updatedAt?.toDate() | date: 'mediumDate' }}
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns" (click)="onRowSelect(row)"></mat-row>
-  </mat-table>
+      <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns" (click)="onAssetSelect(row)" class="cursor-pointer"></mat-row>
+    </mat-table>
+  } @else {
+    <div class="flex flex-wrap gap-2 justify-start">
+      @for (item of dataSource.connect() | async; track item.id) {
+        <mat-card class="digital-asset-card cursor-pointer" appearance="outlined" (click)="onAssetSelect(item)">
+          @if (item.inProgress) {
+            <div class="progress">
+              <mat-progress-spinner mode="indeterminate" />
+            </div>
+          } @else if (item.kind === 'FILE' && filePreview(item.type)) {
+            <img
+              class="object-contain bg-stripes-gray"
+              width="600"
+              height="600"
+              loading="lazy"
+              alt="thumbnail"
+              [loaderParams]="{ thumbnail: true }"
+              ngSrc="/api/v1/spaces/{{ data.spaceId }}/assets/{{ item.id }}" />
+          } @else if (item.kind === 'FILE') {
+            <img mat-card-image ngSrc="assets/icons/{{ fileIcon(item.type) }}.svg" alt="File" width="240" height="240" />
+          } @else {
+            <img mat-card-image ngSrc="assets/icons/folder.svg" alt="Folder" width="240" height="240" />
+          }
+          <mat-card-header>
+            <mat-card-subtitle class="break-all">{{ item.name }}{{ item.extension }}</mat-card-subtitle>
+          </mat-card-header>
+          <mat-card-content>
+            @if (item.kind === 'FILE') {
+              @if (item.size; as size) {
+                <p>{{ size | formatFileSize }}</p>
+              }
+              @if (item.metadata; as metadata) {
+                @if (metadata.width && metadata.height) {
+                  <code class="fw-light"> W{{ metadata.width }} x H{{ metadata.height }} </code>
+                }
+              }
+            }
+            <p [matTooltip]="item.updatedAt?.toDate() | date: 'medium'">
+              {{ item.updatedAt?.toDate() | date: 'mediumDate' }}
+            </p>
+          </mat-card-content>
+          <span class="spacer"></span>
+          <mat-card-actions align="end">
+            <mat-checkbox
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(item) : null"
+              [checked]="selection.isSelected(item)">
+            </mat-checkbox>
+          </mat-card-actions>
+        </mat-card>
+      }
+    </div>
+  }
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <mat-paginator></mat-paginator>
+  <button mat-button [disabled]="selection.isEmpty()" (click)="selection.clear()">Deselect All ({{ selection.selected.length }})</button>
   <button mat-button [mat-dialog-close]="undefined">Close</button>
   <button mat-stroked-button color="primary" [mat-dialog-close]="selection.selected" [disabled]="selection.isEmpty()">
     @if (selection.selected.length > 1) {
diff --git a/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.scss b/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.scss
index 8bd9099a..a556a116 100644
--- a/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.scss
+++ b/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.scss
@@ -2,14 +2,20 @@ table {
   width: 100%;
 }
 
+.header-actions {
+  @apply mt-1 float-right flex gap-4 items-center;
+}
+
 mat-dialog-content {
   @apply pt-0 #{!important};
+  @apply pb-1 #{!important};
 }
 
 mat-cell {
-  cursor: pointer;
   &.mat-column-preview {
     img {
+      min-width: 115px;
+      min-height: 115px;
       max-width: 115px;
       max-height: 115px;
     }
diff --git a/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.ts b/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.ts
index 004a4437..56584160 100644
--- a/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.ts
+++ b/src/app/shared/components/assets-select-dialog/assets-select-dialog.component.ts
@@ -5,8 +5,8 @@ import {
   DestroyRef,
   inject,
   Inject,
-  OnDestroy,
   OnInit,
+  signal,
   viewChild,
 } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@@ -15,14 +15,16 @@ import { FormErrorHandlerService } from '@core/error-handler/form-error-handler.
 import { ObjectUtils } from '@core/utils/object-utils.service';
 import { SelectionModel } from '@angular/cdk/collections';
 import { Asset, AssetKind } from '@shared/models/asset.model';
-import { switchMap } from 'rxjs/operators';
-import { BehaviorSubject } from 'rxjs';
+import { concatMap, switchMap, tap } from 'rxjs/operators';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { MatTableDataSource } from '@angular/material/table';
 import { AssetService } from '@shared/services/asset.service';
 import { MatSort } from '@angular/material/sort';
 import { MatPaginator } from '@angular/material/paginator';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PathItem } from '@shared/stores/space.store';
+import { LocalSettingsStore } from '@shared/stores/local-settings.store';
+import { NotificationService } from '@shared/services/notification.service';
 
 @Component({
   selector: 'll-assets-select-dialog',
@@ -30,16 +32,18 @@ import { PathItem } from '@shared/stores/space.store';
   styleUrls: ['./assets-select-dialog.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AssetsSelectDialogComponent implements OnInit, OnDestroy {
-  sort = viewChild.required(MatSort);
+export class AssetsSelectDialogComponent implements OnInit {
+  sort = viewChild(MatSort);
   paginator = viewChild.required(MatPaginator);
 
   assets: Asset[] = [];
   dataSource: MatTableDataSource<Asset> = new MatTableDataSource<Asset>([]);
   displayedColumns: string[] = ['select', 'icon', 'preview', 'name', 'size', 'type', 'updatedAt'];
-  selection = new SelectionModel<Asset>(this.data.multiple, []);
+  selection = new SelectionModel<Asset>(this.data.multiple, [], undefined, (o1, o2) => o1.id === o2.id);
   assetPath: PathItem[] = [];
 
+  fileUploadQueue = signal<File[]>([]);
+
   get parentPath(): string {
     if (this.assetPath && this.assetPath.length > 0) {
       return this.assetPath[this.assetPath.length - 1].fullSlug;
@@ -55,21 +59,22 @@ export class AssetsSelectDialogComponent implements OnInit, OnDestroy {
     },
   ]);
 
+  // Subscriptions
+  private fileUploadQueue$ = new Subject<File>();
   private destroyRef = inject(DestroyRef);
+  // Loading
+  isLoading = signal(true);
+  // Local Settings
+  settingsStore = inject(LocalSettingsStore);
 
   constructor(
     private readonly assetService: AssetService,
+    private readonly notificationService: NotificationService,
     readonly fe: FormErrorHandlerService,
     private readonly cd: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA)
     public data: AssetsSelectDialogModel,
-  ) {}
-
-  ngOnInit(): void {
-    this.loadData();
-  }
-
-  loadData(): void {
+  ) {
     this.path$
       .asObservable()
       .pipe(
@@ -82,29 +87,49 @@ export class AssetsSelectDialogComponent implements OnInit, OnDestroy {
       .subscribe({
         next: assets => {
           this.assets = assets;
-
           this.dataSource = new MatTableDataSource<Asset>(assets);
-          this.dataSource.sort = this.sort();
+          this.dataSource.sort = this.sort() || null;
           this.dataSource.paginator = this.paginator();
+          this.isLoading.set(false);
           this.cd.markForCheck();
         },
       });
   }
 
+  ngOnInit(): void {
+    this.fileUploadQueue$
+      .pipe(
+        tap(console.log),
+        concatMap(it => this.assetService.createFile(this.data.spaceId, this.parentPath, it)),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe({
+        next: () => {
+          this.fileUploadQueue.update(files => {
+            files.shift();
+            return files;
+          });
+        },
+        error: () => {
+          this.notificationService.error(`Asset can not be uploaded.`);
+        },
+      });
+  }
+
   navigateToSlug(pathItem: PathItem) {
+    this.isLoading.set(true);
     const assetPath = ObjectUtils.clone(this.assetPath);
     const idx = assetPath.findIndex(it => it.fullSlug == pathItem.fullSlug);
     assetPath.splice(idx + 1);
     this.path$.next(assetPath);
   }
 
-  onRowSelect(element: Asset): void {
+  onAssetSelect(element: Asset): void {
     if (element.kind === AssetKind.FILE) {
       this.selection.toggle(element);
       return;
-    }
-
-    if (element.kind === AssetKind.FOLDER) {
+    } else if (element.kind === AssetKind.FOLDER) {
+      this.isLoading.set(true);
       const assetPath = ObjectUtils.clone(this.assetPath);
       assetPath.push({
         name: element.name,
@@ -126,7 +151,19 @@ export class AssetsSelectDialogComponent implements OnInit, OnDestroy {
     return type.startsWith('image/');
   }
 
-  ngOnDestroy(): void {
-    this.path$.complete();
+  onFileUpload(event: Event): void {
+    if (event.target && event.target instanceof HTMLInputElement) {
+      const target = event.target as HTMLInputElement;
+      if (target.files && target.files.length > 0) {
+        for (let idx = 0; idx < target.files.length; idx++) {
+          const file = target.files[idx];
+          this.fileUploadQueue.update(files => {
+            files.push(file);
+            return files;
+          });
+          this.fileUploadQueue$.next(file);
+        }
+      }
+    }
   }
 }
diff --git a/src/app/shared/components/references-select-dialog/references-select-dialog.component.html b/src/app/shared/components/references-select-dialog/references-select-dialog.component.html
index 2a60f57c..b456ce7e 100644
--- a/src/app/shared/components/references-select-dialog/references-select-dialog.component.html
+++ b/src/app/shared/components/references-select-dialog/references-select-dialog.component.html
@@ -76,6 +76,7 @@ <h2 mat-dialog-title>Contents</h2>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <mat-paginator></mat-paginator>
+  <button mat-button [disabled]="selection.isEmpty()" (click)="selection.clear()">Deselect All ({{ selection.selected.length }})</button>
   <button mat-button [mat-dialog-close]="undefined">Close</button>
   <button mat-stroked-button color="primary" [mat-dialog-close]="selection.selected" [disabled]="selection.isEmpty()">
     @if (selection.selected.length > 1) {
diff --git a/src/app/shared/components/references-select-dialog/references-select-dialog.component.scss b/src/app/shared/components/references-select-dialog/references-select-dialog.component.scss
index 513cce49..2b74bfa6 100644
--- a/src/app/shared/components/references-select-dialog/references-select-dialog.component.scss
+++ b/src/app/shared/components/references-select-dialog/references-select-dialog.component.scss
@@ -4,6 +4,7 @@ table {
 
 mat-dialog-content {
   @apply pt-0 #{!important};
+  @apply pb-1 #{!important};
 }
 
 mat-row {
diff --git a/src/app/shared/components/references-select-dialog/references-select-dialog.component.ts b/src/app/shared/components/references-select-dialog/references-select-dialog.component.ts
index c7be69c1..33c5e649 100644
--- a/src/app/shared/components/references-select-dialog/references-select-dialog.component.ts
+++ b/src/app/shared/components/references-select-dialog/references-select-dialog.component.ts
@@ -43,7 +43,7 @@ export class ReferencesSelectDialogComponent implements OnInit, OnDestroy {
   contents = signal<Content[]>([]);
   dataSource: MatTableDataSource<Content> = new MatTableDataSource<Content>([]);
   displayedColumns: string[] = ['select', 'status', 'name', 'slug', 'schema', 'updatedAt'];
-  selection = new SelectionModel<ContentDocument>(this.data.multiple, []);
+  selection = new SelectionModel<ContentDocument>(this.data.multiple, [], undefined, (o1, o2) => o1.id === o2.id);
   contentPath: PathItem[] = [];
 
   get parentPath(): string {
diff --git a/src/app/shared/pipes/digital-store.pipe.ts b/src/app/shared/pipes/digital-store.pipe.ts
index 82390b7a..d0433e91 100644
--- a/src/app/shared/pipes/digital-store.pipe.ts
+++ b/src/app/shared/pipes/digital-store.pipe.ts
@@ -1,33 +1,18 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-const K = 1000;
-const M = K * 1000;
-const G = M * 1000;
+const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 
-@Pipe({ name: 'digitalStore' })
-export class DigitalStorePipe implements PipeTransform {
-  transform(size?: number): string {
-    if (size != undefined) {
-      switch (size.toFixed().length) {
-        case 1:
-        case 2:
-        case 3:
-          return `${size} B`;
-        case 4:
-        case 5:
-        case 6:
-          return `${(size / K).toFixed(2)} KB`;
-        case 7:
-        case 8:
-        case 9:
-          return `${(size / M).toFixed(2)} MB`;
-        case 10:
-        case 11:
-        case 12:
-          return `${(size / G).toFixed(2)} GB`;
-        default:
-          return `${size} B`;
+@Pipe({ name: 'formatFileSize' })
+export class FormatFileSizePipe implements PipeTransform {
+  transform(bytes?: number): string {
+    if (bytes != undefined) {
+      let size = bytes;
+      let unitIndex = 0;
+      while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex++;
       }
+      return `${size.toFixed(2)} ${units[unitIndex]}`;
     }
     return '';
   }
diff --git a/src/app/shared/services/content-history.service.ts b/src/app/shared/services/content-history.service.ts
index 94210274..4162e07b 100644
--- a/src/app/shared/services/content-history.service.ts
+++ b/src/app/shared/services/content-history.service.ts
@@ -11,7 +11,7 @@ export class ContentHistoryService {
   constructor(private readonly firestore: Firestore) {}
 
   findAll(spaceId: string, id: string): Observable<ContentHistory[]> {
-    const queryConstrains: QueryConstraint[] = [orderBy('createdAt', 'desc'), limit(20)];
+    const queryConstrains: QueryConstraint[] = [orderBy('createdAt', 'desc'), limit(30)];
     return collectionData(query(collection(this.firestore, `spaces/${spaceId}/contents/${id}/histories`), ...queryConstrains), {
       idField: 'id',
     }).pipe(
diff --git a/src/app/shared/services/translation-history.service.ts b/src/app/shared/services/translation-history.service.ts
index 83a15b1a..61985157 100644
--- a/src/app/shared/services/translation-history.service.ts
+++ b/src/app/shared/services/translation-history.service.ts
@@ -11,7 +11,7 @@ export class TranslationHistoryService {
   constructor(private readonly firestore: Firestore) {}
 
   findAll(spaceId: string): Observable<TranslationHistory[]> {
-    const queryConstrains: QueryConstraint[] = [orderBy('createdAt', 'desc'), limit(20)];
+    const queryConstrains: QueryConstraint[] = [orderBy('createdAt', 'desc'), limit(30)];
     return collectionData(query(collection(this.firestore, `spaces/${spaceId}/translations_history`), ...queryConstrains), {
       idField: 'id',
     }).pipe(
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 6dc04f21..696e543d 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -38,7 +38,7 @@ import { BreadcrumbComponent, BreadcrumbItemComponent } from '@shared/components
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MatBadgeModule } from '@angular/material/badge';
 import { CanUserPerformPipe } from '@shared/pipes/can-user-perform.pipe';
-import { DigitalStorePipe } from '@shared/pipes/digital-store.pipe';
+import { FormatFileSizePipe } from '@shared/pipes/digital-store.pipe';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { TimeDurationPipe } from '@shared/pipes/time-duration.pipe';
@@ -88,7 +88,7 @@ const MATERIAL_MODULES: any[] = [
   MatProgressSpinnerModule,
 ];
 
-const SHARED_PIPES: any[] = [CanUserPerformPipe, DigitalStorePipe, TimeDurationPipe, TranslationFilterPipe];
+const SHARED_PIPES: any[] = [CanUserPerformPipe, FormatFileSizePipe, TimeDurationPipe, TranslationFilterPipe];
 const SHARED_DIRECTIVES: any[] = [FileDragAndDropDirective, ImagePreviewDirective];
 
 const SHARED_COMPONENTS: any[] = [
diff --git a/src/app/shared/stores/local-settings.store.ts b/src/app/shared/stores/local-settings.store.ts
index 15277fc9..b5aa661d 100644
--- a/src/app/shared/stores/local-settings.store.ts
+++ b/src/app/shared/stores/local-settings.store.ts
@@ -5,6 +5,7 @@ const LS_KEY = 'LL-SETTINGS-STATE';
 
 export type Theme = 'light' | 'dark' | 'auto';
 export type EditorSize = '' | 'sm' | 'md' | 'lg';
+export type DataLayout = 'list' | 'grid';
 
 export interface LocalSettingsState {
   theme: Theme;
@@ -12,6 +13,8 @@ export interface LocalSettingsState {
   debugEnabled: boolean;
   editorEnabled: boolean;
   editorSize: EditorSize;
+  assetLayout: DataLayout;
+  assetDialogLayout: DataLayout;
 }
 
 export const initialState: LocalSettingsState = {
@@ -20,6 +23,8 @@ export const initialState: LocalSettingsState = {
   debugEnabled: false,
   editorEnabled: false,
   editorSize: '',
+  assetLayout: 'list',
+  assetDialogLayout: 'list',
 };
 
 function setDocumentTheme(theme: Theme) {
@@ -83,6 +88,14 @@ export const LocalSettingsStore = signalStore(
         patchState(store, { editorSize });
         localStorage.setItem(LS_KEY, JSON.stringify({ ...getState(store), editorSize }));
       },
+      setAssetLayout: (assetLayout: DataLayout): void => {
+        patchState(store, { assetLayout });
+        localStorage.setItem(LS_KEY, JSON.stringify({ ...getState(store), assetLayout }));
+      },
+      setAssetDialogLayout: (assetDialogLayout: DataLayout): void => {
+        patchState(store, { assetDialogLayout });
+        localStorage.setItem(LS_KEY, JSON.stringify({ ...getState(store), assetDialogLayout }));
+      },
     };
   }),
   withComputed(store => {
@@ -92,6 +105,8 @@ export const LocalSettingsStore = signalStore(
       mainMenuExpended: computed(() => store.mainMenuExpended()),
       editorEnabled: computed(() => store.editorEnabled()),
       editorSize: computed(() => store.editorSize()),
+      assetLayout: computed(() => store.assetLayout()),
+      assetDialogLayout: computed(() => store.assetDialogLayout()),
     };
   }),
   withHooks({
diff --git a/src/app/shared/validators/asset.validator.ts b/src/app/shared/validators/asset.validator.ts
index c34e3d8d..ccdf45df 100644
--- a/src/app/shared/validators/asset.validator.ts
+++ b/src/app/shared/validators/asset.validator.ts
@@ -6,6 +6,6 @@ export class AssetValidator {
     Validators.required,
     CommonValidator.noSpaceAround,
     Validators.minLength(3),
-    Validators.maxLength(50),
+    Validators.maxLength(100),
   ];
 }
diff --git a/src/assets/icons/audio_file.svg b/src/assets/icons/audio_file.svg
new file mode 100644
index 00000000..ff122c7b
--- /dev/null
+++ b/src/assets/icons/audio_file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M430-200q38 0 64-26t26-64v-150h120v-80H480v155q-11-8-23.5-11.5T430-380q-38 0-64 26t-26 64q0 38 26 64t64 26ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/description.svg b/src/assets/icons/description.svg
new file mode 100644
index 00000000..43fc0edd
--- /dev/null
+++ b/src/assets/icons/description.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M320-240h320v-80H320v80Zm0-160h320v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/file_present.svg b/src/assets/icons/file_present.svg
new file mode 100644
index 00000000..6d062a12
--- /dev/null
+++ b/src/assets/icons/file_present.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h360l200 200v520q0 33-23.5 56.5T720-80H240Zm0-80h480v-480H560v-160H240v640Zm240-40q67 0 113.5-47T640-360v-160h-80v160q0 33-23 56.5T480-280q-33 0-56.5-23.5T400-360v-220q0-9 6-14.5t14-5.5q9 0 14.5 5.5T440-580v220h80v-220q0-42-29-71t-71-29q-42 0-71 29t-29 71v220q0 66 47 113t113 47ZM240-800v160-160 640-640Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/folder.svg b/src/assets/icons/folder.svg
new file mode 100644
index 00000000..021db149
--- /dev/null
+++ b/src/assets/icons/folder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/font_download.svg b/src/assets/icons/font_download.svg
new file mode 100644
index 00000000..28d6867d
--- /dev/null
+++ b/src/assets/icons/font_download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M256-240h84l44-122h192l44 122h84L522-720h-84L256-240Zm152-192 70-198h4l70 198H408ZM160-80q-33 0-56.5-23.5T80-160v-640q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v640q0 33-23.5 56.5T800-80H160Zm0-80h640v-640H160v640Zm0-640v640-640Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/image.svg b/src/assets/icons/image.svg
new file mode 100644
index 00000000..4e503732
--- /dev/null
+++ b/src/assets/icons/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/video_file.svg b/src/assets/icons/video_file.svg
new file mode 100644
index 00000000..b439a9be
--- /dev/null
+++ b/src/assets/icons/video_file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M360-240h160q17 0 28.5-11.5T560-280v-40l80 42v-164l-80 42v-40q0-17-11.5-28.5T520-480H360q-17 0-28.5 11.5T320-440v160q0 17 11.5 28.5T360-240ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 840f5df6..afd9d8aa 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -20,6 +20,7 @@ markdown {
 @import 'styles/mat-grid-list';
 @import 'styles/mat-list';
 @import 'styles/mat-menu';
+@import 'styles/mat-paginator';
 @import 'styles/mat-snack-bar';
 @import 'styles/mat-table';
 @import 'styles/mat-toolbar';
diff --git a/src/styles/_background.scss b/src/styles/_background.scss
index cc9260a0..a7e07018 100644
--- a/src/styles/_background.scss
+++ b/src/styles/_background.scss
@@ -3,12 +3,9 @@
 @import './styles-variables';
 
 .file-drag-and-drop-wrapper {
-  background-color: $background-blue-color !important;
-  border-style: solid !important;
-  border-color: $border-blue-color !important;
-  border-width: 3px !important;
-  border-radius: 5px;
-  opacity: 0.25;
+  background-color: var(--sys-primary-container) !important;
+  outline: var(--sys-primary) solid 3px !important;
+  opacity: 0.5;
 }
 
 
diff --git a/src/styles/_mat-card.scss b/src/styles/_mat-card.scss
index b2faf059..0226cef5 100644
--- a/src/styles/_mat-card.scss
+++ b/src/styles/_mat-card.scss
@@ -10,4 +10,26 @@ mat-card {
   &.invalid {
     border: solid 2px var(--sys-error);
   }
+  &.digital-asset-card {
+    max-width: 240px;
+    min-width: 240px;
+    img {
+      min-width: 240px;
+      min-height: 240px;
+      max-width: 240px;
+      max-height: 240px;
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+      border-bottom-width: var(--mdc-outlined-card-outline-width);
+      border-bottom-color: var(--mdc-outlined-card-outline-color, var(--mat-app-outline-variant));
+    }
+    .progress {
+      min-width: 240px;
+      min-height: 240px;
+      max-width: 240px;
+      max-height: 240px;
+      align-content: center;
+      padding-left: 60px;
+    }
+  }
 }
diff --git a/src/styles/_mat-dialog.scss b/src/styles/_mat-dialog.scss
index f8b850fd..4854bc1d 100644
--- a/src/styles/_mat-dialog.scss
+++ b/src/styles/_mat-dialog.scss
@@ -1,6 +1,11 @@
-@use '@angular/material' as mat;
-
-@import './styles-variables';
+/*
+None	width: 100%;
+sm (640px)	max-width: 640px;
+md (768px)	max-width: 768px;
+lg (1024px)	max-width: 1024px;
+xl (1280px)	max-width: 1280px;
+2xl (1536px)	max-width: 1536px;
+*/
 
 .cdk-overlay-pane.mat-mdc-dialog-panel {
   &.sm {
@@ -15,7 +20,30 @@
     max-width: 1280px;
     max-height: calc(100vh - 80px);
   }
+  &.xxl {
+    min-width: 900px;
+    width: calc(100vw - 160px);
+    max-width: 1536px;
+    max-height: calc(100vh - 80px);
+  }
   &.full-screen {
+    min-width: calc(100vw - 24px);
+    max-width: calc(100vw - 24px);
+    max-height: calc(100vh - 24px);
+  }
+  &.image-preview {
+    max-width: calc(100vw - 80px);
+    max-height: calc(100vh - 80px);
 
+    mat-dialog-content {
+      min-height: fit-content;
+      min-width: fit-content;
+      img {
+        min-width: 800px;
+        min-height: 800px;
+        max-width: calc(100vw - 180px);
+        max-height: calc(100vh - 180px);
+      }
+    }
   }
 }
diff --git a/src/styles/_mat-paginator.scss b/src/styles/_mat-paginator.scss
new file mode 100644
index 00000000..b9e9be77
--- /dev/null
+++ b/src/styles/_mat-paginator.scss
@@ -0,0 +1,5 @@
+mat-paginator {
+  &.mat-paginator-sticky {
+    @apply sticky bottom-0 z-10;
+  }
+}
diff --git a/src/styles/_mat-toolbar.scss b/src/styles/_mat-toolbar.scss
index 6b24dd24..5ecad36d 100644
--- a/src/styles/_mat-toolbar.scss
+++ b/src/styles/_mat-toolbar.scss
@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 
 mat-toolbar-row {
-  .mat-mdc-button-base {
-    margin: 8px 8px 8px 8px;
+  .actions {
+    @apply flex gap-4 items-center;
   }
 }