Index: Sources/frontend/src/app/materials/materials.component.css
===================================================================
--- Sources/frontend/src/app/materials/materials.component.css	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/materials/materials.component.css	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,45 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 200px;
+  margin-right: 200px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+
+button {
+  background-color: #3A98B9;
+  border: none;
+  padding: 5px;
+  height: 50px;
+  margin: 5px;
+  border-radius: 5px;
+  color: #FFF1DC;
+  font-weight: normal;
+  font-size: large;
+}
+
+li {
+  padding: 10px;
+}
+
+p {
+  display: inline;
+  margin-right: 20px;
+}
+
+svg {
+  color: rgba(27, 39, 107, 0.8);
+}
+
+ol{
+  color: #3A98B9;
+  font-size: large;
+  background-color: #ffffff;
+  border-radius: 15px;
+}
+
Index: Sources/frontend/src/app/materials/materials.component.html
===================================================================
--- Sources/frontend/src/app/materials/materials.component.html	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/materials/materials.component.html	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,20 @@
+<div class="container">
+  <div class="header">
+    <h1>Материјали</h1>
+    <button *ngIf="this.activeUser?.userType=='PROFESSOR'" routerLink="/add-materials">+Материјал</button>
+  </div>
+  <ol>
+    <li *ngFor="let filename of files">
+      <p>{{ filename }}</p>
+      <a (click)="onDownloadFile(filename)">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download"
+             viewBox="0 0 16 16">
+          <path
+            d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+          <path
+            d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+        </svg>
+      </a>
+    </li>
+  </ol>
+</div>
Index: Sources/frontend/src/app/materials/materials.component.spec.ts
===================================================================
--- Sources/frontend/src/app/materials/materials.component.spec.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/materials/materials.component.spec.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MaterialsComponent } from './materials.component';
+
+describe('MaterialsComponent', () => {
+  let component: MaterialsComponent;
+  let fixture: ComponentFixture<MaterialsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MaterialsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MaterialsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: Sources/frontend/src/app/materials/materials.component.ts
===================================================================
--- Sources/frontend/src/app/materials/materials.component.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/materials/materials.component.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,84 @@
+import {Component, OnInit} from '@angular/core';
+import {ActiveUserInterface} from "../ActiveUserInterface";
+import {LoginService} from "../login.service";
+import {MaterialsService} from "../materials.service";
+import {HttpErrorResponse, HttpEvent, HttpEventType} from "@angular/common/http";
+import {saveAs} from "file-saver";
+import {ActivatedRoute} from "@angular/router";
+
+@Component({
+  selector: 'app-materials',
+  templateUrl: './materials.component.html',
+  styleUrls: ['./materials.component.css']
+})
+export class MaterialsComponent implements OnInit{
+
+  activeUser: ActiveUserInterface | undefined;
+  courseId : number | undefined;
+  files: string[] | any = []
+  fileStatus = {status: '', requestType: '', percent: 0};
+
+  constructor(private loginService: LoginService,
+              private materialService: MaterialsService,
+              private _router: ActivatedRoute) {
+  }
+  ngOnInit() {
+    this.activeUser = this.loginService.activeUser;
+    this.courseId = +this._router.snapshot.paramMap.get("id");
+    this.materialService.findAllMaterialsForCourse(this.courseId)
+      .subscribe(response => {
+        console.log("files", this.files)
+        this.files = response
+      })
+  }
+
+  onDownloadFile(filename: string): void {
+    this.materialService.download(filename).subscribe(
+      event => {
+        console.log(event);
+        this.resportProgress(event);
+      },
+      (error: HttpErrorResponse) => {
+        console.log(error);
+      }
+    );
+  }
+
+  private resportProgress(httpEvent: HttpEvent<string[] | Blob>): void {
+    switch (httpEvent.type) {
+      case HttpEventType.UploadProgress:
+        this.updateStatus(httpEvent.loaded, httpEvent.total!, 'Uploading... ');
+        break;
+      case HttpEventType.DownloadProgress:
+        this.updateStatus(httpEvent.loaded, httpEvent.total!, 'Downloading... ');
+        break;
+      case HttpEventType.ResponseHeader:
+        console.log('Header returned', httpEvent);
+        break;
+      case HttpEventType.Response:
+        if (httpEvent.body instanceof Array) {
+          this.fileStatus.status = 'done';
+          for (const filename of httpEvent.body) {
+            this.files.unshift(filename);
+          }
+        } else {
+          saveAs(new Blob([httpEvent.body!],
+              { type: `${httpEvent.headers.get('Content-Type')};charset=utf-8`}),
+            httpEvent.headers.get('File-Name'));
+        }
+        this.fileStatus.status = 'done';
+        break;
+      default:
+        console.log(httpEvent);
+        break;
+
+    }
+  }
+
+  private updateStatus(loaded: number, total: number, requestType: string): void {
+    this.fileStatus.status = 'progress';
+    this.fileStatus.requestType = requestType;
+    this.fileStatus.percent = Math.round(100 * loaded / total);
+  }
+
+}
