diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
index 5579a119..894b2d4e 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
@@ -4,18 +4,23 @@
   class="ucap-ui-file-upload-queue-container"
 >
   <div
-    fxLayout="row"
+    fxLayout="column"
     fxFlex="100"
     fxFlex.gt-xs="50"
     fxFlex.gt-md="25"
     *ngFor="let file of uploadFiles"
   >
-    <div>
-      <mat-icon>image</mat-icon>
+    <div fxLayout="row">
+      <div>
+        <mat-icon>image</mat-icon>
+      </div>
+      <div>{{ file.name }}</div>
+      <div (click)="onClickClear(file)">
+        <mat-icon>clear</mat-icon>
+      </div>
     </div>
-    <div>{{ file.name }}</div>
-    <div (click)="onClickClear(file)">
-      <mat-icon>clear</mat-icon>
+    <div fxLayout="row">
+      <mat-progress-bar mode="determinate" value="40"> </mat-progress-bar>
     </div>
   </div>
 </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
index fcc683ea..ece8bd9b 100644
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@@ -7,6 +7,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -57,6 +58,7 @@ const SERVICES = [
     MatCardModule,
     MatDialogModule,
     MatIconModule,
+    MatProgressBarModule,
     MatSnackBarModule,
     DragDropModule
   ],