From 4387d0e0198aad0e09cb158655ea8264375a9c92 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 21 Feb 2026 11:57:02 +0100
Subject: [PATCH] feat(settings): enhance settings layout, add two-columns
 layout

- Refactored settings component HTML structure for improved layout and accessibility.
- Introduced a sidebar navigation for settings sections with smooth scrolling.
- Added dynamic visibility for settings sections based on the desktop environment.
- Enhanced form controls with better styling and responsiveness.
- Updated settings form validation and error handling for remote control port.
- Improved overall styling with new SCSS variables and layout adjustments.
- Adjusted dialog dimensions in navigation components for better user experience.
---
 .../src/app/settings/settings.component.html  | 1105 ++++++++++-------
 .../src/app/settings/settings.component.scss  |  339 ++++-
 .../src/app/settings/settings.component.ts    |   59 +
 .../navigation/navigation.component.ts        |    6 +-
 .../navigation-bar.component.ts               |    5 +-
 5 files changed, 1031 insertions(+), 483 deletions(-)

diff --git a/apps/web/src/app/settings/settings.component.html b/apps/web/src/app/settings/settings.component.html
index 892d88783..10eb78490 100644
--- a/apps/web/src/app/settings/settings.component.html
+++ b/apps/web/src/app/settings/settings.component.html
@@ -1,479 +1,680 @@
 @if (!isDialog) {
-    <app-header
-        [title]="'SETTINGS.TITLE' | translate"
-        [subtitle]="
-            ('SETTINGS.SUBTITLE' | translate) +
-            '. ' +
-            ('SETTINGS.DESCRIPTION' | translate)
-        "
-    />
+    <div class="settings-page-header">
+        <app-header
+            [title]="'SETTINGS.TITLE' | translate"
+            [subtitle]="
+                ('SETTINGS.SUBTITLE' | translate) +
+                '. ' +
+                ('SETTINGS.DESCRIPTION' | translate)
+            "
+        />
+    </div>
 } @else {
     <h2 mat-dialog-title>{{ 'SETTINGS.TITLE' | translate }}</h2>
 }
 
-<div class="settings-container" data-test-id="settings-container">
-    <form [formGroup]="settingsForm" (ngSubmit)="onSubmit()" novalidate>
-        @if (isDesktop) {
-            <ng-container formArrayName="epgUrl">
-                <div class="row">
-                    <div class="column">
-                        {{ 'SETTINGS.EPG_URL_LABEL' | translate }}
-                        <p>Add single or multiple URLs as EPG sources</p>
+<div
+    class="settings-container"
+    data-test-id="settings-container"
+    [class.dialog-mode]="isDialog"
+>
+    <form
+        [formGroup]="settingsForm"
+        (ngSubmit)="onSubmit()"
+        class="settings-layout"
+        novalidate
+    >
+        <aside class="settings-sidebar" aria-label="Settings categories">
+            <p class="sidebar-eyebrow">App Preferences</p>
+            <div class="sidebar-nav">
+                @for (section of sectionNav; track section.id) {
+                    <button
+                        type="button"
+                        class="sidebar-item"
+                        [class.active]="activeSection() === section.id"
+                        (click)="scrollToSection(section.id)"
+                    >
+                        <mat-icon>{{ section.icon }}</mat-icon>
+                        <span>{{ section.label | translate }}</span>
+                    </button>
+                }
+            </div>
+        </aside>
+
+        <div class="settings-content">
+            <section class="settings-group" id="general">
+                <header class="settings-group__header">
+                    <h3>{{ 'SETTINGS.TITLE' | translate }}</h3>
+                    <p>{{ 'SETTINGS.SUBTITLE' | translate }}</p>
+                </header>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.LANGUAGE' | translate }}</h4>
+                        <p>{{ 'SETTINGS.LANGUAGE_DESCRIPTION' | translate }}</p>
                     </div>
-                    <div class="column">
-                        @for (_ of epgUrl.controls; track _; let i = $index) {
-                            <div style="display: flex">
-                                <mat-form-field
-                                    appearance="outline"
-                                    class="full-width"
-                                >
-                                    <mat-label>{{
-                                        'SETTINGS.EPG_URL_PLACEHOLDER'
-                                            | translate
-                                    }}</mat-label>
-                                    <input
-                                        matInput
-                                        type="url"
-                                        [formControlName]="i"
-                                        #epgField
-                                    />
-                                    <mat-error>{{
-                                        'SETTINGS.EPG_URL_ERROR' | translate
-                                    }}</mat-error>
-                                </mat-form-field>
-                                <button
-                                    matLine
-                                    mat-icon-button
-                                    color="accent"
-                                    [matTooltip]="
-                                        'SETTINGS.REFRESH_EPG' | translate
-                                    "
-                                    type="button"
-                                    [disabled]="epgField.value === ''"
-                                    (click)="refreshEpg(epgUrl.value[i])"
-                                >
-                                    <mat-icon>refresh</mat-icon>
-                                </button>
-                                <button
-                                    mat-icon-button
-                                    matLine
-                                    color="accent"
-                                    [matTooltip]="
-                                        'SETTINGS.REFRESH_EPG' | translate
-                                    "
-                                    type="button"
-                                    (click)="removeEpgSource(i)"
-                                >
-                                    <mat-icon>remove</mat-icon>
-                                </button>
-                            </div>
-                        }
-                        <button
-                            mat-button
-                            color="accent"
-                            type="button"
-                            (click)="addEpgSource()"
-                        >
-                            {{ 'SETTINGS.ADD_EPG_SOURCE' | translate }}
-                        </button>
-                        <button
-                            mat-button
-                            color="warn"
-                            type="button"
-                            (click)="clearEpgData()"
-                        >
-                            {{ 'SETTINGS.CLEAR_EPG_DATA' | translate }}
-                        </button>
+                    <div class="setting-item__control">
+                        <mat-form-field appearance="outline">
+                            <mat-label>{{
+                                'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
+                            }}</mat-label>
+                            <mat-select
+                                formControlName="language"
+                                data-test-id="select-language"
+                            >
+                                @for (
+                                    language of languageEnum | keyvalue;
+                                    track language
+                                ) {
+                                    <mat-option
+                                        [value]="language.value"
+                                        [attr.data-test-id]="language.value"
+                                        >{{
+                                            'LANGUAGES.' + language.key
+                                                | translate
+                                        }}</mat-option
+                                    >
+                                }
+                            </mat-select>
+                        </mat-form-field>
                     </div>
                 </div>
-                <mat-divider />
-            </ng-container>
-        }
-        <div class="row">
-            <div class="column">
-                {{ 'SETTINGS.VIDEO_PLAYER_LABEL' | translate }}
-                <p>{{ 'SETTINGS.VIDEO_PLAYER_DESCRIPTION' | translate }}</p>
-            </div>
-            <div class="column">
-                <mat-form-field appearance="outline">
-                    <mat-label>{{
-                        'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
-                    }}</mat-label>
-                    <mat-select
-                        formControlName="player"
-                        data-test-id="select-video-player"
-                    >
-                        @for (player of players; track player) {
-                            <mat-option
-                                [value]="player.id"
-                                [attr.data-test-id]="player.id"
-                                >{{ player.label }}
-                            </mat-option>
-                        }
-                    </mat-select>
-                </mat-form-field>
-            </div>
-        </div>
-        @if (settingsForm.value.player === 'mpv') {
-            <div class="row">
-                <div class="column">
-                    {{ 'SETTINGS.MPV_PLAYER_PATH_LABEL' | translate }}
-                    <p>
-                        {{ 'SETTINGS.MPV_PLAYER_PATH_DESCRIPTION' | translate }}
-                    </p>
-                </div>
-                <div class="column">
-                    <mat-form-field appearance="outline">
-                        <mat-label for="mpvPlayerPath">{{
-                            'SETTINGS.MPV_PLAYER_PATH' | translate
-                        }}</mat-label>
-                        <input
-                            matInput
-                            type="text"
-                            id="mpvPlayerPath"
-                            formControlName="mpvPlayerPath"
-                        />
-                    </mat-form-field>
-                </div>
-            </div>
-            <div class="row">
-                <div class="column">
-                    {{ 'SETTINGS.MPV_REUSE_INSTANCE_LABEL' | translate }}
-                    <p>
-                        {{
-                            'SETTINGS.MPV_REUSE_INSTANCE_DESCRIPTION'
-                                | translate
-                        }}
-                    </p>
-                </div>
-                <div class="column margin-right">
-                    <mat-checkbox
-                        class="column"
-                        formControlName="mpvReuseInstance"
-                    ></mat-checkbox>
-                </div>
-            </div>
-        }
-        @if (settingsForm.value.player === 'vlc') {
-            <div class="row">
-                <div class="column">
-                    {{ 'SETTINGS.VLC_PLAYER_PATH_LABEL' | translate }}
-                    <p>
-                        {{ 'SETTINGS.VLC_PLAYER_PATH_DESCRIPTION' | translate }}
-                    </p>
-                </div>
-                <div class="column">
-                    <mat-form-field appearance="outline">
-                        <mat-label for="vlcPlayerPath">{{
-                            'SETTINGS.VLC_PLAYER_PATH' | translate
-                        }}</mat-label>
-                        <input
-                            matInput
-                            type="text"
-                            id="vlcPlayerPath"
-                            formControlName="vlcPlayerPath"
-                        />
-                    </mat-form-field>
-                </div>
-            </div>
-        }
-        <mat-divider />
-        <div class="row">
-            <div class="column">
-                {{ 'SETTINGS.STREAM_FORMAT' | translate }}
-                <p>{{ 'SETTINGS.STREAM_FORMAT_DESCRIPTION' | translate }}</p>
-            </div>
-            <div class="column">
-                <mat-form-field appearance="outline">
-                    <mat-label>{{
-                        'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
-                    }}</mat-label>
-                    <mat-select
-                        formControlName="streamFormat"
-                        data-test-id="select-stream-format"
-                    >
-                        @for (
-                            streamFormat of streamFormatEnum | keyvalue;
-                            track streamFormat
-                        ) {
-                            <mat-option
-                                [value]="streamFormat.value"
-                                [attr.data-test-id]="streamFormat.value"
-                                >{{ streamFormat.value }}
-                            </mat-option>
-                        }
-                    </mat-select>
-                </mat-form-field>
-            </div>
-        </div>
-        <mat-divider />
-        <div class="row">
-            <div class="column">
-                {{ 'SETTINGS.LANGUAGE' | translate }}
-                <p>{{ 'SETTINGS.LANGUAGE_DESCRIPTION' | translate }}</p>
-            </div>
-            <div class="column">
-                <mat-form-field appearance="outline">
-                    <mat-label>{{
-                        'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
-                    }}</mat-label>
-                    <mat-select
-                        formControlName="language"
-                        data-test-id="select-language"
-                    >
-                        @for (
-                            language of languageEnum | keyvalue;
-                            track language
-                        ) {
-                            <mat-option
-                                [value]="language.value"
-                                [attr.data-test-id]="language.value"
-                                >{{
-                                    'LANGUAGES.' + language.key | translate
-                                }}</mat-option
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.THEME' | translate }}</h4>
+                        <p>{{ 'SETTINGS.THEME_DESCRIPTION' | translate }}</p>
+                    </div>
+                    <div class="setting-item__control">
+                        <mat-form-field appearance="outline">
+                            <mat-label>{{
+                                'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
+                            }}</mat-label>
+                            <mat-select
+                                formControlName="theme"
+                                data-test-id="select-theme"
                             >
-                        }
-                    </mat-select>
-                </mat-form-field>
-            </div>
-        </div>
-        <mat-divider />
-        <div class="row">
-            <div class="column">
-                {{ 'SETTINGS.THEME' | translate }}
-                <p>{{ 'SETTINGS.THEME_DESCRIPTION' | translate }}</p>
-            </div>
-            <div class="column">
-                <mat-form-field appearance="outline">
-                    <mat-label>{{
-                        'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
-                    }}</mat-label>
-                    <mat-select
-                        formControlName="theme"
-                        data-test-id="select-theme"
-                    >
-                        @for (theme of themeEnum | keyvalue; track theme) {
-                            <mat-option
-                                [value]="theme.value"
-                                [attr.data-test-id]="theme.value"
-                                >{{
-                                    'THEMES.' + theme.value | translate
-                                }}</mat-option
-                            >
-                        }
-                    </mat-select>
-                </mat-form-field>
-            </div>
-        </div>
-        <mat-divider />
-        <div class="row">
-            <div class="column">
-                {{ 'SETTINGS.SHOW_CAPTIONS' | translate }}
-                <p>{{ 'SETTINGS.SHOW_CAPTIONS_DESCRIPTION' | translate }}</p>
-            </div>
-            <div class="column margin-right">
-                <mat-checkbox
-                    class="column"
-                    formControlName="showCaptions"
-                ></mat-checkbox>
-            </div>
-        </div>
-        @if (isDesktop) {
-            <mat-divider />
-            <div class="row">
-                <div class="column">
-                    {{ 'SETTINGS.REMOTE_CONTROL' | translate }}
-                    <p>
-                        {{ 'SETTINGS.REMOTE_CONTROL_DESCRIPTION' | translate }}
-                    </p>
+                                @for (
+                                    theme of themeEnum | keyvalue;
+                                    track theme
+                                ) {
+                                    <mat-option
+                                        [value]="theme.value"
+                                        [attr.data-test-id]="theme.value"
+                                        >{{
+                                            'THEMES.' + theme.value | translate
+                                        }}</mat-option
+                                    >
+                                }
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
                 </div>
-                <div class="column margin-right">
-                    <mat-checkbox
-                        class="column"
-                        formControlName="remoteControl"
-                    ></mat-checkbox>
-                </div>
-            </div>
-        }
-        @if (settingsForm.value.remoteControl === true) {
-            <mat-divider />
-            <div class="row">
-                <div class="column">
-                    {{ 'SETTINGS.REMOTE_CONTROL_PORT' | translate }}
-                    <p>
-                        {{
-                            'SETTINGS.REMOTE_CONTROL_PORT_DESCRIPTION'
-                                | translate
-                        }}
-                    </p>
-                </div>
-                <div class="column margin-right">
-                    <mat-form-field appearance="outline">
-                        <mat-label>Port (1-65535)</mat-label>
-                        <input
-                            matInput
-                            type="number"
-                            id="remoteControlPort"
-                            formControlName="remoteControlPort"
-                            min="1"
-                            max="65535"
-                            step="1"
-                        />
-                        @if (settingsForm.get('remoteControlPort')?.hasError('required')) {
-                            <mat-error>{{ 'SETTINGS.PORT_REQUIRED' | translate }}</mat-error>
-                        }
-                        @if (settingsForm.get('remoteControlPort')?.hasError('min')) {
-                            <mat-error>{{ 'SETTINGS.PORT_MIN' | translate }}</mat-error>
-                        }
-                        @if (settingsForm.get('remoteControlPort')?.hasError('max')) {
-                            <mat-error>{{ 'SETTINGS.PORT_MAX' | translate }}</mat-error>
-                        }
-                        @if (settingsForm.get('remoteControlPort')?.hasError('pattern')) {
-                            <mat-error>{{ 'SETTINGS.PORT_PATTERN' | translate }}</mat-error>
-                        }
-                    </mat-form-field>
-                </div>
-            </div>
-            @if (localIpAddresses().length > 0) {
-                <mat-divider />
-                <div class="row">
-                    <div class="column">
-                        {{ 'SETTINGS.REMOTE_CONTROL_URL' | translate }}
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.SHOW_CAPTIONS' | translate }}</h4>
                         <p>
-                            {{ 'SETTINGS.REMOTE_CONTROL_URL_DESCRIPTION' | translate }}
+                            {{
+                                'SETTINGS.SHOW_CAPTIONS_DESCRIPTION' | translate
+                            }}
                         </p>
                     </div>
-                    <div class="column margin-right remote-control-urls">
-                        @for (ip of localIpAddresses(); track ip) {
-                            <div class="remote-control-url-item">
-                                <div class="url-row">
-                                    <a
-                                        [href]="'http://' + ip + ':' + settingsForm.value.remoteControlPort"
-                                        target="_blank"
-                                        class="remote-control-url"
-                                    >
-                                        http://{{ ip }}:{{ settingsForm.value.remoteControlPort }}
-                                    </a>
-                                    <button
-                                        mat-icon-button
-                                        type="button"
-                                        (click)="toggleQrCode(ip)"
-                                        [matTooltip]="'SETTINGS.SHOW_QR_CODE' | translate"
-                                    >
-                                        <mat-icon>qr_code_2</mat-icon>
-                                    </button>
-                                </div>
-                                @if (visibleQrCodeIp() === ip) {
-                                    <div class="qr-code-container">
-                                        <qrcode
-                                            [qrdata]="'http://' + ip + ':' + settingsForm.value.remoteControlPort"
-                                            [width]="150"
-                                            errorCorrectionLevel="M"
-                                        ></qrcode>
-                                    </div>
-                                }
-                            </div>
-                        }
+                    <div class="setting-item__control setting-item__toggle">
+                        <mat-checkbox
+                            formControlName="showCaptions"
+                        ></mat-checkbox>
                     </div>
                 </div>
+            </section>
+
+            <section class="settings-group" id="playback">
+                <header class="settings-group__header">
+                    <h3>{{ 'SETTINGS.VIDEO_PLAYER_LABEL' | translate }}</h3>
+                    <p>{{ 'SETTINGS.VIDEO_PLAYER_DESCRIPTION' | translate }}</p>
+                </header>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.VIDEO_PLAYER_LABEL' | translate }}</h4>
+                        <p>
+                            {{
+                                'SETTINGS.VIDEO_PLAYER_DESCRIPTION' | translate
+                            }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control">
+                        <mat-form-field appearance="outline">
+                            <mat-label>{{
+                                'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
+                            }}</mat-label>
+                            <mat-select
+                                formControlName="player"
+                                data-test-id="select-video-player"
+                            >
+                                @for (player of players; track player) {
+                                    <mat-option
+                                        [value]="player.id"
+                                        [attr.data-test-id]="player.id"
+                                        >{{ player.label }}
+                                    </mat-option>
+                                }
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                </div>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.STREAM_FORMAT' | translate }}</h4>
+                        <p>
+                            {{
+                                'SETTINGS.STREAM_FORMAT_DESCRIPTION' | translate
+                            }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control">
+                        <mat-form-field appearance="outline">
+                            <mat-label>{{
+                                'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
+                            }}</mat-label>
+                            <mat-select
+                                formControlName="streamFormat"
+                                data-test-id="select-stream-format"
+                            >
+                                @for (
+                                    streamFormat of streamFormatEnum | keyvalue;
+                                    track streamFormat
+                                ) {
+                                    <mat-option
+                                        [value]="streamFormat.value"
+                                        [attr.data-test-id]="streamFormat.value"
+                                        >{{ streamFormat.value }}
+                                    </mat-option>
+                                }
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                </div>
+
+                @if (settingsForm.value.player === 'mpv') {
+                    <div class="setting-item">
+                        <div class="setting-item__meta">
+                            <h4>
+                                {{
+                                    'SETTINGS.MPV_PLAYER_PATH_LABEL' | translate
+                                }}
+                            </h4>
+                            <p>
+                                {{
+                                    'SETTINGS.MPV_PLAYER_PATH_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                        <div class="setting-item__control">
+                            <mat-form-field appearance="outline">
+                                <mat-label for="mpvPlayerPath">{{
+                                    'SETTINGS.MPV_PLAYER_PATH' | translate
+                                }}</mat-label>
+                                <input
+                                    matInput
+                                    type="text"
+                                    id="mpvPlayerPath"
+                                    formControlName="mpvPlayerPath"
+                                />
+                            </mat-form-field>
+                        </div>
+                    </div>
+
+                    <div class="setting-item">
+                        <div class="setting-item__meta">
+                            <h4>
+                                {{
+                                    'SETTINGS.MPV_REUSE_INSTANCE_LABEL'
+                                        | translate
+                                }}
+                            </h4>
+                            <p>
+                                {{
+                                    'SETTINGS.MPV_REUSE_INSTANCE_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                        <div class="setting-item__control setting-item__toggle">
+                            <mat-checkbox
+                                formControlName="mpvReuseInstance"
+                            ></mat-checkbox>
+                        </div>
+                    </div>
+                }
+
+                @if (settingsForm.value.player === 'vlc') {
+                    <div class="setting-item">
+                        <div class="setting-item__meta">
+                            <h4>
+                                {{
+                                    'SETTINGS.VLC_PLAYER_PATH_LABEL' | translate
+                                }}
+                            </h4>
+                            <p>
+                                {{
+                                    'SETTINGS.VLC_PLAYER_PATH_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                        <div class="setting-item__control">
+                            <mat-form-field appearance="outline">
+                                <mat-label for="vlcPlayerPath">{{
+                                    'SETTINGS.VLC_PLAYER_PATH' | translate
+                                }}</mat-label>
+                                <input
+                                    matInput
+                                    type="text"
+                                    id="vlcPlayerPath"
+                                    formControlName="vlcPlayerPath"
+                                />
+                            </mat-form-field>
+                        </div>
+                    </div>
+                }
+            </section>
+
+            @if (isDesktop) {
+                <section class="settings-group" id="epg">
+                    <header class="settings-group__header">
+                        <h3>{{ 'SETTINGS.EPG_URL_LABEL' | translate }}</h3>
+                        <p>Add single or multiple URLs as EPG sources</p>
+                    </header>
+
+                    <div class="setting-item setting-item--full-control">
+                        <div class="setting-item__control">
+                            <ng-container formArrayName="epgUrl">
+                                <div class="epg-sources">
+                                    @for (
+                                        _ of epgUrl.controls;
+                                        track _;
+                                        let i = $index
+                                    ) {
+                                        <div class="epg-source-row">
+                                            <mat-form-field
+                                                appearance="outline"
+                                                class="full-width"
+                                            >
+                                                <mat-label>{{
+                                                    'SETTINGS.EPG_URL_PLACEHOLDER'
+                                                        | translate
+                                                }}</mat-label>
+                                                <input
+                                                    matInput
+                                                    type="url"
+                                                    [formControlName]="i"
+                                                    #epgField
+                                                />
+                                                <mat-error>{{
+                                                    'SETTINGS.EPG_URL_ERROR'
+                                                        | translate
+                                                }}</mat-error>
+                                            </mat-form-field>
+                                            <button
+                                                mat-icon-button
+                                                color="accent"
+                                                [matTooltip]="
+                                                    'SETTINGS.REFRESH_EPG'
+                                                        | translate
+                                                "
+                                                type="button"
+                                                [disabled]="
+                                                    epgField.value === ''
+                                                "
+                                                (click)="
+                                                    refreshEpg(epgUrl.value[i])
+                                                "
+                                            >
+                                                <mat-icon>refresh</mat-icon>
+                                            </button>
+                                            <button
+                                                mat-icon-button
+                                                color="accent"
+                                                [matTooltip]="
+                                                    'SETTINGS.REFRESH_EPG'
+                                                        | translate
+                                                "
+                                                type="button"
+                                                (click)="removeEpgSource(i)"
+                                            >
+                                                <mat-icon>remove</mat-icon>
+                                            </button>
+                                        </div>
+                                    }
+                                </div>
+                            </ng-container>
+                        </div>
+                    </div>
+
+                    <footer class="settings-group__footer">
+                        <div class="inline-actions">
+                            <button
+                                mat-button
+                                color="accent"
+                                type="button"
+                                (click)="addEpgSource()"
+                            >
+                                {{ 'SETTINGS.ADD_EPG_SOURCE' | translate }}
+                            </button>
+                            <button
+                                mat-button
+                                color="warn"
+                                type="button"
+                                (click)="clearEpgData()"
+                            >
+                                {{ 'SETTINGS.CLEAR_EPG_DATA' | translate }}
+                            </button>
+                        </div>
+                    </footer>
+                </section>
             }
-        }
-        <mat-divider />
-        <div class="row">
-            <div class="column">
-                {{ 'SETTINGS.VERSION' | translate }}
-                <p>{{ 'SETTINGS.VERSION_DESCRIPTION' | translate }}</p>
-            </div>
-            <div class="column">
-                {{ version }} <br />
-                {{ updateMessage }}
-            </div>
-        </div>
-        <mat-divider />
-        <div class="row">
-            <div class="column">
-                {{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}
-                <p>
-                    {{ 'SETTINGS.IMPORT_EXPORT_DATA_DESCRIPTION' | translate }}
-                </p>
-            </div>
-            <div class="column">
+
+            @if (isDesktop) {
+                <section class="settings-group" id="remote-control">
+                    <header class="settings-group__header">
+                        <h3>{{ 'SETTINGS.REMOTE_CONTROL' | translate }}</h3>
+                        <p>
+                            {{
+                                'SETTINGS.REMOTE_CONTROL_DESCRIPTION'
+                                    | translate
+                            }}
+                        </p>
+                    </header>
+
+                    <div class="setting-item">
+                        <div class="setting-item__meta">
+                            <h4>{{ 'SETTINGS.REMOTE_CONTROL' | translate }}</h4>
+                            <p>
+                                {{
+                                    'SETTINGS.REMOTE_CONTROL_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                        <div class="setting-item__control setting-item__toggle">
+                            <mat-checkbox
+                                formControlName="remoteControl"
+                            ></mat-checkbox>
+                        </div>
+                    </div>
+
+                    @if (settingsForm.value.remoteControl === true) {
+                        <div class="setting-item">
+                            <div class="setting-item__meta">
+                                <h4>
+                                    {{
+                                        'SETTINGS.REMOTE_CONTROL_PORT'
+                                            | translate
+                                    }}
+                                </h4>
+                                <p>
+                                    {{
+                                        'SETTINGS.REMOTE_CONTROL_PORT_DESCRIPTION'
+                                            | translate
+                                    }}
+                                </p>
+                            </div>
+                            <div class="setting-item__control">
+                                <mat-form-field appearance="outline">
+                                    <mat-label>Port (1-65535)</mat-label>
+                                    <input
+                                        matInput
+                                        type="number"
+                                        id="remoteControlPort"
+                                        formControlName="remoteControlPort"
+                                        min="1"
+                                        max="65535"
+                                        step="1"
+                                    />
+                                    @if (
+                                        settingsForm
+                                            .get('remoteControlPort')
+                                            ?.hasError('required')
+                                    ) {
+                                        <mat-error>{{
+                                            'SETTINGS.PORT_REQUIRED' | translate
+                                        }}</mat-error>
+                                    }
+                                    @if (
+                                        settingsForm
+                                            .get('remoteControlPort')
+                                            ?.hasError('min')
+                                    ) {
+                                        <mat-error>{{
+                                            'SETTINGS.PORT_MIN' | translate
+                                        }}</mat-error>
+                                    }
+                                    @if (
+                                        settingsForm
+                                            .get('remoteControlPort')
+                                            ?.hasError('max')
+                                    ) {
+                                        <mat-error>{{
+                                            'SETTINGS.PORT_MAX' | translate
+                                        }}</mat-error>
+                                    }
+                                    @if (
+                                        settingsForm
+                                            .get('remoteControlPort')
+                                            ?.hasError('pattern')
+                                    ) {
+                                        <mat-error>{{
+                                            'SETTINGS.PORT_PATTERN' | translate
+                                        }}</mat-error>
+                                    }
+                                </mat-form-field>
+                            </div>
+                        </div>
+
+                        @if (localIpAddresses().length > 0) {
+                            <div class="setting-item">
+                                <div class="setting-item__meta">
+                                    <h4>
+                                        {{
+                                            'SETTINGS.REMOTE_CONTROL_URL'
+                                                | translate
+                                        }}
+                                    </h4>
+                                    <p>
+                                        {{
+                                            'SETTINGS.REMOTE_CONTROL_URL_DESCRIPTION'
+                                                | translate
+                                        }}
+                                    </p>
+                                </div>
+                                <div
+                                    class="setting-item__control remote-control-urls"
+                                >
+                                    @for (ip of localIpAddresses(); track ip) {
+                                        <div class="remote-control-url-item">
+                                            <div class="url-row">
+                                                <a
+                                                    [href]="
+                                                        'http://' +
+                                                        ip +
+                                                        ':' +
+                                                        settingsForm.value
+                                                            .remoteControlPort
+                                                    "
+                                                    target="_blank"
+                                                    class="remote-control-url"
+                                                >
+                                                    http://{{ ip }}:{{
+                                                        settingsForm.value
+                                                            .remoteControlPort
+                                                    }}
+                                                </a>
+                                                <button
+                                                    mat-icon-button
+                                                    type="button"
+                                                    (click)="toggleQrCode(ip)"
+                                                    [matTooltip]="
+                                                        'SETTINGS.SHOW_QR_CODE'
+                                                            | translate
+                                                    "
+                                                >
+                                                    <mat-icon
+                                                        >qr_code_2</mat-icon
+                                                    >
+                                                </button>
+                                            </div>
+                                            @if (visibleQrCodeIp() === ip) {
+                                                <div class="qr-code-container">
+                                                    <qrcode
+                                                        [qrdata]="
+                                                            'http://' +
+                                                            ip +
+                                                            ':' +
+                                                            settingsForm.value
+                                                                .remoteControlPort
+                                                        "
+                                                        [width]="150"
+                                                        errorCorrectionLevel="M"
+                                                    ></qrcode>
+                                                </div>
+                                            }
+                                        </div>
+                                    }
+                                </div>
+                            </div>
+                        }
+                    }
+                </section>
+            }
+
+            <section class="settings-group" id="data">
+                <header class="settings-group__header">
+                    <h3>{{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}</h3>
+                    <p>
+                        {{
+                            'SETTINGS.IMPORT_EXPORT_DATA_DESCRIPTION'
+                                | translate
+                        }}
+                    </p>
+                </header>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}</h4>
+                        <p>
+                            {{
+                                'SETTINGS.IMPORT_EXPORT_DATA_DESCRIPTION'
+                                    | translate
+                            }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control inline-actions">
+                        <button
+                            mat-button
+                            (click)="
+                                $event.preventDefault();
+                                $event.stopPropagation();
+                                importData()
+                            "
+                        >
+                            {{ 'SETTINGS.IMPORT_DATA' | translate }}
+                        </button>
+                        <button
+                            mat-button
+                            (click)="
+                                $event.preventDefault();
+                                $event.stopPropagation();
+                                exportData()
+                            "
+                        >
+                            {{ 'SETTINGS.EXPORT_DATA' | translate }}
+                        </button>
+                    </div>
+                </div>
+
+                <div class="setting-item danger-zone">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.REMOVE_ALL' | translate }}</h4>
+                        <p>
+                            {{ 'SETTINGS.REMOVE_ALL_DESCRIPTION' | translate }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control">
+                        <button
+                            mat-button
+                            (click)="
+                                $event.preventDefault();
+                                $event.stopPropagation();
+                                removeAll()
+                            "
+                            color="warn"
+                        >
+                            {{ 'SETTINGS.REMOVE_ALL_BUTTON' | translate }}
+                        </button>
+                    </div>
+                </div>
+
+                @if (isPwa) {
+                    <div class="settings-note">
+                        {{ 'SETTINGS.EPG_NOTE' | translate }}
+                        &nbsp;<a
+                            href="https://github.com/4gray/iptvnator/releases"
+                            target="_blank"
+                            rel="noreferrer"
+                            >{{ 'SETTINGS.EPG_NOTE_URL_TEXT' | translate }}</a
+                        >
+                    </div>
+                }
+            </section>
+
+            <section class="settings-group" id="about">
+                <header class="settings-group__header">
+                    <h3>{{ 'SETTINGS.VERSION' | translate }}</h3>
+                    <p>{{ 'SETTINGS.VERSION_DESCRIPTION' | translate }}</p>
+                </header>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.VERSION' | translate }}</h4>
+                        <p>{{ 'SETTINGS.VERSION_DESCRIPTION' | translate }}</p>
+                    </div>
+                    <div class="setting-item__control version-block">
+                        <span>{{ version }}</span>
+                        <small>{{ updateMessage }}</small>
+                    </div>
+                </div>
+            </section>
+
+            <div class="action-bar">
                 <button
                     mat-button
-                    (click)="
-                        $event.preventDefault();
-                        $event.stopPropagation();
-                        importData()
-                    "
+                    type="button"
+                    color="accent"
+                    (click)="backToHome()"
+                    data-test-id="back-to-home"
                 >
-                    {{ 'SETTINGS.IMPORT_DATA' | translate }}
+                    <mat-icon>{{
+                        isDialog ? 'close' : 'chevron_left'
+                    }}</mat-icon>
+                    {{
+                        (isDialog ? 'CLOSE' : 'SETTINGS.BACK_TO_HOME')
+                            | translate
+                    }}
                 </button>
                 <button
-                    mat-button
-                    (click)="
-                        $event.preventDefault();
-                        $event.stopPropagation();
-                        exportData()
-                    "
+                    mat-flat-button
+                    color="accent"
+                    type="submit"
+                    [disabled]="settingsForm.pristine || !settingsForm.valid"
+                    data-test-id="save-settings"
                 >
-                    {{ 'SETTINGS.EXPORT_DATA' | translate }}
+                    <mat-icon>save</mat-icon>
+                    {{ 'SETTINGS.SAVE_CHANGES' | translate }}
                 </button>
             </div>
         </div>
-
-        <div class="row">
-            <div class="column">
-                {{ 'SETTINGS.REMOVE_ALL' | translate }}
-                <p>
-                    {{ 'SETTINGS.REMOVE_ALL_DESCRIPTION' | translate }}
-                </p>
-            </div>
-            <div class="column">
-                <button
-                    mat-button
-                    (click)="
-                        $event.preventDefault();
-                        $event.stopPropagation();
-                        removeAll()
-                    "
-                    color="warn"
-                >
-                    {{ 'SETTINGS.REMOVE_ALL_BUTTON' | translate }}
-                </button>
-            </div>
-        </div>
-
-        @if (isPwa) {
-            <div class="row">
-                {{ 'SETTINGS.EPG_NOTE' | translate }}
-                &nbsp;<a href="https://github.com/4gray/iptvnator/releases">{{
-                    'SETTINGS.EPG_NOTE_URL_TEXT' | translate
-                }}</a>
-            </div>
-        }
-
-        <mat-divider />
-        <div class="action-buttons" align="end">
-            <button
-                mat-button
-                color="accent"
-                type="reset"
-                (click)="backToHome()"
-                data-test-id="back-to-home"
-            >
-                <mat-icon>chevron_left</mat-icon>
-                {{ 'SETTINGS.BACK_TO_HOME' | translate }}
-            </button>
-            <button
-                mat-button
-                color="accent"
-                type="submit"
-                [disabled]="settingsForm.pristine || !settingsForm.valid"
-                data-test-id="save-settings"
-            >
-                <mat-icon>save</mat-icon>
-                {{ 'SETTINGS.SAVE_CHANGES' | translate }}
-            </button>
-        </div>
     </form>
 </div>
diff --git a/apps/web/src/app/settings/settings.component.scss b/apps/web/src/app/settings/settings.component.scss
index da5e2ff73..ce0416361 100644
--- a/apps/web/src/app/settings/settings.component.scss
+++ b/apps/web/src/app/settings/settings.component.scss
@@ -1,55 +1,228 @@
-button {
-    cursor: pointer !important;
-    text-transform: uppercase;
+:host {
+    display: block;
+}
+
+.settings-page-header {
+    position: sticky;
+    top: 0;
+    z-index: 5;
 }
 
 .settings-container {
-    overflow: auto;
-    height: calc(100vh - 70px);
+    --settings-bg: color-mix(in srgb, currentColor 3%, transparent);
+    --settings-card: color-mix(in srgb, currentColor 7%, transparent);
+    --settings-border: color-mix(in srgb, currentColor 14%, transparent);
+    --settings-muted: color-mix(in srgb, currentColor 65%, transparent);
+
+    height: auto;
+    overflow: visible;
+    padding: 20px;
 }
 
-.row {
+.settings-container.dialog-mode {
+    height: auto;
+    max-height: none;
+    overflow: visible;
+    padding: 12px 8px 16px;
+}
+
+.settings-layout {
+    display: grid;
+    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
+    gap: 24px;
+    align-items: start;
+}
+
+.settings-sidebar {
+    position: sticky;
+    top: 0;
+    padding: 18px;
+    border: 1px solid var(--settings-border);
+    border-radius: 16px;
+    background: var(--settings-bg);
+}
+
+.settings-container:not(.dialog-mode) .settings-sidebar {
+    top: 82px;
+    max-height: calc(100vh - 102px);
+    overflow: auto;
+}
+
+.sidebar-eyebrow {
+    margin: 0 0 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    font-size: 11px;
+    font-weight: 700;
+    opacity: 0.72;
+}
+
+.sidebar-nav {
     display: flex;
-    padding: 10px;
+    flex-direction: column;
+    gap: 8px;
+}
 
-    :nth-child(2) {
-        text-align: right;
+.sidebar-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border: 1px solid transparent;
+    border-radius: 12px;
+    background: transparent;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: 180ms ease;
 
-        mat-form-field {
-            font-size: 14px;
-        }
+    span {
+        font-size: 0.92rem;
+        font-weight: 600;
+    }
+
+    .mat-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+        opacity: 0.84;
+    }
+
+    &:hover {
+        border-color: var(--settings-border);
+        background: color-mix(in srgb, currentColor 6%, transparent);
     }
 }
 
-.column {
-    flex: 1;
+.sidebar-item.active {
+    border-color: var(--settings-border);
+    background: color-mix(in srgb, currentColor 10%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
+}
+
+.settings-content {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.settings-group {
+    border: 1px solid var(--settings-border);
+    border-radius: 16px;
+    background: var(--settings-card);
+    overflow: hidden;
+    scroll-margin-top: 20px;
+}
+
+.settings-group__header {
+    padding: 18px 20px 16px;
+    border-bottom: 1px solid var(--settings-border);
+
+    h3 {
+        margin: 0;
+        font-size: 1.28rem;
+        font-weight: 800;
+        letter-spacing: -0.02em;
+    }
 
     p {
-        font-size: 0.9em;
-        opacity: 0.6;
-        padding: 2px 0;
+        margin: 6px 0 0;
+        opacity: 0.72;
+        font-size: 0.9rem;
+    }
+}
+
+.settings-group__footer {
+    padding: 12px 20px 16px;
+    border-top: 1px solid var(--settings-border);
+}
+
+.setting-item {
+    display: grid;
+    grid-template-columns: minmax(220px, 1fr) minmax(240px, 440px);
+    gap: 18px;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--settings-border);
+}
+
+.settings-group .setting-item:last-child {
+    border-bottom: none;
+}
+
+.setting-item__meta {
+    h4 {
         margin: 0;
+        font-size: 1.02rem;
+        font-weight: 700;
+    }
+
+    p {
+        margin: 4px 0 0;
+        color: var(--settings-muted);
+        font-size: 0.9rem;
+        line-height: 1.35;
     }
 }
 
-.margin-right {
-    margin-right: 10px;
+.setting-item__control {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 10px;
+
+    mat-form-field,
+    .full-width {
+        width: min(100%, 380px);
+    }
 }
 
-.action-buttons {
-    margin-top: 10px;
+.setting-item__toggle {
+    justify-content: flex-end;
+}
 
-    button {
-        margin: 0 10px;
+.setting-item--full-control {
+    grid-template-columns: 1fr;
+}
+
+.setting-item--full-control .setting-item__control {
+    justify-content: stretch;
+}
+
+.epg-sources {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.epg-source-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .full-width {
+        width: 100%;
     }
 }
 
+.inline-actions {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
 .remote-control-urls {
-    text-align: right;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
 }
 
 .remote-control-url-item {
-    margin-bottom: 8px;
+    width: min(100%, 380px);
 }
 
 .url-row {
@@ -60,9 +233,10 @@ button {
 }
 
 .remote-control-url {
-    font-family: monospace;
+    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
     color: inherit;
     text-decoration: none;
+    font-size: 0.84rem;
 
     &:hover {
         text-decoration: underline;
@@ -74,3 +248,116 @@ button {
     justify-content: flex-end;
     padding: 8px 0;
 }
+
+.version-block {
+    flex-direction: column;
+    align-items: flex-end;
+
+    span {
+        font-weight: 700;
+    }
+
+    small {
+        margin-top: 4px;
+        color: var(--settings-muted);
+        text-align: right;
+    }
+}
+
+.settings-note {
+    margin: 0 20px 20px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    font-size: 0.9rem;
+    background: color-mix(in srgb, currentColor 6%, transparent);
+    border: 1px solid var(--settings-border);
+
+    a {
+        color: inherit;
+        font-weight: 700;
+    }
+}
+
+.danger-zone {
+    background: color-mix(in srgb, currentColor 4%, transparent);
+}
+
+.action-bar {
+    position: sticky;
+    bottom: 8px;
+    z-index: 3;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border: 1px solid var(--settings-border);
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--settings-bg) 88%, transparent);
+    backdrop-filter: blur(8px);
+}
+
+.settings-container.dialog-mode .action-bar {
+    margin-top: 8px;
+}
+
+@media (max-width: 1100px) {
+    .settings-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .settings-sidebar {
+        position: static;
+    }
+
+    .sidebar-nav {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .sidebar-item {
+        width: auto;
+    }
+}
+
+@media (max-width: 860px) {
+    .settings-container {
+        height: auto;
+        padding: 12px;
+    }
+
+    .setting-item {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+
+    .setting-item__control {
+        justify-content: flex-start;
+
+        mat-form-field,
+        .full-width,
+        .epg-sources,
+        .remote-control-url-item {
+            width: 100%;
+        }
+    }
+
+    .remote-control-urls,
+    .version-block {
+        align-items: flex-start;
+    }
+
+    .url-row {
+        justify-content: flex-start;
+        flex-wrap: wrap;
+    }
+
+    .action-bar {
+        flex-direction: column-reverse;
+        align-items: stretch;
+
+        button {
+            width: 100%;
+        }
+    }
+}
diff --git a/apps/web/src/app/settings/settings.component.ts b/apps/web/src/app/settings/settings.component.ts
index 11b7b51d1..eb17ecb73 100644
--- a/apps/web/src/app/settings/settings.component.ts
+++ b/apps/web/src/app/settings/settings.component.ts
@@ -49,6 +49,13 @@ import { SettingsStore } from '../services/settings-store.service';
 import { HeaderComponent } from '../shared/components/header/header.component';
 import { SettingsService } from './../services/settings.service';
 
+interface SettingsSection {
+    id: string;
+    label: string;
+    icon: string;
+    visible: boolean;
+}
+
 @Component({
     templateUrl: './settings.component.html',
     styleUrls: ['./settings.component.scss'],
@@ -94,6 +101,8 @@ export class SettingsComponent implements OnInit {
 
     isPwa = this.dataService.getAppEnvironment() === 'pwa';
 
+    activeSection = signal('general');
+
     readonly osPlayers = [
         {
             id: VideoPlayer.MPV,
@@ -168,12 +177,55 @@ export class SettingsComponent implements OnInit {
 
     private settingsStore = inject(SettingsStore);
 
+    readonly sectionNavItems: SettingsSection[] = [
+        {
+            id: 'general',
+            label: 'SETTINGS.TITLE',
+            icon: 'tune',
+            visible: true,
+        },
+        {
+            id: 'playback',
+            label: 'SETTINGS.VIDEO_PLAYER_LABEL',
+            icon: 'play_circle',
+            visible: true,
+        },
+        {
+            id: 'epg',
+            label: 'SETTINGS.EPG_URL_LABEL',
+            icon: 'calendar_month',
+            visible: this.isDesktop,
+        },
+        {
+            id: 'remote-control',
+            label: 'SETTINGS.REMOTE_CONTROL',
+            icon: 'smartphone',
+            visible: this.isDesktop,
+        },
+        {
+            id: 'data',
+            label: 'SETTINGS.IMPORT_EXPORT_DATA',
+            icon: 'swap_horiz',
+            visible: true,
+        },
+        {
+            id: 'about',
+            label: 'SETTINGS.VERSION',
+            icon: 'info',
+            visible: true,
+        },
+    ];
+
     constructor(
         @Optional() @Inject(MAT_DIALOG_DATA) data?: { isDialog: boolean }
     ) {
         this.isDialog = data?.isDialog ?? false;
     }
 
+    get sectionNav(): SettingsSection[] {
+        return this.sectionNavItems.filter((section) => section.visible);
+    }
+
     /**
      * Reads the config object from the browsers
      * storage (indexed db)
@@ -207,6 +259,13 @@ export class SettingsComponent implements OnInit {
         }
     }
 
+    scrollToSection(sectionId: string): void {
+        this.activeSection.set(sectionId);
+        document
+            .getElementById(sectionId)
+            ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+
     /**
      * Sets saved settings from the indexed db store
      */
diff --git a/apps/web/src/app/xtream-electron/navigation/navigation.component.ts b/apps/web/src/app/xtream-electron/navigation/navigation.component.ts
index f4d265d91..af0ff532c 100644
--- a/apps/web/src/app/xtream-electron/navigation/navigation.component.ts
+++ b/apps/web/src/app/xtream-electron/navigation/navigation.component.ts
@@ -99,9 +99,9 @@ export class NavigationComponent {
 
     openSettings() {
         this.dialog.open(SettingsComponent, {
-            width: '80%',
-            maxWidth: '1200px',
-            maxHeight: '90vh',
+            width: '1200px',
+            maxWidth: '96vw',
+            maxHeight: '92vh',
             data: {
                 isDialog: true,
             },
diff --git a/apps/web/src/app/xtream/navigation-bar/navigation-bar.component.ts b/apps/web/src/app/xtream/navigation-bar/navigation-bar.component.ts
index 85f9ac241..384b452a8 100644
--- a/apps/web/src/app/xtream/navigation-bar/navigation-bar.component.ts
+++ b/apps/web/src/app/xtream/navigation-bar/navigation-bar.component.ts
@@ -163,8 +163,9 @@ export class NavigationBarComponent implements OnChanges {
 
     openSettings(): void {
         this.dialog.open(SettingsComponent, {
-            width: '1000px',
-            height: '90%',
+            width: '1200px',
+            maxWidth: '96vw',
+            maxHeight: '92vh',
             data: { isDialog: true },
         });
     }