Removed color appbar desktop mode

lib/screens/clients/client/logs_list_client.dart

@@ -8,6 +8,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:adguard_home_manager/screens/logs/log_tile.dart';
 import 'package:adguard_home_manager/screens/logs/log_details_screen.dart';
 
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/models/logs.dart';
 import 'package:adguard_home_manager/providers/app_config_provider.dart';
 import 'package:adguard_home_manager/providers/servers_provider.dart';
@@ -133,127 +134,13 @@ class _LogsListClientState extends State<LogsListClient> {
       setState(() => previousIp = widget.ip);
     }
 
-    Widget status() {
-      switch (loadStatus) {
-        case 0:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const CircularProgressIndicator(),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.loadingLogs,
-                  textAlign: TextAlign.center,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            ),
-          );
-
-        case 1:
-          if (logsData!.data.isNotEmpty) {
-            return RefreshIndicator(
-              onRefresh: fetchLogs,
-              child: ListView.builder(
-                controller: scrollController,
-                padding: const EdgeInsets.only(top: 0),
-                itemCount: isLoadingMore == true 
-                  ? logsData!.data.length+1
-                  : logsData!.data.length,
-                itemBuilder: (context, index) {
-                  if (isLoadingMore == true && index == logsData!.data.length) {
-                    return const Padding(
-                      padding: EdgeInsets.symmetric(vertical: 20),
-                      child: Center(
-                        child: CircularProgressIndicator(),
-                      ),
-                    );
-                  }
-                  else {
-                    return LogTile(
-                      log: logsData!.data[index],
-                      index: index,
-                      length: logsData!.data.length,
-                      useAlwaysNormalTile: true,
-                      onLogTap: (log) => {
-                        if (width > 700) {
-                          showDialog(
-                            context: context, 
-                            builder: (context) => LogDetailsScreen(
-                              log: log, 
-                              dialog: true
-                            )
-                          )
-                        }
-                        else {
-                          Navigator.push(context, MaterialPageRoute(
-                            builder: (context) => LogDetailsScreen(
-                              log: log, 
-                              dialog: false
-                            )
-                          ))
-                        }
-                      },
-                      twoColumns: widget.splitView,
-                    );
-                  }
-                }
-              ),
-            );
-          }
-          else {
-            return Center(
-              child: Text(
-                AppLocalizations.of(context)!.noLogsDisplay,
-                textAlign: TextAlign.center,
-                style: TextStyle(
-                  fontSize: 22,
-                  color: Theme.of(context).colorScheme.onSurfaceVariant,
-                ),
-              ),
-            );
-          }
-        
-        case 2:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const Icon(
-                  Icons.error,
-                  color: Colors.red,
-                  size: 50,
-                ),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.logsNotLoaded,
-                  textAlign: TextAlign.center,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            ),
-          );
-
-        default:
-          return const SizedBox();
-      }
-    }
-
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.name != null && widget.name != '' ? widget.name! : widget.ip),
         centerTitle: true,
+        surfaceTintColor: isDesktop(MediaQuery.of(context).size.width) 
+          ? Colors.transparent 
+          : null,
         actions: [
           if (!(Platform.isAndroid || Platform.isIOS)) ...[
             IconButton(
@@ -265,7 +152,124 @@ class _LogsListClientState extends State<LogsListClient> {
           ]
         ],
       ),
-      body: status(),
+      body: Builder(
+        builder: (context) {
+          switch (loadStatus) {
+            case 0:
+              return SizedBox(
+                width: double.maxFinite,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const CircularProgressIndicator(),
+                    const SizedBox(height: 30),
+                    Text(
+                      AppLocalizations.of(context)!.loadingLogs,
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 22,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  ],
+                ),
+              );
+
+            case 1:
+              if (logsData!.data.isNotEmpty) {
+                return RefreshIndicator(
+                  onRefresh: fetchLogs,
+                  child: ListView.builder(
+                    controller: scrollController,
+                    padding: const EdgeInsets.only(top: 0),
+                    itemCount: isLoadingMore == true 
+                      ? logsData!.data.length+1
+                      : logsData!.data.length,
+                    itemBuilder: (context, index) {
+                      if (isLoadingMore == true && index == logsData!.data.length) {
+                        return const Padding(
+                          padding: EdgeInsets.symmetric(vertical: 20),
+                          child: Center(
+                            child: CircularProgressIndicator(),
+                          ),
+                        );
+                      }
+                      else {
+                        return LogTile(
+                          log: logsData!.data[index],
+                          index: index,
+                          length: logsData!.data.length,
+                          useAlwaysNormalTile: true,
+                          onLogTap: (log) => {
+                            if (width > 700) {
+                              showDialog(
+                                context: context, 
+                                builder: (context) => LogDetailsScreen(
+                                  log: log, 
+                                  dialog: true
+                                )
+                              )
+                            }
+                            else {
+                              Navigator.push(context, MaterialPageRoute(
+                                builder: (context) => LogDetailsScreen(
+                                  log: log, 
+                                  dialog: false
+                                )
+                              ))
+                            }
+                          },
+                          twoColumns: widget.splitView,
+                        );
+                      }
+                    }
+                  ),
+                );
+              }
+              else {
+                return Center(
+                  child: Text(
+                    AppLocalizations.of(context)!.noLogsDisplay,
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      fontSize: 22,
+                      color: Theme.of(context).colorScheme.onSurfaceVariant,
+                    ),
+                  ),
+                );
+              }
+            
+            case 2:
+              return SizedBox(
+                width: double.maxFinite,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const Icon(
+                      Icons.error,
+                      color: Colors.red,
+                      size: 50,
+                    ),
+                    const SizedBox(height: 30),
+                    Text(
+                      AppLocalizations.of(context)!.logsNotLoaded,
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 22,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  ],
+                ),
+              );
+
+            default:
+              return const SizedBox();
+          }
+        },
+      )
     );
   }
 }

lib/screens/filters/add_button.dart

@@ -2,6 +2,7 @@
 
 import 'dart:io';
 
+import 'package:adguard_home_manager/routes/router_globals.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -134,6 +135,7 @@ class AddFiltersButton extends StatelessWidget {
       else {
         showModalBottomSheet(
           context: context, 
+          useRootNavigator: true,
           builder: (ctx) => AddListModal(
             type: type,
             onConfirm: confirmAddList,

lib/screens/filters/filters.dart

@@ -87,6 +87,7 @@ class _FiltersState extends State<Filters> {
         else {
           showModalBottomSheet(
             context: context, 
+            useRootNavigator: true,
             builder: (context) => const CheckHostModal(
               dialog: false,
             ),
@@ -269,6 +270,7 @@ class _FiltersState extends State<Filters> {
               else {
                 showModalBottomSheet(
                   context: context, 
+                  useRootNavigator: true,
                   builder: (context) => UpdateIntervalListsModal(
                     interval: filteringProvider.filtering!.interval,
                     onChange: setUpdateFrequency,

lib/screens/filters/list_details_screen.dart

@@ -219,6 +219,7 @@ class _ListDetailsScreenState extends State<ListDetailsScreen> {
             else {
               showModalBottomSheet(
                 context: context, 
+                useRootNavigator: true,
                 builder: (ctx) => AddListModal(
                   list: list,
                   type: widget.type,

lib/screens/home/fab.dart

@@ -28,6 +28,7 @@ class HomeFab extends StatelessWidget {
         showModalBottomSheet(
           context: context, 
           isScrollControlled: true,
+          useRootNavigator: true,
           builder: (context) => const ManagementModal(
             dialog: false,
           ),

lib/screens/logs/logs_filters_modal.dart

@@ -89,6 +89,7 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
       else {
         showModalBottomSheet(
           context: context, 
+          useRootNavigator: true,
           builder: (context) => FilterStatusModal(
             value: logsProvider.selectedResultStatus,
             dialog: false,
@@ -113,6 +114,7 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
       else {
         showModalBottomSheet(
           context: context, 
+          useRootNavigator: true,
           builder: (context) => ClientsModal(
             value: logsProvider.selectedClients,
             dialog: false,

lib/screens/logs/logs_list.dart

@@ -176,6 +176,7 @@ class _LogsListWidgetState extends State<LogsListWidget> {
       else {
         showModalBottomSheet(
           context: context, 
+          useRootNavigator: true,
           builder: (context) => const LogsFiltersModal(
             dialog: false,
           ),
@@ -240,7 +241,8 @@ class _LogsListWidgetState extends State<LogsListWidget> {
                     }
                     else {
                       showModalBottomSheet(
-                        context: context, 
+                        context: context,
+                        useRootNavigator: true, 
                         builder: (context) => LogsConfigModal(
                           onConfirm: updateConfig,
                           onClear: clearQueries,

lib/screens/settings/access_settings/access_settings.dart

@@ -6,6 +6,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import 'package:adguard_home_manager/screens/settings/access_settings/clients_list.dart';
 
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/constants/enums.dart';
 import 'package:adguard_home_manager/providers/clients_provider.dart';
 
@@ -35,6 +36,8 @@ class _AccessSettingsState extends State<AccessSettings> with TickerProviderStat
   Widget build(BuildContext context) {
     final clientsProvider = Provider.of<ClientsProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     Widget body() {
       return TabBarView(
         controller: tabController,
@@ -119,6 +122,7 @@ class _AccessSettingsState extends State<AccessSettings> with TickerProviderStat
                       floating: true,
                       centerTitle: false,
                       forceElevated: innerBoxIsScrolled,
+                      surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
                       bottom: tabBar()
                     ),
                   ),

lib/screens/settings/access_settings/clients_list.dart

@@ -361,6 +361,7 @@ class _ClientsListState extends State<ClientsList> {
           else {
             showModalBottomSheet(
               context: context, 
+              useRootNavigator: true,
               builder: (context) => AddClientModal(
                 type: widget.type,
                 onConfirm: confirmAddItem,

lib/screens/settings/advanced_setings.dart

@@ -6,6 +6,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import 'package:adguard_home_manager/widgets/custom_list_tile.dart';
 
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/functions/snackbar.dart';
 import 'package:adguard_home_manager/providers/app_config_provider.dart';
 
@@ -16,6 +17,8 @@ class AdvancedSettings extends StatelessWidget {
   Widget build(BuildContext context) {
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     Future updateSettings({
       required bool newStatus,
       required Future Function(bool) function
@@ -40,6 +43,7 @@ class AdvancedSettings extends StatelessWidget {
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.advancedSettings),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
       ),
       body: ListView(
         children: [

lib/screens/settings/customization/customization.dart

@@ -1,4 +1,3 @@
-import 'package:adguard_home_manager/functions/generate_color_translation.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -9,6 +8,8 @@ import 'package:adguard_home_manager/screens/settings/customization/theme_mode_b
 import 'package:adguard_home_manager/widgets/custom_switch_list_tile.dart';
 import 'package:adguard_home_manager/widgets/section_label.dart';
 
+import 'package:adguard_home_manager/functions/generate_color_translation.dart';
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/providers/app_config_provider.dart';
 import 'package:adguard_home_manager/constants/colors.dart';
 
@@ -56,10 +57,13 @@ class _CustomizationWidgetState extends State<CustomizationWidget> {
   Widget build(BuildContext context) {
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.customization),
         centerTitle: false,
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
       ),
       body: ListView(
         children: [

lib/screens/settings/dhcp/dhcp_leases.dart

@@ -2,6 +2,7 @@
 
 import 'dart:io';
 
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:animations/animations.dart';
@@ -108,6 +109,7 @@ class DhcpLeases extends StatelessWidget {
       else {
         showModalBottomSheet(
           context: context, 
+          useRootNavigator: true,
           builder: (context) => AddStaticLeaseModal(
             onConfirm: createLease,
             dialog: false,
@@ -120,6 +122,7 @@ class DhcpLeases extends StatelessWidget {
 
     return Scaffold(
       appBar: AppBar(
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         title: Text(
           staticLeases == true
             ? AppLocalizations.of(context)!.dhcpStatic

lib/screens/settings/dns/bootstrap_dns.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: use_build_context_synchronously
 
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -66,6 +67,8 @@ class _BootstrapDnsScreenState extends State<BootstrapDnsScreen> {
     final dnsProvider = Provider.of<DnsProvider>(context);
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     void saveData() async {
       ProcessModal processModal = ProcessModal(context: context);
       processModal.open(AppLocalizations.of(context)!.savingConfig);
@@ -102,6 +105,7 @@ class _BootstrapDnsScreenState extends State<BootstrapDnsScreen> {
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.bootstrapDns),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         actions: [
           IconButton(
             onPressed: validValues == true

lib/screens/settings/dns/cache_config.dart

@@ -7,6 +7,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:adguard_home_manager/widgets/custom_switch_list_tile.dart';
 import 'package:adguard_home_manager/screens/settings/dns/clear_dns_cache_dialog.dart';
 
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/providers/servers_provider.dart';
 import 'package:adguard_home_manager/providers/dns_provider.dart';
 import 'package:adguard_home_manager/classes/process_modal.dart';
@@ -69,6 +70,8 @@ class _CacheConfigDnsScreenState extends State<CacheConfigDnsScreen> {
     final dnsProvider = Provider.of<DnsProvider>(context);
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     void saveData() async {
       ProcessModal processModal = ProcessModal(context: context);
       processModal.open(AppLocalizations.of(context)!.savingConfig);
@@ -154,6 +157,7 @@ class _CacheConfigDnsScreenState extends State<CacheConfigDnsScreen> {
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.dnsCacheConfig),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         actions: [
           IconButton(
             onPressed: validData == true

lib/screens/settings/dns/dns.dart

@@ -1,9 +1,6 @@
 // ignore_for_file: use_build_context_synchronously
 
 import 'dart:io';
-
-import 'package:adguard_home_manager/constants/enums.dart';
-import 'package:adguard_home_manager/providers/dns_provider.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_split_view/flutter_split_view.dart';
 import 'package:provider/provider.dart';
@@ -17,13 +14,21 @@ import 'package:adguard_home_manager/screens/settings/dns/private_reverse_server
 import 'package:adguard_home_manager/screens/settings/dns/upstream_dns.dart';
 import 'package:adguard_home_manager/widgets/custom_list_tile.dart';
 
+import 'package:adguard_home_manager/constants/enums.dart';
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
+import 'package:adguard_home_manager/providers/dns_provider.dart';
 import 'package:adguard_home_manager/functions/clear_dns_cache.dart';
 import 'package:adguard_home_manager/functions/snackbar.dart';
 import 'package:adguard_home_manager/providers/servers_provider.dart';
 import 'package:adguard_home_manager/providers/app_config_provider.dart';
 
 class DnsSettings extends StatefulWidget {
-  const DnsSettings({Key? key}) : super(key: key);
+  final bool splitView;
+
+  const DnsSettings({
+    Key? key,
+    required this.splitView,
+  }) : super(key: key);
 
   @override
   State<DnsSettings> createState() => _DnsSettingsState();
@@ -44,106 +49,17 @@ class _DnsSettingsState extends State<DnsSettings> {
 
     final width = MediaQuery.of(context).size.width;
 
-    void navigate(Widget widget) {
+    void navigate(Widget w) {
-      if (width > 900 || !(Platform.isAndroid || Platform.isIOS)) {
+      if (widget.splitView) {
-        SplitView.of(context).push(widget);
+        SplitView.of(context).push(w);
       }
       else {
         Navigator.push(context, MaterialPageRoute(
-          builder: (context) => widget
+          builder: (context) => w
         ));
       }
     }
 
-    Widget generateBody() {
-      switch (dnsProvider.loadStatus) {
-        case LoadStatus.loading:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const CircularProgressIndicator(),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.loadingDnsConfig,
-                  textAlign: TextAlign.center,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            )
-          );
-
-        case LoadStatus.loaded:
-          return ListView(
-            children: [
-              CustomListTile(
-                title: AppLocalizations.of(context)!.upstreamDns,
-                subtitle: AppLocalizations.of(context)!.upstreamDnsDescription,
-                onTap: () => navigate(const UpstreamDnsScreen()),
-                icon: Icons.upload_rounded,
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.bootstrapDns,
-                subtitle: AppLocalizations.of(context)!.bootstrapDnsDescription,
-                onTap: () => navigate(const BootstrapDnsScreen()),
-                icon: Icons.dns_rounded,
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.privateReverseDnsServers,
-                subtitle: AppLocalizations.of(context)!.privateReverseDnsDescription,
-                onTap: () => navigate(const PrivateReverseDnsServersScreen()),
-                icon: Icons.person_rounded,
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.dnsServerSettings,
-                subtitle: AppLocalizations.of(context)!.dnsServerSettingsDescription,
-                onTap: () => navigate(const DnsServerSettingsScreen()),
-                icon: Icons.settings,
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.dnsCacheConfig,
-                subtitle: AppLocalizations.of(context)!.dnsCacheConfigDescription,
-                onTap: () => navigate(const CacheConfigDnsScreen()),
-                icon: Icons.storage_rounded,
-              ),
-            ],
-          );
-
-        case LoadStatus.error:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const Icon(
-                  Icons.error,
-                  color: Colors.red,
-                  size: 50,
-                ),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.dnsConfigNotLoaded,
-                  textAlign: TextAlign.center,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            ),
-          );
-
-        default:
-          return const SizedBox();
-      }
-    }
-
     void clearCache() async {
       final result = await clearDnsCache(context, serversProvider.selectedServer!);
       if (result == true) {
@@ -165,6 +81,7 @@ class _DnsSettingsState extends State<DnsSettings> {
     return Scaffold(
       appBar: AppBar(
         title:  Text(AppLocalizations.of(context)!.dnsSettings),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         actions: [
           PopupMenuButton(
             itemBuilder: (context) => [
@@ -200,7 +117,96 @@ class _DnsSettingsState extends State<DnsSettings> {
           const SizedBox(width: 10)
         ],
       ),
-      body: generateBody(),
+      body: Builder(
+        builder: (context) {
+          switch (dnsProvider.loadStatus) {
+            case LoadStatus.loading:
+              return SizedBox(
+                width: double.maxFinite,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const CircularProgressIndicator(),
+                    const SizedBox(height: 30),
+                    Text(
+                      AppLocalizations.of(context)!.loadingDnsConfig,
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 22,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  ],
+                )
+              );
+
+            case LoadStatus.loaded:
+              return ListView(
+                children: [
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.upstreamDns,
+                    subtitle: AppLocalizations.of(context)!.upstreamDnsDescription,
+                    onTap: () => navigate(const UpstreamDnsScreen()),
+                    icon: Icons.upload_rounded,
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.bootstrapDns,
+                    subtitle: AppLocalizations.of(context)!.bootstrapDnsDescription,
+                    onTap: () => navigate(const BootstrapDnsScreen()),
+                    icon: Icons.dns_rounded,
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.privateReverseDnsServers,
+                    subtitle: AppLocalizations.of(context)!.privateReverseDnsDescription,
+                    onTap: () => navigate(const PrivateReverseDnsServersScreen()),
+                    icon: Icons.person_rounded,
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.dnsServerSettings,
+                    subtitle: AppLocalizations.of(context)!.dnsServerSettingsDescription,
+                    onTap: () => navigate(const DnsServerSettingsScreen()),
+                    icon: Icons.settings,
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.dnsCacheConfig,
+                    subtitle: AppLocalizations.of(context)!.dnsCacheConfigDescription,
+                    onTap: () => navigate(const CacheConfigDnsScreen()),
+                    icon: Icons.storage_rounded,
+                  ),
+                ],
+              );
+
+            case LoadStatus.error:
+              return SizedBox(
+                width: double.maxFinite,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const Icon(
+                      Icons.error,
+                      color: Colors.red,
+                      size: 50,
+                    ),
+                    const SizedBox(height: 30),
+                    Text(
+                      AppLocalizations.of(context)!.dnsConfigNotLoaded,
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 22,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  ],
+                ),
+              );
+
+            default:
+              return const SizedBox();
+          }
+        },
+      )
     );
   }
 }

lib/screens/settings/dns/dns_server_settings.dart

@@ -8,6 +8,7 @@ import 'package:adguard_home_manager/widgets/custom_radio_list_tile.dart';
 import 'package:adguard_home_manager/widgets/section_label.dart';
 import 'package:adguard_home_manager/widgets/custom_switch_list_tile.dart';
 
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/classes/process_modal.dart';
 import 'package:adguard_home_manager/providers/dns_provider.dart';
 import 'package:adguard_home_manager/functions/snackbar.dart';
@@ -99,6 +100,7 @@ class _DnsServerSettingsScreenState extends State<DnsServerSettingsScreen> {
   Widget build(BuildContext context) {
     final dnsProvider = Provider.of<DnsProvider>(context);
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
+    final width = MediaQuery.of(context).size.width;
 
     void saveData() async {
       ProcessModal processModal = ProcessModal(context: context);
@@ -153,6 +155,7 @@ class _DnsServerSettingsScreenState extends State<DnsServerSettingsScreen> {
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.dnsServerSettings),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         actions: [
           IconButton(
             onPressed: isDataValid == true

lib/screens/settings/dns/private_reverse_servers.dart

@@ -6,6 +6,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import 'package:adguard_home_manager/widgets/custom_switch_list_tile.dart';
 
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/providers/dns_provider.dart';
 import 'package:adguard_home_manager/classes/process_modal.dart';
 import 'package:adguard_home_manager/functions/snackbar.dart';
@@ -90,6 +91,8 @@ class _PrivateReverseDnsServersScreenState extends State<PrivateReverseDnsServer
     final dnsProvider = Provider.of<DnsProvider>(context);
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     void saveData() async {
       ProcessModal processModal = ProcessModal(context: context);
       processModal.open(AppLocalizations.of(context)!.savingConfig);
@@ -134,6 +137,7 @@ class _PrivateReverseDnsServersScreenState extends State<PrivateReverseDnsServer
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.privateReverseDnsServers),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         actions: [
           IconButton(
             onPressed: validValues == true

lib/screens/settings/dns/upstream_dns.dart

@@ -11,6 +11,7 @@ import 'package:adguard_home_manager/screens/settings/dns/comment_modal.dart';
 import 'package:adguard_home_manager/widgets/custom_radio_list_tile.dart';
 
 import 'package:adguard_home_manager/classes/process_modal.dart';
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/providers/dns_provider.dart';
 import 'package:adguard_home_manager/functions/snackbar.dart';
 import 'package:adguard_home_manager/providers/app_config_provider.dart';
@@ -90,6 +91,7 @@ class _UpstreamDnsScreenState extends State<UpstreamDnsScreen> {
       else {
         showModalBottomSheet(
           context: context, 
+          useRootNavigator: true,
           builder: (context) => CommentModal(
             onConfirm: (value) {
               setState(() {
@@ -123,6 +125,7 @@ class _UpstreamDnsScreenState extends State<UpstreamDnsScreen> {
       else {
         showModalBottomSheet(
           context: context, 
+          useRootNavigator: true,
           builder: (context) => CommentModal(
             comment: item['comment'],
             onConfirm: (value) {
@@ -174,6 +177,7 @@ class _UpstreamDnsScreenState extends State<UpstreamDnsScreen> {
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.upstreamDns),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         actions: [
           IconButton(
             onPressed: validValues == true

lib/screens/settings/dns_rewrites/dns_rewrites.dart

@@ -11,6 +11,7 @@ import 'package:adguard_home_manager/screens/settings/dns_rewrites/delete_dns_re
 import 'package:adguard_home_manager/screens/settings/dns_rewrites/dns_rewrite_modal.dart';
 
 import 'package:adguard_home_manager/providers/app_config_provider.dart';
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/functions/snackbar.dart';
 import 'package:adguard_home_manager/constants/enums.dart';
 import 'package:adguard_home_manager/providers/rewrite_rules_provider.dart';
@@ -129,193 +130,195 @@ class _DnsRewritesScreenState extends State<DnsRewritesScreen> {
       }
     }
 
-    Widget generateBody() {
-      switch (rewriteRulesProvider.loadStatus) {
-        case LoadStatus.loading:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const CircularProgressIndicator(),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.loadingRewriteRules,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            ),
-          );
-        
-        case LoadStatus.loaded:
-          if (rewriteRulesProvider.rewriteRules!.isNotEmpty) {
-            return RefreshIndicator(
-              onRefresh: () async {
-                final result = await rewriteRulesProvider.fetchRules();
-                if (result == false) {
-                  showSnacbkar(
-                    appConfigProvider: appConfigProvider,
-                    label: AppLocalizations.of(context)!.rewriteRulesNotLoaded, 
-                    color: Colors.red
-                  );
-                }
-              },
-              child: ListView.builder(
-                controller: scrollController,
-                padding: const EdgeInsets.only(top: 0),
-                itemCount: rewriteRulesProvider.rewriteRules!.length,
-                itemBuilder: (context, index) => Card(
-                  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-                  child: InkWell(
-                    onTap: () => {
-                      if (width > 900 || !(Platform.isAndroid || Platform.isIOS)) {
-                        showDialog(
-                          context: context, 
-                          builder: (context) => DnsRewriteModal(
-                            onConfirm: updateRewriteRule,
-                            dialog: true,
-                            rule: rewriteRulesProvider.rewriteRules![index],
-                            onDelete: (rule) => showDialog(
-                              context: context, 
-                              builder: (context) => DeleteDnsRewrite(
-                                onConfirm: () => deleteDnsRewrite(rule)
-                              )
-                            ),
-                          ),
-                        )
-                      }
-                      else {
-                        showModalBottomSheet(
-                          context: context, 
-                          builder: (context) => DnsRewriteModal(
-                            onConfirm: updateRewriteRule,
-                            dialog: false,
-                            rule: rewriteRulesProvider.rewriteRules![index],
-                            onDelete: (rule) => showDialog(
-                              context: context, 
-                              builder: (context) => DeleteDnsRewrite(
-                                onConfirm: () => deleteDnsRewrite(rule)
-                              )
-                            ),
-                          ),
-                          backgroundColor: Colors.transparent,
-                          isScrollControlled: true,
-                        )
-                      }
-                    },
-                    borderRadius: BorderRadius.circular(10),
-                    child: Padding(
-                      padding: const EdgeInsets.only(
-                        left: 16, top: 16, bottom: 16, right: 8
-                      ),
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                        children: [
-                          Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Row(
-                                children: [
-                                  Text(
-                                    "${AppLocalizations.of(context)!.domain}: ",
-                                    style: TextStyle(
-                                      fontWeight: FontWeight.w500,
-                                      color: Theme.of(context).colorScheme.onSurface
-                                    ),
-                                  ),
-                                  Text(
-                                    rewriteRulesProvider.rewriteRules![index].domain,
-                                    style: TextStyle(
-                                      color: Theme.of(context).colorScheme.onSurface
-                                    ),
-                                  ),
-                                ],
-                              ),
-                              const SizedBox(height: 3),
-                              Row(
-                                children: [
-                                  Text(
-                                    "${AppLocalizations.of(context)!.answer}: ",
-                                    style: TextStyle(
-                                      fontWeight: FontWeight.w500,
-                                      color: Theme.of(context).colorScheme.onSurface
-                                    ),
-                                  ),
-                                  Text(
-                                    rewriteRulesProvider.rewriteRules![index].answer,
-                                    style: TextStyle(
-                                      color: Theme.of(context).colorScheme.onSurface
-                                    ),
-                                  ),
-                                ],
-                              ),
-                            ],
-                          ),
-                          Icon(
-                            Icons.keyboard_arrow_right_rounded,
-                            color: Theme.of(context).colorScheme.onSurfaceVariant,
-                          )
-                        ],
-                      ),
-                    ),
-                  ),
-                )
-              ),
-            );
-          }
-          else {
-            return Center(
-              child: Text(
-                AppLocalizations.of(context)!.noRewriteRules,
-                style: TextStyle(
-                  fontSize: 22,
-                  color: Theme.of(context).colorScheme.onSurfaceVariant,
-                ),
-              ),
-            );
-          }
-
-        case LoadStatus.error:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const Icon(
-                  Icons.error,
-                  color: Colors.red,
-                  size: 50,
-                ),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.rewriteRulesNotLoaded,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            ),
-          );
-
-        default:
-          return const SizedBox();
-      }
-    }
-
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.dnsRewrites),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         centerTitle: false,
       ),
       body: Stack(
         children: [
-          generateBody(),
+          Builder(
+            builder: (context) {
+              switch (rewriteRulesProvider.loadStatus) {
+                case LoadStatus.loading:
+                  return SizedBox(
+                    width: double.maxFinite,
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      children: [
+                        const CircularProgressIndicator(),
+                        const SizedBox(height: 30),
+                        Text(
+                          AppLocalizations.of(context)!.loadingRewriteRules,
+                          style: TextStyle(
+                            fontSize: 22,
+                            color: Theme.of(context).colorScheme.onSurfaceVariant,
+                          ),
+                        )
+                      ],
+                    ),
+                  );
+                
+                case LoadStatus.loaded:
+                  if (rewriteRulesProvider.rewriteRules!.isNotEmpty) {
+                    return RefreshIndicator(
+                      onRefresh: () async {
+                        final result = await rewriteRulesProvider.fetchRules();
+                        if (result == false) {
+                          showSnacbkar(
+                            appConfigProvider: appConfigProvider,
+                            label: AppLocalizations.of(context)!.rewriteRulesNotLoaded, 
+                            color: Colors.red
+                          );
+                        }
+                      },
+                      child: ListView.builder(
+                        controller: scrollController,
+                        padding: const EdgeInsets.only(top: 0),
+                        itemCount: rewriteRulesProvider.rewriteRules!.length,
+                        itemBuilder: (context, index) => Card(
+                          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+                          child: InkWell(
+                            onTap: () => {
+                              if (width > 900 || !(Platform.isAndroid || Platform.isIOS)) {
+                                showDialog(
+                                  context: context, 
+                                  builder: (context) => DnsRewriteModal(
+                                    onConfirm: updateRewriteRule,
+                                    dialog: true,
+                                    rule: rewriteRulesProvider.rewriteRules![index],
+                                    onDelete: (rule) => showDialog(
+                                      context: context, 
+                                      builder: (context) => DeleteDnsRewrite(
+                                        onConfirm: () => deleteDnsRewrite(rule)
+                                      )
+                                    ),
+                                  ),
+                                )
+                              }
+                              else {
+                                showModalBottomSheet(
+                                  context: context, 
+                                  useRootNavigator: true,
+                                  builder: (context) => DnsRewriteModal(
+                                    onConfirm: updateRewriteRule,
+                                    dialog: false,
+                                    rule: rewriteRulesProvider.rewriteRules![index],
+                                    onDelete: (rule) => showDialog(
+                                      context: context, 
+                                      builder: (context) => DeleteDnsRewrite(
+                                        onConfirm: () => deleteDnsRewrite(rule)
+                                      )
+                                    ),
+                                  ),
+                                  backgroundColor: Colors.transparent,
+                                  isScrollControlled: true,
+                                )
+                              }
+                            },
+                            borderRadius: BorderRadius.circular(10),
+                            child: Padding(
+                              padding: const EdgeInsets.only(
+                                left: 16, top: 16, bottom: 16, right: 8
+                              ),
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                children: [
+                                  Column(
+                                    crossAxisAlignment: CrossAxisAlignment.start,
+                                    children: [
+                                      Row(
+                                        children: [
+                                          Text(
+                                            "${AppLocalizations.of(context)!.domain}: ",
+                                            style: TextStyle(
+                                              fontWeight: FontWeight.w500,
+                                              color: Theme.of(context).colorScheme.onSurface
+                                            ),
+                                          ),
+                                          Text(
+                                            rewriteRulesProvider.rewriteRules![index].domain,
+                                            style: TextStyle(
+                                              color: Theme.of(context).colorScheme.onSurface
+                                            ),
+                                          ),
+                                        ],
+                                      ),
+                                      const SizedBox(height: 3),
+                                      Row(
+                                        children: [
+                                          Text(
+                                            "${AppLocalizations.of(context)!.answer}: ",
+                                            style: TextStyle(
+                                              fontWeight: FontWeight.w500,
+                                              color: Theme.of(context).colorScheme.onSurface
+                                            ),
+                                          ),
+                                          Text(
+                                            rewriteRulesProvider.rewriteRules![index].answer,
+                                            style: TextStyle(
+                                              color: Theme.of(context).colorScheme.onSurface
+                                            ),
+                                          ),
+                                        ],
+                                      ),
+                                    ],
+                                  ),
+                                  Icon(
+                                    Icons.keyboard_arrow_right_rounded,
+                                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                                  )
+                                ],
+                              ),
+                            ),
+                          ),
+                        )
+                      ),
+                    );
+                  }
+                  else {
+                    return Center(
+                      child: Text(
+                        AppLocalizations.of(context)!.noRewriteRules,
+                        style: TextStyle(
+                          fontSize: 22,
+                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                        ),
+                      ),
+                    );
+                  }
+
+                case LoadStatus.error:
+                  return SizedBox(
+                    width: double.maxFinite,
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      children: [
+                        const Icon(
+                          Icons.error,
+                          color: Colors.red,
+                          size: 50,
+                        ),
+                        const SizedBox(height: 30),
+                        Text(
+                          AppLocalizations.of(context)!.rewriteRulesNotLoaded,
+                          style: TextStyle(
+                            fontSize: 22,
+                            color: Theme.of(context).colorScheme.onSurfaceVariant,
+                          ),
+                        )
+                      ],
+                    ),
+                  );
+
+                default:
+                  return const SizedBox();
+              }
+            },
+          ),
           AnimatedPositioned(
             duration: const Duration(milliseconds: 100),
             curve: Curves.easeInOut,
@@ -344,6 +347,7 @@ class _DnsRewritesScreenState extends State<DnsRewritesScreen> {
                   else {
                     showModalBottomSheet(
                       context: context, 
+                      useRootNavigator: true,
                       builder: (context) => DnsRewriteModal(
                         onConfirm: addDnsRewrite,
                         dialog: false,

lib/screens/settings/encryption/encryption.dart

@@ -14,6 +14,7 @@ import 'package:adguard_home_manager/screens/settings/encryption/encryption_func
 import 'package:adguard_home_manager/screens/settings/encryption/error_message.dart';
 
 import 'package:adguard_home_manager/classes/process_modal.dart';
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/functions/base64.dart';
 import 'package:adguard_home_manager/functions/snackbar.dart';
 import 'package:adguard_home_manager/providers/app_config_provider.dart';
@@ -272,379 +273,10 @@ class _EncryptionSettingsWidgetState extends State<EncryptionSettingsWidget> {
       }
     }
 
-    Widget generateBody() {
-      switch (loadStatus) {
-        case 0:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const CircularProgressIndicator(),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.loadingEncryptionSettings,
-                  textAlign: TextAlign.center,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            )
-          );
-
-        case 1:
-          return ListView(
-            children: [
-              EncryptionMasterSwitch(
-                value: enabled, 
-                onChange: (value) {
-                  setState(() => enabled = value);
-                  onEditValidate();
-                }
-              ),
-              SectionLabel(
-                label: AppLocalizations.of(context)!.serverConfiguration,
-                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
-              ),
-              EncryptionTextField(
-                enabled: enabled, 
-                controller: domainNameController, 
-                icon: Icons.link_rounded, 
-                onChanged: (value) {
-                  setState(() => domainError = validateDomain(context, value));
-                  onEditValidate();
-                },
-                errorText: domainError,
-                label: AppLocalizations.of(context)!.domainName,
-                helperText: AppLocalizations.of(context)!.domainNameDescription,
-              ),
-              const SizedBox(height: 10),
-              CustomSwitchListTile(
-                value: redirectHttps, 
-                onChanged: (value) {
-                  setState(() => redirectHttps = value);
-                  onEditValidate();
-                }, 
-                title: AppLocalizations.of(context)!.redirectHttps,
-                disabled: !enabled,
-              ),
-              const SizedBox(height: 10),
-              Wrap(
-                children: [
-                  FractionallySizedBox(
-                    widthFactor: width > 900 ? 0.33 : 1,
-                    child: EncryptionTextField(
-                      enabled: enabled, 
-                      controller: httpsPortController, 
-                      icon: Icons.numbers_rounded, 
-                      onChanged: (value) {
-                        setState(() => httpsPortError = validatePort(context, value));
-                        onEditValidate();
-                      },
-                      errorText: httpsPortError,
-                      label: AppLocalizations.of(context)!.httpsPort,
-                      keyboardType: TextInputType.number,
-                    ),
-                  ),
-                  Padding(
-                    padding: width <= 900
-                      ? const EdgeInsets.symmetric(vertical: 24)
-                      : const EdgeInsets.all(0),
-                    child: FractionallySizedBox(
-                      widthFactor: width > 900 ? 0.33 : 1,
-                      child: EncryptionTextField(
-                        enabled: enabled, 
-                        controller: tlsPortController, 
-                        icon: Icons.numbers_rounded, 
-                        onChanged: (value) {
-                          setState(() => tlsPortError = validatePort(context, value));
-                          onEditValidate();
-                        },
-                        errorText: tlsPortError,
-                        label: AppLocalizations.of(context)!.tlsPort,
-                        keyboardType: TextInputType.number,
-                      ),
-                    ),
-                  ),
-                  FractionallySizedBox(
-                    widthFactor: width > 900 ? 0.33 : 1,
-                    child: EncryptionTextField(
-                      enabled: enabled, 
-                      controller: dnsOverQuicPortController, 
-                      icon: Icons.numbers_rounded, 
-                      onChanged: (value) {
-                        setState(() => dnsOverQuicPortError = validatePort(context, value));
-                        onEditValidate();
-                      },
-                      errorText: dnsOverQuicPortError,
-                      label: AppLocalizations.of(context)!.dnsOverQuicPort,
-                      keyboardType: TextInputType.number,
-                    ),
-                  ),
-                ],
-              ),
-              SectionLabel(
-                label: AppLocalizations.of(context)!.certificates,
-                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
-              ),
-              Card(
-                margin: const EdgeInsets.symmetric(horizontal: 16),
-                child: Padding(
-                  padding: const EdgeInsets.all(20),
-                  child: Row(
-                    children: [
-                      Icon(
-                        Icons.info_rounded,
-                        color: Theme.of(context).listTileTheme.iconColor,
-                      ),
-                      const SizedBox(width: 20),
-                      Flexible(
-                        child: Text(
-                          AppLocalizations.of(context)!.certificatesDescription,
-                          style: TextStyle(
-                            color: Theme.of(context).colorScheme.onSurface,
-                          ),
-                        )
-                      )
-                    ],
-                  ),
-                ),
-              ),
-              const SizedBox(height: 20),
-              RadioListTile(
-                value: 0, 
-                groupValue: certificateOption,
-                onChanged: enabled == true
-                  ? (value) {
-                      setState(() => certificateOption = int.parse(value.toString()));
-                      onEditValidate();
-                    }
-                  : null,
-                title: Text(
-                  AppLocalizations.of(context)!.certificateFilePath,
-                  style: const TextStyle(
-                    fontWeight: FontWeight.normal
-                  ),
-                ),
-              ),
-              RadioListTile(
-                value: 1, 
-                groupValue: certificateOption,
-                onChanged: enabled == true
-                  ? (value) {
-                      setState(() => certificateOption = int.parse(value.toString()));
-                      onEditValidate();
-                    }
-                  : null,
-                title: Text(
-                  AppLocalizations.of(context)!.pasteCertificateContent,
-                  style: const TextStyle(
-                    fontWeight: FontWeight.normal
-                  ),
-                ),
-              ),
-              const SizedBox(height: 10),
-              if (certificateOption == 0) EncryptionTextField(
-                enabled: enabled, 
-                controller: certificatePathController, 
-                icon: Icons.description_rounded, 
-                onChanged: (value) {
-                  setState(() => certificatePathError = validatePath(context, value));
-                  onEditValidate();
-                },
-                label: AppLocalizations.of(context)!.certificatePath,
-                errorText: certificatePathError,
-              ),
-              if (certificateOption == 1) EncryptionTextField(
-                enabled: enabled, 
-                controller: certificateContentController, 
-                icon: Icons.description_rounded, 
-                onChanged: (value) {
-                  setState(() => certificateContentError = validateCertificate(context, value));
-                  onEditValidate();
-                }, 
-                label: AppLocalizations.of(context)!.certificateContent,
-                errorText: certificateContentError,
-                multiline: true,
-                keyboardType: TextInputType.multiline,
-              ),
-              if (certKeyValid != null && (certificateContentController.text != '' || certificatePathController.text != '')) ...[
-                const SizedBox(height: 20),
-                if (certKeyValid!['valid_chain'] != null) ...[
-                  Status(
-                    valid: certKeyValid!['valid_chain'], 
-                    label: certKeyValid!['valid_chain'] == true
-                      ? AppLocalizations.of(context)!.validCertificateChain
-                      : AppLocalizations.of(context)!.invalidCertificateChain,
-                  ),
-                  const SizedBox(height: 10),
-                ],
-                if (certKeyValid!['subject'] != null) ...[
-                  Status(
-                    valid: true, 
-                    label: "${AppLocalizations.of(context)!.subject}: ${certKeyValid!['subject']}"
-                  ),
-                  const SizedBox(height: 10),
-                ],
-                if (certKeyValid!['issuer'] != null) ...[
-                  Status(
-                  valid: true, 
-                  label: "${AppLocalizations.of(context)!.issuer}: ${certKeyValid!['issuer']}"
-                ),
-                  const SizedBox(height: 10),
-                ],
-                if (certKeyValid!['not_after'] != null) ...[
-                  Status(
-                    valid: true, 
-                    label: "${AppLocalizations.of(context)!.expirationDate}: ${certKeyValid!['not_after']}"
-                  ),
-                  const SizedBox(height: 10),
-                ],
-                if (certKeyValid!['dns_names'] != null) ...[
-                  Status(
-                    valid: true, 
-                    label: "${AppLocalizations.of(context)!.hostNames}: ${certKeyValid!['dns_names'].join(', ')}"
-                  ),
-                  const SizedBox(height: 10),
-                ],
-              ],
-              SectionLabel(
-                label: AppLocalizations.of(context)!.privateKey,
-                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
-              ),
-              RadioListTile(
-                value: 0, 
-                groupValue: privateKeyOption,
-                onChanged: enabled == true
-                  ? (value) {
-                      setState(() => privateKeyOption = int.parse(value.toString()));
-                      onEditValidate();
-                    }
-                  : null,
-                title: Text(
-                  AppLocalizations.of(context)!.privateKeyFile,
-                  style: const TextStyle(
-                    fontWeight: FontWeight.normal
-                  ),
-                ),
-              ),
-              RadioListTile(
-                value: 1, 
-                groupValue: privateKeyOption,
-                onChanged: enabled == true
-                  ? (value) {
-                      setState(() => privateKeyOption = int.parse(value.toString()));
-                      onEditValidate();
-                    }
-                  : null,
-                title: Text(
-                  AppLocalizations.of(context)!.pastePrivateKey,
-                  style: const TextStyle(
-                    fontWeight: FontWeight.normal
-                  ),
-                ),
-              ),
-              if (privateKeyOption == 0) const SizedBox(height: 10),
-              if (privateKeyOption == 1) ...[
-                CustomSwitchListTile(
-                  value: usePreviouslySavedKey, 
-                  onChanged: (value) => setState(() => usePreviouslySavedKey = value), 
-                  title: AppLocalizations.of(context)!.usePreviousKey,
-                ),
-                const SizedBox(height: 10)
-              ],
-              if (privateKeyOption == 0) EncryptionTextField(
-                enabled: enabled, 
-                controller: privateKeyPathController, 
-                icon: Icons.description_rounded, 
-                onChanged: (value) {
-                  setState(() => privateKeyPathError = validatePath(context, value));
-                  onEditValidate();
-                },
-                label: AppLocalizations.of(context)!.privateKeyPath,
-                errorText: privateKeyPathError,
-              ),
-              if (privateKeyOption == 1) EncryptionTextField(
-                enabled: enabled == true
-                  ? !usePreviouslySavedKey
-                  : false,
-                controller: pastePrivateKeyController, 
-                icon: Icons.description_rounded, 
-                onChanged: (value) {
-                  setState(() => pastePrivateKeyError = validatePrivateKey(context, value));
-                  onEditValidate();
-                },
-                label: AppLocalizations.of(context)!.pastePrivateKey,
-                errorText: pastePrivateKeyError,
-                keyboardType: TextInputType.multiline,
-                multiline: true,
-              ),
-              const SizedBox(height: 20),
-              if (certKeyValid != null && (privateKeyPathController.text != '' || pastePrivateKeyController.text != '' || usePreviouslySavedKey == true)) ...[
-                if (certKeyValid!['valid_key'] != null) ...[
-                  Status(
-                    valid: certKeyValid!['valid_key'], 
-                    label: certKeyValid!['valid_key'] == true
-                      ? AppLocalizations.of(context)!.validPrivateKey
-                      : AppLocalizations.of(context)!.invalidPrivateKey,
-                  ),
-                  const SizedBox(height: 10)
-                ],
-                if (certKeyValid!['valid_pair'] != null && certKeyValid!['valid_pair'] == false) ...[
-                  Status(
-                    valid: false, 
-                    label: AppLocalizations.of(context)!.keysNotMatch,
-                  ),
-                  const SizedBox(height: 10)
-                ],
-                if (certKeyValid!['key_type'] != null) ...[
-                  Status(
-                    valid: true, 
-                    label: "${AppLocalizations.of(context)!.keyType}: ${certKeyValid!['key_type']}"
-                  ),
-                  const SizedBox(height: 10),
-                ],
-                const SizedBox(height: 10)
-              ]
-            ],
-          );
-
-        case 2:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const Icon(
-                  Icons.error,
-                  color: Colors.red,
-                  size: 50,
-                ),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.encryptionSettingsNotLoaded,
-                  textAlign: TextAlign.center,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            ),
-          );
-
-        default:
-          return const SizedBox();
-      }
-    }
-
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.encryptionSettings),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         centerTitle: false,
         actions: [
           IconButton(
@@ -668,7 +300,377 @@ class _EncryptionSettingsWidgetState extends State<EncryptionSettingsWidget> {
           const SizedBox(width: 10),
         ],
       ),
-      body: generateBody(),
+      body: Builder(
+        builder: (context) {
+          switch (loadStatus) {
+            case 0:
+              return SizedBox(
+                width: double.maxFinite,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const CircularProgressIndicator(),
+                    const SizedBox(height: 30),
+                    Text(
+                      AppLocalizations.of(context)!.loadingEncryptionSettings,
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 22,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  ],
+                )
+              );
+
+            case 1:
+              return ListView(
+                children: [
+                  EncryptionMasterSwitch(
+                    value: enabled, 
+                    onChange: (value) {
+                      setState(() => enabled = value);
+                      onEditValidate();
+                    }
+                  ),
+                  SectionLabel(
+                    label: AppLocalizations.of(context)!.serverConfiguration,
+                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
+                  ),
+                  EncryptionTextField(
+                    enabled: enabled, 
+                    controller: domainNameController, 
+                    icon: Icons.link_rounded, 
+                    onChanged: (value) {
+                      setState(() => domainError = validateDomain(context, value));
+                      onEditValidate();
+                    },
+                    errorText: domainError,
+                    label: AppLocalizations.of(context)!.domainName,
+                    helperText: AppLocalizations.of(context)!.domainNameDescription,
+                  ),
+                  const SizedBox(height: 10),
+                  CustomSwitchListTile(
+                    value: redirectHttps, 
+                    onChanged: (value) {
+                      setState(() => redirectHttps = value);
+                      onEditValidate();
+                    }, 
+                    title: AppLocalizations.of(context)!.redirectHttps,
+                    disabled: !enabled,
+                  ),
+                  const SizedBox(height: 10),
+                  Wrap(
+                    children: [
+                      FractionallySizedBox(
+                        widthFactor: width > 900 ? 0.33 : 1,
+                        child: EncryptionTextField(
+                          enabled: enabled, 
+                          controller: httpsPortController, 
+                          icon: Icons.numbers_rounded, 
+                          onChanged: (value) {
+                            setState(() => httpsPortError = validatePort(context, value));
+                            onEditValidate();
+                          },
+                          errorText: httpsPortError,
+                          label: AppLocalizations.of(context)!.httpsPort,
+                          keyboardType: TextInputType.number,
+                        ),
+                      ),
+                      Padding(
+                        padding: width <= 900
+                          ? const EdgeInsets.symmetric(vertical: 24)
+                          : const EdgeInsets.all(0),
+                        child: FractionallySizedBox(
+                          widthFactor: width > 900 ? 0.33 : 1,
+                          child: EncryptionTextField(
+                            enabled: enabled, 
+                            controller: tlsPortController, 
+                            icon: Icons.numbers_rounded, 
+                            onChanged: (value) {
+                              setState(() => tlsPortError = validatePort(context, value));
+                              onEditValidate();
+                            },
+                            errorText: tlsPortError,
+                            label: AppLocalizations.of(context)!.tlsPort,
+                            keyboardType: TextInputType.number,
+                          ),
+                        ),
+                      ),
+                      FractionallySizedBox(
+                        widthFactor: width > 900 ? 0.33 : 1,
+                        child: EncryptionTextField(
+                          enabled: enabled, 
+                          controller: dnsOverQuicPortController, 
+                          icon: Icons.numbers_rounded, 
+                          onChanged: (value) {
+                            setState(() => dnsOverQuicPortError = validatePort(context, value));
+                            onEditValidate();
+                          },
+                          errorText: dnsOverQuicPortError,
+                          label: AppLocalizations.of(context)!.dnsOverQuicPort,
+                          keyboardType: TextInputType.number,
+                        ),
+                      ),
+                    ],
+                  ),
+                  SectionLabel(
+                    label: AppLocalizations.of(context)!.certificates,
+                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
+                  ),
+                  Card(
+                    margin: const EdgeInsets.symmetric(horizontal: 16),
+                    child: Padding(
+                      padding: const EdgeInsets.all(20),
+                      child: Row(
+                        children: [
+                          Icon(
+                            Icons.info_rounded,
+                            color: Theme.of(context).listTileTheme.iconColor,
+                          ),
+                          const SizedBox(width: 20),
+                          Flexible(
+                            child: Text(
+                              AppLocalizations.of(context)!.certificatesDescription,
+                              style: TextStyle(
+                                color: Theme.of(context).colorScheme.onSurface,
+                              ),
+                            )
+                          )
+                        ],
+                      ),
+                    ),
+                  ),
+                  const SizedBox(height: 20),
+                  RadioListTile(
+                    value: 0, 
+                    groupValue: certificateOption,
+                    onChanged: enabled == true
+                      ? (value) {
+                          setState(() => certificateOption = int.parse(value.toString()));
+                          onEditValidate();
+                        }
+                      : null,
+                    title: Text(
+                      AppLocalizations.of(context)!.certificateFilePath,
+                      style: const TextStyle(
+                        fontWeight: FontWeight.normal
+                      ),
+                    ),
+                  ),
+                  RadioListTile(
+                    value: 1, 
+                    groupValue: certificateOption,
+                    onChanged: enabled == true
+                      ? (value) {
+                          setState(() => certificateOption = int.parse(value.toString()));
+                          onEditValidate();
+                        }
+                      : null,
+                    title: Text(
+                      AppLocalizations.of(context)!.pasteCertificateContent,
+                      style: const TextStyle(
+                        fontWeight: FontWeight.normal
+                      ),
+                    ),
+                  ),
+                  const SizedBox(height: 10),
+                  if (certificateOption == 0) EncryptionTextField(
+                    enabled: enabled, 
+                    controller: certificatePathController, 
+                    icon: Icons.description_rounded, 
+                    onChanged: (value) {
+                      setState(() => certificatePathError = validatePath(context, value));
+                      onEditValidate();
+                    },
+                    label: AppLocalizations.of(context)!.certificatePath,
+                    errorText: certificatePathError,
+                  ),
+                  if (certificateOption == 1) EncryptionTextField(
+                    enabled: enabled, 
+                    controller: certificateContentController, 
+                    icon: Icons.description_rounded, 
+                    onChanged: (value) {
+                      setState(() => certificateContentError = validateCertificate(context, value));
+                      onEditValidate();
+                    }, 
+                    label: AppLocalizations.of(context)!.certificateContent,
+                    errorText: certificateContentError,
+                    multiline: true,
+                    keyboardType: TextInputType.multiline,
+                  ),
+                  if (certKeyValid != null && (certificateContentController.text != '' || certificatePathController.text != '')) ...[
+                    const SizedBox(height: 20),
+                    if (certKeyValid!['valid_chain'] != null) ...[
+                      Status(
+                        valid: certKeyValid!['valid_chain'], 
+                        label: certKeyValid!['valid_chain'] == true
+                          ? AppLocalizations.of(context)!.validCertificateChain
+                          : AppLocalizations.of(context)!.invalidCertificateChain,
+                      ),
+                      const SizedBox(height: 10),
+                    ],
+                    if (certKeyValid!['subject'] != null) ...[
+                      Status(
+                        valid: true, 
+                        label: "${AppLocalizations.of(context)!.subject}: ${certKeyValid!['subject']}"
+                      ),
+                      const SizedBox(height: 10),
+                    ],
+                    if (certKeyValid!['issuer'] != null) ...[
+                      Status(
+                      valid: true, 
+                      label: "${AppLocalizations.of(context)!.issuer}: ${certKeyValid!['issuer']}"
+                    ),
+                      const SizedBox(height: 10),
+                    ],
+                    if (certKeyValid!['not_after'] != null) ...[
+                      Status(
+                        valid: true, 
+                        label: "${AppLocalizations.of(context)!.expirationDate}: ${certKeyValid!['not_after']}"
+                      ),
+                      const SizedBox(height: 10),
+                    ],
+                    if (certKeyValid!['dns_names'] != null) ...[
+                      Status(
+                        valid: true, 
+                        label: "${AppLocalizations.of(context)!.hostNames}: ${certKeyValid!['dns_names'].join(', ')}"
+                      ),
+                      const SizedBox(height: 10),
+                    ],
+                  ],
+                  SectionLabel(
+                    label: AppLocalizations.of(context)!.privateKey,
+                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
+                  ),
+                  RadioListTile(
+                    value: 0, 
+                    groupValue: privateKeyOption,
+                    onChanged: enabled == true
+                      ? (value) {
+                          setState(() => privateKeyOption = int.parse(value.toString()));
+                          onEditValidate();
+                        }
+                      : null,
+                    title: Text(
+                      AppLocalizations.of(context)!.privateKeyFile,
+                      style: const TextStyle(
+                        fontWeight: FontWeight.normal
+                      ),
+                    ),
+                  ),
+                  RadioListTile(
+                    value: 1, 
+                    groupValue: privateKeyOption,
+                    onChanged: enabled == true
+                      ? (value) {
+                          setState(() => privateKeyOption = int.parse(value.toString()));
+                          onEditValidate();
+                        }
+                      : null,
+                    title: Text(
+                      AppLocalizations.of(context)!.pastePrivateKey,
+                      style: const TextStyle(
+                        fontWeight: FontWeight.normal
+                      ),
+                    ),
+                  ),
+                  if (privateKeyOption == 0) const SizedBox(height: 10),
+                  if (privateKeyOption == 1) ...[
+                    CustomSwitchListTile(
+                      value: usePreviouslySavedKey, 
+                      onChanged: (value) => setState(() => usePreviouslySavedKey = value), 
+                      title: AppLocalizations.of(context)!.usePreviousKey,
+                    ),
+                    const SizedBox(height: 10)
+                  ],
+                  if (privateKeyOption == 0) EncryptionTextField(
+                    enabled: enabled, 
+                    controller: privateKeyPathController, 
+                    icon: Icons.description_rounded, 
+                    onChanged: (value) {
+                      setState(() => privateKeyPathError = validatePath(context, value));
+                      onEditValidate();
+                    },
+                    label: AppLocalizations.of(context)!.privateKeyPath,
+                    errorText: privateKeyPathError,
+                  ),
+                  if (privateKeyOption == 1) EncryptionTextField(
+                    enabled: enabled == true
+                      ? !usePreviouslySavedKey
+                      : false,
+                    controller: pastePrivateKeyController, 
+                    icon: Icons.description_rounded, 
+                    onChanged: (value) {
+                      setState(() => pastePrivateKeyError = validatePrivateKey(context, value));
+                      onEditValidate();
+                    },
+                    label: AppLocalizations.of(context)!.pastePrivateKey,
+                    errorText: pastePrivateKeyError,
+                    keyboardType: TextInputType.multiline,
+                    multiline: true,
+                  ),
+                  const SizedBox(height: 20),
+                  if (certKeyValid != null && (privateKeyPathController.text != '' || pastePrivateKeyController.text != '' || usePreviouslySavedKey == true)) ...[
+                    if (certKeyValid!['valid_key'] != null) ...[
+                      Status(
+                        valid: certKeyValid!['valid_key'], 
+                        label: certKeyValid!['valid_key'] == true
+                          ? AppLocalizations.of(context)!.validPrivateKey
+                          : AppLocalizations.of(context)!.invalidPrivateKey,
+                      ),
+                      const SizedBox(height: 10)
+                    ],
+                    if (certKeyValid!['valid_pair'] != null && certKeyValid!['valid_pair'] == false) ...[
+                      Status(
+                        valid: false, 
+                        label: AppLocalizations.of(context)!.keysNotMatch,
+                      ),
+                      const SizedBox(height: 10)
+                    ],
+                    if (certKeyValid!['key_type'] != null) ...[
+                      Status(
+                        valid: true, 
+                        label: "${AppLocalizations.of(context)!.keyType}: ${certKeyValid!['key_type']}"
+                      ),
+                      const SizedBox(height: 10),
+                    ],
+                    const SizedBox(height: 10)
+                  ]
+                ],
+              );
+
+            case 2:
+              return SizedBox(
+                width: double.maxFinite,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const Icon(
+                      Icons.error,
+                      color: Colors.red,
+                      size: 50,
+                    ),
+                    const SizedBox(height: 30),
+                    Text(
+                      AppLocalizations.of(context)!.encryptionSettingsNotLoaded,
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 22,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  ],
+                ),
+              );
+
+            default:
+              return const SizedBox();
+          }
+        },
+      )
     );
   }
 }

lib/screens/settings/general_settings/general_settings.dart

@@ -13,6 +13,7 @@ import 'package:adguard_home_manager/widgets/custom_list_tile.dart';
 import 'package:adguard_home_manager/widgets/section_label.dart';
 
 import 'package:adguard_home_manager/functions/check_app_updates.dart';
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:adguard_home_manager/functions/snackbar.dart';
 import 'package:adguard_home_manager/functions/open_url.dart';
 import 'package:adguard_home_manager/functions/app_update_download_link.dart';
@@ -34,6 +35,8 @@ class _GeneralSettingsState extends State<GeneralSettings> {
   Widget build(BuildContext context) {
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     Future updateSettings({
       required bool newStatus,
       required Future Function(bool) function
@@ -113,6 +116,7 @@ class _GeneralSettingsState extends State<GeneralSettings> {
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.generalSettings),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
       ),
       body: ListView(
         children: [

lib/screens/settings/general_settings/reorderable_top_items_home.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: use_build_context_synchronously
 
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -91,6 +92,8 @@ class _ReorderableTopItemsHomeState extends State<ReorderableTopItemsHome> {
   Widget build(BuildContext context) {
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     Widget tile(HomeTopItems title) {
       switch (title) {
         case HomeTopItems.queriedDomains:
@@ -177,6 +180,7 @@ class _ReorderableTopItemsHomeState extends State<ReorderableTopItemsHome> {
       child: Scaffold(
         appBar: AppBar(
           title: Text(AppLocalizations.of(context)!.topItemsOrder),
+          surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
           actions: [
             IconButton(
               onPressed: !listEquals(appConfigProvider.homeTopItemsOrder, persistHomeTopItemsList)

lib/screens/settings/safe_search_settings.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: use_build_context_synchronously
 
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -70,6 +71,8 @@ class _SafeSearchSettingsScreenState extends State<SafeSearchSettingsScreen> {
     final statusProvider = Provider.of<StatusProvider>(context);
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     void saveConfig() async {
       ProcessModal processModal = ProcessModal(context: context);
       processModal.open(AppLocalizations.of(context)!.savingSettings);
@@ -104,167 +107,10 @@ class _SafeSearchSettingsScreenState extends State<SafeSearchSettingsScreen> {
       }
     }
 
-    Widget body() {
-      switch (statusProvider.loadStatus) {
-        case LoadStatus.loading:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const CircularProgressIndicator(),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.loadingSafeSearchSettings,
-                  textAlign: TextAlign.center,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            ),
-          );
-          
-        case LoadStatus.loaded: 
-          return RefreshIndicator(
-            onRefresh: requestSafeSearchSettings,
-            child: ListView(
-              children: [
-                Padding(
-                  padding: const EdgeInsets.only(
-                    top: 16,
-                    left: 16,
-                    right: 16,
-                    bottom: 8
-                  ),
-                  child: Material(
-                    color: Colors.transparent,
-                    borderRadius: BorderRadius.circular(28),
-                    child: InkWell(
-                      borderRadius: BorderRadius.circular(28),
-                      onTap: () => setState(() => generalEnabled = !generalEnabled),
-                      child: Container(
-                        padding: const EdgeInsets.symmetric(
-                          horizontal: 24,
-                          vertical: 12
-                        ),
-                        decoration: BoxDecoration(
-                          color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
-                          borderRadius: BorderRadius.circular(28)
-                        ),
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          children: [
-                            Text(
-                              AppLocalizations.of(context)!.enableSafeSearch,
-                              style: const TextStyle(
-                                fontSize: 18
-                              ),
-                            ),
-                            Switch(
-                              value: generalEnabled, 
-                              onChanged: (value) => setState(() => generalEnabled = value)
-                            )
-                          ],
-                        ),
-                      ),
-                    ),
-                  ),
-                ),
-                CustomCheckboxListTile(
-                  value: bingEnabled, 
-                  onChanged: (value) => setState(() => bingEnabled = value), 
-                  title: "Bing",
-                  padding: const EdgeInsets.only(
-                    top: 8, left: 40, right: 40, bottom: 8
-                  ),
-                  disabled: !generalEnabled,
-                ),
-                CustomCheckboxListTile(
-                  value: duckduckgoEnabled, 
-                  onChanged: (value) => setState(() => duckduckgoEnabled = value), 
-                  title: "DuckDuckGo",
-                  padding: const EdgeInsets.only(
-                    top: 8, left: 40, right: 40, bottom: 8
-                  ),
-                  disabled: !generalEnabled,
-                ),
-                CustomCheckboxListTile(
-                  value: googleEnabled, 
-                  onChanged: (value) => setState(() => googleEnabled = value), 
-                  title: "Google",
-                  padding: const EdgeInsets.only(
-                    top: 8, left: 40, right: 40, bottom: 8
-                  ),
-                  disabled: !generalEnabled,
-                ),
-                CustomCheckboxListTile(
-                  value: pixabayEnabled, 
-                  onChanged: (value) => setState(() => pixabayEnabled = value), 
-                  title: "Pixabay",
-                  padding: const EdgeInsets.only(
-                    top: 8, left: 40, right: 40, bottom: 8
-                  ),
-                  disabled: !generalEnabled,
-                ),
-                CustomCheckboxListTile(
-                  value: yandexEnabled, 
-                  onChanged: (value) => setState(() => yandexEnabled = value), 
-                  title: "Yandex",
-                  padding: const EdgeInsets.only(
-                    top: 8, left: 40, right: 40, bottom: 8
-                  ),
-                  disabled: !generalEnabled,
-                ),
-                CustomCheckboxListTile(
-                  value: youtubeEnabled, 
-                  onChanged: (value) => setState(() => youtubeEnabled = value), 
-                  title: "YouTube",
-                  padding: const EdgeInsets.only(
-                    top: 8, left: 40, right: 40, bottom: 8
-                  ),
-                  disabled: !generalEnabled,
-                ),
-              ],
-            ),
-          );
-
-        case LoadStatus.error:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const Icon(
-                  Icons.error,
-                  color: Colors.red,
-                  size: 50,
-                ),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.safeSearchSettingsNotLoaded,
-                  textAlign: TextAlign.center,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            ),
-          );
-
-
-        default:
-          return const SizedBox();
-      }
-    }
-
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.safeSearchSettings),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         centerTitle: false,
         actions: [
           IconButton(
@@ -277,7 +123,165 @@ class _SafeSearchSettingsScreenState extends State<SafeSearchSettingsScreen> {
           const SizedBox(width: 8)
         ],
       ),
-      body: body(),
+      body: Builder(
+        builder: (context) {
+          switch (statusProvider.loadStatus) {
+            case LoadStatus.loading:
+              return SizedBox(
+                width: double.maxFinite,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const CircularProgressIndicator(),
+                    const SizedBox(height: 30),
+                    Text(
+                      AppLocalizations.of(context)!.loadingSafeSearchSettings,
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 22,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  ],
+                ),
+              );
+              
+            case LoadStatus.loaded: 
+              return RefreshIndicator(
+                onRefresh: requestSafeSearchSettings,
+                child: ListView(
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.only(
+                        top: 16,
+                        left: 16,
+                        right: 16,
+                        bottom: 8
+                      ),
+                      child: Material(
+                        color: Colors.transparent,
+                        borderRadius: BorderRadius.circular(28),
+                        child: InkWell(
+                          borderRadius: BorderRadius.circular(28),
+                          onTap: () => setState(() => generalEnabled = !generalEnabled),
+                          child: Container(
+                            padding: const EdgeInsets.symmetric(
+                              horizontal: 24,
+                              vertical: 12
+                            ),
+                            decoration: BoxDecoration(
+                              color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
+                              borderRadius: BorderRadius.circular(28)
+                            ),
+                            child: Row(
+                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                              children: [
+                                Text(
+                                  AppLocalizations.of(context)!.enableSafeSearch,
+                                  style: const TextStyle(
+                                    fontSize: 18
+                                  ),
+                                ),
+                                Switch(
+                                  value: generalEnabled, 
+                                  onChanged: (value) => setState(() => generalEnabled = value)
+                                )
+                              ],
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                    CustomCheckboxListTile(
+                      value: bingEnabled, 
+                      onChanged: (value) => setState(() => bingEnabled = value), 
+                      title: "Bing",
+                      padding: const EdgeInsets.only(
+                        top: 8, left: 40, right: 40, bottom: 8
+                      ),
+                      disabled: !generalEnabled,
+                    ),
+                    CustomCheckboxListTile(
+                      value: duckduckgoEnabled, 
+                      onChanged: (value) => setState(() => duckduckgoEnabled = value), 
+                      title: "DuckDuckGo",
+                      padding: const EdgeInsets.only(
+                        top: 8, left: 40, right: 40, bottom: 8
+                      ),
+                      disabled: !generalEnabled,
+                    ),
+                    CustomCheckboxListTile(
+                      value: googleEnabled, 
+                      onChanged: (value) => setState(() => googleEnabled = value), 
+                      title: "Google",
+                      padding: const EdgeInsets.only(
+                        top: 8, left: 40, right: 40, bottom: 8
+                      ),
+                      disabled: !generalEnabled,
+                    ),
+                    CustomCheckboxListTile(
+                      value: pixabayEnabled, 
+                      onChanged: (value) => setState(() => pixabayEnabled = value), 
+                      title: "Pixabay",
+                      padding: const EdgeInsets.only(
+                        top: 8, left: 40, right: 40, bottom: 8
+                      ),
+                      disabled: !generalEnabled,
+                    ),
+                    CustomCheckboxListTile(
+                      value: yandexEnabled, 
+                      onChanged: (value) => setState(() => yandexEnabled = value), 
+                      title: "Yandex",
+                      padding: const EdgeInsets.only(
+                        top: 8, left: 40, right: 40, bottom: 8
+                      ),
+                      disabled: !generalEnabled,
+                    ),
+                    CustomCheckboxListTile(
+                      value: youtubeEnabled, 
+                      onChanged: (value) => setState(() => youtubeEnabled = value), 
+                      title: "YouTube",
+                      padding: const EdgeInsets.only(
+                        top: 8, left: 40, right: 40, bottom: 8
+                      ),
+                      disabled: !generalEnabled,
+                    ),
+                  ],
+                ),
+              );
+
+            case LoadStatus.error:
+              return SizedBox(
+                width: double.maxFinite,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const Icon(
+                      Icons.error,
+                      color: Colors.red,
+                      size: 50,
+                    ),
+                    const SizedBox(height: 30),
+                    Text(
+                      AppLocalizations.of(context)!.safeSearchSettingsNotLoaded,
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 22,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  ],
+                ),
+              );
+
+
+            default:
+              return const SizedBox();
+          }
+        },
+      )
     );
   }
 }

lib/screens/settings/server_info/server_info.dart

@@ -1,4 +1,5 @@
 import 'package:adguard_home_manager/constants/enums.dart';
+import 'package:adguard_home_manager/functions/desktop_mode.dart';
 import 'package:animations/animations.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -66,121 +67,123 @@ class _ServerInformationWidgetState extends State<ServerInformationWidget> {
 
   @override
   Widget build(BuildContext context) {
-    Widget generateBody() {
+    final width = MediaQuery.of(context).size.width;
-      switch (serverInfo.loadStatus) {
-        case LoadStatus.loading:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const CircularProgressIndicator(),
-                const SizedBox(height: 30),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 20),
-                  child: Text(
-                    AppLocalizations.of(context)!.loadingServerInfo,
-                    textAlign: TextAlign.center,
-                    style: TextStyle(
-                      fontSize: 22,
-                      color: Theme.of(context).colorScheme.onSurfaceVariant,
-                    ),
-                  ),
-                )
-              ],
-            ),
-          );
-
-        case LoadStatus.loaded:
-          return ListView(
-            children: [
-              CustomListTile(
-                title: AppLocalizations.of(context)!.dnsAddresses,
-                subtitle: AppLocalizations.of(context)!.seeDnsAddresses,
-                onTap: () {
-                  showModal(
-                    context: context, 
-                    builder: (context) => DnsAddressesModal(
-                      dnsAddresses: serverInfo.data!.dnsAddresses
-                    )
-                  );
-                },
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.dnsPort,
-                subtitle: serverInfo.data!.dnsPort.toString(),
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.httpPort,
-                subtitle: serverInfo.data!.httpPort.toString(),
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.protectionEnabled,
-                subtitle: serverInfo.data!.protectionEnabled == true 
-                  ? AppLocalizations.of(context)!.yes
-                  : AppLocalizations.of(context)!.no,
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.dhcpAvailable,
-                subtitle: serverInfo.data!.dhcpAvailable == true 
-                  ? AppLocalizations.of(context)!.yes
-                  : AppLocalizations.of(context)!.no,
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.serverRunning,
-                subtitle: serverInfo.data!.running == true 
-                  ? AppLocalizations.of(context)!.yes
-                  : AppLocalizations.of(context)!.no,
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.serverVersion,
-                subtitle: serverInfo.data!.version,
-              ),
-              CustomListTile(
-                title: AppLocalizations.of(context)!.serverLanguage,
-                subtitle: serverInfo.data!.language,
-              ),
-            ]
-          );
-
-        case LoadStatus.error:
-          return SizedBox(
-            width: double.maxFinite,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const Icon(
-                  Icons.error,
-                  color: Colors.red,
-                  size: 50,
-                ),
-                const SizedBox(height: 30),
-                Text(
-                  AppLocalizations.of(context)!.serverInfoNotLoaded,
-                  textAlign: TextAlign.center,
-                  style: TextStyle(
-                    fontSize: 22,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                )
-              ],
-            ),
-          );
-
-        default:
-          return const SizedBox();
-      }
-    }
-
 
     return Scaffold(
       appBar: AppBar(
         title: Text(AppLocalizations.of(context)!.serverInformation),
+        surfaceTintColor: isDesktop(width) ? Colors.transparent : null,
         centerTitle: false,
       ),
-      body: generateBody()
+      body: Builder(
+        builder: (context) {
+          switch (serverInfo.loadStatus) {
+            case LoadStatus.loading:
+              return SizedBox(
+                width: double.maxFinite,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const CircularProgressIndicator(),
+                    const SizedBox(height: 30),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 20),
+                      child: Text(
+                        AppLocalizations.of(context)!.loadingServerInfo,
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontSize: 22,
+                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                        ),
+                      ),
+                    )
+                  ],
+                ),
+              );
+
+            case LoadStatus.loaded:
+              return ListView(
+                children: [
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.dnsAddresses,
+                    subtitle: AppLocalizations.of(context)!.seeDnsAddresses,
+                    onTap: () {
+                      showModal(
+                        context: context, 
+                        builder: (context) => DnsAddressesModal(
+                          dnsAddresses: serverInfo.data!.dnsAddresses
+                        )
+                      );
+                    },
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.dnsPort,
+                    subtitle: serverInfo.data!.dnsPort.toString(),
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.httpPort,
+                    subtitle: serverInfo.data!.httpPort.toString(),
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.protectionEnabled,
+                    subtitle: serverInfo.data!.protectionEnabled == true 
+                      ? AppLocalizations.of(context)!.yes
+                      : AppLocalizations.of(context)!.no,
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.dhcpAvailable,
+                    subtitle: serverInfo.data!.dhcpAvailable == true 
+                      ? AppLocalizations.of(context)!.yes
+                      : AppLocalizations.of(context)!.no,
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.serverRunning,
+                    subtitle: serverInfo.data!.running == true 
+                      ? AppLocalizations.of(context)!.yes
+                      : AppLocalizations.of(context)!.no,
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.serverVersion,
+                    subtitle: serverInfo.data!.version,
+                  ),
+                  CustomListTile(
+                    title: AppLocalizations.of(context)!.serverLanguage,
+                    subtitle: serverInfo.data!.language,
+                  ),
+                ]
+              );
+
+            case LoadStatus.error:
+              return SizedBox(
+                width: double.maxFinite,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const Icon(
+                      Icons.error,
+                      color: Colors.red,
+                      size: 50,
+                    ),
+                    const SizedBox(height: 30),
+                    Text(
+                      AppLocalizations.of(context)!.serverInfoNotLoaded,
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 22,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  ],
+                ),
+              );
+
+            default:
+              return const SizedBox();
+          }
+        },
+      )
     );
   }
 }

lib/screens/settings/settings.dart

@@ -189,7 +189,9 @@ class SettingsWidget extends StatelessWidget {
                         title: AppLocalizations.of(context)!.dnsSettings,
                         subtitle: AppLocalizations.of(context)!.dnsSettingsDescription,
                         thisItem: 3,
-                        screenToNavigate: const DnsSettings(),
+                        screenToNavigate: DnsSettings(
+                          splitView: twoColumns,
+                        ),
                       ),
                       settingsTile(
                         icon: Icons.security_rounded,