diff --git a/src/app/services/dialog.service.ts b/src/app/services/dialog.service.ts
index b77590e71..9bbdb60df 100644
--- a/src/app/services/dialog.service.ts
+++ b/src/app/services/dialog.service.ts
@@ -1,7 +1,7 @@
-import { ConfirmDialogComponent } from './../shared/components/confirm-dialog/confirm-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
 import { Injectable } from '@angular/core';
-import { ConfirmDialogData } from '../shared/components/confirm-dialog/confirm-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmDialogData } from '../shared/components/confirm-dialog/confirm-dialog-data.interface';
+import { ConfirmDialogComponent } from './../shared/components/confirm-dialog/confirm-dialog.component';
 
 @Injectable({
     providedIn: 'root',
@@ -14,7 +14,10 @@ export class DialogService {
      * @param data dialog meta info
      */
     openConfirmDialog(data: ConfirmDialogData): void {
-        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+        const dialogRef = this.dialog.open<
+            ConfirmDialogComponent,
+            ConfirmDialogData
+        >(ConfirmDialogComponent, {
             data,
             width: '300px',
         });
diff --git a/src/app/shared/components/about-dialog/about-dialog.component.html b/src/app/shared/components/about-dialog/about-dialog.component.html
deleted file mode 100644
index 4740e9e61..000000000
--- a/src/app/shared/components/about-dialog/about-dialog.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<div mat-dialog-content>
-    <img src="./assets/icons/icon-tv-256.png" width="128" /><br />
-    <h1 mat-dialog-title>About IPTVnator</h1>
-    <p>
-        Cross-platform IPTV player application with multiple features, such as
-        support of m3u and m3u8 playlists, favorites, TV guide, TV
-        archive/catchup and more.
-    </p>
-    <p>Version: {{ appVersion }}</p>
-    <p>
-        <a
-            href="https://github.com/4gray/iptvnator"
-            target="_blank"
-            title="ITPVnator repository on GitHub"
-            aria-label="ITPVnator repository on GitHub"
-            ><img
-                src="./assets/icons/github-light.png"
-                title="ITPVnator repository on GitHub" /></a
-        >&nbsp;
-        <a
-            href="http://twitter.com/share?text=IPTVnator &mdash; free cross-platform IPTV player. Available as PWA and as native application.&url=https://github.com/4gray/iptvnator&hashtags=iptv,m3u,video-player"
-            title="Share on Twitter"
-        >
-            <img
-                height="32"
-                src="./assets/icons/twitter-light.png"
-                title="Share on Twitter"
-            />
-        </a>
-        <a
-            href="https://www.buymeacoffee.com/4gray"
-            target="_blank"
-            title="Buy me a coffee"
-            aria-label="Buy me a coffee"
-            ><mat-icon>local_cafe</mat-icon></a
-        >
-    </p>
-</div>
diff --git a/src/app/shared/components/about-dialog/about-dialog.component.scss b/src/app/shared/components/about-dialog/about-dialog.component.scss
deleted file mode 100644
index 1a37e0913..000000000
--- a/src/app/shared/components/about-dialog/about-dialog.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-button {
-    text-transform: uppercase;
-}
-
-a {
-    color: #fff;
-}
-
-.mat-icon {
-    font-size: 32px;
-}
diff --git a/src/app/shared/components/about-dialog/about-dialog.component.spec.ts b/src/app/shared/components/about-dialog/about-dialog.component.spec.ts
deleted file mode 100644
index b7bd5fcbb..000000000
--- a/src/app/shared/components/about-dialog/about-dialog.component.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIconModule } from '@angular/material/icon';
-import { MockModule } from 'ng-mocks';
-import { DataService } from '../../../services/data.service';
-import { ElectronServiceStub } from '../../../services/electron.service.stub';
-import { AboutDialogComponent } from './about-dialog.component';
-
-describe('AboutDialogComponent', () => {
-    let component: AboutDialogComponent;
-    let fixture: ComponentFixture<AboutDialogComponent>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [AboutDialogComponent],
-            providers: [
-                {
-                    provide: DataService,
-                    useClass: ElectronServiceStub,
-                },
-            ],
-            imports: [MockModule(MatIconModule)],
-        }).compileComponents();
-    });
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AboutDialogComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});
diff --git a/src/app/shared/components/about-dialog/about-dialog.component.ts b/src/app/shared/components/about-dialog/about-dialog.component.ts
index 0d3056315..8dbc4f57d 100644
--- a/src/app/shared/components/about-dialog/about-dialog.component.ts
+++ b/src/app/shared/components/about-dialog/about-dialog.component.ts
@@ -1,15 +1,60 @@
-import { Component } from '@angular/core';
-import { DataService } from '../../../services/data.service';
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
     selector: 'app-about-dialog',
-    templateUrl: './about-dialog.component.html',
-    styleUrls: ['./about-dialog.component.scss'],
+    template: `
+        <div mat-dialog-content>
+            <img src="./assets/icons/icon-tv-256.png" width="128" /><br />
+            <h2 mat-dialog-title>{{ 'ABOUT.TITLE' | translate }}</h2>
+            <p>{{ 'ABOUT.DESCRIPTION' | translate }}</p>
+            <p>Version: {{ appVersion }}</p>
+            <p>
+                <a
+                    href="https://github.com/4gray/iptvnator"
+                    target="_blank"
+                    title="ITPVnator repository on GitHub"
+                    aria-label="ITPVnator repository on GitHub"
+                    ><img
+                        src="./assets/icons/github-light.png"
+                        title="ITPVnator repository on GitHub" /></a
+                >&nbsp;
+                <a
+                    href="http://twitter.com/share?text=IPTVnator &mdash; free cross-platform IPTV player. Available as PWA and as native application.&url=https://github.com/4gray/iptvnator&hashtags=iptv,m3u,video-player"
+                    title="Share on Twitter"
+                >
+                    <img
+                        height="32"
+                        src="./assets/icons/twitter-light.png"
+                        title="Share on Twitter"
+                    />
+                </a>
+                <a
+                    href="https://www.buymeacoffee.com/4gray"
+                    target="_blank"
+                    title="Buy me a coffee"
+                    aria-label="Buy me a coffee"
+                    ><mat-icon>local_cafe</mat-icon></a
+                >
+            </p>
+        </div>
+    `,
+    styles: [
+        `
+            button {
+                text-transform: uppercase;
+            }
+
+            a {
+                color: #fff;
+            }
+
+            .mat-icon {
+                font-size: 32px;
+            }
+        `,
+    ],
 })
 export class AboutDialogComponent {
-    /** Version of the application */
-    appVersion = this.dataService.getAppVersion();
-
-    /** Default constructor */
-    constructor(private dataService: DataService) {}
+    constructor(@Inject(MAT_DIALOG_DATA) private appVersion: string) {}
 }
diff --git a/src/app/shared/components/confirm-dialog/confirm-dialog-data.interface.ts b/src/app/shared/components/confirm-dialog/confirm-dialog-data.interface.ts
new file mode 100644
index 000000000..691695278
--- /dev/null
+++ b/src/app/shared/components/confirm-dialog/confirm-dialog-data.interface.ts
@@ -0,0 +1,7 @@
+export interface ConfirmDialogData {
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+}
diff --git a/src/app/shared/components/confirm-dialog/confirm-dialog.component.html b/src/app/shared/components/confirm-dialog/confirm-dialog.component.html
deleted file mode 100644
index 320ea3262..000000000
--- a/src/app/shared/components/confirm-dialog/confirm-dialog.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<h2 mat-dialog-title>
-    {{ dialogData?.title }}
-</h2>
-<mat-dialog-content class="mat-typography">
-    {{ dialogData?.message }}
-</mat-dialog-content>
-<mat-dialog-actions align="end">
-    <button mat-flat-button [mat-dialog-close]="true" color="accent">
-        {{ dialogData?.confirmLabel || 'YES' | translate }}
-    </button>
-    <button mat-button mat-dialog-close cdkFocusInitial color="accent">
-        {{ dialogData?.cancelLabel || 'NO' | translate }}
-    </button>
-</mat-dialog-actions>
diff --git a/src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts b/src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts
deleted file mode 100644
index b03504349..000000000
--- a/src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { MockModule, MockPipe, MockProvider } from 'ng-mocks';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ConfirmDialogComponent } from './confirm-dialog.component';
-import {
-    MatDialog,
-    MatDialogModule,
-    MAT_DIALOG_DATA,
-} from '@angular/material/dialog';
-
-describe('ConfirmDialogComponent', () => {
-    let component: ConfirmDialogComponent;
-    let fixture: ComponentFixture<ConfirmDialogComponent>;
-
-    beforeEach(
-        waitForAsync(() => {
-            TestBed.configureTestingModule({
-                declarations: [
-                    ConfirmDialogComponent,
-                    MockPipe(TranslatePipe, (value) => JSON.stringify(value)),
-                ],
-                providers: [
-                    MockProvider(MatDialog),
-                    MockProvider(MAT_DIALOG_DATA),
-                    MockProvider(TranslateService),
-                ],
-                imports: [MockModule(MatDialogModule)],
-            }).compileComponents();
-        })
-    );
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(ConfirmDialogComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});
diff --git a/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts b/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts
index d6d6878ce..45057c891 100644
--- a/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts
+++ b/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts
@@ -1,25 +1,29 @@
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Component, Inject } from '@angular/core';
-
-export interface ConfirmDialogData {
-    title: string;
-    message: string;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    onConfirm: () => void;
-}
-
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ConfirmDialogData } from './confirm-dialog-data.interface';
 @Component({
     selector: 'app-confirm-dialog',
-    templateUrl: './confirm-dialog.component.html',
+    template: `
+        <h2 mat-dialog-title>
+            {{ dialogData.title }}
+        </h2>
+        <mat-dialog-content class="mat-typography">
+            {{ dialogData.message }}
+        </mat-dialog-content>
+        <mat-dialog-actions align="end">
+            <button mat-flat-button [mat-dialog-close]="true" color="accent">
+                {{ dialogData?.confirmLabel || 'YES' | translate }}
+            </button>
+            <button mat-button mat-dialog-close cdkFocusInitial color="accent">
+                {{ dialogData?.cancelLabel || 'NO' | translate }}
+            </button>
+        </mat-dialog-actions>
+    `,
 })
 export class ConfirmDialogComponent {
     /** Contains meta information to show in the dialog */
-    dialogData;
+    dialogData!: ConfirmDialogData;
 
-    /** Creates an instance of ConfirmDialogComponent
-     * @param data dialog data
-     */
     constructor(@Inject(MAT_DIALOG_DATA) data: ConfirmDialogData) {
         this.dialogData = data;
     }
diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts
index f12777265..27a4f260a 100644
--- a/src/app/shared/components/header/header.component.ts
+++ b/src/app/shared/components/header/header.component.ts
@@ -79,6 +79,7 @@ export class HeaderComponent implements OnInit {
         this.dialog.open(AboutDialogComponent, {
             panelClass: 'about-dialog-overlay',
             width: '600px',
+            data: this.dataService.getAppVersion(),
         });
     }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index caea9f9a6..ee95d384d 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -144,5 +144,9 @@
         "WHAT_IS_NEW": "What is new",
         "ABOUT": "About",
         "ABOUT_ARIA": "About the application"
+    },
+    "ABOUT": {
+        "TITLE": "About IPTVnator",
+        "DESCRIPTION": "Cross-platform IPTV player application with multiple features, such as support of m3u and m3u8 playlists, favorites, TV guide, TV archive/catchup and more."
     }
 }