9.0.2

2026-01-13 11:12:23 +01:00 · 2024-05-20 17:24:00 +02:00
parent 7c2caed16c
commit 9f5590d41c
562 changed files with 3303 additions and 156787 deletions
--- a/gui/lib/src/page/abstract/page.dart
+++ b/gui/lib/src/page/abstract/page.dart
@@ -1,6 +1,4 @@
 import 'package:fluent_ui/fluent_ui.dart';
-import 'package:reboot_launcher/src/dialog/abstract/info_bar.dart' as messenger;
-import 'package:reboot_launcher/src/page/abstract/page_setting.dart';
 import 'package:reboot_launcher/src/page/abstract/page_type.dart';

 abstract class RebootPage extends StatefulWidget {
@@ -14,9 +12,7 @@ abstract class RebootPage extends StatefulWidget {

  int get index => type.index;

-  List<PageSetting> get settings;
-
-  bool get hasButton;
+  bool hasButton(String? pageName);

  @override
  RebootPageState createState();
@@ -49,21 +45,9 @@ abstract class RebootPageState<T extends RebootPage> extends State<T> with Autom
    );
  }

-  OverlayEntry showInfoBar(dynamic text, {InfoBarSeverity severity = InfoBarSeverity.info, bool loading = false, Duration? duration = snackbarShortDuration, Widget? action}) => messenger.showInfoBar(
-      text,
-      pageType: widget.type,
-      severity: severity,
-      loading: loading,
-      duration: duration,
-      action: action
-  );
-
  ListView get _listView => ListView.builder(
-    itemCount: settings.length * 2,
-    itemBuilder: (context, index) => index.isEven ? Align(
-      alignment: Alignment.center,
-      child: settings[index ~/ 2],
-    ) : const SizedBox(height: 8.0),
+    itemCount: settings.length,
+    itemBuilder: (context, index) => settings[index],
  );

  @override
--- a/gui/lib/src/page/abstract/page_setting.dart
+++ b/gui/lib/src/page/abstract/page_setting.dart
@@ -1,26 +0,0 @@
-class PageSetting {
-  final String name;
-  final String description;
-  final String? content;
-  final List<PageSetting>? children;
-  final int pageIndex;
-
-  PageSetting(
-      {required this.name,
-      required this.description,
-      this.content,
-      this.children,
-      this.pageIndex = -1});
-
-  PageSetting withPageIndex(int pageIndex) => this.pageIndex != -1
-      ? this
-      : PageSetting(
-          name: name,
-          description: description,
-          content: content,
-          children: children,
-          pageIndex: pageIndex);
-
-  @override
-  String toString() => "$name: $description";
-}
--- a/gui/lib/src/page/abstract/page_suggestion.dart
+++ b/gui/lib/src/page/abstract/page_suggestion.dart
@@ -0,0 +1,13 @@
+class PageSuggestion {
+  final String name;
+  final String description;
+  final String? content;
+  final int pageIndex;
+  final String? routeName;
+
+  PageSuggestion({required this.name,
+        required this.description,
+        this.content,
+        required this.pageIndex,
+        this.routeName});
+}
--- a/gui/lib/src/page/implementation/authenticator_page.dart
+++ b/gui/lib/src/page/implementation/authenticator_page.dart
@@ -1,15 +1,16 @@
-import 'package:fluent_ui/fluent_ui.dart';
+import 'package:fluent_ui/fluent_ui.dart' as fluentUi show FluentIcons;
+import 'package:fluent_ui/fluent_ui.dart' hide FluentIcons;
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/services.dart';
 import 'package:get/get.dart';
 import 'package:reboot_common/common.dart';
 import 'package:reboot_launcher/src/controller/authenticator_controller.dart';
 import 'package:reboot_launcher/src/page/abstract/page.dart';
-import 'package:reboot_launcher/src/page/abstract/page_setting.dart';
 import 'package:reboot_launcher/src/page/abstract/page_type.dart';
 import 'package:reboot_launcher/src/util/translations.dart';
-import 'package:reboot_launcher/src/widget/common/setting_tile.dart';
-import 'package:reboot_launcher/src/widget/server/start_button.dart';
-import 'package:reboot_launcher/src/widget/server/type_selector.dart';
+import 'package:reboot_launcher/src/widget/server_start_button.dart';
+import 'package:reboot_launcher/src/widget/server_type_selector.dart';
+import 'package:reboot_launcher/src/widget/setting_tile.dart';
 import 'package:url_launcher/url_launcher.dart';

 import '../../dialog/implementation/data.dart';
@@ -27,39 +28,7 @@ class AuthenticatorPage extends RebootPage {
  RebootPageType get type => RebootPageType.authenticator;

  @override
-  bool get hasButton => true;
-
-  @override
-  List<PageSetting> get settings => [
-    PageSetting(
-        name: translations.authenticatorConfigurationName,
-        description: translations.authenticatorConfigurationDescription,
-        children: [
-          PageSetting(
-              name: translations.authenticatorConfigurationHostName,
-              description: translations.authenticatorConfigurationHostDescription
-          ),
-          PageSetting(
-              name: translations.authenticatorConfigurationPortName,
-              description: translations.authenticatorConfigurationPortDescription
-          ),
-          PageSetting(
-              name: translations.authenticatorConfigurationDetachedName,
-              description: translations.authenticatorConfigurationDetachedDescription
-          )
-        ]
-    ),
-    PageSetting(
-        name: translations.authenticatorInstallationDirectoryName,
-        description: translations.authenticatorInstallationDirectoryDescription,
-        content: translations.authenticatorInstallationDirectoryContent
-    ),
-    PageSetting(
-        name: translations.authenticatorResetDefaultsName,
-        description: translations.authenticatorResetDefaultsDescription,
-        content: translations.authenticatorResetDefaultsContent
-    )
-  ];
+  bool hasButton(String? pageName) => pageName == null;

  @override
  RebootPageState<AuthenticatorPage> createState() => _AuthenticatorPageState();
@@ -70,86 +39,126 @@ class _AuthenticatorPageState extends RebootPageState<AuthenticatorPage> {

  @override
  List<Widget> get settings => [
-    _configuration,
+    _type,
+    _hostName,
+    _port,
+    _detached,
    _installationDirectory,
    _resetDefaults
  ];

-  @override
-  Widget get button => const ServerButton(
-      authenticator: true
-  );
+  Widget get _hostName => Obx(() {
+    if(_authenticatorController.type.value != ServerType.remote) {
+      return const SizedBox.shrink();
+    }
+
+    return SettingTile(
+        icon: Icon(
+            FluentIcons.globe_24_regular
+        ),
+        title: Text(translations.authenticatorConfigurationHostName),
+        subtitle: Text(translations.authenticatorConfigurationHostDescription),
+        content: TextFormBox(
+            placeholder: translations.authenticatorConfigurationHostName,
+            controller: _authenticatorController.host
+        )
+    );
+  });
+
+  Widget get _port => Obx(() {
+    if(_authenticatorController.type.value == ServerType.embedded) {
+      return const SizedBox.shrink();
+    }
+
+    return SettingTile(
+        icon: Icon(
+            fluentUi.FluentIcons.number_field
+        ),
+        title: Text(translations.authenticatorConfigurationPortName),
+        subtitle: Text(translations.authenticatorConfigurationPortDescription),
+        content: TextFormBox(
+            placeholder: translations.authenticatorConfigurationPortName,
+            controller: _authenticatorController.port,
+            keyboardType: TextInputType.number,
+            inputFormatters: [
+              FilteringTextInputFormatter.digitsOnly
+            ]
+        )
+    );
+  });
+
+  Widget get _detached => Obx(() {
+    if(_authenticatorController.type.value != ServerType.embedded) {
+      return const SizedBox.shrink();
+    }
+
+    return SettingTile(
+        icon: Icon(
+            FluentIcons.developer_board_24_regular
+        ),
+        title: Text(translations.authenticatorConfigurationDetachedName),
+        subtitle: Text(translations.authenticatorConfigurationDetachedDescription),
+        contentWidth: null,
+        content: Row(
+          children: [
+            Text(
+                _authenticatorController.detached.value ? translations.on : translations.off
+            ),
+            const SizedBox(
+                width: 16.0
+            ),
+            ToggleSwitch(
+                checked: _authenticatorController.detached(),
+                onChanged: (value) => _authenticatorController.detached.value = value
+            ),
+          ],
+        )
+    );
+  });

  SettingTile get _resetDefaults => SettingTile(
-      title: translations.authenticatorResetDefaultsName,
-      subtitle: translations.authenticatorResetDefaultsDescription,
+      icon: Icon(
+          FluentIcons.arrow_reset_24_regular
+      ),
+      title: Text(translations.authenticatorResetDefaultsName),
+      subtitle: Text(translations.authenticatorResetDefaultsDescription),
      content: Button(
        onPressed: () => showResetDialog(_authenticatorController.reset),
        child: Text(translations.authenticatorResetDefaultsContent),
      )
  );

-  SettingTile get _installationDirectory => SettingTile(
-      title: translations.authenticatorInstallationDirectoryName,
-      subtitle: translations.authenticatorInstallationDirectoryDescription,
-      content: Button(
-          onPressed: () => launchUrl(authenticatorDirectory.uri),
-          child: Text(translations.authenticatorInstallationDirectoryContent)
+  Widget get _installationDirectory => Obx(() {
+    if(_authenticatorController.type.value != ServerType.embedded) {
+      return const SizedBox.shrink();
+    }
+
+    return SettingTile(
+        icon: Icon(
+            FluentIcons.folder_24_regular
+        ),
+        title: Text(translations.authenticatorInstallationDirectoryName),
+        subtitle: Text(translations.authenticatorInstallationDirectoryDescription),
+        content: Button(
+            onPressed: () => launchUrl(authenticatorDirectory.uri),
+            child: Text(translations.authenticatorInstallationDirectoryContent)
+        )
+    );
+  });
+
+  Widget get _type => SettingTile(
+      icon: Icon(
+          FluentIcons.password_24_regular
+      ),
+      title: Text(translations.authenticatorTypeName),
+      subtitle: Text(translations.authenticatorTypeDescription),
+      content: const ServerTypeSelector(
+          authenticator: true
      )
  );

-  Widget get _configuration => Obx(() => SettingTile(
-    title: translations.authenticatorConfigurationName,
-    subtitle: translations.authenticatorConfigurationDescription,
-    content: const ServerTypeSelector(
-        authenticator: true
-    ),
-    expandedContent: [
-      if(_authenticatorController.type.value == ServerType.remote)
-        SettingTile(
-            title: translations.authenticatorConfigurationHostName,
-            subtitle: translations.authenticatorConfigurationHostDescription,
-            isChild: true,
-            content: TextFormBox(
-                placeholder: translations.authenticatorConfigurationHostName,
-                controller: _authenticatorController.host
-            )
-        ),
-      if(_authenticatorController.type.value != ServerType.embedded)
-        SettingTile(
-            title: translations.authenticatorConfigurationPortName,
-            subtitle: translations.authenticatorConfigurationPortDescription,
-            isChild: true,
-            content: TextFormBox(
-                placeholder: translations.authenticatorConfigurationPortName,
-                controller: _authenticatorController.port,
-                keyboardType: TextInputType.number,
-                inputFormatters: [
-                  FilteringTextInputFormatter.digitsOnly
-                ]
-            )
-        ),
-      if(_authenticatorController.type.value == ServerType.embedded)
-        SettingTile(
-            title: translations.authenticatorConfigurationDetachedName,
-            subtitle: translations.authenticatorConfigurationDetachedDescription,
-            contentWidth: null,
-            isChild: true,
-            content: Obx(() => Row(
-              children: [
-                Text(
-                    _authenticatorController.detached.value ? translations.on : translations.off
-                ),
-                const SizedBox(
-                    width: 16.0
-                ),
-                ToggleSwitch(
-                    checked: _authenticatorController.detached(),
-                    onChanged: (value) => _authenticatorController.detached.value = value
-                ),
-              ],
-            ))
-        )
-    ],
-  ));
+  @override
+  Widget get button => const ServerButton(
+      authenticator: true
+  );
 }
--- a/gui/lib/src/page/implementation/home_page.dart
+++ b/gui/lib/src/page/implementation/home_page.dart
@@ -1,19 +1,25 @@
-import 'dart:collection';
+import 'dart:async';
 import 'dart:ui';

 import 'package:bitsdojo_window/bitsdojo_window.dart';
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart' show MaterialPage;
 import 'package:get/get.dart';
+import 'package:reboot_common/common.dart';
 import 'package:reboot_launcher/src/controller/settings_controller.dart';
+import 'package:reboot_launcher/src/controller/update_controller.dart';
+import 'package:reboot_launcher/src/dialog/abstract/dialog.dart';
 import 'package:reboot_launcher/src/dialog/abstract/info_bar.dart';
+import 'package:reboot_launcher/src/dialog/implementation/dll.dart';
 import 'package:reboot_launcher/src/page/abstract/page.dart';
-import 'package:reboot_launcher/src/page/abstract/page_setting.dart';
+import 'package:reboot_launcher/src/page/abstract/page_suggestion.dart';
 import 'package:reboot_launcher/src/page/pages.dart';
+import 'package:reboot_launcher/src/util/dll.dart';
+import 'package:reboot_launcher/src/util/os.dart';
 import 'package:reboot_launcher/src/util/translations.dart';
-import 'package:reboot_launcher/src/widget/common/setting_tile.dart';
-import 'package:reboot_launcher/src/widget/home/profile.dart';
-import 'package:reboot_launcher/src/widget/os/title_bar.dart';
+import 'package:reboot_launcher/src/widget/profile_tile.dart';
+import 'package:reboot_launcher/src/widget/title_bar.dart';
 import 'package:window_manager/window_manager.dart';

 class HomePage extends StatefulWidget {
@@ -27,12 +33,11 @@ class _HomePageState extends State<HomePage> with WindowListener, AutomaticKeepA
  static const double _kDefaultPadding = 12.0;

  final SettingsController _settingsController = Get.find<SettingsController>();
+  final UpdateController _updateController = Get.find<UpdateController>();
  final GlobalKey _searchKey = GlobalKey();
  final FocusNode _searchFocusNode = FocusNode();
  final TextEditingController _searchController = TextEditingController();
  final RxBool _focused = RxBool(true);
-  final Queue<int> _pagesStack = Queue();
-  bool _hitBack = false;

  @override
  bool get wantKeepAlive => true;
@@ -42,21 +47,17 @@ class _HomePageState extends State<HomePage> with WindowListener, AutomaticKeepA
    windowManager.addListener(this);
    var lastValue = pageIndex.value;
    pageIndex.listen((value) {
-      if(_hitBack) {
-        _hitBack = false;
-        return;
-      }
-
-      if(value == lastValue) {
-        return;
-      }
-
-      _pagesStack.add(lastValue);
      WidgetsBinding.instance.addPostFrameCallback((_) {
        restoreMessage(value, lastValue);
        lastValue = value;
      });
    });
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _updateController.update();
+      watchDlls().listen((filePath) => showDllDeletedDialog(() {
+        downloadCriticalDllInteractive(filePath);
+      }));
+    });
    super.initState();
  }

@@ -64,6 +65,7 @@ class _HomePageState extends State<HomePage> with WindowListener, AutomaticKeepA
  void dispose() {
    _searchFocusNode.dispose();
    _searchController.dispose();
+    pagesController.close();
    windowManager.removeListener(this);
    super.dispose();
  }
@@ -103,27 +105,17 @@ class _HomePageState extends State<HomePage> with WindowListener, AutomaticKeepA
  @override
  Widget build(BuildContext context) {
    super.build(context);
-    return Obx(() {
-      _settingsController.language.value;
-      loadTranslations(context);
-      return NavigationPaneTheme(
+    _settingsController.language.value;
+    loadTranslations(context);
+    return Obx(() => NavigationPaneTheme(
        data: NavigationPaneThemeData(
          backgroundColor: FluentTheme.of(context).micaBackgroundColor.withOpacity(0.93),
        ),
        child: NavigationView(
-            paneBodyBuilder: (pane, body) => Navigator(
-              onPopPage: (page, data) => false,
-              pages: [
-                MaterialPage(
-                    child: Padding(
-                        padding: const EdgeInsets.all(_kDefaultPadding),
-                        child: SizedBox(
-                            key: pageKey,
-                            child: body
-                        )
-                    )
-                )
-              ],
+            paneBodyBuilder: (pane, body) => _PaneBody(
+                padding: _kDefaultPadding,
+                controller: pagesController,
+                body: body
            ),
            appBar: NavigationAppBar(
              height: 32,
@@ -133,43 +125,64 @@ class _HomePageState extends State<HomePage> with WindowListener, AutomaticKeepA
              automaticallyImplyLeading: false,
            ),
            pane: NavigationPane(
-              key: appKey,
-              selected: pageIndex.value,
-              onChanged: (index) => pageIndex.value = index,
-              menuButton: const SizedBox(),
-              displayMode: PaneDisplayMode.open,
-              items: _items,
-              header: const ProfileWidget(),
-              autoSuggestBox: _autoSuggestBox,
-              indicator: const StickyNavigationIndicator(
-                duration: Duration(milliseconds: 500),
-                curve: Curves.easeOut,
-                  indicatorSize: 3.25
-              )
+                selected: pageIndex.value,
+                onChanged: (index) {
+                  final lastPageIndex = pageIndex.value;
+                  if(lastPageIndex != index) {
+                    pageIndex.value = index;
+                  }else if(pageStack.isNotEmpty) {
+                    Navigator.of(pageKey.currentContext!).pop();
+                    final element = pageStack.removeLast();
+                    appStack.remove(element);
+                    pagesController.add(null);
+                  }
+                },
+                menuButton: const SizedBox(),
+                displayMode: PaneDisplayMode.open,
+                items: _items,
+                customPane: _CustomPane(),
+                header: const ProfileWidget(),
+                autoSuggestBox: _autoSuggestBox,
+                indicator: const StickyNavigationIndicator(
+                    duration: Duration(milliseconds: 500),
+                    curve: Curves.easeOut,
+                    indicatorSize: 3.25
+                )
            ),
            contentShape: const RoundedRectangleBorder(),
            onOpenSearch: () => _searchFocusNode.requestFocus(),
            transitionBuilder: (child, animation) => child
        )
+    ),
    );
-    });
  }

-  Widget get _backButton => Obx(() {
-    pageIndex.value;
-    return Button(
-      style: ButtonStyle(
-          padding: ButtonState.all(const EdgeInsets.only(top: 6.0)),
-          backgroundColor: ButtonState.all(Colors.transparent),
-          border: ButtonState.all(const BorderSide(color: Colors.transparent))
-      ),
-      onPressed: _pagesStack.isEmpty ? null : () {
-        _hitBack = true;
-        pageIndex.value = _pagesStack.removeLast();
-      },
-      child: const Icon(FluentIcons.back, size: 12.0),
-    );
-  });
+  Widget get _backButton => StreamBuilder(
+      stream: pagesController.stream,
+      builder: (context, _) => Button(
+          style: ButtonStyle(
+              padding: ButtonState.all(const EdgeInsets.only(top: 6.0)),
+              backgroundColor: ButtonState.all(Colors.transparent),
+              shape: ButtonState.all(Border())
+          ),
+          onPressed: appStack.isEmpty && !inDialog ? null : () {
+            if(inDialog) {
+              Navigator.of(appKey.currentContext!).pop();
+            }else {
+              final lastPage = appStack.removeLast();
+              pageStack.remove(lastPage);
+              if (lastPage is int) {
+                hitBack = true;
+                pageIndex.value = lastPage;
+              } else {
+                Navigator.of(pageKey.currentContext!).pop();
+              }
+            }
+            pagesController.add(null);
+          },
+          child: const Icon(FluentIcons.back, size: 12.0),
+        )
+  );

  GestureDetector get _draggableArea => GestureDetector(
      onDoubleTap: appWindow.maximizeOrRestore,
@@ -178,34 +191,28 @@ class _HomePageState extends State<HomePage> with WindowListener, AutomaticKeepA
  );

  Widget get _autoSuggestBox => Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 8.0),
-      child: AutoSuggestBox<PageSetting>(
+      padding: const EdgeInsets.symmetric(
+          horizontal: 16.0,
+          vertical: 8.0
+      ),
+      child: AutoSuggestBox<PageSuggestion>(
        key: _searchKey,
        controller: _searchController,
        placeholder: translations.find,
        focusNode: _searchFocusNode,
        selectionHeightStyle: BoxHeightStyle.max,
-        itemBuilder: (context, item) => Wrap(
-          children: [
-            ListTile(
-                onPressed: () {
-                  pageIndex.value = item.value.pageIndex;
-                  _searchController.clear();
-                  _searchFocusNode.unfocus();
-                },
-                leading: item.child,
-                title: Text(
-                    item.value.name,
-                    overflow: TextOverflow.clip,
-                    maxLines: 1
-                ),
-                subtitle: item.value.description.isNotEmpty ? Text(
-                    item.value.description,
-                    overflow: TextOverflow.clip,
-                    maxLines: 1
-                ) : null
-            ),
-          ],
+        itemBuilder: (context, item) => ListTile(
+            onPressed: () {
+              pageIndex.value = item.value.pageIndex;
+              _searchController.clear();
+              _searchFocusNode.unfocus();
+            },
+            leading: item.child,
+            title: Text(
+                item.value.name,
+                overflow: TextOverflow.clip,
+                maxLines: 1
+            )
        ),
        items: _suggestedItems,
        autofocus: true,
@@ -221,36 +228,22 @@ class _HomePageState extends State<HomePage> with WindowListener, AutomaticKeepA
      )
  );

-  List<AutoSuggestBoxItem<PageSetting>> get _suggestedItems => pages.mapMany((page) {
-    var icon = SizedBox.square(
+  List<AutoSuggestBoxItem<PageSuggestion>> get _suggestedItems => pages.mapMany((page) {
+    final pageIcon = SizedBox.square(
        dimension: 24,
        child: Image.asset(page.iconAsset)
    );
-    var outerResults = <AutoSuggestBoxItem<PageSetting>>[];
-    outerResults.add(AutoSuggestBoxItem(
-        value: PageSetting(
+    final results = <AutoSuggestBoxItem<PageSuggestion>>[];
+    results.add(AutoSuggestBoxItem(
+        value: PageSuggestion(
            name: page.name,
            description: "",
            pageIndex: page.index
        ),
        label: page.name,
-        child: icon
+        child: pageIcon
    ));
-    outerResults.addAll(page.settings.mapMany((setting) {
-      var results = <AutoSuggestBoxItem<PageSetting>>[];
-      results.add(AutoSuggestBoxItem(
-          value: setting.withPageIndex(page.index),
-          label: setting.toString(),
-          child: icon
-      ));
-      setting.children?.forEach((childSetting) => results.add(AutoSuggestBoxItem(
-          value: childSetting.withPageIndex(page.index),
-          label: childSetting.toString(),
-          child: icon
-      )));
-      return results;
-    }).toList());
-    return outerResults;
+    return results;
  }).toList();

  List<NavigationPaneItem> get _items => pages.map((page) => _createItem(page)).toList();
@@ -263,4 +256,252 @@ class _HomePageState extends State<HomePage> with WindowListener, AutomaticKeepA
      ),
      body: page
  );
+}
+
+class _PaneBody extends StatefulWidget {
+  const _PaneBody({
+    required this.padding,
+    required this.controller,
+    required this.body
+  });
+
+  final double padding;
+  final StreamController<void> controller;
+  final Widget? body;
+
+  @override
+  State<_PaneBody> createState() => _PaneBodyState();
+}
+
+class _PaneBodyState extends State<_PaneBody> with AutomaticKeepAliveClientMixin {
+  final SettingsController _settingsController = Get.find<SettingsController>();
+  final PageController _pageController = PageController(keepPage: true);
+
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  void initState() {
+    super.initState();
+    pageIndex.listen((index) => _pageController.jumpToPage(index));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    final themeMode = _settingsController.themeMode.value;
+    final inactiveColor = themeMode == ThemeMode.dark
+        || (themeMode == ThemeMode.system && isDarkMode) ? Colors.grey[60] : Colors.grey[100];
+    return Padding(
+        padding: EdgeInsets.only(
+            left: widget.padding,
+            right: widget.padding * 2,
+            top: widget.padding,
+            bottom: widget.padding * 2
+        ),
+        child: Column(
+          children: [
+            Expanded(
+              child: ConstrainedBox(
+                constraints: BoxConstraints(
+                    maxWidth: 1000
+                ),
+                child: Center(
+                  child: Column(
+                    children: [
+                      Align(
+                        alignment: Alignment.centerLeft,
+                        child: StreamBuilder(
+                            stream: widget.controller.stream,
+                            builder: (context, _) {
+                              final elements = <TextSpan>[];
+                              elements.add(TextSpan(
+                                  text: pages[pageIndex.value].name,
+                                  recognizer: pageStack.isNotEmpty ? (TapGestureRecognizer()..onTap = () {
+                                    for(var i = 0; i < pageStack.length; i++) {
+                                      Navigator.of(pageKey.currentContext!).pop();
+                                      final element = pageStack.removeLast();
+                                      appStack.remove(element);
+                                    }
+
+                                    widget.controller.add(null);
+                                  }) : null,
+                                  style: TextStyle(
+                                      color: pageStack.isNotEmpty ? inactiveColor : null
+                                  )
+                              ));
+                              for(var i = pageStack.length - 1; i >= 0; i--) {
+                                var innerPage = pageStack.elementAt(i);
+                                innerPage = innerPage.substring(innerPage.indexOf("_") + 1);
+                                elements.add(TextSpan(
+                                    text: " > ",
+                                    style: TextStyle(
+                                        color: inactiveColor
+                                    )
+                                ));
+                                elements.add(TextSpan(
+                                    text: innerPage,
+                                    recognizer: i == pageStack.length - 1 ? null : (TapGestureRecognizer()..onTap = () {
+                                      for(var j = 0; j < i - 1; j++) {
+                                        Navigator.of(pageKey.currentContext!).pop();
+                                        final element = pageStack.removeLast();
+                                        appStack.remove(element);
+                                      }
+                                      widget.controller.add(null);
+                                    }),
+                                    style: TextStyle(
+                                        color: i == pageStack.length - 1 ? null : inactiveColor
+                                    )
+                                ));
+                              }
+
+                              return Text.rich(
+                                TextSpan(
+                                    children: elements
+                                ),
+                                style: TextStyle(
+                                    fontSize: 32.0,
+                                    fontWeight: FontWeight.w600
+                                ),
+                              );
+                            }
+                        ),
+                      ),
+                      const SizedBox(height: 24.0),
+                      Expanded(
+                        child: PageView.builder(
+                          controller: _pageController,
+                            itemBuilder: (context, index) => Navigator(
+                              onPopPage: (page, data) => true,
+                              observers: [
+                                _NestedPageObserver(
+                                    onChanged: (routeName) {
+                                      if(routeName != null) {
+                                        pageIndex.refresh();
+                                        addSubPageToStack(routeName);
+                                        widget.controller.add(null);
+                                      }
+                                    }
+                                )
+                              ],
+                              pages: [
+                                MaterialPage(
+                                    child: KeyedSubtree(
+                                        key: getPageKeyByIndex(index),
+                                        child: widget.body ?? const SizedBox.shrink()
+                                    )
+                                )
+                              ],
+                            ),
+                            itemCount: pages.length
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            )
+          ],
+        )
+    );
+  }
+}
+
+class _CustomPane extends NavigationPaneWidget {
+  @override
+  Widget build(BuildContext context, NavigationPaneWidgetData data) => Column(
+    crossAxisAlignment: CrossAxisAlignment.start,
+    children: [
+      data.appBar,
+      Expanded(
+        child: Navigator(
+          key: appKey,
+          onPopPage: (page, data) => false,
+          pages: [
+            MaterialPage(
+                child: Row(
+                  children: [
+                    SizedBox(
+                      width: 310,
+                      child: Column(
+                        mainAxisSize: MainAxisSize.max,
+                        children: [
+                          data.pane.header ?? const SizedBox.shrink(),
+                          data.pane.autoSuggestBox ?? const SizedBox.shrink(),
+                          const SizedBox(height: 12.0),
+                          Expanded(
+                            child: Padding(
+                              padding: const EdgeInsets.symmetric(
+                                  horizontal: 16.0
+                              ),
+                              child: Scrollbar(
+                                controller: data.scrollController,
+                                child: ListView.separated(
+                                  controller: data.scrollController,
+                                  itemCount: data.pane.items.length,
+                                  separatorBuilder: (context, index) => const SizedBox(
+                                      height: 4.0
+                                  ),
+                                  itemBuilder: (context, index) {
+                                    final item = data.pane.items[index] as PaneItem;
+                                    return HoverButton(
+                                      onPressed: () => data.pane.onChanged?.call(index),
+                                      builder: (context, states) => Container(
+                                        height: 36,
+                                        decoration: BoxDecoration(
+                                            color: ButtonThemeData.uncheckedInputColor(
+                                              FluentTheme.of(context),
+                                              item == data.pane.selectedItem ? {ButtonStates.hovering} : states,
+                                              transparentWhenNone: true,
+                                            ),
+                                            borderRadius: BorderRadius.all(Radius.circular(6.0))
+                                        ),
+                                        child: Padding(
+                                          padding: const EdgeInsets.symmetric(
+                                              horizontal: 8.0
+                                          ),
+                                          child: Row(
+                                            children: [
+                                              data.pane.indicator ?? const SizedBox.shrink(),
+                                              item.icon,
+                                              const SizedBox(width: 12.0),
+                                              item.title ?? const SizedBox.shrink()
+                                            ],
+                                          ),
+                                        ),
+                                      ),
+                                    );
+                                  },
+                                ),
+                              ),
+                            ),
+                          )
+                        ],
+                      ),
+                    ),
+                    Expanded(
+                        child: data.content
+                    )
+                  ],
+                )
+            )
+          ],
+        ),
+
+      )
+    ],
+  );
+}
+
+class _NestedPageObserver extends NavigatorObserver {
+  final void Function(String?) onChanged;
+
+  _NestedPageObserver({required this.onChanged});
+
+  @override
+  void didPush(Route route, Route? previousRoute) {
+    if(previousRoute != null) {
+      WidgetsBinding.instance.addPostFrameCallback((_) => onChanged(route.settings.name));
+    }
+  }
 }
--- a/gui/lib/src/page/implementation/info_page.dart
+++ b/gui/lib/src/page/implementation/info_page.dart
@@ -1,15 +1,11 @@
-import 'dart:convert';
-
-import 'package:fluent_ui/fluent_ui.dart';
-import 'package:get/get.dart';
-import 'package:markdown_widget/config/markdown_generator.dart';
-import 'package:reboot_launcher/src/controller/info_controller.dart';
+import 'package:fluent_ui/fluent_ui.dart' hide FluentIcons;
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
+import 'package:flutter/material.dart';
 import 'package:reboot_launcher/src/page/abstract/page.dart';
-import 'package:reboot_launcher/src/page/abstract/page_setting.dart';
 import 'package:reboot_launcher/src/page/abstract/page_type.dart';
 import 'package:reboot_launcher/src/util/translations.dart';
-import 'package:reboot_launcher/src/widget/common/setting_tile.dart';
-import 'package:http/http.dart' as http;
+import 'package:reboot_launcher/src/util/tutorial.dart';
+import 'package:reboot_launcher/src/widget/setting_tile.dart';

 class InfoPage extends RebootPage {
  const InfoPage({Key? key}) : super(key: key);
@@ -24,105 +20,68 @@ class InfoPage extends RebootPage {
  String get iconAsset => "assets/images/info.png";

  @override
-  bool get hasButton => false;
+  bool hasButton(String? routeName) => false;

  @override
  RebootPageType get type => RebootPageType.info;
-
-  @override
-  List<PageSetting> get settings => [];
 }

 class _InfoPageState extends RebootPageState<InfoPage> {
-  final InfoController _infoController = Get.find<InfoController>();
-  late Future<List<String>> _fetchFuture;
-  late double _height;
-
  @override
-  void initState() {
-    _fetchFuture = _infoController.links != null
-        ? Future.value(_infoController.links)
-        : _initQuery();
-    super.initState();
-  }
+  List<SettingTile> get settings => [
+    _documentation,
+    _discord,
+    _youtubeTutorial,
+    _reportBug
+  ];

-  Future<List<String>> _initQuery() async {
-    var response = await http.get(Uri.parse("https://api.github.com/repos/Auties00/reboot_launcher/contents/documentation/$currentLocale"));
-    List results = jsonDecode(response.body);
-    results.sort((first, second) {
-      var firstIndex = int.parse(first["name"][0]);
-      var secondIndex = int.parse(second["name"][0]);
-      return firstIndex > secondIndex ? 1 : firstIndex == secondIndex ? 0 : -1;
-    });
-    List<String> parsed = results.map<String>((entry) => entry["download_url"] as String).toList();
-    return _infoController.links = parsed;
-  }
-
-  Future<String> _readLink(String url) async {
-    var known = _infoController.linksData[url];
-    if(known != null) {
-      return known;
-    }
-
-    var response = await http.get(Uri.parse(url));
-    return _infoController.linksData[url] = response.body;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    super.build(context);
-    _height = MediaQuery.of(context).size.height / 3;
-    return FutureBuilder(
-      future: _fetchFuture,
-      builder: (context, linksSnapshot) {
-        var linksData = linksSnapshot.data;
-        if(linksData == null) {
-          return const Center(
-            child: ProgressRing()
-          );
-        }
-
-        return Column(
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            Expanded(
-              child: ConstrainedBox(
-                constraints: const BoxConstraints(
-                    maxWidth: 1000
-                ),
-                child: ListView.separated(
-                    shrinkWrap: true,
-                    separatorBuilder: (context, index) => const SizedBox(
-                        height: 16.0
-                    ),
-                    itemBuilder: (context, index) => Card(
-                        borderRadius: const BorderRadius.vertical(top: Radius.circular(4.0)),
-                        child: _buildBody(linksData, index)
-                    ),
-                    itemCount: linksData.length
-                ),
-              ),
-            )
-          ],
-        );
-      }
-    );
-  }
-
-  Widget _buildBody(List<String> linksData, int index) => FutureBuilder(
-      future: _readLink(linksData[index]),
-      builder: (context, linkDataSnapshot) {
-        var markdownGenerator = MarkdownGenerator();
-        var result = markdownGenerator.buildWidgets(linkDataSnapshot.data ?? "");
-        return Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: result
-        );
-      }
+  SettingTile get _reportBug => SettingTile(
+      icon: Icon(
+          FluentIcons.bug_24_regular
+      ),
+      title: Text(translations.settingsUtilsBugReportName),
+      subtitle: Text(translations.settingsUtilsBugReportSubtitle)       ,
+      content: Button(
+        onPressed: openBugReport,
+        child: Text(translations.settingsUtilsBugReportContent),
+      )
  );

-  @override
-  List<SettingTile> get settings => [];
+  SettingTile get _youtubeTutorial => SettingTile(
+      icon: Icon(
+          FluentIcons.video_24_regular
+      ),
+      title: Text(translations.infoVideoName),
+      subtitle: Text(translations.infoVideoDescription),
+      content: Button(
+          onPressed: openYoutubeTutorial,
+          child: Text(translations.infoVideoContent)
+      )
+  );
+
+  SettingTile get _discord => SettingTile(
+      icon: Icon(
+          Icons.discord_outlined
+      ),
+      title: Text(translations.infoDiscordName),
+      subtitle: Text(translations.infoDiscordDescription),
+      content: Button(
+          onPressed: openDiscordServer,
+          child: Text(translations.infoDiscordContent)
+      )
+  );
+
+  SettingTile get _documentation => SettingTile(
+      icon: Icon(
+          FluentIcons.document_24_regular
+      ),
+      title: Text(translations.infoDocumentationName),
+      subtitle: Text(translations.infoDocumentationDescription),
+      content: Button(
+          onPressed: openTutorials,
+          child: Text(translations.infoDocumentationContent)
+      )
+  );

  @override
  Widget? get button => null;
--- a/gui/lib/src/page/implementation/matchmaker_page.dart
+++ b/gui/lib/src/page/implementation/matchmaker_page.dart
@@ -1,16 +1,17 @@
-import 'package:fluent_ui/fluent_ui.dart';
+import 'package:fluent_ui/fluent_ui.dart' as fluentUi show FluentIcons;
+import 'package:fluent_ui/fluent_ui.dart' hide FluentIcons;
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/services.dart';
 import 'package:get/get.dart';
 import 'package:reboot_common/common.dart';
 import 'package:reboot_launcher/src/controller/matchmaker_controller.dart';
 import 'package:reboot_launcher/src/dialog/implementation/data.dart';
 import 'package:reboot_launcher/src/page/abstract/page.dart';
-import 'package:reboot_launcher/src/page/abstract/page_setting.dart';
 import 'package:reboot_launcher/src/page/abstract/page_type.dart';
 import 'package:reboot_launcher/src/util/translations.dart';
-import 'package:reboot_launcher/src/widget/common/setting_tile.dart';
-import 'package:reboot_launcher/src/widget/server/start_button.dart';
-import 'package:reboot_launcher/src/widget/server/type_selector.dart';
+import 'package:reboot_launcher/src/widget/server_start_button.dart';
+import 'package:reboot_launcher/src/widget/server_type_selector.dart';
+import 'package:reboot_launcher/src/widget/setting_tile.dart';
 import 'package:url_launcher/url_launcher.dart';

 class MatchmakerPage extends RebootPage {
@@ -26,42 +27,10 @@ class MatchmakerPage extends RebootPage {
  String get iconAsset => "assets/images/matchmaker.png";

  @override
-  bool get hasButton => true;
+  bool hasButton(String? pageName) => pageName == null;

  @override
  RebootPageType get type => RebootPageType.matchmaker;
-
-  @override
-  List<PageSetting> get settings => [
-    PageSetting(
-        name: translations.matchmakerConfigurationName,
-        description: translations.matchmakerConfigurationDescription,
-        children: [
-          PageSetting(
-              name: translations.matchmakerConfigurationHostName,
-              description: translations.matchmakerConfigurationHostDescription
-          ),
-          PageSetting(
-              name: translations.matchmakerConfigurationPortName,
-              description: translations.matchmakerConfigurationPortDescription
-          ),
-          PageSetting(
-              name: translations.matchmakerConfigurationDetachedName,
-              description: translations.matchmakerConfigurationDetachedDescription
-          )
-        ]
-    ),
-    PageSetting(
-        name: translations.matchmakerInstallationDirectoryName,
-        description: translations.matchmakerInstallationDirectoryDescription,
-        content: translations.matchmakerInstallationDirectoryContent
-    ),
-    PageSetting(
-        name: translations.matchmakerResetDefaultsName,
-        description: translations.matchmakerResetDefaultsDescription,
-        content: translations.matchmakerResetDefaultsContent
-    )
-  ];
 }

 class _MatchmakerPageState extends RebootPageState<MatchmakerPage> {
@@ -74,89 +43,138 @@ class _MatchmakerPageState extends RebootPageState<MatchmakerPage> {

  @override
  List<Widget> get settings => [
-    _configuration,
+    _type,
+    _hostName,
+    _port,
+    _gameServerAddress,
+    _detached,
    _installationDirectory,
    _resetDefaults
  ];

-  Widget get _configuration => Obx(() => SettingTile(
-      title: translations.matchmakerConfigurationName,
-      subtitle: translations.matchmakerConfigurationDescription,
+  Widget get _detached => Obx(() {
+    if(_matchmakerController.type.value != ServerType.embedded) {
+      return const SizedBox.shrink();
+    }
+
+    return SettingTile(
+      icon: Icon(
+          FluentIcons.developer_board_24_regular
+      ),
+      title: Text(translations.matchmakerConfigurationDetachedName),
+      subtitle: Text(translations.matchmakerConfigurationDetachedDescription),
+      contentWidth: null,
+      content: Row(
+        children: [
+          Text(
+              _matchmakerController.detached.value ? translations.on : translations.off
+          ),
+          const SizedBox(
+              width: 16.0
+          ),
+          ToggleSwitch(
+              checked: _matchmakerController.detached.value,
+              onChanged: (value) => _matchmakerController.detached.value = value
+          ),
+        ],
+      ),
+    );
+  });
+
+  Widget get _gameServerAddress => Obx(() {
+    if(_matchmakerController.type.value != ServerType.embedded) {
+      return const SizedBox.shrink();
+    }
+
+    return SettingTile(
+        icon: Icon(
+            FluentIcons.stream_input_20_regular
+        ),
+        title: Text(translations.matchmakerConfigurationAddressName),
+        subtitle: Text(translations.matchmakerConfigurationAddressDescription),
+        content: TextFormBox(
+            placeholder: translations.matchmakerConfigurationAddressName,
+            controller: _matchmakerController.gameServerAddress,
+            focusNode: _matchmakerController.gameServerAddressFocusNode
+        )
+    );
+  });
+
+  Widget get _port => Obx(() {
+    if(_matchmakerController.type.value == ServerType.embedded) {
+      return const SizedBox.shrink();
+    }
+
+    return SettingTile(
+        icon: Icon(
+            fluentUi.FluentIcons.number_field
+        ),
+        title: Text(translations.matchmakerConfigurationPortName),
+        subtitle: Text(translations.matchmakerConfigurationPortDescription),
+        content: TextFormBox(
+            placeholder: translations.matchmakerConfigurationPortName,
+            controller: _matchmakerController.port,
+            keyboardType: TextInputType.number,
+            inputFormatters: [
+              FilteringTextInputFormatter.digitsOnly
+            ]
+        )
+    );
+  });
+
+  Widget get _hostName => Obx(() {
+    if(_matchmakerController.type.value == ServerType.remote) {
+      return const SizedBox.shrink();
+    }
+
+    return SettingTile(
+        icon: Icon(
+            FluentIcons.globe_24_regular
+        ),
+        title: Text(translations.matchmakerConfigurationHostName),
+        subtitle: Text(translations.matchmakerConfigurationHostDescription),
+        content: TextFormBox(
+            placeholder: translations.matchmakerConfigurationHostName,
+            controller: _matchmakerController.host
+        )
+    );
+  });
+
+  Widget get _type => SettingTile(
+      icon: Icon(
+          FluentIcons.people_24_regular
+      ),
+      title: Text(translations.matchmakerTypeName),
+      subtitle: Text(translations.matchmakerTypeDescription),
      content: const ServerTypeSelector(
          authenticator: false
-      ),
-      expandedContent: [
-        if(_matchmakerController.type.value == ServerType.remote)
-          SettingTile(
-              title: translations.matchmakerConfigurationHostName,
-              subtitle: translations.matchmakerConfigurationHostDescription,
-              isChild: true,
-              content: TextFormBox(
-                  placeholder: translations.matchmakerConfigurationHostName,
-                  controller: _matchmakerController.host
-              )
-          ),
-        if(_matchmakerController.type.value != ServerType.embedded)
-          SettingTile(
-              title: translations.matchmakerConfigurationPortName,
-              subtitle: translations.matchmakerConfigurationPortDescription,
-              isChild: true,
-              content: TextFormBox(
-                  placeholder: translations.matchmakerConfigurationPortName,
-                  controller: _matchmakerController.port,
-                  keyboardType: TextInputType.number,
-                  inputFormatters: [
-                    FilteringTextInputFormatter.digitsOnly
-                  ]
-              )
-          ),
-        if(_matchmakerController.type.value == ServerType.embedded)
-          SettingTile(
-              title: translations.matchmakerConfigurationAddressName,
-              subtitle: translations.matchmakerConfigurationAddressDescription,
-              isChild: true,
-              content: TextFormBox(
-                  placeholder: translations.matchmakerConfigurationAddressName,
-                  controller: _matchmakerController.gameServerAddress,
-                  focusNode: _matchmakerController.gameServerAddressFocusNode
-              )
-          ),
-        if(_matchmakerController.type.value == ServerType.embedded)
-          SettingTile(
-            title: translations.matchmakerConfigurationDetachedName,
-            subtitle: translations.matchmakerConfigurationDetachedDescription,
-            contentWidth: null,
-            isChild: true,
-            content: Obx(() => Row(
-              children: [
-                Text(
-                    _matchmakerController.detached.value ? translations.on : translations.off
-                ),
-                const SizedBox(
-                    width: 16.0
-                ),
-                ToggleSwitch(
-                    checked: _matchmakerController.detached.value,
-                    onChanged: (value) => _matchmakerController.detached.value = value
-                ),
-              ],
-            )),
-          )
-      ]
-  ));
-
-  SettingTile get _installationDirectory => SettingTile(
-      title: translations.matchmakerInstallationDirectoryName,
-      subtitle: translations.matchmakerInstallationDirectoryDescription,
-      content: Button(
-          onPressed: () => launchUrl(matchmakerDirectory.uri),
-          child: Text(translations.matchmakerInstallationDirectoryContent)
      )
  );

+  Widget get _installationDirectory => Obx(() {
+    if(_matchmakerController.type.value != ServerType.embedded) {
+      return const SizedBox.shrink();
+    }
+
+    return SettingTile(
+        icon: Icon(
+            FluentIcons.folder_24_regular
+        ),
+        title: Text(translations.matchmakerInstallationDirectoryName),
+        subtitle: Text(translations.matchmakerInstallationDirectoryDescription),
+        content: Button(
+            onPressed: () => launchUrl(matchmakerDirectory.uri),
+            child: Text(translations.matchmakerInstallationDirectoryContent)
+        )
+    );
+  });
+
  SettingTile get _resetDefaults => SettingTile(
-      title: translations.matchmakerResetDefaultsName,
-      subtitle: translations.matchmakerResetDefaultsDescription,
+      icon: Icon(
+          FluentIcons.arrow_reset_24_regular
+      ),
+      title: Text(translations.matchmakerResetDefaultsName),
+      subtitle: Text(translations.matchmakerResetDefaultsDescription),
      content: Button(
        onPressed: () => showResetDialog(_matchmakerController.reset),
        child: Text(translations.matchmakerResetDefaultsContent),
--- a/gui/lib/src/page/implementation/play_page.dart
+++ b/gui/lib/src/page/implementation/play_page.dart
@@ -1,16 +1,16 @@
-import 'package:fluent_ui/fluent_ui.dart';
+import 'package:fluent_ui/fluent_ui.dart' hide FluentIcons;
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:get/get.dart';
 import 'package:reboot_common/common.dart';
 import 'package:reboot_launcher/src/controller/hosting_controller.dart';
 import 'package:reboot_launcher/src/controller/matchmaker_controller.dart';
 import 'package:reboot_launcher/src/page/abstract/page.dart';
-import 'package:reboot_launcher/src/page/abstract/page_setting.dart';
 import 'package:reboot_launcher/src/page/abstract/page_type.dart';
 import 'package:reboot_launcher/src/page/pages.dart';
 import 'package:reboot_launcher/src/util/translations.dart';
-import 'package:reboot_launcher/src/widget/common/setting_tile.dart';
-import 'package:reboot_launcher/src/widget/game/start_button.dart';
-import 'package:reboot_launcher/src/widget/version/version_selector_tile.dart';
+import 'package:reboot_launcher/src/widget/game_start_button.dart';
+import 'package:reboot_launcher/src/widget/setting_tile.dart';
+import 'package:reboot_launcher/src/widget/version_selector_tile.dart';


 class PlayPage extends RebootPage {
@@ -20,7 +20,7 @@ class PlayPage extends RebootPage {
  RebootPageState<PlayPage> createState() => _PlayPageState();

  @override
-  bool get hasButton => true;
+  bool hasButton(String? pageName) => pageName == null;

  @override
  String get name => translations.playName;
@@ -30,33 +30,6 @@ class PlayPage extends RebootPage {

  @override
  RebootPageType get type => RebootPageType.play;
-
-  @override
-  List<PageSetting> get settings => [
-    versionSelectorRebootSetting,
-    PageSetting(
-        name: translations.playGameServerName,
-        description: translations.playGameServerDescription,
-        content: translations.playGameServerContentLocal,
-        children: [
-          PageSetting(
-              name: translations.playGameServerHostName,
-              description: translations.playGameServerHostDescription,
-              content: translations.playGameServerHostName
-          ),
-          PageSetting(
-              name: translations.playGameServerBrowserName,
-              description: translations.playGameServerBrowserDescription,
-              content: translations.playGameServerBrowserName
-          ),
-          PageSetting(
-              name: translations.playGameServerCustomName,
-              description: translations.playGameServerCustomDescription,
-              content: translations.playGameServerCustomContent
-          )
-        ]
-    )
-  ];
 }

 class _PlayPageState extends RebootPageState<PlayPage> {
@@ -84,60 +57,39 @@ class _PlayPageState extends RebootPageState<PlayPage> {

  @override
  List<SettingTile> get settings => [
-    versionSelectorSettingTile,
-    _gameServerSelector
+    versionSelectSettingTile,
+    _hostSettingTile,
+    _browseServerTile,
+    _matchmakerTile
  ];

-  SettingTile get _gameServerSelector => SettingTile(
-      title: translations.playGameServerName,
-      subtitle: translations.playGameServerDescription,
-      content: IgnorePointer(
-        child: Button(
-            style: ButtonStyle(
-                backgroundColor: ButtonState.all(FluentTheme.of(context).resources.controlFillColorDefault)
-            ),
-            onPressed: () {},
-            child: Obx(() {
-              var address = _matchmakerController.gameServerAddress.text;
-              var owner = _matchmakerController.gameServerOwner.value;
-              return Text(
-                  isLocalHost(address) ? translations.playGameServerContentLocal : owner != null ? translations.playGameServerContentBrowser(owner) : address,
-                  textAlign: TextAlign.start
-              );
-            })
-        ),
-      ),
-      expandedContent: [
-        SettingTile(
-            title: translations.playGameServerHostName,
-            subtitle: translations.playGameServerHostDescription,
-            content: Button(
-                onPressed: () => pageIndex.value = RebootPageType.host.index,
-                child: Text(translations.playGameServerHostName)
-            ),
-            isChild: true
-        ),
-        SettingTile(
-            title: translations.playGameServerBrowserName,
-            subtitle: translations.playGameServerBrowserDescription,
-            content: Button(
-                onPressed: () => pageIndex.value = RebootPageType.browser.index,
-                child: Text(translations.playGameServerBrowserName)
-            ),
-            isChild: true
-        ),
-        SettingTile(
-            title: translations.playGameServerCustomName,
-            subtitle: translations.playGameServerCustomDescription,
-            content: Button(
-                onPressed: () {
-                  pageIndex.value = RebootPageType.matchmaker.index;
-                  WidgetsBinding.instance.addPostFrameCallback((_) => _matchmakerController.gameServerAddressFocusNode.requestFocus());
-                },
-                child: Text(translations.playGameServerCustomContent)
-            ),
-            isChild: true
-        )
-      ]
+  SettingTile get _matchmakerTile => SettingTile(
+    onPressed: () {
+      pageIndex.value = RebootPageType.matchmaker.index;
+      WidgetsBinding.instance.addPostFrameCallback((_) => _matchmakerController.gameServerAddressFocusNode.requestFocus());
+    },
+    icon: Icon(
+        FluentIcons.globe_24_regular
+    ),
+    title: Text(translations.playGameServerCustomName),
+    subtitle: Text(translations.playGameServerCustomDescription),
+  );
+
+  SettingTile get _browseServerTile => SettingTile(
+    onPressed: () => pageIndex.value = RebootPageType.browser.index,
+    icon: Icon(
+        FluentIcons.search_24_regular
+    ),
+    title: Text(translations.playGameServerBrowserName),
+    subtitle: Text(translations.playGameServerBrowserDescription)
+  );
+
+  SettingTile get _hostSettingTile => SettingTile(
+    onPressed: () => pageIndex.value = RebootPageType.host.index,
+    icon: Icon(
+        FluentIcons.desktop_24_regular
+    ),
+    title: Text(translations.playGameServerHostName),
+    subtitle: Text(translations.playGameServerHostDescription),
  );
 }
--- a/gui/lib/src/page/implementation/server_browser_page.dart
+++ b/gui/lib/src/page/implementation/server_browser_page.dart
@@ -9,11 +9,9 @@ import 'package:reboot_launcher/src/controller/hosting_controller.dart';
 import 'package:reboot_launcher/src/controller/matchmaker_controller.dart';
 import 'package:reboot_launcher/src/dialog/implementation/server.dart';
 import 'package:reboot_launcher/src/page/abstract/page.dart';
-import 'package:reboot_launcher/src/page/abstract/page_setting.dart';
 import 'package:reboot_launcher/src/page/abstract/page_type.dart';
 import 'package:reboot_launcher/src/util/translations.dart';
-import 'package:reboot_launcher/src/widget/common/setting_tile.dart';
-import 'package:skeletons/skeletons.dart';
+import 'package:reboot_launcher/src/widget/setting_tile.dart';

 class BrowsePage extends RebootPage {
  const BrowsePage({Key? key}) : super(key: key);
@@ -28,13 +26,10 @@ class BrowsePage extends RebootPage {
  String get iconAsset => "assets/images/server_browser.png";

  @override
-  bool get hasButton => false;
+  bool hasButton(String? pageName) => false;

  @override
  RebootPageState<BrowsePage> createState() => _BrowsePageState();
-
-  @override
-  List<PageSetting> get settings => [];
 }

 class _BrowsePageState extends RebootPageState<BrowsePage> {
@@ -73,28 +68,22 @@ class _BrowsePageState extends RebootPageState<BrowsePage> {
    ],
  );

-  Widget _buildPageBody(Set<Map<String, dynamic>> data) => Column(
-    children: [
-      _searchBar,
-
-      const SizedBox(
-        height: 16,
-      ),
-
-      Expanded(
-        child: StreamBuilder<String?>(
-            stream: _filterControllerStream.stream,
-            builder: (context, filterSnapshot)  {
-              var items = data.where((entry) => _isValidItem(entry, filterSnapshot.data)).toSet();
-              if(items.isEmpty) {
-                return _noServersByQuery;
-              }
-
-              return _buildPopulatedListBody(items);
-            }
-        ),
-      )
-    ],
+  Widget _buildPageBody(Set<Map<String, dynamic>> data) => StreamBuilder(
+      stream: _filterControllerStream.stream,
+      builder: (context, filterSnapshot)  {
+        final items = data.where((entry) => _isValidItem(entry, filterSnapshot.data)).toSet();
+        return Column(
+          children: [
+            _searchBar,
+            const SizedBox(
+              height: 16,
+            ),
+            Expanded(
+              child: items.isEmpty ? _noServersByQuery : _buildPopulatedListBody(items)
+            ),
+          ],
+        );
+      }
  );

  Widget _buildPopulatedListBody(Set<Map<String, dynamic>> items) => ListView.builder(
@@ -109,17 +98,16 @@ class _BrowsePageState extends RebootPageState<BrowsePage> {
        var entry = items.elementAt(index ~/ 2);
        var hasPassword = entry["password"] != null;
        return SettingTile(
-            title: "${_formatName(entry)} • ${entry["author"]}",
-            subtitle: "${_formatDescription(entry)} • ${_formatVersion(entry)}",
+            icon: Icon(
+                hasPassword ? FluentIcons.lock : FluentIcons.globe
+            ),
+            title: Text("${_formatName(entry)} • ${entry["author"]}"),
+            subtitle: Text("${_formatDescription(entry)} • ${_formatVersion(entry)}"),
            content: Button(
              onPressed: () => _matchmakerController.joinServer(_hostingController.uuid, entry),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
-                  if(hasPassword)
-                    const Icon(FluentIcons.lock),
-                  if(hasPassword)
-                    const SizedBox(width: 8.0),
                  Text(_matchmakerController.type.value == ServerType.embedded ? translations.joinServer : translations.copyIp),
                ],
              ),
@@ -177,12 +165,20 @@ class _BrowsePageState extends RebootPageState<BrowsePage> {
    return false;
  }

-  Widget get _searchBar => TextBox(
-    placeholder: translations.findServer,
-    controller: _filterController,
-    autofocus: true,
-    onChanged: (value) => _filterControllerStream.add(value),
-    suffix: _searchBarIcon,
+  Widget get _searchBar => Align(
+    alignment: Alignment.centerLeft,
+    child: ConstrainedBox(
+      constraints: BoxConstraints(
+        maxWidth: 350
+      ),
+      child: TextBox(
+        placeholder: translations.findServer,
+        controller: _filterController,
+        autofocus: true,
+        onChanged: (value) => _filterControllerStream.add(value),
+        suffix: _searchBarIcon,
+      ),
+    ),
  );

  Widget get _searchBarIcon => Button(
@@ -191,8 +187,8 @@ class _BrowsePageState extends RebootPageState<BrowsePage> {
        _filterControllerStream.add("");
      },
      style: ButtonStyle(
-          backgroundColor: _filterController.text.isNotEmpty ? null : ButtonState.all(Colors.transparent),
-          border: _filterController.text.isNotEmpty ? null : ButtonState.all(const BorderSide(color: Colors.transparent))
+          backgroundColor: ButtonState.all(Colors.transparent),
+          shape: ButtonState.all(Border())
      ),
      child: _searchBarIconData
  );
--- a/gui/lib/src/page/implementation/server_host_page.dart
+++ b/gui/lib/src/page/implementation/server_host_page.dart
@@ -1,21 +1,20 @@
 import 'package:clipboard/clipboard.dart';
 import 'package:dart_ipify/dart_ipify.dart';
-import 'package:fluent_ui/fluent_ui.dart';
-import 'package:flutter/material.dart' show Icons;
+import 'package:fluent_ui/fluent_ui.dart' hide FluentIcons;
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:get/get.dart';
 import 'package:reboot_launcher/main.dart';
 import 'package:reboot_launcher/src/controller/game_controller.dart';
 import 'package:reboot_launcher/src/controller/hosting_controller.dart';
+import 'package:reboot_launcher/src/dialog/abstract/info_bar.dart';
 import 'package:reboot_launcher/src/dialog/implementation/data.dart';
 import 'package:reboot_launcher/src/dialog/implementation/server.dart';
 import 'package:reboot_launcher/src/page/abstract/page.dart';
-import 'package:reboot_launcher/src/page/abstract/page_setting.dart';
 import 'package:reboot_launcher/src/page/abstract/page_type.dart';
 import 'package:reboot_launcher/src/util/translations.dart';
-import 'package:reboot_launcher/src/widget/common/setting_tile.dart';
-import 'package:reboot_launcher/src/widget/game/start_button.dart';
-import 'package:reboot_launcher/src/widget/version/version_selector_tile.dart';
-import 'package:sync/semaphore.dart';
+import 'package:reboot_launcher/src/widget/game_start_button.dart';
+import 'package:reboot_launcher/src/widget/setting_tile.dart';
+import 'package:reboot_launcher/src/widget/version_selector_tile.dart';

 class HostPage extends RebootPage {
  const HostPage({Key? key}) : super(key: key);
@@ -30,64 +29,15 @@ class HostPage extends RebootPage {
  RebootPageType get type => RebootPageType.host;

  @override
-  bool get hasButton => true;
+  bool hasButton(String? pageName) => pageName == null;

  @override
  RebootPageState<HostPage> createState() => _HostingPageState();
-
-  @override
-  List<PageSetting> get settings => [
-    PageSetting(
-      name: translations.hostGameServerName,
-      description: translations.hostGameServerDescription,
-      children: [
-        PageSetting(
-            name: translations.hostGameServerNameName,
-            description: translations.hostGameServerNameDescription
-        ),
-        PageSetting(
-            name: translations.hostGameServerDescriptionName,
-            description: translations.hostGameServerDescriptionDescription
-        ),
-        PageSetting(
-            name: translations.hostGameServerPasswordName,
-            description: translations.hostGameServerDescriptionDescription
-        ),
-        PageSetting(
-            name: translations.hostGameServerDiscoverableName,
-            description: translations.hostGameServerDiscoverableDescription
-        )
-      ],
-    ),
-    versionSelectorRebootSetting,
-    PageSetting(
-      name: translations.hostShareName,
-      description: translations.hostShareDescription,
-      children: [
-        PageSetting(
-            name: translations.hostShareLinkName,
-            description: translations.hostShareLinkDescription,
-            content: translations.hostShareLinkContent
-        ),
-        PageSetting(
-            name: translations.hostShareIpName,
-            description: translations.hostShareIpDescription,
-            content: translations.hostShareIpContent
-        )
-      ],
-    ),
-    PageSetting(
-        name: translations.hostResetName,
-        description: translations.hostResetDescription,
-        content: translations.hostResetContent
-    )
-  ];
 }

 class _HostingPageState extends RebootPageState<HostPage> {
  final GameController _gameController = Get.find<GameController>();
  final HostingController _hostingController = Get.find<HostingController>();
-  final Semaphore _semaphore = Semaphore();

  late final RxBool _showPasswordTrailing = RxBool(_hostingController.password.text.isNotEmpty);

@@ -110,16 +60,20 @@ class _HostingPageState extends RebootPageState<HostPage> {
  );

  @override
-  List<SettingTile> get settings => [
+  List<Widget> get settings => [
    _gameServer,
-    versionSelectorSettingTile,
+    versionSelectSettingTile,
+    _headless,
    _share,
    _resetDefaults
  ];

  SettingTile get _resetDefaults => SettingTile(
-      title: translations.hostResetName,
-      subtitle: translations.hostResetDescription,
+      icon: Icon(
+          FluentIcons.arrow_reset_24_regular
+      ),
+      title: Text(translations.hostResetName),
+      subtitle: Text(translations.hostResetDescription),
      content: Button(
        onPressed: () => showResetDialog(_hostingController.reset),
        child: Text(translations.hostResetContent),
@@ -127,13 +81,18 @@ class _HostingPageState extends RebootPageState<HostPage> {
  );

  SettingTile get _gameServer => SettingTile(
-      title: translations.hostGameServerName,
-      subtitle: translations.hostGameServerDescription,
-      expandedContent: [
+      icon: Icon(
+          FluentIcons.info_24_regular
+      ),
+      title: Text(translations.hostGameServerName),
+      subtitle: Text(translations.hostGameServerDescription),
+      children: [
        SettingTile(
-            title: translations.hostGameServerNameName,
-            subtitle: translations.hostGameServerNameDescription,
-            isChild: true,
+            icon: Icon(
+                FluentIcons.textbox_24_regular
+            ),
+            title: Text(translations.hostGameServerNameName),
+            subtitle: Text(translations.hostGameServerNameDescription),
            content: TextFormBox(
                placeholder: translations.hostGameServerNameName,
                controller: _hostingController.name,
@@ -141,9 +100,11 @@ class _HostingPageState extends RebootPageState<HostPage> {
            )
        ),
        SettingTile(
-            title: translations.hostGameServerDescriptionName,
-            subtitle: translations.hostGameServerDescriptionDescription,
-            isChild: true,
+            icon: Icon(
+                FluentIcons.text_description_24_regular
+            ),
+            title: Text(translations.hostGameServerDescriptionName),
+            subtitle: Text(translations.hostGameServerDescriptionDescription),
            content: TextFormBox(
                placeholder: translations.hostGameServerDescriptionName,
                controller: _hostingController.description,
@@ -151,9 +112,11 @@ class _HostingPageState extends RebootPageState<HostPage> {
            )
        ),
        SettingTile(
-            title: translations.hostGameServerPasswordName,
-            subtitle: translations.hostGameServerDescriptionDescription,
-            isChild: true,
+            icon: Icon(
+                FluentIcons.password_24_regular
+            ),
+            title: Text(translations.hostGameServerPasswordName),
+            subtitle: Text(translations.hostGameServerDescriptionDescription),
            content: Obx(() => TextFormBox(
                placeholder: translations.hostGameServerPasswordName,
                controller: _hostingController.password,
@@ -172,16 +135,18 @@ class _HostingPageState extends RebootPageState<HostPage> {
                      backgroundColor: ButtonState.all(Colors.transparent)
                  ),
                  child: Icon(
-                      _hostingController.showPassword.value ? Icons.visibility_off : Icons.visibility,
+                      _hostingController.showPassword.value ? FluentIcons.eye_off_24_filled : FluentIcons.eye_24_filled,
                      color: _showPasswordTrailing.value ? null : Colors.transparent
                  ),
                )
            ))
        ),
        SettingTile(
-            title: translations.hostGameServerDiscoverableName,
-            subtitle: translations.hostGameServerDiscoverableDescription,
-            isChild: true,
+            icon: Icon(
+                FluentIcons.eye_24_regular
+            ),
+            title: Text(translations.hostGameServerDiscoverableName),
+            subtitle: Text(translations.hostGameServerDiscoverableDescription),
            contentWidth: null,
            content: Obx(() => Row(
              children: [
@@ -204,14 +169,43 @@ class _HostingPageState extends RebootPageState<HostPage> {
      ]
  );

+  Widget get _headless => Obx(() => SettingTile(
+    icon: Icon(
+        FluentIcons.window_console_20_regular
+    ),
+    title: Text(translations.hostHeadlessName),
+    subtitle: Text(translations.hostHeadlessDescription),
+    contentWidth: null,
+    content: Row(
+      children: [
+        Text(
+            _hostingController.headless.value ? translations.on : translations.off
+        ),
+        const SizedBox(
+            width: 16.0
+        ),
+        ToggleSwitch(
+            checked: _hostingController.headless.value,
+            onChanged: (value) => _hostingController.headless.value = value
+        ),
+      ],
+    ),
+  ),
+  );
+
  SettingTile get _share => SettingTile(
-    title: translations.hostShareName,
-    subtitle: translations.hostShareDescription,
-    expandedContent: [
+    icon: Icon(
+        FluentIcons.link_24_regular
+    ),
+    title: Text(translations.hostShareName),
+    subtitle: Text(translations.hostShareDescription),
+    children: [
      SettingTile(
-          title: translations.hostShareLinkName,
-          subtitle: translations.hostShareLinkDescription,
-          isChild: true,
+          icon: Icon(
+              FluentIcons.link_24_regular
+          ),
+          title: Text(translations.hostShareLinkName),
+          subtitle: Text(translations.hostShareLinkDescription),
          content: Button(
            onPressed: () async {
              FlutterClipboard.controlC("$kCustomUrlSchema://${_hostingController.uuid}");
@@ -221,9 +215,11 @@ class _HostingPageState extends RebootPageState<HostPage> {
          )
      ),
      SettingTile(
-          title: translations.hostShareIpName,
-          subtitle: translations.hostShareIpDescription,
-          isChild: true,
+          icon: Icon(
+              FluentIcons.globe_24_regular
+          ),
+          title: Text(translations.hostShareIpName),
+          subtitle: Text(translations.hostShareIpDescription),
          content: Button(
            onPressed: () async {
              try {
@@ -247,15 +243,12 @@ class _HostingPageState extends RebootPageState<HostPage> {
    }

    try {
-      _semaphore.acquire();
      _hostingController.publishServer(
          _gameController.username.text,
          _hostingController.instance.value!.versionName
      );
    } catch(error) {
      _showCannotUpdateGameServer(error);
-    } finally {
-      _semaphore.release();
    }
  }

@@ -278,12 +271,12 @@ class _HostingPageState extends RebootPageState<HostPage> {
  void _showCannotCopyIp(Object error) => showInfoBar(
      translations.hostShareIpMessageError(error.toString()),
      severity: InfoBarSeverity.error,
-      duration: snackbarLongDuration
+      duration: infoBarLongDuration
  );

  void _showCannotUpdateGameServer(Object error) => showInfoBar(
      translations.cannotUpdateGameServer(error.toString()),
      severity: InfoBarSeverity.success,
-      duration: snackbarLongDuration
+      duration: infoBarLongDuration
  );
 }
--- a/gui/lib/src/page/implementation/settings_page.dart
+++ b/gui/lib/src/page/implementation/settings_page.dart
@@ -1,21 +1,23 @@
-import 'package:fluent_ui/fluent_ui.dart';
+import 'package:fluent_ui/fluent_ui.dart' as fluentUi show FluentIcons;
+import 'package:fluent_ui/fluent_ui.dart' hide FluentIcons;
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_gen/gen_l10n/reboot_localizations.dart';
 import 'package:flutter_localized_locales/flutter_localized_locales.dart';
 import 'package:get/get.dart';
 import 'package:reboot_common/common.dart';
 import 'package:reboot_launcher/src/controller/game_controller.dart';
+import 'package:reboot_launcher/src/controller/hosting_controller.dart';
 import 'package:reboot_launcher/src/controller/settings_controller.dart';
 import 'package:reboot_launcher/src/controller/update_controller.dart';
 import 'package:reboot_launcher/src/dialog/abstract/info_bar.dart';
 import 'package:reboot_launcher/src/dialog/implementation/data.dart';
 import 'package:reboot_launcher/src/page/abstract/page.dart';
-import 'package:reboot_launcher/src/page/abstract/page_setting.dart';
 import 'package:reboot_launcher/src/page/abstract/page_type.dart';
 import 'package:reboot_launcher/src/util/checks.dart';
 import 'package:reboot_launcher/src/util/translations.dart';
-import 'package:reboot_launcher/src/widget/common/file_selector.dart';
-import 'package:reboot_launcher/src/widget/common/setting_tile.dart';
-import 'package:flutter_gen/gen_l10n/reboot_localizations.dart';
+import 'package:reboot_launcher/src/widget/file_selector.dart';
+import 'package:reboot_launcher/src/widget/setting_tile.dart';
 import 'package:url_launcher/url_launcher.dart';

 class SettingsPage extends RebootPage {
@@ -31,91 +33,15 @@ class SettingsPage extends RebootPage {
  RebootPageType get type => RebootPageType.settings;

  @override
-  bool get hasButton => false;
+  bool hasButton(String? pageName) => false;

  @override
  RebootPageState<SettingsPage> createState() => _SettingsPageState();
-
-  @override
-  List<PageSetting> get settings => [
-    PageSetting(
-      name: translations.settingsClientName,
-      description: translations.settingsClientDescription,
-      children: [
-        PageSetting(
-            name: translations.settingsClientConsoleName,
-            description: translations.settingsClientConsoleDescription
-        ),
-        PageSetting(
-            name: translations.settingsClientAuthName,
-            description: translations.settingsClientAuthDescription
-        ),
-        PageSetting(
-            name: translations.settingsClientMemoryName,
-            description: translations.settingsClientMemoryDescription
-        ),
-        PageSetting(
-            name: translations.settingsClientArgsName,
-            description: translations.settingsClientArgsDescription
-        ),
-      ],
-    ),
-    PageSetting(
-      name: translations.settingsServerName,
-      description: translations.settingsServerSubtitle,
-      children: [
-        PageSetting(
-            name: translations.settingsServerFileName,
-            description: translations.settingsServerFileDescription
-        ),
-        PageSetting(
-            name: translations.settingsServerPortName,
-            description: translations.settingsServerPortDescription
-        ),
-        PageSetting(
-            name: translations.settingsServerMirrorName,
-            description: translations.settingsServerMirrorDescription
-        ),
-        PageSetting(
-            name: translations.settingsServerTimerName,
-            description: translations.settingsServerTimerSubtitle
-        ),
-      ],
-    ),
-    PageSetting(
-      name: translations.settingsUtilsName,
-      description: translations.settingsUtilsSubtitle,
-      children: [
-        PageSetting(
-            name: translations.settingsUtilsThemeName,
-            description: translations.settingsUtilsThemeDescription,
-        ),
-        PageSetting(
-          name: translations.settingsUtilsLanguageName,
-          description: translations.settingsUtilsLanguageDescription,
-        ),
-        PageSetting(
-            name: translations.settingsUtilsInstallationDirectoryName,
-            description: translations.settingsUtilsInstallationDirectorySubtitle,
-            content: translations.settingsUtilsInstallationDirectoryContent
-        ),
-        PageSetting(
-            name: translations.settingsUtilsBugReportName,
-            description: translations.settingsUtilsBugReportSubtitle,
-            content: translations.settingsUtilsBugReportContent
-        ),
-        PageSetting(
-            name: translations.settingsUtilsResetDefaultsName,
-            description: translations.settingsUtilsResetDefaultsSubtitle,
-            content: translations.settingsUtilsResetDefaultsContent
-        )
-      ],
-    )
-  ];
 }

 class _SettingsPageState extends RebootPageState<SettingsPage> {
  final GameController _gameController  = Get.find<GameController>();
+  final HostingController _hostingController = Get.find<HostingController>();
  final SettingsController _settingsController = Get.find<SettingsController>();
  final UpdateController _updateController = Get.find<UpdateController>();

@@ -126,13 +52,29 @@ class _SettingsPageState extends RebootPageState<SettingsPage> {
  List<Widget> get settings => [
    _clientSettings,
    _gameServerSettings,
-    _launcherUtilities
+    _launcherSettings,
+    _installationDirectory
  ];

+  SettingTile get _installationDirectory => SettingTile(
+      icon: Icon(
+          FluentIcons.folder_24_regular
+      ),
+      title: Text(translations.settingsUtilsInstallationDirectoryName),
+      subtitle: Text(translations.settingsUtilsInstallationDirectorySubtitle),
+      content: Button(
+        onPressed: () => launchUrl(installationDirectory.uri),
+        child: Text(translations.settingsUtilsInstallationDirectoryContent),
+      )
+  );
+
  SettingTile get _clientSettings => SettingTile(
-    title: translations.settingsClientName,
-    subtitle: translations.settingsClientDescription,
-    expandedContent: [
+    icon: Icon(
+        FluentIcons.desktop_24_regular
+    ),
+    title: Text(translations.settingsClientName),
+    subtitle: Text(translations.settingsClientDescription),
+    children: [
      _createFileSetting(
          title: translations.settingsClientConsoleName,
          description: translations.settingsClientConsoleDescription,
@@ -149,9 +91,11 @@ class _SettingsPageState extends RebootPageState<SettingsPage> {
          controller: _settingsController.memoryLeakDll
      ),
      SettingTile(
-          title: translations.settingsClientArgsName,
-          subtitle: translations.settingsClientArgsDescription,
-          isChild: true,
+          icon: Icon(
+              FluentIcons.text_box_settings_24_regular
+          ),
+          title: Text(translations.settingsClientArgsName),
+          subtitle: Text(translations.settingsClientArgsDescription),
          content: TextFormBox(
            placeholder: translations.settingsClientArgsPlaceholder,
            controller: _gameController.customLaunchArgs,
@@ -161,17 +105,23 @@ class _SettingsPageState extends RebootPageState<SettingsPage> {
  );

  SettingTile get _gameServerSettings => SettingTile(
-    title: translations.settingsServerName,
-    subtitle: translations.settingsServerSubtitle,
-    expandedContent: [
+    icon: Icon(
+        FluentIcons.server_24_regular
+    ),
+    title: Text(translations.settingsServerName),
+    subtitle: Text(translations.settingsServerSubtitle),
+    children: [
      _createFileSetting(
          title: translations.settingsServerFileName,
          description: translations.settingsServerFileDescription,
          controller: _settingsController.gameServerDll
      ),
      SettingTile(
-          title: translations.settingsServerPortName,
-          subtitle: translations.settingsServerPortDescription,
+          icon: Icon(
+              fluentUi.FluentIcons.number_field
+          ),
+          title: Text(translations.settingsServerPortName),
+          subtitle: Text(translations.settingsServerPortDescription),
          content: TextFormBox(
              placeholder:  translations.settingsServerPortName,
              controller: _settingsController.gameServerPort,
@@ -179,22 +129,26 @@ class _SettingsPageState extends RebootPageState<SettingsPage> {
              inputFormatters: [
                FilteringTextInputFormatter.digitsOnly
              ]
-          ),
-          isChild: true
+          )
      ),
      SettingTile(
-          title: translations.settingsServerMirrorName,
-          subtitle: translations.settingsServerMirrorDescription,
+          icon: Icon(
+              FluentIcons.globe_24_regular
+          ),
+          title: Text(translations.settingsServerMirrorName),
+          subtitle: Text(translations.settingsServerMirrorDescription),
          content: TextFormBox(
              placeholder:  translations.settingsServerMirrorPlaceholder,
              controller: _updateController.url,
              validator: checkUpdateUrl
-          ),
-          isChild: true
+          )       
      ),
      SettingTile(
-          title: translations.settingsServerTimerName,
-          subtitle: translations.settingsServerTimerSubtitle,
+          icon: Icon(
+              FluentIcons.timer_24_regular
+          ),
+          title: Text(translations.settingsServerTimerName),
+          subtitle: Text(translations.settingsServerTimerSubtitle),
          content: Obx(() => DropDownButton(
              leading: Text(_updateController.timer.value.text),
              items: UpdateTimer.values.map((entry) => MenuFlyoutItem(
@@ -205,20 +159,46 @@ class _SettingsPageState extends RebootPageState<SettingsPage> {
                    _updateController.update(true);
                  }
              )).toList()
-          )),
-          isChild: true
+          ))       
      ),
+      SettingTile(
+        icon: Icon(
+            FluentIcons.developer_board_24_regular
+        ),
+        title: Text(translations.playAutomaticServerName),
+        subtitle: Text(translations.playAutomaticServerDescription),
+        contentWidth: null,
+        content: Obx(() => Row(
+          children: [
+            Text(
+                _hostingController.automaticServer.value ? translations.on : translations.off
+            ),
+            const SizedBox(
+                width: 16.0
+            ),
+            ToggleSwitch(
+                checked: _hostingController.automaticServer.value,
+                onChanged: (value) => _hostingController.automaticServer.value = value
+            ),
+          ],
+        )),
+      )
    ],
  );

-  SettingTile get _launcherUtilities => SettingTile(
-    title: translations.settingsUtilsName,
-    subtitle: translations.settingsUtilsSubtitle,
-    expandedContent: [
+  SettingTile get _launcherSettings => SettingTile(
+    icon: Icon(
+        FluentIcons.play_24_regular
+    ),
+    title: Text(translations.settingsUtilsName),
+    subtitle: Text(translations.settingsUtilsSubtitle),
+    children: [
      SettingTile(
-          title: translations.settingsUtilsLanguageName,
-          subtitle: translations.settingsUtilsLanguageDescription,
-          isChild: true,
+          icon: Icon(
+              FluentIcons.local_language_24_regular
+          ),
+          title: Text(translations.settingsUtilsLanguageName),
+          subtitle: Text(translations.settingsUtilsLanguageDescription),
          content: Obx(() => DropDownButton(
              leading: Text(_getLocaleName(_settingsController.language.value)),
              items: AppLocalizations.supportedLocales.map((locale) => MenuFlyoutItem(
@@ -228,9 +208,11 @@ class _SettingsPageState extends RebootPageState<SettingsPage> {
          ))
      ),
      SettingTile(
-          title: translations.settingsUtilsThemeName,
-          subtitle: translations.settingsUtilsThemeDescription,
-          isChild: true,
+          icon: Icon(
+              FluentIcons.dark_theme_24_regular
+          ),
+          title: Text(translations.settingsUtilsThemeName),
+          subtitle: Text(translations.settingsUtilsThemeDescription),
          content: Obx(() => DropDownButton(
              leading: Text(_settingsController.themeMode.value.title),
              items: ThemeMode.values.map((themeMode) => MenuFlyoutItem(
@@ -240,27 +222,11 @@ class _SettingsPageState extends RebootPageState<SettingsPage> {
          ))
      ),
      SettingTile(
-          title: translations.settingsUtilsInstallationDirectoryName,
-          subtitle: translations.settingsUtilsInstallationDirectorySubtitle,
-          isChild: true,
-          content: Button(
-            onPressed: () => launchUrl(installationDirectory.uri),
-            child: Text(translations.settingsUtilsInstallationDirectoryContent),
-          )
-      ),
-      SettingTile(
-          title: translations.settingsUtilsBugReportName,
-          subtitle: translations.settingsUtilsBugReportSubtitle,
-          isChild: true,
-          content: Button(
-            onPressed: () => launchUrl(Uri.parse("https://github.com/Auties00/reboot_launcher/issues")),
-            child: Text(translations.settingsUtilsBugReportContent),
-          )
-      ),
-      SettingTile(
-          title: translations.settingsUtilsResetDefaultsName,
-          subtitle: translations.settingsUtilsResetDefaultsSubtitle,
-          isChild: true,
+          icon: Icon(
+              FluentIcons.arrow_reset_24_regular
+          ),
+          title: Text(translations.settingsUtilsResetDefaultsName),
+          subtitle: Text(translations.settingsUtilsResetDefaultsSubtitle),
          content: Button(
            onPressed: () => showResetDialog(_settingsController.reset),
            child: Text(translations.settingsUtilsResetDefaultsContent),
@@ -278,9 +244,12 @@ class _SettingsPageState extends RebootPageState<SettingsPage> {
    return locale;
  }

-  Widget _createFileSetting({required String title, required String description, required TextEditingController controller}) => SettingTile(
-      title: title,
-      subtitle: description,
+  SettingTile _createFileSetting({required String title, required String description, required TextEditingController controller}) => SettingTile(
+      icon: Icon(
+        FluentIcons.document_24_regular
+      ),
+      title: Text(title),
+      subtitle: Text(description),
      content: FileSelector(
          placeholder: translations.selectPathPlaceholder,
          windowTitle: translations.selectPathWindowTitle,
@@ -288,8 +257,7 @@ class _SettingsPageState extends RebootPageState<SettingsPage> {
          validator: checkDll,
          extension: "dll",
          folder: false
-      ),
-      isChild: true
+      )
  );
 }

--- a/gui/lib/src/page/pages.dart
+++ b/gui/lib/src/page/pages.dart
@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:collection';

 import 'package:fluent_ui/fluent_ui.dart';
@@ -11,6 +12,9 @@ import 'package:reboot_launcher/src/page/implementation/server_browser_page.dart
 import 'package:reboot_launcher/src/page/implementation/server_host_page.dart';
 import 'package:reboot_launcher/src/page/implementation/settings_page.dart';

+final StreamController<void> pagesController = StreamController.broadcast();
+bool hitBack = false;
+
 final List<RebootPage> pages = [
  const PlayPage(),
  const HostPage(),
@@ -25,19 +29,47 @@ final RxInt pageIndex = RxInt(0);

 final HashMap<int, GlobalKey> _pageKeys = HashMap();

-GlobalKey appKey = GlobalKey();
-GlobalKey get pageKey {
-  var index = pageIndex.value;
-  var key = _pageKeys[index];
+final GlobalKey appKey = GlobalKey();
+
+GlobalKey get pageKey => getPageKeyByIndex(pageIndex.value);
+
+GlobalKey getPageKeyByIndex(int index) {
+  final key = _pageKeys[index];
  if(key != null) {
    return key;
  }

-  var result = GlobalKey();
+  final result = GlobalKey();
  _pageKeys[index] = result;
  return result;
 }

-List<int> get pagesWithButtonIndexes => pages.where((page) => page.hasButton)
-    .map((page) => page.index)
-    .toList();
+bool get hasPageButton => pages[pageIndex.value].hasButton(pageStack.lastOrNull);
+
+final Queue<Object?> appStack = _createAppStack();
+Queue _createAppStack() {
+  final queue = Queue();
+  var lastValue = pageIndex.value;
+  pageIndex.listen((index) {
+    if(!hitBack && lastValue != index) {
+      queue.add(lastValue);
+      pagesController.add(null);
+    }
+
+    hitBack = false;
+    lastValue = index;
+  });
+  return queue;
+}
+
+final Map<int, Queue<String>> _pagesStack = Map.fromEntries(List.generate(pages.length, (index) => MapEntry(index, Queue<String>())));
+
+Queue<String> get pageStack => _pagesStack[pageIndex.value]!;
+
+void addSubPageToStack(String pageName) {
+  final index = pageIndex.value;
+  final identifier = "${index}_$pageName";
+  appStack.add(identifier);
+  _pagesStack[index]!.add(identifier);
+  pagesController.add(null);
+}