diff --git a/src/app/xtream/content-type-navigation-item.interface.ts b/src/app/xtream/content-type-navigation-item.interface.ts
new file mode 100644
index 000000000..70d976686
--- /dev/null
+++ b/src/app/xtream/content-type-navigation-item.interface.ts
@@ -0,0 +1,6 @@
+import { ContentType } from './content-type.enum';
+
+export interface ContentTypeNavigationItem {
+    contentType: ContentType;
+    label: string;
+}
\ No newline at end of file
diff --git a/src/app/xtream/content-type.enum.ts b/src/app/xtream/content-type.enum.ts
index 7125355a3..abd1672fa 100644
--- a/src/app/xtream/content-type.enum.ts
+++ b/src/app/xtream/content-type.enum.ts
@@ -1,5 +1,5 @@
 export enum ContentType {
-    LIVE_STREAMS = 'LIVE_STREAMS',
-    VODS = 'VODS',
-    SERIES = 'SERIES',
+    VODS = 'vod',
+    SERIES = 'series',
+    ITV = 'itv',
 }
diff --git a/src/app/xtream/navigation-bar/navigation-bar.component.html b/src/app/xtream/navigation-bar/navigation-bar.component.html
index c7798b890..ea876fb6d 100644
--- a/src/app/xtream/navigation-bar/navigation-bar.component.html
+++ b/src/app/xtream/navigation-bar/navigation-bar.component.html
@@ -10,15 +10,15 @@
             [value]="contentType"
             (change)="contentTypeChanged.emit($event.value)"
         >
-            <mat-button-toggle [value]="ContentTypeEnum.LIVE_STREAMS"
-                >Live Streams</mat-button-toggle
-            >
-            <mat-button-toggle [value]="ContentTypeEnum.VODS"
-                >VOD Streams</mat-button-toggle
-            >
-            <mat-button-toggle [value]="ContentTypeEnum.SERIES"
-                >Series</mat-button-toggle
+            <mat-button-toggle
+                *ngFor="
+                    let item of contentTypeNavigationItems;
+                    trackBy: trackByValue
+                "
+                [value]="item.contentType"
             >
+                {{ item.label }}
+            </mat-button-toggle>
         </mat-button-toggle-group>
     </div>
 
diff --git a/src/app/xtream/navigation-bar/navigation-bar.component.ts b/src/app/xtream/navigation-bar/navigation-bar.component.ts
index 3d00134c9..5cf63b6d3 100644
--- a/src/app/xtream/navigation-bar/navigation-bar.component.ts
+++ b/src/app/xtream/navigation-bar/navigation-bar.component.ts
@@ -6,6 +6,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
 import { Breadcrumb } from '../breadcrumb.interface';
+import { ContentTypeNavigationItem } from '../content-type-navigation-item.interface';
 import { ContentType } from '../content-type.enum';
 import { PortalStore } from '../portal.store';
 
@@ -28,6 +29,7 @@ export class NavigationBarComponent {
     @Input({ required: true }) breadcrumbs: Breadcrumb[];
     @Input({ required: true }) contentType: ContentType;
     @Input() searchVisible = true;
+    @Input() contentTypeNavigationItems: ContentTypeNavigationItem[];
 
     @Output() contentTypeChanged = new EventEmitter<ContentType>();
     @Output() breadcrumbClicked = new EventEmitter<Breadcrumb>();
@@ -45,4 +47,8 @@ export class NavigationBarComponent {
     setSearchText(text: string) {
         this.portalStore.setSearchPhrase(text);
     }
+
+    trackByValue(_i: number, value: ContentTypeNavigationItem) {
+        return value.contentType;
+    }
 }
diff --git a/src/app/xtream/portal-card-item.interface.ts b/src/app/xtream/portal-card-item.interface.ts
new file mode 100644
index 000000000..8812636d0
--- /dev/null
+++ b/src/app/xtream/portal-card-item.interface.ts
@@ -0,0 +1,10 @@
+// should represent the content of a card element - xtream category or VOD or any item from stalker, vportal etc
+export interface PortalCardItem {
+    // TODO
+    id: string;
+    type: 'category' | 'vod' | 'serial' | 'live'; // TODO: enum
+    name: string;
+    coverUrl?: string;
+    streamType?: 'live' | 'movie'; // TODO: maybe not needed, since type is there
+    categoryId?: string;
+}
diff --git a/src/app/xtream/xtream-main-container.component.html b/src/app/xtream/xtream-main-container.component.html
index e48a0c633..27114e920 100644
--- a/src/app/xtream/xtream-main-container.component.html
+++ b/src/app/xtream/xtream-main-container.component.html
@@ -8,6 +8,7 @@
     [searchVisible]="
         currentLayout === 'category' || currentLayout === 'category_content'
     "
+    [contentTypeNavigationItems]="navigationContentTypes"
 />
 
 <div class="container">
diff --git a/src/app/xtream/xtream-main-container.component.ts b/src/app/xtream/xtream-main-container.component.ts
index 8edb4343e..d40787372 100644
--- a/src/app/xtream/xtream-main-container.component.ts
+++ b/src/app/xtream/xtream-main-container.component.ts
@@ -25,6 +25,7 @@ import { IpcCommand } from '../../../shared/ipc-command.class';
 import {
     ERROR,
     OPEN_MPV_PLAYER,
+    OPEN_VLC_PLAYER,
     XTREAM_REQUEST,
     XTREAM_RESPONSE,
 } from '../../../shared/ipc-commands';
@@ -55,24 +56,22 @@ import { PlaylistsService } from '../services/playlists.service';
 import { Settings, VideoPlayer } from '../settings/settings.interface';
 import { STORE_KEY } from '../shared/enums/store-keys.enum';
 import { Breadcrumb } from './breadcrumb.interface';
+import { ContentTypeNavigationItem } from './content-type-navigation-item.interface';
 import { PlayerDialogComponent } from './player-dialog/player-dialog.component';
 import { PortalStore } from './portal.store';
 import { SerialDetailsComponent } from './serial-details/serial-details.component';
 
 const ContentTypes = {
-    LIVE_STREAMS: {
-        title: 'Live streams',
+    [ContentType.ITV]: {
         getContentAction: XtreamCodeActions.GetLiveStreams,
         getCategoryAction: XtreamCodeActions.GetLiveCategories,
     },
-    VODS: {
-        title: 'VOD streams',
+    [ContentType.VODS]: {
         getContentAction: XtreamCodeActions.GetVodStreams,
         getCategoryAction: XtreamCodeActions.GetVodCategories,
         getDetailsAction: XtreamCodeActions.GetVodInfo,
     },
-    SERIES: {
-        title: 'Series',
+    [ContentType.SERIES]: {
         getContentAction: XtreamCodeActions.GetSeries,
         getCategoryAction: XtreamCodeActions.GetSeriesCategories,
         getDetailsAction: XtreamCodeActions.GetSeriesInfo,
@@ -123,6 +122,20 @@ export class XtreamMainContainerComponent implements OnInit {
     storage = inject(StorageMap);
     store = inject(Store);
     currentPlaylist = this.store.selectSignal(selectCurrentPlaylist);
+    navigationContentTypes: ContentTypeNavigationItem[] = [
+        {
+            contentType: ContentType.ITV,
+            label: 'Live Streams',
+        },
+        {
+            contentType: ContentType.VODS,
+            label: 'VOD Streams',
+        },
+        {
+            contentType: ContentType.SERIES,
+            label: 'Series',
+        },
+    ];
 
     favorites$: Observable<any>;
     breadcrumbs: Breadcrumb[] = [];
@@ -157,7 +170,6 @@ export class XtreamMainContainerComponent implements OnInit {
 
     ngOnInit() {
         this.setInitialBreadcrumb();
-        console.log(this.currentPlaylist()._id);
         this.favorites$ = this.playlistService.getPortalFavorites(
             this.currentPlaylist()._id
         );
@@ -276,6 +288,10 @@ export class XtreamMainContainerComponent implements OnInit {
             this.dataService.sendIpcEvent(OPEN_MPV_PLAYER, {
                 url: streamUrl,
             });
+        } else if (player === VideoPlayer.VLC) {
+            this.dataService.sendIpcEvent(OPEN_VLC_PLAYER, {
+                url: streamUrl,
+            });
         } else {
             this.dialog.open(PlayerDialogComponent, {
                 data: { streamUrl, player, title },
@@ -385,7 +401,6 @@ export class XtreamMainContainerComponent implements OnInit {
     }
 
     setSearchPhrase(searchPhrase: string) {
-        console.log(searchPhrase);
         this.searchPhrase = searchPhrase;
     }