diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 52fb789..f7a1269 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -77,6 +77,7 @@ import { ConfirmDialogComponent } from './dialogs/confirm-dialog/confirm-dialog.
 import { UnifiedFileCardComponent } from './components/unified-file-card/unified-file-card.component';
 import { RecentVideosComponent } from './components/recent-videos/recent-videos.component';
 import { EditSubscriptionDialogComponent } from './dialogs/edit-subscription-dialog/edit-subscription-dialog.component';
+import { CustomPlaylistsComponent } from './components/custom-playlists/custom-playlists.component';
 
 registerLocaleData(es, 'es');
 
@@ -120,7 +121,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     ConfirmDialogComponent,
     UnifiedFileCardComponent,
     RecentVideosComponent,
-    EditSubscriptionDialogComponent
+    EditSubscriptionDialogComponent,
+    CustomPlaylistsComponent
   ],
   imports: [
     CommonModule,
diff --git a/src/app/components/custom-playlists/custom-playlists.component.html b/src/app/components/custom-playlists/custom-playlists.component.html
new file mode 100644
index 0000000..e45cb61
--- /dev/null
+++ b/src/app/components/custom-playlists/custom-playlists.component.html
@@ -0,0 +1,13 @@
+<div *ngIf="playlists && playlists.length > 0">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div *ngFor="let playlist of playlists; let i = index" [ngClass]="[ card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
+                <app-unified-file-card [index]="i" [card_size]="card_size" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)"></app-unified-file-card>
+            </div>
+        </div>
+    </div>
+</div>
+<div *ngIf="playlists && playlists.length === 0" style="text-align: center;">
+    No playlists available. Create one from your downloading files by clicking the blue plus button.
+</div>
+<div class="add-playlist-button"><button (click)="openCreatePlaylistDialog()" mat-fab><mat-icon>add</mat-icon></button></div>
\ No newline at end of file
diff --git a/src/app/components/custom-playlists/custom-playlists.component.scss b/src/app/components/custom-playlists/custom-playlists.component.scss
new file mode 100644
index 0000000..0246e70
--- /dev/null
+++ b/src/app/components/custom-playlists/custom-playlists.component.scss
@@ -0,0 +1,7 @@
+.add-playlist-button {
+    float: right;
+}
+
+.file-col {
+    max-width: 240px;
+}
\ No newline at end of file
diff --git a/src/app/components/custom-playlists/custom-playlists.component.spec.ts b/src/app/components/custom-playlists/custom-playlists.component.spec.ts
new file mode 100644
index 0000000..5e9348b
--- /dev/null
+++ b/src/app/components/custom-playlists/custom-playlists.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomPlaylistsComponent } from './custom-playlists.component';
+
+describe('CustomPlaylistsComponent', () => {
+  let component: CustomPlaylistsComponent;
+  let fixture: ComponentFixture<CustomPlaylistsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomPlaylistsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomPlaylistsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/custom-playlists/custom-playlists.component.ts b/src/app/components/custom-playlists/custom-playlists.component.ts
new file mode 100644
index 0000000..6d870bf
--- /dev/null
+++ b/src/app/components/custom-playlists/custom-playlists.component.ts
@@ -0,0 +1,113 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { CreatePlaylistComponent } from 'app/create-playlist/create-playlist.component';
+import { ModifyPlaylistComponent } from 'app/dialogs/modify-playlist/modify-playlist.component';
+
+@Component({
+  selector: 'app-custom-playlists',
+  templateUrl: './custom-playlists.component.html',
+  styleUrls: ['./custom-playlists.component.scss']
+})
+export class CustomPlaylistsComponent implements OnInit {
+
+  playlists = null;
+  playlists_received = false;
+  card_size = 'medium';
+  downloading_content = {'video': {}, 'audio': {}};
+
+  constructor(private postsService: PostsService, private router: Router, private dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    this.postsService.service_initialized.subscribe(init => {
+      if (init) {
+        this.getAllPlaylists();
+      }
+    });
+  }
+
+  getAllPlaylists() {
+    this.playlists_received = false;
+    this.postsService.getAllFiles().subscribe(res => {
+      this.playlists = res['playlists'];
+      this.playlists_received = true;
+    });
+  }
+
+  // creating a playlist
+  openCreatePlaylistDialog() {
+    const dialogRef = this.dialog.open(CreatePlaylistComponent, {
+      data: {
+      }
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.getAllPlaylists();
+        this.postsService.openSnackBar('Successfully created playlist!', '');
+      } else if (result === false) {
+        this.postsService.openSnackBar('ERROR: failed to create playlist!', '');
+      }
+    });
+  }
+
+  goToPlaylist(playlist) {
+    const playlistID = playlist.id;
+    const type = playlist.type;
+
+    if (playlist) {
+      if (this.postsService.config['Extra']['download_only_mode']) {
+        this.downloading_content[type][playlistID] = true;
+        this.downloadPlaylist(playlist.fileNames, type, playlist.name, playlistID);
+      } else {
+        localStorage.setItem('player_navigator', this.router.url);
+        const fileNames = playlist.fileNames;
+        this.router.navigate(['/player', {fileNames: fileNames.join('|nvr|'), type: type, id: playlistID, uid: playlistID}]);
+      }
+    } else {
+      // playlist not found
+      console.error(`Playlist with ID ${playlistID} not found!`);
+    }
+  }
+
+  downloadPlaylist(fileNames, type, zipName = null, playlistID = null) {
+    this.postsService.downloadFileFromServer(fileNames, type, zipName).subscribe(res => {
+      if (playlistID) { this.downloading_content[type][playlistID] = false };
+      const blob: Blob = res;
+      saveAs(blob, zipName + '.zip');
+    });
+
+  }
+
+  deletePlaylist(args) {
+    const playlist = args.file;
+    const index = args.index;
+    const playlistID = playlist.id;
+    this.postsService.removePlaylist(playlistID, 'audio').subscribe(res => {
+      if (res['success']) {
+        this.playlists.splice(index, 1);
+        this.postsService.openSnackBar('Playlist successfully removed.', '');
+      }
+      this.getAllPlaylists();
+    });
+  }
+  
+  editPlaylistDialog(args) {
+    const playlist = args.playlist;
+    const index = args.index;
+    const dialogRef = this.dialog.open(ModifyPlaylistComponent, {
+      data: {
+        playlist: playlist,
+        width: '65vw'
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(res => {
+      // updates playlist in file manager if it changed
+      if (dialogRef.componentInstance.playlist_updated) {
+        this.playlists[index] = dialogRef.componentInstance.original_playlist;
+      }
+    });
+  }
+
+}
diff --git a/src/app/components/unified-file-card/unified-file-card.component.html b/src/app/components/unified-file-card/unified-file-card.component.html
index 520eeaf..82377f5 100644
--- a/src/app/components/unified-file-card/unified-file-card.component.html
+++ b/src/app/components/unified-file-card/unified-file-card.component.html
@@ -1,18 +1,25 @@
 <div (mouseover)="elevated=true" (mouseout)="elevated=false" style="position: relative; width: fit-content;">
-    <div class="download-time"><mat-icon class="audio-video-icon">{{file_obj.isAudio ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate'}}</div>
+    <div class="download-time"><mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate'}}</div>
     <button [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
     <mat-menu #action_menu="matMenu">
-        <button (click)="openFileInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
-        <button (click)="navigateToSubscription()" mat-menu-item *ngIf="file_obj.sub_id"><mat-icon>{{file_obj.isAudio ? 'library_music' : 'video_library'}}</mat-icon>&nbsp;<ng-container i18n="Go to subscription menu item">Go to subscription</ng-container></button>
-        <mat-divider></mat-divider>
-        <button *ngIf="file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item>
-            <mat-icon>restore</mat-icon><ng-container i18n="Delete and redownload subscription video button">Delete and redownload</ng-container>
-        </button>
-        <button *ngIf="file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item>
-            <mat-icon>delete_forever</mat-icon><ng-container i18n="Delete forever subscription video button">Delete forever</ng-container>
-        </button>
-        <button *ngIf="!file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
-        <button *ngIf="!file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
+        <ng-container *ngIf="!is_playlist">
+            <button (click)="openFileInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
+            <button (click)="navigateToSubscription()" mat-menu-item *ngIf="file_obj.sub_id"><mat-icon>{{file_obj.isAudio ? 'library_music' : 'video_library'}}</mat-icon>&nbsp;<ng-container i18n="Go to subscription menu item">Go to subscription</ng-container></button>
+            <mat-divider></mat-divider>
+            <button *ngIf="file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item>
+                <mat-icon>restore</mat-icon><ng-container i18n="Delete and redownload subscription video button">Delete and redownload</ng-container>
+            </button>
+            <button *ngIf="file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item>
+                <mat-icon>delete_forever</mat-icon><ng-container i18n="Delete forever subscription video button">Delete forever</ng-container>
+            </button>
+            <button *ngIf="!file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
+            <button *ngIf="!file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
+        </ng-container>
+        <ng-container *ngIf="is_playlist">
+            <button (click)="emitEditPlaylist()" mat-menu-item><mat-icon>edit</mat-icon><ng-container i18n="Playlist edit button">Edit</ng-container></button>
+            <mat-divider></mat-divider>
+            <button (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete playlist">Delete</ng-container></button>
+        </ng-container>
     </mat-menu>
     <mat-card [matTooltip]="null" (click)="navigateToFile()" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
         <div style="padding:5px">
@@ -26,7 +33,7 @@
                 
             </div>
 
-            <span [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }"><strong>{{file_obj.title}}</strong></span>      
+            <span [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }"><strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>      
         </div>
     </mat-card>
 </div>
diff --git a/src/app/components/unified-file-card/unified-file-card.component.ts b/src/app/components/unified-file-card/unified-file-card.component.ts
index f401f88..03f148e 100644
--- a/src/app/components/unified-file-card/unified-file-card.component.ts
+++ b/src/app/components/unified-file-card/unified-file-card.component.ts
@@ -19,10 +19,12 @@ export class UnifiedFileCardComponent implements OnInit {
   @Input() file_obj = null;
   @Input() card_size = 'medium';
   @Input() use_youtubedl_archive = false;
+  @Input() is_playlist = false;
   @Input() index: number;
   @Output() goToFile = new EventEmitter<any>();
   @Output() goToSubscription = new EventEmitter<any>();
   @Output() deleteFile = new EventEmitter<any>();
+  @Output() editPlaylist = new EventEmitter<any>();
 
   /*
     Planned sizes:
@@ -62,6 +64,13 @@ export class UnifiedFileCardComponent implements OnInit {
     })
   }
 
+  emitEditPlaylist() {
+    this.editPlaylist.emit({
+      playlist: this.file_obj,
+      index: this.index
+    });
+  }
+
 }
 
 function fancyTimeFormat(time) {
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 3993de4..4d17a06 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -1,7 +1,7 @@
 <br/>
 <div class="big demo-basic">
     <mat-card id="card" style="margin-right: 20px; margin-left: 20px;" [ngClass]="(allowAdvancedDownload) ? 'no-border-radius-bottom' : null">
-        <mat-card-content>
+        <mat-card-content style="padding: 0px 8px 0px 8px;">
             <div style="position: relative;">
                 <form class="example-form">
                     <div class="container-fluid">
@@ -180,8 +180,14 @@
 <ng-template #nofile>
 
 </ng-template>
+
+<h4 style="text-align: center">My videos</h4>
 <app-recent-videos></app-recent-videos>
-<div style="margin: 20px" *ngIf="fileManagerEnabled && (!postsService.isLoggedIn || postsService.permissions.includes('filemanager'))">
+<br/>
+<h4 style="text-align: center">Custom playlists</h4>
+<app-custom-playlists></app-custom-playlists>
+
+<!--<div style="margin: 20px" *ngIf="fileManagerEnabled && (!postsService.isLoggedIn || postsService.permissions.includes('filemanager'))">
     <mat-accordion>
         <mat-expansion-panel (opened)="accordionOpened('audio')" (closed)="accordionClosed('audio')" (mouseleave)="accordionLeft('audio')" (mouseenter)="accordionEntered('audio')" class="big">
             <mat-expansion-panel-header>
@@ -258,7 +264,7 @@
                     </mat-grid-tile>
                 </mat-grid-list>
         
-                <!-- Add video playlist button -->
+                <!-- Add video playlist button --<
                 <div class="add-playlist-button"><button (click)="openCreatePlaylistDialog('video')" mat-fab><mat-icon>add</mat-icon></button></div>
                 <div *ngIf="playlists.video.length === 0">
                     <ng-container i18n="No video playlists available text">
@@ -268,12 +274,4 @@
             </div>
         </mat-expansion-panel>
     </mat-accordion>
-</div>
-
-<ng-template #nomp3s>
-
-</ng-template>
-
-<ng-template #nomp4s>
-
-</ng-template>
\ No newline at end of file
+</div>-->
\ No newline at end of file